/* ===========================================================================
   Paper Scout — marketing site
   ---------------------------------------------------------------------------
   Hand-written CSS, no build step and no framework. The whole site is static
   HTML so crawlers get real text (the previous site was an empty SPA shell,
   which is why the product had no organic surface area at all — see
   docs/go-to-market.md §5.1).

   Design language: a scientific instrument, not an AI toy. Paper-white ground,
   hairline rules, a serif for anything editorial, a mono for anything the
   machine says about itself. Deep navy is used sparingly and always to mean
   "this is the part where the product shows its working".

   Palette and type are inherited from lib/widgets/web_landing.dart so the site
   and the signed-in app read as one product.
   =========================================================================== */

@import url('../fonts/fonts.css');

/* ---------------------------------------------------------------- tokens -- */

:root {
  /* Type */
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Light ground — the default */
  --paper: #fbfcfd;
  --paper-2: #f4f7fb;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --ink: #0f172a;
  --ink-2: #475569;
  --ink-3: #5a6b80;
  --line: #e7ecf2;
  --line-2: #d8e0ea;
  --brand: #1e40af;
  --brand-2: #3b82f6;
  --brand-ink: #1e40af; /* brand colour when used as text on --paper */
  --brand-wash: rgba(30, 64, 175, 0.06);
  --brand-edge: rgba(30, 64, 175, 0.18);
  --teal: #0f766e;
  --ok: #16a34a;
  --ok-wash: #eafaf0;
  --warn: #ca8a04;
  --warn-wash: rgba(202, 138, 4, 0.14);
  /* Separate "solid fill" and "text on a tint" values from the signal colours
     above. The signal colours are tuned for dots and borders; used as small
     text they fall under 4.5:1, and used as a button fill in dark mode white
     text on --brand only reaches 3.2:1. */
  --brand-solid: #1e40af;
  --ok-text: #146c33;
  --warn-text: #86590a;
  --bad: #c62828;
  --bad-wash: rgba(198, 40, 40, 0.1);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 14px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 2px 6px rgba(15, 23, 42, 0.05), 0 18px 40px rgba(15, 23, 42, 0.09);
  --shadow-lg: 0 6px 12px rgba(15, 23, 42, 0.06), 0 32px 70px rgba(15, 23, 42, 0.14);

  /* Fixed dark ground — used by inverted sections in BOTH colour schemes, so
     these never flip. */
  --night: #0c1526;
  --night-2: #111d33;
  --night-line: rgba(255, 255, 255, 0.1);
  --night-ink: #eaf0f9;
  --night-ink-2: #9fb2cc;
  --night-brand: #7aa5ff;

  /* Metrics */
  --wrap: 1140px;
  --wrap-narrow: 760px;
  --gutter: clamp(20px, 5vw, 40px);
  --radius: 16px;
  --radius-lg: 24px;
  --section-y: clamp(64px, 9vw, 116px);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0a1120;
    --paper-2: #0e1728;
    --surface: #101b2e;
    --surface-2: #142238;
    --ink: #e9eff8;
    --ink-2: #a8bacf;
    --ink-3: #7e91aa;
    --line: #1e2c44;
    --line-2: #2a3b57;
    --brand: #5b8def;
    --brand-2: #86b0ff;
    --brand-ink: #8fb5ff;
    --brand-wash: rgba(91, 141, 239, 0.1);
    --brand-edge: rgba(91, 141, 239, 0.28);
    --teal: #5eead4;
    --ok: #45c96f;
    --ok-wash: rgba(69, 201, 111, 0.12);
    --warn: #e0b13a;
    --warn-wash: rgba(224, 177, 58, 0.14);
    --brand-solid: #1d4ed8;
    --ok-text: #5cd982;
    --warn-text: #e9be55;
    --bad: #ff9494;
    --bad-wash: rgba(255, 148, 148, 0.14);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.28);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.34), 0 18px 40px rgba(0, 0, 0, 0.42);
    --shadow-lg: 0 6px 12px rgba(0, 0, 0, 0.4), 0 32px 70px rgba(0, 0, 0, 0.55);

    color-scheme: dark;
  }
}

/* ----------------------------------------------------------------- reset -- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.018em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: var(--brand-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

ul, ol { margin: 0; padding: 0; }

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

::selection { background: var(--brand-2); color: #fff; }

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  background: var(--brand-solid);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s;
}
.skip-link:focus { top: 12px; }

/* ---------------------------------------------------------------- layout -- */

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

