/* ==========================================================================
   Self-hosted web fonts (replacing the former Google Fonts CDN @import — the
   site CSP is `style-src 'self'` / `font-src 'self'`, so the cross-origin
   import was both blocked and a privacy/perf liability). The woff2 files are
   served from /static/fonts/ and compiled into the binary. Newsreader ships a
   variable woff2 per subset (optical sizing 6..72, weight 380..500) used for
   the SERIF display headings; Inter ships a single variable woff2 per subset
   covering 400-600 for body; JetBrains Mono ships the 500 weight used for
   eyebrows / labels / code / metric type.
   ========================================================================== */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 380 500;
  font-stretch: normal;
  font-display: swap;
  src: url("/static/fonts/newsreader-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 380 500;
  font-stretch: normal;
  font-display: swap;
  src: url("/static/fonts/newsreader-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/static/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/static/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   XNN Translate — INTERLINEAR product-landing fonts (self-hosted woff2, added
   for the "caption that reads itself" landing redesign; scoped in use to the
   `.xt-il` root so the institutional pages keep Newsreader/Inter/JetBrains).
   All four families are OFL (SIL Open Font License 1.1): Fraunces (variable),
   IBM Plex Sans, IBM Plex Sans JP, IBM Plex Mono — pre-subset woff2 from
   Fontsource (https://fontsource.org). Every face uses font-display: swap and a
   unicode-range so a subset only downloads when its glyphs are actually painted
   (the ~873 KB Japanese subset loads only when a Japanese source line renders).
   Latin / latin-ext / cyrillic ranges match the institutional faces above so a
   glyph resolves to exactly one subset; the caption couplets set Russian
   (Cyrillic), ES/PT diacritics (latin-ext) and 日本語 (Japanese) correctly.
   ========================================================================== */

/* --- Fraunces: variable optical-size + weight, the display + translated line --- */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 700;
  font-optical-sizing: auto;
  font-display: swap;
  src: url("/static/fonts/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 700;
  font-optical-sizing: auto;
  font-display: swap;
  src: url("/static/fonts/fraunces-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- IBM Plex Sans: body/UI + the bilingual couplets (Latin + latin-ext + Cyrillic) --- */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/plex-sans-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/plex-sans-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/plex-sans-cyrillic-400.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/plex-sans-latin-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/plex-sans-latin-ext-400-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/plex-sans-cyrillic-400-italic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/plex-sans-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/plex-sans-latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/plex-sans-latin-ext-600.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/plex-sans-cyrillic-600.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/plex-sans-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- IBM Plex Sans JP: the Japanese source line (loads only for JP glyphs) --- */
@font-face {
  font-family: "IBM Plex Sans JP";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/plex-sans-jp-japanese-400.woff2") format("woff2");
  unicode-range: U+3000-303F, U+3040-309F, U+30A0-30FF, U+31F0-31FF, U+FF00-FFEF, U+4E00-9FFF, U+3400-4DBF;
}

/* --- IBM Plex Mono: utility/telemetry (latency, RU→EN chips, prices, cue nums) --- */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/plex-mono-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/plex-mono-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   XNN — refined institutional design system (owner-approved).
   One deep, cool-charcoal canvas, a quiet surface ladder, translucent
   hairlines (not shadows), SERIF display headings (Newsreader), Inter body,
   JetBrains Mono labels, and ONE rationed quiet-slate accent. No gradients,
   no glows, no marketing decoration. Token-driven; component CSS references
   tokens only, so the whole system retunes from this block.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- surfaces (deep cool charcoal; a restrained ladder) --- */
  --canvas: #0b0c0e;
  --surface-1: #101115;
  --surface-2: #15171c;
  --surface-3: #1c1f26;
  --footer-bg: #08090b;

  /* --- hairlines (cool, very low contrast) --- */
  --border-subtle: rgba(240, 242, 245, 0.085);
  --border-strong: rgba(240, 242, 245, 0.15);
  --light-catch: inset 0 1px 0 rgba(240, 242, 245, 0.03);

  /* --- ink --- */
  --ink: #f0f1f3;
  --ink-soft: #a2a6ad;
  --ink-muted: #82868f;
  /* Raised from #5d626b so the faintest ink clears WCAG AA non-text/large
     contrast (>=3:1) against every surface it is used on — including input
     placeholders on --surface-3 (was 2.69:1, now 3.31:1). Body text uses the
     brighter --ink / --ink-soft / --ink-muted tokens, which already pass AA. */
  --ink-faint: #6b7079;

  /* --- the single quiet slate accent --- */
  --accent: #93b1d6;
  --accent-hover: #b3c8e4;
  --accent-press: #7c9dc6;
  --accent-tint: rgba(147, 177, 214, 0.12);
  --accent-tint-strong: rgba(147, 177, 214, 0.2);
  --accent-ink: #0b0c0e;
  /* gradient tokens neutralised to the flat accent — the refined system uses
     a single solid slate, no gradients/glows anywhere. */
  --violet: #93b1d6;
  --brand-gradient: var(--accent);

  /* --- semantics (sparingly, muted to match the cool palette) --- */
  --live: #7fb8a0;
  --warning: #cbb072;
  --danger: #d98a8e;
  --danger-tint: rgba(217, 138, 142, 0.12);

  /* Caution amber for "heads-up, not verified" states (e.g. the unsigned
     installer badge). Desaturated warm tones tuned to sit beside the cool
     palette without shouting — a subtle tint bg + border, and a brighter ink
     that clears AA against the dark tint. Distinct from --danger (error) and
     --live/--accent (positive), so an unsigned build never reads as verified. */
  --warn: #d8bd83;
  --warn-tint: rgba(203, 176, 114, 0.12);
  --warn-tint-strong: rgba(203, 176, 114, 0.28);

  /* --- depth (used rarely; quiet, no colour glow) --- */
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.5);
  --glow-accent: none;

  /* --- radii --- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-frame: 20px;
  --r-pill: 9999px;

  /* --- layout --- */
  --container: 1120px;
  --container-wide: 1280px;
  --pad-x: clamp(20px, 5vw, 40px);
  --edge: max(var(--pad-x), calc((100% - var(--container)) / 2));
  --edge-wide: max(var(--pad-x), calc((100% - var(--container-wide)) / 2));
  --section-y: clamp(56px, 9vw, 96px);

  /* --- motion --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --t-color: 120ms var(--ease-standard);
  --t-lift: 180ms var(--ease-out);

  --focus-ring: 0 0 0 2px var(--canvas), 0 0 0 4px rgba(147, 177, 214, 0.55);

  /* --- type families: serif display, sans body, mono labels --- */
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-family: var(--font-sans);
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1;
  font-variant-numeric: oldstyle-nums;
}

/* ============================ reset / base ============================ */

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

html {
  min-width: 320px;
  background: var(--canvas);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink-soft);
  background: var(--canvas);
  font-size: 17px;
  line-height: 1.62;
  font-feature-settings: "kern" 1, "liga" 1;
  font-variant-numeric: oldstyle-nums;
  /* Long unbroken strings (activation keys, device ids, URLs, emails) must
     never force the page wider than the viewport on phones. */
  overflow-wrap: break-word;
}

/* Global guard against horizontal overflow: long tokens wrap instead of
   widening the page. `overflow-wrap` handles ordinary words; the
   word-break/hyphens fallbacks below catch very long unbroken strings. */
p,
li,
dd,
dt,
h1,
h2,
h3,
h4,
figcaption,
blockquote,
.hero-body,
.section-heading > p {
  overflow-wrap: break-word;
}

/* Code / token-like content (activation keys, device ids) is the worst
   offender: it has no spaces, so it needs an explicit anywhere break. */
code,
kbd,
samp,
pre,
.metadata-list dd,
.visual-value,
[data-device-id],
[data-activation-key] {
  overflow-wrap: anywhere;
  word-break: break-word;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

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

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

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 4px;
}

::selection {
  background: var(--accent-tint-strong);
  color: var(--ink);
}

h1,
h2,
h3,
h4 {
  color: var(--ink);
  font-family: var(--font-serif);
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.012em;
  font-variant-numeric: lining-nums;
  font-feature-settings: "kern" 1, "liga" 1;
}

p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

hr {
  border: 0;
  border-top: 1px solid var(--border-subtle);
  margin: 0;
}

strong {
  color: var(--ink);
  font-weight: 600;
}

code,
kbd,
samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-variant-numeric: lining-nums;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--surface-3);
  color: var(--ink);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  transform: translateY(-160%);
  transition: transform 160ms var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
}

/* ============================ shared text atoms ============================ */

.eyebrow {
  margin: 0 0 18px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-variant-numeric: lining-nums;
}

.muted {
  color: var(--ink-muted);
}

/* ============================ buttons / CTAs ============================ */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: background var(--t-color), border-color var(--t-color),
    color var(--t-color), transform 80ms var(--ease-standard), box-shadow var(--t-color);
}

.button--primary {
  background: var(--accent);
  color: var(--accent-ink);
}

.button--primary:hover {
  background: var(--accent-hover);
  color: var(--accent-ink);
  transform: translateY(-1px);
}

.button--primary:active {
  background: var(--accent-press);
  transform: scale(0.98);
}

.button--secondary {
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--border-strong);
}

.button--secondary:hover {
  background: var(--surface-3);
  border-color: var(--border-strong);
  color: var(--ink);
}

/* Tertiary: the quietest button tier — a bordered, low-emphasis control for
   secondary dashboard actions (the devices "Move to another device — $5"
   button, standalone Sign out forms). Legible, accessible 44px tap target;
   ghost fill that fills in on hover. */
.button--tertiary {
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--border-subtle);
}

.button--tertiary:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--ink);
}

.button--tertiary:active {
  background: var(--surface-3);
  transform: scale(0.98);
}

.button.is-disabled,
.button[aria-disabled="true"] {
  background: var(--surface-2);
  color: var(--ink-faint);
  border-color: var(--border-subtle);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-weight: 600;
  font-size: 15px;
}

.text-link::after {
  content: "→";
  transition: transform 160ms var(--ease-out);
}

.text-link:hover {
  color: var(--accent-hover);
}

.text-link:hover::after {
  transform: translateX(3px);
}

.cta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
}

.section-action {
  margin-top: 32px;
}

/* ============================ header / nav ============================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 20px;
  height: 64px;
  padding-inline: var(--edge-wide);
  background: rgba(11, 12, 14, 0.82);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--t-color), border-color var(--t-color);
}

html.page-scrolled .site-header {
  background: rgba(11, 12, 14, 0.94);
  border-bottom-color: var(--border-subtle);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  font-variant-numeric: lining-nums;
}

.brand::before {
  content: "";
  width: 20px;
  height: 20px;
  background: var(--accent);
  -webkit-mask: url("/static/brand-mark.svg") center / contain no-repeat;
  mask: url("/static/brand-mark.svg") center / contain no-repeat;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
}

.primary-nav a {
  padding: 8px 12px;
  border-radius: var(--r-sm);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: color var(--t-color), background var(--t-color);
}

.primary-nav a:hover {
  color: var(--ink);
  background: var(--surface-2);
}

.primary-nav a[aria-current="page"] {
  color: var(--accent);
  background: var(--accent-tint);
}

/* Discoverable Download nav entry. A quiet outlined accent chip — slightly
   emphasised over the plain company-nav links so it stands out as the way to
   get the app, but restrained enough to stay within the institutional chrome
   (no solid marketing-button fill). Lives just left of the account slot. */
.primary-nav a.site-nav-download {
  color: var(--accent);
  border: 1px solid var(--accent-tint-strong);
  background: var(--accent-tint);
}

.primary-nav a.site-nav-download:hover {
  color: var(--accent-hover);
  border-color: var(--accent);
  background: var(--accent-tint-strong);
}

/* Account slot in the header nav. Signed-out it is the quiet "Sign in" link;
   signed-in the `inject_account_nav` middleware swaps it for an "Account" link
   (→ /app) plus a "Sign out" control. Pushed to the right edge so it reads as a
   distinct account area, separate from the company nav. The Sign out button is
   styled to match the plain nav links (no marketing CTA styling). */
/* Desktop only: push the account slot to the right edge of the horizontal
   primary-nav. In the mobile disclosure column the nav is `flex-direction:
   column`, where `margin-left:auto` misbehaves (it consumes the cross-axis
   gap and breaks the stacked layout), so it is scoped out below 861px and the
   account controls are restyled as full-width menu items there. */
@media (min-width: 861px) {
  .site-nav-account {
    margin-left: auto;
  }
}

.site-nav-signout {
  display: inline-flex;
  margin: 0;
}

.site-nav-signout-button {
  padding: 8px 12px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: color var(--t-color), background var(--t-color);
}

.site-nav-signout-button:hover {
  color: var(--ink);
  background: var(--surface-2);
}

/* NOTE: the `.header-actions` marketing CTA group is no longer rendered in the
   chrome (a route test asserts its absence), so its styling — including the old
   `.header-actions .button { height: 38px }` and the mobile overrides below —
   was removed as dead. site.js still queries `.header-actions` defensively
   (returns null, no-op). */

/* mobile nav toggle — a real focusable <button> (site.js drives aria-expanded
   + .is-open) plus a visually-hidden-but-focusable checkbox as the no-JS
   fallback (its :checked state opens the nav via the sibling rule below,
   scoped to html:not(.js)). */
.nav-toggle-state {
  /* visually hidden but kept focusable so the toggle is keyboard-operable
     with no JavaScript (Space flips the checkbox). NOT aria-hidden /
     tabindex=-1, so a no-JS keyboard user can still reach it. */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  margin-left: auto;
  /* reset native <button> chrome so it matches the former label styling */
  padding: 0;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  cursor: pointer;
}

/* keyboard focus ring on Tab — the button is the focusable control now. The
   second selector keeps a ring on the button when the no-JS checkbox is
   focused (they sit adjacent in source order). */
