/* Quenderin marketing site.
   The palette is DERIVED FROM THE BRAND ARTWORK (brand/icon-square-1024.png), not from a
   SaaS template: teal = her braids/eyes/choker, copper = the "Q" and the warm braid
   strands, gold = the leather engraving, warm paper for light surfaces. Sampled
   2026-07-03 — if the art changes, resample; don't guess. Hairline borders over
   shadows, 8px grid, tabular numbers; state changes animate only color / opacity /
   transform — never reflow geometry. No third-party fonts, no animated gradient hero:
   restraint over spectacle. */

:root {
  /* Brand — teal from the elf's braids/eyes; copper from the "Q"; gold from the engraving */
  --brand: #2E7680;
  --brand-hover: #3C8A94;
  --brand-dark: #1C4E5D;
  --copper: #C46B2C;
  --copper-bright: #EDA04F;
  --gold: #F7C259;

  /* Ink (dark sections) — deep teal-ink, not navy */
  --ink-900: #0F1B1E;
  --ink-800: #14252A;
  --ink-700: #1D353A;

  /* Neutral ramp — warmed toward paper */
  --n-975: #0A0E0F;
  --n-900: #20292B;   /* body text */
  --n-700: #46534F;   /* secondary text */
  --n-500: #6B7873;   /* muted / caption */
  --n-300: #A6B0AB;   /* disabled / placeholder */
  --n-100: #E4E7E0;   /* hairline borders */
  --n-050: #F7F6F1;   /* subtle bg tint (paper) */
  --n-000: #FFFFFF;

  /* Semantic surface/text/border (light context — overridden in dark sections) */
  --surface: var(--n-000);
  --surface-tint: var(--n-050);
  --text: var(--n-900);
  --text-secondary: var(--n-700);
  --text-muted: var(--n-500);
  --border: var(--n-100);
  --accent-border: rgba(46, 118, 128, 0.40);
  --accent-soft: rgba(46, 118, 128, 0.08);
  --on-brand: #ffffff;

  /* Radius */
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 24px; --r-full: 9999px;

  /* Elevation (ink-tinted, used sparingly) */
  --shadow-hover: 0 2px 8px rgba(15, 27, 30, 0.08);
  --shadow-modal: 0 8px 32px rgba(15, 27, 30, 0.14), 0 2px 8px rgba(15, 27, 30, 0.08);

  /* Motion */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 100ms; --dur-base: 200ms; --dur-slow: 400ms;

  --maxw: 1080px;
  --maxw-wide: 1280px;
  --pad: clamp(1.25rem, 4vw, 2rem);
  --font-sans: sohne-var, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  /* Display face for headlines only; non-Latin scripts fall back to --font-sans per glyph */
  --font-display: "Bricolage Grotesque", var(--font-sans);
}

/* Headline display face — self-hosted (OFL), so the "nothing loads from a third party" promise holds.
   Latin variable subset: Cyrillic / Arabic / CJK / Indic headlines fall back to --font-sans automatically. */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/bricolage-grotesque-latin.woff2") format("woff2");
}

/* Dark "ink" section token overrides — same components, different surface layer */
[data-theme="dark"] {
  --surface: var(--ink-900);
  --surface-tint: var(--ink-800);
  --text: #ffffff;
  --text-secondary: #9FBFC3;
  --text-muted: #9FBFC3;
  --border: rgba(255, 255, 255, 0.12);
  --accent-border: rgba(82, 147, 154, 0.5);
  --accent-soft: rgba(82, 147, 154, 0.14);
  background: var(--ink-900);
  color: #fff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--n-000);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}
h1, h2, h3, h4 { margin: 0; color: var(--text); }
/* Headlines: self-hosted Bricolage Grotesque display face, with presence */
h1 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.025em; line-height: 1.04; }
h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.12; }
h3 { font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; }
h4 { font-weight: 500; line-height: 1.3; }
p { margin: 0; }
a { color: inherit; text-decoration: none; transition: color var(--dur-base) var(--ease-out); }
ul, ol { margin: 0; padding: 0; list-style: none; }
strong { font-weight: 600; }
em { font-style: normal; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.container-wide { max-width: var(--maxw-wide); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -999px; top: 0.5rem; z-index: 100; background: var(--brand); color: #fff; padding: 0.5rem 0.85rem; border-radius: var(--r-md); }
.skip-link:focus { left: 0.5rem; }

a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px;
}

/* ---------- Buttons (Stripe motion: transform/opacity/color only, no reflow) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.7rem 1.2rem; border-radius: var(--r-full);
  font-size: 0.95rem; font-weight: 500; border: 1px solid transparent; cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  white-space: nowrap;
}
/* Primary action wears the artwork's copper — the color of her "Q" pendant. */
.btn-primary { background: var(--copper); color: var(--on-brand); box-shadow: 0 1px 2px rgba(196,107,44,0.20), 0 6px 18px rgba(196,107,44,0.28); }
.btn-primary:hover { background: #D57A38; box-shadow: 0 2px 5px rgba(196,107,44,0.30), 0 10px 26px rgba(196,107,44,0.40); }
.btn-ghost { background: transparent; border-color: var(--border); color: var(--text); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }
[data-theme="dark"] .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.25); }
[data-theme="dark"] .btn-ghost:hover { border-color: #fff; color: #fff; }

/* ---------- Brand mark ---------- */
.brand { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 500; }
.brand-name { letter-spacing: -0.02em; }
.brand-mark { width: 18px; height: 18px; border-radius: 50%; background: url("favicon-32.png") center/cover no-repeat, linear-gradient(135deg, var(--brand), var(--brand-dark)); flex: none; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--n-000) 56%, transparent);
  backdrop-filter: blur(22px) saturate(185%);
  -webkit-backdrop-filter: blur(22px) saturate(185%);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.55), 0 1px 18px rgba(10,37,64,0.05);
}
html[data-theme-mode="dark"] .site-header {
  background: color-mix(in srgb, var(--n-000) 48%, transparent);
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.10), 0 2px 20px rgba(0,0,0,0.45);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.nav { display: flex; align-items: center; gap: 0.7rem; }
.nav-menu { display: flex; align-items: center; gap: 1.5rem; }
.nav-menu a:not(.btn) { position: relative; color: var(--text-secondary); font-size: 0.92rem; transition: color var(--dur-base) var(--ease-out); }
.nav-menu a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: var(--brand); transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-base) var(--ease-out); }
.nav-menu a:not(.btn):hover { color: var(--text); }
.nav-menu a:not(.btn):hover::after, .nav-menu a:not(.btn).is-active::after { transform: scaleX(1); }
.nav-menu a:not(.btn).is-active { color: var(--text); }
.nav-menu a.btn { color: var(--on-brand); display: inline-flex; align-items: center; }
.nav-toggle { display: none; }
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: var(--r-full); border: 1px solid var(--border); flex: none; cursor: pointer;
  background: color-mix(in srgb, var(--n-000) 35%, transparent); color: var(--text-secondary);
  transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.theme-toggle:hover { color: var(--text); border-color: var(--brand); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; }
