/* ==================================================
   Audexi — audexi.com marketing site
   Single stylesheet. Dark-first. Mobile-first. No framework.

   Token names follow Knowledge_Base/Audexi Website Style Guide.md (§3, §11, §39)
   so the stylesheet and the brand documentation stay in sync.

   Responsive contract
   -------------------
   Base rules are the small-phone layout; every breakpoint is `min-width`.

     base            0–29.99rem   small mobile, single column
     30rem  (480px)  large mobile
     48rem  (768px)  tablet portrait
     64rem  (1024px) tablet landscape / small laptop — primary nav returns
     80rem  (1280px) desktop
     90rem  (1440px) wide desktop

   Most components never need a breakpoint: fluid `clamp()` values and
   `auto-fit` grids cover the range continuously. Every fluid value below
   reaches its desktop maximum at 80rem, so the desktop composition is
   byte-for-byte what it was before the responsive pass.

   Navigation is the one deliberate device-independent rule: the drawer owns
   every width below 64rem, phones and portrait tablets included.
   ================================================== */


/* ==================================================
   Design Tokens
   ================================================== */

:root {
  /* ---- Foundation ---- */
  --color-bg: #07080C;             /* Void 950 — page ground */
  --color-bg-alt: #0A0D13;         /* Void 900 — banded sections */
  --color-bg-footer: #060709;

  /* ---- Typography colors ---- */
  --color-text: #F7F8FB;
  --color-text-secondary: #A7ADBD;
  --color-text-tertiary: #71798A;
  --color-text-disabled: #505766;

  /* ---- Signal colors ---- */
  --color-blue: #6E7BFF;           /* primary interaction */
  --color-cyan: #38D7FF;           /* technical highlight / waveform */
  --color-violet: #9B6CFF;         /* ambient accent */
  --color-success: #58E6A9;
  --color-error: #FF607D;

  /* ---- Surfaces ---- */
  --surface-embedded: rgba(255, 255, 255, .025);      /* Surface 01 */
  --surface-embedded-weak: rgba(255, 255, 255, .02);
  --surface-glass: rgba(16, 20, 30, .62);             /* Surface 02 */
  --surface-nav: rgba(10, 13, 19, .62);
  --surface-nav-panel: rgba(10, 13, 19, .94);  /* drawer needs text legibility */
  --surface-tint: rgba(10, 13, 19, .8);               /* section wash */
  --surface-control: rgba(255, 255, 255, .04);        /* secondary button */
  --surface-control-hover: rgba(255, 255, 255, .08);

  /* ---- Hairlines ---- */
  --line-subtle: rgba(255, 255, 255, .06);
  --line-faint: rgba(255, 255, 255, .08);
  --line-soft: rgba(255, 255, 255, .09);
  --line: rgba(255, 255, 255, .1);
  --line-strong: rgba(255, 255, 255, .12);

  /* ---- Selected-state washes ---- */
  --wash-blue: rgba(110, 123, 255, .15);
  --wash-blue-strong: rgba(110, 123, 255, .16);
  --wash-blue-soft: rgba(110, 123, 255, .14);
  --border-blue: rgba(110, 123, 255, .5);
  --border-blue-strong: rgba(110, 123, 255, .55);
  --border-blue-bright: rgba(110, 123, 255, .6);

  /* ---- Product-UI palette ----
     The in-page app replica renders Audexi's own Dark theme, which is a
     separate palette from the site brand. Kept distinct on purpose. */
  --app-bg: #0c0c0e;
  --app-titlebar: #060607;
  --app-row: #131316;
  --app-tile: #1c1c21;
  --app-heading: #F0F0F3;
  --app-text: #E7E9F0;
  --app-text-dim: #C9CDD8;
  --app-text-muted: #8B90A0;
  --app-accent: #0066ff;
  --app-line-row: rgba(255, 255, 255, .07);
  --app-line-pill: rgba(255, 255, 255, .14);

  /* ---- Brand gradient (style guide §4) ---- */
  --gradient-spectral: linear-gradient(110deg, #6E7BFF 0%, #38D7FF 46%, #9B6CFF 100%);

  /* ---- Typography ---- */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Instrument Sans', system-ui, sans-serif;
  --font-mono: 'Geist Mono', monospace;

  --text-micro: 12px;              /* technical / meta labels */

  --tracking-page: -0.01em;
  --tracking-tight: -0.02em;
  --tracking-display: -0.035em;
  --tracking-label: 0.12em;
  --tracking-label-tight: 0.08em;

  /* ---- Radii (style guide §12) ---- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-control: 12px;
  --radius-window: 14px;
  --radius-card: 16px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ---- Layout ----
     Fluid values are written so they reach their former fixed value at
     exactly 80rem (1280px); desktop geometry is therefore unchanged. */
  --container: 1180px;
  --container-narrow: 980px;
  --page-gutter: clamp(1.125rem, 4vw, 1.5rem);   /* 18px → 24px  */
  --nav-height: 64px;
  --nav-inset: 16px;
  --anchor-offset: 40px;
  --section-gap: clamp(3.5rem, 10vw, 6.875rem); /* 56px → 110px */
  --grid-gap: clamp(1rem, 2.4vw, 1.5rem);      /* 16px → 24px  */
  --split-gap: clamp(2.5rem, 7vw, 4.5rem);   /* 40px → 72px  */
  --panel-pad: clamp(1.5rem, 4.2vw, 2.75rem);   /* 24px → 44px  */

  /* Safe-area aware edge inset for anything pinned to the viewport. */
  --edge-inset-left: max(var(--nav-inset), env(safe-area-inset-left));
  --edge-inset-right: max(var(--nav-inset), env(safe-area-inset-right));

  /* ---- Effects ---- */
  --shadow-panel: 0 30px 80px rgba(0, 0, 0, .4);
  --shadow-window:
    0 40px 100px rgba(0, 0, 0, .55),
    0 0 0 1px rgba(56, 215, 255, .06),
    0 -1px 24px rgba(56, 215, 255, .05);

  /* ---- Motion ---- */
  --ease-audexi: cubic-bezier(.16, 1, .3, 1);
  --transition-fast: 180ms;
  --transition-base: 200ms;
  --duration-reveal: 600ms;
}


/* ==================================================
   Reset / Base

   No global `box-sizing: border-box`: several fixed-size bordered elements
   (spinner ring, swatches, secondary button, preview play tile) are sized in
   content-box and would visibly shrink. Border-box is opted into per element.
   ================================================== */

html {
  scroll-behavior: smooth;
  /* Zoom and reflow stay available; nothing pins a fixed layout width. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* The runtime hides its own raw template once it boots; doing it in CSS as
   well means the source template never flashes before the script runs. */
x-dc {
  display: none;
}

/* Scroll lock while the navigation drawer is open. */
.is-nav-open {
  overflow: hidden;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--color-blue);
  text-decoration: none;
}

a:hover {
  color: var(--color-cyan);
}

::selection {
  background: rgba(110, 123, 255, .35);
}

/* Style guide §36 — interactive elements need a visible keyboard focus state. */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-cyan);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}