.nav-toggle:focus-visible,
.nav-toggle-state:focus-visible + .nav-toggle {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after {
  content: "";
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 160ms var(--ease-out), opacity 120ms;
}

.nav-toggle-icon::before {
  transform: translateY(-6px);
}

.nav-toggle-icon::after {
  transform: translateY(4.5px);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon,
.nav-toggle-state:checked + .nav-toggle .nav-toggle-icon {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon::before,
.nav-toggle-state:checked + .nav-toggle .nav-toggle-icon::before {
  transform: translateY(0) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon::after,
.nav-toggle-state:checked + .nav-toggle .nav-toggle-icon::after {
  transform: translateY(-1.5px) rotate(-45deg);
}

@media (max-width: 860px) {
  .site-header {
    flex-wrap: wrap;
  }

  .nav-toggle {
    display: inline-flex;
    order: 3;
  }

  .primary-nav {
    order: 10;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: 0 0 12px;
    padding: 8px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    background: var(--surface-1);
    display: none;
  }

  /* JS-enhanced open state. Cap the height so a tall menu on a short viewport
     scrolls inside the disclosure instead of overflowing the page; 64px ~ the
     header band the nav drops below. */
  .primary-nav.is-open {
    display: flex;
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
  }

  /* No-JS open state: the checkbox is the source of truth until site.js adds
     `.js` to <html> and takes over via `.is-open`. Scoping to html:not(.js)
     stops the two mechanisms from fighting once the script loads. */
  html:not(.js) .nav-toggle-state:checked ~ .primary-nav {
    display: flex;
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
  }

  /* When the mobile nav is open, lock background scroll so the page behind the
     disclosure doesn't move under the menu. Toggled by site.js (body.nav-open);
     the no-JS path leaves the body scrollable, which is acceptable. */
  body.nav-open {
    overflow: hidden;
  }

  .primary-nav a {
    padding: 12px 14px;
    font-size: 15px;
  }

  /* The account slot lives at the tail of .primary-nav, so inside the mobile
     disclosure column it must read as two more full-width menu rows: an
     "Account" link and a "Sign out" button, each a comfortable ≥44px tap
     target, visually separated from the company nav by a hairline. */
  .site-nav-account {
    margin-top: 6px;
    padding: 12px 14px;
    font-size: 15px;
    border-top: 1px solid var(--border-subtle);
    border-radius: 0;
  }

  .site-nav-signout {
    display: flex;
    width: 100%;
  }

  .site-nav-signout-button {
    width: 100%;
    min-height: 44px;
    padding: 12px 14px;
    text-align: left;
    font-size: 15px;
  }
}

/* ======================= product-scoped chrome (xnntranslate.com) ============
   The XNN Translate PRODUCT deployment wears its own header/footer instead of
   inheriting the dark institutional company chrome. Scoped to `body.xnn-product`
   so the company site + every other page are untouched. The header is a light,
   warm-paper bar that matches the `.xt-il` interlinear landing, the nav is the
   product nav (real pages, no dead anchors), and the right side carries a filled
   teal "Start free trial" CTA. Interlinear palette hexes are used verbatim here
   because the `--il-*` tokens are scoped under `.xt-il` (the <main>), not the
   chrome. ========================================================================= */
body.xnn-product .site-header--product {
  background: rgba(8, 9, 12, 0.72);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
html.page-scrolled body.xnn-product .site-header--product {
  background: rgba(8, 9, 12, 0.92);
  border-bottom-color: rgba(255, 255, 255, 0.09);
}
body.xnn-product .site-header--product .brand {
  color: #f2f4f8;
  font-family: "IBM Plex Sans", var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  text-indent: 0;
}
body.xnn-product .site-header--product .brand::before {
  background: linear-gradient(135deg, #57e6ff, #7c6cff);
}
body.xnn-product .site-header--product .primary-nav a {
  color: #9aa3b2;
  font-family: "IBM Plex Sans", var(--font-sans);
  font-size: 13.5px;
  letter-spacing: 0;
}
body.xnn-product .site-header--product .primary-nav a:hover {
  color: #f2f4f8;
  background: rgba(255, 255, 255, 0.05);
}
body.xnn-product .site-header--product .primary-nav a[aria-current="page"] {
  color: #57e6ff;
  background: rgba(87, 230, 255, 0.1);
}
body.xnn-product .site-header--product .site-nav-account {
  color: #9aa3b2;
  font-family: "IBM Plex Sans", var(--font-sans);
  font-size: 13.5px;
}
body.xnn-product .site-header--product .site-nav-account:hover {
  color: #f2f4f8;
  background: rgba(255, 255, 255, 0.05);
}
/* Filled blue trial CTA — the one prominent action in the product header. */
body.xnn-product .site-header--product .site-nav-cta {
  margin-left: 8px;
  padding: 9px 17px;
  border-radius: 8px;
  background: #4d8dff;
  color: #04122e;
  font-family: "IBM Plex Sans", var(--font-sans);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.005em;
  transition: background var(--t-color), transform var(--t-lift);
}
body.xnn-product .site-header--product .site-nav-cta:hover {
  background: #6ba0ff;
}
body.xnn-product .site-header--product .site-nav-cta:active {
  transform: translateY(1px);
}
body.xnn-product .site-header--product .site-nav-signout-button {
  color: #9aa3b2;
}
body.xnn-product .site-header--product .site-nav-signout-button:hover {
  color: #f2f4f8;
  background: rgba(255, 255, 255, 0.05);
}
/* Product footer on the dark ground. */
body.xnn-product .site-footer {
  background: #0b0d11;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  color: #9aa3b2;
}
body.xnn-product .site-footer .footer-brand strong {
  color: #f2f4f8;
  font-weight: 700;
}
body.xnn-product .site-footer .footer-group > summary {
  color: #f2f4f8;
}
body.xnn-product .site-footer .footer-nav a {
  color: #9aa3b2;
}
body.xnn-product .site-footer .footer-nav a:hover {
  color: #57e6ff;
}
body.xnn-product .site-footer .footer-identity {
  color: #6e7880;
}
body.xnn-product .site-footer .footer-identity-email {
  color: #57e6ff;
}

@media (max-width: 860px) {
  body.xnn-product .site-header--product .primary-nav {
    background: rgba(14, 16, 20, 0.98);
    border-color: rgba(255, 255, 255, 0.1);
  }
  body.xnn-product .site-header--product .site-nav-account {
    border-top-color: rgba(255, 255, 255, 0.08);
  }
  body.xnn-product .site-header--product .site-nav-cta {
    margin-left: 0;
    margin-top: 8px;
    text-align: center;
  }
}

/* ============================ main / page wrappers ============================ */

.public-page,
.platform-page {
  display: block;
}

/* full-bleed band, centered content */
.hero,
.page-section,
.page-cta,
.related-links,
.related-link-groups {
  padding-block: var(--section-y);
  padding-inline: var(--edge);
}

/* ============================ hero (full, render.rs) ============================ */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  padding-top: clamp(64px, 10vw, 128px);
  overflow: hidden;
}

.hero::before {
  display: none;
}

.hero > * {
  position: relative;
  z-index: 1;
}

.hero-copy {
  max-width: 620px;
}

.hero-copy h1,
#hero-title {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 4.4vw, 3.875rem);
  line-height: 1.05;
  font-weight: 440;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 22px;
  max-width: 16ch;
  font-variant-numeric: lining-nums;
}

.hero-body {
  font-size: clamp(1.1rem, 1.4vw, 1.25rem);
  line-height: 1.56;
  color: var(--ink-soft);
  margin: 0;
  max-width: 56ch;
  font-weight: 400;
}

/* legacy hero badge row (kept minimal where still used) */
.badge-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0 0;
}

.badge-list li {
  padding: 6px 12px;
  font-size: 13px;
  color: var(--ink-soft);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-pill);
}

/* hero product image (the showcase frame) */
.hero-visual--shot {
  margin: 0;
  position: relative;
}

.hero-visual--shot::before {
  display: none;
}

.hero-shot {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-frame);
  box-shadow: var(--shadow-lg), var(--light-catch);
}

/* legacy text-frame hero visual (non-home product pages) */
.hero-visual {
  margin: 0;
}

.hero-visual > h2 {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  margin: 0 0 16px;
  font-variant-numeric: lining-nums;
}

.visual-frame {
  padding: 18px 20px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  background: var(--surface-1);
  box-shadow: var(--light-catch);
}

.visual-frame + .visual-frame {
  margin-top: 12px;
}

.visual-label {
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  font-variant-numeric: lining-nums;
}

.visual-value {
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: lining-nums;
}

.visual-detail {
  margin: 0;
  font-size: 14px;
  color: var(--ink-muted);
}

/* compact hero used by routes.rs owned pages (pricing, account, docs, …) */
.hero--compact {
  display: block;
  grid-template-columns: none;
  padding-top: clamp(56px, 8vw, 96px);
  padding-bottom: clamp(36px, 5vw, 56px);
  border-bottom: 1px solid var(--border-subtle);
}

.hero--compact::before {
  height: 320px;
}

.hero--compact .hero-copy {
  max-width: 760px;
}

.hero--compact h1 {
  font-size: clamp(1.95rem, 3.4vw, 2.9rem);
  line-height: 1.07;
  letter-spacing: -0.012em;
  margin: 0 0 18px;
}

.hero--compact .hero-body {
  max-width: 660px;
}

/* a route-notice aside that sometimes sits in a compact hero */
.route-notice {
  margin-top: 22px;
  padding: 16px 18px;
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  background: var(--surface-1);
  color: var(--ink-soft);
  font-size: 14px;
}

.route-notice[role="alert"] {
  border-left-color: var(--danger);
}

.route-notice h2 {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0 0 6px;
}

.route-notice ul {
  margin: 8px 0 0;
  padding-left: 18px;
  list-style: disc;
}

/* The activation key (`<code class="activation-key">`) is a long unbroken
   `stk_…` token. Present it as a selectable, wrapping mono block that never
   forces horizontal scroll on a phone. */
.activation-key {
  display: block;
  margin: 4px 0;
  padding: 12px 14px;
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
  word-break: break-all;
  -webkit-user-select: all;
  user-select: all;
}

/* ============================ sections ============================ */

.page-section {
  position: relative;
}

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

.section-heading h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.65rem, 2.6vw, 2.06rem);
  line-height: 1.16;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
}

.section-heading > p {
  margin: 18px 0 0;
  max-width: 66ch;
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--ink-soft);
}

.section-items {
  max-width: var(--container);
  margin: 40px auto 0;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

/* layout modifiers (band colours + column counts) */
.page-section--feature-grid .section-items {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.page-section--audience-grid .section-items {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.page-section--workflow .section-items {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.page-section--trust-list .section-items {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.page-section--callout {
  text-align: center;
}

.page-section--callout .section-heading {
  max-width: 720px;
}

.page-section--callout .section-heading > p {
  margin-inline: auto;
}

.page-section--callout .cta-group,
.page-section--callout .section-action {
  justify-content: center;
  display: flex;
}

.page-section--legal-text .section-heading {
  max-width: 760px;
  margin-inline: 0;
}

/* ============================ content cards ============================ */

.content-card {
  padding: 24px;
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  box-shadow: var(--light-catch);
  transition: border-color var(--t-lift), background var(--t-lift), transform var(--t-lift);
}

.content-card:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.content-card h3 {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 8px;
}

.content-card > p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.97rem;
}

.content-card ul {
  margin: 14px 0 0;
  display: grid;
  gap: 8px;
}

.content-card ul li {
  position: relative;
  padding-left: 22px;
  font-size: 0.92rem;
  color: var(--ink-muted);
}

.content-card ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--accent);
}

.content-card .text-link,
.content-card .button {
  margin-top: 16px;
}

/* =================== device-tier selector (checkout) =================== */
/* Each per-device tier card ends with `<label class="device-tier-option">`
   wrapping a radio. Unstyled, the bare radio + "Select …" text rendered as a
   broken-looking control on /checkout; present it as a clear, full-width,
   clickable selection control with a visible selected state, reusing the same
   design tokens as the cards/buttons. */
.device-tier-option {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 10px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--t-lift), background var(--t-lift), color var(--t-lift);
}

.device-tier-option:hover {
  border-color: var(--border-strong);
  color: var(--ink);
}

.device-tier-option input[type="radio"] {
  width: 16px;
  height: 16px;
  margin: 0;
  flex: none;
  accent-color: var(--accent);
}

/* Visible selected state for the chosen tier (modern :has(); degrades to the
   base control styling on engines without :has()). */
.device-tier-option:has(input[type="radio"]:checked) {
  border-color: var(--accent);
  color: var(--ink);
}

.content-card:has(.device-tier-option input[type="radio"]:checked) {
  border-color: var(--accent);
}

/* ====================== home-specific section treatments ====================== */

.public-page--home .hero {
  padding-bottom: clamp(48px, 7vw, 80px);
}

/* 1. value strip — borderless 4-up row with divider rules */
.public-page--home #value {
  border-block: 1px solid var(--border-subtle);
}

.public-page--home #value .section-heading {
  text-align: center;
}

.public-page--home #value .section-heading h2 {
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  color: var(--ink-soft);
  font-weight: 600;
}

.public-page--home #value .section-items {
  margin-top: 32px;
  gap: 0;
}

.public-page--home #value .content-card {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 8px 26px;
  transform: none;
}

.public-page--home #value .content-card + .content-card {
  border-left: 1px solid var(--border-subtle);
}

.public-page--home #value .content-card h3 {
  font-size: 1.02rem;
}

.public-page--home #value .content-card h3::before {
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  margin-bottom: 14px;
  background: var(--accent);
  border-radius: 2px;
}

.public-page--home #value .content-card > p {
  font-size: 0.92rem;
  color: var(--ink-muted);
}

/* 2. flagship — strong band on surface-1 with a product visual */
.public-page--home #flagship {
  background: var(--surface-1);
  border-block: 1px solid var(--border-subtle);
  overflow: hidden;
}

.public-page--home #flagship::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--brand-gradient);
  opacity: 0.6;
}

.public-page--home #flagship .section-heading {
  text-align: left;
  max-width: 620px;
  margin-inline: 0;
}

.public-page--home #flagship .section-heading h2 {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
}

.public-page--home #flagship .section-action {
  margin-inline: 0;
  margin-top: 28px;
}

.public-page--home #flagship .cta-group {
  justify-content: flex-start;
}

@media (min-width: 941px) {
  .public-page--home #flagship {
    padding-right: clamp(360px, 38vw, 560px);
  }

  .public-page--home #flagship::after {
    content: "";
    position: absolute;
    right: var(--pad-x);
    top: 50%;
    transform: translateY(-50%);
    width: clamp(320px, 34vw, 500px);
    aspect-ratio: 640 / 400;
    background: url("/static/preview-panel.svg") center / contain no-repeat;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-frame);
    box-shadow: var(--shadow-lg);
  }
}

/* 3. how it's built — darker "under the hood" band, stepped workflow */
.public-page--home #how-built {
  background: var(--surface-2);
  border-block: 1px solid var(--border-subtle);
}

.public-page--home #how-built .section-items {
  margin-top: 36px;
  counter-reset: step;
}

.public-page--home #how-built .content-card {
  background: var(--surface-1);
  position: relative;
  padding-top: 28px;
}

.public-page--home #how-built .content-card::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: 18px;
  right: 20px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent);
  opacity: 0.8;
}

/* 4. audiences — compact tiles */
.public-page--home #audiences .content-card {
  padding: 20px;
}

.public-page--home #audiences .content-card h3 {
  font-size: 1.05rem;
}

/* 5. roadmap — quiet forward-looking band */
.public-page--home #roadmap .section-heading > p {
  color: var(--ink-soft);
  font-size: 1.08rem;
}

/* 6. final CTA — contained panel, flat surface, hairline frame (no glow) */
.public-page--home #start {
  padding-block: clamp(40px, 6vw, 72px);
}

.public-page--home #start .section-heading {
  position: relative;
  max-width: var(--container);
  padding: clamp(40px, 6vw, 64px) 32px;
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.public-page--home #start .section-heading::before {
  display: none;
}

.public-page--home #start .section-heading h2 {
  font-size: clamp(1.8rem, 3vw, 2.3rem);
}

.public-page--home #start .section-action {
  margin-top: 28px;
}

/* ============================ pricing / download ============================ */

.pricing-grid,
.download-grid {
  max-width: var(--container);
  margin: 0 auto;
  padding-block: var(--section-y);
  padding-inline: var(--edge);
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pricing-card,
.download-card {
  display: flex;
  flex-direction: column;
  padding: 28px;
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  box-shadow: var(--light-catch);
}

.pricing-card h2,
.pricing-card h3,
.download-card h2,
.download-card h3 {
  font-family: var(--font-sans);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0 0 6px;
}

.pricing-card--featured,
.download-card:first-child {
  position: relative;
  background: var(--surface-2);
  border-color: var(--border-strong);
  box-shadow: var(--light-catch);
}

.price {
  font-family: var(--font-serif);
  font-size: 2.6rem;
  font-weight: 440;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 12px 0;
  font-variant-numeric: lining-nums;
}

.price small,
.price span {
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--ink-muted);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--r-pill);
  background: var(--accent-tint);
  color: var(--accent);
  border: 1px solid var(--accent-tint-strong);
  width: fit-content;
}

.pricing-card ul,
.download-card ul,
.plan-card ul {
  margin: 18px 0;
  display: grid;
  gap: 10px;
}

.pricing-card ul li,
.download-card ul li {
  position: relative;
  padding-left: 26px;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.pricing-card ul li::before,
.download-card ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

.pricing-card .button,
.download-card .button {
  margin-top: auto;
}

.status-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--ink-muted);
}

.status-label::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-faint);
}

/* feature comparison matrix */
.feature-matrix {
  max-width: var(--container);
  margin: 0 auto;
  padding-block: var(--section-y);
  padding-inline: var(--edge);
}

.matrix-list {
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  overflow: hidden;
}

.matrix-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 16px;
  padding: 14px 20px;
  font-size: 0.95rem;
}

.matrix-row + .matrix-row {
  border-top: 1px solid var(--border-subtle);
}

.matrix-row:first-child {
  background: var(--surface-2);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  font-variant-numeric: lining-nums;
}

.route-band {
  max-width: var(--container);
  margin: 0 auto var(--section-y);
  padding: 28px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  background: var(--surface-1);
}

.route-band--featured {
  border-color: var(--accent);
  background: var(--surface-2);
}

/* download platform picker */
.platform-picker {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin: 0 auto;
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-pill);
}

.platform-picker [data-platform] {
  padding: 8px 18px;
  border: 0;
  background: none;
  color: var(--ink-muted);
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--r-pill);
  transition: background var(--t-color), color var(--t-color);
}

.platform-picker [data-platform][aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-ink);
}

.installer-row,
.installer-list {
  max-width: var(--container);
  margin-inline: auto;
}

.installer-row {
  padding: 20px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  background: var(--surface-1);
}

/* The installer release-metadata <dl> (Version / File size / Checksum /
   Signing) as a tidy two-column key→value list: muted mono-ish keys, ink
   values, with the long checksum + the signing badge allowed to wrap. */
.installer-row dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 20px;
  margin: 16px 0 0;
  align-items: baseline;
}

.installer-row dt {
  color: var(--ink-muted);
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}

.installer-row dd {
  margin: 0;
  color: var(--ink);
  font-size: 0.95rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ---- download trust badges (signing state) ----
   The signing pill on the download surface, modeled on `.badge`. A SIGNED build
   gets the verified/positive accent treatment; an UNSIGNED early build gets a
   warm caution treatment (amber, never green) so it reads as "heads-up, not
   verified". `.trust-badge-note` carries the honest one-line SmartScreen
   guidance under the unsigned badge. */
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  width: fit-content;
}

.trust-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.trust-badge--verified {
  background: var(--accent-tint);
  color: var(--accent);
  border-color: var(--accent-tint-strong);
}

.trust-badge--unsigned {
  background: var(--warn-tint);
  color: var(--warn);
  border-color: var(--warn-tint-strong);
}

.trust-badge-note {
  display: block;
  max-width: 52ch;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-muted);
}

/* A de-emphasised download card for platforms that are not yet available
   (macOS, temporarily) or unsupported (Linux): lower-contrast surface, muted
   ink and a dashed hairline so they read as intentionally secondary — not
   broken — next to the primary Windows card. */
.download-card--secondary {
  background: transparent;
  border-style: dashed;
  border-color: var(--border-subtle);
  box-shadow: none;
}

.download-card--secondary h2,
.download-card--secondary h3 {
  color: var(--ink-soft);
}

.download-card--secondary p {
  color: var(--ink-muted);
}

/* ============================ premium /download page ============================ */

/* The /download hero reuses the full two-column `.hero` grid. The right column
   holds the product visual; the left holds copy, a prominent CTA, the file
   metadata line, and the calm unsigned caveat. On phones `.hero` already
   collapses to one column (see the 940px media query) — for THIS hero we keep
   the copy first and let the visual fall below it. */
.download-hero {
  align-items: center;
  border-bottom: 1px solid var(--border-subtle);
}

.download-shot {
  margin: 0;
}

/* CTA cluster: the download button, the metadata line, then the caveat. */
.download-cta {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  max-width: 56ch;
}

