/* Audient landing — extends the cool/macOS-native register defined in
   ui_kits/audient (deliberately drifts from the warm bare-domain palette).
   Tokens still come from colors_and_type.css; we override the four
   neutrals locally to match the live audient.async-digital.com source. */

:root {
  /* Audient cool overrides — same as live source */
  --text:   #0b0b0c;
  --muted:  #5a5f69;
  --bg:     #FDFBF7;     /* foundation cream — never pure white */
  --card:   #F8F5EE;     /* foundation warm cream — panel surface */
  --shot-side: #F2EDE2;  /* warm sidebar inside the screenshot */
  --shot-chip: #EFE9DC;  /* warm chip background (timestamp, src-tag, cite) */
  --border: rgba(0, 0, 0, 0.08);
  --hairline: rgba(0, 0, 0, 0.06);

  /* App Store accent — used sparingly */
  --link: #0a66c2;       /* sober, App-Store-adjacent blue for in-text links */

  /* Brand brick stays — used for the bar-stack mark and one small accent rule */
  --brick: #8B3A2A;

  /* Aurora — three-stop palette for the hero .shot-wash. ONE STOP PER BLOB,
     not a gradient ramp. Aurora only; never as solid fills, text, or accents.
     Pending design-system patch in async-digital-site (separate ticket). */
  --aurora-stop-1: #E89B7E; /* coral peach */
  --aurora-stop-2: #A77398; /* dusty plum */
  --aurora-stop-3: #5E97A8; /* muted teal */
  --aurora-base:      #1D1916; /* warm near-black pool behind the window */
  --aurora-base-edge: #2A2520; /* slightly lifted edge */
  --aurora-intensity: 1;
  --aurora-speed:     1;
  --aurora-blur:    40px;

  /* Wider wrap than 960 — Audient marketing surface gets a bit more room
     to breathe so the screenshot can sit large */
  --wrap-wide: 1120px;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Match the page so the mask edge dissolves into the bg rather than
       revealing a near-black-on-near-black boundary. */
    --aurora-base:      #0E0B08;
    --aurora-base-edge: #0E0B08;
    --aurora-stop-1: #F4A98B;
    --aurora-stop-2: #B881A6;
    --aurora-stop-3: #6DAABC;
  }
}

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

html, body {
  background: var(--bg);
  color: var(--text);
  overflow-x: clip;
}

body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; }

/* ---------- Layout primitives ---------- */
.wrap-wide {
  width: 100%;
  max-width: var(--wrap-wide);
  margin: 0 auto;
  padding: 0 24px;
}


/* ---------- Top nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--hairline);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
}
.nav-mark {
  width: 22px;
  height: 22px;
  display: block;
}
.nav-mark svg { width: 100%; height: 100%; }
.nav-brand-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-1) var(--ease-out);
}
.nav-links a:hover { color: var(--text); }
.nav-cta {
  font-size: 13px;
  font-weight: 500;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  background: var(--bg);
  white-space: nowrap;
  transition: border-color var(--dur-1) var(--ease-out),
              background var(--dur-1) var(--ease-out);
}
.nav-cta:hover {
  border-color: rgba(0, 0, 0, 0.18);
  background: #fafbfc;
}

@media (max-width: 900px) {
  .nav-links { gap: 16px; }
  .nav-links li.nav-hide-sm { display: none; }
}

/* iPhone-class widths: even with nav-hide-sm collapsing, brand + Features
   + Pricing + CTA + lang-switch overflow at ~430px. Drop the section
   shortcuts (Features, Pricing) — single-page scroll covers them, the
   CTA and lang-switch are the must-haves on phone. */
@media (max-width: 520px) {
  .nav-links { gap: 12px; }
  .nav-links li.nav-hide-xs { display: none; }
  .lang-switch { margin-left: 8px; }
}

/* ---------- Hero ---------- */
.hero {
  padding: 72px 0 0;
  text-align: center;
}
.hero-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 22px;
}
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--muted);
  background: var(--bg);
  margin-bottom: 22px;
}
.hero-pills .hero-pill { margin-bottom: 0; }
.hero-pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brick);
  display: inline-block;
}
.hero-pill strong {
  color: var(--text);
  font-weight: 600;
}

