/* ==========================================================================
   IndicaView — landing page
   Palette lifted from the running app's own dark theme (app/theme.css), so the
   marketing page and the product are literally the same colour system.
   Accent #19f2f4 / canvas #101828 / surface #182230 / ink #f2f4f7.
   The inverted CTA section uses the app's LIGHT theme tokens instead, so it
   previews the app's light mode.
   ========================================================================== */

:root {
  --ink-900: #0d1220;   /* page base, one step below the app canvas */
  --ink-800: #101828;   /* app canvas (--ui-canvas) */
  --ink-700: #182230;   /* app surface (--ui-surface) */
  --line:    #293a52;
  --line-soft:#1e2c40;
  --text:    #f2f4f7;   /* app ink */
  --text-dim:#b8c3d3;   /* app secondary */
  --text-faint:#98a2b3; /* app muted */
  --accent:   #19f2f4;  /* app accent / focus ring */
  --accent-hi:#19f2f4;  /* lifted for text on dark, AA at body sizes */
  --accent-dim:#00d8dc;
  --accent-ink:#10292E;
  --accent-border:#19F2F4;
  --focus:#19F2F4;
  --positive: #75e0a7;
  --negative: #fda29b;
  --light-bg:   #f9fafb;  /* app light theme */
  --light-ink:  #101828;
  --light-muted:#475467;
  --light-accent:#006B70;
  --light-neg:  #b42318;

  /* Always-inverted section. Dark theme inverts to a light block, light theme
     inverts back to a dark block, so the CTA always reads as the odd one out. */
  --inv-bg:    #f9fafb;
  --inv-ink:   #101828;
  --inv-muted: #475467;
  --inv-accent:#006B70;
  --inv-line:  rgba(16, 24, 40, 0.12);
  --nav-bg:    rgba(13, 18, 32, 0.88);

  --font-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Menlo, monospace;

  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section: clamp(5rem, 11vw, 9.5rem);
  --shell: 1280px;
}

/* ============================ LIGHT THEME ============================
   The same tokens the app itself uses in light mode, so the landing page
   and the product's light UI are one palette. Components need no separate
   light rules: they read the semantic tokens above and follow along.     */

[data-theme="light"] {
  color-scheme: light;

  --ink-900: #f9fafb;   /* --ui-canvas */
  --ink-800: #ffffff;   /* --ui-surface */
  --ink-700: #f2f4f7;   /* --ui-hover — frame bezel */
  --line:    #d0d5dd;   /* --ui-border */
  --line-soft:#e4e7ec;
  --text:    #101828;   /* --ui-ink */
  --text-dim:#475467;   /* --ui-muted */
  --text-faint:#667085;

  --accent:    #19F2F4; /* shared bright action fill */
  --accent-hi: #006b70; /* DARKER on a light page; this token is always
                            "accent for text on the page background" */
  --accent-dim:#00D8DC; /* hover, pressed */
  --accent-border:#00777D;
  --focus:#00777D;

  --inv-bg:     #101828; /* the CTA flips back to dark */
  --inv-ink:    #f2f4f7;
  --inv-muted:  #b8c3d3;
  --inv-accent: #19f2f4;
  --inv-line:   rgba(242, 244, 247, 0.16);
  --nav-bg:     rgba(249, 250, 251, 0.9);

  --light-bg:   #101828;
  --light-ink:  #f2f4f7;
  --light-muted:#b8c3d3;
  --light-accent:#19f2f4;
  --light-neg:  #fda29b;
}

