/* Toolvyn — industrial editorial dark system.
   Type pairing is deliberate: Segoe UI Variable (Windows' own display face)
   with Cascadia Mono (Microsoft's developer mono) for technical labels, so a
   Windows-native product reads as native on the web too. */

:root {
  color-scheme: dark;

  --ink: #07070b;
  --ink-raised: #0d0d13;
  --ink-card: #12121a;
  --ink-inset: #16161f;

  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);

  --text: #ececf3;
  --text-dim: #a3a3b4;
  --text-faint: #8a8a9c;

  --accent: #7c6cf5;
  --accent-bright: #9d90ff;
  --accent-glow: rgba(124, 108, 245, 0.35);
  --signal: #4ade9b;

  --display: "Segoe UI Variable Display", "Segoe UI", Inter, system-ui, -apple-system, sans-serif;
  --body: "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, -apple-system, sans-serif;
  --mono: "Cascadia Mono", Consolas, ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --text-hero: clamp(2.6rem, 1.1rem + 5.2vw, 5rem);
  --text-section: clamp(2rem, 1.1rem + 3.2vw, 3.9rem);
  --text-lede: clamp(1.05rem, 0.98rem + 0.42vw, 1.32rem);

  --shell: min(1280px, 100% - 3rem);
  --space-section: clamp(5rem, 3rem + 7vw, 10rem);

  --radius: 14px;
  --radius-lg: 22px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --fast: 160ms;
  --normal: 420ms;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Atmosphere: a single violet field behind the fold plus fine grain, so the
   page never reads as flat black. */
body::before {
  content: "";
  position: fixed;
  inset: -20% -10% auto -10%;
  height: 90vh;
  background:
    radial-gradient(58% 52% at 22% 0%, rgba(124, 108, 245, 0.22), transparent 70%),
    radial-gradient(42% 46% at 88% 12%, rgba(74, 222, 155, 0.08), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.035;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}

/* A class-level `display` beats the user-agent rule for [hidden], which would
   otherwise leave filtered-out cards on screen. */
[hidden] {
  display: none !important;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.03;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

::selection {
  background: var(--accent);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

.shell {
  width: var(--shell);
  margin-inline: auto;
  position: relative;
  z-index: 2;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  inset-inline-start: 1rem;
  top: -4rem;
  z-index: 100;
  background: var(--accent);
  color: #fff;
  padding: 0.7rem 1.1rem;
  border-radius: 8px;
  transition: top var(--fast) var(--ease);
}

.skip-link:focus {
  top: 1rem;
}

/* ---------- shared type utilities ---------- */

.mono {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.lede {
  font-size: var(--text-lede);
  color: var(--text-dim);
  line-height: 1.55;
  max-width: 54ch;
}

.accent {
  color: var(--accent-bright);
}

/* ---------- buttons ---------- */

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.5rem;
  border-radius: 10px;
  border: 1px solid transparent;
  font-family: var(--body);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--fast) var(--ease), background var(--fast) var(--ease),
    border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}

.button-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 12px 34px -14px var(--accent-glow);
}

.button-primary:hover {
  background: var(--accent-bright);
  transform: translateY(-2px);
  box-shadow: 0 18px 42px -14px var(--accent-glow);
}

.button-ghost {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--line-strong);
  color: var(--text);
}

.button-ghost:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-2px);
}

.button-small {
  padding: 0.55rem 1.05rem;
  font-size: 0.86rem;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease), gap var(--fast) var(--ease);
}

.text-link:hover {
  color: var(--accent-bright);
  border-color: var(--accent-bright);
  gap: 0.75rem;
}

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background var(--normal) var(--ease), border-color var(--normal) var(--ease),
    backdrop-filter var(--normal) var(--ease);
}

.site-header.is-stuck {
  background: rgba(7, 7, 11, 0.82);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.06rem;
  letter-spacing: -0.02em;
}

.brand img {
  width: 26px;
  height: 26px;
  border-radius: 7px;
}

.brand-tag {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  color: var(--accent-bright);
  border: 1px solid rgba(124, 108, 245, 0.4);
  border-radius: 4px;
  padding: 2px 5px;
  margin-left: 0.15rem;
}