/* ==================================================
   Typography
   ================================================== */

.gradient-text {
  background: var(--gradient-spectral);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Small mono label — "CONVERT TO", "STEP 1", version stamps. */
.label-mono {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-label);
  color: var(--color-text-tertiary);
}

.label-mono--tight {
  letter-spacing: var(--tracking-label-tight);
}

/* Mono label that keeps the page's inherited tracking instead of wide tracking. */
.label-mono--plain {
  letter-spacing: inherit;
}

/* Numbered section eyebrow — "01 / HOW IT WORKS". */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-label);
  color: var(--color-cyan);
}

.section__eyebrow {
  margin-bottom: 20px;
}

/* Shared display-heading skin; each section sets its own size/measure. */
/* Display sizes keep their original fluid slope and ceiling; only the floor
   drops, which engages below ~700px where the old floor caused 4-word lines. */
.section-title {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  font-size: clamp(1.75rem, 4vw, 3.125rem);
  line-height: 1.06;
  margin: 0 0 22px;
}

.section-lead {
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-text-secondary);
  margin: 0;
}

/* Emphasised run inside body copy. */
.copy-strong {
  color: var(--color-text);
  font-weight: 500;
}


/* ==================================================
   Global Layout
   ================================================== */

.page {
  background: var(--color-bg);
  min-height: 100vh;
  min-height: 100svh;  /* stable against mobile browser chrome */
  overflow-x: clip;
  letter-spacing: var(--tracking-page);
}

/* One padding declaration for every band; sections vary only the block value. */
.section {
  padding-block: var(--section-pad-block, var(--section-gap));
  padding-inline: var(--page-gutter);
}

/* Offsets anchor scrolling clear of the floating nav. */
.section--anchor {
  scroll-margin-top: var(--anchor-offset);
}

/* Vertical wash used by the format-controls and output sections. */
.section--tinted {
  background: linear-gradient(
    180deg,
    transparent,
    var(--surface-tint) 20%,
    var(--surface-tint) 80%,
    transparent
  );
}

.section__inner {
  max-width: var(--container);
  margin-inline: auto;
}

.section__inner--narrow {
  max-width: var(--container-narrow);
}

/* Text-beside-visual pair; collapses to one column when a column can't fit. */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
  gap: var(--split-gap);
  align-items: center;
  max-width: var(--container);
  margin-inline: auto;
}

/* Ambient light field behind product artwork. */
.glow {
  position: absolute;
  pointer-events: none;
}


/* ==================================================
   Header / Navigation
   ================================================== */

.site-nav {
  position: fixed;
  top: max(var(--nav-inset), env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  box-sizing: border-box;
  width: min(var(--container), calc(100vw - var(--edge-inset-left) - var(--edge-inset-right)));
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 10px 0 var(--page-gutter);
  background: var(--surface-nav);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
}

.site-nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--color-text);
  flex-shrink: 0;
}

.site-nav__brand:hover {
  color: var(--color-text);
}

/* ---- Drawer (every width below 80rem) ---- */

.site-nav__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  padding: 8px;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  background: var(--surface-nav-panel);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-panel);
  max-height: calc(100svh - var(--nav-height) - (var(--nav-inset) * 3));
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(.98);
  transform-origin: top center;
  transition:
    opacity 200ms var(--ease-audexi),
    transform 260ms var(--ease-audexi),
    visibility 0s linear 260ms;
}

.site-nav.is-open .site-nav__menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.site-nav__links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 1.0625rem;
  font-weight: 450;
}

.site-nav__link {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding-inline: 14px;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
}

.site-nav__link:hover {
  color: var(--color-text);
  background: var(--surface-control);
}

/* ---- Bar actions: soundtrack toggle + primary CTA ---- */

.site-nav__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;  /* groups against the drawer trigger */
}

/* A 320px bar cannot hold brand + soundtrack + CTA + drawer trigger. The
   soundtrack toggle is the one that yields: the download CTA is the page's
   goal and the trigger is the only way to navigate. Restored at 22.5rem,
   which covers every current phone bar the smallest. */
.audio-toggle {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--color-blue);
}

.audio-toggle[disabled] {
  cursor: not-allowed;
  opacity: .4;
}

.audio-toggle__icon {
  display: block;
  width: 40px;
  height: 40px;
}

/* Idle the mark is a quiet outline; playing it fills to the brand blue with a
   white trace — the same object, not two icons. */
.audio-toggle__disc {
  fill: var(--wash-blue);
  stroke: var(--border-blue);
  stroke-width: 1;
  transition:
    fill var(--transition-base) var(--ease-audexi),
    stroke var(--transition-base) var(--ease-audexi);
}

.audio-toggle__wave {
  fill: none;
  stroke: var(--color-blue);
  stroke-width: 2;
  stroke-linecap: round;
  transform-box: view-box;
  transform-origin: center;
  transition: stroke var(--transition-base) var(--ease-audexi);
}

.audio-toggle.is-playing .audio-toggle__disc {
  fill: var(--color-blue);
  stroke: var(--color-blue);
}

.audio-toggle.is-playing .audio-toggle__wave {
  stroke: #fff;
  animation: audexi-signal 1.9s ease-in-out infinite;
}

/* Amplitude breathes while sound is playing — the page's own waveform
   vocabulary, dialled down to nav scale. */
@keyframes audexi-signal {
  0%, 100% { transform: scaleY(.8); }
  50% { transform: scaleY(1.2); }
}

/* ---- Drawer trigger ---- */

.nav-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  color: var(--color-text);
  cursor: pointer;
  transition:
    background-color var(--transition-base) var(--ease-audexi),
    border-color var(--transition-base) var(--ease-audexi);
}

.nav-toggle:hover {
  background: var(--surface-control);
  border-color: var(--line-strong);
}

.nav-toggle__icon {
  display: block;
  width: 22px;
  height: 22px;
}

.nav-toggle__bar {
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  transform-box: view-box;
  transform-origin: center;
  transition:
    transform 260ms var(--ease-audexi),
    opacity 140ms linear;
}

/* Three rules become a cross — the one authored moment in the chrome. */
.site-nav.is-open .nav-toggle__bar--a { transform: translateY(5px) rotate(45deg); }
.site-nav.is-open .nav-toggle__bar--b { opacity: 0; transform: scaleX(.4); }
.site-nav.is-open .nav-toggle__bar--c { transform: translateY(-5px) rotate(-45deg); }

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 89;
  background: rgba(7, 8, 12, .66);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 220ms var(--ease-audexi),
    visibility 0s linear 220ms;
}