html[data-theme-mode="dark"] .theme-toggle .icon-sun { display: block; }
html[data-theme-mode="dark"] .theme-toggle .icon-moon { display: none; }

/* Language picker — an integrated nav control, not a form box */
.lang-picker { position: relative; display: inline-flex; align-items: center; }
.lang-picker .lang-globe, .lang-picker .lang-chev { position: absolute; pointer-events: none; color: var(--text-secondary); transition: color var(--dur-base) var(--ease-out); }
.lang-picker .lang-globe { left: 0.62rem; width: 15px; height: 15px; }
.lang-picker .lang-chev { right: 0.55rem; width: 12px; height: 12px; opacity: 0.7; }
.lang-select {
  appearance: none; -webkit-appearance: none;
  font: inherit; font-size: 0.9rem; line-height: 1;
  color: var(--text-secondary); background: transparent;
  border: 1px solid transparent; border-radius: var(--r-full);
  padding: 0.46rem 1.6rem 0.46rem 1.95rem;
  cursor: pointer;
  transition: color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.lang-select:hover { color: var(--text); background: var(--accent-soft); }
.lang-picker:hover .lang-globe, .lang-picker:hover .lang-chev { color: var(--text); }
.lang-select:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.lang-select option { color: var(--n-900); }
html[dir="rtl"] .lang-select { padding: 0.46rem 1.95rem 0.46rem 1.6rem; }
html[dir="rtl"] .lang-picker .lang-globe { left: auto; right: 0.62rem; }
html[dir="rtl"] .lang-picker .lang-chev { right: auto; left: 0.55rem; }

/* Scroll-aware density: a touch more presence once you leave the hero */
.site-header.scrolled { background: color-mix(in srgb, var(--n-000) 80%, transparent); box-shadow: 0 6px 24px rgba(10,37,64,0.07); }
html[data-theme-mode="dark"] .site-header.scrolled { background: color-mix(in srgb, var(--n-000) 72%, transparent); box-shadow: 0 8px 28px rgba(0,0,0,0.5); }

/* ---------- Hero: quiet teal-ink with two still glows (teal + copper) + diagonal slice.
   The old animated mesh-gradient canvas was the loudest "generated page" tell — removed. ---------- */
.hero {
  position: relative; overflow: hidden; color: #fff; isolation: isolate;
  background:
    radial-gradient(1100px 520px at 78% 28%, rgba(82, 147, 154, 0.20), transparent 65%),
    radial-gradient(760px 420px at 12% 88%, rgba(196, 107, 44, 0.12), transparent 60%),
    var(--ink-900);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5vw), 0 100%);
  padding-bottom: 5vw;
}
.hero .eyebrow { color: rgba(255,255,255,0.92); }
.hero h1 { color: #fff; }
.hero .lede { color: rgba(255,255,255,0.94); }
.hero .spec-strip { border-top-color: rgba(255,255,255,0.22); color: rgba(255,255,255,0.82); }
.hero .spec-num { color: #fff; }
.hero .btn-primary { background: var(--copper); color: #fff; box-shadow: 0 4px 16px rgba(0,0,0,0.25); }
.hero .btn-primary:hover { background: #D57A38; box-shadow: 0 10px 28px rgba(0,0,0,0.32); }
.hero .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.45); }
.hero .btn-ghost:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,0.12); }

.hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; padding-block: clamp(4.5rem, 11vw, 8rem); }
.hero-visual { perspective: 1200px; }
.eyebrow { font-size: 0.82rem; font-weight: 500; letter-spacing: 0.02em; color: var(--brand); margin-bottom: 1rem; }
.hero h1 { font-size: clamp(2.7rem, 6.2vw, 4.75rem); }
.lede { margin-top: 1.5rem; font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--text-secondary); max-width: 36ch; font-weight: 400; }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.spec-strip { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); font-size: 0.9rem; color: var(--text-muted); }
.spec-num { font-weight: 500; color: var(--text); margin-right: 0.35rem; }

/* Product-UI mockup as hero (Stripe pattern): a code/chat window in ink */
.device { border: 1px solid rgba(255,255,255,0.14); border-radius: var(--r-xl); background: var(--ink-900); overflow: hidden; box-shadow: 0 40px 80px rgba(10,37,64,0.42), 0 12px 28px rgba(10,37,64,0.28); transition: transform 0.5s var(--ease-out-expo); transform-style: preserve-3d; will-change: transform; }
.device-bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.1); font-family: var(--font-mono); font-size: 0.74rem; color: #89B3D7; }
.device-status { color: #89B3D7; }
.device-airplane { margin-left: auto; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #89B3D7; flex: none; display: inline-block; }
.dot-live { background: #3ECF8E; }
.chat { padding: 1.1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.msg { padding: 0.75rem 0.95rem; border-radius: var(--r-lg); font-size: 0.92rem; max-width: 92%; color: #fff; line-height: 1.55; }
.msg-who { display: block; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase; color: #5b7ca0; margin-bottom: 0.3rem; }
.msg-user { align-self: flex-end; background: var(--ink-700); }
.msg-ai { align-self: flex-start; background: rgba(122,115,255,0.18); border: 1px solid rgba(122,115,255,0.35); }
.chat-foot { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.2rem; font-family: var(--font-mono); font-size: 0.72rem; color: #5b7ca0; }

/* ---------- Trust strip ---------- */
.trust { padding-block: 2rem; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.trust-label { font-size: 0.82rem; color: var(--text-muted); }
.trust-list { display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; font-size: 0.88rem; color: var(--text-secondary); font-weight: 500; }

/* ---------- Sections ---------- */
.section { padding-block: clamp(3.25rem, 6.5vw, 5.25rem); background: var(--surface); }
.section.tint { background: var(--surface-tint); }
.section-head { max-width: 42rem; margin-bottom: 2.25rem; }
.section-head h2 { font-size: clamp(1.9rem, 4vw, 2.75rem); }
.section-head .lede, .section-head p { margin-top: 1rem; color: var(--text-secondary); font-size: 1.1rem; }

/* Ink band (the punctuation) */
.band { padding-block: clamp(3.5rem, 7.5vw, 6rem); text-align: center; }
.band-inner { max-width: 48rem; margin-inline: auto; }
.band h2 { font-size: clamp(2rem, 4.5vw, 3rem); }
.band p { margin-top: 1.25rem; font-size: 1.15rem; color: var(--text-secondary); }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.step { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.75rem; background: var(--surface); transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out); }
.step:hover { border-color: var(--accent-border); background: var(--surface-tint); }
.step-num { font-weight: 500; font-size: 1rem; color: var(--brand); }
.step h3 { margin-top: 1rem; font-size: 1.25rem; }
.step p { margin-top: 0.6rem; color: var(--text-secondary); }

/* Feature grid */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.cell { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.75rem; background: var(--surface); transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out); }
.cell:hover { border-color: var(--accent-border); background: var(--surface-tint); }
.cell h3 { font-size: 1.18rem; }
.cell p { margin-top: 0.6rem; color: var(--text-secondary); }

/* Checklist */
.checklist { display: grid; gap: 1rem; max-width: 42rem; }
.checklist li { position: relative; padding-left: 2rem; color: var(--text); font-size: 1.05rem; }
.checklist li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--brand); font-weight: 600; }
[data-theme="dark"] .checklist li::before { color: var(--brand-hover); }

/* Spec table */
.table-wrap {
  border: 1px solid var(--border); border-radius: var(--r-lg); overflow-x: auto;
  background-color: var(--surface);
  /* Scroll affordance: edge fades appear only when there's more table to scroll
     (covers move with content = local; shadows pin to the viewport = scroll). */
  background-image:
    linear-gradient(to right, var(--surface), transparent),
    linear-gradient(to left, var(--surface), transparent),
    radial-gradient(farthest-side at 0 50%, rgba(120,120,140,0.30), transparent),
    radial-gradient(farthest-side at 100% 50%, rgba(120,120,140,0.30), transparent);
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 16px 100%, 16px 100%;
  background-attachment: local, local, scroll, scroll;
}
.spec-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.spec-table th { text-align: left; padding: 1rem 1.25rem; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); font-weight: 500; border-bottom: 1px solid var(--border); }
.spec-table td { padding: 1rem 1.25rem; border-top: 1px solid var(--border); white-space: nowrap; font-family: var(--font-mono); }
.spec-table td:first-child { font-family: var(--font-sans); }
.spec-table tbody tr:first-child td { border-top: none; }
.spec-table .muted { color: var(--text-muted); font-size: 0.82rem; margin-left: 0.4rem; }
.table-note { margin-top: 1rem; color: var(--text-muted); font-size: 0.95rem; }

/* FAQ */
.faq { max-width: 46rem; }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { list-style: none; cursor: pointer; padding: 1.25rem 2rem 1.25rem 0; position: relative; font-weight: 500; font-size: 1.05rem; color: var(--text); transition: color var(--dur-base) var(--ease-out); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 1.1rem; font-family: var(--font-mono); color: var(--text-muted); font-size: 1.15rem; }
.faq details[open] summary::after { content: "\2212"; color: var(--brand); }
.faq summary:hover { color: var(--brand); }
.faq details p { color: var(--text-secondary); padding-bottom: 1.25rem; max-width: 62ch; }

/* CTA band */
/* CTA — brand gradient, one focused action (bookends the hero) */
.cta-band { position: relative; overflow: hidden; isolation: isolate; text-align: center; padding-block: clamp(5rem, 11vw, 8rem); color: #fff;
  background:
    radial-gradient(900px 460px at 70% 20%, rgba(82, 147, 154, 0.22), transparent 65%),
    radial-gradient(640px 380px at 18% 90%, rgba(196, 107, 44, 0.12), transparent 60%),
    var(--ink-900);
}
.cta-inner { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; font-size: clamp(2.1rem, 4.6vw, 3.1rem); }
.cta-inner > p { margin-top: 1.1rem; color: rgba(255,255,255,0.92); max-width: 40rem; margin-inline: auto; font-size: 1.15rem; }
.cta-band .cta-row { justify-content: center; margin-top: 2.25rem; }
.btn-white { background: #fff; color: var(--ink-900); }
.btn-white:hover { background: rgba(255,255,255,0.92); box-shadow: 0 10px 28px rgba(10,37,64,0.30); }
.cta-band .form-consent { color: rgba(255,255,255,0.62); margin-top: 1.6rem; }
.footer-status { margin-top: 1rem; display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-muted); }

/* How-it-works phone: glow + floating annotations (fills the column) */
.phone-stage { position: relative; display: flex; justify-content: center; align-items: center; }
.phone-stage::before { content: ""; position: absolute; inset: -6% 0; z-index: 0; background: radial-gradient(closest-side, rgba(82,147,154,0.22), transparent 75%); filter: blur(16px); }
.phone-stage .phone { position: relative; z-index: 1; }
.phone-annot { position: absolute; z-index: 2; background: var(--n-000); border: 1px solid var(--border); border-radius: 13px; padding: 0.55rem 0.85rem; font-size: 0.8rem; font-weight: 500; color: var(--text); box-shadow: 0 12px 28px rgba(10,37,64,0.13); display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap; }
.annot-check { color: var(--brand); font-weight: 700; }
.phone-annot-1 { top: 45%; left: -13%; }
.phone-annot-2 { bottom: 24%; right: -14%; }
@media (max-width: 980px) { .phone-annot { display: none; } .phone-stage::before { display: none; } }

/* Model catalog — family cards (Ollama / LM Studio-style library) */
.model-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.model-card { position: relative; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--n-000); padding: 1.4rem; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.model-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(10,37,64,0.10); }
.model-card.recommended { border-color: var(--accent-border); box-shadow: inset 0 0 0 1px var(--accent-border); }
.model-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.9rem; }
/* Model-family marks — official brand SVGs inlined locally (same-origin, no third-party
   load), tinted to each family's brand color via CSS mask. */
.model-fam { display: inline-block; width: 1.15rem; height: 1.15rem; margin-right: 0.55rem; vertical-align: -0.24rem; flex: none; background-color: var(--fam-c, var(--text-muted)); -webkit-mask: var(--fam-i) center / contain no-repeat; mask: var(--fam-i) center / contain no-repeat; }
.fam-qwen { --fam-c: #7c3aed; --fam-i: url(icons/qwen.svg); }
.fam-deepseek { --fam-c: #2563eb; --fam-i: url(icons/deepseek.svg); }
.fam-llama { --fam-c: #4f46e5; --fam-i: url(icons/llama.svg); }
.fam-gemma { --fam-c: #0d9488; --fam-i: url(icons/gemma.svg); }
.fam-phi { --fam-c: #0284c7; --fam-i: url(icons/phi.svg); }
.fam-mistral { --fam-c: #ea580c; --fam-i: url(icons/mistral.svg); }
.model-badge { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--brand); border: 1px solid var(--accent-border); border-radius: 99px; padding: 0.16rem 0.5rem; white-space: nowrap; }
.model-card h3 { font-size: 1.18rem; }
.model-tag { margin-top: 0.35rem; color: var(--text-secondary); font-size: 0.88rem; }
.model-specs { display: flex; gap: 1.4rem; margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--border); }
.model-specs div { display: flex; flex-direction: column; gap: 0.2rem; }
.model-specs dt { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); font-family: var(--font-mono); }
.model-specs dd { margin: 0; font-family: var(--font-mono); font-size: 0.9rem; color: var(--text); font-variant-numeric: tabular-nums; }
.models-foot { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; color: var(--text-muted); font-size: 0.95rem; }
.models-foot strong { color: var(--text); }

/* Model catalog as a table (one header, no repeated labels) */
.model-spec-table td:first-child { font-family: var(--font-sans); white-space: nowrap; }
.model-spec-table td:nth-child(2) { font-family: var(--font-sans); white-space: normal; color: var(--text-secondary); font-size: 0.9rem; }
.model-spec-table .model-fam { margin-right: 0.5rem; vertical-align: middle; }
.model-spec-table .badge { margin-left: 0.5rem; }
.model-spec-table tr.recommended td:first-child { font-weight: 600; }

/* ===================================================================
   Dark mode — toggled via [data-theme-mode="dark"] on <html>
   =================================================================== */
html[data-theme-mode="dark"] {
  color-scheme: dark;
  --n-000: #0e0e13;
  --n-050: #16161d;
  --n-100: #2a2a35;
  --n-300: #565666;
  --n-500: #8b8fa3;
  --n-700: #b9bccb;
  --n-900: #eceef4;
  --surface: #0e0e13;
  --surface-tint: #16161d;
  --text: #eceef4;
  --text-secondary: #b9bccb;
  --text-muted: #8b8fa3;
  --border: #2a2a35;
  --brand: #8b83ff;
  --brand-hover: #a39cff;
  --accent-soft: rgba(139,131,255,0.16);
  --accent-border: rgba(139,131,255,0.45);
}
/* Floating product cards / annotations should read dark too */
html[data-theme-mode="dark"] .phone-annot { background: var(--surface-tint); }
html[data-theme-mode="dark"] .model-fam { filter: brightness(1.4); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); padding-top: clamp(3rem, 6vw, 4rem); background: var(--n-000); }
.footer-inner { display: grid; grid-template-columns: 1.3fr 2fr; gap: 2.5rem; padding-bottom: 2.5rem; }
.footer-brand .brand-mark { display: inline-block; vertical-align: middle; margin-right: 0.5rem; }
.footer-brand .brand-name { font-weight: 500; }
.footer-tag { margin-top: 0.75rem; color: var(--text-secondary); font-size: 0.92rem; max-width: 24ch; }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.footer-col h3 { font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); font-weight: 500; margin-bottom: 0.9rem; }
.footer-col a { display: block; color: var(--text-secondary); font-size: 0.92rem; padding-block: 0.32rem; }
.footer-col a:hover { color: var(--brand); }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem; padding-block: 1.75rem; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 0.86rem; }

/* ---------- Reveal (opacity + small transform; honored discipline) ---------- */
/* Scroll-in animation is a JS enhancement: content hides ONLY once main.js marks <html class="js">,
   so no-JS visitors, crawlers, and pre-hydration paints always see the page. */
html.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo), border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out); }
html.js .reveal.in { opacity: 1; transform: none; }