/* AI pill: brick-tinted to make the AI message visually distinct from the
   neutral 'Coming soon' chip while staying in the brand palette. */
.hero-pill-ai {
  border-color: color-mix(in srgb, var(--brick) 30%, var(--border));
  background: color-mix(in srgb, var(--brick) 6%, var(--bg));
}
.hero-pill-ai .spark {
  color: var(--brick);
  font-size: 13px;
  line-height: 1;
  display: inline-block;
}

.hero h1 {
  font-size: clamp(40px, 6vw, 68px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 auto;
  max-width: 18ch;
  color: var(--text);
}

.hero-sub {
  margin: 22px auto 0;
  font-size: 19px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 56ch;
}

.hero-actions {
  margin-top: 30px;
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* Mac App Store badge wrapper.
   Apple's marketing guidelines forbid redrawing, recolouring, or restyling
   the badge itself, so we only wrap it. The <img> is the unmodified
   Apple-supplied PNG. The badge is non-clickable (a <span>) until launch,
   so it doesn't 404 on click. */
.btn-appstore-badge {
  display: inline-flex;
  align-items: center;
}
.btn-appstore-badge img {
  display: block;
  height: 48px;
  width: auto;
  /* No filters, no border-radius, no shadow. Apple-specified asset. */
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out),
              background var(--dur-1) var(--ease-out);
}
.btn-ghost:hover {
  border-color: rgba(0, 0, 0, 0.2);
  background: #fafbfc;
}
.btn-ghost .arrow {
  transition: transform var(--dur-1) var(--ease-out);
}
.btn-ghost:hover .arrow { transform: translateX(2px); }

/* CTA-adjacent caption: clarifies the App Store badge isn't live yet,
   close to the badge so users don't have to scroll back up to the
   "Coming soon" hero pill to recheck. Not a banner; a quiet line. */
.hero-cta-note {
  margin: var(--space-md) 0 0;
  font-size: 13px;
  font-weight: var(--weight-regular);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.005em;
}
.hero-cta-note .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brick);
  flex: 0 0 6px;
}

.hero-meta {
  margin-top: 18px;
  font-size: 13px;
  color: var(--muted);
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
}
.hero-meta li { list-style: none; }
.hero-meta ul {
  margin: 0;
  padding: 0;
  display: contents;
}
.hero-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hero-meta-item::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #c9ccd2;
}
.hero-meta-item:first-child::before { display: none; }

/* ---------- Hero shot (the macOS app screenshot) ---------- */
.shot-wrap {
  margin: 56px auto 0;
  padding: 0 24px;
  max-width: 1180px;
  position: relative;
  text-align: left;
}

/* ---------- Hero aurora — .shot-wash ----------
   Three blurred blobs over a deep neutral pool sitting behind the macOS
   window mockup. Each blob takes one of the Dawn aurora stops. Mask
   fades the pool to transparent at the box edges so the page background
   reads through cleanly with no visible rectangle outline. Drop-in port
   of the Audient app's AuroraBackground, slowed for marketing rhythm.   */
.shot-wash {
  position: absolute;
  /* Bleed up into the gap above the mockup, out past the window on both
     sides, and down into the next section. The mask does the fading. */
  inset: -80px -22% -220px -22%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;

  /* Elliptical soft mask centred slightly low so the dense pool sits
     behind the window. Radii sized so the fade reaches transparent
     within the box bounds — no visible rectangle outline at the edges. */
  -webkit-mask-image:
    radial-gradient(50% 42% at 50% 58%,
      black 0%, black 30%,
      rgba(0, 0, 0, 0.85) 55%,
      rgba(0, 0, 0, 0.4) 80%,
      transparent 100%);
          mask-image:
    radial-gradient(50% 42% at 50% 58%,
      black 0%, black 30%,
      rgba(0, 0, 0, 0.85) 55%,
      rgba(0, 0, 0, 0.4) 80%,
      transparent 100%);

  /* The pool — its own deep neutral base, lifted slightly at the edges
     so the centre reads deepest. */
  background:
    radial-gradient(130% 100% at 50% 55%,
      var(--aurora-base) 0%,
      var(--aurora-base) 50%,
      var(--aurora-base-edge) 100%);
}