.nav-scrim.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* ---- Brand lockup ------------------------------------------------------- */
/* The supplied wordmark, assets/logo-audexi.svg: the five-bar equaliser mark
   standing in for the "a", then "udexi". Mark and name are one path, so the
   lockup is one element and its proportions cannot drift.

   The artwork is inlined once in the markup as #audexi-wordmark and referenced
   here; the path carries no fill of its own, so each surface tints it through
   currentColor. That matters because it has to hold on four surfaces, one of
   which is the light theme, where the file's own white would disappear.

   Width is derived from the height so the ratio cannot be set wrong: 466 x
   118.243 is the artwork's own viewBox. */
.brand-logo {
  display: block;
  flex: 0 0 auto;
  height: var(--brand-logo-h, 20px);
  width: calc(var(--brand-logo-h, 20px) * 466 / 118.243);
  fill: currentColor;
}

/* Holds the definition only; must never take part in layout. */
.brand-logo-def {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.brand-logo--nav { --brand-logo-h: 20px; }
.brand-logo--app { --brand-logo-h: 15px; }
.brand-logo--footer { --brand-logo-h: 17px; }
.brand-logo--theme { --brand-logo-h: 11px; }

/* Both mockups carry the logo in their own theme's heading ink, the way the
   application's own title bar does. */
.brand-logo--app { color: var(--app-heading); }
.brand-logo--theme { color: var(--tp-text); }

/* Reachable by a screen reader and a crawler, absent from the layout. The
   wordmark is artwork, so the brand name has to exist as text somewhere. */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ==================================================
   Buttons
   ================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  border-radius: var(--radius-md);
  transition:
    transform var(--transition-base) var(--ease-audexi),
    box-shadow var(--transition-base) var(--ease-audexi),
    filter var(--transition-base) var(--ease-audexi),
    background-color var(--transition-base) var(--ease-audexi),
    color var(--transition-base) var(--ease-audexi);
}

.btn--primary {
  background: var(--color-blue);
  color: var(--color-bg);
}

.btn--primary:hover {
  color: var(--color-bg);
}

.btn--secondary {
  background: var(--surface-control);
  border: 1px solid var(--line-strong);
  color: var(--color-text);
  font-weight: 500;
}

.btn--secondary:hover {
  background: var(--surface-control-hover);
  color: var(--color-text);
}

/* Sizes */
.btn--nav {
  height: 44px;
  padding: 0 16px;
  font-size: 14.5px;
  white-space: nowrap;
}

/* "for Windows" is dropped where the bar cannot hold it; the button still
   names its action. */
.btn__label-wide {
  display: none;
}



.btn--hero {
  height: 54px;
  padding: 0 28px;
  font-size: 16px;
}

.btn--hero.btn--primary {
  box-shadow: 0 0 40px rgba(110, 123, 255, .25);
}



.btn--hero.btn--secondary {
  padding: 0 26px;
}

.btn--xl {
  height: 56px;
  padding: 0 32px;
  font-size: 16.5px;
  box-shadow: 0 0 60px rgba(110, 123, 255, .35);
}



.btn__arrow {
  font-family: var(--font-mono);
}

/* The lift, glow and brightness belong to pointers that can hover. On touch
   they would stick to the last tapped button. */
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
  }

  .btn--nav:hover {
    box-shadow: 0 8px 28px rgba(110, 123, 255, .45);
  }

  .btn--hero.btn--primary:hover {
    box-shadow: 0 12px 48px rgba(110, 123, 255, .5);
  }

  .btn--xl:hover {
    box-shadow: 0 14px 60px rgba(110, 123, 255, .55);
  }
}


/* ==================================================
   Hero
   ================================================== */

.hero {
  position: relative;
  /* Minimum clears the floating nav (16px inset + 64px bar) with room to spare. */
  --section-pad-block: clamp(6.5rem, 16.4vw, 11.25rem) clamp(4rem, 10.9vw, 7.5rem);
  background:
    radial-gradient(ellipse 70% 45% at 50% 12%, rgba(73, 91, 255, .16), transparent 70%),
    radial-gradient(ellipse 40% 30% at 78% 40%, rgba(56, 215, 255, .06), transparent 70%),
    var(--color-bg);
}

/* The signal field overlays the hero's radial gradient across the full page
   width; the content layer sits above it. */
.hero__field {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 900ms var(--ease-audexi);
}

.hero__field[data-ready] {
  opacity: 1;
}

.hero__field canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Staggered entrance for the hero stack. */
.fade-up {
  animation: fadeup var(--duration-reveal) var(--fade-delay, 0ms) var(--ease-audexi) both;
}

.hero__eyebrow {
  text-transform: uppercase;
  margin-bottom: 28px;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.25rem, 7.2vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin: 0 0 28px;
  max-width: 900px;
  --fade-delay: 80ms;
}

.hero__lead {
  font-size: 19px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  max-width: 620px;
  margin: 0 0 40px;
  --fade-delay: 160ms;
}

.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  --fade-delay: 240ms;
}

/* Full-width and wrappable while stacked: the label is longer than a small
   phone is wide, and a fixed height would clip the second line. */
.hero__actions .btn {
  box-sizing: border-box;
  justify-content: center;
  height: auto;
  min-height: 54px;
  padding-block: 0.75rem;
  text-align: center;
}

.hero__trust {
  margin-top: 28px;
  --fade-delay: 320ms;
}

.hero__stage {
  margin-top: 88px;
  width: min(880px, 100%);
  position: relative;
  animation: fadeup 800ms 400ms var(--ease-audexi) both;
}

.hero__glow {
  inset: -60px -80px;
  background:
    radial-gradient(ellipse 60% 55% at 50% 45%, rgba(110, 123, 255, .14), transparent 70%),
    radial-gradient(ellipse 35% 40% at 20% 80%, rgba(155, 108, 255, .1), transparent 70%);
}


/* ==================================================
   Components — product UI replica
   ================================================== */

.app-window {
  position: relative;
  background: var(--app-bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-window);
  overflow: hidden;
  box-shadow: var(--shadow-window);
  text-align: left;
  font-size: 14px;
}

.app-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--app-titlebar);
}

.app-titlebar__brand {
  display: flex;
  align-items: center;
  gap: 8px;
}


.app-titlebar__controls {
  display: flex;
  gap: 18px;
  color: var(--color-text-tertiary);
  font-size: 13px;
}

.app-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-subtle);
  flex-wrap: wrap;
}

.app-toolbar__label {
  margin-left: auto;
  color: var(--app-text-muted);
  font-size: 13px;
}

/* Dropdown-style control (theme picker, output picker). */
.app-select {
  padding: 7px 12px;
  background: var(--app-row);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--app-text);
  font-size: 13px;
}

.app-select--muted {
  color: var(--app-text-dim);
}

/* Outlined pill control (Audio Settings, Path, Browse, Clear All). */
.app-pill {
  padding: 8px 16px;
  border: 1px solid var(--app-line-pill);
  border-radius: var(--radius-pill);
  color: var(--app-text);
  font-size: 13px;
}