/* The terminal block stays dark in both themes — that is what a terminal is. */
.code { --accent:#19F2F4; --accent-hi:#19F2F4; }
[data-theme="light"] .code { background: #0d1220; border-color: #344054; }
[data-theme="light"] .code code,
[data-theme="light"] .code .c { color: #d6d9de; }
[data-theme="light"] .code__bar { color: #98a2b3; border-bottom-color: #1e2c40; }

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

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

body {
  margin: 0;
  background: var(--ink-900);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* belt-and-braces against any wide child */
}

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

a { color: inherit; }

code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  color: var(--accent-hi);
  background: rgba(25, 242, 244, 0.08);
  border: 1px solid var(--line-soft);
  padding: 0.05em 0.38em;
  border-radius: 2px;
  white-space: nowrap;
}

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: var(--accent-ink);  /* dark ink on the approved bright turquoise */
  font: 600 0.8125rem/1 var(--font-mono);
  padding: 0.85rem 1.1rem;
  text-decoration: none;
}
.skip:focus { left: 0; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ============================== NAV ============================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 48px;
  background: var(--nav-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.nav__in {
  height: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav__mark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font: 500 0.8125rem/1 var(--font-mono);
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--text);
  margin-right: auto;
  white-space: nowrap;
}

.brand-logo { display:block; width:156px; height:auto; object-fit:contain; }
.brand-logo-light { display:none; }
html[data-theme="light"] .brand-logo-dark { display:none; }
html[data-theme="light"] .brand-logo-light { display:block; }
.foot__brand { flex:0 0 100%; display:inline-flex; width:fit-content; margin-bottom:12px; }
@media(max-width:600px) { .nav__mark .brand-logo { width:128px; } }

.nav__links { display: flex; gap: 1.4rem; }

.nav__links a {
  font: 400 0.8125rem/1 var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--text-dim);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.nav__links a:hover { color: var(--accent-hi); border-bottom-color: var(--focus); }

/* ============================= BUTTONS ============================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 1.35rem;
  background: var(--accent);
  color: var(--accent-ink);  /* dark ink on the approved bright turquoise */
  font: 600 0.8125rem/1 var(--font-mono);
  letter-spacing: 0.06em;
  text-decoration: none;
  border: 1px solid var(--accent-border);
  border-radius: 2px;
  transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.btn:hover { background: var(--accent-dim); border-color: var(--accent-border); transform: translateY(-1px); }

.btn--sm { height: 32px; padding: 0 0.9rem; font-size: 0.75rem; }

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line);
}
.btn--ghost:hover {
  background: var(--ink-800);
  border-color: var(--accent);
  color: var(--accent-hi);
}

/* ============================ THEME TOGGLE ============================ */

.theme-toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  color: var(--text-dim);
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: 2px;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.theme-toggle:hover { color: var(--accent-hi); border-color: var(--focus); }
.theme-toggle svg { width: 15px; height: 15px; }

/* Show the icon for the theme you would switch TO. */
.theme-toggle .i-sun { display: none; }
[data-theme="light"] .theme-toggle .i-sun { display: block; }
[data-theme="light"] .theme-toggle .i-moon { display: none; }

.nav__actions { display: flex; align-items: center; gap: 0.5rem; margin-left: 1rem; }

/* ============================== HERO ============================== */

.hero {
  position: relative;
  padding-top: clamp(3rem, 5.5vw, 5rem);
  padding-bottom: var(--section);
  /* faint warm vignette — never a blue gradient */
  background:
    radial-gradient(120% 70% at 18% -10%, rgba(25, 242, 244, 0.09), transparent 62%),
    var(--ink-900);
}

.eyebrow {
  font: 500 0.6875rem/1 var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-hi);
  margin: 0 0 1.6rem;
}
.eyebrow .dot { color: var(--accent-dim); padding-inline: 0.35em; }