.header-nav {
  display: flex;
  gap: 1.75rem;
  margin-inline-start: auto;
  font-size: 0.92rem;
  color: var(--text-dim);
}

.header-nav a {
  position: relative;
  padding: 0.3rem 0;
  transition: color var(--fast) var(--ease);
}

.header-nav a::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--accent-bright);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--normal) var(--ease);
}

.header-nav a:hover {
  color: var(--text);
}

.header-nav a:hover::after,
.header-nav a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}

.menu-toggle span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--fast) var(--ease), opacity var(--fast) var(--ease);
}

.menu-toggle[aria-expanded="true"] span:first-child {
  transform: translateY(3.25px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:last-child {
  transform: translateY(-3.25px) rotate(-45deg);
}

.mobile-nav {
  display: none;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem 0 1.25rem;
  border-top: 1px solid var(--line);
}

.mobile-nav a {
  padding: 0.75rem 0.25rem;
  font-size: 1.05rem;
  border-bottom: 1px solid var(--line);
  color: var(--text-dim);
}

.mobile-nav.is-open {
  display: flex;
}

/* ---------- hero ---------- */

.hero {
  padding-top: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem);
  padding-bottom: clamp(3rem, 2rem + 4vw, 6rem);
}

/* Above 1200px the hero becomes two columns so the product itself is on the
   first screen. Below that nothing changes: the stage keeps stacking under the
   copy, which is the right order when there is only one column to give it. */
@media (min-width: 1200px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
    align-items: center;
    column-gap: clamp(2rem, 3vw, 3.75rem);
    width: var(--shell);
    margin-inline: auto;
    /* Half the width means the same headline wraps to more lines, which pushed
       the download button off the first screen. The copy column gets its own,
       smaller display size so the call to action stays visible. */
    --text-hero: clamp(2.2rem, 0.5rem + 2.9vw, 3.4rem);
  }

  .hero-status {
    margin-bottom: 1rem;
  }

  .hero > .shell {
    width: 100%;
    margin-inline: 0;
  }

  /* The copy column is now half as wide, so the lede and the figures stack
     instead of sitting side by side. */
  .hero-lower {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
  }

  /* In the longest languages the lede runs to 326px and pushed the download
     button off the first screen. Lifting the button above it - visually only,
     the DOM order is untouched for screen readers and crawlers - puts the one
     action this page exists for directly under the headline, and lets the
     paragraph be the thing that runs past the fold instead. */
  .hero-lower > div:first-child {
    display: flex;
    flex-direction: column;
  }

  .hero-lower .hero-actions {
    order: -1;
    margin-top: 0;
    margin-bottom: 1.75rem;
  }

  .hero-aside {
    display: grid;
    gap: 1.5rem;
    align-content: center;
  }

  .hero-stage {
    width: 100%;
    margin: 0;
  }

  /* Four figures in a narrow column read better as a 2x2 than as a stack:
     the base rule is a flex column, so the display mode has to change too. */
  .hero-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem 1.5rem;
    margin-top: 0;
  }
}

.hero-status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.85rem 0.4rem 0.6rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
  margin-bottom: 1.75rem;
}

.hero-status .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 4px rgba(74, 222, 155, 0.14);
}

.hero-status span:last-child {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.hero h1 {
  font-size: var(--text-hero);
  max-width: 16ch;
  margin-bottom: 1.6rem;
}

.hero h1 em {
  font-style: normal;
  color: var(--accent-bright);
}

.hero-lower {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-top: 2rem;
}

.hero-meta {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-inline-start: 1.25rem;
  border-inline-start: 1px solid var(--line);
}

.hero-meta div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  padding: 0.3rem 0;
}

.hero-meta div b {
  color: var(--text);
  font-weight: 600;
}

/* The hero screenshot deliberately runs wider than the text column. */
.hero-stage {
  width: min(1480px, 100% - 1.5rem);
  margin: clamp(3rem, 2rem + 4vw, 5.5rem) auto 0;
  position: relative;
  z-index: 2;
}

.hero-stage::before {
  content: "";
  position: absolute;
  inset: 12% 6% -8%;
  background: radial-gradient(50% 50% at 50% 50%, var(--accent-glow), transparent 72%);
  filter: blur(60px);
  z-index: -1;
}

