/* ═══════════════════════════════════════════════════════════════════════
   v3-dark.css — brings the old pages onto the v2 palette.

   Load AFTER styles-v3.css. It mostly only redefines the tokens that sheet
   already declares, so all 739 of its rules keep working and simply resolve
   to different values.

   WHY AN OVERRIDE AND NOT AN EDIT
   Nine live pages link styles-v3.css — 404, analytics, business, classic,
   estimate, faq, scan, work and the blog. Editing it moves all nine at once
   with no way back. A second sheet is opt-in per page and removed by
   deleting one <link>.

   THE THREE THINGS TOKENS ALONE COULD NOT FIX, all found by measuring the
   live page rather than by reading it:

   1. --teal-900 was the DARK end of the ink ramp, and the result CTA used it
      as a BACKGROUND with white text on top. Inverting the ramp put white on
      near-white. Panels that used it as a surface are restated below.
   2. The pass/warn greens and ambers are hard-coded (#1f8a5b, #c98a1b), not
      tokenised, and both are far too dark to read on a dark ground. 67
      elements measured under 3:1 before these rules.
   3. The old accent was vermilion carrying WHITE text. Lime needs DARK text
      or it is unreadable.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* grounds: warm cream paper becomes the deep blue-black of the landing */
  --paper:      #050B14;
  --paper-2:    #0A1320;
  --white:      #121E2E;   /* was #fff — cards are raised panels now, not paper */

  /* ink ramp, inverted. --ink-faint is lighter than a straight inversion
     would give: measured 2.75:1 on the card colour, which fails. */
  --ink:        #ECEEF1;
  --ink-soft:   #9AA4B0;
  --ink-faint:  #7F8A97;

  --teal-900:   #ECEEF1;
  --teal-800:   #D6DBE2;
  --teal-700:   #B4BCC6;
  --teal-500:   #9AA4B0;
  --teal-300:   #6B7683;
  --slate:      #9AA4B0;
  --slate-deep: #A7AFB9;
  --mist:       #2A3646;

  --line:       rgba(236,238,241,0.22);
  --line-soft:  rgba(236,238,241,0.10);
  --line-hard:  rgba(236,238,241,0.55);

  --accent:      #C0FF00;
  --accent-dark: #A8E000;
  --accent-ink:  #C0FF00;
  --accent-2:    #4A93E8;
  --sand:        #C5AE79;

  --font-body:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* semantic trio, lifted to read on a dark ground */
  --ok:   #5FD38C;
  --mid:  #F2B33C;
  --bad:  #FF7A6B;
  --on-accent: #050B14;
}

html, body{ background: var(--paper); color: var(--ink); }


/* ── SPECIFICITY NOTE ─────────────────────────────────────────────────────
   The page's own <style> block sits AFTER this <link> in the document, so at
   equal specificity ITS rules win on source order. Every override below is
   therefore prefixed with :root, which adds a class-level unit and beats the
   page rule without reaching for !important. Measured, not assumed: without
   the prefix, 22 elements stayed on their old colours.
   ───────────────────────────────────────────────────────────────────────── */
