/* ============================================================================
   OD Link — site styles
   Aesthetic: "studio instrument" — dark slate canvas, steel-blue accent, an
   audio-waveform motif as the brand's heartbeat. Display: Bricolage Grotesque;
   body: Hanken Grotesk; technical readouts: JetBrains Mono. Mobile-first.
   ========================================================================== */

/* ----- tokens ------------------------------------------------------------- */
:root {
  --bg: #16181d;            /* canvas — sampled from the product wallpaper      */
  --bg-2: #1a1d24;          /* lifted panels                                    */
  --bg-3: #1f232c;          /* hover / inset                                    */
  --ink: #eef1f6;           /* primary text                                     */
  --muted: #9aa3b3;         /* secondary text                                   */
  --faint: #6c7484;         /* tertiary / labels                               */

  --accent: #5d7fb4;        /* steel blue — the brand accent                    */
  --accent-bright: #87a9dc;
  --accent-deep: #46699c;
  --flag-blue: #0057b7;     /* UA — used sparingly                             */
  --flag-yellow: #ffd400;

  --line: rgba(255, 255, 255, 0.09);
  --line-soft: rgba(255, 255, 255, 0.055);
  --card: rgba(255, 255, 255, 0.022);
  --glass: rgba(20, 23, 29, 0.72);

  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --r-xl: 32px;

  --shadow: 0 30px 80px -42px rgba(0, 0, 0, 0.85);
  --shadow-card: 0 18px 50px -34px rgba(0, 0, 0, 0.8);
  --glow: 0 0 0 1px rgba(93, 127, 180, 0.18), 0 22px 60px -30px rgba(93, 127, 180, 0.5);

  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --body: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --maxw: 1160px;
  --gut: clamp(1.1rem, 4vw, 2.2rem);
}

/* ----- reset / base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* the [hidden] attr must win over component display rules (e.g. .mobile-nav,
   .lightbox set their own display) — otherwise JS toggling el.hidden is a no-op */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
html { font-size: clamp(16px, 0.5vw + 15px, 18px); }

body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  position: relative;
}
/* fine grain overlay — kills the flat "AI gradient" look */
body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
main { position: relative; z-index: 1; }

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: 50%; top: -100px; transform: translateX(-50%);
  background: var(--accent); color: #fff; padding: 0.6rem 1rem; border-radius: 0 0 var(--r-sm) var(--r-sm);
  z-index: 100; transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 0; }

/* ----- typography --------------------------------------------------------- */
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; }
.eyebrow {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.28em; color: var(--accent-bright); display: inline-block; margin-bottom: 1.1rem;
}
.eyebrow::before { content: "// "; color: var(--faint); }

/* ----- layout helpers ----------------------------------------------------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: clamp(3.6rem, 9vw, 7rem); position: relative; }
.section-head { max-width: 40rem; margin-bottom: clamp(2rem, 5vw, 3.4rem); }
.section-head h2 { font-size: clamp(1.8rem, 4.4vw, 3rem); }
.section-head p { color: var(--muted); margin-top: 0.9rem; font-size: 1.05rem; }
.divider-wave { height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); }

/* ----- buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--body); font-weight: 600; font-size: 0.98rem; line-height: 1;
  padding: 0.92rem 1.5rem; border-radius: 999px; white-space: nowrap;
  transition: transform 0.16s var(--ease), background 0.25s var(--ease),
    border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
  border: 1px solid transparent;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-sm { padding: 0.6rem 1.05rem; font-size: 0.9rem; }
.btn-primary {
  background: linear-gradient(180deg, var(--accent-bright), var(--accent));
  color: #0c1119; border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 14px 34px -18px rgba(93, 127, 180, 0.75);
}
.btn-primary:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 18px 44px -16px rgba(93, 127, 180, 0.95); transform: translateY(-2px); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: rgba(255, 255, 255, 0.02); }
.btn-ghost:hover { border-color: var(--accent); background: rgba(93, 127, 180, 0.08); transform: translateY(-2px); }
.btn-arrow { transition: transform 0.25s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(3px); }

/* ----- header ------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: linear-gradient(180deg, rgba(22, 24, 29, 0.9), rgba(22, 24, 29, 0.6));
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--line-soft);
}
/* Mobile/narrow: drop the sticky backdrop-filter — re-sampling the blurred
   backdrop every scroll frame causes flicker and janky scrolling on many
   browsers. A near-opaque header reads the same and scrolls smoothly. */