.wrap--narrow { max-width: calc(var(--wrap-narrow) + var(--gutter) * 2); }

section { position: relative; }

.band { padding-block: var(--section-y); }
.band--tight { padding-block: clamp(44px, 6vw, 72px); }
.band--alt { background: var(--paper-2); border-block: 1px solid var(--line); }

.band--night {
  background: var(--night);
  color: var(--night-ink);
  --ink: var(--night-ink);
  --ink-2: var(--night-ink-2);
  --ink-3: #8296b3;
  --line: var(--night-line);
  --line-2: rgba(255, 255, 255, 0.16);
  --surface: var(--night-2);
  --surface-2: #16243d;
  --brand-ink: var(--night-brand);
  --brand-wash: rgba(122, 165, 255, 0.1);
  --brand-edge: rgba(122, 165, 255, 0.26);
  --teal: #5eead4;
  --ok: #4ade80;
  --ok-wash: rgba(74, 222, 128, 0.12);
  --warn: #f0c34d;
  --warn-wash: rgba(240, 195, 77, 0.14);
  /* These must be remapped too. They default to the light-scheme values, which
     are dark enough to vanish against a night-band tint. */
  --brand-solid: #2a5ad4;
  --ok-text: #5cd982;
  --warn-text: #f0c34d;
  --bad: #ff9494;
  --bad-wash: rgba(255, 148, 148, 0.14);
  color-scheme: dark;
}

/* Two-column split that stacks on narrow screens. */
.split {
  display: grid;
  gap: clamp(36px, 6vw, 72px);
  align-items: center;
}

/* Grid items are min-width:auto by default, so one nowrap label deep inside a
   card (a `dropped_at_triage` tag, say) can widen its track past the viewport
   and give the whole page a horizontal scrollbar. Let every track shrink. */
.split > *,
.grid > *,
.hero__grid > *,
.funnel > *,
.footer__grid > *,
.doc-layout > * { min-width: 0; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--copy-wide { grid-template-columns: 1.05fr 0.95fr; }
  .split--visual-wide { grid-template-columns: 0.92fr 1.08fr; }
  /* --flip moves the copy (always first in the DOM, so it reads first on a
     phone and to a screen reader) into the second column. The ratios have to
     mirror too, or "copy-wide" silently becomes "visual-wide". */
  .split--flip > :first-child { order: 2; }
  .split--copy-wide.split--flip { grid-template-columns: 0.95fr 1.05fr; }
  .split--visual-wide.split--flip { grid-template-columns: 1.08fr 0.92fr; }
}

.grid { display: grid; gap: 20px; }
@media (min-width: 700px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--gap, 16px); }

/* ------------------------------------------------------------ typography -- */

.display {
  font-size: clamp(2.5rem, 5.4vw, 3.5rem);
  line-height: 1.03;
  letter-spacing: -0.028em;
}
.display em { font-style: italic; color: var(--brand-ink); }

.h2 {
  font-size: clamp(1.95rem, 3.9vw, 2.85rem);
  letter-spacing: -0.024em;
}
.h2 em { font-style: italic; color: var(--brand-ink); }

.h3 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); letter-spacing: -0.018em; }

.lede {
  font-size: clamp(1.06rem, 1.5vw, 1.2rem);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 56ch;
}

.body { color: var(--ink-2); max-width: 62ch; }
.small { font-size: 0.875rem; color: var(--ink-3); }

.kicker {
  font-family: var(--mono);
  font-size: 0.71rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 16px;
}

.section-head { max-width: 660px; }
.section-head .h2 { margin-bottom: 18px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lede { margin-inline: auto; }

/* ------------------------------------------------------------------ chip -- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 15px 7px 13px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--brand-ink);
}

/* A chip sitting on `--surface` rather than on the page: the default has a
   surface fill, which is invisible inside a card. Used for the tier badge. */
.chip--onCard {
  padding: 6px 12px;
  background: var(--brand-wash);
  border-color: var(--brand-edge);
  letter-spacing: 0.1em;
}

.pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 28%, transparent);
  flex: none;
}
@media (prefers-reduced-motion: no-preference) {
  .pulse { animation: pulse 2.6s ease-in-out infinite; }
  @keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 28%, transparent); }
    50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--ok) 8%, transparent); }
  }
}