.hero__h1 {
  /* Sized so the three <br> segments each hold one line AND the top of the
     product screenshot is still above the fold. At the previous 7rem / 15ch the
     headline alone measured 1000x532 and the hero frame began at 1122px, so a
     first-time visitor saw a wall of type and no product at all. 76px is still
     oversized — that is the instrument-panel register — it just leaves room for
     the thing the page is selling. */
  font-size: clamp(2.25rem, 5vw, 4.25rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin: 0;
  max-width: 24ch;
}
.hero__h1 .accent { color: var(--accent-hi); }

.lede {
  margin: 1.9rem 0 0;
  max-width: 54ch;
  font-size: clamp(1rem, 1.35vw, 1.1875rem);
  color: var(--text-dim);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2.25rem;
}

/* Tertiary escape hatch. Accounts are optional and the page says so, so the
   "just use it" route has to be one click away from the signup button rather
   than buried in the FAQ. */
.hero__alt {
  font: 500 0.78125rem/1 var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--text-faint);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.hero__alt:hover { color: var(--accent-hi); border-bottom-color: var(--accent); }

/* Keeps a short proper noun from breaking across a line at its own hyphen —
   "NSGA-" / "II" on two lines reads as a typo on a page selling rigour. */
.nb { white-space: nowrap; }

/* =========================== SHOT FRAMES =========================== */

.shot {
  position: relative;
  margin: 0;
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;           /* nothing may escape or overlap */
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1), border-color 0.25s ease;
}

/* accent-tinted top edge — ties the product shot to the page chrome */
.shot__edge {
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  z-index: 2;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent) 46%, rgba(25, 242, 244, 0.06));
}

.shot img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9; /* explicit, so lazy images reserve space and never shift */
}

/* --- click-to-enlarge ------------------------------------------------------
   The whole frame is the link target. Without JS the href opens the full PNG
   directly, so this is an upgrade rather than a dependency.                 */

.shot__zoom {
  display: block;
  position: relative;
  cursor: zoom-in;
}

.shot__hint {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  color: var(--text);
  background: rgba(13, 18, 32, 0.78);
  border: 1px solid var(--line);
  border-radius: 2px;
  opacity: 0;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
.shot__zoom:hover .shot__hint,
.shot__zoom:focus-visible .shot__hint { opacity: 1; border-color: var(--accent); }
.shot__zoom:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* --- lightbox -------------------------------------------------------------- */

/* The lightbox is a modal over everything, so it stays dark in both themes —
   forcing its own tokens rather than inheriting the page's. */
.lightbox {
  --ink-700: #182230;
  --line: #344054;
  --line-soft: #1e2c40;
  --text: #f2f4f7;
  --text-dim: #b8c3d3;
  --accent: #19f2f4;
  --accent-hi: #19f2f4;
  --ink-800: #101828;
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
  color-scheme: dark;
}
.lightbox::backdrop { background: rgba(5, 9, 18, 0.94); }

.lightbox__inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding: clamp(1rem, 3vw, 2.5rem);
}

.lightbox__img {
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  background: var(--ink-700);
  border: 1px solid var(--line);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
}

.lightbox__cap {
  margin: 0;
  max-width: 80ch;
  text-align: center;
  font: 400 0.75rem/1.6 var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--text-dim);
}

.lightbox__close-form { position: absolute; top: 14px; right: 14px; margin: 0; }
.lightbox__close {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  color: var(--text);
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: 2px;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.lightbox__close:hover { border-color: var(--accent); color: var(--accent-hi); }

.shot__cap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: baseline;
  padding: 0.7rem 0.9rem;
  border-top: 1px solid var(--line-soft);
  font: 400 0.6875rem/1.5 var(--font-mono);
  letter-spacing: 0.03em;
  color: var(--text-faint);
  background: var(--ink-800);
}
.shot__cap b { color: var(--accent-hi); font-weight: 500; }
.shot__cap code {
  background: none;
  border: 0;
  padding: 0;
  color: var(--text-dim);
  font-size: 1em;
}

.shot:hover { transform: translateY(-4px); border-color: rgba(25, 242, 244, 0.55); }

/* hero shot: offset right + overlapping the type block's baseline */
.shot--hero {
  /* Was clamp(2.5rem, 6vw, 4.5rem). At 1440px that 72px gap pushed the product
     below the fold even after the headline was resized; 40px still reads as a
     deliberate offset rather than a continuation of the text block. */
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  margin-left: clamp(0rem, 8vw, 7rem);
}