@media (max-width: 900px) {
  .site-header {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(20, 22, 27, 0.96);
  }
}
.header-inner { display: flex; align-items: center; gap: 1rem; height: 4.2rem; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; }
.brand-mark { border-radius: 8px; box-shadow: 0 6px 18px -8px rgba(0, 87, 183, 0.55); }
.brand-wm { font-family: var(--display); font-weight: 600; font-size: 1.22rem; letter-spacing: -0.01em; color: var(--accent); }
.brand-wm b { color: var(--ink); font-weight: 800; }
.site-nav { display: none; margin-left: auto; gap: 1.7rem; }
.site-nav a { color: var(--muted); font-size: 0.96rem; font-weight: 500; transition: color 0.2s var(--ease); position: relative; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 0.7rem; }
.header-actions .btn-primary { display: none; }

.nav-toggle { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: var(--r-sm); display: grid; place-content: center; gap: 4px; }
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.25s var(--ease), opacity 0.2s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.6rem var(--gut) 1.4rem; border-bottom: 1px solid var(--line-soft); background: var(--bg-2); }
.mobile-nav a { padding: 0.85rem 0.4rem; color: var(--muted); font-weight: 500; border-bottom: 1px solid var(--line-soft); }
.mobile-nav a:last-child { border: none; margin-top: 0.7rem; justify-content: center; }
.mobile-nav a.btn { color: #0c1119; }
body.nav-open { overflow: hidden; }

/* ----- hero --------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(3rem, 9vw, 6.5rem) clamp(2.5rem, 7vw, 5rem); }
.hero-bloom {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 50% 30%, rgba(93, 127, 180, 0.22), transparent 70%),
    radial-gradient(40% 40% at 80% 0%, rgba(0, 87, 183, 0.12), transparent 70%);
}
.hero-inner { position: relative; z-index: 1; text-align: center; max-width: 52rem; margin-inline: auto; }
.hero .eyebrow { margin-bottom: 1.4rem; }
.hero h1 { font-size: clamp(2.3rem, 6.6vw, 4.2rem); font-weight: 800; }
.hero h1 .accent { color: var(--accent); display: block; white-space: nowrap; transform: translateX(-0.5em); }
@media (max-width: 600px) { .hero h1 .accent { white-space: normal; transform: none; } }
.hero-sub { color: var(--muted); font-size: clamp(1.05rem, 2.4vw, 1.3rem); max-width: 38rem; margin: 1.5rem auto 0; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; margin-top: 2.2rem; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; justify-content: center; margin-top: 2.4rem; color: var(--faint); font-size: 0.86rem; }
.hero-trust li { list-style: none; display: inline-flex; align-items: center; gap: 0.45rem; }
.hero-trust li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(93, 127, 180, 0.18); }

/* waveform motif ----------------------------------------------------------- */
.wave { display: flex; align-items: center; justify-content: center; gap: clamp(3px, 0.9vw, 6px); height: clamp(90px, 18vw, 168px); margin: clamp(2.4rem, 6vw, 4rem) auto 0; max-width: 46rem; }
.wave .bar {
  flex: 1 1 0; max-width: 10px; border-radius: 999px;
  height: var(--h, 40%);
  background: linear-gradient(180deg, var(--accent-bright), var(--accent) 70%, var(--accent-deep));
  transform-origin: center; transform: scaleY(0.45);
  box-shadow: 0 0 12px -2px rgba(93, 127, 180, 0.5);
  animation: wave 1.5s var(--ease) infinite alternate;
  animation-delay: calc(var(--i) * -0.06s);
}
@keyframes wave { from { transform: scaleY(0.32); opacity: 0.65; } to { transform: scaleY(1); opacity: 1; } }

/* ----- marquee ------------------------------------------------------------ */
.marquee { border-block: 1px solid var(--line-soft); background: var(--bg-2); overflow: hidden; padding-block: 0.95rem; margin-top: 3rem; }
.marquee-track { display: inline-flex; gap: 0; white-space: nowrap; animation: marquee 52s linear infinite; will-change: transform; backface-visibility: hidden; transform: translateZ(0); }
.marquee-track span { font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.12em; color: var(--muted); text-transform: uppercase; }
@keyframes marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* ----- intro band --------------------------------------------------------- */
.intro h2 { font-size: clamp(1.7rem, 4.2vw, 2.7rem); max-width: 24ch; }
.intro p { color: var(--muted); font-size: 1.1rem; max-width: 50ch; margin-top: 1.1rem; }

/* ----- feature grid ------------------------------------------------------- */
.feature-grid { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
.feature-card {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.2rem); transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), background 0.3s var(--ease);
}
.feature-card:hover { border-color: rgba(93, 127, 180, 0.4); transform: translateY(-4px); background: rgba(255, 255, 255, 0.03); }
.feature-icon { width: 46px; height: 46px; border-radius: 13px; display: grid; place-content: center; margin-bottom: 1.2rem;
  background: linear-gradient(160deg, rgba(93, 127, 180, 0.25), rgba(93, 127, 180, 0.05)); border: 1px solid rgba(93, 127, 180, 0.3); }