/* --------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: 11px;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--brand-solid);
  color: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1), 0 8px 22px color-mix(in srgb, var(--brand-solid) 26%, transparent);
}
.btn--primary:hover { background: color-mix(in srgb, var(--brand-solid) 86%, #000); }

.btn--ghost {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-2);
  box-shadow: var(--shadow-sm);
}
.btn--ghost:hover { border-color: var(--brand-edge); }

.btn--sm { padding: 10px 16px; font-size: 0.875rem; border-radius: 9px; }

.btn-arrow { transition: transform 0.15s ease; }
.btn:hover .btn-arrow { transform: translateX(3px); }

/* --------------------------------------------------------- store badges -- */

.stores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.store-badge {
  display: block;
  border-radius: 10px;
  transition: transform 0.14s ease, filter 0.14s ease;
  line-height: 0;
}
.store-badge:hover { transform: translateY(-2px); }
.store-badge:focus-visible { outline-offset: 4px; }
.store-badge img { height: 52px; width: auto; }

/* Apple ships a black badge; on a dark ground it needs a light plate so the
   artwork stays legible without being altered (Apple's guidelines forbid
   recolouring the badge itself). */
.band--night .store-badge--apple img,
.footer .store-badge--apple img {
  background: #fff;
  border-radius: 9px;
  padding: 1px;
}

/* Apple's badge artwork fills its viewBox; Google's shipped PNG carries ~16%
   transparent padding, which was trimmed when generating badge-google-play.png
   so the two render at the same optical height rather than Google's looking
   smaller. This class is also the hook site.js uses to put the visitor's own
   store first in the row. */
.store-badge--google img { height: 52px; }

/* --------------------------------------------------------------- header -- */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.header[data-scrolled] {
  border-bottom-color: var(--line);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  flex: none;
}
.brand svg { width: 27px; height: 27px; flex: none; }

.nav {
  display: none;
  margin-left: auto;
  align-items: center;
  gap: 28px;
}
.nav a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 0.925rem;
  font-weight: 500;
  transition: color 0.14s;
}
.nav a:hover { color: var(--ink); }

.header__cta { margin-left: auto; flex: none; }
.nav ~ .header__cta { margin-left: 0; }

@media (min-width: 940px) {
  .nav { display: flex; }
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: 4px;
  padding: 0;
  background: none;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  color: var(--ink);
  cursor: pointer;
}
@media (min-width: 940px) { .nav-toggle { display: none; } }

.mobile-nav {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--paper);
  padding: 12px var(--gutter) 22px;
}
.mobile-nav[data-open] { display: block; }
.mobile-nav a {
  display: block;
  padding: 13px 0;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid var(--line);
}
.mobile-nav a:last-child { border-bottom: 0; }

/* ----------------------------------------------------------------- hero -- */

.hero {
  position: relative;
  padding-block: clamp(48px, 7vw, 96px) clamp(56px, 8vw, 104px);
  overflow: hidden;
}

.hero__glow {
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 780px;
  background:
    radial-gradient(46% 52% at 72% 8%, color-mix(in srgb, var(--brand-2) 20%, transparent), transparent 66%),
    radial-gradient(38% 44% at 12% 0%, color-mix(in srgb, var(--teal) 11%, transparent), transparent 62%);
  pointer-events: none;
  z-index: 0;
}

.hero__net {
  position: absolute;
  top: -60px;
  right: -80px;
  width: min(780px, 78vw);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
@media (prefers-color-scheme: dark) { .hero__net { opacity: 0.42; } }

.hero .wrap { position: relative; z-index: 1; }

.hero__grid {
  display: grid;
  gap: clamp(40px, 5vw, 60px);
  align-items: center;
}
@media (min-width: 980px) {
  /* The copy column has to hold "that shows its working." on one line at the
     display size above, so it gets the larger share. */
  .hero__grid { grid-template-columns: 1.1fr 0.9fr; }
}
/* The hero alone runs a little wider than the rest of the page, so the
   headline gets the room it needs without shrinking the product card. */
.hero .wrap { max-width: 1220px; }

.hero__copy .display {
  margin-block: 20px 22px;
  /* Tuned so "The AI literature feed" and "that shows its working." each hold
     one line from 390px up. The vw term matters more than the cap: at 1100px
     the copy column is ~530px and anything above ~4.5vw wraps to three lines;
     the floor is what keeps small phones off a four-line headline. */
  font-size: clamp(2.05rem, 4.4vw, 3.6rem);
}
.hero__cta { margin-top: 30px; }
.hero__reassure {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 20px;
  font-size: 0.865rem;
  color: var(--ink-3);
}
.hero__reassure span { display: inline-flex; align-items: center; gap: 7px; }
.hero__reassure svg { color: var(--ok); flex: none; }

/* --------------------------------------------------- product mock cards -- */

/* position: relative is load-bearing — .paper-card--behind is absolute, and
   without it the offset card resolves against .hero .wrap and hangs outside
   the content column. */
.mock-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 400px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.paper-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 460px;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
}