.app-convert {
  padding: 9px 22px;
  background: var(--app-accent);
  border-radius: var(--radius-pill);
  color: #fff;
  font-weight: 500;
  font-size: 13px;
}

.app-dropzone {
  margin: 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  padding: 26px;
  text-align: center;
}

.app-dropzone__text {
  font-size: 17px;
  color: var(--app-text);
  margin-bottom: 12px;
}

.app-dropzone__browse {
  display: inline-block;
  padding: 9px 22px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius-pill);
  color: var(--app-text);
  font-size: 13px;
}

.app-files-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 10px;
}

.app-files-head__title {
  font-size: 16px;
  font-weight: 500;
  color: var(--app-heading);
}

.app-clear {
  padding: 8px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  color: var(--app-text-muted);
  font-size: 13px;
}

.app-statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--line-subtle);
  color: var(--app-text-muted);
  font-size: 13px;
}

.kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--radius-xs);
  padding: 2px 6px;
}


/* ---- File list ---- */

.file-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 clamp(0.75rem, 2vw, 1rem) clamp(0.75rem, 2vw, 1rem);
}

/* Standalone panel crop of the same list (batch / preview sections). */
.file-panel {
  position: relative;
  background: var(--app-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-window);
  padding: clamp(0.75rem, 1.5vw, 1rem);
  box-shadow: var(--shadow-panel);
}

.file-panel--batch {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  --file-row-pad-y: 13px;
}

.file-panel--preview {
  --file-row-pad-y: 14px;
  --file-row-play-size: 38px;
  --file-row-play-radius: 9px;
  --file-row-name-size: 14px;
}

.file-panel--preview .file-row + .file-row {
  margin-top: 8px;
}

.file-row {
  display: flex;
  align-items: center;
  gap: clamp(0.625rem, 2vw, 0.875rem);
  background: var(--app-row);
  border: 1px solid var(--app-line-row);
  border-radius: var(--radius-md);
  padding: var(--file-row-pad-y, 12px) clamp(0.75rem, 2vw, 1rem);
}

.file-row--converting {
  border-color: rgba(56, 215, 255, .25);
}

.file-row--failed {
  border-color: rgba(255, 96, 125, .3);
}

.file-row--previewing {
  border-color: rgba(56, 215, 255, .3);
}

.file-row--muted {
  opacity: .65;
}

.file-row__play {
  width: var(--file-row-play-size, 34px);
  height: var(--file-row-play-size, 34px);
  border-radius: var(--file-row-play-radius, var(--radius-sm));
  background: var(--app-tile);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--app-text-dim);
  font-size: 11px;
  flex-shrink: 0;
}

.file-row__play--active {
  background: rgba(56, 215, 255, .14);
  border: 1px solid rgba(56, 215, 255, .4);
  color: var(--color-cyan);
}

.file-row__info {
  flex: 1;
  min-width: 0;
}

.file-row__name {
  display: block;
  color: var(--app-text);
  font-size: var(--file-row-name-size, inherit);
}

.file-row__meta {
  display: block;
  color: var(--color-text-tertiary);
  font-size: var(--text-micro);
  margin-top: 3px;
}

.file-row__remove {
  color: var(--color-text-tertiary);
}

/* Conversion status — color plus a glyph, never color alone. */
.file-status {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  text-align: right;
}

.file-status--idle { color: var(--color-text-tertiary); }
.file-status--saved { color: var(--color-success); }
.file-status--failed { color: var(--color-error); }

.file-status--converting {
  color: var(--color-cyan);
}

/* Converting status that carries a spinner alongside its label. */
.file-status--spinning {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.spinner {
  width: 11px;
  height: 11px;
  border: 1.5px solid var(--color-cyan);
  border-top-color: transparent;
  border-radius: 50%;
  display: inline-block;
  animation: convertspin 900ms linear infinite;
}

.error-note {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--color-error);
  background: rgba(255, 96, 125, .06);
  border: 1px solid rgba(255, 96, 125, .2);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}


/* ==================================================
   Sections — format / trust strip
   ================================================== */

.strip {
  --section-pad-block: clamp(1.75rem, 4vw, 2.75rem);
  border-top: 1px solid var(--line-subtle);
  border-bottom: 1px solid var(--line-subtle);
  background: var(--color-bg-alt);
}

.strip__inner {
  max-width: var(--container);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.25rem, 3vw, 2rem);
}

.strip__formats {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.strip__trust {
  max-width: 420px;
}

.strip__reads {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.55;
}

.strip__promise {
  font-size: 14px;
  color: var(--color-text);
  margin-top: 6px;
  font-weight: 500;
}

.fmt-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--color-text);
  padding: 9px 16px;
  background: var(--surface-embedded);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
}

.fmt-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fmt-dot, var(--color-blue));
}

.fmt-badge__dot--ogg { --fmt-dot: var(--color-blue); }
.fmt-badge__dot--wav { --fmt-dot: var(--color-cyan); }
.fmt-badge__dot--mp3 { --fmt-dot: var(--color-violet); }
.fmt-badge__dot--flac { --fmt-dot: var(--color-success); }


/* ==================================================
   Sections — how it works
   ================================================== */

.how {
  --section-pad-block: clamp(4.5rem, 15.5vw, 10.625rem) clamp(3rem, 8.2vw, 5.625rem);
}

.how__title {
  font-size: clamp(1.875rem, 4.6vw, 3.625rem);
  line-height: 1.05;
  max-width: 700px;
}

.how__lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  max-width: 640px;
  margin: 0 0 72px;
}

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--grid-gap);
}

/* Shared card shell — step cards and trust cards differ only in padding. */
.card {
  background: var(--surface-embedded);
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-card);
}

.step-card {
  padding: clamp(1.5rem, 2.9vw, 2rem);
}

.step-card__num {
  margin-bottom: 22px;
}

.step-card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: var(--tracking-tight);
  margin: 0 0 12px;
}

.step-card__body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0;
}

.dropzone-mini {
  border: 1px dashed rgba(255, 255, 255, .18);
  border-radius: var(--radius-md);
  padding: 22px;
  text-align: center;
  margin-bottom: 26px;
  color: var(--color-text-secondary);
  font-size: 13.5px;
}

.dropzone-mini__caret {
  font-family: var(--font-mono);
  color: var(--color-cyan);
}

.fmt-pills {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 26px;
  flex-wrap: wrap;
}

.pill-mono {
  font-family: var(--font-mono);
  font-size: 12.5px;
  padding: 9px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  color: var(--color-text-tertiary);
}

.pill-mono.is-active {
  background: var(--wash-blue);
  border-color: var(--border-blue);
  color: var(--color-text);
}

.status-flow {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  margin-bottom: 26px;
  font-family: var(--font-mono);
  font-size: 12.5px;
}

.status-flow__arrow {
  color: var(--color-text-disabled);
}