.feature-icon svg { width: 22px; height: 22px; stroke: var(--accent-bright); }
.feature-card h3 { font-size: 1.3rem; }
.feature-card .summary { color: var(--muted); margin-top: 0.5rem; margin-bottom: 1.1rem; min-height: 3.1em; }
.feature-list { list-style: none; display: grid; gap: 0.6rem; }
.feature-list li { position: relative; padding-left: 1.5rem; color: var(--ink); font-size: 0.95rem; }
.feature-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; border-radius: 2px;
  background: var(--accent); transform: rotate(45deg); }

/* ----- how it works ------------------------------------------------------- */
.steps { display: grid; gap: 1.1rem; grid-template-columns: 1fr; counter-reset: step; }
.step { display: flex; gap: 1.2rem; padding: 1.5rem; border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: var(--card); }
.step .n { font-family: var(--mono); font-size: 0.95rem; color: var(--accent-bright); font-weight: 500; padding-top: 0.2rem; }
.step h3 { font-size: 1.2rem; }
.step p { color: var(--muted); margin-top: 0.4rem; font-size: 0.98rem; }

/* ----- pricing ------------------------------------------------------------ */
.pricing-toggle { display: inline-flex; gap: 0.25rem; padding: 0.3rem; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-2); margin-bottom: 2.4rem; }
.pricing-toggle button { padding: 0.5rem 1.2rem; border-radius: 999px; font-size: 0.9rem; font-weight: 600; color: var(--muted); transition: color 0.2s var(--ease), background 0.3s var(--ease); }
.pricing-toggle button.is-active { color: #0c1119; background: linear-gradient(180deg, var(--accent-bright), var(--accent)); }
.price-grid { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
.price-card {
  position: relative; display: flex; flex-direction: column; background: var(--card);
  border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 1.7rem 1.5rem;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.price-card:hover { transform: translateY(-4px); border-color: rgba(93, 127, 180, 0.35); }
.price-card.featured { border-color: rgba(93, 127, 180, 0.55); box-shadow: var(--glow); background: linear-gradient(180deg, rgba(93, 127, 180, 0.08), rgba(93, 127, 180, 0.015)); }
.price-badge { position: absolute; top: -0.7rem; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: #0c1119; background: linear-gradient(180deg, var(--accent-bright), var(--accent)); padding: 0.32rem 0.8rem; border-radius: 999px; white-space: nowrap; }
.price-card h3 { font-size: 1.4rem; }
.price-card .tagline { color: var(--faint); font-size: 0.88rem; margin-top: 0.2rem; }
.price-amount { font-family: var(--display); font-weight: 800; font-size: 2.6rem; letter-spacing: -0.03em; margin-top: 1.1rem; line-height: 1; }
.price-amount .per { font-family: var(--body); font-size: 0.85rem; font-weight: 500; color: var(--faint); letter-spacing: 0; }
.price-chan { font-family: var(--mono); font-size: 0.82rem; color: var(--accent-bright); margin-top: 0.7rem; white-space: nowrap; }
.price-features { list-style: none; display: grid; gap: 0.6rem; margin: 1.3rem 0; flex: 1; }
.price-features li { position: relative; padding-left: 1.5rem; color: var(--muted); font-size: 0.9rem; }
.price-features li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.price-card .btn { width: 100%; }
.pricing-note { margin-top: 1.6rem; color: var(--faint); font-size: 0.85rem; text-align: center; }

/* ----- why grid ----------------------------------------------------------- */
.why-grid { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
.why-item { padding: 1.5rem; border: 1px solid var(--line-soft); border-radius: var(--r); background: var(--card); }
.why-item h3 { font-size: 1.15rem; color: var(--ink); }
.why-item p { color: var(--muted); margin-top: 0.5rem; font-size: 0.96rem; }

/* ----- demo callout ------------------------------------------------------- */
.demo-band { position: relative; overflow: hidden; }
.demo-card { position: relative; border: 1px solid rgba(93, 127, 180, 0.3); border-radius: var(--r-xl); padding: clamp(2rem, 5vw, 3.4rem);
  background: radial-gradient(120% 140% at 0% 0%, rgba(93, 127, 180, 0.14), transparent 60%), var(--bg-2); text-align: center; }
.demo-card h2 { font-size: clamp(1.8rem, 4.5vw, 2.8rem); }
.demo-card p { color: var(--muted); max-width: 46ch; margin: 1rem auto 1.8rem; }

/* ----- faq teaser --------------------------------------------------------- */
.faq-list { display: grid; gap: 0.8rem; }
.faq-item { border: 1px solid var(--line-soft); border-radius: var(--r); padding: 1.3rem 1.5rem; background: var(--card); }
.faq-item h3 { font-family: var(--body); font-weight: 600; font-size: 1.05rem; color: var(--ink); }
.faq-item p { color: var(--muted); margin-top: 0.5rem; font-size: 0.95rem; }

/* ----- final cta ---------------------------------------------------------- */
.final { text-align: center; }
.final h2 { font-size: clamp(2rem, 5vw, 3.2rem); }
.final p { color: var(--muted); margin: 1rem auto 2rem; max-width: 40ch; }
.final-cta { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; }

/* ----- footer ------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--line-soft); background: var(--bg-2); padding-top: clamp(1.2rem, 2.6vw, 1.8rem); margin-top: 1rem; position: relative; z-index: 1; }
.footer-inner { display: grid; gap: 2.4rem; grid-template-columns: 1fr; }
.footer-tag { color: var(--faint); font-size: 0.9rem; margin-top: 1rem; line-height: 1.5; }
.footer-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.8rem; }
.footer-col h3 { font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--ink); margin-bottom: 0.9rem; font-weight: 500; }
.footer-col a { display: block; color: var(--muted); font-size: 0.92rem; padding: 0.3rem 0; transition: color 0.2s var(--ease); }
.footer-col a:hover { color: var(--ink); }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem; color: var(--faint); font-size: 0.84rem; padding-block: 0.85rem; margin-top: 1.1rem; border-top: 1px solid var(--line-soft); }

/* ----- load reveal -------------------------------------------------------- */
.reveal { animation: reveal 0.8s var(--ease) both; }
.reveal-2 { animation-delay: 0.08s; }
.reveal-3 { animation-delay: 0.16s; }
.reveal-4 { animation-delay: 0.24s; }
@keyframes reveal { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

/* ----- responsive --------------------------------------------------------- */
@media (min-width: 720px) {
  .feature-grid { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .price-grid { grid-template-columns: repeat(2, 1fr); }
  .faq-list { grid-template-columns: 1fr 1fr; }
  .footer-inner { grid-template-columns: 1.4fr 2fr; }
  .footer-cols { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1000px) {
  .site-nav { display: inline-flex; }
  .header-actions .btn-primary { display: inline-flex; }
  .nav-toggle { display: none; }
  .site-nav + .header-actions { margin-left: 0; }
  .mobile-nav { display: none !important; }
  .price-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ----- reduced motion ----------------------------------------------------- */
@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; }
  .wave .bar { transform: scaleY(var(--rest, 0.8)); opacity: 1; }
  .marquee-track { animation: none; }
}

/* ============================================================================
   Sub-pages: shared page header, long-form prose, doc TOC, FAQ, download
   ========================================================================== */

/* ----- page header (download / manual / faq / terms) ---------------------- */
.page-head { position: relative; overflow: hidden; padding-block: clamp(2.6rem, 7vw, 4.4rem) clamp(1.4rem, 4vw, 2.4rem); }
.page-head .container { position: relative; z-index: 1; }
.page-head h1 { font-size: clamp(2.1rem, 5.5vw, 3.4rem); }
.page-head .lead { color: var(--muted); margin-top: 0.9rem; max-width: 48ch; font-size: 1.08rem; }
/* Doc-page bloom: anchored to the title CONTAINER so it tracks the left title
   block at every viewport, but stretched past the container's left edge (and
   taller than it) so the glow bleeds softly into the header / off-screen with
   NO hard cut. The gradient fades to transparent before the box edges. Text
   sits above via z-index. */
.page-head .hero-bloom {
  top: var(--bloom-top, 46%); left: 0; bottom: auto; right: auto;
  width: var(--bloom-w, 162%); height: var(--bloom-h, 218%);
  transform: translate(var(--bloom-tx, -38%), -50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(93, 127, 180, 0.20), transparent 64%);
}
.page-head h1, .page-head .lead { position: relative; z-index: 1; }

/* ----- doc layout (manual, terms): TOC sidebar + content column ----------- */
.doc-wrap { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: start; padding-bottom: clamp(3rem, 7vw, 5rem); }
.doc-toc { display: none; }
/* Sticky sidebar shown in full — no internal scrollbar — set off from the
   content by a divider. Compact so the whole outline fits the viewport. */
/* Sticky so it follows the page; full labels (no ellipsis); no internal scroll.
   The outline lists top-level sections only, so it fits the viewport height. */
.doc-toc-inner { position: sticky; top: 5.4rem; font-size: 0.86rem; padding-right: 1.4rem; }
.doc-toc-title { font-family: var(--mono); font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink); margin-bottom: 0.8rem; }
.doc-toc nav { display: grid; gap: 0.12rem; }
.doc-toc a { display: block; color: var(--muted); padding: 0.18rem 0 0.18rem 0.8rem; border-left: 2px solid var(--line-soft); line-height: 1.3; transition: color 0.2s var(--ease), border-color 0.2s var(--ease); }
.doc-toc a:hover { color: var(--ink); }
.doc-toc a.is-active { color: var(--accent-bright); border-left-color: var(--accent); }
.doc-toc a.lvl-3 { padding-left: 1.6rem; font-size: 0.78rem; }
@media (min-width: 980px) {
  .doc-wrap.has-toc { grid-template-columns: 260px minmax(0, 1fr); gap: 3.2rem; }
  /* stretch the TOC cell to the full content height so the divider is one clean
     line top-to-bottom, not a short stub ending where the outline does */
  .doc-toc { display: block; align-self: stretch; border-right: 1px solid var(--line-soft); }
}

/* ----- prose -------------------------------------------------------------- */
.prose { max-width: 74ch; }
.prose > * + * { margin-top: 1.1rem; }
.prose h2 { font-size: clamp(1.45rem, 3.2vw, 1.95rem); margin-top: 2.8rem; padding-top: 1.8rem; border-top: 1px solid var(--line-soft); scroll-margin-top: 5.4rem; }
.prose h2::after { content: ""; display: block; width: 2.6rem; height: 2px; margin-top: 0.55rem; border-radius: 2px; background: linear-gradient(90deg, var(--accent-bright), transparent); }
.prose h2:first-child { border-top: none; margin-top: 0; padding-top: 0; }
.prose h3 { font-size: 1.2rem; margin-top: 1.9rem; color: var(--ink); scroll-margin-top: 5.4rem; }
.prose h2 a, .prose h3 a { color: inherit; text-decoration: none; }
.prose p, .prose li { color: var(--muted); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--accent-bright); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(135, 169, 220, 0.4); }
.prose a:hover { text-decoration-color: var(--accent-bright); }
.prose kbd { font-family: var(--mono); font-size: 0.82em; line-height: 1; white-space: nowrap; margin: 0 0.25em; padding: 0.14em 0.45em; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; background: rgba(255, 255, 255, 0.045); color: var(--ink); }
.prose ul { list-style: none; padding-left: 0; display: grid; gap: 0.55rem; }
.prose ul li { position: relative; padding-left: 1.5rem; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); transform: rotate(45deg); }
.prose ol { list-style: none; padding-left: 0; counter-reset: li; display: grid; gap: 0.6rem; }
.prose ol > li { position: relative; padding-left: 2.2rem; counter-increment: li; }
.prose ol > li::before { content: counter(li); position: absolute; left: 0; top: 0.05em; font-family: var(--mono); font-size: 0.78rem; color: var(--accent-bright); background: rgba(93, 127, 180, 0.12); border: 1px solid rgba(93, 127, 180, 0.32); width: 1.5rem; height: 1.5rem; border-radius: 7px; display: grid; place-content: center; }
.prose code { font-family: var(--mono); font-size: 0.86em; background: rgba(255, 255, 255, 0.06); padding: 0.12em 0.4em; border-radius: 5px; color: var(--accent-bright); }
.prose pre { background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: var(--r); padding: 1rem 1.2rem; overflow-x: auto; }
.prose pre code { background: none; padding: 0; color: var(--ink); }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.92rem; margin-block: 1.2rem; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.prose thead th { font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint); white-space: nowrap; }
.prose blockquote { border-left: 3px solid var(--accent); background: rgba(93, 127, 180, 0.08); padding: 1rem 1.25rem; border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.prose blockquote p { color: var(--ink); margin: 0; }
.prose blockquote strong:first-child { color: var(--accent-bright); }
.prose hr { border: none; border-top: 1px solid var(--line-soft); margin-block: 2.2rem; }
.prose kbd { font-family: var(--mono); font-size: 0.82em; background: var(--bg-3); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 0.1em 0.45em; color: var(--ink); }
.back-to-top { display: inline-block; margin-top: 2.4rem; font-family: var(--mono); font-size: 0.8rem; color: var(--muted); }
.back-to-top:hover { color: var(--accent-bright); }

/* ----- FAQ accordion ------------------------------------------------------ */
.faq-group { margin-bottom: clamp(2rem, 5vw, 3rem); }
.faq-group > h2 { font-size: clamp(1.3rem, 3vw, 1.7rem); margin-bottom: 1rem; }
.faq-group > h2::after { content: ""; display: block; width: 2.6rem; height: 2px; margin-top: 0.55rem; border-radius: 2px; background: linear-gradient(90deg, var(--accent-bright), transparent); }
details.faq-q { border: 1px solid var(--line-soft); border-radius: var(--r); background: var(--card); margin-bottom: 0.7rem; transition: border-color 0.25s var(--ease); }
details.faq-q[open] { border-color: rgba(93, 127, 180, 0.35); }
details.faq-q summary { cursor: pointer; padding: 1.1rem 1.3rem; font-weight: 600; color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
details.faq-q summary::-webkit-details-marker { display: none; }
details.faq-q summary::after { content: "+"; font-family: var(--mono); color: var(--accent-bright); font-size: 1.25rem; line-height: 1; transition: transform 0.25s var(--ease); }
details.faq-q[open] summary::after { transform: rotate(45deg); }
details.faq-q .faq-a { padding: 0 1.3rem 1.2rem; color: var(--muted); }
details.faq-q .faq-a p + p { margin-top: 0.7rem; }

/* ----- download page ------------------------------------------------------ */
.dl-card { position: relative; overflow: hidden; text-align: center; border: 1px solid rgba(93, 127, 180, 0.32); border-radius: var(--r-xl); padding: clamp(2rem, 5vw, 3.2rem); background: radial-gradient(120% 130% at 50% 0%, rgba(93, 127, 180, 0.14), transparent 60%), var(--bg-2); }
.dl-card h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); }
.dl-card p { color: var(--muted); max-width: 44ch; margin: 0.9rem auto 1.6rem; }
.dl-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; justify-content: center; font-family: var(--mono); font-size: 0.8rem; color: var(--faint); margin-top: 1.4rem; }
.dl-meta b { color: var(--accent-bright); font-weight: 500; }
.dl-cols { display: grid; gap: 1.1rem; grid-template-columns: 1fr; margin-top: 1.5rem; }
.dl-note { text-align: center; color: var(--faint); font-size: 0.85rem; margin-top: 1.6rem; }
@media (min-width: 760px) { .dl-cols { grid-template-columns: repeat(3, 1fr); } }
.dl-cols .feature-card { padding: clamp(2rem, 3.5vw, 2.8rem) clamp(1.6rem, 3vw, 2.1rem); }
.dl-cols .feature-card h3 { margin-bottom: 1.1rem; }
.dl-cols .feature-list { gap: 1rem; }

/* ============================================================================
   Product figures — screenshots, looping clips, annotated overlays
   ========================================================================== */
/* A lifted "mat" card lighter than the page, so the dark app window separates
   from the dark canvas and reads as a deliberate, framed exhibit. */
.shot {
  margin-block: clamp(1.8rem, 4vw, 2.6rem);
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--r-lg);
  box-shadow: none;
}
/* The screenshot shows in full — no border or overflow-clip on the image
   itself (those traced the macOS window's own rounded corner and read as a
   harsh "cut"); just a radius matching the window corner so the rectangular
   capture's dark corner bleed is trimmed. The mat (figure) is the frame. */
.shot > img,
.shot--clip video,
.shot__frame {
  display: block; width: 100%;
  border-radius: var(--r-sm);
  background: var(--bg);
}
/* Crop wrapper for the looping clip: overflow-clips a couple px off the left
   edge (a thin window-border artifact in the capture) and carries the soft
   glow. A box-shadow is NOT clipped by the element's own overflow, so the glow
   survives while the video's left sliver is trimmed. */
.shot--clip .shot__crop {
  display: block; line-height: 0;
  overflow: hidden;
  border-radius: var(--r-sm);
  box-shadow: 0 0 60px -6px rgba(135, 169, 220, 0.18);
}
.shot--clip .shot__crop video { width: calc(100% + 2px); margin: -1px 0 -1px -1px; }
.shot__frame { position: relative; line-height: 0; }
.shot__frame img { width: 100%; border-radius: inherit; }
.shot figcaption {
  margin-top: 0.9rem; color: var(--muted); text-align: center;
  font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.02em; line-height: 1.5;
}
/* figures fill the content column (none in the manual today — the only clip is
   on the landing; kept for when figures return) */
.prose .shot { max-width: none; }

/* click-to-enlarge affordance */
.shot.is-zoomable img, .shot.is-zoomable video { cursor: zoom-in; transition: filter 0.2s var(--ease); }
.shot.is-zoomable:hover img, .shot.is-zoomable:hover video { filter: brightness(1.05); }

/* annotation hotspots — a glowing accent box + a small label chip */
.shot__mark {
  position: absolute; border: 2px solid var(--accent-bright); border-radius: 8px;
  pointer-events: none; animation: shotpulse 2.4s var(--ease) infinite;
}
@keyframes shotpulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(135, 169, 220, 0.3), 0 0 14px -2px rgba(135, 169, 220, 0.5); }
  50%      { box-shadow: 0 0 0 2px rgba(135, 169, 220, 0.6), 0 0 22px 0 rgba(135, 169, 220, 0.85); }
}
.shot__tag {
  position: absolute; left: -2px; top: -1.6rem; white-space: nowrap;
  background: var(--glass); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid var(--line); color: var(--ink); box-shadow: var(--shadow-card);
  font-family: var(--mono); font-size: 0.7rem; line-height: 1.6;
  padding: 0.1rem 0.5rem; border-radius: 6px;
}