/* ============================= FEATURES ============================= */

.feat { padding-block: var(--section); border-top: 1px solid var(--line-soft); }

.feat__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.feat__text { grid-column: 1 / span 5; }
.feat__grid > .shot { grid-column: 6 / span 7; }

.feat--flip .feat__text { grid-column: 8 / span 5; grid-row: 1; }
.feat--flip .feat__grid > .shot { grid-column: 1 / span 6; grid-row: 1; }

.index {
  font: 500 0.6875rem/1 var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-hi);
  margin: 0 0 1.15rem;
}

.feat h2, .cta h2 {
  font-size: clamp(1.9rem, 4.2vw, 3.25rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 1.3rem;
}

.feat p, .cta p { color: var(--text-dim); margin: 0 0 1.1rem; }
.feat p b, .cta p b { color: var(--text); font-weight: 600; }
.feat p em { color: var(--text); font-style: italic; }

.ticks { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.ticks li {
  position: relative;
  padding: 0.85rem 0 0.85rem 1.5rem;
  border-top: 1px solid var(--line-soft);
  color: var(--text-dim);
  font-size: 0.9375rem;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.42rem;
  width: 7px; height: 7px;
  background: var(--accent);
}
.ticks li b { color: var(--text); font-weight: 600; }
.ticks li em { color: var(--text); font-style: italic; }

.views { list-style: none; margin: 1.2rem 0; padding: 0; }
.views li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--text-dim);
  font-size: 0.9375rem;
}
.views li b {
  color: var(--text);
  font-weight: 600;
  display: inline-block;
  min-width: 15ch;
}

.note {
  font-size: 0.875rem !important;
  color: var(--text-faint) !important;
  border-left: 2px solid var(--accent-dim);
  padding-left: 0.95rem;
}

/* ============================== THEMES ============================== */

.themes {
  padding-block: var(--section);
  border-top: 1px solid var(--line-soft);
}

.themes__head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.themes h2 {
  font-size: clamp(1.9rem, 4.2vw, 3.25rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 1.1rem;
}
.themes__head > p:last-child { color: var(--text-dim); margin: 0; }

/* =========================== KEY TAKEAWAYS =========================== */

.take {
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: var(--ink-800);
}
.take__h {
  font: 500 0.6875rem/1 var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 1.4rem;
}
.take__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
.take__grid > div { background: var(--ink-800); padding: 0.95rem 1rem; }
.take__grid dt {
  font: 500 0.625rem/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-hi);
  margin-bottom: 0.45rem;
}
.take__grid dd {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-dim);
}

/* ============================== TABLES ============================== */

/* Tables carry `white-space: nowrap` row headers ("Simulated annealing" must not
   wrap), which forces a minimum width wider than a 390px viewport. Left bare,
   the table pushed the whole document 4px sideways. The wrapper is the hard
   bound: the table scrolls inside it and the page never overflows. */