.note-center {
  margin-top: 36px;
  text-align: center;
  font-size: 15px;
  color: var(--color-text-secondary);
}


/* ==================================================
   Sections — batch conversion
   ================================================== */

.batch__visual {
  position: relative;
}

.batch__lead {
  margin-bottom: 18px;
}

.batch__lead-last {
  margin-bottom: 30px;
}

.batch__glow {
  inset: -50px;
  background: radial-gradient(ellipse 55% 55% at 55% 50%, rgba(56, 215, 255, .07), transparent 70%);
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tag {
  font-size: 13px;
  color: var(--color-text-secondary);
  padding: 7px 13px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
}


/* ==================================================
   Sections — format controls
   ================================================== */

.formats__title {
  max-width: 640px;
}

.formats__lead {
  max-width: 620px;
  margin: 0 0 52px;
}

.fmt-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.fmt-tab {
  font-family: var(--font-mono);
  font-size: 14px;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  cursor: pointer;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
  color: var(--color-text-tertiary);
  transition:
    background-color var(--transition-fast) var(--ease-audexi),
    border-color var(--transition-fast) var(--ease-audexi),
    color var(--transition-fast) var(--ease-audexi);
}

.fmt-tab.is-active {
  background: var(--wash-blue);
  border-color: var(--border-blue-bright);
  color: var(--color-text);
}

.glass-panel {
  box-sizing: border-box;
  background: var(--surface-glass);
  backdrop-filter: blur(24px);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: var(--panel-pad);
  min-height: 260px;
}

.glass-panel__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: var(--panel-pad);
  align-items: center;
}

.fmt-detail__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  letter-spacing: var(--tracking-tight);
  margin: 0 0 14px;
}

.fmt-detail__desc {
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-text-secondary);
  margin: 0 0 20px;
}

.fmt-demo {
  background: var(--app-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  padding: clamp(1.125rem, 2.4vw, 1.625rem);
}

.fmt-demo__label {
  font-size: 14px;
  color: var(--app-text);
  margin-bottom: 14px;
}

.fmt-demo__label--wide {
  margin-bottom: 16px;
}

.fmt-demo__value {
  font-family: var(--font-mono);
  color: var(--color-cyan);
}

.fmt-demo__hint {
  font-size: 12.5px;
  color: var(--color-text-tertiary);
}

/* Static slider illustration. */
.slider {
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  position: relative;
  margin-bottom: 14px;
}

.slider__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 50%;
  background: linear-gradient(90deg, var(--color-blue), var(--color-cyan));
  border-radius: 2px;
}

.slider__thumb {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 20px;
  background: var(--app-text);
  border-radius: var(--radius-xs);
}

.choice-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.choice-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.choice {
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  color: var(--color-text-tertiary);
  font-size: var(--choice-size, 13px);
  padding: var(--choice-pad, 8px 14px);
}

.choice.is-selected {
  background: var(--wash-blue-strong);
  border-color: var(--border-blue-strong);
  color: var(--color-text);
}

.choice--mono {
  font-family: var(--font-mono);
}

.choice-row--flac {
  --choice-size: 13.5px;
  --choice-pad: 9px 15px;
}

.choice-col--rate {
  --choice-size: 13.5px;
  --choice-pad: 10px 14px;
}

.choice-col--rate .choice {
  border-color: var(--line);
}

.choice-col--rate .choice.is-selected {
  background: var(--wash-blue-soft);
  border-color: var(--border-blue);
}

.settings-foot {
  display: flex;
  gap: var(--page-gutter);
  flex-wrap: wrap;
  margin-top: var(--grid-gap);
  align-items: center;
  justify-content: space-between;
}

.settings-foot__mono-toggle {
  font-size: 14.5px;
  color: var(--color-text-secondary);
}

.checkbox-mock {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 3px;
  vertical-align: -2px;
  margin-right: 9px;
}


/* ==================================================
   Sections — local processing / privacy
   ================================================== */

.privacy {
  --section-pad-block: clamp(4rem, 13.7vw, 9.375rem);
  background:
    radial-gradient(ellipse 60% 50% at 50% 60%, rgba(155, 108, 255, .07), transparent 70%),
    var(--color-bg);
}

.privacy__inner {
  text-align: center;
}

.privacy__title {
  font-size: clamp(1.875rem, 4.4vw, 3.5rem);
  line-height: 1.08;
  margin: 0 auto 24px;
  max-width: 860px;
}

.privacy__lead {
  max-width: 640px;
  margin: 0 auto 64px;
}

.pipeline {
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(1.25rem, 2.8vw, 1.875rem) 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-embedded-weak);
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
}

.pipeline__step {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.pipeline__node {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: var(--tracking-label-tight);
  padding: 12px 20px;
  border: 1px solid var(--pipe-border, var(--line-strong));
  border-radius: var(--radius-md);
  margin: 6px;
  background: var(--color-bg-alt);
  color: var(--pipe-color, var(--color-text-secondary));
}

.pipeline__node--source {
  --pipe-color: var(--color-text-secondary);
  --pipe-border: var(--line-strong);
}

.pipeline__node--decode {
  --pipe-color: var(--color-blue);
  --pipe-border: rgba(110, 123, 255, .4);
}

.pipeline__node--process {
  --pipe-color: var(--color-cyan);
  --pipe-border: rgba(56, 215, 255, .4);
}

.pipeline__node--encode {
  --pipe-color: var(--color-violet);
  --pipe-border: rgba(155, 108, 255, .4);
}

.pipeline__node--output {
  --pipe-color: var(--color-success);
  --pipe-border: rgba(88, 230, 169, .4);
}

.pipeline__arrow {
  display: block;
  color: var(--color-cyan);
  opacity: .6;
  font-family: var(--font-mono);
  line-height: 1;
  transform: rotate(90deg);  /* the signal flows downward while stacked */
}

.pipeline__caption {
  letter-spacing: 0.1em;
  margin-top: 18px;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 20px;
  margin-top: 72px;
  text-align: left;
}

.trust-card {
  padding: clamp(1.25rem, 2.55vw, 1.75rem);
}

.trust-card__title {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 8px;
}

.trust-card__body {
  font-size: 14.5px;
  color: var(--color-text-secondary);
  line-height: 1.55;
}


/* ==================================================
   Sections — preview
   ================================================== */

.preview__text {
  order: 2;
}

.preview__visual {
  order: 1;
  position: relative;
}

.preview__lead {
  margin-bottom: 18px;
}

.preview__glow {
  inset: -40px;
  background: radial-gradient(ellipse 55% 55% at 45% 50%, rgba(110, 123, 255, .08), transparent 70%);
}

.preview__note {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--color-text-tertiary);
  margin-top: 14px;
  padding: 0 4px;
  letter-spacing: 0.06em;
}