/* lightbox — click a screenshot to read it at full size */
.lightbox {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  padding: clamp(0.8rem, 3vw, 2.4rem); cursor: zoom-out; overflow: auto;
  background: rgba(8, 9, 12, 0.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  animation: lbfade 0.22s var(--ease);
}
.lightbox[hidden] { display: none; }
.lightbox:focus { outline: none; }
.lightbox img {
  max-width: 100%; max-height: 92vh; width: auto; height: auto; cursor: zoom-out;
  border-radius: var(--r-sm); box-shadow: var(--shadow);
}
.lightbox__hint {
  position: fixed; left: 50%; bottom: clamp(0.8rem, 2vw, 1.4rem); transform: translateX(-50%);
  pointer-events: none; font-family: var(--mono); font-size: 0.68rem; color: var(--muted);
  background: var(--glass); border: 1px solid var(--line); padding: 0.25rem 0.75rem; border-radius: 999px;
}
.lightbox__close {
  position: absolute; top: clamp(0.8rem, 2vw, 1.4rem); right: clamp(0.8rem, 2vw, 1.4rem);
  width: 44px; height: 44px; background: none; border: none;
  color: var(--ink); font-size: 1.6rem; line-height: 1; display: grid; place-content: center;
  cursor: pointer; transition: color 0.2s var(--ease);
}
.lightbox__close:hover { color: var(--accent-bright); }
.lightbox__close:focus { outline: none; }
.lightbox__close:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; border-radius: 50%; }
@keyframes lbfade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .shot__mark { animation: none; box-shadow: 0 0 0 2px rgba(135, 169, 220, 0.6); }
  .lightbox { animation: none; }
}