.paper-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--ink-3);
}

.score {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px 4px 8px;
  border-radius: 999px;
  background: var(--ok-wash);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ok-text);
  white-space: nowrap;
}
.score::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
}

.tag-author {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--warn-wash);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--warn-text);
  white-space: nowrap;
}

.paper-card__title {
  font-family: var(--sans);
  font-size: 1.04rem;
  font-weight: 600;
  line-height: 1.34;
  letter-spacing: -0.012em;
  margin-bottom: 9px;
}

.paper-card__source { font-size: 0.83rem; color: var(--ink-2); margin-bottom: 14px; }
.paper-card__source b { color: var(--brand-ink); font-weight: 600; }

.reason {
  padding: 13px 14px;
  border: 1px solid var(--brand-edge);
  border-radius: 12px;
  background: var(--brand-wash);
}
.reason__label {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-ink);
  margin-bottom: 5px;
}
.reason p { font-size: 0.87rem; line-height: 1.5; color: var(--ink); }

.paper-card__actions { display: flex; gap: 8px; margin-top: 15px; }
.mini-btn {
  flex: 1;
  padding: 9px 6px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-2);
}
.mini-btn--fill { background: var(--brand-solid); border-color: var(--brand-solid); color: #fff; }

.paper-card--behind {
  position: absolute;
  /* Lifted clear of the front card so its header and title actually read as a
     second paper, rather than a sliver of white behind the first. */
  top: -46px;
  left: 20%;
  right: 1%;
  z-index: 1;
  /* width:auto is load-bearing. .paper-card sets width:100%, and on an
     absolutely positioned box that wins over the left/right pair — `right`
     gets dropped as over-constrained and the card hangs past the column. */
  width: auto;
  max-width: none;
  padding: 18px 20px;
  opacity: 0.55;
  transform: rotate(2.2deg) scale(0.95);
  transform-origin: top right;
  box-shadow: var(--shadow-md);
}
/* Below the hero's two-column breakpoint the stage is full-bleed, so the
   offset card would hang off the side (clipped, but visibly cropped). */
@media (max-width: 979px) { .paper-card--behind { display: none; } }

/* ------------------------------------------------------------- funnel ---- */

.funnel {
  display: grid;
  gap: 14px;
  counter-reset: stage;
}
@media (min-width: 820px) { .funnel { grid-template-columns: repeat(4, 1fr); } }

.stage {
  position: relative;
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.stage__n {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--ink-3);
}
.stage__big {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.6vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 8px 0 6px;
}
.stage__label { font-size: 0.9rem; font-weight: 600; margin-bottom: 4px; }
.stage__note { font-size: 0.83rem; color: var(--ink-3); line-height: 1.5; }

.stage--last .stage__big { color: var(--brand-ink); }

@media (min-width: 820px) {
  .stage + .stage::before {
    content: '';
    position: absolute;
    left: -14px;
    top: 50%;
    width: 14px;
    height: 1px;
    background: var(--line-2);
  }
}

/* ---------------------------------------------------------------- steps -- */

.step {
  position: relative;
  padding: 28px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  height: 100%;
}
.step__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 18px;
  border: 1px solid var(--brand-edge);
  border-radius: 10px;
  background: var(--brand-wash);
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--brand-ink);
}
.step h3 { font-family: var(--sans); font-size: 1.08rem; font-weight: 650; letter-spacing: -0.01em; margin-bottom: 9px; }
.step p { font-size: 0.93rem; color: var(--ink-2); line-height: 1.58; }

/* ------------------------------------------------------------- features -- */