/* Slot that holds the animated meter inside a preview row. */
.preview-meter {
  display: inline-flex;
  align-items: flex-end;
  gap: 2.5px;
  height: 20px;
  margin-right: 6px;
}


/* ==================================================
   Sections — output path & naming
   ================================================== */

.feature-lines {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 15px;
  color: var(--color-text-secondary);
}

.output__lead {
  margin: 0 0 26px;
}

.rename-panel {
  background: var(--app-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-window);
  padding: clamp(1.25rem, 2.8vw, 1.875rem);
  box-shadow: var(--shadow-panel);
}

.rename-panel__label {
  font-size: 11px;
  margin-bottom: 20px;
}

.rename-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 13.5px;
}

.rename {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.rename__from {
  color: var(--color-text-tertiary);
}

.rename__arrow {
  color: var(--color-cyan);
}

.rename__to {
  color: var(--color-text);
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line-faint);
  padding: 6px 12px;
  border-radius: 6px;
}


/* ==================================================
   Sections — power users / CLI
   ================================================== */

.power {
  --section-pad-block: clamp(3.75rem, 11.9vw, 8.125rem);
}

.power__title {
  max-width: 780px;
}

.power__lead {
  max-width: 640px;
  margin: 0 0 60px;
}

/* Two halves joined into one object — no gap, shared inner edge. */
.power__split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: stretch;
  position: relative;
}

.gui-card {
  background: var(--surface-embedded);
  border: 1px solid var(--line-faint);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  padding: clamp(1.5rem, 3.3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}

.gui-card__label {
  font-size: 11px;
}

.gui-card__name {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
}

.gui-card__body {
  font-size: 15px;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.gui-card__link {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--color-cyan);
  letter-spacing: 0.06em;
  margin-top: 8px;
}

.terminal {
  background: var(--app-titlebar);
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  overflow: hidden;
}

.terminal__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--app-line-row);
  background: var(--color-bg-alt);
}

.terminal__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--app-line-pill);
}

.terminal__title {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--color-text-tertiary);
  margin-left: 8px;
}

.terminal__body {
  padding: clamp(1rem, 2.4vw, 1.625rem) clamp(1rem, 2.2vw, 1.5rem);
  font-family: var(--font-mono);
  font-size: clamp(0.719rem, 2.9vw, 0.844rem);
  line-height: 2.1;
  color: var(--color-text-secondary);
  /* Commands are code: they scroll rather than wrap or shrink into nothing.
     tabindex in the markup keeps the scroll region keyboard-reachable. */
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.terminal__body > div {
  white-space: nowrap;
}

.terminal__line--spaced {
  margin-top: 10px;
}

.terminal__prompt {
  color: var(--color-text-disabled);
}

.terminal__cmd {
  color: var(--color-text);
}

.terminal__ok {
  color: var(--color-success);
}

.terminal__cursor {
  display: inline-block;
  width: 9px;
  height: 17px;
  background: var(--color-cyan);
  vertical-align: -3px;
  animation: blink 1.1s step-start infinite;
}


/* ==================================================
   Sections — themes
   ================================================== */

.themes__title {
  max-width: 720px;
}

.themes__lead {
  max-width: 620px;
  margin: 0 0 60px;
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--grid-gap);
}

.theme-card {
  border: 1px solid var(--line-faint);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface-embedded-weak);
}

/* Each variant carries one of Audexi's three shipped app themes. */
.theme-card--dark {
  --tp-bg: #0c0c0e;
  --tp-card: #18181c;
  --tp-row: #212127;
  --tp-line: rgba(255, 255, 255, .1);
  --tp-line-dash: rgba(255, 255, 255, .2);
  --tp-accent: #0066ff;
  --tp-text: #f0f0f3;
  --tp-muted: #8b90a0;
}

.theme-card--light {
  --tp-bg: #f4f6f9;
  --tp-card: #ffffff;
  --tp-row: #eef1f6;
  --tp-line: rgba(0, 0, 0, .1);
  --tp-line-dash: rgba(0, 0, 0, .22);
  --tp-accent: #2b76e9;
  --tp-text: #1b2230;
  --tp-muted: #69718a;
}

.theme-card--purple {
  --tp-bg: #14121e;
  --tp-card: #221e33;
  --tp-row: #2b2642;
  --tp-line: rgba(255, 255, 255, .1);
  --tp-line-dash: rgba(255, 255, 255, .22);
  --tp-accent: #8b5cf6;
  --tp-text: #eeeaf8;
  --tp-muted: #948dad;
}

.theme-card__stage {
  box-sizing: border-box;
  background: var(--tp-bg);
  padding: 22px 22px 0;
  height: 170px;
  overflow: hidden;
}

.theme-mock {
  box-sizing: border-box;
  background: var(--tp-card);
  border: 1px solid var(--tp-line);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding: 14px;
  height: 100%;
}

.theme-mock__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}


.theme-mock__convert {
  margin-left: auto;
  font-size: 10px;
  padding: 4px 12px;
  background: var(--tp-accent);
  border-radius: var(--radius-pill);
  color: #ffffff;
}

.theme-mock__drop {
  border: 1px dashed var(--tp-line-dash);
  border-radius: 7px;
  padding: 12px;
  text-align: center;
  font-size: 11px;
  color: var(--tp-muted);
  margin-bottom: 10px;
}

.theme-mock__row {
  background: var(--tp-row);
  border: 1px solid var(--tp-line);
  border-radius: 7px;
  padding: 9px 11px;
  font-size: 10.5px;
  color: var(--tp-text);
  display: flex;
  justify-content: space-between;
}

.theme-mock__saved {
  color: var(--tp-accent);
}

.theme-card__foot {
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.theme-card__name {
  font-weight: 600;
  font-size: 15px;
}

.theme-card__swatches {
  display: inline-flex;
  gap: 6px;
}

.swatch {
  width: 14px;
  height: 14px;
  border-radius: var(--radius-xs);
  border: 1px solid rgba(255, 255, 255, .2);
}

.swatch--bg { background: var(--tp-bg); }
.swatch--card { background: var(--tp-card); }

/* The accent chip needs no outline against the two neutral chips. */
.swatch--accent {
  border: 0;
  background: var(--tp-accent);
}


/* ==================================================
   Sections — final CTA
   ================================================== */

.cta {
  --section-pad-block: clamp(4.5rem, 15.5vw, 10.625rem) clamp(4rem, 13.7vw, 9.375rem);
  background:
    radial-gradient(ellipse 55% 60% at 50% 105%, rgba(110, 123, 255, .16), transparent 70%),
    radial-gradient(ellipse 30% 40% at 30% 100%, rgba(56, 215, 255, .08), transparent 70%),
    var(--color-bg);
  text-align: center;
}

.cta__inner {
  max-width: 860px;
  margin-inline: auto;
}

.cta__wave {
  display: flex;
  justify-content: center;
  margin-bottom: 44px;
}

.cta__title {
  font-size: clamp(2rem, 5.2vw, 4.125rem);
  letter-spacing: -0.04em;
  line-height: 1.04;
  margin: 0 0 24px;
}

.cta__lead {
  font-size: 18px;
  line-height: 1.65;
  color: var(--color-text-secondary);
  max-width: 580px;
  margin: 0 auto 44px;
}

.cta .btn--xl {
  box-sizing: border-box;
  width: 100%;
  justify-content: center;
  height: auto;
  min-height: 56px;
  padding-block: 0.75rem;
  text-align: center;
}

.cta__trust {
  margin-top: 26px;
}

.cta__version {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--color-text-disabled);
  margin-top: 10px;
}