.dot-live { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-gradient::before, .hero-gradient::after, .dot-live { animation: none; }
  .btn, .step, .cell, .fit-bar-fill { transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }
  .steps, .grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 1.75rem; }
}
@media (max-width: 720px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: transparent; border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; position: relative; }
  .nav-toggle-bar, .nav-toggle-bar::before, .nav-toggle-bar::after { content: ""; position: absolute; width: 18px; height: 2px; background: var(--text); border-radius: 2px; }
  .nav-toggle-bar { left: 11px; }
  .nav-toggle-bar::before { top: -6px; left: 0; }
  .nav-toggle-bar::after { top: 6px; left: 0; }
  .nav-menu { position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--n-000); border-bottom: 1px solid var(--border); padding: 0.5rem var(--pad) 1rem; display: none; }
  .nav-menu.open { display: flex; }
  .nav-menu li { width: 100%; }
  .nav-menu a { display: block; padding-block: 0.7rem; }
  .nav-menu a.btn { margin-top: 0.5rem; }
  /* Compact the lang-picker so the navbar fits a phone (was overflowing ~21px past 375): globe-only,
     the closed "English" label is hidden but the native dropdown still lists all 12 languages on tap
     (option color is set separately, so the menu stays readable). Tighter nav gap too. */
  .nav { gap: 0.4rem; }
  .lang-select { width: 3rem; color: transparent; padding: 0.46rem 0.4rem 0.46rem 1.85rem; }
  .lang-picker .lang-chev { display: none; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
}

