/* ==========================================================================
   EZ Web, light theme PROTOTYPE (2026-10-05). Homepage only.

   Loaded after styles.css by index.html and by nothing else, so the compare,
   learn and service pages keep the dark sheet untouched. Three rules, all from
   Ezra on 2026-10-05:

   1. Light page. Paper, white cards, ink type.
   2. No mono caps labels. Every small label is sentence case Inter. JetBrains
      Mono is left on digits only (list numbers, chart values, step counters).
   3. Zero glow. No cast shadow, no blur, no tint behind anything. Depth is a
      surface step plus a hairline, and that is all. The one ring left is the
      form focus ring, which is an accessibility affordance.

   The accent changes job. Lime cannot be text on white, so here it is a
   highlighter and it means one thing: you. It sits behind "yours" in the hero
   and behind "Your site" in the Then and Now windows, plus the logo mark.
   Everything else that was lime is ink.

   AI answers stay dark. The hero ChatGPT card and the Now window are drawn as
   dark screens on the light page, so "the AI answer" is the same object every
   time it appears. They get their own token scope below.
   ========================================================================== */
:root {
  --bg: #f5f6f3;
  --bg-2: #e6e9e2;
  --card: #ffffff;
  --card-2: #ffffff;
  --panel: #ffffff;
  --line: rgba(16, 18, 20, 0.18);
  --rule: rgba(16, 18, 20, 0.10);
  --ink: #101214;
  --muted: #101214;
  /* Every var(--lime) in styles.css resolves to ink on this page. */
  --lime: #101214;
  --lime-soft: #101214;
  --lime-deep: #101214;
  /* The highlighter. Used as a background only, never as a text colour. */
  --mark: #a6ff2e;
  --screen: #14161a;
}
::selection { background: var(--mark); color: var(--ink); }

/* Dark screens: the two AI answer mockups keep the dark token set. */
.out-card.ai, .sa-win.ai {
  --card: var(--screen); --card-2: var(--screen);
  --ink: #fbfcfd; --muted: #fbfcfd;
  --rule: rgba(255, 255, 255, 0.08); --line: rgba(255, 255, 255, 0.12);
  --lime: #a6ff2e;
  color: var(--ink);
}