/* ---------- app window frame ---------- */

.frame {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--ink-raised);
  overflow: hidden;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.5);
}

.frame-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}

.frame-bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
}

.frame-bar span {
  margin-left: 0.5rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.frame img {
  width: 100%;
}

.frame-note {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.9rem;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: rgba(13, 13, 19, 0.92);
  backdrop-filter: blur(10px);
  font-size: 0.82rem;
  font-weight: 600;
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.9);
}

.frame-note .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal);
}

/* Kept inside the frame: the stage already runs to the viewport edge, so a
   negative offset would be clipped by the page's overflow guard. */
.frame-note-a {
  inset-inline-start: 22px;
  bottom: 22px;
}

.frame-note-b {
  inset-inline-end: 22px;
  bottom: 22px;
}

/* ---------- format ticker ---------- */

.ticker {
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
  border-block: 1px solid var(--line);
  padding: 1rem 0;
  overflow: hidden;
  position: relative;
  z-index: 2;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.ticker-track {
  display: flex;
  gap: 2.5rem;
  width: max-content;
  animation: ticker 46s linear infinite;
}

.ticker span {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.22em;
  color: var(--text-faint);
  white-space: nowrap;
}

.ticker span.on {
  color: var(--accent-bright);
}

@keyframes ticker {
  to {
    transform: translateX(-50%);
  }
}

/* ---------- section scaffolding ---------- */

.section {
  padding-block: var(--space-section);
  position: relative;
  z-index: 2;
  scroll-margin-top: 84px;
}

.section + .section {
  border-top: 1px solid var(--line);
}

.section-head {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 3rem);
  align-items: start;
  margin-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}

.section-index {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--text-faint);
  padding-top: 0.75rem;
  border-top: 1px solid var(--line-strong);
}

.section-head h2 {
  font-size: var(--text-section);
  max-width: 20ch;
  margin-bottom: 1.1rem;
}

/* ---------- steps ---------- */

.steps {
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 2rem + 4vw, 6rem);
}

.step {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.75rem, 4vw, 4.5rem);
  align-items: center;
}

.step:nth-child(even) .step-copy {
  order: 2;
}

.step-number {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--accent-bright);
  margin-bottom: 1rem;
  display: block;
}

.step h3 {
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.15rem);
  margin-bottom: 0.9rem;
}

.step p {
  color: var(--text-dim);
  max-width: 46ch;
}

.step-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.step-list li {
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
  font-size: 0.92rem;
  color: var(--text-dim);
}

.step-list li::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-2px);
}

.step-visual {
  position: relative;
}

/* ---------- capability showcase ---------- */

.showcase {
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}

.showcase-tabs {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}

.showcase-tab {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  padding: 1rem 0.9rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-inline-start: 2px solid transparent;
  color: var(--text-dim);
  font-family: var(--body);
  font-size: 1.02rem;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease),
    border-color var(--fast) var(--ease), padding-left var(--fast) var(--ease);
}

.showcase-tab:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
  padding-inline-start: 1.15rem;
}

.showcase-tab[aria-selected="true"] {
  color: var(--text);
  border-inline-start-color: var(--accent);
  background: linear-gradient(90deg, rgba(124, 108, 245, 0.14), transparent);
}

.showcase-tab em {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--text-faint);
  margin-inline-start: auto;
}

.showcase-tab[aria-selected="true"] em {
  color: var(--accent-bright);
}

.showcase-panel {
  display: grid;
  gap: 1.75rem;
}

.showcase-panel[hidden] {
  display: none;
}

/* Name the area first, show the evidence second. The frames hold no focusable
   elements, so visual order and tab order stay in agreement. */
.showcase-copy {
  order: 1;
}

.showcase-panel .frame {
  order: 2;
}

.showcase-copy h3 {
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.95rem);
  margin-bottom: 0.75rem;
}

.showcase-copy p {
  color: var(--text-dim);
  max-width: 60ch;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.4rem;
}