/* Blobs glow over the dark pool. plus-lighter is consistent in both
   schemes because the pool is always dark. */
.shot-wash__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(var(--aurora-blur));
  will-change: transform, opacity;
  mix-blend-mode: plus-lighter;
  opacity: var(--aurora-intensity);
}
@supports not (mix-blend-mode: plus-lighter) {
  .shot-wash__blob { mix-blend-mode: screen; }
}

.shot-wash__blob--1 {
  width: 64%;
  aspect-ratio: 1.3 / 1;
  top: -10%; left: -8%;
  background: radial-gradient(closest-side,
    var(--aurora-stop-1) 0%,
    var(--aurora-stop-1) 12%,
    color-mix(in oklab, var(--aurora-stop-1) 75%, transparent) 30%,
    color-mix(in oklab, var(--aurora-stop-1) 35%, transparent) 55%,
    transparent 82%);
  animation: aurora-drift-1 calc(53s / var(--aurora-speed)) ease-in-out infinite;
}
.shot-wash__blob--2 {
  width: 60%;
  aspect-ratio: 1.1 / 1;
  top: 8%; right: -10%;
  background: radial-gradient(closest-side,
    var(--aurora-stop-2) 0%,
    var(--aurora-stop-2) 14%,
    color-mix(in oklab, var(--aurora-stop-2) 72%, transparent) 32%,
    color-mix(in oklab, var(--aurora-stop-2) 32%, transparent) 58%,
    transparent 84%);
  animation: aurora-drift-2 calc(43s / var(--aurora-speed)) ease-in-out infinite;
}
.shot-wash__blob--3 {
  width: 72%;
  aspect-ratio: 1.4 / 1;
  bottom: -16%; left: 10%;
  background: radial-gradient(closest-side,
    var(--aurora-stop-3) 0%,
    var(--aurora-stop-3) 14%,
    color-mix(in oklab, var(--aurora-stop-3) 72%, transparent) 32%,
    color-mix(in oklab, var(--aurora-stop-3) 28%, transparent) 58%,
    transparent 84%);
  animation: aurora-drift-3 calc(37s / var(--aurora-speed)) ease-in-out infinite;
}

/* Slow drift on staggered phases (37s / 43s / 53s — coprime-ish) so the
   composition rarely repeats inside a casual viewing window. */