.feature {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  height: 100%;
  transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
.feature:hover {
  border-color: var(--brand-edge);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 16px;
  border-radius: 11px;
  background: var(--brand-wash);
  color: var(--brand-ink);
}
.feature h3 { font-family: var(--sans); font-size: 1.02rem; font-weight: 650; letter-spacing: -0.01em; margin-bottom: 8px; }
.feature p { font-size: 0.9rem; color: var(--ink-2); line-height: 1.55; }

/* ------------------------------------------------- diagnosis / terminal -- */

.trace {
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.trace__bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.trace__body { padding: 8px 0; }

.trace-row {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 11px 18px;
  font-size: 0.875rem;
  line-height: 1.45;
}
.trace-row + .trace-row { border-top: 1px solid var(--line); }
.trace-row__mark { font-family: var(--mono); font-weight: 700; line-height: 1.5; }
.trace-row--pass .trace-row__mark { color: var(--ok-text); }
.trace-row--fail .trace-row__mark { color: var(--bad); }
.trace-row .trace-row__mark--n { color: var(--brand-ink); }
.trace-row__stage { color: var(--ink-2); }
.trace-row__stage b { color: var(--ink); font-weight: 600; }
.trace-row__tag {
  font-family: var(--mono);
  font-size: 0.68rem;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink-3);
  white-space: nowrap;
}

/* Below ~430px the stage name and its tag cannot share a line without one of
   them forcing the page wider than the screen. Stack instead. */
@media (max-width: 430px) {
  .trace-row {
    grid-template-columns: 20px 1fr;
    gap: 8px;
  }
  .trace-row__tag { grid-column: 2; justify-self: start; }
}
.trace-row--fail .trace-row__tag {
  background: var(--bad-wash);
  border-color: color-mix(in srgb, var(--bad) 34%, transparent);
  color: var(--bad);
}

.trace__fix {
  margin: 4px 18px 16px;
  padding: 15px 16px;
  border: 1px solid var(--brand-edge);
  border-radius: 12px;
  background: var(--brand-wash);
}
.trace__fix .reason__label { margin-bottom: 7px; }
.trace__fix p { font-size: 0.88rem; line-height: 1.55; }
.trace__fix q { font-style: italic; }
.trace__fix-actions { display: flex; gap: 8px; margin-top: 13px; }

/* ------------------------------------------------------ calibrate block -- */

.calib { padding: 6px 0; }
.calib-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 18px;
  font-size: 0.87rem;
}
.calib-row + .calib-row { border-top: 1px solid var(--line); }
.calib-row__verdict {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 6px;
  white-space: nowrap;
}
.v-good { background: var(--ok-wash); color: var(--ok-text); }
.v-bad { background: var(--bad-wash); color: var(--bad); }
.v-ask { background: var(--surface-2); color: var(--ink-3); border: 1px solid var(--line); }
.calib-row__why { font-size: 0.76rem; color: var(--ink-3); white-space: nowrap; }
@media (max-width: 560px) {
  .calib-row { grid-template-columns: auto 1fr; }
  .calib-row__why { display: none; }
}

/* --------------------------------------------------------------- phones -- */

.phones {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(24px, 4vw, 52px);
  flex-wrap: wrap;
}

/* The caption sits OUTSIDE .phone — inside it, the device's dark gradient
   swallows it and it reads as part of the screenshot. */
.phone-fig { margin: 0; }

.phone {
  position: relative;
  width: min(280px, 74vw);
  padding: 9px;
  border-radius: 42px;
  background: linear-gradient(160deg, #2b3648, #0e1523 55%);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  flex: none;
}
.phone__screen {
  position: relative;
  border-radius: 34px;
  overflow: hidden;
  background: #1e293b;
}
.phone__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 22px 6px;
  background: #1e293b;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.phone__status svg { opacity: 0.9; }
.phone__notch {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 84px;
  height: 24px;
  border-radius: 999px;
  background: #05070c;
  z-index: 2;
}
.phone img { border-radius: 0 0 34px 34px; }
.phone__caption {
  margin-top: 18px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--ink-2);
}
.phone-fig--offset { margin-top: 34px; }
@media (max-width: 780px) { .phone-fig--offset { margin-top: 0; } }

/* ------------------------------------------------------------- honesty --- */

.honest {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 780px) { .honest { grid-template-columns: repeat(2, 1fr); } }