.chip {
  font-size: 0.82rem;
  color: var(--text-dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.34rem 0.8rem;
  background: rgba(255, 255, 255, 0.02);
}

.chip-more {
  border-color: rgba(124, 108, 245, 0.4);
  color: var(--accent-bright);
}

/* ---------- bento ---------- */

.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}

.tile {
  grid-column: span 2;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--ink-card), var(--ink-raised));
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: border-color var(--normal) var(--ease), transform var(--normal) var(--ease);
}

.tile:hover {
  border-color: var(--line-strong);
  transform: translateY(-3px);
}

.tile-wide {
  grid-column: span 3;
}

.tile-big {
  grid-column: span 4;
}

.tile h3 {
  font-size: 1.18rem;
  letter-spacing: -0.02em;
}

.tile p {
  font-size: 0.93rem;
  color: var(--text-dim);
}

.tile-stat {
  font-family: var(--display);
  font-size: clamp(2.4rem, 1.6rem + 2.4vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--accent-bright);
}

/* ---------- engines ---------- */

.engines {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.engine {
  padding: 1.5rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.012);
}

.engine b {
  display: block;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--text);
  margin-bottom: 0.45rem;
}

.engine span {
  font-size: 0.87rem;
  color: var(--text-dim);
  display: block;
}

.engine i {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: var(--accent-bright);
  display: block;
  margin-top: 0.6rem;
}

/* ---------- languages ---------- */

.languages {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.5rem;
  max-width: 62rem;
}

.languages span {
  font-family: var(--display);
  font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-faint);
  padding: 0.2rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.languages span:hover {
  color: var(--text);
  border-color: var(--line-strong);
}

/* ---------- download ---------- */

.download {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(90% 130% at 8% 0%, rgba(124, 108, 245, 0.16), transparent 62%),
    var(--ink-raised);
  padding: clamp(2rem, 1.5rem + 3vw, 4rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}

.download h2 {
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.2rem);
  margin-bottom: 1rem;
}

.spec {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--line);
}

.spec div {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.88rem;
}

.spec dt,
.spec span:first-child {
  color: var(--text-faint);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.spec span:last-child {
  color: var(--text);
  text-align: end;
  font-weight: 600;
  word-break: break-word;
}

/* ---------- faq ---------- */

.faq {
  border-top: 1px solid var(--line);
  max-width: 62rem;
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  list-style: none;
  cursor: pointer;
  padding-block: 1.35rem;
  padding-inline: 0 2.5rem;
  font-family: var(--display);
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  position: relative;
  transition: color var(--fast) var(--ease);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  position: absolute;
  inset-inline-end: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 1.2rem;
  color: var(--text-faint);
  transition: transform var(--normal) var(--ease), color var(--fast) var(--ease);
}

.faq details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
  color: var(--accent-bright);
}

.faq summary:hover {
  color: var(--accent-bright);
}

.faq p {
  color: var(--text-dim);
  padding-bottom: 1.4rem;
  max-width: 68ch;
}

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 3.5rem 2.5rem;
  position: relative;
  z-index: 2;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.footer-grid h4 {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 1rem;
  font-weight: 500;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: 0.92rem;
  color: var(--text-dim);
}

.footer-links a:hover {
  color: var(--text);
}

.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.83rem;
  color: var(--text-faint);
}

/* ---------- tools page ---------- */

/* A catalogue page is visited to find a tool, so the preamble earns less room
   here than on the landing page: the search field and the first rows of cards
   are what the visitor came for. */
.tools-hero {
  padding-top: clamp(2rem, 1.4rem + 1.8vw, 3rem);
  padding-bottom: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
}

.tools-hero h1 {
  font-size: clamp(2.1rem, 1.2rem + 2.6vw, 3.4rem);
  max-width: 22ch;
  margin-bottom: 1rem;
}

.tools-controls {
  position: sticky;
  top: 68px;
  z-index: 20;
  background: rgba(7, 7, 11, 0.9);
  backdrop-filter: blur(16px);
  border-block: 1px solid var(--line);
  padding-block: 1rem;
  margin-bottom: 2.5rem;
}

.search-field {
  position: relative;
  margin-bottom: 1rem;
}

.search-field input {
  width: 100%;
  padding-block: 0.9rem;
  padding-inline: 2.75rem 1rem;
  background: var(--ink-card);
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  color: var(--text);
  font-family: var(--body);
  font-size: 1rem;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}