@keyframes aurora-drift-1 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  25%  { transform: translate3d(4%, 3%, 0) scale(1.06); }
  50%  { transform: translate3d(7%, -2%, 0) scale(1.02); }
  75%  { transform: translate3d(2%, -4%, 0) scale(1.08); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes aurora-drift-2 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  20%  { transform: translate3d(-3%, 4%, 0) scale(1.05); }
  55%  { transform: translate3d(-6%, 2%, 0) scale(0.96); }
  80%  { transform: translate3d(-2%, -3%, 0) scale(1.08); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes aurora-drift-3 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  30%  { transform: translate3d(5%, -3%, 0) scale(1.05); }
  60%  { transform: translate3d(-2%, -5%, 0) scale(1.08); }
  85%  { transform: translate3d(3%, 2%, 0) scale(0.98); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .shot-wash__blob { animation: none; }
}

.shot {
  position: relative;
  z-index: 1;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: var(--card);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 30px 60px -20px rgba(0, 0, 0, 0.18),
    0 12px 30px -10px rgba(0, 0, 0, 0.12);
}

/* ---------- macOS window chrome ---------- */
.win-titlebar {
  height: 36px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  background: linear-gradient(to bottom, #f3f4f6, #ebecef);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  position: relative;
}
.tl-dots {
  display: flex;
  gap: 8px;
}
.tl-dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}
.tl-dots .r { background: #ff5f57; }
.tl-dots .y { background: #febc2e; }
.tl-dots .g { background: #28c840; }
.win-title {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 13px;
  color: #6c7079;
  pointer-events: none;
  font-weight: 500;
}

.win-body {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 520px;
  background: #fafbfc;
}

/* sidebar */
.win-side {
  background: var(--shot-side);
  border-right: 1px solid rgba(0, 0, 0, 0.06);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 13px;
}
.side-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  color: #8a8e96;
  font-size: 12.5px;
}
.side-search kbd {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  background: #f3f4f6;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  padding: 1px 5px;
  color: #6b6f76;
}
.side-group { display: flex; flex-direction: column; gap: 2px; }
.side-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8a8e96;
  padding: 4px 8px 6px;
  font-weight: 600;
}
.side-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border-radius: 6px;
  color: #2c2f36;
}
.side-item .ic {
  width: 14px; height: 14px; flex: 0 0 14px;
  color: #74787f;
}
.side-item.is-active {
  background: rgba(139, 58, 42, 0.12);
  color: #8B3A2A;
}
.side-item.is-active .ic { color: #8B3A2A; }
.side-count {
  margin-left: auto;
  font-size: 11px;
  color: #8a8e96;
  font-variant-numeric: tabular-nums;
}

/* main pane */
.win-main {
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  position: relative;
  isolation: isolate;
  background: var(--card);
}
/* Faint brick wash behind the result list, so the in-app surface
   carries brand identity rather than reading as flat cream. */
.win-main::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 50% 30%,
              rgba(139, 58, 42, 0.05) 0%,
              rgba(139, 58, 42, 0) 70%);
  pointer-events: none;
  z-index: -1;
}
.win-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
}
.win-query {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  flex: 1 1 220px;
  min-width: 0;
  font-size: 13.5px;
}
.win-query .ic { color: #8a8e96; width: 14px; height: 14px; flex: 0 0 14px; }
.win-query .q-text { color: #1a1c20; min-width: 0; }
.win-query .q-cursor {
  display: inline-block;
  width: 1.5px;
  height: 14px;
  background: #1a1c20;
  margin-left: 1px;
  vertical-align: middle;
  animation: caret 1s steps(2, start) infinite;
}
@keyframes caret { to { visibility: hidden; } }

.win-toolbar-meta {
  font-size: 12px;
  color: #6c7079;
  white-space: nowrap;
}
.win-toolbar-meta strong { color: #1a1c20; font-weight: 600; }

/* result list */
.results {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-height: 0;
}
.res {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  background: var(--bg);
}
.res.is-focus {
  border-color: rgba(139, 58, 42, 0.4);
  box-shadow: 0 0 0 3px rgba(139, 58, 42, 0.1);
  background: var(--bg);
}
.res-time {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: #6c7079;
  background: var(--shot-chip);
  border-radius: 6px;
  padding: 5px 6px;
  text-align: center;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.res-time .when { display: block; color: #8a8e96; font-size: 10px; margin-top: 1px; }

.res-body { min-width: 0; }
.res-title {
  font-size: 13px;
  font-weight: 600;
  color: #1a1c20;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.res-title .src-tag {
  font-size: 10.5px;
  font-weight: 500;
  color: #6c7079;
  background: var(--shot-chip);
  border-radius: 4px;
  padding: 1px 6px;
  letter-spacing: 0;
}
.res-snippet {
  font-size: 12.5px;
  line-height: 1.5;
  color: #3a3d44;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.res-snippet mark {
  background: rgba(255, 213, 70, 0.45);
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
}
.res-score {
  font-size: 11px;
  color: #6c7079;
  font-variant-numeric: tabular-nums;
  align-self: center;
}

/* citation panel preview at bottom of window */
.cite-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--shot-chip);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  font-size: 12px;
  color: #3a3d44;
  flex-wrap: wrap;
}
.cite-strip .lab {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6c7079;
  font-weight: 600;
  flex: 0 0 auto;
}
.cite-strip .quote {
  flex: 1 1 200px;
  min-width: 0;
  font-style: italic;
  color: #1a1c20;
}
.cite-strip .src {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #6c7079;
  word-break: break-all;
}

/* ---------- Section: what it does (3 cards) ---------- */
.section {
  padding: 110px 0 0;
}
.section-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brick);
  margin-bottom: 14px;
}
.section h2 {
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 14px;
  max-width: 24ch;
}
.section-sub {
  font-size: 17px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
  max-width: 60ch;
}

.feature-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.feature {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 280px;
}
.feature-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(139, 58, 42, 0.08);
  color: var(--brick);
}
.feature h3 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
}
.feature p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}
.feature-foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed rgba(0, 0, 0, 0.07);
  font-size: 12px;
  color: var(--muted);
  display: flex;
  gap: 6px;
  align-items: center;
}
.feature-foot strong { color: var(--text); font-weight: 600; }