/* A larger, more confident primary button for the single hero download. */
.button--lg {
  height: 52px;
  padding: 0 28px;
  font-size: 16px;
  border-radius: var(--r-md);
}

/* version · size · SHA-256, set tight and monospaced under the button. */
.download-meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
}

.download-meta > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.download-meta dt {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.download-meta dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink);
  font-variant-numeric: lining-nums;
}

.download-meta dd code {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink);
}

/* The unsigned / SmartScreen caveat: honest but calm — amber accent, one line. */
.download-warn {
  margin: 0;
  position: relative;
  padding: 12px 15px 12px 30px;
  border: 1px solid var(--warn-tint-strong);
  border-left: 3px solid var(--warn);
  border-radius: var(--r-sm);
  background: var(--warn-tint);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.download-warn strong {
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}

.download-warn-dot {
  position: absolute;
  left: 15px;
  top: 18px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--warn);
}

.download-note {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-muted);
}

/* Below-the-hero editorial sections, in the site's rail + body rhythm but
   scoped to the download page (the global `.sec` rail is `xnn-editorial`-only). */
.download-wrap {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--edge);
}

.download-sec {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 64px);
  padding-block: clamp(36px, 5vw, 56px);
  border-top: 1px solid var(--border-subtle);
}

.download-sec--last {
  border-bottom: 1px solid var(--border-subtle);
}

.download-rail {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.download-ix {
  display: inline-block;
  margin-right: 8px;
  color: var(--accent);
  font-variant-numeric: lining-nums;
}

.download-sec-body h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  line-height: 1.12;
  font-weight: 440;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 16px;
}

.download-lead {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 60ch;
}

.download-feature-list,
.download-req-list {
  margin: 0;
  display: grid;
  gap: 12px;
  max-width: 62ch;
}

.download-feature-list li,
.download-req-list li {
  position: relative;
  padding-left: 26px;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.download-feature-list li strong {
  color: var(--ink);
  font-weight: 600;
}

.download-feature-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-weight: 700;
}

.download-req-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-faint);
}

/* macOS / Linux as quiet secondary chips — never three big cards. */
.other-platforms {
  margin: 0 0 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  padding: 0;
}

.other-platform {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-pill);
  background: var(--surface-1);
}

.other-platform-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.other-platform-status {
  font-size: 12.5px;
  color: var(--ink-muted);
  padding-left: 10px;
  border-left: 1px solid var(--border-subtle);
}

.text-link-inline {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The trust panel sits full width after the editorial wrap — center it. */
.platform-page--download .trust-panel {
  max-width: var(--container);
  margin: clamp(36px, 5vw, 56px) auto;
}

@media (max-width: 940px) {
  /* Keep the download hero copy ABOVE the visual on mobile (override the
     global `.hero-visual--shot { order: -1 }`), so the CTA is seen first. */
  .download-hero .hero-visual--shot {
    order: 1;
  }

  .download-sec {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

@media (max-width: 520px) {
  .download-cta .button--lg {
    width: 100%;
  }

  .other-platform {
    width: 100%;
    justify-content: flex-start;
  }
}

/* ============================ lists / dashboard atoms ============================ */

.detail-list,
.metadata-list,
.status-list {
  display: grid;
  gap: 10px;
  margin: 0;
}

.metadata-list {
  grid-template-columns: auto 1fr;
  gap: 8px 18px;
}

.metadata-list dt {
  color: var(--ink-muted);
  font-size: 0.9rem;
}

.metadata-list dd {
  margin: 0;
  color: var(--ink);
}

.detail-list li,
.status-list li {
  padding-left: 22px;
  position: relative;
  color: var(--ink-soft);
}

.detail-list li::before,
.status-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--live);
}

.trust-panel,
.support-card {
  padding: 22px 24px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  background: var(--surface-1);
}

.support-grid {
  max-width: var(--container);
  margin: 40px auto 0;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.workflow-list {
  max-width: var(--container);
  margin: 0 auto;
  padding-block: var(--section-y);
  padding-inline: var(--edge);
  display: grid;
  gap: 14px;
}

.workflow-list > * {
  padding: 18px 22px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  background: var(--surface-1);
}

/* ============================ forms ============================ */

.admin-form,
.support-contact-form {
  max-width: 640px;
  display: grid;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  background: var(--surface-1);
}

.form-grid {
  display: grid;
  gap: 16px;
}

label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
}

.form-span {
  grid-column: 1 / -1;
}

.form-note {
  font-size: 13px;
  color: var(--ink-muted);
}

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--ink-soft);
}

input,
select,
textarea {
  width: 100%;
  margin-top: 7px;
  padding: 11px 13px;
  min-height: 44px;
  background: var(--surface-3);
  color: var(--ink);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  transition: border-color var(--t-color), box-shadow var(--t-color);
}

textarea {
  min-height: 120px;
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: var(--ink-faint);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

.checkbox-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 2px 0 0;
  accent-color: var(--accent);
}

.admin-flash {
  padding: 14px 18px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-subtle);
  font-size: 14px;
}

.admin-flash--ok {
  border-color: rgba(52, 226, 160, 0.4);
  background: rgba(52, 226, 160, 0.1);
  color: var(--live);
}

.admin-flash--error {
  border-color: rgba(242, 85, 90, 0.4);
  background: var(--danger-tint);
  color: var(--danger);
}

/* Validation field errors. When a form re-renders after a validation failure
   the server marks the offending control `aria-invalid="true"` and points its
   `aria-describedby` at a `.field-error` message; these rules give that pair a
   clear, danger-toned treatment. (The markup is emitted server-side in
   routes.rs; this is the styling half so it lands the moment that ships.) */
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--danger);
}

input[aria-invalid="true"]:focus,
select[aria-invalid="true"]:focus,
textarea[aria-invalid="true"]:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-tint);
}

.field-error {
  display: block;
  margin-top: 6px;
  color: var(--danger);
  font-size: 13px;
  line-height: 1.4;
}

/* ================= commerce production polish: start =================
   Pricing, checkout, and payment status are repeated-work commerce surfaces.
   Keep them flat, compact, and easy to compare: one shared plan frame, stable
   controls, restrained semantic colour, and one visually primary action per
   state. These overrides deliberately contain no gradients or decorative glow. */

/* Pricing hero and terminal CTA: informative rather than campaign-sized. */
main.xt-landing > .xt-hero--pricing {
  padding: 56px 0 40px;
}

.xt-hero--pricing .xt-hero-glow,
.xt-hero--pricing ~ .xt-final .xt-final-glow {
  display: none;
}

main.xt-landing > .xt-hero--pricing .xt-head {
  max-width: 760px;
  margin: 0 auto;
  text-align: left;
}

main.xt-landing > .xt-hero--pricing h1 {
  max-width: 720px;
  font-family: var(--font-sans);
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: 0;
}

.xt-hero--pricing .xt-grad {
  color: var(--ink);
  background: none;
  -webkit-text-fill-color: currentColor;
}

.xt-hero--pricing .xt-sub {
  max-width: 68ch;
  margin: 16px 0 0;
  font-size: 1rem;
  line-height: 1.55;
}

/* Four plans read as one comparison control instead of four floating cards. */
.xt-hero--pricing + .xt-section {
  padding: 40px 0 56px;
}

.xt-hero--pricing + .xt-section .xt-tiers {
  gap: 0;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  overflow: clip;
}