.tbl-wrap {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.tbl {
  width: 100%;
  border-collapse: collapse;
  margin: 1.6rem 0 1.3rem;
  font-size: 0.875rem;
  border: 1px solid var(--line);
}
.tbl caption {
  caption-side: top;
  text-align: left;
  font: 500 0.6875rem/1.4 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding-bottom: 0.7rem;
}
.tbl th, .tbl td {
  text-align: left;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.tbl thead th {
  font: 500 0.625rem/1.3 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  border-bottom: 1px solid var(--line);
}
.tbl tbody th { color: var(--text); font-weight: 600; white-space: nowrap; }
.tbl td { color: var(--text-dim); }
.tbl tbody tr:last-child th, .tbl tbody tr:last-child td { border-bottom: 0; }

/* Two-column reference table (objective + sense). The full algorithm table has
   three prose columns and needs the breathing room; this one is a lookup, so it
   runs tighter and reads as a spec sheet rather than a second feature block. */
.tbl--compact { font-size: 0.8125rem; }
.tbl--compact th, .tbl--compact td { padding: 0.42rem 0.8rem; }
.tbl--compact td { font-family: var(--font-mono); font-size: 0.75rem; }

/* ================================ FAQ ================================ */

.faq { padding-block: var(--section); border-top: 1px solid var(--line-soft); }
.faq__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.faq__head { grid-column: 1 / span 4; position: sticky; top: 72px; }
.faq__list { grid-column: 6 / span 7; }

.faq__head h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 1.1rem;
}

.faq details {
  border-top: 1px solid var(--line-soft);
  padding: 0;
}
.faq details:last-child { border-bottom: 1px solid var(--line-soft); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.05rem 2rem 1.05rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  position: relative;
  transition: color 0.18s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-hi); }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0.3rem; top: 50%;
  transform: translateY(-50%);
  font: 400 1.25rem/1 var(--font-mono);
  color: var(--accent);
}
.faq details[open] summary::after { content: "\2212"; }
.faq details p {
  margin: 0 0 1.1rem;
  color: var(--text-dim);
  font-size: 0.9375rem;
  max-width: 68ch;
}

/* ============================ GROUNDING ============================ */

.ground {
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--ink-800);
}
.ground__in {
  display: flex;
  gap: 1.25rem;
  align-items: baseline;
  max-width: 92ch;
}
.ground__in p {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.9375rem;
}
.ground__tag {
  flex: none;
  font: 500 0.6875rem/1 var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-hi);
  border: 1px solid var(--accent-border);
  padding: 0.4rem 0.6rem;
}

/* =============================== CTA =============================== */
/* Always the inverted block: light in dark mode, dark in light mode, using
   whichever app palette the other one is not.                            */

.cta {
  --accent-border:var(--inv-accent);
  padding-block: var(--section);
  background: var(--inv-bg);
  color: var(--inv-ink);
}
.cta h2 { color: var(--inv-ink); }
.cta p { color: var(--inv-muted); }
.cta code {
  color: var(--inv-accent);
  background: rgba(25, 242, 244, 0.1);
  border-color: var(--inv-line);
}
.cta a:focus-visible { outline-color: var(--inv-accent); }

.cta__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.cta__text { grid-column: 1 / span 6; }
.cta__code { grid-column: 8 / span 5; }

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.75rem 0 0;
}

/* The CTA block is always the inverted theme, so its secondary button has to
   invert too — `.btn--ghost` reads --text/--line, which are the WRONG colours
   on the inverted background and would render as dark-on-light mush. */
.btn--inv {
  background: transparent;
  color: var(--inv-ink);
  border-color: var(--inv-line);
}
.btn--inv:hover {
  background: transparent;
  color: var(--inv-accent);
  border-color: var(--inv-accent);
}

.cta__sub {
  font: 500 0.6875rem/1 var(--font-mono) !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--inv-accent) !important;
  margin: 2.25rem 0 0.9rem !important;
}

.dont { list-style: none; margin: 0; padding: 0; }
.dont li {
  position: relative;
  padding: 0.7rem 0 0.7rem 1.4rem;
  border-top: 1px solid var(--inv-line);
  color: var(--inv-muted);
  font-size: 0.9375rem;
}
.dont li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.25rem;
  width: 7px; height: 7px;
  background: var(--light-neg);   /* --ui-negative, legible on either bg */
}

/* Pointer to the docs, in the inverted block — so it reads --inv-* tokens,
   not the page's. A serious product links its documentation; without this the
   26-page docs site had no path here from the marketing page. */