@media (max-width: 1080px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .feature-grid { grid-template-columns: 1fr; }
  .feature { min-height: 0; padding: 24px 22px 22px; }
}

/* ---------- Section: how it works (3 steps) ---------- */
.how {
  background: var(--card);
  margin-top: 110px;
  padding: 96px 0 110px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.how .section { padding-top: 0; }

/* The .how panel reads as a cream-coloured card, so its content needs more
   internal horizontal padding than the bare-white wrap-wide sections.
   Scales up to a card-like 48px on wider viewports. Applies in both en and
   cy because it sits on the shared .wrap-wide selector. */
.how .wrap-wide { padding: 0 32px; }
@media (min-width: 900px) {
  .how .wrap-wide { padding: 0 48px; }
}

.steps-row {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
}
.steps-row::before {
  content: "";
  position: absolute;
  left: calc(8% + 18px);
  right: calc(8% + 18px);
  top: 18px;
  height: 1px;
  background: repeating-linear-gradient(to right, rgba(0,0,0,0.18) 0 4px, transparent 4px 8px);
  z-index: 0;
}
.step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.step-num {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: var(--bg);
  color: var(--brick);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.step h3 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 6px 0 0;
}
.step p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}
.step-detail {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  color: var(--muted);
}
.step-detail-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.step-detail-item::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--brick);
  flex: 0 0 4px;
}

@media (max-width: 1080px) {
  .steps-row { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
  .steps-row::before { display: none; }
}
@media (max-width: 900px) {
  .steps-row { grid-template-columns: 1fr; gap: 32px; }
  .steps-row::before { display: none; }
}

/* ---------- Section: pricing / CTA ---------- */
.pricing {
  padding: 110px 0;
}
.pricing-card {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  background: var(--bg);
}
.pricing-left {
  padding: 36px 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-right: 1px solid var(--hairline);
  background: linear-gradient(180deg, #fdfdfd 0%, #f7f8fa 100%);
}
.pricing-tier {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brick);
}
.pricing-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.pricing-price .amt {
  font-size: 64px;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--text);
  line-height: 1;
}
.pricing-price .per {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.pricing-price .per .sep {
  color: var(--muted);
  font-size: 18px;
  position: relative;
  top: -2px;
}
.pricing-availability {
  font-size: 16px;
  color: var(--text);
  line-height: 1.5;
  margin: 0;
  letter-spacing: -0.005em;
}
.pricing-trust {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

.pricing-right {
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  justify-content: center;
}
.pricing-right h3 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
}
.pricing-right p {
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}
.pricing-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.pricing-form .row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.pricing-form input[type="email"] {
  flex: 1;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font: inherit;
  font-size: 14.5px;
  color: var(--text);
  background: var(--bg);
  outline: none;
  transition: border-color var(--dur-1) var(--ease-out),
              box-shadow var(--dur-1) var(--ease-out);
}
.pricing-form input[type="email"]:focus {
  border-color: var(--brick);
  box-shadow: 0 0 0 3px rgba(139, 58, 42, 0.18);
}
.pricing-form button {
  font: inherit;
  font-size: 14.5px;
  font-weight: 500;
  padding: 11px 16px;
  border: 0;
  border-radius: 10px;
  background: var(--brick);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: filter var(--dur-1) var(--ease-out);
}
.pricing-form button:hover { filter: brightness(0.95); }
.pricing-form .hint {
  font-size: 12px;
  color: var(--muted);
}
.pricing-form .ok {
  font-size: 13px;
  color: #2f6b3a;
  display: none;
}
.pricing-form.is-sent .ok { display: block; }
.pricing-form.is-sent .row,
.pricing-form.is-sent .hint { display: none; }

@media (max-width: 800px) {
  .pricing-card { grid-template-columns: 1fr; }
  .pricing-left { border-right: 0; border-bottom: 1px solid var(--hairline); }
}

/* ---------- Footer ---------- */
.footer {
  background: var(--bg);
  border-top: 1px solid var(--hairline);
  padding: 56px 0 36px;
}
.footer-bar {
  height: 4px;
  background: var(--brick);
  width: 100%;
  margin-bottom: 56px;
  /* full-bleed */
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 40px;
}
.footer-brand-block { display: flex; flex-direction: column; gap: 14px; }
.footer-mark {
  width: 28px; height: 28px;
}
.footer-blurb {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.55;
  max-width: 28ch;
  margin: 0;
}
.footer-col h4 {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a8e96;
  margin: 0 0 12px;
}
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-col a {
  font-size: 14px;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: border-color var(--dur-1) var(--ease-out);
}
.footer-col a:hover { border-bottom-color: rgba(0, 0, 0, 0.18); }

.footer-meta {
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}
.footer-meta a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 1px;
}
.footer-meta a:hover { border-bottom-color: rgba(0, 0, 0, 0.18); }
.footer-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}
.footer-meta-row + .footer-meta-row { margin-top: 8px; }
.footer-sep { color: rgba(0,0,0,0.2); }