/* Maker's mark, closing the section. Far enough below the version line to read
   as a sign-off rather than another line of specification. */
.cta__maker {
  display: flex;
  justify-content: center;
  margin-top: clamp(2.5rem, 6vw, 4rem);
}

/* The artwork is white, and white here would outrank the download button it sits
   under. Opacity rather than a recolor, because the surface is always dark and
   this leaves the asset itself untouched.

   The badge's second line sits at about 6% of its height, so it would need a
   ~100px mark to be read and is texture at any size this can carry. The company
   is named in words by the footer's copyright line, so the mark is sized for
   presence and not for that. */
.maker-logo {
  display: block;
  height: clamp(2.75rem, 5vw, 3rem);
  width: auto;
  opacity: 0.62;
}


/* ==================================================
   Footer
   ================================================== */

.site-footer {
  --section-pad-block: clamp(1.75rem, 4vw, 2.75rem);
  border-top: 1px solid var(--line-subtle);
  background: var(--color-bg-footer);
}



.site-footer__inner {
  max-width: var(--container);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--page-gutter);
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}


.site-footer__copy {
  font-size: 13px;
  color: var(--color-text-disabled);
}

.site-footer__tagline {
  font-size: 13.5px;
  color: var(--color-text-tertiary);
}

.site-footer__links {
  display: flex;
  gap: var(--page-gutter);
  font-size: 13.5px;
}

.site-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-text-secondary);
}

.site-footer__link:hover {
  color: var(--color-text);
}


/* ==================================================
   Animations

   Bar heights and per-bar stagger are computed per instance and arrive as
   inline `height` / `--bar-duration` / `--bar-delay` values.
   ================================================== */

.wave {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 48px;
}

.wave__bar {
  width: 3px;
  border-radius: 2px;
  background: var(--wave-color);
  transform-origin: center;
  animation: wavepulse var(--bar-duration) ease-in-out var(--bar-delay) infinite;
}

.wave--preview {
  --wave-color: var(--color-cyan);
}

.wave--cta {
  --wave-color: rgba(110, 123, 255, .75);
}

.wave--static .wave__bar {
  animation: none;
}

@keyframes wavepulse {
  0%, 100% { transform: scaleY(.35); }
  50% { transform: scaleY(1); }
}

@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes fadeup {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@keyframes convertspin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* ==================================================
   Responsive

   Five `min-width` steps, no `max-width` queries. Everything not listed here
   is handled continuously by the fluid tokens and auto-fit grids above.
   ================================================== */

/* Short measures break badly with a last-line orphan; balancing is worth the
   cost here and is off at desktop where the composition is already set.
   Written as the exact complement of the desktop query so the two can never
   leave a fractional-width gap between them. */
@media not all and (min-width: 80rem) {
  .section-title,
  .hero__title,
  .cta__title {
    text-wrap: balance;
  }
}


/* ---- 22.5rem · component step: the bar can seat the soundtrack toggle --- */

@media (min-width: 22.5rem) {
  .audio-toggle {
    display: inline-flex;
  }
}


/* ---- 30rem · large mobile ---------------------------------------------- */

@media (min-width: 30rem) {
  /* The bar can hold the full CTA label again. */
  .btn__label-wide {
    display: inline;
  }

  .hero__actions {
    flex-direction: row;
    width: auto;
  }

  /* Back to the authored fixed-height buttons. content-box matters: the
     secondary button's 1px border sits outside its 54px height. */
  .hero__actions .btn {
    box-sizing: content-box;
    height: 54px;
    min-height: 0;
    padding-block: 0;
  }

  .cta .btn--xl {
    box-sizing: content-box;
    width: auto;
    height: 56px;
    min-height: 0;
    padding-block: 0;
  }
}

/* ---- 48rem · tablet portrait ------------------------------------------- */

@media (min-width: 48rem) {
  /* Past phone widths the drawer stops spanning the bar and becomes a panel
     anchored under the trigger, so four links do not float in a wide field. */
  .site-nav__menu {
    left: auto;
    width: min(22.5rem, 100%);
  }

  /* Three steps as 2 + 1 wide, four trust cards as 2 x 2, three themes in a
     row — intrinsic sizing alone would strand a card in a half-empty row. */
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .steps > :last-child {
    grid-column: 1 / -1;
  }

  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .theme-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Enough width for the conversion pipeline to run left-to-right. */
  .pipeline,
  .pipeline__step {
    flex-direction: row;
  }

  .pipeline__arrow {
    display: inline;
    line-height: inherit;
    transform: none;
  }
}

/* ---- 64rem · tablet landscape / small laptop — primary navigation returns */

@media (min-width: 64rem) {
  .nav-toggle,
  .nav-scrim {
    display: none;
  }

  /* The drawer dissolves and its links rejoin the bar as flex items.
     `visibility` is inherited, so it must be reset explicitly here. */
  .site-nav__menu {
    display: contents;
    visibility: visible;
  }

  .site-nav {
    gap: 0;
    padding-right: 12px;
  }

  .site-nav__links {
    flex-direction: row;
    align-items: center;
    gap: 28px;
    font-size: 14.5px;
  }

  .site-nav__link {
    display: inline;
    min-height: 0;
    padding-inline: 0;
    border-radius: 0;
  }

  .site-nav__link:hover {
    background: none;
  }

  .site-nav__actions {
    margin-inline-start: 0;
  }

  .btn--nav {
    height: 42px;
    padding: 0 20px;
  }

  .is-nav-open {
    overflow: visible;
  }

  .steps {
    grid-template-columns: repeat(3, 1fr);
  }

  .steps > :last-child {
    grid-column: auto;
  }

  .trust-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* GUI card and terminal join along a shared vertical edge. */
  .power__split {
    grid-template-columns: 1fr 1fr;
  }

  .gui-card {
    border-radius: var(--radius-card) 0 0 var(--radius-card);
  }

  .terminal {
    border-top: 1px solid var(--line);
    border-left: none;
    border-radius: 0 var(--radius-card) var(--radius-card) 0;
  }

  /* Preview section leads with the product shot once the pair sits side by
     side; stacked, the heading comes first so the section identifies itself. */
  .preview__text {
    order: 2;
  }

  .preview__visual {
    order: 1;
  }
}

/* ---- 80rem · desktop ----------------------------------------------------
   Touch-sized footer links persist below this width: a 1024–1279px viewport is
   most often a landscape tablet, which navigates by finger even though it now
   shows the full navigation bar. */

@media (min-width: 80rem) {
  .site-footer__link {
    display: inline;
    min-height: 0;
  }
}

/* ---- 90rem · wide desktop ----------------------------------------------
   No rules: `--container` (1180px) and the per-section measures already stop
   the layout from stretching, so there is nothing left to cap. */


/* ---- Short viewports ----------------------------------------------------
   A landscape phone is wide enough to earn desktop-scale vertical rhythm but
   has none of the height for it; this trades hero air for a reachable CTA. */

@media (orientation: landscape) and (max-height: 32rem) {
  .hero {
    --section-pad-block: 6rem 3rem;
  }

  .hero__stage {
    margin-top: 3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Blanket kill: the decorative meters, spinner and cursor are ambient, and
     nothing on the page depends on animation to convey state. `!important`
     is required to beat the per-element animation shorthands. */
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  html {
    scroll-behavior: auto;
  }
}


/* ==================================================
   Legal pages
   --------------------------------------------------
   eula.html · privacy.html · refund.html · terms.html

   Plain static documents. They share this stylesheet so the tokens stay in one
   place, but they load no JavaScript at all — a licence or a privacy policy
   should not need a CDN and a framework to be readable.

   Section numbers come from a CSS counter rather than the copy, so inserting a
   clause cannot leave the document numbered wrongly.
   ================================================== */

/* Scoped to these pages on purpose. The product page has no global border-box
   reset because several of its components are sized content-box and would
   shrink under one; none of those components appear here, and without it a
   `width: 100%` element with gutter padding overflows the viewport by exactly
   twice the gutter — which it did, on all four pages, at every width below the
   container. */
.legal-page,
.legal-page *,
.legal-page *::before,
.legal-page *::after {
  box-sizing: border-box;
}

.legal-page {
  background: var(--color-bg);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

/* ---- slim header: mark, and the way back ---- */
.legal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--page-gutter);
  padding: 1.25rem var(--page-gutter);
  max-width: var(--container-narrow);
  width: 100%;
  margin-inline: auto;
  border-bottom: 1px solid var(--line-subtle);
}

.legal-bar__home {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-text);
}