.search-field input::placeholder {
  color: var(--text-faint);
}

.search-field input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--ink-inset);
}

.search-field svg {
  position: absolute;
  inset-inline-start: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  color: var(--text-faint);
  pointer-events: none;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.filter {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.46rem 0.9rem;
  cursor: pointer;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease),
    background var(--fast) var(--ease);
}

.filter:hover {
  color: var(--text);
  border-color: var(--line-strong);
}

.filter[aria-pressed="true"] {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

.result-count {
  margin-inline-start: auto;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.tool-card {
  background: var(--ink);
  padding: 1.5rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-height: 172px;
  transition: background var(--fast) var(--ease);
}

.tool-card:hover {
  background: var(--ink-card);
}

.tool-card-top {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.tool-card h3 {
  font-size: 1.06rem;
  letter-spacing: -0.02em;
}

.tool-card p {
  font-size: 0.9rem;
  color: var(--text-dim);
  flex: 1;
}

.tool-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.badge-popular {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-bright);
  border: 1px solid rgba(124, 108, 245, 0.4);
  border-radius: 4px;
  padding: 2px 5px;
}

.empty-state {
  padding: 4rem 1rem;
  text-align: center;
  color: var(--text-dim);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
}

/* ---------- legal pages ---------- */

.prose {
  max-width: 68ch;
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
  position: relative;
  z-index: 2;
}

.prose h1 {
  font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem);
  margin-bottom: 1rem;
}

.prose h2 {
  font-size: 1.3rem;
  margin: 2.5rem 0 0.75rem;
}

.prose p,
.prose li {
  color: var(--text-dim);
  margin-bottom: 0.9rem;
}

.prose ul {
  padding-inline-start: 1.1rem;
}

.prose a {
  color: var(--accent-bright);
  border-bottom: 1px solid rgba(157, 144, 255, 0.4);
}

/* ---------- language selector ---------- */

.language-field select {
  appearance: none;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  cursor: pointer;
  max-width: 10rem;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.language-field select:hover {
  color: var(--text);
  border-color: var(--line-strong);
}

.language-field option {
  background: var(--ink-card);
  color: var(--text);
  font-family: var(--body);
}

/* ---------- small shared utilities ---------- */

/* Keyword-bearing line inside the H1: keeps the headline punchy while still
   naming what the product actually is. */
.hero-h1-sub {
  display: block;
  margin-top: 1.1rem;
  font-family: var(--body);
  font-size: clamp(0.95rem, 0.9rem + 0.35vw, 1.15rem);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  color: var(--text-dim);
  max-width: 46ch;
  text-wrap: pretty;
}

.tools-hero .hero-h1-sub {
  max-width: 60ch;
}

/* Format pairs people search for, shown on the card rather than hidden in a
   data attribute. */
.tool-aliases {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0;
}

.tool-aliases span {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.15rem 0.4rem;
  white-space: nowrap;
}

/* Inert download call-to-action while no installer is published. */
.button.is-disabled {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-dim);
  border-color: var(--line-strong);
  box-shadow: none;
  cursor: not-allowed;
}

.button.is-disabled:hover {
  transform: none;
  background: rgba(255, 255, 255, 0.06);
}

.section-index-plain {
  border: 0;
  padding: 0;
  margin-bottom: 1.25rem;
}

.release-note {
  margin-top: 1.25rem;
}

/* The build is unsigned, so SmartScreen interrupts the install. Warn in a
   calm, factual register - loud enough to be read before the scare, quiet
   enough not to read as a scare itself. */
.release-warning {
  margin-top: 0.6rem;
  max-width: 46ch;
  padding-left: 0.9rem;
  border-left: 2px solid var(--accent);
  color: var(--text-dim);
  font-size: 0.86rem;
  line-height: 1.55;
}

.release-checksum {
  margin-top: 0.7rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.72rem;
  color: var(--text-faint);
}

.release-checksum code {
  font-family: var(--mono);
  /* 64 hex characters must wrap rather than push the page sideways. */
  word-break: break-all;
  color: var(--text-dim);
}

.footer-tagline {
  margin-top: 1rem;
  max-width: 34ch;
  color: var(--text-dim);
  font-size: 0.92rem;
}

.footer-links-inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.tools-results {
  padding-bottom: var(--space-section);
}

/* ---------- right-to-left ---------- */

[dir="rtl"] .showcase-tab[aria-selected="true"] {
  background: linear-gradient(-90deg, rgba(124, 108, 245, 0.14), transparent);
}

[dir="rtl"] .ticker-track {
  animation-direction: reverse;
}

/* Horizontal arrows point along the reading direction. */
[dir="rtl"] .text-link > span[aria-hidden="true"] {
  display: inline-block;
  transform: scaleX(-1);
}

/* Latin brand, format, engine and release strings stay left-to-right inside
   RTL copy; translated labels keep the page direction. */
[dir="rtl"] .brand,
[dir="rtl"] .brand-tag,
[dir="rtl"] .ticker,
[dir="rtl"] .engine b,
[dir="rtl"] .languages,
[dir="rtl"] .spec span:last-child {
  direction: ltr;
}

/* ---------- reveal motion ---------- */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.reveal-1 {
  transition-delay: 90ms;
}

.reveal-2 {
  transition-delay: 180ms;
}

.reveal-3 {
  transition-delay: 270ms;
}

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
  .showcase {
    grid-template-columns: 1fr;
  }

  .showcase-tabs {
    flex-direction: row;
    overflow-x: auto;
    border-top: 0;
    border-bottom: 1px solid var(--line);
    scrollbar-width: none;
  }

  .showcase-tabs::-webkit-scrollbar {
    display: none;
  }

  .showcase-tab {
    border-bottom: 0;
    border-left: 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    width: auto;
    padding: 0.8rem 1rem;
  }

  .showcase-tab[aria-selected="true"] {
    border-bottom-color: var(--accent);
    background: none;
  }

  .showcase-tab em {
    margin-left: 0.5rem;
  }

  .tile,
  .tile-wide,
  .tile-big {
    grid-column: span 3;
  }
}