@media (max-width: 800px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px 24px;
  }
  .footer-brand-block { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .footer { padding: 44px 0 32px; }
  .footer-bar { margin-bottom: 40px; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; margin-bottom: 32px; }
  .footer-meta-row { gap: 4px 10px; }
}

/* ---------- Tweaks panel sits above everything ---------- */
.section-divider {
  margin: 0;
  height: 1px;
  background: transparent;
  border: 0;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition: none !important; }
}

/* ---------- Tighter mobile shot ---------- */
@media (max-width: 900px) {
  .win-body { grid-template-columns: 1fr; min-height: 0; }
  .win-side { display: none; }
  .win-main { padding: 16px; }
  .res { grid-template-columns: 48px 1fr; }
  .res-score { display: none; }
  .shot-wash { display: none; }

  .cite-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .cite-strip .quote { flex: 0 1 auto; }
}

@media (max-width: 640px) {
  .shot-wrap { margin-top: 40px; }
  .win-toolbar-meta { font-size: 11.5px; }
  .res { padding: 10px 12px; gap: 12px; }

  /* Hero meta: stack vertically so the leading-dot pattern doesn't make
     the wrapped item appear off-centre. */
  .hero-meta { flex-direction: column; gap: 8px; }
  .hero-meta-item::before { display: none; }
}

/* ---------- Dark-mode hero mockup (issue #14) ----------
   Scoped strictly to the hero screenshot (.shot-wrap and descendants).
   The rest of the page already adapts via the brand palette — issue #14
   "Out of scope: A site-wide dark theme". The mockup mirrors a macOS
   dark-appearance window: deep neutrals for surfaces, brick accent
   preserved, animated cursor preserved. */