.legal-bar__logo {
  display: block;
  height: 18px;
  width: calc(18px * 466 / 118.243);
}

.legal-bar__back {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-label-tight);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.legal-bar__back:hover { color: var(--color-text); }

/* ---- document ---- */
.legal {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding: clamp(2.5rem, 7vw, 4.5rem) var(--page-gutter) clamp(3rem, 8vw, 5rem);
}

.legal__body {
  max-width: 68ch;   /* a reading measure, not a layout width */
}

.legal__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-cyan);
  margin-bottom: 1rem;
}

.legal h1 {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 5vw, 3rem);
  line-height: 1.08;
  letter-spacing: var(--tracking-display);
  margin: 0 0 1rem;
}

.legal__meta {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-label-tight);
  text-transform: uppercase;
  color: var(--color-text-disabled);
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

/* Until counsel signs off. Deliberately hard to miss, and removed in one
   place per page when it does. */
.legal__draft {
  border: 1px solid var(--border-blue);
  background: var(--wash-blue-soft);
  border-radius: var(--radius-md);
  padding: 1rem 1.125rem;
  margin-bottom: clamp(2rem, 5vw, 3rem);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.legal__draft strong {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-label-tight);
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: 0.375rem;
}

.legal__intro {
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-text-secondary);
  margin: 0 0 clamp(2rem, 5vw, 2.75rem);
}

.legal__body { counter-reset: legal-section; }

.legal h2 {
  counter-increment: legal-section;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 2.6vw, 1.375rem);
  line-height: 1.25;
  letter-spacing: var(--tracking-tight);
  margin: clamp(2.25rem, 5vw, 3rem) 0 0.875rem;
  padding-top: clamp(1.5rem, 4vw, 2rem);
  border-top: 1px solid var(--line-subtle);
}

.legal h2::before {
  content: counter(legal-section) ". ";
  color: var(--color-text-disabled);
  font-family: var(--font-mono);
  font-size: 0.8em;
}

.legal h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: var(--tracking-tight);
  margin: 1.75rem 0 0.5rem;
}

.legal p,
.legal li {
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--color-text-secondary);
}

.legal p { margin: 0 0 1rem; }
.legal p:last-child { margin-bottom: 0; }

.legal ul {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

.legal li { margin-bottom: 0.5rem; }

.legal strong { color: var(--color-text); font-weight: 600; }

.legal a {
  color: var(--color-cyan);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

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

/* Warranty and liability are conspicuous by legal convention, not by shouting:
   a boxed block reads as set apart without a wall of capitals. */
.legal__conspicuous {
  border: 1px solid var(--line-strong);
  background: var(--surface-embedded);
  border-radius: var(--radius-md);
  padding: clamp(1rem, 3vw, 1.5rem);
  margin: 0 0 1rem;
}

.legal__conspicuous p:last-child { margin-bottom: 0; }

/* An unresolved fact, visible on purpose. */
.legal__tk {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-error);
  background: rgba(255, 96, 125, .08);
  border-radius: var(--radius-xs);
  padding: 0.05em 0.35em;
}

.legal__contact {
  border: 1px solid var(--line-faint);
  background: var(--surface-embedded);
  border-radius: var(--radius-card);
  padding: clamp(1.25rem, 3.5vw, 1.75rem);
  margin-top: clamp(2.25rem, 5vw, 3rem);
}

.legal__contact p:last-child { margin-bottom: 0; }

/* ---- footer ---- */
.legal-footer {
  flex: 0 0 auto;
  border-top: 1px solid var(--line-subtle);
  background: var(--color-bg-footer);
  padding: clamp(1.75rem, 4vw, 2.5rem) var(--page-gutter);
}

.legal-footer__inner {
  max-width: var(--container-narrow);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem var(--page-gutter);
  justify-content: space-between;
}

.legal-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: 13.5px;
}

.legal-footer__links a {
  color: var(--color-text-secondary);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.legal-footer__links a:hover { color: var(--color-text); }
.legal-footer__links a[aria-current] { color: var(--color-text); }

.legal-footer__copy {
  font-size: 13px;
  color: var(--color-text-disabled);
}

@media (min-width: 48rem) {
  .legal-footer__links a { min-height: 0; }
}

/* The way out of the marketing privacy section to the actual policy. */
.privacy__policy-link {
  margin: clamp(1.5rem, 4vw, 2rem) 0 0;
  font-size: 14px;
  color: var(--color-text-tertiary);
}

.privacy__policy-link a { color: var(--color-cyan); }
.privacy__policy-link a:hover { color: var(--color-text); }