.xt-hero--pricing + .xt-section .xt-tier {
  min-width: 0;
  padding: 24px 20px 22px;
  border: 0;
  border-top: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.xt-hero--pricing + .xt-section .xt-tier + .xt-tier {
  border-left: 1px solid var(--border-subtle);
}

.xt-hero--pricing + .xt-section .xt-tier:hover {
  background: var(--surface-1);
  border-top-color: inherit;
  transform: none;
}

.xt-hero--pricing + .xt-section .xt-tier:nth-child(1) {
  border-top-color: #6aa58f;
}

.xt-hero--pricing + .xt-section .xt-tier:nth-child(2) {
  border-top-color: #93b1d6;
}

.xt-hero--pricing + .xt-section .xt-tier:nth-child(3) {
  border-top-color: #b1a0c4;
}

.xt-hero--pricing + .xt-section .xt-tier:nth-child(4) {
  border-top-color: #c4a46d;
}

.xt-hero--pricing + .xt-section .xt-tier--featured {
  background: rgba(147, 177, 214, 0.08);
  box-shadow: none;
}

.xt-hero--pricing + .xt-section .xt-tier-badge {
  position: static;
  align-self: flex-start;
  transform: none;
  padding: 3px 8px;
  border-radius: 4px;
}

.xt-hero--pricing + .xt-section .xt-tier-name {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0;
}

.xt-hero--pricing + .xt-section .xt-tier-tag {
  min-height: 4.2em;
}

.xt-hero--pricing + .xt-section .xt-tier-price {
  min-height: 48px;
}

.xt-hero--pricing + .xt-section .xt-tier-amt {
  font-family: var(--font-sans);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0;
}

.xt-hero--pricing + .xt-section .xt-tier-devices {
  min-height: 32px;
  letter-spacing: 0;
}

.xt-hero--pricing + .xt-section .xt-tier-list {
  flex: 1;
  align-content: start;
}

.xt-hero--pricing + .xt-section .xt-tier-cta {
  min-height: 44px;
  margin-top: auto;
  border-radius: 6px;
  white-space: normal;
  text-align: center;
}

/* Reassurance is a divided information row, not another card deck. */
.xt-hero--pricing ~ .xt-section--alt .xt-cards {
  gap: 0;
  border-block: 1px solid var(--border-subtle);
}

.xt-hero--pricing ~ .xt-section--alt .xt-card {
  padding: 20px 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.xt-hero--pricing ~ .xt-section--alt .xt-card + .xt-card {
  border-left: 1px solid var(--border-subtle);
}

.xt-hero--pricing ~ .xt-section--alt .xt-card:hover {
  border-color: var(--border-subtle);
  background: transparent;
  transform: none;
}

.xt-hero--pricing ~ .xt-section .xt-head h2,
.xt-hero--pricing ~ .xt-final h2 {
  font-family: var(--font-sans);
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
}

.xt-hero--pricing ~ .xt-section .xt-faq-item {
  border-radius: 8px;
  background: transparent;
}

.xt-hero--pricing ~ .xt-final {
  padding: 48px 0;
}

.xt-hero--pricing ~ .xt-final .xt-final-inner {
  max-width: 760px;
  gap: 14px;
}

.xt-hero--pricing ~ .xt-final .xt-cta-row {
  margin-top: 8px;
}

.xt-hero--pricing ~ .xt-final .xt-cta {
  min-height: 44px;
  height: 44px;
  border-radius: 6px;
  box-shadow: none;
}

.xt-hero--pricing ~ .xt-final .button--secondary {
  height: auto;
  padding-inline: 4px;
  border-color: transparent;
  background: transparent;
}

/* Checkout and status pages share a quiet, bounded working column. */
.public-page--checkout,
.public-page--checkout-status,
.platform-page--checkout {
  --commerce-positive: #7fb8a0;
  --commerce-progress: #cbb072;
  --commerce-negative: #d98a8e;
  --commerce-neutral: #93b1d6;
}

.public-page--checkout > .hero,
.public-page--checkout-status > .hero,
.platform-page--checkout > .hero {
  display: block;
  min-height: 0;
  padding: 52px var(--edge) 38px;
  border-bottom: 1px solid var(--border-subtle);
}

.public-page--checkout > .hero::before,
.public-page--checkout-status > .hero::before,
.platform-page--checkout > .hero::before {
  display: none;
}

.public-page--checkout > .hero .hero-copy,
.public-page--checkout-status > .hero .hero-copy,
.platform-page--checkout > .hero .hero-copy {
  max-width: 760px;
}

.public-page--checkout > .hero h1,
.public-page--checkout-status > .hero h1,
.platform-page--checkout > .hero h1 {
  max-width: 720px;
  margin-bottom: 14px;
  font-family: var(--font-sans);
  font-size: 2.35rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0;
}

.public-page--checkout > .hero .hero-body,
.public-page--checkout-status > .hero .hero-body,
.platform-page--checkout > .hero .hero-body {
  max-width: 64ch;
  font-size: 1rem;
  line-height: 1.55;
}

.public-page--checkout > .route-notice {
  width: min(var(--container), calc(100% - 80px));
  margin: 0 auto;
  padding: 20px 0 20px 18px;
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  border-left: 3px solid var(--commerce-neutral);
  border-radius: 0;
  background: transparent;
}

.public-page--checkout > .route-notice .button {
  height: auto;
  margin-top: 8px;
  padding: 4px 0;
  border-color: transparent;
  background: transparent;
  color: var(--accent);
}

.public-page--checkout > .page-section,
.public-page--checkout-status > .page-section {
  width: min(var(--container), calc(100% - 80px));
  margin: 0 auto;
  padding: 48px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.public-page--checkout .section-heading,
.public-page--checkout-status .section-heading {
  max-width: 760px;
  margin: 0;
}

.public-page--checkout .section-heading h2,
.public-page--checkout-status .section-heading h2,
.public-page--checkout-status > .content-card h2 {
  font-family: var(--font-sans);
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
}

.public-page--checkout .section-heading > p,
.public-page--checkout-status .section-heading > p {
  margin-top: 10px;
  font-size: 1rem;
}

.public-page--checkout [data-plan-tier-selector] .section-items {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 24px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  overflow: clip;
}

.public-page--checkout .plan-tier-card {
  min-width: 0;
  padding: 22px 18px;
  border: 0;
  border-top: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.public-page--checkout .plan-tier-card + .plan-tier-card {
  border-left: 1px solid var(--border-subtle);
}

.public-page--checkout .plan-tier-card:nth-child(1) {
  border-top-color: #6aa58f;
}

.public-page--checkout .plan-tier-card:nth-child(2) {
  border-top-color: #93b1d6;
}

.public-page--checkout .plan-tier-card:nth-child(3) {
  border-top-color: #b1a0c4;
}

.public-page--checkout .plan-tier-card:nth-child(4) {
  border-top-color: #c4a46d;
}

.public-page--checkout .plan-tier-card:hover {
  background: var(--surface-1);
  transform: none;
}

.public-page--checkout .plan-tier-card[data-recommended="true"],
.public-page--checkout .plan-tier-card.is-selected {
  background: rgba(147, 177, 214, 0.08);
}

.public-page--checkout .plan-tier-card h3 {
  min-height: 30px;
  font-size: 1.15rem;
  letter-spacing: 0;
}

.public-page--checkout .plan-tier-card > p {
  margin: 7px 0 0;
  line-height: 1.42;
}

.public-page--checkout .plan-tier-card > p:has(> span) {
  min-height: 52px;
}

.public-page--checkout .plan-tier-card > p:has(> span) strong {
  font-size: 1.55rem;
  font-variant-numeric: lining-nums tabular-nums;
}

.public-page--checkout .plan-tier-card > p:has(> span) + p {
  min-height: 66px;
}

.public-page--checkout .plan-tier-card ul {
  flex: 1;
  align-content: start;
  margin: 16px 0;
}

.public-page--checkout .plan-tier-card .cta-group {
  width: 100%;
  margin-top: auto;
}

.public-page--checkout .plan-tier-card .button {
  width: 100%;
  min-height: 44px;
  height: auto;
  border-radius: 6px;
  white-space: normal;
  text-align: center;
}

/* All plan controls are quiet until recommendation or explicit selection. */
.public-page--checkout .plan-tier-card .button--primary {
  border-color: var(--border-strong);
  background: var(--surface-2);
  color: var(--ink);
}

.public-page--checkout .plan-tier-card[data-recommended="true"] .button--primary,
.public-page--checkout .plan-tier-card.is-selected .button--primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}

.public-page--checkout .section-items:has(.plan-tier-card.is-selected)
  .plan-tier-card[data-recommended="true"]:not(.is-selected) .button--primary {
  border-color: var(--border-strong);
  background: var(--surface-2);
  color: var(--ink);
}

/* Access and promo are supporting rows, not competing cards or primary CTAs. */
.public-page--checkout > .page-section:not([data-plan-tier-selector]) .content-card,
.public-page--checkout > .page-section:not([data-plan-tier-selector]) .admin-form {
  max-width: 760px;
  margin-top: 22px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.public-page--checkout > .page-section:not([data-plan-tier-selector]) .content-card:hover {
  background: transparent;
  transform: none;
}

.public-page--checkout > .page-section:not([data-plan-tier-selector]) .button--primary {
  border-color: var(--border-strong);
  background: transparent;
  color: var(--ink);
}

/* Status pages use a thin semantic line; colour never carries meaning alone. */
.public-page--checkout-status > .hero,
.platform-page--checkout > .hero {
  border-top: 3px solid var(--commerce-neutral);
}

.public-page--checkout-status[data-checkout-status*="processing"] > .hero {
  border-top-color: var(--commerce-progress);
}

.public-page--checkout-status[data-checkout-status*="failed"] > .hero {
  border-top-color: var(--commerce-negative);
}

.public-page--checkout-status[data-checkout-status*="canceled"] > .hero {
  border-top-color: var(--commerce-progress);
}

.public-page--checkout-status[data-checkout-status*="refunded"] > .hero {
  border-top-color: var(--commerce-positive);
}

.public-page--checkout-status > .hero .cta-group,
.platform-page--checkout > .hero .cta-group {
  align-items: center;
  margin-top: 22px;
}

.public-page--checkout-status > .hero .button,
.platform-page--checkout > .hero .button {
  min-height: 44px;
  border-radius: 6px;
}

.public-page--checkout-status > .hero .button--secondary,
.platform-page--checkout > .hero .button--secondary {
  padding-inline: 4px;
  border-color: transparent;
  background: transparent;
}

.public-page--checkout-status > .content-card {
  width: min(var(--container), calc(100% - 80px));
  margin: 0 auto;
  padding: 26px 0;
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.public-page--checkout-status > .content-card:hover {
  background: transparent;
  transform: none;
}

.public-page--checkout-status > .page-section .content-card {
  max-width: 760px;
  margin-top: 20px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.public-page--checkout-status > .page-section .button--primary {
  border-color: var(--border-strong);
  background: transparent;
  color: var(--ink);
}

@media (max-width: 960px) {
  .xt-hero--pricing + .xt-section .xt-tier + .xt-tier,
  .public-page--checkout .plan-tier-card + .plan-tier-card {
    border-left: 0;
  }

  .xt-hero--pricing + .xt-section .xt-tier:nth-child(even),
  .public-page--checkout .plan-tier-card:nth-child(even) {
    border-left: 1px solid var(--border-subtle);
  }

  .xt-hero--pricing + .xt-section .xt-tier:nth-child(n + 3),
  .public-page--checkout .plan-tier-card:nth-child(n + 3) {
    border-top-width: 1px;
  }

  .public-page--checkout [data-plan-tier-selector] .section-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  main.xt-landing > .xt-hero--pricing {
    padding: 40px 0 32px;
  }

  main.xt-landing > .xt-hero--pricing h1,
  .public-page--checkout > .hero h1,
  .public-page--checkout-status > .hero h1,
  .platform-page--checkout > .hero h1 {
    font-size: 2rem;
  }

  .xt-hero--pricing + .xt-section {
    padding: 28px 0 40px;
  }

  .xt-hero--pricing + .xt-section .xt-tier,
  .public-page--checkout .plan-tier-card {
    padding: 20px 18px;
  }

  .xt-hero--pricing + .xt-section .xt-tier:nth-child(even),
  .public-page--checkout .plan-tier-card:nth-child(even) {
    border-left: 0;
  }

  .xt-hero--pricing + .xt-section .xt-tier + .xt-tier,
  .public-page--checkout .plan-tier-card + .plan-tier-card {
    border-top-width: 1px;
  }

  .xt-hero--pricing + .xt-section .xt-tier-tag {
    min-height: 0;
  }

  .xt-hero--pricing ~ .xt-section--alt .xt-cards {
    border-block: 0;
  }

  .xt-hero--pricing ~ .xt-section--alt .xt-card {
    padding: 18px 0;
    border-top: 1px solid var(--border-subtle);
    border-left: 0;
  }

  .xt-hero--pricing ~ .xt-final {
    padding: 40px 0;
  }

  .xt-hero--pricing ~ .xt-final .xt-cta-row {
    width: 100%;
  }

  .public-page--checkout > .hero,
  .public-page--checkout-status > .hero,
  .platform-page--checkout > .hero {
    padding: 40px 20px 30px;
  }

  .public-page--checkout > .route-notice,
  .public-page--checkout > .page-section,
  .public-page--checkout-status > .page-section,
  .public-page--checkout-status > .content-card {
    width: calc(100% - 40px);
  }

  .public-page--checkout > .page-section,
  .public-page--checkout-status > .page-section {
    padding: 36px 0;
  }

  .public-page--checkout [data-plan-tier-selector] .section-items {
    grid-template-columns: 1fr;
  }

  .public-page--checkout .plan-tier-card > p:has(> span) + p {
    min-height: 0;
  }

  .public-page--checkout-status > .hero .cta-group,
  .platform-page--checkout > .hero .cta-group {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .public-page--checkout-status > .hero .button,
  .platform-page--checkout > .hero .button {
    width: 100%;
    white-space: normal;
    text-align: center;
  }
}

/* ================== commerce production polish: end ================== */

.field-error[data-checkout-error-state="pending"] {
  color: var(--warning);
}

.field-error[data-checkout-error-state="unavailable"] {
  padding: 10px 12px;
  border: 1px solid rgba(217, 138, 142, 0.35);
  border-radius: var(--r-sm);
  background: var(--danger-tint);
}

/* ============================ tables ============================ */

.admin-table {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  border-collapse: collapse;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  overflow: hidden;
  font-size: 0.92rem;
}

.admin-table thead {
  background: var(--surface-2);
}

.admin-table th {
  text-align: left;
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-variant-numeric: lining-nums;
}

.admin-table td {
  padding: 12px 16px;
  border-top: 1px solid var(--border-subtle);
  color: var(--ink-soft);
}

.admin-table tbody tr:hover {
  background: var(--surface-1);
}

/* ============================ status tones (set by site.js) ============================ */

[data-status-tone] {
  --tone: var(--ink-muted);
}

[data-status-tone="good"] {
  --tone: var(--live);
}

[data-status-tone="warning"] {
  --tone: var(--warning);
}

[data-status-tone="danger"] {
  --tone: var(--danger);
}

[data-status-tone] .status-label::before,
[data-status-tone].status-label::before {
  background: var(--tone);
}

/* ============================ page CTA (legacy, non-home) ============================ */

.page-cta {
  max-width: var(--container);
  margin: 0 auto;
  text-align: center;
}

.page-cta h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
}

.page-cta p {
  margin: 12px auto 0;
  max-width: 60ch;
  color: var(--ink-soft);
}

.page-cta .cta-group {
  justify-content: center;
}

/* ============================ related links (non-home) ============================ */

.related-links h2,
.related-link-groups .section-heading h2 {
  font-size: 1.3rem;
}

.related-links {
  max-width: var(--container);
  margin-inline: auto;
  border-top: 1px solid var(--border-subtle);
}

.related-links ul {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.related-links ul li a {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-pill);
  font-size: 14px;
  color: var(--ink-soft);
}

.related-links ul li a:hover {
  border-color: var(--border-strong);
  color: var(--ink);
}

.related-group-grid {
  max-width: var(--container);
  margin: 32px auto 0;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.related-group {
  padding: 22px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  background: var(--surface-1);
}

.related-group h3 {
  font-family: var(--font-sans);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 8px;
}

.related-group ul {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

.related-group ul li a {
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.related-group ul li a:hover {
  color: var(--accent);
}

/* ============================ footer ============================ */

.site-footer {
  margin-top: 40px;
  padding: 48px var(--edge-wide) 32px;
  background: var(--footer-bg);
  border-top: 1px solid var(--border-subtle);
  display: grid;
  grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
  gap: 32px;
}

.footer-brand strong {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  color: var(--ink);
  font-variant-numeric: lining-nums;
}

.footer-brand strong::before {
  content: "";
  width: 20px;
  height: 20px;
  background: var(--brand-gradient);
  -webkit-mask: url("/static/brand-mark.svg") center / contain no-repeat;
  mask: url("/static/brand-mark.svg") center / contain no-repeat;
}

.footer-brand p {
  margin: 14px 0 0;
  max-width: 260px;
  font-size: 14px;
  color: var(--ink-muted);
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 18px;
}

/* Required business-identity disclosure (legal name, address, phone, email).
   Spans the full footer width below the brand + nav columns; restrained, not a
   marketing block. */
.footer-identity {
  grid-column: 1 / -1;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  font-style: normal;
  font-size: 13px;
  color: var(--ink-muted);
}

.footer-identity-name {
  font-weight: 600;
  color: var(--ink);
}

.footer-identity a {
  color: inherit;
}

.footer-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 14px;
  font-variant-numeric: lining-nums;
}

.footer-group > summary::-webkit-details-marker {
  display: none;
}

.footer-group > summary::after {
  content: "";
  display: none;
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  transition: transform 160ms ease;
}

.footer-group[open] > summary::after {
  transform: rotate(225deg);
}

.footer-group > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.footer-group ul {
  display: grid;
  gap: 6px;
}

.footer-group ul li {
  line-height: 1.35;
}

.footer-group ul li a {
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink-soft);
}

.footer-group ul li a:hover {
  color: var(--accent);
}

/* defensive: any residual injected action-rail stays hidden */
.platform-action-rail {
  display: none !important;
}

/* ============================ responsive ============================ */

@media (max-width: 1100px) {
  .section-items,
  .pricing-grid,
  .download-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-section--feature-grid .section-items,
  .page-section--audience-grid .section-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .public-page--home #value .content-card:nth-child(3) {
    border-left: 0;
  }
}

@media (max-width: 940px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .hero-visual--shot {
    order: -1;
  }

  .site-footer {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-block: 48px 32px;
  }

  .footer-nav {
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid var(--border-subtle);
  }

  .footer-group {
    border-bottom: 1px solid var(--border-subtle);
  }

  .footer-group > summary {
    min-height: 48px;
    margin: 0;
    cursor: pointer;
    user-select: none;
  }

  .footer-group > summary::after {
    display: block;
  }

  .footer-group ul {
    padding-bottom: 10px;
    gap: 4px;
  }

  .footer-group ul li a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  .footer-identity {
    margin-top: 12px;
  }
}

@media (max-width: 640px) {
  .section-items,
  .pricing-grid,
  .download-grid,
  .page-section--feature-grid .section-items,
  .page-section--audience-grid .section-items,
  .page-section--workflow .section-items,
  .page-section--trust-list .section-items {
    grid-template-columns: 1fr;
  }

  .public-page--home #value .content-card {
    padding: 14px 0;
  }

  .public-page--home #value .content-card + .content-card {
    border-left: 0;
    border-top: 1px solid var(--border-subtle);
    padding-top: 18px;
  }

  .matrix-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .admin-table,
  .admin-table thead,
  .admin-table tbody,
  .admin-table tr,
  .admin-table td {
    display: block;
    width: 100%;
  }

  .admin-table thead {
    display: none;
  }

  .admin-table tr {
    margin-bottom: 12px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
  }

  .admin-table td {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border-top: 0;
  }

  .admin-table td[data-label]::before {
    content: attr(data-label);
    color: var(--ink-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .site-footer {
    padding-block: 40px 28px;
    gap: 24px;
  }

  .footer-identity {
    margin-top: 8px;
  }

  /* --- dashboard / signed-in surfaces: comfortable single column --- */

  /* CTA groups (now sometimes carrying an inline sign-out <form>) must stack
     to full width and never overflow the viewport on a phone. */
  .cta-group {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  /* Centred callout/page-cta CTAs: keep the column but centre the buttons. */
  .page-section--callout .cta-group,
  .page-cta .cta-group {
    align-items: stretch;
  }

  /* Every direct child of a CTA group — buttons, text links, and the inline
     sign-out form + its button — spans the full width as a clean tap target. */
  .cta-group > * {
    width: 100%;
  }

  .cta-group .button,
  .cta-group .text-link,
  .cta-group form button,
  .account-sign-out-form button {
    width: 100%;
  }

  .cta-group form,
  .account-sign-out-form {
    display: flex;
    margin: 0;
  }

  /* Dashboard device/content cards carry their own action forms (detach,
     "$5 move", sign out); stack those buttons full-width too. */
  .public-page--dashboard .content-card form {
    display: block;
  }

  .public-page--dashboard .content-card .button,
  .public-page--dashboard .content-card form button {
    width: 100%;
    margin-top: 10px;
  }

  /* Roomier card padding reads better than the desktop 24px on a narrow
     phone where the card is full-bleed within the page gutter. */
  .public-page--dashboard .content-card {
    padding: 20px;
  }

  /* The badge list wraps naturally; keep its items from butting the edge. */
  .badge-list {
    gap: 8px;
  }

  /* --- hero readability + comfortable tap targets on phones --- */

  /* The home hero h1 floors at its clamp minimum here; allow it the full
     measure so it isn't cramped into 16ch at ~375px. */
  .hero-copy h1,
  #hero-title {
    max-width: none;
  }

  /* Standalone arrow links (e.g. card "Learn more") get a real touch height
     and a bit of inline padding so they clear the 44px minimum. */
  .text-link {
    min-height: 44px;
    padding-block: 6px;
  }

  /* Long key/value rows (device id, email, order id) stack so the value has
     the full width to wrap into rather than squeezing a fixed first column. */
  .metadata-list {
    grid-template-columns: 1fr;
    gap: 2px 0;
  }

  .metadata-list dt {
    margin-top: 8px;
  }

  .metadata-list dt:first-of-type {
    margin-top: 0;
  }

  /* Related-link pills are tap targets too. */
  .related-links ul li a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
}

/* ============================ motion preferences ============================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== editorial pages (/ and /translate) — merged from xnn.css, scoped ===== */
/* The bespoke editorial homepage/product layout, lifted from static/xnn.css and
   transformed two ways so it can live in one stylesheet without colliding with
   the institutional platform rules above:
     1. Every selector is SCOPED under `body.xnn-editorial`, so these rules only
        apply once the editorial pages opt in (a later phase adds that body
        class). Until then this whole block is INERT.
     2. xnn.css's CSS-variable vocabulary is rewritten to site.css's canonical
        tokens (--bg→--canvas, --bg2→--surface-1, --tx→--ink, --txs→--ink-soft,
        --txt→--ink-muted, --line→--border-subtle, --line2→--border-strong,
        --acc→--accent, --serif→--font-serif, --sans→--font-sans,
        --mono→--font-mono). `--navbg` had no token and isn't used by any carried
        CONTENT rule, so nothing is inlined.
   Editorial CHROME (.site-nav/.nav/.nlinks/.brand/.skip-link/.nav-toggle/.foot/
   .foot-identity) and the duplicate @font-face blocks are intentionally NOT
   carried — the institutional header/footer above replace them. */

body.xnn-editorial .wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 56px;
}

body.xnn-editorial .hero {
  padding: 132px 0 104px;
  border-bottom: 1px solid var(--border-subtle);
}
body.xnn-editorial .hero--product {
  padding: 116px 0 92px;
}
body.xnn-editorial .kick {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 40px;
  font-variant-numeric: lining-nums;
}
body.xnn-editorial .hero--product .kick {
  margin-bottom: 34px;
}
body.xnn-editorial .kick a {
  color: var(--accent);
  padding: 4px 0;
  display: inline-block;
}
body.xnn-editorial .kick a:hover {
  color: var(--ink);
}
body.xnn-editorial h1 {
  font-family: var(--font-serif);
  font-size: 62px;
  line-height: 1.05;
  font-weight: 440;
  letter-spacing: -0.012em;
  max-width: 15ch;
  font-variant-numeric: lining-nums;
  font-feature-settings: "kern" 1, "liga" 1;
}
body.xnn-editorial .hero--product h1 {
  font-size: 52px;
  line-height: 1.08;
  max-width: 18ch;
}
body.xnn-editorial .lede {
  margin-top: 34px;
  font-size: 20px;
  line-height: 1.56;
  color: var(--ink-soft);
  max-width: 56ch;
  font-weight: 400;
}
body.xnn-editorial .hero--product .lede {
  margin-top: 30px;
  max-width: 58ch;
}

body.xnn-editorial .sec {
  display: grid;
  grid-template-columns: 188px 1fr;
  gap: 64px;
  padding: 84px 0;
  border-bottom: 1px solid var(--border-subtle);
}
body.xnn-editorial .sec--product {
  grid-template-columns: 200px 1fr;
  padding: 74px 0;
}
body.xnn-editorial .sec--last {
  border-bottom: none;
}
body.xnn-editorial .rail {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  padding-top: 6px;
  font-variant-numeric: lining-nums;
}
body.xnn-editorial .rail .ix {
  color: var(--accent);
}
body.xnn-editorial .body h2 {
  font-family: var(--font-serif);
  font-size: 33px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.16;
  margin-bottom: 28px;
  font-variant-numeric: lining-nums;
  font-feature-settings: "kern" 1, "liga" 1;
}
body.xnn-editorial .sec--product .body h2 {
  font-size: 30px;
  margin-bottom: 24px;
}
body.xnn-editorial .body h2.tight {
  margin-bottom: 22px;
}
body.xnn-editorial .body p {
  color: var(--ink-soft);
  font-size: 17px;
  max-width: 66ch;
  margin-bottom: 18px;
  line-height: 1.62;
}
body.xnn-editorial .body p:last-child {
  margin-bottom: 0;
}
body.xnn-editorial .body p.lead {
  color: var(--ink);
  font-size: 18px;
  line-height: 1.58;
}

body.xnn-editorial .areas {
  margin-top: 8px;
}
body.xnn-editorial .area {
  padding: 28px 0;
  border-top: 1px solid var(--border-subtle);
  display: grid;
  grid-template-columns: 236px 1fr;
  gap: 36px;
}
body.xnn-editorial .area:first-child {
  border-top: 0;
  padding-top: 0;
}
body.xnn-editorial .area h3 {
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
}
body.xnn-editorial .area p {
  margin: 0;
  font-size: 16px;
  color: var(--ink-soft);
  max-width: 56ch;
  line-height: 1.58;
}

/* system-requirements list: same calm two-column rhythm as .area */
body.xnn-editorial .req {
  margin: 8px 0 0;
}
body.xnn-editorial .req-row {
  padding: 28px 0;
  border-top: 1px solid var(--border-subtle);
  display: grid;
  grid-template-columns: 236px 1fr;
  gap: 36px;
}
body.xnn-editorial .req-row:first-child {
  border-top: 0;
  padding-top: 0;
}
body.xnn-editorial .req-row dt {
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
}
body.xnn-editorial .req-row dd {
  margin: 0;
  font-size: 16px;
  color: var(--ink-soft);
  max-width: 56ch;
  line-height: 1.58;
}

/* products row: link drops below description at intermediate widths */
body.xnn-editorial .prow {
  display: grid;
  grid-template-columns: 236px 1fr;
  gap: 36px;
  align-items: start;
}
body.xnn-editorial .pn {
  font-size: 16.5px;
  font-weight: 600;
}
body.xnn-editorial .pinfo {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: start;
}
body.xnn-editorial .pd {
  font-size: 16px;
  color: var(--ink-soft);
  max-width: 52ch;
  margin: 0;
  line-height: 1.58;
}
body.xnn-editorial .pl {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--accent);
  white-space: nowrap;
  transition: color 0.15s;
  letter-spacing: 0.01em;
  display: inline-block;
  padding: 12px 2px;
  margin-top: -10px;
}
body.xnn-editorial .pl:hover {
  color: var(--ink);
}

body.xnn-editorial .contact-link {
  font-family: var(--font-serif);
  font-size: 23px;
  font-weight: 440;
  border-bottom: 1px solid var(--border-strong);
  padding: 6px 2px 4px;
  display: inline-block;
  transition: border-color 0.2s;
}
body.xnn-editorial .contact-link:hover {
  border-color: var(--accent);
}
body.xnn-editorial .backlink {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--accent);
  margin-top: 16px;
  display: inline-block;
  padding: 11px 2px;
  transition: color 0.15s;
  letter-spacing: 0.01em;
}
body.xnn-editorial .backlink:hover {
  color: var(--ink);
}

@media (max-width: 1180px) {
  body.xnn-editorial .pinfo {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  body.xnn-editorial .pl {
    margin-top: 0;
    padding: 11px 0;
  }
}
@media (max-width: 820px) {
  body.xnn-editorial .wrap {
    padding: 0 24px;
  }
  body.xnn-editorial .hero {
    padding: 80px 0 60px;
  }
  body.xnn-editorial .hero--product {
    padding: 72px 0 52px;
  }
  body.xnn-editorial h1 {
    font-size: 38px;
  }
  body.xnn-editorial .hero--product h1 {
    font-size: 33px;
  }
  body.xnn-editorial .lede {
    font-size: 18px;
  }
  body.xnn-editorial .sec {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 56px 0;
  }
  body.xnn-editorial .sec--product {
    gap: 20px;
    padding: 50px 0;
  }
  body.xnn-editorial .body h2 {
    font-size: 27px;
  }
  body.xnn-editorial .sec--product .body h2 {
    font-size: 25px;
  }
  body.xnn-editorial .area {
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 24px 0;
  }
  body.xnn-editorial .req-row {
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 24px 0;
  }
  body.xnn-editorial .prow {
    grid-template-columns: 1fr;
    gap: 9px;
  }
}

/* ============================ auth flow (routes_auth.rs) ============================
   The magic-link sign-in path: the "/authorize" login + consent forms, the
   "check your email" confirmation, the magic-link confirm/verify page, and every
   expired/error message page. These render through the shared site chrome
   (render_document: header/nav, footer, site.css) but previously had no rules of
   their own, so the message body dropped to bare browser defaults — full-bleed,
   unstyled, light-on-dark — exactly on the #1 onboarding path. This block gives
   them a centered, first-class card using the existing design tokens. */
.auth-main {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(48px, 9vw, 96px) var(--edge) clamp(56px, 9vw, 96px);
  min-height: 52vh;
}

.auth-panel {
  width: 100%;
  max-width: 460px;
  display: grid;
  gap: 16px;
  padding: clamp(28px, 5vw, 40px);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}

.auth-panel h1 {
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 3.4vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -0.012em;
  font-weight: 440;
  color: var(--ink);
  margin: 0;
}

.auth-panel > p {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

.auth-form {
  display: grid;
  gap: 16px;
  margin: 4px 0 0;
}

.auth-form label {
  display: grid;
  gap: 7px;
}

.auth-form .button {
  width: 100%;
}

/* The recovery / "back to home" link rows under a message or form. */
.auth-actions {
  font-size: 0.9rem;
  color: var(--ink-muted);
  margin: 0;
}

.auth-actions a {
  color: var(--accent);
  font-weight: 500;
}

.auth-actions a:hover {
  color: var(--accent-hover);
}

.auth-actions--muted {
  color: var(--ink-muted);
}

@media (max-width: 540px) {
  .auth-main {
    padding-top: clamp(32px, 12vw, 48px);
  }
}

/* ==========================================================================
   XNN Translate — PRODUCT marketing landing (served at `/` in the product
   site role). This is the one intentionally expressive surface: it layers
   tasteful gradients, a soft accent glow, and subtle CSS motion ON TOP of the
   institutional token system, WITHOUT touching it. Every rule is scoped under
   `.xt-landing` (a class the product `<main>` sets) so the restrained
   company/editorial pages are completely unaffected. Colours, radii, fonts,
   motion easings, and focus rings all reference the shared `:root` tokens, so
   the marketing layer retunes with the rest of the site. All motion is
   disabled under `prefers-reduced-motion` (the global reduce block plus the
   explicit guard at the end of this section).
   ========================================================================== */

.xt-landing {
  /* Local marketing tokens, derived from the shared accent so the page stays
     on-brand while gaining a warmer second hue for gradients only. */
  --xt-accent: var(--accent);
  --xt-accent-2: #c8a2e0;
  --xt-grad: linear-gradient(100deg, var(--accent-hover), var(--xt-accent-2));
  --xt-card-bg: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  --xt-gap: clamp(18px, 2.4vw, 28px);
  display: block;
  color: var(--ink-soft);
}

.xt-landing .xt-wrap {
  width: 100%;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.xt-landing p {
  margin: 0;
}

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

.xt-hero {
  position: relative;
  overflow: clip;
  padding: clamp(64px, 10vw, 128px) 0 clamp(48px, 7vw, 96px);
  border-bottom: 1px solid var(--border-subtle);
  isolation: isolate;
}

/* Soft accent glow behind the hero — the single biggest "premium" cue, kept
   subtle and non-distracting. Sits below content via z-index. */
.xt-hero-glow {
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 130%;
  z-index: -1;
  background:
    radial-gradient(60% 55% at 78% 12%, rgba(147, 177, 214, 0.22), transparent 70%),
    radial-gradient(55% 50% at 12% 0%, rgba(200, 162, 224, 0.14), transparent 70%);
  filter: saturate(1.05);
  pointer-events: none;
}

.xt-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.xt-hero-copy {
  animation: xt-rise 620ms var(--ease-out) both;
}

.xt-eyebrow {
  margin: 0 0 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  font-variant-numeric: lining-nums;
}

.xt-hero h1 {
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: clamp(2.3rem, 5.6vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

/* The one gradient text accent — reserved for a single phrase in the H1. */
.xt-grad {
  background: var(--xt-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.xt-lede {
  margin: 22px 0 0;
  max-width: 34em;
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  line-height: 1.62;
  color: var(--ink-soft);
}

.xt-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.xt-cta-row--center {
  justify-content: center;
}

/* Give the marketing CTAs a touch more presence than the default 44px chips
   without breaking the shared button system they inherit. */
.xt-landing .xt-cta {
  height: 52px;
  padding: 0 26px;
  font-size: 15.5px;
  border-radius: var(--r-md);
}

.xt-landing .button--primary.xt-cta {
  box-shadow: 0 10px 30px rgba(147, 177, 214, 0.22);
}

.xt-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.xt-hero-badges li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  color: var(--ink-muted);
  font-variant-numeric: lining-nums;
}

.xt-hero-badges li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 13px;
  height: 13px;
  margin-top: -6.5px;
  border-radius: var(--r-pill);
  background:
    radial-gradient(circle at 50% 50%, var(--accent) 0 3px, transparent 4px),
    var(--accent-tint-strong);
}

/* ---------------------- hero live-captions mock ------------------------- */

.xt-hero-visual {
  animation: xt-rise 720ms var(--ease-out) 80ms both;
}

.xt-mock {
  margin: 0;
}

.xt-mock-frame {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-frame);
  overflow: hidden;
  background: var(--surface-1);
  box-shadow: var(--shadow-lg), var(--light-catch);
  transform: perspective(1600px) rotateY(-4deg) rotateX(2deg);
  transition: transform 400ms var(--ease-out);
}

.xt-hero-visual:hover .xt-mock-frame {
  transform: perspective(1600px) rotateY(0deg) rotateX(0deg);
}

.xt-mock-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-subtle);
}

.xt-mock-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
}

.xt-mock-title {
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}

.xt-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: rgba(217, 138, 142, 0.14);
  color: #eaa6a9;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
}

.xt-live-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--danger);
  animation: xt-pulse 1.8s var(--ease-standard) infinite;
}

.xt-mock-stage {
  position: relative;
  aspect-ratio: 16 / 9;
}

.xt-mock-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* The translated caption block — the real product output, composited low in
   the scene the way an OBS caption source sits. */
.xt-cap {
  position: absolute;
  left: 50%;
  bottom: clamp(14px, 4%, 26px);
  transform: translateX(-50%);
  width: min(88%, 460px);
  display: grid;
  gap: 8px;
  justify-items: center;
  text-align: center;
}

.xt-cap-src {
  font-size: clamp(11px, 1.5vw, 13px);
  color: rgba(240, 242, 245, 0.62);
  font-style: italic;
  letter-spacing: 0.01em;
}

.xt-cap-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 10px 16px;
  border-radius: var(--r-md);
  background: rgba(8, 9, 11, 0.72);
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.xt-cap-flag {
  flex: none;
  padding: 2px 7px;
  border-radius: var(--r-sm);
  background: var(--accent-tint-strong);
  color: var(--accent-hover);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.xt-cap-text {
  color: #f4f6f9;
  font-size: clamp(15px, 2.1vw, 20px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
}

/* Blinking "typing" caret that reads as live transcription in progress. */
.xt-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 3px;
  vertical-align: -0.14em;
  background: var(--accent-hover);
  animation: xt-blink 1.05s steps(2, start) infinite;
}

.xt-mock-cap {
  margin: 14px 2px 0;
  font-size: 13px;
  color: var(--ink-muted);
  text-align: center;
}

/* ------------------------------ trust strip ----------------------------- */

.xt-strip {
  border-bottom: 1px solid var(--border-subtle);
  background: linear-gradient(180deg, var(--surface-1), var(--canvas));
}

.xt-strip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  padding: 0;
}

.xt-stat {
  display: grid;
  gap: 6px;
  padding: clamp(26px, 4vw, 40px) clamp(16px, 2.4vw, 30px);
  position: relative;
}

.xt-stat + .xt-stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  border-left: 1px solid var(--border-subtle);
}

