/* Reset, typography, layout primitives, buttons, header, footer, utilities. */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Deliberately no font-feature-settings. "ss01","cv01" sat here for Hanken Grotesk;
     they are inert on Colossal Sans, which measures the same advance width with and
     without them, so they were removed rather than left as decoration. */
  overflow-x: hidden;
}

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

/* Type ------------------------------------------------------------------ */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--ink);
}
h1 { font-size: var(--step-hero); }
h2 { font-size: var(--step-h2); }
h3 { font-size: var(--step-h3); font-weight: 700; line-height: 1.12; letter-spacing: -0.015em; }
p { text-wrap: pretty; }
.lead { font-size: var(--step-lead); color: var(--ink-2); line-height: 1.55; }
.measure { max-width: 40rem; }
.mono { font-family: var(--font-mono); font-weight: 500; letter-spacing: -0.01em; }

/* Layout ---------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container-wide { max-width: var(--container-wide); }
.section { padding-block: var(--section-y); }
.section-tight { padding-block: clamp(3rem, 6vw, 5rem); }
.stack > * + * { margin-top: 1rem; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-body); font-weight: 600; font-size: 1rem;
  letter-spacing: 0.01em; color: var(--ink-2);
}
.eyebrow::before {
  content: ""; width: 1.5rem; height: 2px; border-radius: 2px;
  background: var(--rainbow);
}
.section-head { max-width: 44rem; }
.section-head h2 + .lead { margin-top: 1rem; }
.section-head .eyebrow { margin-bottom: 1rem; }

/* Buttons --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  font-family: var(--font-body); font-weight: 600; font-size: 1rem;
  /* Rounded rectangle, not a pill. --r-md is also the input radius, so a button
     sitting next to a field (the notify form on /pro-access/, the interest forms
     on /download/) matches it instead of arguing with it. The theme toggle keeps
     its pill deliberately: it is a segmented control, not a button. */
  padding: 0.85rem 1.4rem; border-radius: var(--r-md);
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.btn svg { width: 1.15em; height: 1.15em; }
.btn-primary { background: var(--ink); color: var(--bg); box-shadow: var(--shadow-md); }
.btn-primary:hover { background: color-mix(in oklch, var(--ink) 86%, var(--bg)); transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--ink-3); transform: translateY(-1px); }
.btn-lg { padding: 1rem 1.7rem; font-size: 1.06rem; }
.btn-on-ink { background: var(--on-ink); color: var(--ink-bg); }
.btn-on-ink:hover { background: #fff; transform: translateY(-1px); }
.btn-ghost-ink { color: var(--on-ink); box-shadow: inset 0 0 0 1px var(--ink-bg-line); background: transparent; }
.btn-ghost-ink:hover { box-shadow: inset 0 0 0 1px var(--on-ink-2); }
.link-arrow {
  display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; color: var(--accent);
}
.link-arrow svg { width: 1em; height: 1em; transition: transform var(--dur-fast) var(--ease); }
.link-arrow:hover svg { transform: translateX(3px); }

/* Header ---------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--header-bg);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--line); background: var(--header-bg-scrolled); }
.nav { display: flex; align-items: center; gap: 1.5rem; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; }
.brand img { width: 30px; height: 30px; }
.nav-links { display: flex; align-items: center; gap: 0.3rem; margin-left: auto; }
.nav-links a { padding: 0.5rem 0.85rem; border-radius: var(--r-pill); font-weight: 500; color: var(--ink-2); transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.nav-links a:hover { color: var(--ink); background: var(--sunken); text-decoration: underline; }
.nav-links a.active { color: var(--ink); }
.nav-cta { margin-left: 0.5rem; }

/* The Download CTA carries the site's lane rainbow, the same --rainbow token as the
   eyebrow dashes. These two selectors reach the header button and its mobile-menu
   twin on all 17 pages, so the markup needs no new class, and both must outrank
   .btn-primary:hover, hence their position after it in the file.

   The label is near-black, not white. Measured across the four stops, white ranges
   1.90 to 3.13 and fails on every one of them (amber is the worst, at L 0.75);
   --on-fill-dark clears 4.5 on all four. The color is pinned rather than inherited
   because .btn-primary sets color: var(--bg), which is near-white in light mode. */
.nav-cta,
.mobile-menu .btn-primary {
  background: var(--rainbow-fill);
  color: var(--on-fill-dark);
}
/* Hover keeps the identical rainbow: re-tinting it would break the match with the
   eyebrow dashes, which is the whole point. The lift and deeper shadow inherited
   from .btn-primary:hover carry the state change instead. */
.nav-cta:hover,
.mobile-menu .btn-primary:hover {
  background: var(--rainbow-fill);
}

.nav-toggle { display: none; }

/* Theme toggle (Light / System / Dark) */
.theme-toggle { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line); }
.theme-toggle button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--r-pill); color: var(--ink-3);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.theme-toggle button svg { width: 16px; height: 16px; }
.theme-toggle button:hover { color: var(--ink); }
.theme-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.mobile-menu { display: none; }

@media (max-width: 800px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; width: 44px; height: 44px; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line-2); }
  .nav-toggle svg { width: 20px; height: 20px; }
  .mobile-menu[open] { display: block; }
  .mobile-menu {
    position: fixed; inset: 68px 0 auto 0; z-index: var(--z-dropdown);
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding: 1rem var(--gutter) 1.5rem; box-shadow: var(--shadow-md);
  }
  .mobile-menu a { display: block; padding: 0.9rem 0.5rem; font-size: 1.1rem; font-weight: 500; border-bottom: 1px solid var(--line); }
  .mobile-menu a:last-of-type { border-bottom: none; }
  .mobile-menu .btn { display: flex; margin-top: 1rem; }
}