.honest__item { background: var(--surface); padding: 24px 26px; }
.honest__item h3 {
  font-family: var(--sans);
  font-size: 0.98rem;
  font-weight: 650;
  letter-spacing: -0.005em;
  margin-bottom: 8px;
  display: flex;
  align-items: baseline;
  gap: 9px;
}
.honest__item h3::before {
  content: '—';
  font-family: var(--mono);
  color: var(--warn-text);
  font-weight: 700;
}
.honest__item p { font-size: 0.9rem; color: var(--ink-2); line-height: 1.55; }

/* ------------------------------------------------------------- pricing --- */

/* Two tiers side by side. The cards are `.grid.grid--2` children on purpose
   rather than a bespoke container: `.grid > *` is in the `min-width: 0` list at
   the top of this file, and a new container class would not be. Without it a
   non-breaking price string can widen its track and put a horizontal scrollbar
   on the whole page. `.grid--2` also gives the mobile stack for free — one
   column until 700px. */
.tier {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(26px, 3.2vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

/* The tier carrying the introductory month. A brand-tinted edge and a deeper
   shadow, not a colour fill: it should read as "start here" without turning the
   cheaper plan into an advert. */
.tier--lead {
  border-color: var(--brand-edge);
  box-shadow: var(--shadow-md);
}

.tier__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  min-height: 30px;
}
.tier__name {
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.tier__amount {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  margin: 18px 0 0;
}
/* Reset the serif display face inside the amount so "/ month" reads as a label
   rather than part of the figure. */
.tier__period {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-3);
}
.tier__note {
  margin-top: 12px;
  font-size: 0.875rem;
  color: var(--ink-2);
  min-height: 2.7em;
}
/* `margin-top: auto` pins the closing line to the bottom of whichever card is
   shorter, so the two cards' footers align even when the lists differ. */
.tier__foot {
  margin-top: auto;
  padding-top: 20px;
  font-size: 0.85rem;
  color: var(--ink-3);
}

.price-list {
  display: grid;
  gap: 11px;
  margin: 24px 0 4px;
  text-align: left;
  list-style: none;
}
.price-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--ink-2);
}
.price-list svg { color: var(--ok); flex: none; margin-top: 4px; }
/* The allowance is the only line that differs between the two plans, so it is
   the only one that gets emphasis. */
.price-list strong { color: var(--ink); font-weight: 620; }

/* The fine print under the tiers: renewal, where you buy, what stops if you
   don't. Narrower than the grid so it reads as a footnote to it. */
.pricing-fine {
  max-width: 62ch;
  margin-inline: auto;
  text-align: center;
}
.pricing-fine p + p { margin-top: 12px; }

/* ------------------------------------------------------------------ faq -- */

.faq { border-top: 1px solid var(--line); }
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 4px;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  flex: none;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq details > div { padding: 0 4px 24px; max-width: 68ch; }
.faq details p { color: var(--ink-2); font-size: 0.96rem; }
.faq details p + p { margin-top: 12px; }

/* -------------------------------------------------------------- closing -- */