/* ── 1. panels that used the dark ink as a SURFACE ────────────────────── */:root .res-cta,
:root .gate,
:root .gate-inner,
:root .sent-inner{ background: #121E2E; }:root .res-cta h3,
:root .res-cta p,
:root .res-cta .btn-ghost{ color: var(--ink); }:root .res-cta .btn-ghost{ border-color: var(--line); }

/* ── 2. the semantic trio, hard-coded and too dark ────────────────────── */:root .check .pts.pass{ color: var(--ok);  background: rgba(95,211,140,.12); }:root .check .pts.warn{ color: var(--mid); background: rgba(242,179,60,.14); }:root .check .pts.fail{ color: var(--bad); background: rgba(255,122,107,.14); }:root .check .ico.pass,
:root .dot.pass,
:root .cat-bar .cb-seg.pass{ background: var(--ok); }:root .check .ico.warn,
:root .dot.warn,
:root .cat-bar .cb-seg.warn{ background: var(--mid); }:root .check .ico.fail,
:root .dot.fail,
:root .cat-bar .cb-seg.fail{ background: var(--bad); }:root .check .ico{ color: var(--on-accent); }:root .teaser-find.ok{ border-left-color: var(--ok); }:root .teaser-find.ok .tf-k{ color: var(--ok); }:root .gate-check{ background: var(--ok); color: var(--on-accent); }:root .psi-verified{ color: var(--ok); }:root .grade-ring .s{ color: var(--ink-faint); }

/* ── 3. the accent flip: lime cannot carry white text ─────────────────── */:root .scan-btn,
:root .res-cta .btn-primary,
:root .gate-form button,
:root .btn-primary{
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}:root .gate-lock{ background: var(--accent); color: var(--on-accent); }

/* narrative block was a pale card on paper */:root .narr,
:root .narrative{ background: var(--paper-2); color: var(--ink-soft); }:root .narr strong,
:root .narrative strong{ color: var(--ink); }

/* inputs were white boxes */:root input,
:root textarea,
:root select{
  background: var(--paper-2);
  color: var(--ink);
  border-color: var(--line);
}:root input::placeholder,
:root textarea::placeholder{ color: var(--ink-faint); }

/* the same grain the landing carries, so the surfaces match */body::after{
  content:"";position:fixed;inset:-160px;z-index:60;pointer-events:none;
  opacity:.13;background-repeat:repeat;background-size:190px 190px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='190' height='190' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── 4. the shared chrome ─────────────────────────────────────────────────
   Two more surface-vs-ink inversions, found by measuring the rendered nav and
   footer rather than by reading CSS — these rules live in each page's inline
   <style>, not in styles-v3.css, so a token change could never reach them.

   The sticky nav was a LIGHT frosted bar: rgba(238,242,243,.72), hard-coded,
   so it stayed light over a dark page and every link in it measured 2.24:1.
   The footer was painting itself with the old dark ink, which now resolves
   light — same failure as the result CTA on /scan.
   ───────────────────────────────────────────────────────────────────────── */
:root .nav,
:root header.nav,
:root .nav-inner{
  background: rgba(5,11,20,.78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
:root .nav a,
:root .ncol,
:root .avail{ color: var(--ink); }
:root .ncol:hover,
:root .avail:hover{ color: var(--accent); }

:root .footer{ background: var(--paper-2); color: var(--ink); }
:root .footer a,
:root .footer-col a{ color: var(--ink-soft); }
:root .footer a:hover,
:root .footer-col a:hover{ color: var(--accent); }
:root .footer .bot{ color: var(--ink-faint); }
:root .footer .giant{ color: rgba(236,238,241,0.06); }
:root .toln a{ color: var(--ink-faint); }
:root .toln a:hover{ color: var(--ink); }

/* ── 5. the last of the ink-as-a-surface inversions ───────────────────────
   Same failure as .res-cta, found on /estimate and /faq: an element painting
   itself with the old DARK ink and putting white text on top. Once the ramp
   inverts, that is white on near-white — measured 1.16:1.

   .est-send and .on are the primary submit and the active toggle, so they
   take the accent (with dark text). .faq-foot and .est-prog are surfaces,
   so they take a panel colour.
   ───────────────────────────────────────────────────────────────────────── */
:root .est-send,
:root .est-toggle .on,
:root button.on{
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
:root .faq-foot{ background: var(--paper-2); color: var(--ink); }
:root .faq-foot a,
:root .faq-cta{ color: var(--ink); }
:root .faq-cta:hover{ color: var(--accent); }
:root .est-prog{ background: var(--paper-2); }
:root .est-prog > span{ background: var(--accent); }

/* currency toggle: .est-cur button.on and .cur-btn.on both paint themselves
   with the old dark ink and put white on it. Named explicitly because
   estimate.css is page-specific and not every page loads it. */
:root .est-cur button.on,
:root .cur-btn.on{ background: var(--accent); color: var(--on-accent); }
:root .flow-ticks .on{ color: var(--accent); }

/* ── 6. the last six pages ────────────────────────────────────────────────
   404, the blog post, analytics, work, business and classic were still on the
   old cream. Three of them are reachable without being linked -- /404 is what
   anyone with a bad URL sees, and the blog post, work and business are all in
   the sitemap -- so "only pages nobody visits" was not true.

   The token swap alone left two families broken, both already documented above
   and both found by measuring the rendered page:

   TEAL-900 AS A SURFACE. The same trap as .res-cta. Once the ink ramp inverts,
   a panel painted with the dark end and carrying white text becomes white on
   near-white: .blog-cta measured 1.10:1, .price-flag and .flow-next 1.16:1.
   The two that are BUTTONS take the accent with dark ink; .blog-cta is a
   surface, so it takes a panel colour.

   HARD-CODED LIGHT FROSTING. Panels that named a pale rgba() outright rather
   than a token, so nothing could reach them: .stunts-readout at 1.21:1,
   .hero-aside at 1.40:1, the caption plates at 1.21:1.
   ───────────────────────────────────────────────────────────────────────── */
:root .blog-cta{ background: var(--paper-2); color: var(--ink); }
:root .blog-cta h2,
:root .blog-cta p,
:root .blog-cta .d{ color: var(--ink); }
:root .blog-cta .d{ opacity: .55; }

:root .price-flag,
:root .flow-next,
:root .intake-btn{ background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
:root .flow-next:hover,
:root .intake-btn:hover{ background: #D4FF3D; color: var(--on-accent); }

:root .stunts-readout{ background: rgba(10,19,32,.72); color: var(--ink); }
:root .hero-aside::before,
:root .hero-bg-art.photo ~ .wrap .hero-aside,
:root html[data-vibe="pop"] .hero-aside::before{ background: rgba(10,19,32,.86); }
:root .plate .cap,
:root .work-people .cap,
:root .caps-contrast .cap-col{ background: rgba(10,19,32,.72); color: var(--ink); }

/* Two more literal inks that no token could reach: #3F4F57 on the hero aside's
   lead and #555C66 on the intake step's instruction. Both are secondary copy,
   both measured 2.2-2.9:1 on the dark panels above. */
:root .hero-aside .lead,
:root .hero-aside .lead span,
:root .intake .flow-head p{ color: var(--ink-soft); }

/* ── 7. the three dark BANDS that inverted with the ramp ──────────────────
   .aiw-tile.aiw-proof, .pitch and .cta were dark bands carrying white text on
   the cream page -- the one place the old design went dark. Inverting the ramp
   turned the bands light and left the white text on them: 1.08-1.16:1 across
   fifteen distinct runs on /classic, and the same .cta on /business.

   They stay dark, which is now the same direction as the page rather than a
   contrast to it, so the white they already carry is correct. */
:root .aiw-tile.aiw-proof,
:root .pitch,
:root .cta{ background: var(--paper-2); }
:root .pitch .lime,
:root .cta .lime{ color: var(--accent); }

/* the middot between footer links, a literal dark ink at 35% -- a mark rather
   than a word, but it measured 1.1:1 and simply was not there */
:root .d{ color: var(--ink-faint); }

/* #3F4F57 again, this time straight on the body rather than inside .hero-aside */
:root .lead,
:root p.lead,
:root .lead span{ color: var(--ink-soft); }

/* ── 8. the ones that beat a single :root ─────────────────────────────────
   These lost on specificity, not on intent: the page's own inline <style> sits
   after this sheet, so at (0,2,0) its rule wins on source order. :root:root is
   (0,3,0) -- one more class-level unit, no !important, and it stops there. */
:root:root .d{ color: var(--ink-faint); }
:root:root .lead,
:root:root .lead span,
:root:root .flow-head p{ color: var(--ink-soft); }
:root:root .pitch,
:root:root .cta,
:root:root .aiw-tile.aiw-proof{ background: var(--paper-2); }
:root:root .pitch-line,
:root:root .pitch-cta,
:root:root .num,
:root:root .solid-bold,
:root:root .cta-sub{ color: var(--ink); }
:root:root .pitch-cta{ background: var(--accent); color: var(--on-accent); }

/* ── 9. the last three, named exactly ─────────────────────────────────────
   Measured on the rendered page rather than guessed, because each had lost a
   specificity race rather than been missed:

   .hero-aside .lead span   #3F4F57 literal ink on the page ground   2.2:1
   .cta .cta-copy h2        --white used as INK on a band that is
                            now dark, so the heading is the ground   1.1:1
   .intake .flow-head p     #555C66 literal ink on the form ground   2.9:1 */
:root:root .hero-aside .lead,
:root:root .hero-aside .lead span{ color: var(--ink-soft); }
:root:root .cta .cta-copy h2,
:root:root .cta-grid h2{ color: var(--ink); }
:root:root .intake .flow-head p{ color: var(--ink-soft); }

/* The one place !important is the only tool. This lede carries
   style="color: #3f4f57" as an ATTRIBUTE on the element, which no selector can
   outrank -- inline styles beat every rule in every sheet regardless of
   specificity. It measured 2.2:1 on the page ground. Everything else in this
   file wins on specificity alone and should stay that way. */
:root .hero-aside .lead span[style]{ color: var(--ink-soft) !important; }

/* ── the one-tap timeline on /estimate ────────────────────────────────────
   Chips, not a <select>: a select is two taps and a scroll on a phone, and this
   is the last thing between the visitor and sending. Radio inputs so one wins,
   and none is preselected -- a default here would be a guess recorded as an
   answer. */
:root .est-when{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 18px; }
:root .est-when .when-lbl{
  font-family: var(--font-mono); font-size:11px; letter-spacing:.05em;
  text-transform:uppercase; color: var(--ink-faint); margin-inline-end:4px; }
:root .est-when .when{ position:relative; cursor:pointer; }
:root .est-when .when input{
  position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
:root .est-when .when span{
  display:inline-block; padding:9px 15px; min-height:40px; line-height:22px;
  border:1px solid var(--line); color: var(--ink-soft);
  font-size:13.5px; transition:border-color .16s, color .16s, background .16s; }
:root .est-when .when:hover span{ border-color: var(--ink-faint); color: var(--ink); }
:root .est-when .when input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:2px; }
/* .on, set by the little script beside estimate.js, rather than
   input:checked + span. The sibling rule matched in the selector engine --
   matches() true, :checked true -- and still computed a transparent background
   on the live page, even with !important. Not worth another hour: the class is
   the same pattern the .opt cards already use here. */
:root .est-when .when.on span{
  background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight:600; }
:root .opt-tag{
  font-family: var(--font-mono); font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; color: var(--ink-faint); margin-inline-start:6px; }

/* ── 10. thumb targets on a phone ─────────────────────────────────────────
   Measured at 375px across scan, estimate and faq: the currency toggle at
   28px, the quantity steppers at 26px, the compare toggle at 16px and the
   network row's links at 15px. All reachable with a mouse, none of them a
   target for a thumb, and the steppers are a control you have to hit
   repeatedly to use at all.

   Padding rather than height wherever the element sits in running text, so
   the line rhythm holds and only the reachable area grows. Desktop is
   untouched -- these apply below 820 only. */
@media(max-width:820px){
  :root .toln a{display:inline-block;padding:.55rem 0}
  :root .est-cur button,
  :root .cur-btn{min-height:40px;padding:.5rem 1.1rem}
  :root .opt-qty button{min-width:40px;min-height:40px;font-size:15px}
  :root .compare-toggle{display:inline-flex;align-items:center;min-height:40px}
  :root .faq-cta,
  :root .faq-foot a,
  :root .est-send-note a,
  :root .fine a{display:inline-block;padding:.45rem 0}
  /* the stepper's own row needs the room the taller buttons take */
  :root .opt-qty{gap:.5rem;align-items:center}
}

/* The last two: links inside running prose. Padding on an inline element grows
   the hit area without moving the line, so the paragraph keeps its leading and
   the link keeps its place in the sentence. */
@media(max-width:820px){
  :root .faq-answer p a,
  :root p.lead a{padding-block:.5rem}
}