/* Footer ---------------------------------------------------------------- */
.site-footer { background: var(--ink-bg); color: var(--on-ink-2); padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.3fr max-content max-content 1fr; gap: 2.5rem 2rem; }
.footer-brand { max-width: 22rem; }
.footer-brand .brand { color: var(--on-ink); margin-bottom: 0.9rem; }
.footer-brand p { color: var(--on-ink-2); font-size: 1rem; }
.footer-col h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--on-ink-2); margin-bottom: 1rem; }
.footer-col a { display: block; padding: 0.35rem 0; color: var(--on-ink); font-weight: 500; opacity: 0.85; white-space: nowrap; transition: opacity var(--dur-fast) var(--ease); }
.footer-col a:hover { opacity: 1; text-decoration: underline; }
/* Three tracks, so the theme control is centred on the ROW rather than merely
   sitting between its neighbours: the outer 1fr tracks are equal whatever the
   copyright and credit lines measure, which keeps the toggle on the page's centre
   line. A flex row with margins cannot promise that. */
.footer-bottom { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem 1.25rem; align-items: center; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--ink-bg-line); font-size: 1rem; }
.footer-bottom .footer-theme { justify-self: center; }
.footer-bottom .footer-meta { justify-self: end; display: inline-flex; align-items: center; gap: 1.25rem; }
.footer-bottom .lanes-strip { display: flex; gap: 4px; }
.footer-bottom .lanes-strip span { width: 20px; height: 4px; border-radius: 2px; }
.footer-bottom .built-by { color: var(--on-ink-2); font-weight: 500; }
/* The toggle now sits on the dark ink footer, not the light header, so its border,
   idle colour and pressed fill all have to invert. Inheriting the header's rules
   here put near-black icons on a near-black ground. */
.footer-bottom .theme-toggle { box-shadow: inset 0 0 0 1px var(--ink-bg-line); }
.footer-bottom .theme-toggle button { color: var(--on-ink-2); }
.footer-bottom .theme-toggle button:hover { color: var(--on-ink); }
.footer-bottom .theme-toggle button[aria-pressed="true"] { background: var(--on-ink); color: var(--ink-bg); }
/* This is the only theme control on the site now, phones included, so its targets
   are sized for touch everywhere rather than only inside a mobile menu. */
@media (pointer: coarse) {
  .footer-bottom .theme-toggle button { width: 44px; height: 44px; }
  .footer-bottom .theme-toggle button svg { width: 18px; height: 18px; }
  /* Footer links are a stacked list, so a short target mis-taps onto a
     neighbour. 0.55rem padding-block brings each to ~44px, matching the
     toggle above; fine pointers keep the tighter 0.35rem rhythm. */
  .footer-col a { padding-block: 0.55rem; }
}
/* Stacked and centred once three tracks stop fitting. */
@media (max-width: 720px) {
  .footer-bottom { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .footer-bottom .footer-meta { justify-self: center; }
}
.footer-bottom .built-by a { color: var(--on-ink); opacity: 0.85; transition: opacity var(--dur-fast) var(--ease); }
.footer-bottom .built-by a:hover { opacity: 1; text-decoration: underline; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } .footer-col a { white-space: normal; } }

/* "What we don't do" grid (shared: home + privacy) ---------------------- */
.nots { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 1px; background: var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 0 0 1px var(--line); margin-top: 2.5rem; }
.not { background: var(--surface); padding: 1.5rem 1.6rem; }
.not .no { display: flex; align-items: center; gap: 0.55rem; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--ink); margin-bottom: 0.45rem; }
.not .no svg { width: 18px; height: 18px; color: var(--lane-red); flex: none; }
.not p { font-size: 1rem; color: var(--ink-2); }
.text-link { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.text-link:hover { color: var(--accent-hover); }

/* Reveal motion --------------------------------------------------------- */
.reveal { opacity: 1; }
.anim .reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.anim .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .anim .reveal { opacity: 1; transform: none; transition: none; }
}

/* Utilities ------------------------------------------------------------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.center { text-align: center; }
.center .section-head { margin-inline: auto; }
.skip-link { position: absolute; left: 0.5rem; top: 0.5rem; transform: translateY(-150%); background: var(--ink); color: var(--bg); padding: 0.6rem 1rem; border-radius: var(--r-sm); z-index: var(--z-toast); transition: transform var(--dur) var(--ease); }
.skip-link:focus { transform: none; }
.pill-tag { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 1rem; font-weight: 600; padding: 0.3rem 0.7rem; border-radius: var(--r-pill); background: var(--sunken); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.i { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Shared section surfaces + download CTA (used across all pages) --------- */
.highlight { background: var(--surface); }
.cta-final { text-align: center; }
.cta-final .window { max-width: 720px; margin: 2.5rem auto 0; }
.cta-card { max-width: 640px; margin-inline: auto; }
.cta-os { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; margin-top: 1.8rem; }
.os-note { margin-top: 1.1rem; font-size: 1rem; color: var(--ink-3); }

/* FAQ (native accessible accordion) ------------------------------------- */
.faq { max-width: 46rem; margin-top: 2.5rem; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding: 1.35rem 0.25rem; font-family: var(--font-display); font-weight: 700;
  font-size: 1.15rem; line-height: 1.3; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent); }
.faq-item .chev { flex: none; width: 22px; height: 22px; color: var(--ink-3); transition: transform var(--dur) var(--ease); }
.faq-item[open] .chev { transform: rotate(180deg); }
.faq-item .faq-a { padding: 0 0.25rem 1.5rem; color: var(--ink-2); max-width: 62ch; }
.faq-item .faq-a p + p { margin-top: 0.8rem; }
@media (prefers-reduced-motion: reduce) { .faq-item .chev { transition: none; } }