.xt-stat-n {
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: lining-nums;
  letter-spacing: -0.02em;
}

.xt-stat-u {
  font-size: 0.5em;
  color: var(--accent);
  margin-left: 2px;
}

.xt-stat-l {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink-muted);
}

/* -------------------------------- sections ------------------------------ */

.xt-section {
  padding: var(--section-y) 0;
}

.xt-section--alt {
  background: var(--surface-1);
  border-block: 1px solid var(--border-subtle);
}

.xt-head {
  max-width: 44rem;
  margin: 0 auto clamp(36px, 5vw, 56px);
  text-align: center;
}

.xt-head--left {
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}

.xt-head h2 {
  font-family: var(--font-serif);
  font-weight: 470;
  font-size: clamp(1.7rem, 3.6vw, 2.7rem);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--ink);
  text-wrap: balance;
}

.xt-sub {
  margin: 16px auto 0;
  max-width: 42rem;
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.6;
  color: var(--ink-soft);
}

.xt-head--left .xt-sub {
  margin-left: 0;
}

.xt-head-action {
  margin-top: 36px;
  text-align: center;
}

/* --------------------------- value-prop cards --------------------------- */

.xt-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--xt-gap);
}

.xt-card {
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  background: var(--xt-card-bg);
  box-shadow: var(--light-catch);
  transition: transform var(--t-lift), border-color var(--t-color), box-shadow var(--t-lift);
}

.xt-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md), var(--light-catch);
}

.xt-ic {
  color: var(--accent);
  margin-bottom: 18px;
}

.xt-card h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.24rem;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 10px;
}

.xt-card p {
  font-size: 0.97rem;
  line-height: 1.58;
  color: var(--ink-soft);
}

/* ------------------------------ how it works ---------------------------- */

.xt-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--xt-gap);
  counter-reset: none;
}

.xt-step {
  position: relative;
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  background: var(--surface-2);
}

.xt-step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 18px;
  border-radius: var(--r-md);
  background: var(--accent-tint-strong);
  color: var(--accent-hover);
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 500;
  font-variant-numeric: lining-nums;
}

.xt-step h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.18rem;
  color: var(--ink);
  margin: 0 0 8px;
}

.xt-step p {
  font-size: 0.95rem;
  line-height: 1.56;
  color: var(--ink-soft);
}

/* ------------------------- differentiators grid ------------------------- */

.xt-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--xt-gap);
  max-width: 62rem;
  margin: 0 auto;
}

.xt-col {
  padding: clamp(24px, 3vw, 34px);
  border-radius: var(--r-lg);
  border: 1px solid var(--border-subtle);
}

.xt-col--ours {
  background:
    linear-gradient(180deg, var(--accent-tint), transparent 60%),
    var(--surface-2);
  border-color: var(--border-strong);
}

.xt-col--them {
  background: var(--surface-1);
}

.xt-col-h {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 18px;
}

.xt-col--ours .xt-col-h {
  color: var(--accent);
}

.xt-col--them .xt-col-h {
  color: var(--ink-muted);
}

.xt-clist {
  display: grid;
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.xt-clist li {
  position: relative;
  padding-left: 30px;
  font-size: 0.97rem;
  line-height: 1.5;
}

.xt-clist--yes li {
  color: var(--ink);
}

.xt-clist--no li {
  color: var(--ink-muted);
}

.xt-clist li::before {
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 20px;
  height: 20px;
  border-radius: var(--r-pill);
  text-align: center;
  font-size: 12px;
  line-height: 20px;
  font-weight: 700;
}

.xt-clist--yes li::before {
  content: "✓";
  background: rgba(127, 184, 160, 0.16);
  color: var(--live);
}

.xt-clist--no li::before {
  content: "–";
  background: var(--surface-3);
  color: var(--ink-faint);
}

/* ------------------------------- audiences ------------------------------ */

.xt-audience {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--xt-gap);
}

.xt-aud {
  padding: clamp(22px, 2.6vw, 30px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  transition: transform var(--t-lift), border-color var(--t-color);
}

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

.xt-aud h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.16rem;
  color: var(--ink);
  margin: 0 0 8px;
}

.xt-aud p {
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* --------------------------- language coverage -------------------------- */

.xt-langs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
  max-width: 54rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.xt-langs li {
  padding: 9px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-subtle);
  background: var(--surface-2);
  color: var(--ink-soft);
  font-size: 14px;
  transition: border-color var(--t-color), color var(--t-color), transform var(--t-lift);
}

.xt-langs li:hover {
  border-color: var(--accent);
  color: var(--ink);
  transform: translateY(-2px);
}

.xt-langs-note {
  margin: 22px auto 0;
  text-align: center;
  font-size: 13.5px;
  color: var(--ink-muted);
}

/* ----------------------------- pricing teaser --------------------------- */

.xt-price-card {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  max-width: 60rem;
  margin: 0 auto;
  padding: clamp(30px, 4vw, 52px);
  border-radius: var(--r-frame);
  border: 1px solid var(--border-strong);
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(147, 177, 214, 0.12), transparent 60%),
    var(--surface-2);
  box-shadow: var(--shadow-md), var(--light-catch);
}

.xt-price-copy h2 {
  font-family: var(--font-serif);
  font-weight: 470;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.12;
  letter-spacing: -0.016em;
  color: var(--ink);
  margin: 6px 0 0;
}

.xt-price-copy .xt-sub {
  margin-left: 0;
  margin-right: 0;
}

.xt-price-figure {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  padding: clamp(20px, 3vw, 30px);
  border-radius: var(--r-lg);
  background: var(--canvas);
  border: 1px solid var(--border-subtle);
}

.xt-price-from {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.xt-price-amt {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 7vw, 4.4rem);
  line-height: 1;
  font-weight: 480;
  color: var(--ink);
  font-variant-numeric: lining-nums;
  background: var(--xt-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.xt-price-per {
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
  color: var(--ink-muted);
}

/* ------------------------- 4-tier pricing grid -------------------------- */

/* The dedicated /pricing page (Free / Creator / Insider / Sponsor). Scoped
   under .xt-landing so it reuses the marketing tokens; a four-across card grid
   that reflows to 2-up then 1-up on smaller viewports. */

.xt-hero--pricing {
  padding-bottom: clamp(20px, 3vw, 36px);
}

.xt-hero--pricing .xt-head {
  margin-inline: 0;
  text-align: center;
}

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

.xt-tiers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--xt-gap);
  align-items: stretch;
}

.xt-tier {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(22px, 2.2vw, 30px);
  border-radius: var(--r-frame);
  border: 1px solid var(--border-subtle);
  background: var(--xt-card-bg);
  box-shadow: var(--light-catch);
  position: relative;
  transition: transform var(--t-move), border-color var(--t-color);
}

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

/* The featured (Creator) tier gets the accent frame + a soft top glow. */
.xt-tier--featured {
  border-color: var(--accent);
  background:
    radial-gradient(120% 90% at 50% 0%, var(--accent-tint), transparent 60%),
    var(--xt-card-bg);
  box-shadow: var(--shadow-md), var(--light-catch);
}

.xt-tier-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent);
  white-space: nowrap;
}

.xt-tier-name {
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
}

.xt-tier-tag {
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0;
  min-height: 2.6em;
}

.xt-tier-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  margin: 4px 0 0;
}