@media (prefers-color-scheme: dark) {
  .shot-wrap .shot {
    background: #1d1e21;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.04) inset,
      0 30px 60px -20px rgba(0, 0, 0, 0.6),
      0 12px 30px -10px rgba(0, 0, 0, 0.45);
  }

  /* Soften the brick wash so it reads on the dark surface */
  .shot-wrap .shot-wash {
    background: radial-gradient(60% 100% at 50% 0%,
                rgba(139, 58, 42, 0.32) 0%,
                rgba(139, 58, 42, 0) 70%);
  }

  /* macOS dark titlebar */
  .shot-wrap .win-titlebar {
    background: linear-gradient(to bottom, #2a2b2e, #232427);
    border-bottom-color: rgba(255, 255, 255, 0.06);
  }
  .shot-wrap .win-title { color: #a8acb3; }

  .shot-wrap .win-body { background: #1d1e21; }

  /* Sidebar */
  .shot-wrap .win-side {
    background: #232427;
    border-right-color: rgba(255, 255, 255, 0.06);
  }
  .shot-wrap .side-search {
    background: #2c2d31;
    border-color: rgba(255, 255, 255, 0.08);
    color: #a8acb3;
  }
  .shot-wrap .side-search kbd {
    background: #1d1e21;
    border-color: rgba(255, 255, 255, 0.08);
    color: #c5c8cd;
  }
  .shot-wrap .side-label { color: #7a7e85; }
  .shot-wrap .side-item { color: #d6d8dc; }
  .shot-wrap .side-item .ic { color: #8a8e96; }
  .shot-wrap .side-item.is-active {
    background: rgba(139, 58, 42, 0.22);
    color: #e9b3a5;
  }
  .shot-wrap .side-item.is-active .ic { color: #e9b3a5; }
  .shot-wrap .side-count { color: #7a7e85; }

  /* Main pane */
  .shot-wrap .win-main { background: #1d1e21; }
  .shot-wrap .win-main::before {
    background: radial-gradient(120% 80% at 50% 30%,
                rgba(139, 58, 42, 0.12) 0%,
                rgba(139, 58, 42, 0) 70%);
  }

  /* Search query box */
  .shot-wrap .win-query {
    background: #2c2d31;
    border-color: rgba(255, 255, 255, 0.1);
  }
  .shot-wrap .win-query .ic { color: #7a7e85; }
  .shot-wrap .win-query .q-text { color: #e9eaec; }
  .shot-wrap .win-query .q-cursor { background: #e9eaec; }

  .shot-wrap .win-toolbar-meta { color: #a8acb3; }
  .shot-wrap .win-toolbar-meta strong { color: #e9eaec; }

  /* Result rows */
  .shot-wrap .res {
    background: #26272a;
    border-color: rgba(255, 255, 255, 0.06);
  }
  .shot-wrap .res.is-focus {
    background: #26272a;
    border-color: rgba(232, 130, 110, 0.45);
    box-shadow: 0 0 0 3px rgba(139, 58, 42, 0.22);
  }
  .shot-wrap .res-time {
    background: #1d1e21;
    color: #c5c8cd;
  }
  .shot-wrap .res-time .when { color: #7a7e85; }
  .shot-wrap .res-title { color: #f1f2f4; }
  .shot-wrap .res-title .src-tag {
    background: #1d1e21;
    color: #a8acb3;
  }
  .shot-wrap .res-snippet { color: #c5c8cd; }
  .shot-wrap .res-snippet mark {
    background: rgba(255, 213, 70, 0.28);
    color: inherit;
  }
  .shot-wrap .res-score { color: #a8acb3; }

  /* Citation strip */
  .shot-wrap .cite-strip {
    background: #1d1e21;
    border-color: rgba(255, 255, 255, 0.06);
    color: #c5c8cd;
  }
  .shot-wrap .cite-strip .lab { color: #a8acb3; }
  .shot-wrap .cite-strip .quote { color: #f1f2f4; }
  .shot-wrap .cite-strip .src { color: #a8acb3; }
}

/* ---------- Prose / long-form pages (privacy) ----------
   Narrower container, heading scale, and reading-width constraints
   used by privacy.html / privacy.cy.html. Distinct from the landing
   page's .wrap-wide + hero .section rhythm. */

.wrap {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 48px 24px;
}

.h1 {
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--text);
}

.tagline {
  margin: 16px 0 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 68ch;
}

.prose {
  max-width: 72ch;
}

.prose p,
.prose ul,
.prose ol {
  color: var(--text);
  line-height: 1.6;
}

.prose p + p {
  margin-top: 12px;
}

.prose ul,
.prose ol {
  padding-left: 22px;
}

.prose li + li {
  margin-top: 6px;
}

.prose a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 1px;
  transition: border-color 120ms ease;
}

.prose a:hover {
  border-bottom-color: var(--link);
}

.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.92em;
  background: rgba(0, 0, 0, 0.04);
  padding: 1px 4px;
  border-radius: 4px;
}

/* Tighten the hero-scale .section padding (110px) when used as a
   prose section heading — long-form pages stack many H2s and the
   landing-page rhythm is too airy here. */
.section.prose {
  padding: 44px 0 0;
}

/* Constrain prose-section H2s to the reading column rather than the
   landing-page's 24ch clamp, which truncates phrasing like
   "What happens on your device". */
.section.prose h2 {
  max-width: none;
  font-size: clamp(24px, 2.8vw, 32px);
  margin-bottom: 16px;
}