@media (max-width: 860px) {
  :root {
    --shell: min(1280px, 100% - 2rem);
  }

  .header-nav {
    display: none;
  }

  .header-actions {
    margin-inline-start: auto;
  }

  .language-field select {
    max-width: 7.5rem;
  }

  .menu-toggle {
    display: flex;
  }

  .header-actions .button {
    display: none;
  }

  .hero-lower,
  .step,
  .download,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .step:nth-child(even) .step-copy {
    order: 0;
  }

  .section-head {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .section-index {
    border-top: 0;
    padding-top: 0;
  }

  .hero-meta {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-top: 1rem;
  }

  .frame-note-a {
    left: 8px;
    bottom: 10px;
  }

  .frame-note-b {
    right: 8px;
    top: 10px;
  }

  .footer-grid {
    gap: 2.25rem;
  }
}

@media (max-width: 620px) {
  .bento {
    grid-template-columns: 1fr;
  }

  .tile,
  .tile-wide,
  .tile-big {
    grid-column: span 1;
  }

  .frame-bar span {
    display: none;
  }

  .tools-controls {
    top: 60px;
  }

  .result-count {
    margin-left: 0;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}
/* Privacy-first analytics consent */
.analytics-consent{position:fixed;z-index:1000;inset:auto 1rem 1rem 1rem;max-width:760px;margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:1.25rem;padding:1rem 1.1rem;border:1px solid var(--line-strong);border-radius:var(--radius);background:rgba(12,12,18,.98);box-shadow:0 18px 60px rgba(0,0,0,.5)}
.analytics-consent[hidden]{display:none}.analytics-consent strong{display:block;margin-bottom:.25rem}.analytics-consent p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.45}.analytics-consent-actions{display:flex;flex:0 0 auto;gap:.6rem}.analytics-consent .button{white-space:nowrap}.footer-consent-button{border:0;padding:0;background:none;color:inherit;font:inherit;text-decoration:underline;cursor:pointer}
@media(max-width:700px){.analytics-consent{align-items:stretch;flex-direction:column}.analytics-consent-actions{width:100%}.analytics-consent-actions .button{flex:1}}