.xt-tier-amt {
  font-family: var(--font-serif);
  font-size: clamp(2.1rem, 3.4vw, 2.7rem);
  line-height: 1;
  font-weight: 480;
  color: var(--ink);
  font-variant-numeric: lining-nums;
}

.xt-tier-per {
  font-size: 13px;
  color: var(--ink-muted);
}

.xt-tier-devices {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
}

.xt-landing .xt-tier-cta {
  width: 100%;
  margin: 6px 0 4px;
}

.xt-tier-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.xt-tier-list li {
  position: relative;
  padding-left: 24px;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* Check mark built from a pseudo-element so it needs no asset. */
.xt-tier-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 4px;
  width: 6px;
  height: 10px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
}

/* ---------------------------------- FAQ --------------------------------- */

.xt-faq-wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}

.xt-faq {
  display: grid;
  gap: 12px;
}

.xt-faq-item {
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  background: var(--surface-2);
  overflow: hidden;
}

.xt-faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-sans);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
  transition: color var(--t-color);
}

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

/* Chevron built from a pseudo-element so it needs no asset and rotates open. */
.xt-faq-item summary::after {
  content: "";
  margin-left: auto;
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--ink-muted);
  border-bottom: 2px solid var(--ink-muted);
  transform: rotate(45deg);
  transition: transform 200ms var(--ease-out), border-color var(--t-color);
}

.xt-faq-item[open] summary::after {
  transform: rotate(-135deg);
  border-color: var(--accent);
}

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

.xt-faq-a {
  padding: 0 22px 20px;
}

.xt-faq-a p {
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}

/* ------------------------------ closing CTA ----------------------------- */

.xt-final {
  position: relative;
  overflow: clip;
  padding: clamp(72px, 11vw, 132px) 0;
  text-align: center;
  border-top: 1px solid var(--border-subtle);
  isolation: isolate;
}

.xt-final-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(50% 120% at 50% 100%, rgba(147, 177, 214, 0.2), transparent 70%),
    radial-gradient(40% 90% at 50% 0%, rgba(200, 162, 224, 0.1), transparent 70%);
  pointer-events: none;
}

.xt-final-inner {
  max-width: 42rem;
  display: grid;
  gap: 18px;
  justify-items: center;
}

.xt-final h2 {
  font-family: var(--font-serif);
  font-weight: 470;
  font-size: clamp(1.9rem, 4.4vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}

.xt-final p {
  max-width: 36rem;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ------------------------------- keyframes ------------------------------ */

@keyframes xt-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes xt-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.45;
    transform: scale(0.82);
  }
}

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

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