/* ---------- Page furniture ---------- */
.grain { display: none; }
header { background: var(--bg); backdrop-filter: none; border-bottom: 1px solid var(--rule); }
.logo span { color: var(--ink); }
.logo b { background: var(--mark); color: var(--ink); padding: 0 .14em; border-radius: 3px; }
.nav-burger:hover { border-color: var(--ink); }
.mobile-menu { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
.mobile-menu a.lnk { border-bottom-color: var(--rule); }
footer { border-top-color: var(--rule); }
.wa-float { color: #fff; box-shadow: none; }

/* ---------- Buttons ---------- */
/* Ink, not lime: a lime button on this paper has about 1.15 to 1 contrast at
   its edge and reads as a washed-out block. Lime arrives on hover. */
.btn { color: #fff; box-shadow: none; }
.btn:hover { background: var(--mark); color: var(--ink); box-shadow: none; }
.btn.ghost { color: var(--ink); border-color: rgba(16, 18, 20, 0.30); }
.btn.ghost:hover { background: transparent; color: var(--ink); border-color: var(--ink); }
.cta-note a, .strip-note a { text-decoration-color: rgba(16, 18, 20, 0.35); }

/* ---------- Labels: one quiet style, sentence case ---------- */
.eyebrow, .sa-k, .r-policy, .hero-trust-strip .lbl, .fs-role, .ai-top, .sa-ailab, .cite-tag, .tabbar button {
  font-family: "Inter", -apple-system, sans-serif; text-transform: none; letter-spacing: 0;
}
.eyebrow, .r-policy, .hero-trust-strip .lbl, .fs-role { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); opacity: 1; }
.sa-k { font-size: var(--fs-md); font-weight: 600; color: var(--ink); }
.ai-top, .sa-ailab { font-size: var(--fs-sm); font-weight: 500; color: var(--muted); }
.cite-tag { font-size: var(--fs-mock); font-weight: 600; }
.tabbar button { font-size: var(--fs-sm); font-weight: 500; padding: 9px 20px; }

/* ---------- Headline highlighter ---------- */
/* A hard stop, not a fade: the marker covers the lower part of the word. */
.hl-dim em { color: var(--ink); background: linear-gradient(transparent 56%, var(--mark) 56%, var(--mark) 92%, transparent 92%); padding: 0 .06em; }

/* ---------- Hero ---------- */
.hero-trust-strip { border-top-color: var(--rule); }
.trust-logos img { filter: brightness(0); opacity: .55; }
/* The logo row stands still. Same layout the reduced-motion rule already gives. */
.hero-trust-strip .marquee { margin-inline: 0; -webkit-mask-image: none; mask-image: none; }
.marquee-track { animation: none; width: auto; }
.hero-trust-strip .marquee .trust-logos { flex-wrap: wrap; justify-content: center; gap: 18px 44px; padding-right: 0; }
.marquee .trust-logos[aria-hidden] { display: none; }

.out-card, .out-card.ai { box-shadow: none; }
.out-card.serp { box-shadow: none; }
.g-search { box-shadow: none; border: 1px solid var(--line); }
/* Entrance without the blur-in. */
.hero-visual .out-card.serp { animation: lt-rise .7s var(--ease) .2s both; }
.hero-visual .out-card.ai { animation: lt-rise .7s var(--ease) .36s both; }
@keyframes lt-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---------- Cards: white, one hairline, nothing cast ---------- */
.sa-win, .sa-data, .b-media, .receipt, .audit-form, .tabbar { box-shadow: none; }
.sa-win.ai { box-shadow: none; }
.benefit-sm .b-media { background: var(--card); }
.sa-chrome, .r-chrome { background: rgba(16, 18, 20, 0.035); }
.sa-win.ai .sa-chrome { background: rgba(0, 0, 0, 0.28); }

/* ---------- Then / Now ---------- */
.sa-dots i { background: #cdd1cc; }
.sa-q { background: var(--bg); }
.sa-q svg { color: #8a9099; }
.sa-q.plain { background: rgba(0, 0, 0, 0.34); color: #c2c9d2; }
.sa-list li .t, .sa-list li:nth-child(-n+3) .t { color: #1a0dab; }
.sa-list li.you { margin-left: 0; padding-left: 0; border-left: 0; }
.sa-list li.you .t { color: var(--ink); background: var(--mark); padding: 0 6px; border-radius: 3px; }
.sa-src span.hit { background: var(--mark); color: #101214; }
.sa-miss { color: #9aa2ad; }
.sa-bar .tr { background: rgba(16, 18, 20, 0.08); }

/* ---------- Form ---------- */
.field label { color: var(--ink); }
.field input, .field select { background: var(--bg); border-color: var(--line); }
.field input::placeholder { color: #8a9099; }
.field input:focus, .field select:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(16, 18, 20, 0.12); }

/* ---------- Motion ---------- */
/* Sections no longer fade up as blocks. The masked headline lines and the
   staggered groups are the two motions left. */
html.has-js [data-reveal] { opacity: 1; transform: none; }

/* ==========================================================================
   Round 2 (Ezra, 2026-10-05): lime CTAs, no progress bar, and a geometric
   vocabulary so the light page has a face. One idea drawn four ways: a field
   of squares (companies) with three picked in lime. It is the hero backdrop,
   the edge between sections, and the three step drawings.
   ========================================================================== */
.progress { display: none; }

/* CTAs: lime at rest with an ink keyline, ink on hover. Phone button too. */
.btn { background: var(--mark); color: #101214; box-shadow: none; }
.btn:hover { background: #101214; color: #fff; box-shadow: none; }
.btn.ghost { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); border-color: transparent; }
.btn.ghost:hover { background: var(--ink); color: var(--bg); border-color: transparent; }
.wa-float { background: var(--mark); color: #101214; box-shadow: none; transition: background .2s var(--ease), color .2s var(--ease); }
.wa-float:hover { background: #101214; color: #fff; transform: none; }

/* Hero corner: small squares dissolving in from the top right, three in lime.
   One drawing per size so the pixels stay 8px at every width. */
.hero::before {
  content: ""; position: absolute; top: 0; right: 0; width: 376px; height: 136px; z-index: 0; pointer-events: none;
  background: url(/assets/img/light/corner.svg?3) top right / 376px 136px no-repeat;
}
@media (min-width: 900px) {
  .hero::before { width: 600px; height: 232px; background: url(/assets/img/light/corner-lg.svg?3) top right / 600px 232px no-repeat; }
}

/* Section edges: the next section arrives as squares, densest at its own edge. */
main > section { background: var(--bg); }
main > section.alt { background: var(--bg-2); }
main > section + section { border-top: 0; }
main > section + section::before, main > section + section::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: clamp(40px, 4.6vw, 72px); pointer-events: none;
}
main > section + section::before {
  background: inherit;
  -webkit-mask: url(/assets/img/light/dither.svg) bottom left / auto 100% repeat-x; mask: url(/assets/img/light/dither.svg) bottom left / auto 100% repeat-x;
}
main > section + section::after { background: url(/assets/img/light/dither-mark.svg) bottom left / auto 100% repeat-x; }
/* Same surface on both sides: a hairline is enough. */
main > section.alt + section.alt, main > section:not(.alt) + section:not(.alt):not(.cta-final) { border-top: 1px solid var(--rule); }
main > section.alt + section.alt::before, main > section.alt + section.alt::after,
main > section:not(.alt) + section:not(.alt):not(.cta-final)::before, main > section:not(.alt) + section:not(.alt):not(.cta-final)::after { display: none; }

/* The closing section is the one dark room on the page. */
.cta-final, main > section.stakes {
  --bg: #101214; --bg-2: #14161a; --card: #191d23; --card-2: #191d23; --panel: #191d23;
  --ink: #fbfcfd; --muted: #fbfcfd; --rule: rgba(255, 255, 255, 0.09); --line: rgba(255, 255, 255, 0.16); --lime: #a6ff2e;
  color: var(--ink);
}
.cta-final .btn:hover { background: #fff; color: #101214; box-shadow: none; }
.cta-final .field input:focus, .cta-final .field select:focus { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.16); }

/* Step drawings. */
.flow-art { display: block; width: 220px; max-width: 100%; height: auto; aspect-ratio: 220 / 96; margin: 0 0 22px; }

/* ==========================================================================
   Round 6 (Ezra, 2026-10-06): a second dark room higher up, and a smaller
   hero headline so the shortlist line does not strand a word on desktop.
   ========================================================================== */
.hero h1 .ln { text-wrap: balance; }
@media (min-width: 960px) { .hero:has(.hero-audit) h1 { font-size: clamp(2.6rem, 4.3vw, 3.9rem); } }

/* "Why now" goes dark. The Then window and the data card stay paper, so the
   old search result reads as a sheet lying on the dark table; the AI window
   lifts one step and takes a hairline so it does not sink into the section. */
.stakes .sa-win:not(.ai), .stakes .sa-data {
  --bg: #f5f6f3; --card: #ffffff; --card-2: #ffffff; --panel: #ffffff;
  --ink: #101214; --muted: #101214; --rule: rgba(16, 18, 20, 0.10); --line: rgba(16, 18, 20, 0.18); --lime: #101214;
  color: var(--ink); box-shadow: none;
}
.stakes .sa-win.ai { --card: #1b1f25; --card-2: #1b1f25; box-shadow: none; }
.cta-final .hl-dim em, .stakes .hl-dim em { color: #101214; }

/* Round 7 (Ezra, 2026-10-06): the pixel edge is drawn over the bottom of the
   section above it, so that section gets the edge height back as padding. */
main { --edge: clamp(40px, 4.6vw, 72px); }
main > section:has(+ section) { padding-bottom: calc(clamp(52px, 5vw, 80px) + var(--edge)); }
main > section.hero:has(+ section) { padding-bottom: calc(clamp(70px, 9vw, 120px) + var(--edge)); }
main > section.alt:has(+ section.alt), main > section:not(.alt):not(.hero):has(+ section:not(.alt):not(.cta-final)) { padding-bottom: clamp(52px, 5vw, 80px); }

/* ==========================================================================
   Round 8 (Ezra, 2026-10-06): the light sheet now loads on every page.
   Everything below is for pages other than the homepage.
   ========================================================================== */
/* Rule 2 again: page-level caps labels become sentence case Inter. */
.cmp-card .tag, .lf-step .n, .pub-tag, .this-one .tag, .client .tag, .pipe .pipe-head, .proj .k, .stack-card .k, .early-row .who small,
.ln-card .n, .ln-soon .n, .note .lbl, .next-read .lbl {
  font-family: "Inter", -apple-system, sans-serif; text-transform: none; letter-spacing: 0;
}

/* Text that was hardcoded near-white for the dark sheet. */
.price-card li, .article p.opener, .article figcaption b { color: var(--ink); }
.ln-card h2, .article h2, .article h3, .pull p, .next-read a.nr { color: var(--ink); }
.svc-card .num { color: rgba(16, 18, 20, 0.07); }
.chip .tag { font-family: "Inter", -apple-system, sans-serif; text-transform: none; letter-spacing: 0; color: var(--muted); }
.led.down li::before { color: rgba(16, 18, 20, 0.4); }
.bg-glyph { color: rgba(16, 18, 20, 0.04); }

/* Lime as a fill keeps ink text; lime as a tint becomes the highlighter. */
.price-card .badge, .src-chip.on, .orbit-core { background: var(--mark); color: #101214; box-shadow: inset 0 0 0 1.5px #101214; }
.price-card { box-shadow: inset 0 0 0 1px var(--rule); }
.price-card.pop { box-shadow: inset 0 0 0 1.5px var(--ink); }
.src-chip:hover { border-color: var(--ink); background: rgba(16, 18, 20, 0.05); }
.field select option { background: #fff; }
.compare .c-col.us { background: rgba(166, 255, 46, 0.28); }
.compare .c-col + .c-col { border-left-color: var(--rule); }
.mark.yes { background: var(--mark); color: #101214; }
.mark.no { background: rgba(16, 18, 20, 0.06); color: rgba(16, 18, 20, 0.4); }
.mark.mid { background: rgba(16, 18, 20, 0.08); }

/* Hairlines and dashed boxes that were white at low alpha. */
.ring { border-color: rgba(16, 18, 20, 0.10); }
.chip .disc { border-color: var(--line); background: var(--card); }
.ln-soon, .note { border-color: rgba(16, 18, 20, 0.28); }
.ln-card a, .article a { text-decoration-color: rgba(16, 18, 20, 0.35); }
.orbit-card .dots { opacity: 0; }
.ez-modal-card { box-shadow: inset 0 0 0 1px var(--line); }

/* Page-level style blocks load after this sheet, so the label reset is
   repeated with one more step of specificity to win on every page. */
html .cmp-card .tag, html .lf-step .n, html .pub-tag, html .this-one .tag, html .client .tag, html .pipe .pipe-head, html .proj .k,
html .stack-card .k, html .early-row .who small, html .ln-card .n, html .ln-soon .n, html .note .lbl, html .next-read .lbl,
html .art-meta, html .case-tag, html .compare-row.head, html .led h3, html .price-card .badge, html .spec-k, html .chip .tag {
  font-family: "Inter", -apple-system, sans-serif; text-transform: none; letter-spacing: 0;
}
/* The curved dark dividers belonged to the dark sheet. The pixel edge replaces them. */
.divider { display: none; }
html .peek { border-color: var(--line); }

/* The law firm diagrams were drawn for the dark sheet and stay on a dark
   screen, the same object as the AI answer cards. The six how-it-works scenes
   are redrawn in the page: paper, ink keyline, lime highlighter. */
html .lf-art { background: var(--screen); border-color: transparent; }
html .ws-done h3, html .ws-links b { color: var(--ink); }
.chip .disc { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* 2026-10-08, Ezra: three colours (paper, ink, lime), so no grey type: --muted
   resolves to ink in every scope above. One corner radius for every box, button
   and chip; circles stay circles. No keyline on a media frame or the lime CTA. */
:root { --r: 8px; --r-sm: 8px; }
.g-search, .sa-q, .sa-src span, .cite, .rank-chip, .src-chip, .tabbar, .tabbar button, .price-card .badge { border-radius: var(--r); }
.logo b, .sa-list li.you .t { border-radius: 0; }
.sa-bar .fl { opacity: 1 !important; }
.sa-miss, .sa-q.plain { color: inherit; }
/* The hero's second line is the lime one: ink type on a highlighter fill that
   hugs the words, covers the lower half of the letters and breaks into pixels at
   its right end. Lime type on paper cannot be read. */
.hero h1 .hl-fill {
  padding: 0 .6em 0 .08em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5' preserveAspectRatio='none' shape-rendering='crispEdges' fill='%23f5f6f3'%3E%3Cpath d='M3 0h1v1h-1zM3 2h1v3h-1zM2 1h1v1h-1zM2 4h1v1h-1zM1 3h1v1h-1zM0 0h1v1h-1z'/%3E%3C/svg%3E") right 92.6% / .44em 46% no-repeat,
    linear-gradient(transparent 50%, var(--mark) 50%, var(--mark) 96%, transparent 96%);
}
.hero h1 .hl-dim em { background: none; padding: 0; }
.cite-tag { border-radius: var(--r); }
.rdct { border-radius: 0; }