.cta__docs {
  margin: 1.75rem 0 0 !important;
  padding-top: 1.25rem;
  border-top: 1px solid var(--inv-line);
  font-size: 0.9375rem;
}
.cta__docs a {
  color: var(--inv-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.cta__docs a:hover { color: var(--inv-ink); }

.code {
  background: var(--ink-900);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.code__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--line);
  font: 500 0.6875rem/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.code__dot {
  width: 8px; height: 8px;
  background: var(--accent);
  flex: none;
}
.code pre {
  margin: 0;
  padding: 1.05rem 1.15rem 1.2rem;
  overflow-x: auto;
}
.code code {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.85;
  color: var(--text);
  background: none;
  border: 0;
  padding: 0;
  white-space: pre;
}
.code .c { color: var(--text-faint); }

.cta__req {
  margin: 0.9rem 0 0 !important;
  font: 400 0.6875rem/1.5 var(--font-mono) !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--inv-muted) !important;
}

/* ============================= FOOTER ============================= */

.foot { border-top: 1px solid var(--line); padding-block: 2.25rem; }
.foot__in {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  justify-content: space-between;
  align-items: baseline;
}
.foot p {
  margin: 0;
  font: 400 0.6875rem/1.6 var(--font-mono);
  letter-spacing: 0.05em;
  color: var(--text-faint);
}
.foot__warn { color: #667085; }

/* ============================= MOTION ============================= */
/* Progressive enhancement, gated on a class the script adds to <html>.
   The hidden state exists ONLY when JS has confirmed it can undo it, so with
   JS off, JS erroring, or reduced-motion the content is simply visible.      */

@media (prefers-reduced-motion: no-preference) {
  .js-reveal .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.3, 1),
                transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
    transition-delay: var(--d, 0ms);
  }
  .js-reveal .reveal.is-in { opacity: 1; transform: none; }
}

/* ============================ RESPONSIVE ============================ */

@media (max-width: 1080px) {
  .feat__text,
  .feat--flip .feat__text { grid-column: 1 / span 6; grid-row: 2; }
  .feat__grid > .shot,
  .feat--flip .feat__grid > .shot { grid-column: 1 / span 12; grid-row: 1; }
  .cta__text { grid-column: 1 / span 12; }
  .cta__code { grid-column: 1 / span 12; }
  .faq__head { grid-column: 1 / span 12; position: static; }
  .faq__list { grid-column: 1 / span 12; }
  .shot--hero { margin-left: 0; }
}

@media (max-width: 760px) {
  /* Collapse the feature grid to ONE column. At 12 columns a 390px viewport
     computed every track to 0px while still paying 11 gaps x 32px = 352px of
     gutter, which left the feature copy in a 160px column and pushed the
     product frame off-width. One track, full bleed. */
  .feat__grid { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .feat__text,
  .feat--flip .feat__text,
  .feat__grid > .shot,
  .feat--flip .feat__grid > .shot { grid-column: 1 / -1; grid-row: auto; }

  .nav__links { display: none; }
  .nav__in { gap: 0.75rem; }
  .nav__mark { margin-right: auto; min-width: 0; }
  .nav__actions { margin-left: 0; gap: 0.4rem; }
  .nav__actions .btn--sm { padding: 0 0.6rem; font-size: 0.6875rem; }
  .theme-toggle { width: 30px; height: 30px; }

  .hero__h1 { max-width: none; }
  .hero__actions .btn { flex: 1 1 auto; }

  .ground__in { flex-direction: column; gap: 0.9rem; }

  .views li b { display: block; min-width: 0; }
}

@media (max-width: 420px) {
  .hero__actions { flex-direction: column; align-items: stretch; }

  /* Below ~420px the nav cannot fit mark + toggle + two labelled buttons
     without wrapping "Sign in" and "Create account" onto two lines each. The
     hero directly below carries both CTAs at full size, so the nav keeps only
     the primary action and lets the ghost button go. */
  .nav__actions .btn--ghost { display: none; }
  .nav__actions .btn--sm { white-space: nowrap; padding: 0 0.7rem; }
  .nav__mark { font-size: 0.875rem; }
}