@media (max-width: 960px) {
  .xt-hero-grid {
    grid-template-columns: 1fr;
    gap: clamp(36px, 8vw, 56px);
  }

  .xt-mock-frame {
    transform: none;
  }

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

  .xt-stat:nth-child(3)::before {
    display: none;
  }

  .xt-cards,
  .xt-steps {
    grid-template-columns: 1fr 1fr;
  }

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

  .xt-price-card {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }

  .xt-tiers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .xt-price-copy .xt-cta-row {
    justify-content: center;
  }

  .xt-faq-wrap {
    grid-template-columns: 1fr;
  }

  .xt-head--left,
  .xt-head--left .xt-sub {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 620px) {
  .xt-cards,
  .xt-steps,
  .xt-audience,
  .xt-compare,
  .xt-tiers {
    grid-template-columns: 1fr;
  }

  .xt-tier-tag {
    min-height: 0;
  }

  .xt-strip-grid {
    grid-template-columns: 1fr;
  }

  .xt-stat + .xt-stat::before {
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
    border-left: 0;
    border-top: 1px solid var(--border-subtle);
  }

  .xt-landing .xt-cta {
    width: 100%;
  }

  .xt-hero-badges {
    gap: 8px 18px;
  }
}

/* Motion preferences: the global reduce block already neutralises animations
   and transitions; this makes the intent explicit for the landing's entrance,
   pulse, caret, and the tilted mock so nothing moves or blinks for users who
   ask for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .xt-hero-copy,
  .xt-hero-visual {
    animation: none;
  }

  .xt-live-dot,
  .xt-caret {
    animation: none;
  }

  .xt-caret {
    opacity: 1;
  }

  .xt-mock-frame {
    transform: none;
  }
}


/* ============================================================================
   XNN Translate — v5 landing ("Broadcast Dark", audience-driven).
   Namespaced under `.xt-v5` with `v5-*` classes so nothing inherits the global
   site chrome. Fonts are the site-hosted IBM Plex families. The signature object
   is the OBS facecam: a VTuber-style avatar speaks; a beat later the English
   caption resolves as the payoff. Master frame: reach the world without losing
   your voice. All motion is compositor-only + reduced-motion safe.
   ========================================================================== */
.xt-v5{
  --v5-bg:#08090C; --v5-raised:#0E1014; --v5-panel:#14171C; --v5-line:rgba(255,255,255,.07); --v5-line2:rgba(255,255,255,.12);
  --v5-ink:#F2F4F8; --v5-body:#C3C9D5; --v5-muted:#9AA3B2; --v5-faint:#5A6373;
  --v5-blue:#4D8DFF; --v5-violet:#7C6CFF; --v5-cyan:#57e6ff; --v5-magenta:#ff6ac2; --v5-green:#34E2A0;
  --v5-sans:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --v5-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --v5-ease:cubic-bezier(.16,1,.3,1); --v5-wrap:1080px;
  font-family:var(--v5-sans); color:var(--v5-body); line-height:1.6;
  background:var(--v5-bg);
  background-image:radial-gradient(55% 45% at 84% -6%, rgba(124,108,255,.07), transparent 60%), radial-gradient(45% 40% at 6% 100%, rgba(87,230,255,.05), transparent 60%);
}
/* paint the whole page dark so the shared chrome sits on the same ground */
body:has(.xt-v5){ background:var(--v5-bg); }
.xt-v5 .v5-wrap{ max-width:var(--v5-wrap); margin-inline:auto; padding-inline:clamp(20px,5vw,40px); }
.xt-v5 .v5-mono{ font-family:var(--v5-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--v5-muted); }
.xt-v5 a{ color:inherit; text-decoration:none; }

.xt-v5 .v5-hero{ padding-block:clamp(42px,7vw,80px) clamp(28px,4vw,48px); }
.xt-v5 .v5-hero-inner{ max-width:760px; }
.xt-v5 .v5-eyebrow{ display:inline-flex; align-items:center; gap:9px; margin:0 0 20px; }
.xt-v5 .v5-eyebrow .v5-dot{ width:7px; height:7px; border-radius:50%; background:var(--v5-green); box-shadow:0 0 0 3px rgba(52,226,160,.14); }
.xt-v5 h1{ font-weight:700; font-size:clamp(2.05rem,4.6vw,3.35rem); line-height:1.06; letter-spacing:-.03em; color:var(--v5-ink); margin:0 0 20px; text-wrap:balance; }
.xt-v5 h1 .v5-hl{ color:var(--v5-cyan); }
.xt-v5 .v5-lede{ font-size:clamp(1.05rem,1.4vw,1.22rem); color:var(--v5-body); max-width:58ch; margin:0 0 28px; }
.xt-v5 .v5-lede b{ color:var(--v5-ink); font-weight:600; }
.xt-v5 .v5-cta{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.xt-v5 .v5-btn{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:.9rem; padding:10px 18px; border-radius:9px; border:1px solid transparent; cursor:pointer; transition:background .15s, border-color .15s, transform .12s var(--v5-ease); }
.xt-v5 .v5-btn:active{ transform:translateY(1px); }
.xt-v5 .v5-btn-primary{ background:var(--v5-blue); color:#04122e; } .xt-v5 .v5-btn-primary:hover{ background:#6ba0ff; }
.xt-v5 .v5-btn-ghost{ background:transparent; color:var(--v5-ink); border-color:var(--v5-line2); } .xt-v5 .v5-btn-ghost:hover{ background:var(--v5-raised); border-color:var(--v5-muted); }
.xt-v5 .v5-micro{ margin:18px 0 0; font-family:var(--v5-mono); font-size:.72rem; letter-spacing:.04em; color:var(--v5-faint); display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.xt-v5 .v5-micro .v5-s{ width:4px; height:4px; border-radius:50%; background:var(--v5-faint); }

/* OBS window */
.xt-v5 .v5-winshell{ margin-top:clamp(34px,5vw,60px); position:relative; }
.xt-v5 .v5-winshell::before{ content:""; position:absolute; inset:-2% -1% -6%; z-index:0; border-radius:24px; background:radial-gradient(58% 60% at 50% 34%, rgba(87,230,255,.12), transparent 70%); filter:blur(24px); }
.xt-v5 .v5-win{ position:relative; z-index:1; border-radius:16px; overflow:hidden; background:var(--v5-raised); border:1px solid var(--v5-line); box-shadow:0 50px 100px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.02); }
.xt-v5 .v5-winbar{ display:flex; align-items:center; gap:8px; height:46px; padding-inline:16px; background:var(--v5-panel); border-bottom:1px solid var(--v5-line); position:relative; }
.xt-v5 .v5-winbar::after{ content:""; position:absolute; left:0; right:0; top:0; height:20px; background:linear-gradient(180deg,rgba(255,255,255,.06),transparent); }
.xt-v5 .v5-windots{ display:flex; gap:8px; } .xt-v5 .v5-windots i{ width:10px; height:10px; border-radius:50%; background:#5A6373; }
.xt-v5 .v5-winpill{ margin-left:8px; display:inline-flex; align-items:center; gap:7px; padding:4px 11px; border-radius:11px; background:#1B1F27; border:1px solid var(--v5-line); font-size:12px; font-weight:600; color:var(--v5-body); }
.xt-v5 .v5-winpill b{ width:6px; height:6px; border-radius:50%; background:var(--v5-green); }
.xt-v5 .v5-wintitle{ position:absolute; left:50%; transform:translateX(-50%); font-size:12px; color:var(--v5-muted); font-weight:500; }
.xt-v5 .v5-winrec{ margin-left:auto; display:inline-flex; align-items:center; gap:7px; font-family:var(--v5-mono); font-size:11px; letter-spacing:.1em; color:var(--v5-muted); } .xt-v5 .v5-winrec b{ width:6px; height:6px; border-radius:50%; background:#e0605e; }
.xt-v5 .v5-stage{ position:relative; aspect-ratio:16/9; overflow:hidden; background:#070a0e; }
.xt-v5 .v5-stagebg{ position:absolute; inset:0; width:100%; height:100%; display:block; }

.xt-v5 .v5-facecam{ position:absolute; right:clamp(12px,3%,26px); top:clamp(12px,5%,24px); bottom:clamp(78px,25%,116px); aspect-ratio:5/6; border-radius:13px; overflow:hidden; border:1px solid rgba(120,150,200,.18); box-shadow:0 20px 50px -18px rgba(0,0,0,.8), inset 0 0 40px rgba(0,0,0,.35); z-index:2; }
.xt-v5 .v5-spksvg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.xt-v5 .v5-spk{ transform-origin:50% 62%; } .xt-v5 .v5-spkshoulders{ transform-origin:50% 100%; } .xt-v5 .v5-spklid{ transform-origin:50% 0; }
.xt-v5 .v5-fctag{ position:absolute; left:9px; top:8px; z-index:3; display:inline-flex; align-items:center; gap:5px; font-family:var(--v5-mono); font-size:.52rem; letter-spacing:.1em; color:#e0a0a0; } .xt-v5 .v5-fctag b{ width:5px; height:5px; border-radius:50%; background:#e0605e; box-shadow:0 0 5px #e0605e; }
.xt-v5 .v5-fcmeter{ position:absolute; left:9px; bottom:9px; z-index:3; display:flex; align-items:flex-end; gap:2px; height:14px; }
.xt-v5 .v5-fcmeter i{ width:2.5px; height:100%; border-radius:2px; background:rgba(120,160,220,.55); transform:scaleY(.22); transform-origin:50% 100%; }
.xt-v5 .v5-win.is-speaking .v5-fcmeter i{ background:var(--v5-cyan); opacity:.9; }
.xt-v5 .v5-fchandle{ position:absolute; right:9px; bottom:9px; z-index:3; font-family:var(--v5-mono); font-size:.52rem; color:rgba(200,215,240,.55); letter-spacing:.04em; }
.xt-v5 .v5-demo.mode-irl .v5-spkvtuber{ display:none; } .xt-v5 .v5-demo.mode-vtuber .v5-spkirl{ display:none; }
.xt-v5 .v5-spkmouth>g{ display:none; } .xt-v5 .v5-spkmouth>.v5-mrest{ display:block; }
.xt-v5 .v5-facecam[data-m="mid"] .v5-spkmouth>g{ display:none; } .xt-v5 .v5-facecam[data-m="mid"] .v5-spkmouth>.v5-mmid{ display:block; }
.xt-v5 .v5-facecam[data-m="open"] .v5-spkmouth>g{ display:none; } .xt-v5 .v5-facecam[data-m="open"] .v5-spkmouth>.v5-mopen{ display:block; }
.xt-v5 .v5-facecam[data-m="rest"] .v5-spkmouth>g{ display:none; } .xt-v5 .v5-facecam[data-m="rest"] .v5-spkmouth>.v5-mrest{ display:block; }

.xt-v5 .v5-cap{ position:absolute; left:clamp(14px,4%,34px); bottom:clamp(16px,6%,36px); z-index:3; max-width:min(60%,520px); }
.xt-v5 .v5-capsrc{ font-size:clamp(.72rem,1.4vw,.92rem); color:var(--v5-muted); font-style:italic; margin-bottom:9px; min-height:1.3em; padding-left:2px; display:flex; align-items:center; gap:8px; }
.xt-v5 .v5-capsrc .v5-t{ min-height:1.2em; }
.xt-v5 .v5-capsrc .v5-cur{ display:inline-block; width:2px; height:1em; vertical-align:-.12em; background:var(--v5-cyan); animation:v5-blink 1.1s steps(2) infinite; }
.xt-v5 .v5-capbar{ display:flex; align-items:center; gap:13px; padding:12px 16px; border-radius:13px; background:rgba(20,23,28,.92); border:1px solid var(--v5-line2); box-shadow:0 20px 50px -20px rgba(0,0,0,.7); position:relative; overflow:hidden; transition:box-shadow .5s var(--v5-ease), border-color .5s; }
.xt-v5 .v5-capbar::after{ content:""; position:absolute; left:0; right:0; top:0; height:18px; background:linear-gradient(180deg,rgba(255,255,255,.07),transparent); }
.xt-v5 .v5-win.just-landed .v5-capbar{ border-color:rgba(87,230,255,.55); box-shadow:0 20px 50px -18px rgba(0,0,0,.7), 0 0 26px -6px rgba(87,230,255,.5); }
.xt-v5 .v5-capchip{ flex:none; display:inline-flex; align-items:center; padding:5px 11px; border-radius:11px; background:linear-gradient(135deg,var(--v5-cyan),var(--v5-violet)); color:#04122e; font-weight:700; font-size:.7rem; letter-spacing:.03em; }
.xt-v5 .v5-capdst{ font-weight:700; color:var(--v5-ink); font-size:clamp(.95rem,2vw,1.34rem); letter-spacing:-.015em; line-height:1.2; }
.xt-v5 .v5-capdst .v5-w{ display:inline-block; opacity:0; transform:translateY(6px); transition:opacity .28s var(--v5-ease), transform .28s var(--v5-ease); }
.xt-v5 .v5-capdst .v5-w.in{ opacity:1; transform:none; }
.xt-v5 .v5-wincaption{ margin:16px 0 0; text-align:center; font-family:var(--v5-mono); font-size:.72rem; letter-spacing:.08em; color:var(--v5-faint); }
.xt-v5 .v5-democtl{ display:flex; align-items:center; gap:12px; margin-top:14px; flex-wrap:wrap; }
.xt-v5 .v5-seg{ display:inline-flex; border:1px solid var(--v5-line2); border-radius:9px; overflow:hidden; }
.xt-v5 .v5-seg button{ background:transparent; border:0; color:var(--v5-muted); font-family:var(--v5-sans); font-weight:600; font-size:.78rem; padding:7px 13px; cursor:pointer; }
.xt-v5 .v5-seg button+button{ border-left:1px solid var(--v5-line); }
.xt-v5 .v5-seg button.on{ background:var(--v5-blue); color:#04122e; }
.xt-v5 .v5-seglbl{ font-family:var(--v5-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--v5-faint); }

.xt-v5 .v5-trust{ border-top:1px solid var(--v5-line); margin-top:clamp(38px,6vw,64px); padding-top:26px; }
.xt-v5 .v5-trustrow{ display:flex; align-items:center; justify-content:center; gap:clamp(14px,2.4vw,32px); flex-wrap:wrap; }
.xt-v5 .v5-trustrow span{ font-family:var(--v5-mono); font-size:.72rem; letter-spacing:.05em; color:var(--v5-muted); } .xt-v5 .v5-trustrow span.g{ color:var(--v5-green); }

.xt-v5 .v5-section{ padding-block:clamp(56px,8vw,104px); }
.xt-v5 .v5-sechead{ max-width:46rem; margin-bottom:clamp(34px,4vw,52px); }
.xt-v5 .v5-sechead h2{ font-weight:700; font-size:clamp(1.7rem,3.2vw,2.4rem); letter-spacing:-.025em; color:var(--v5-ink); margin:12px 0 12px; text-wrap:balance; }
.xt-v5 .v5-sechead p{ color:var(--v5-muted); font-size:1.06rem; margin:0; max-width:52ch; } .xt-v5 .v5-sechead p b{ color:var(--v5-body); }
.xt-v5 .v5-rows{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--v5-line); border:1px solid var(--v5-line); border-radius:16px; overflow:hidden; }
.xt-v5 .v5-cell{ background:var(--v5-raised); padding:clamp(22px,2.4vw,30px); display:flex; flex-direction:column; gap:12px; }
.xt-v5 .v5-cell .v5-n{ font-family:var(--v5-mono); font-size:.68rem; letter-spacing:.14em; color:var(--v5-cyan); }
.xt-v5 .v5-cell h3{ font-weight:600; font-size:1.14rem; color:var(--v5-ink); margin:0; letter-spacing:-.01em; }
.xt-v5 .v5-cell p{ color:var(--v5-muted); font-size:.94rem; margin:0; }

/* requirements + faq (dark) */
.xt-v5 .v5-req-inner{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr); gap:clamp(20px,4vw,48px); align-items:start; }
.xt-v5 .v5-req-title{ font-weight:700; font-size:clamp(1.4rem,2.4vw,1.9rem); letter-spacing:-.02em; color:var(--v5-ink); margin:6px 0 0; }
.xt-v5 .v5-req-list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 28px; margin:0; padding:0; list-style:none; }
.xt-v5 .v5-req-list li{ position:relative; padding-left:20px; font-size:.95rem; line-height:1.45; color:var(--v5-muted); }
.xt-v5 .v5-req-list li::before{ content:""; position:absolute; left:0; top:.55em; width:8px; height:8px; border-radius:2px; background:var(--v5-cyan); }
.xt-v5 .v5-req-list b{ color:var(--v5-ink); font-weight:600; }
.xt-v5 .v5-faq{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2vw,24px); }
.xt-v5 .v5-faq-item{ padding:clamp(20px,2.2vw,26px); border:1px solid var(--v5-line); border-radius:14px; background:var(--v5-raised); }
.xt-v5 .v5-faq-item h3{ font-weight:600; font-size:1.08rem; color:var(--v5-ink); margin:0 0 8px; letter-spacing:-.01em; }
.xt-v5 .v5-faq-item p{ color:var(--v5-muted); font-size:.94rem; margin:0; line-height:1.55; }

/* pricing — reuse push_landing_tier's .il-tier markup, restyled dark */
.xt-v5 .il-tiers{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.6vw,20px); align-items:stretch; }
.xt-v5 .il-tier{ display:flex; flex-direction:column; gap:12px; padding:clamp(22px,2.2vw,28px); border:1px solid var(--v5-line); border-radius:14px; background:var(--v5-raised); position:relative; }
.xt-v5 .il-tier--featured{ border-color:var(--v5-cyan); background:linear-gradient(180deg,rgba(87,230,255,.06),var(--v5-raised) 58%); box-shadow:0 0 0 1px rgba(87,230,255,.4), 0 22px 48px -18px rgba(87,230,255,.18); }
.xt-v5 .il-tier-badge{ position:absolute; top:-10px; left:clamp(22px,2.2vw,28px); padding:3px 10px; border-radius:8px; background:var(--v5-cyan); color:#04122e; font-family:var(--v5-mono); font-size:.6rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
.xt-v5 .il-tier-name{ font-weight:700; font-size:1.3rem; color:var(--v5-ink); margin:0; letter-spacing:-.01em; }
.xt-v5 .il-tier-tag{ font-size:.9rem; color:var(--v5-muted); min-height:2.6em; }
.xt-v5 .il-tier-price{ display:flex; align-items:baseline; gap:6px; }
.xt-v5 .il-tier-amt{ font-weight:700; font-size:clamp(1.9rem,3vw,2.4rem); color:var(--v5-ink); font-variant-numeric:lining-nums; }
.xt-v5 .il-tier-per{ font-family:var(--v5-mono); font-size:.72rem; color:var(--v5-muted); }
.xt-v5 .il-tier ul{ list-style:none; margin:4px 0 0; padding:0; display:grid; gap:8px; }
.xt-v5 .il-tier ul li{ position:relative; padding-left:20px; font-size:.88rem; color:var(--v5-body); line-height:1.4; }
.xt-v5 .il-tier ul li::before{ content:""; position:absolute; left:0; top:.5em; width:7px; height:7px; border-radius:2px; background:var(--v5-cyan); opacity:.7; }
.xt-v5 .il-tier-cta{ margin-top:auto; display:inline-flex; justify-content:center; padding:10px 14px; border-radius:9px; font-weight:600; font-size:.86rem; border:1px solid var(--v5-line2); color:var(--v5-ink); transition:background .15s, border-color .15s; }
.xt-v5 .il-tier-cta:hover{ background:var(--v5-panel); border-color:var(--v5-muted); }
.xt-v5 .il-tier--featured .il-tier-cta{ background:var(--v5-blue); color:#04122e; border-color:transparent; }
.xt-v5 .il-tier--featured .il-tier-cta:hover{ background:#6ba0ff; }

.xt-v5 .v5-final{ padding-block:clamp(56px,8vw,110px); text-align:center; }
.xt-v5 .v5-final h2{ font-weight:700; font-size:clamp(1.8rem,3.4vw,2.6rem); letter-spacing:-.03em; color:var(--v5-ink); margin:0 0 14px; text-wrap:balance; max-width:22ch; margin-inline:auto; }
.xt-v5 .v5-final p{ color:var(--v5-muted); max-width:48ch; margin:0 auto 28px; font-size:1.05rem; }
.xt-v5 .v5-final .v5-cta{ justify-content:center; }

@keyframes v5-blink{ 0%,100%{opacity:1;} 50%{opacity:0;} }
@keyframes v5-wave{ 0%,100%{transform:scaleY(.24);} 50%{transform:scaleY(1);} }
@keyframes v5-livedot{ 0%,100%{opacity:1;} 50%{opacity:.5;} }
@keyframes v5-sway{ 0%,100%{transform:translateY(-0.7px) rotate(-0.4deg);} 50%{transform:translateY(0.7px) rotate(0.4deg);} }
@keyframes v5-breathe{ 0%,100%{transform:scaleY(1);} 50%{transform:scaleY(1.014);} }
@keyframes v5-eyeblink{ 0%,93%,100%{transform:scaleY(0);} 96%{transform:scaleY(1);} }
@media (prefers-reduced-motion: no-preference){
  .xt-v5 .v5-spk{ animation:v5-sway 5.4s ease-in-out infinite; } .xt-v5 .v5-spkshoulders{ animation:v5-breathe 4.8s ease-in-out infinite; } .xt-v5 .v5-spklid{ animation:v5-eyeblink 5.6s ease-in-out infinite; }
  .xt-v5 .v5-win.is-speaking .v5-fcmeter i{ animation:v5-wave 1s ease-in-out infinite; }
  .xt-v5 .v5-win.is-speaking .v5-fcmeter i:nth-child(2){ animation-delay:.12s; } .xt-v5 .v5-win.is-speaking .v5-fcmeter i:nth-child(3){ animation-delay:.24s; }
  .xt-v5 .v5-win.is-speaking .v5-fcmeter i:nth-child(4){ animation-delay:.07s; } .xt-v5 .v5-win.is-speaking .v5-fcmeter i:nth-child(5){ animation-delay:.18s; }
  .xt-v5 .v5-winpill b, .xt-v5 .v5-winrec b, .xt-v5 .v5-fctag b{ animation:v5-livedot 2.4s ease-in-out infinite; }
}
@media (max-width:820px){ .xt-v5 .v5-rows{ grid-template-columns:1fr; } .xt-v5 .v5-faq{ grid-template-columns:1fr; } .xt-v5 .il-tiers{ grid-template-columns:repeat(2,1fr); } .xt-v5 .v5-req-inner{ grid-template-columns:1fr; } .xt-v5 .v5-req-list{ grid-template-columns:1fr; } }
@media (max-width:560px){ .xt-v5 .v5-stage{ aspect-ratio:1/1; } .xt-v5 .v5-facecam{ aspect-ratio:1/1; top:14px; right:14px; bottom:auto; height:40%; } .xt-v5 .v5-cap{ left:14px; right:14px; bottom:14px; max-width:none; } .xt-v5 .il-tiers{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce){ .xt-v5 .v5-spk,.xt-v5 .v5-spkshoulders,.xt-v5 .v5-spklid,.xt-v5 .v5-fcmeter i,.xt-v5 .v5-winpill b,.xt-v5 .v5-winrec b,.xt-v5 .v5-fctag b,.xt-v5 .v5-capsrc .v5-cur{ animation:none !important; } .xt-v5 .v5-capdst .v5-w{ opacity:1; transform:none; } }

/* ---- wave-2: "your language" picker, demo tag, focus/craft a11y ---- */
.xt-v5 .v5-wincaption{ font-family:var(--v5-sans); font-size:.92rem; letter-spacing:0; line-height:1.55; color:var(--v5-muted); max-width:46ch; margin-inline:auto; }
.xt-v5 .v5-wincaption b{ color:var(--v5-ink); font-weight:600; }
.xt-v5 .v5-demotag{ display:inline-block; padding:2px 8px; margin-right:8px; border-radius:6px; background:rgba(87,230,255,.12); border:1px solid rgba(87,230,255,.35); color:var(--v5-cyan); font-family:var(--v5-mono); font-size:.58rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; vertical-align:middle; }
.xt-v5 .v5-langseg button{ font-size:.74rem; padding:6px 11px; }
.xt-v5 .v5-langseg button.on{ background:var(--v5-cyan); color:#04122e; }
.xt-v5 .v5-seg button{ transition:background .18s ease, color .18s ease; }
.xt-v5 .v5-btn:focus-visible, .xt-v5 .v5-seg button:focus-visible, .xt-v5 .il-tier-cta:focus-visible{ outline:2px solid var(--v5-cyan); outline-offset:2px; }
.xt-v5 .il-tier-cta:active{ transform:translateY(1px); }
@media (max-width:560px){ .xt-v5 .v5-langseg button{ font-size:.68rem; padding:6px 8px; } .xt-v5 .v5-democtl{ gap:8px 12px; justify-content:center; } }

/* -------------------------------------------------------------------------
   Account dashboard: subscription-status banner, status badges, and the
   in-dashboard plan picker (Free Access Pass / Creator / Insider / Sponsor).
   Self-contained; reuses the existing content-card / button styles.
   ------------------------------------------------------------------------- */
.account-status-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 4px;
  padding: 12px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md, 12px);
}
.account-status-label {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.account-status-detail {
  font-size: 13px;
  color: var(--ink-soft);
}
.badge {
  display: inline-block;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-subtle);
  background: var(--surface-3);
  color: var(--ink);
}
.badge--active { background: var(--accent-tint); border-color: var(--accent); color: var(--ink); }
.badge--trial { background: var(--warn-tint); border-color: var(--warn); color: var(--ink); }
.badge--lapsed { background: var(--danger-tint); border-color: var(--danger); color: var(--ink); }
.badge--none { background: var(--surface-3); color: var(--ink-soft); }
.badge--current { background: var(--accent-tint); border-color: var(--accent); color: var(--ink); }

.account-plan-picker .account-plan-card { position: relative; }
.account-plan-card[data-current-plan="1"] { border-color: var(--accent); }
.account-plan-card .plan-cadence {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-muted);
}
.account-plan-card .plan-devices {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--ink-soft);
}
.account-plan-card .badge--current { margin: 0 0 10px; }

/* /checkout 4-tier plan picker: the featured plan reads as recommended, and the
   plan carried in `/checkout?plan=<code>` (pricing-page bounce) is highlighted
   by site.js with `.is-selected`. */
.plan-tier-card[data-recommended="true"] { border-color: var(--accent); }
.plan-tier-card.is-selected {
  border-color: var(--accent);
  background: var(--accent-tint);
}

/* ================= XNN Translate public product surface =================
   A product-first, information-led landing. Sections are full-width bands and
   rows, not nested cards; release-specific facts remain on /download. */
.xt-v5 {
  --xtp-ink: #14201d;
  --xtp-muted: #50615d;
  --xtp-green: #117a65;
  --xtp-green-dark: #17332d;
  --xtp-blue: #315ea8;
  --xtp-warm: #f4f1ea;
  min-height: 100vh;
  background: #f7faf8;
  color: var(--xtp-muted);
  font-family: "IBM Plex Sans", var(--font-sans);
  line-height: 1.55;
}

body.xnn-product .xt-v5 h1,
body.xnn-product .xt-v5 h2,
body.xnn-product .xt-v5 h3 {
  color: var(--xtp-ink);
  font-family: "IBM Plex Sans", var(--font-sans);
  font-weight: 650;
  letter-spacing: 0;
}

.xt-v5 p {
  color: inherit;
}

.xtp-wrap {
  width: min(1120px, calc(100% - 48px));
  margin-inline: auto;
}

.xtp-hero {
  min-height: 610px;
  display: grid;
  align-items: center;
  padding-block: 64px 52px;
  background: #f7faf8;
  border-bottom: 1px solid #cad9d3;
}

.xtp-hero .xtp-wrap {
  max-width: 980px;
}

.xtp-kicker,
.xtp-label,
.xtp-section-head > p {
  margin: 0 0 16px;
  color: var(--xtp-green);
  font-family: "IBM Plex Mono", var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}

.xtp-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
}

.xtp-kicker span {
  width: 9px;
  height: 9px;
  background: #2f9b62;
  border-radius: 50%;
}

.xtp-hero h1 {
  max-width: 16ch;
  margin: 0;
  font-size: 64px;
  line-height: 1.02;
}

.xtp-lede {
  max-width: 720px;
  margin: 24px 0 0;
  color: #344641;
  font-size: 21px;
  line-height: 1.52;
}

.xtp-actions,
.product-hero-actions,
.product-inline-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.xtp-actions {
  margin-top: 30px;
}

.product-hero-actions {
  margin-top: 28px;
}

.product-inline-links {
  margin-top: 18px;
  gap: 24px;
}

.xt-v5 .xtp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 18px;
  border: 1px solid #aebdb8;
  border-radius: 6px;
  color: var(--xtp-ink);
  background: transparent;
  font-weight: 600;
}

.xt-v5 .xtp-button:hover {
  color: var(--xtp-ink);
  background: #e9efec;
  border-color: #879a94;
}

.xt-v5 .xtp-button--primary {
  color: #ffffff;
  background: var(--xtp-green);
  border-color: var(--xtp-green);
}

.xt-v5 .xtp-button--primary:hover {
  color: #ffffff;
  background: #0c6655;
  border-color: #0c6655;
}

.xt-v5 .xtp-text-link {
  color: var(--xtp-blue);
  font-weight: 600;
}

.xtp-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 900px;
  margin: 52px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid #cad9d3;
}

.xtp-facts > div {
  min-width: 0;
  padding-right: 28px;
}

.xtp-facts > div + div {
  padding-left: 28px;
  border-left: 1px solid #cad9d3;
}

.xtp-facts dt,
.xtp-requirements dt {
  color: var(--xtp-muted);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
}

.xtp-facts dd {
  margin: 5px 0 0;
  color: var(--xtp-ink);
  font-size: 16px;
  font-weight: 600;
}

.xtp-band {
  padding-block: 82px;
  border-bottom: 1px solid #cad9d3;
}

.xtp-band--workflow {
  background: #e8f2ee;
}

.xtp-band--install {
  background: #ffffff;
}

.xtp-band--local {
  color: #cbd9d4;
  background: var(--xtp-green-dark);
  border-bottom-color: #315249;
}

.xtp-band--support {
  background: var(--xtp-warm);
}

.xtp-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 32px;
}

.xtp-section-head > p {
  grid-column: 1 / -1;
  margin-bottom: -18px;
}

.xtp-section-head h2,
.xtp-split h2 {
  max-width: 20ch;
  font-size: 36px;
  line-height: 1.15;
}

.xt-v5 .xtp-section-head > a {
  color: var(--xtp-blue);
  font-weight: 600;
}

.xtp-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 48px 0 0;
  padding: 0;
  border-top: 1px solid #acc3ba;
  list-style: none;
}

.xtp-steps li {
  min-width: 0;
  padding: 30px 28px 8px 0;
}

.xtp-steps li + li {
  padding-left: 28px;
  border-left: 1px solid #acc3ba;
}

.xtp-steps span {
  color: var(--xtp-green);
  font-family: "IBM Plex Mono", var(--font-mono);
  font-size: 13px;
}

.xtp-steps h3 {
  margin-top: 18px;
  font-size: 21px;
}

.xtp-steps p {
  margin: 10px 0 0;
}

.xtp-note {
  max-width: 760px;
  margin: 34px 0 0;
  padding-top: 20px;
  border-top: 1px solid #acc3ba;
  font-size: 14px;
}

.xtp-split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 72px;
  align-items: start;
}

.xtp-split > div > p:not(.xtp-label) {
  max-width: 58ch;
  margin-top: 20px;
}

.xtp-requirements {
  margin: 0;
  border-top: 1px solid #d3ddd9;
}

.xtp-requirements > div {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 22px;
  padding-block: 18px;
  border-bottom: 1px solid #d3ddd9;
}

.xtp-requirements dd {
  margin: 0;
  color: var(--xtp-ink);
}

.xtp-band--local h2,
.xtp-band--local .xtp-label {
  color: #ffffff;
}

.xtp-band--local p {
  margin-top: 0;
}

.xtp-service-links {
  border-top: 1px solid #cfc8ba;
}