.closing {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: clamp(44px, 6vw, 76px) clamp(26px, 5vw, 60px);
  background: linear-gradient(140deg, #1a327c 0%, #0f2050 52%, #0b1730 100%);
  color: #fff;
  text-align: center;
}
.closing::after {
  content: '';
  position: absolute;
  inset: auto -20% -60% -20%;
  height: 60%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(122, 165, 255, 0.25), transparent 70%);
  pointer-events: none;
}
.closing > * { position: relative; z-index: 1; }
.closing .h2 { color: #fff; }
.closing .h2 em { color: #a8c5ff; }
.closing p { color: rgba(255, 255, 255, 0.78); margin-inline: auto; }
.closing .stores { justify-content: center; margin-top: 32px; }

/* --------------------------------------------------------------- footer -- */

.footer {
  background: var(--night);
  color: var(--night-ink-2);
  padding-block: clamp(48px, 6vw, 72px) 36px;
}
.footer a { color: var(--night-ink-2); text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer .brand { color: #fff; }

.footer__grid {
  display: grid;
  gap: 36px;
}
@media (min-width: 620px) {
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
}
/* Four columns only once there is room for the support address, which has no
   break opportunity and blew the page wider than the viewport at ~768px. */
@media (min-width: 900px) {
  .footer__grid { grid-template-columns: 1.7fr 1fr 1fr 1.15fr; }
}
.footer li a { overflow-wrap: anywhere; }

.footer h4 {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 14px;
}
.footer ul { list-style: none; }
.footer li + li { margin-top: 10px; }
.footer li { font-size: 0.92rem; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  align-items: center;
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid var(--night-line);
  font-size: 0.82rem;
  color: #7f93b0;
}

/* ------------------------------------------------------------ documents -- */

.doc-header { padding-block: clamp(44px, 6vw, 76px) 0; }
.doc-header .display { font-size: clamp(2.2rem, 5vw, 3.2rem); }

.doc {
  padding-block: 40px clamp(64px, 8vw, 96px);
  font-size: 1rem;
  line-height: 1.7;
}
.doc-layout { display: grid; gap: 44px; }
@media (min-width: 1000px) {
  .doc-layout { grid-template-columns: 236px 1fr; gap: 60px; align-items: start; }
}

.toc { display: none; }
@media (min-width: 1000px) {
  .toc {
    display: block;
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    padding-right: 8px;
  }
}
.toc h4 {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.toc ol { list-style: none; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a {
  display: block;
  padding: 6px 0 6px 26px;
  position: relative;
  font-size: 0.875rem;
  color: var(--ink-2);
  text-decoration: none;
  line-height: 1.4;
  border-left: 2px solid transparent;
  transition: color 0.14s, border-color 0.14s;
}
.toc a::before {
  content: counter(toc);
  position: absolute;
  left: 10px;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-3);
}
.toc a:hover, .toc a[aria-current='true'] { color: var(--brand-ink); }
.toc a[aria-current='true'] { border-left-color: var(--brand-2); }

.prose { max-width: 74ch; }
.prose > * + * { margin-top: 18px; }
.prose h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  letter-spacing: -0.02em;
  margin-top: 52px;
  padding-top: 4px;
  scroll-margin-top: 96px;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-family: var(--sans);
  font-size: 1.02rem;
  font-weight: 650;
  letter-spacing: -0.008em;
  margin-top: 30px;
}
.prose p, .prose li { color: var(--ink-2); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose ul, .prose ol { padding-left: 22px; display: grid; gap: 9px; }
.prose li::marker { color: var(--ink-3); }
.prose a { color: var(--brand-ink); }

.prose .callout {
  padding: 18px 20px;
  border: 1px solid var(--brand-edge);
  border-radius: 12px;
  background: var(--brand-wash);
}
.prose .callout p { color: var(--ink); }
.prose .callout > * + * { margin-top: 10px; }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.prose table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.prose th, .prose td {
  text-align: left;
  vertical-align: top;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
}
.prose th {
  font-weight: 600;
  color: var(--ink);
  background: var(--surface-2);
  border-bottom-color: var(--line-2);
  white-space: nowrap;
}
.prose tbody tr:last-child td { border-bottom: 0; }

.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* --------------------------------------------------------------- motion -- */

@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }
  [data-reveal].is-in { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --------------------------------------------------------------- utils --- */

/* Small named pieces, so the markup carries no style="" attributes and the
   Content-Security-Policy can stay strict about inline styles. */
.brand__mark { color: var(--brand-ink); }
.footer .brand__mark { color: #7aa5ff; }
.kicker--teal { color: #5eead4; }

.inline-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.inline-row--tight { gap: 5px; flex-wrap: nowrap; }

.score--adjacent { background: var(--warn-wash); color: var(--warn-text); }
.score--adjacent::before { background: var(--warn); }

.trace-row__mark--n { color: var(--brand-ink); }
.trace-row--muted .trace-row__stage { opacity: 0.55; }

.mock-stage--auto { min-height: auto; }
.stores--center { justify-content: center; }
.display--doc { font-size: clamp(2.2rem, 5vw, 3.2rem); }

.note { font-size: 0.875rem; color: var(--ink-2); }
.closing .lede { color: rgba(255, 255, 255, 0.78); max-width: 44ch; }
.closing .note { color: rgba(255, 255, 255, 0.55); }

.footer__blurb { color: #7f93b0; max-width: 34ch; }
.footer__bottom--bare { margin-top: 0; padding-top: 0; border-top: 0; }

.link-list { list-style: none; display: grid; gap: 12px; max-width: 34ch; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.center { text-align: center; }
.mt-s { margin-top: 12px; }
.mt-m { margin-top: 22px; }
.mt-l { margin-top: 38px; }
.nowrap { white-space: nowrap; }