/* ===================================================================
   Section visuals — the product demonstrates itself (Stripe pattern)
   =================================================================== */

/* Two-column split: copy + a product visual */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; }
.split-copy .eyebrow { margin-bottom: 1rem; }
.split-copy h2 { font-size: clamp(1.9rem, 4vw, 2.75rem); }
.split-copy .checklist { margin-top: 1.75rem; }
.split-visual { display: flex; justify-content: center; min-width: 0; }

/* Vertical numbered steps (paired with the phone) */
.steplist { display: grid; gap: 1.75rem; margin-top: 2rem; }
.steplist li { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start; }
.steplist .step-num { font-family: var(--font-mono); color: var(--brand); font-weight: 500; font-size: 0.95rem; padding-top: 0.15rem; }
.steplist h3 { font-size: 1.2rem; }
.steplist p { margin-top: 0.35rem; color: var(--text-secondary); }

/* Network-activity monitor (Privacy visual) */
.netpanel { width: 100%; max-width: 460px; border-radius: var(--r-xl); background: var(--ink-900); border: 1px solid rgba(255,255,255,0.10); overflow: hidden; box-shadow: 0 30px 60px rgba(10,37,64,0.18); font-family: var(--font-mono); }
.netpanel-bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.1rem; border-bottom: 1px solid rgba(255,255,255,0.10); color: #89B3D7; font-size: 0.78rem; }
.netrow { display: grid; grid-template-columns: 2.6rem 1fr auto; gap: 0.75rem; align-items: center; padding: 0.75rem 1.1rem; font-size: 0.78rem; color: #cdd9e5; border-bottom: 1px solid rgba(255,255,255,0.05); }
.netrow .verb { color: #6b8199; }
.netrow .ok { color: #d7e3ef; }
.netrow .blocked { color: #5b7088; text-decoration: line-through; }
.netrow .tag-ok { color: #3ECF8E; }
.netrow .tag-x { color: #6b8199; }
.netpanel-foot { display: flex; align-items: center; gap: 0.55rem; padding: 0.9rem 1.1rem; font-size: 0.78rem; color: #89B3D7; background: rgba(255,255,255,0.02); }

/* Phone mockup (How-it-works visual) */
.phone { position: relative; width: 272px; border-radius: 42px; background: linear-gradient(160deg, #0c2c49, #07182a); border: 1px solid rgba(255,255,255,0.14); padding: 11px; box-shadow: 0 50px 90px rgba(10,37,64,0.30), 0 16px 34px rgba(10,37,64,0.20), inset 0 1px 0 rgba(255,255,255,0.14); }
.phone-screen { position: relative; border-radius: 31px; overflow: hidden; aspect-ratio: 9 / 18.6; background: radial-gradient(130% 80% at 50% 0%, #1A4566, #0A2540 72%); padding: 1.15rem 1.3rem 1.4rem; display: flex; flex-direction: column; color: #fff; }
.phone-screen::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,0.07), transparent 20%); }
.phone-statusbar { position: relative; display: flex; align-items: center; justify-content: space-between; margin: 0 0 1.4rem; }
.phone-time { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; color: #dbe8f4; letter-spacing: 0.03em; font-variant-numeric: tabular-nums; }
.phone-island { position: absolute; left: 50%; top: -1px; transform: translateX(-50%); width: 84px; height: 25px; border-radius: 99px; background: #04101a; }
.phone-island::after { content: ""; position: absolute; right: 11px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #2b4a64, #04101a 72%); }
.phone-signal { display: inline-flex; align-items: center; gap: 6px; color: #dbe8f4; }
.phone-signal svg { display: block; }
.phone-eyebrow { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: #89B3D7; }
.phone-model { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.5rem; }
.phone-model-icon { width: 38px; height: 38px; border-radius: 11px; flex: none; background: linear-gradient(140deg, #52939A, #1C4E5D); box-shadow: 0 6px 16px rgba(46,118,128,0.45), inset 0 1px 0 rgba(255,255,255,0.25); }
.phone-model-meta { min-width: 0; }
.phone h4 { font-size: 1.18rem; font-weight: 500; line-height: 1.2; }
.phone-sub { margin-top: 0.15rem; font-size: 0.8rem; color: #89B3D7; }
.phone-bar { margin-top: 1.5rem; height: 9px; border-radius: 99px; background: rgba(255,255,255,0.10); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,0.28); }
.phone-bar span { display: block; height: 100%; width: 100%; border-radius: 99px; background: linear-gradient(90deg, #52939A, #2E7680); box-shadow: 0 0 16px rgba(46,118,128,0.55); }
.phone-pct { margin-top: 0.5rem; font-family: var(--font-mono); font-size: 0.72rem; color: #89B3D7; }
.phone-ready { margin-top: auto; display: flex; align-items: center; gap: 0.55rem; padding: 0.8rem 0.9rem; border-radius: 14px; background: rgba(62,207,142,0.14); border: 1px solid rgba(62,207,142,0.42); color: #b8f0d4; font-size: 0.86rem; font-weight: 500; }

/* Bento feature grid */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: start; }
.bento .cell { display: flex; flex-direction: column; }
.bento .span-2 { grid-column: span 2; }
.bento .cell p { flex: 0 0 auto; }
.cell-visual { margin-top: 1.5rem; }
.bignum { font-size: 3.25rem; font-weight: 300; letter-spacing: -0.04em; color: var(--brand); line-height: 1; margin-bottom: 0.6rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { font-family: var(--font-mono); font-size: 0.74rem; padding: 0.32rem 0.65rem; border-radius: 99px; border: 1px solid var(--border); color: var(--text-secondary); background: var(--surface-tint); }
.chip-x { color: var(--text-muted); }
.chip-x::before { content: "✕\00a0"; color: #d0455f; }
.airplane-chip { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-secondary); border: 1px solid var(--border); border-radius: 99px; padding: 0.4rem 0.8rem; background: var(--surface-tint); }
.tier-scale { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); }
.tier-scale b { color: var(--text); font-weight: 500; }
.tier-scale .bar { flex: 1; height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--n-300), var(--brand)); }

/* Recommended model row */
.spec-table tr.recommended td { background: var(--accent-soft); }
.spec-table .badge { display: inline-block; font-size: 0.64rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--brand); border: 1px solid var(--accent-border); border-radius: 99px; padding: 0.12rem 0.5rem; margin-left: 0.5rem; vertical-align: middle; }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: 2.5rem; }
  .split-visual { order: 1; }
  .bento, .bento .span-2 { grid-template-columns: 1fr; grid-column: auto; }
}
@media (max-width: 600px) {
  .netrow { grid-template-columns: 2.2rem 1fr auto; font-size: 0.72rem; }
}

/* ===================================================================
   Legal / compliance pages (privacy, terms, imprint, accessibility)
   =================================================================== */
.legal-header { border-bottom: 1px solid var(--border); padding-block: 1.1rem; background: var(--n-000); }
.legal-header .brand { color: var(--text); }
.legal { max-width: 760px; padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.legal h1 { font-size: clamp(2rem, 4vw, 2.75rem); margin-bottom: 0.6rem; }
.legal-updated { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 2rem; font-family: var(--font-mono); }
.legal h2 { font-size: 1.45rem; margin-top: 2.5rem; margin-bottom: 0.6rem; }
.legal h3 { font-size: 1.1rem; margin-top: 1.5rem; margin-bottom: 0.4rem; }
.legal p, .legal li { color: var(--text-secondary); line-height: 1.7; }
.legal p { margin-bottom: 1rem; }
.legal ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
.legal li { margin-bottom: 0.45rem; }
.legal a { color: var(--brand); text-decoration: underline; }
.legal strong { color: var(--text); }
.legal .ph { background: var(--accent-soft); border: 1px dashed var(--accent-border); border-radius: 5px; padding: 0.05rem 0.4rem; font-family: var(--font-mono); font-size: 0.85em; color: var(--brand); }
.legal-note { background: var(--surface-tint); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.1rem 1.4rem; margin-bottom: 2rem; font-size: 0.92rem; }
.legal-note p { margin-bottom: 0; }
.form-consent { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.9rem; max-width: 38rem; margin-inline: auto; }
[data-theme="dark"] .form-consent { color: rgba(255,255,255,0.6); }
.form-consent a { color: inherit; text-decoration: underline; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; }
.footer-legal a { color: var(--text-muted); font-size: 0.86rem; }
.footer-legal a:hover { color: var(--brand); }
.learn-more { margin-top: 1.75rem; }
.learn-more a { color: var(--brand); font-weight: 500; }
.learn-more a:hover { text-decoration: underline; }

/* FAQ as a two-column split: heading + ask-CTA (sticky) · accordion */
.faq-split { grid-template-columns: 0.78fr 1.22fr; align-items: start; gap: clamp(2.5rem, 6vw, 5rem); }
.faq-split .split-copy { position: sticky; top: 92px; }
.faq-split .split-copy > p { margin-top: 1rem; color: var(--text-secondary); }
.faq-split .faq { max-width: none; }
.faq-cta { margin-top: 2rem; padding: 1.5rem; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-tint); }
.faq-cta p { margin-bottom: 1rem; color: var(--text); font-weight: 500; }
@media (max-width: 860px) {
  .faq-split { grid-template-columns: 1fr; }
  .faq-split .split-copy { position: static; }
}

/* Model-fit calculator */
.fit-widget { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.25rem; max-width: 720px; margin: 2.5rem auto 0; }
.fit-control { background: var(--surface-tint); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 1.5rem; display: flex; flex-direction: column; justify-content: center; }
.fit-control label { font-size: 0.8rem; font-weight: 500; color: var(--text-secondary); letter-spacing: 0.02em; }
.fit-slider-row { display: flex; align-items: center; gap: 1rem; margin-top: 1.1rem; }
.fit-slider-row input[type="range"] { flex: 1; accent-color: var(--brand); cursor: pointer; }
.fit-slider-row output { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; min-width: 4.5ch; text-align: right; }
.fit-result { background: var(--ink-900); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--r-xl); padding: 1.5rem; color: #fff; text-align: center; display: flex; flex-direction: column; justify-content: center; }
.fit-rec { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.09em; text-transform: uppercase; color: #89B3D7; }
.fit-model { font-size: 1.55rem; font-weight: 600; line-height: 1.1; margin-top: 0.5rem; }
.fit-specs { margin-top: 0.45rem; font-family: var(--font-mono); font-size: 0.82rem; color: #89B3D7; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .fit-widget { grid-template-columns: 1fr; } }

/* Fit calculator memory bar */
.fit-bar { height: 8px; border-radius: 99px; background: rgba(127,127,127,.18); overflow: hidden; margin-top: 1.1rem; }
.fit-bar-fill { display: block; height: 100%; width: 50%; border-radius: 99px; background: var(--brand); transition: width .35s var(--ease-out), background-color .35s; }
.fit-bar-fill.tight { background: #d9822b; }
.fit-foot { margin: .5rem 0 0; font-size: .85rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* Glossary */
.glossary { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem 2.5rem; max-width: 820px; margin: 2.5rem auto 0; }
.glossary dt { font-weight: 500; color: var(--text); margin-bottom: 0.4rem; }
.glossary dd { margin: 0; color: var(--text-secondary); font-size: 0.95rem; line-height: 1.6; }

/* Back-to-top */
.to-top { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 40; width: 42px; height: 42px; border-radius: var(--r-full); border: 1px solid var(--border); background: color-mix(in srgb, var(--n-000) 80%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(10,37,64,0.12); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.to-top.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.to-top:hover { border-color: var(--brand); color: var(--brand); }
.to-top:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Scroll-progress bar */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: var(--brand); transform: scaleX(0); transform-origin: left center; z-index: 60; transition: transform 0.05s linear; }
@media (prefers-reduced-motion: reduce) { .scroll-progress { transition: none; } }

/* Comparison table */
.compare-table td { font-family: var(--font-sans); white-space: normal; }
.compare-table td:first-child { color: var(--text-secondary); }
.compare-table th:nth-child(2), .compare-table td:nth-child(2) { color: var(--brand); font-weight: 500; }
.compare-table td.compare-no { color: var(--text-muted); }

/* Code block + copy-to-clipboard */
.codeblock { position: relative; max-width: 560px; margin: 2rem auto 0; }
.codeblock pre { margin: 0; background: var(--ink-900); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--r-lg); padding: 1.25rem 1.4rem; overflow-x: auto; }
.codeblock code { font-family: var(--font-mono); font-size: 0.85rem; line-height: 1.7; color: #cfe0f0; white-space: pre; }
.copy-btn { position: absolute; top: 0.7rem; right: 0.7rem; font: inherit; font-size: 0.72rem; font-weight: 500; padding: 0.3rem 0.7rem; border-radius: var(--r-md); border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); color: #cfe0f0; cursor: pointer; transition: background-color var(--dur-base) var(--ease-out); }
.copy-btn:hover { background: rgba(255,255,255,0.14); }
.copy-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.copy-btn.copied span { visibility: hidden; }
.copy-btn.copied::after { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #5BE6B0; }
.gs-platforms { text-align: center; margin-top: 1.4rem; font-size: 0.9rem; color: var(--text-secondary); }
.gs-platforms strong { color: var(--text); font-weight: 500; }

/* Global keyboard-focus ring (a11y) — visible focus on every interactive element */
a:focus-visible, button:focus-visible, summary:focus-visible, select:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 3px; }

/* Subtle card hover (color only — never geometry) */
.cell { transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out); }
.cell:hover { border-color: var(--accent-border); }

/* Print: drop the chrome and decoration, keep the words */
@media print {
  .site-header, .site-footer, .to-top, .scroll-progress, .nav, canvas, .hero-visual, .phone-stage, .netpanel, .skip-link { display: none !important; }
  body, [data-theme="dark"] { background: #fff !important; color: #000 !important; }
  .section, .band, .cta-band, .hero { padding: 1rem 0 !important; }
  a { color: #000 !important; text-decoration: underline; }
  .eyebrow { color: #555 !important; }
}

/* ── Real app screenshots (rendered from the shipping SwiftUI code) ───────── */
.app-window { margin: 0; border: 1px solid rgba(255,255,255,0.14); border-radius: var(--r-xl); background: #0B0B10; overflow: hidden; box-shadow: 0 40px 80px rgba(10,37,64,0.42), 0 12px 28px rgba(10,37,64,0.28); }
.app-window-bar { display: flex; align-items: center; gap: 6px; padding: 0.6rem 0.9rem; border-bottom: 1px solid rgba(255,255,255,0.08); background: #16161D; font-family: var(--font-mono); font-size: 0.72rem; color: #8FE8C4; }
.app-window-title { margin-left: 0.5rem; }
.wdot { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,0.16); }
.wdot:first-child { background: #FF5F57; } .wdot:nth-child(2) { background: #FEBC2E; } .wdot:nth-child(3) { background: #28C840; }
.app-window img { display: block; width: 100%; height: auto; }
.app-window-caption { padding: 0.55rem 0.9rem; font-size: 0.78rem; color: var(--text-muted, #89B3D7); border-top: 1px solid rgba(255,255,255,0.08); background: #101017; }
.app-window-tall { max-width: 420px; margin-inline: auto; }
.section-sub { max-width: 560px; margin: 0.6rem auto 0; color: var(--text-muted, #89B3D7); }
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; align-items: start; margin-top: 2rem; }
.shot { margin: 0; border: 1px solid rgba(255,255,255,0.12); border-radius: var(--r-xl); overflow: hidden; background: #0B0B10; }
.shot img { display: block; width: 100%; height: auto; }
.shot figcaption { padding: 0.7rem 0.95rem; font-size: 0.84rem; color: var(--text-muted, #89B3D7); border-top: 1px solid rgba(255,255,255,0.08); }
@media (max-width: 880px) { .shots { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; } }
/* The frames stay dark in both site themes - they hold a dark-UI screenshot. */