.xtp-service-links a {
  display: grid;
  grid-template-columns: minmax(120px, 0.4fr) minmax(0, 1fr);
  gap: 24px;
  padding: 17px 0;
  border-bottom: 1px solid #cfc8ba;
  color: var(--xtp-ink);
}

.xtp-service-links a:hover span {
  color: var(--xtp-blue);
}

.xtp-service-links span {
  font-weight: 650;
}

.xtp-service-links small {
  color: var(--xtp-muted);
  font-size: 14px;
}

body.xnn-product .site-header--product .brand::before {
  background: #55c6ab;
}

body.xnn-product .site-header--product .site-nav-download {
  color: #ffffff;
  background: #117a65;
  border-color: #117a65;
}

body.xnn-product .site-header--product .site-nav-download:hover {
  color: #ffffff;
  background: #15947b;
  border-color: #15947b;
}

@media (max-width: 860px) {
  .xtp-wrap {
    width: min(100% - 36px, 1120px);
  }

  .xtp-hero {
    min-height: 560px;
    padding-block: 54px 42px;
  }

  .xtp-hero h1 {
    font-size: 48px;
  }

  .xtp-split {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .xtp-section-head {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 18px;
  }

  .xtp-section-head > p {
    margin-bottom: -4px;
  }
}

@media (max-width: 620px) {
  .xtp-hero {
    min-height: 520px;
    padding-block: 44px 34px;
  }

  .xtp-hero h1 {
    font-size: 40px;
  }

  .xtp-lede {
    font-size: 18px;
  }

  .xtp-actions,
  .product-hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .xtp-button,
  .product-hero-actions .button {
    width: 100%;
  }

  .xtp-facts,
  .xtp-steps {
    grid-template-columns: 1fr;
  }

  .xtp-facts > div,
  .xtp-facts > div + div,
  .xtp-steps li,
  .xtp-steps li + li {
    padding: 16px 0;
    border-left: 0;
    border-bottom: 1px solid #cad9d3;
  }

  .xtp-band {
    padding-block: 58px;
  }

  .xtp-section-head h2,
  .xtp-split h2 {
    font-size: 30px;
  }

  .xtp-requirements > div,
  .xtp-service-links a {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* ================ Download, account, and support lifecycle ================
   These routes share the product landing's light, information-led language.
   Existing route/form hooks remain intact; cards are presented as flat rows. */
.platform-page--download,
.platform-page--account,
.platform-page--support,
.public-page--account,
.public-page--dashboard,
.public-page--support {
  --life-ink: #14201d;
  --life-muted: #50615d;
  --life-line: #cad9d3;
  --life-green: #117a65;
  --life-blue: #315ea8;
  min-height: 70vh;
  background: #f7faf8;
  color: var(--life-muted);
  font-family: "IBM Plex Sans", var(--font-sans);
}

.platform-page--download h1,
.platform-page--download h2,
.platform-page--download h3,
.platform-page--account h1,
.platform-page--account h2,
.platform-page--account h3,
.platform-page--support h1,
.platform-page--support h2,
.platform-page--support h3,
.public-page--account h1,
.public-page--account h2,
.public-page--account h3,
.public-page--dashboard h1,
.public-page--dashboard h2,
.public-page--dashboard h3,
.public-page--support h1,
.public-page--support h2,
.public-page--support h3 {
  color: var(--life-ink);
  font-family: "IBM Plex Sans", var(--font-sans);
  letter-spacing: 0;
}

.platform-page--download .hero,
.platform-page--account .hero,
.platform-page--support .hero,
.public-page--account .hero,
.public-page--dashboard .hero,
.public-page--support .hero {
  padding-block: 64px;
  background: #f7faf8;
  border-bottom: 1px solid var(--life-line);
}

.platform-page--download .hero-copy,
.platform-page--account .hero-copy,
.platform-page--support .hero-copy,
.public-page--account .hero-copy,
.public-page--dashboard .hero-copy,
.public-page--support .hero-copy {
  max-width: 720px;
}

.platform-page--download .hero h1,
.platform-page--account .hero h1,
.platform-page--support .hero h1,
.public-page--account .hero h1,
.public-page--dashboard .hero h1,
.public-page--support .hero h1 {
  max-width: 18ch;
  font-size: 48px;
  line-height: 1.08;
}

.platform-page--download .hero-body,
.platform-page--account .hero-body,
.platform-page--support .hero-body,
.public-page--account .hero-body,
.public-page--dashboard .hero-body,
.public-page--support .hero-body {
  max-width: 62ch;
  color: #344641;
  font-size: 18px;
}

.platform-page--download .button--primary,
.platform-page--account .button--primary,
.platform-page--support .button--primary,
.public-page--account .button--primary,
.public-page--dashboard .button--primary,
.public-page--support .button--primary {
  color: #ffffff;
  background: var(--life-green);
  border-color: var(--life-green);
  border-radius: 6px;
}

.platform-page--download .button--primary:hover,
.platform-page--account .button--primary:hover,
.platform-page--support .button--primary:hover,
.public-page--account .button--primary:hover,
.public-page--dashboard .button--primary:hover,
.public-page--support .button--primary:hover {
  color: #ffffff;
  background: #0c6655;
  border-color: #0c6655;
}

/* Account lifecycle pages use a light information surface. Keep generic dark
   form/trust primitives from leaking unreadable dark-on-dark headings here. */
.platform-page--account .admin-form,
.platform-page--account .trust-panel,
.public-page--account .admin-form,
.public-page--account .trust-panel,
.public-page--dashboard .admin-form,
.public-page--dashboard .trust-panel {
  color: var(--life-muted);
  background: #ffffff;
  border-color: var(--life-line);
  box-shadow: none;
}

.platform-page--account .admin-form label,
.platform-page--account .trust-panel li,
.public-page--account .admin-form label,
.public-page--account .trust-panel li,
.public-page--dashboard .admin-form label,
.public-page--dashboard .trust-panel li {
  color: var(--life-muted);
}

.platform-page--account .admin-form input,
.platform-page--account .admin-form select,
.platform-page--account .admin-form textarea,
.public-page--account .admin-form input,
.public-page--account .admin-form select,
.public-page--account .admin-form textarea,
.public-page--dashboard .admin-form input,
.public-page--dashboard .admin-form select,
.public-page--dashboard .admin-form textarea {
  color: var(--life-ink);
  background: #f7faf8;
  border-color: var(--life-line);
}

.platform-page--account .admin-form input::placeholder,
.platform-page--account .admin-form textarea::placeholder,
.public-page--account .admin-form input::placeholder,
.public-page--account .admin-form textarea::placeholder,
.public-page--dashboard .admin-form input::placeholder,
.public-page--dashboard .admin-form textarea::placeholder {
  color: #71817d;
}

/* Download: primary installer first, verification immediately below it. */
.platform-page--download .download-hero {
  min-height: 560px;
}

.platform-page--download .download-shot {
  align-self: center;
  border: 1px solid var(--life-line);
  border-radius: 8px;
  overflow: hidden;
  background: #e8f2ee;
}

.platform-page--download .download-meta {
  width: 100%;
  padding-block: 18px;
  border-top: 1px solid var(--life-line);
  border-bottom: 1px solid var(--life-line);
}

.platform-page--download .download-meta dt,
.platform-page--download .download-meta dd,
.platform-page--download .download-meta dd code {
  color: var(--life-ink);
  letter-spacing: 0;
}

.platform-page--download .download-note,
.platform-page--download .download-warn {
  color: var(--life-muted);
}

.platform-page--download .download-wrap {
  max-width: 1120px;
  padding-inline: 24px;
}

.platform-page--download .download-sec {
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 48px;
  padding-block: 54px;
  border-color: var(--life-line);
}

.platform-page--download .download-sec-body h2 {
  color: var(--life-ink);
  font-family: "IBM Plex Sans", var(--font-sans);
  font-size: 30px;
  letter-spacing: 0;
}

.platform-page--download .download-lead,
.platform-page--download .download-feature-list li,
.platform-page--download .download-req-list li,
.platform-page--download .other-platform-name,
.platform-page--download .other-platform-status {
  color: var(--life-muted);
}

.platform-page--download .download-feature-list li strong {
  color: var(--life-ink);
}

.platform-page--download .other-platform {
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--life-line);
  border-radius: 0;
  background: transparent;
}

.platform-page--download .installer-list,
.platform-page--download .trust-panel {
  width: min(1072px, calc(100% - 48px));
  max-width: none;
  margin: 0 auto;
  padding: 54px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.platform-page--download .installer-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  padding: 24px 0;
  border: 0;
  border-top: 1px solid var(--life-line);
  border-radius: 0;
  background: transparent;
}

.platform-page--download .installer-row dl {
  grid-column: 1 / -1;
}

.platform-page--download .installer-list .button--primary {
  color: var(--life-blue);
  background: transparent;
  border-color: var(--life-line);
}

.platform-page--download .trust-panel {
  border-top: 1px solid var(--life-line);
  background: #e8f2ee;
  box-shadow: 0 0 0 100vmax #e8f2ee;
  clip-path: inset(0 -100vmax);
}

.platform-page--download .trust-panel ul {
  display: grid;
  gap: 0;
  margin-top: 28px;
}

.platform-page--download .trust-panel li {
  padding: 16px 0;
  border-top: 1px solid #acc3ba;
}

/* Account and support: one command in the hero, state below, flat task rows. */
.platform-page--account .route-notice,
.platform-page--support .route-notice,
.public-page--account .route-notice,
.public-page--dashboard .route-notice,
.public-page--support .route-notice {
  align-self: stretch;
  padding: 24px 0 24px 28px;
  border: 0;
  border-left: 1px solid var(--life-line);
  border-radius: 0;
  background: transparent;
}

.platform-page--account .route-notice p,
.platform-page--support .route-notice p,
.public-page--account .route-notice p,
.public-page--dashboard .route-notice p,
.public-page--support .route-notice p {
  color: var(--life-muted);
}

.platform-page--account .button--secondary,
.platform-page--support .button--secondary,
.public-page--account .button--secondary,
.public-page--dashboard .button--secondary,
.public-page--support .button--secondary {
  color: var(--life-blue);
  background: transparent;
  border-color: var(--life-line);
}

.platform-page--account .button--secondary:hover,
.platform-page--support .button--secondary:hover,
.public-page--account .button--secondary:hover,
.public-page--dashboard .button--secondary:hover,
.public-page--support .button--secondary:hover {
  color: #23477f;
  background: #edf1f7;
  border-color: #9eafc9;
}

.platform-page--account .page-section,
.platform-page--support .page-section,
.public-page--account .page-section,
.public-page--dashboard .page-section,
.public-page--support .page-section,
.lifecycle-section {
  width: min(1120px, calc(100% - 48px));
  max-width: none;
  margin-inline: auto;
  padding-block: 64px;
}

.platform-page--account > .section-items {
  width: min(1120px, calc(100% - 48px));
  max-width: none;
  margin-inline: auto;
  padding-block: 48px 64px;
}

.platform-page--account .section-items,
.platform-page--support .section-items,
.public-page--account .section-items,
.public-page--dashboard .section-items,
.public-page--support .section-items,
.lifecycle-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 32px;
  border-top: 1px solid var(--life-line);
}

.platform-page--account .content-card,
.platform-page--support .content-card,
.public-page--account .content-card,
.public-page--dashboard .content-card,
.public-page--support .content-card,
.lifecycle-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.5fr) minmax(150px, 0.45fr) minmax(240px, 1fr) auto;
  align-items: start;
  gap: 24px;
  min-width: 0;
  padding: 24px 0;
  border: 0;
  border-bottom: 1px solid var(--life-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.platform-page--account .content-card > *,
.platform-page--support .content-card > *,
.public-page--account .content-card > *,
.public-page--dashboard .content-card > *,
.public-page--support .content-card > *,
.lifecycle-row > * {
  min-width: 0;
  margin-top: 0;
}

.platform-page--account .content-card p,
.platform-page--support .content-card p,
.public-page--account .content-card p,
.public-page--dashboard .content-card p,
.public-page--support .content-card p,
.lifecycle-row p {
  color: var(--life-muted);
}

.platform-page--account .content-card .visual-value,
.public-page--account .content-card .visual-value,
.public-page--dashboard .content-card .visual-value,
.lifecycle-row .visual-value {
  color: var(--life-ink);
  font-size: 17px;
  font-weight: 650;
}

.platform-page--account .content-card .button,
.platform-page--support .content-card .button,
.public-page--account .content-card .button,
.public-page--dashboard .content-card .button,
.public-page--support .content-card .button,
.lifecycle-row .button,
.lifecycle-row .text-link {
  align-self: center;
  justify-self: end;
  white-space: nowrap;
}

.support-task {
  grid-template-columns: minmax(0, 1fr) auto;
}

.support-task > div p {
  max-width: 62ch;
}

.platform-page--support .support-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  width: min(1120px, calc(100% - 48px));
  max-width: none;
  margin: 0 auto;
  padding-block: 48px 72px;
  border-top: 1px solid var(--life-line);
}

.platform-page--support .support-card {
  display: grid;
  grid-template-columns: minmax(180px, 0.45fr) minmax(0, 1fr) auto;
  gap: 24px;
  padding: 22px 0;
  border: 0;
  border-bottom: 1px solid var(--life-line);
  border-radius: 0;
  background: transparent;
}

.platform-page--support .support-card > * {
  margin: 0;
}

.platform-page--support .support-card p {
  color: var(--life-muted);
}

.platform-page--support .support-card strong {
  color: var(--life-blue);
  font-weight: 650;
}

.platform-page--support .status-list,
.public-page--support .status-list {
  grid-template-columns: 1fr;
  gap: 0;
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
  padding-block: 48px;
  border-top: 1px solid var(--life-line);
}

.platform-page--support .trust-panel,
.platform-page--support .support-contact-form {
  width: min(720px, calc(100% - 48px));
  max-width: none;
  margin: 48px auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.account-status-banner {
  padding: 14px 0;
  border-width: 1px 0;
  border-color: var(--life-line, var(--border-subtle));
  border-radius: 0;
  background: transparent;
}

.lifecycle-section--diagnostics {
  padding-top: 16px;
}

.lifecycle-disclosure {
  border-top: 1px solid var(--life-line);
  border-bottom: 1px solid var(--life-line);
}

.lifecycle-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  color: var(--life-ink);
  font-size: 20px;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}

.lifecycle-disclosure > summary::-webkit-details-marker {
  display: none;
}

.lifecycle-disclosure > summary::after {
  content: "+";
  color: var(--life-green);
  font-size: 24px;
  font-weight: 400;
}

.lifecycle-disclosure[open] > summary::after {
  content: "−";
}

.lifecycle-disclosure > summary small {
  margin-left: auto;
  color: var(--life-muted);
  font-size: 13px;
  font-weight: 500;
}

.lifecycle-disclosure-body {
  padding: 8px 0 32px;
}

@media (max-width: 900px) {
  .platform-page--download .download-sec {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .platform-page--account .content-card,
  .platform-page--support .content-card,
  .public-page--account .content-card,
  .public-page--dashboard .content-card,
  .public-page--support .content-card,
  .lifecycle-row {
    grid-template-columns: minmax(130px, 0.4fr) minmax(0, 1fr);
  }

  .platform-page--account .content-card .button,
  .platform-page--support .content-card .button,
  .public-page--account .content-card .button,
  .public-page--dashboard .content-card .button,
  .public-page--support .content-card .button,
  .lifecycle-row .button,
  .lifecycle-row .text-link {
    justify-self: start;
  }
}

@media (max-width: 620px) {
  .platform-page--download .hero,
  .platform-page--account .hero,
  .platform-page--support .hero,
  .public-page--account .hero,
  .public-page--dashboard .hero,
  .public-page--support .hero {
    padding-block: 44px;
  }

  .platform-page--download .hero h1,
  .platform-page--account .hero h1,
  .platform-page--support .hero h1,
  .public-page--account .hero h1,
  .public-page--dashboard .hero h1,
  .public-page--support .hero h1 {
    font-size: 38px;
  }

  .platform-page--download .download-hero {
    min-height: 0;
  }

  .platform-page--download .download-shot {
    display: none;
  }

  .platform-page--download .download-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .platform-page--download .download-sec,
  .platform-page--download .installer-list,
  .platform-page--download .trust-panel,
  .platform-page--account .page-section,
  .platform-page--support .page-section,
  .public-page--account .page-section,
  .public-page--dashboard .page-section,
  .public-page--support .page-section,
  .lifecycle-section {
    width: calc(100% - 36px);
    padding-block: 48px;
  }

  .platform-page--account > .section-items {
    width: calc(100% - 36px);
  }

  .platform-page--download .installer-row,
  .platform-page--account .content-card,
  .platform-page--support .content-card,
  .public-page--account .content-card,
  .public-page--dashboard .content-card,
  .public-page--support .content-card,
  .platform-page--support .support-card,
  .lifecycle-row,
  .support-task {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .platform-page--account .content-card .button,
  .platform-page--support .content-card .button,
  .public-page--account .content-card .button,
  .public-page--dashboard .content-card .button,
  .public-page--support .content-card .button,
  .lifecycle-row .button,
  .lifecycle-row .text-link {
    width: 100%;
    justify-self: stretch;
    white-space: normal;
  }

  .platform-page--account .route-notice,
  .platform-page--support .route-notice,
  .public-page--account .route-notice,
  .public-page--dashboard .route-notice,
  .public-page--support .route-notice {
    padding: 22px 0 0;
    border-left: 0;
    border-top: 1px solid var(--life-line);
  }

  .lifecycle-disclosure > summary {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .lifecycle-disclosure > summary small {
    width: calc(100% - 32px);
    margin-left: 0;
  }
}