/* =====================================================================
   ti-dark-v13.css — DARK THEME. Loads LAST, overrides everything above.
   Brief (OT, 2026-08-12): dark navy + green/turquoise, taken from the logo.
   Reference for layout and feel: canapii.com.

   Deliberate exception: anything depicting a real spreadsheet stays light.
   Excel is white, and a white workbook glowing on a dark page is both honest
   and the strongest contrast on the site.
   ===================================================================== */

:root{
  /* surfaces: deep navy, three steps */
  --bg:#0a1420;
  --bg2:#0d1a29;
  --card:#12212f;
  --navy:#0a1420;
  --navy2:#12212f;

  /* type */
  --ink:#eaf2f7;
  --ink-dim:#9fb3c4;
  --muted:#6d8296;

  /* accent: turquoise-forward, with the logo green as its deeper shade */
  --green:#35c9a4;
  --green-bright:#5fe0bf;
  --green-deep:#1f8f76;
  --gold:#c9a25c;
  --gold-bright:#e0bd7d;

  --line:rgba(160,200,220,.14);
  --line-soft:rgba(160,200,220,.08);
  --line-green:rgba(53,201,164,.38);
}

body{background:var(--bg);color:var(--ink-dim)}
h1,h2,h3{color:var(--ink)}
h1 em,h2 em,h3 em{color:var(--green)}

/* ---------- header ---------------------------------------------------- */
.site-head{background:rgba(10,20,32,.82);box-shadow:0 1px 0 var(--line-soft)}
.site-head.scrolled{background:rgba(10,20,32,.95)}
.brand .word{color:var(--ink)}
.brand .word em{color:var(--green)}
.tabs a{color:var(--ink-dim)}
.tabs a:hover,.tabs a.active{color:var(--ink)}
.tabs a.active{border-bottom-color:var(--green)}
.cta{background:var(--green);color:#06121b;font-weight:600;
  box-shadow:0 8px 24px rgba(53,201,164,.28)}
.cta:hover{background:var(--green-bright)}
.btn.solid{background:var(--green);color:#06121b;font-weight:600}
.btn.solid:hover{background:var(--green-bright)}

/* ---------- generic sections ------------------------------------------ */
.section.alt{background:var(--bg2);border-color:var(--line-soft)}
.hero,.svc-hero{background:
  radial-gradient(48% 52% at 50% 0%, rgba(53,201,164,.10), transparent 70%), var(--bg)}
.svc-hero{background:
  radial-gradient(52% 58% at 22% 0%, rgba(53,201,164,.12), transparent 70%), var(--bg)}
.hero::after,.svc-hero::after{
  background-image:radial-gradient(rgba(160,200,220,.16) 1px, transparent 1.4px)}

/* cards, panels, tiles */
.door,.step,.bcard,.plan,.pillar,.l3,.nd,.wf,.src,.tool,.snote,.rstep,.pnum,
.fm-node,.svc-meta,.ba-card,.mail-frame,.t-item,.pcard{
  background:var(--card);border-color:var(--line);
  box-shadow:0 18px 44px rgba(0,0,0,.34)}
.door:hover,.bcard:hover,.plan:hover,.pillar:hover{
  box-shadow:0 30px 66px rgba(0,0,0,.5);border-color:var(--line-green)}
.note{background:var(--bg2);border-left-color:var(--green)}
.note b{color:var(--ink)}

/* ---------- the two dark scenes now need to stand APART from the page --- */
.gap{background:linear-gradient(180deg,#06101a,#0a1420)}
.readme{background:#08131f;box-shadow:0 34px 80px rgba(0,0,0,.55)}
.cta-band{background:
  radial-gradient(60% 90% at 50% 0%, rgba(53,201,164,.14), transparent 70%),
  linear-gradient(180deg,#06101a,#0a1420)}
.mock,.dash{box-shadow:0 40px 90px rgba(0,0,0,.6)}
.plan.feat{background:linear-gradient(160deg,#123a33,#0c2a26);
  border-color:var(--line-green);box-shadow:0 34px 80px rgba(0,0,0,.55)}
.plan.feat .p-name{color:var(--green-bright)}

/* ---------- KEPT LIGHT ON PURPOSE: the spreadsheet mocks ---------------- */
.sheet-wrap{background:#fff;box-shadow:0 30px 70px rgba(0,0,0,.5)}
.ba-sheet{background:#fdfcf9;border-color:rgba(22,32,46,.14)}
.ba-sheet .bs-row{color:#39414c}
.ba-sheet .bs-head{color:#6b7788}
.tabsheet{background:#0e1c2a;border-color:var(--line)}

/* the "Sunday spreadsheet" card stays pale so the mess reads; the Monday
   card goes dark so the briefing looks like the product, not the problem */
.ba-before{background:#f4f2ec}
.ba-before h3{color:#16202e}
.ba-before .ba-list li{color:#4c5665}
.ba-before .ba-tag{background:rgba(197,106,85,.14);color:#a8543f}
.ba-after{background:var(--card)}
.bb-metrics span{background:rgba(53,201,164,.08);border-color:var(--line-green);color:var(--ink-dim)}
.bb-metrics b{color:var(--green)}
.ba-brief{background:#0e1c2a;border-color:var(--line)}
.bb-lead{color:var(--ink)}
.bb-lead b{color:var(--ink)}

/* ---------- accents that were tuned for a light page -------------------- */
.eyebrow{color:var(--green)}
.door .ico{background:rgba(53,201,164,.12)}
.door.d-xl .ico{color:#4fd6a6;background:rgba(79,214,166,.12)}
.door.d-data .ico{color:#5fb8e0;background:rgba(95,184,224,.12)}
.door.d-auto .ico{color:#e88aa2;background:rgba(232,138,162,.12)}
.door.d-dash .ico{color:#35c9a4;background:rgba(53,201,164,.12)}
.door .from b,.step b,.l3 b,.nd b,.pnum b{color:var(--ink)}
.pnum b{color:var(--green)}
.step i,.rstep i,.nd i{color:var(--green)}
.bcard.m .tag{background:rgba(53,201,164,.14);color:var(--green-bright);border-color:var(--line-green)}
.bcard.o .tag{background:rgba(201,162,92,.16);color:var(--gold-bright);border-color:rgba(201,162,92,.34)}
.bcard.s .tag{background:rgba(120,150,180,.16);color:#9fb3c4;border-color:rgba(120,150,180,.3)}
.pill,.p-fee,.foot,.legal,.mono-note{color:var(--muted)}
.plan .price,.plan h3{color:var(--ink)}
.plan li::before{background:var(--green)}
.faq summary{color:var(--ink)}
.faq details{border-bottom-color:var(--line)}
.faq summary::after{color:var(--green)}
footer{background:var(--bg2);border-top:1px solid var(--line-soft)}
.f-nav b{color:var(--ink)}
.tool{color:var(--ink)}
.ladder b{color:var(--green)}

/* ---------- built-on strip (Canapii-style proof row, honest version) ---- */
.builton{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  background:var(--bg2);padding:2.4rem 0}
.builton .lbl{display:block;text-align:center;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:1.5rem}
.builton .row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.9rem 1.7rem}
.builton .row span{display:inline-flex;align-items:center;gap:.45rem;font-size:.86rem;
  font-weight:600;color:var(--ink-dim);opacity:.85;transition:opacity .3s,color .3s}
.builton .row span:hover{opacity:1;color:var(--ink)}
.builton .row img{width:19px;height:19px;display:block}
@media (max-width:700px){.builton .row{gap:.9rem 1.6rem;font-size:.85rem}}

/* ---------- selection + focus ------------------------------------------ */
::selection{background:rgba(53,201,164,.3);color:#eaf2f7}
a:focus-visible,button:focus-visible,summary:focus-visible{outline-color:var(--green)}

/* ---------- v13.1 — fixes found in the first dark pass ------------------ */

/* THE GAP SCENE. It was a dark slab dropped into a cream page: all its drama
   came from the contrast, which a dark theme destroys. It now becomes the one
   LIFTED surface on the site — a teal-washed panel that reads as a deliberate
   chapter break rather than a hole. */
.gap{
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(53,201,164,.16), transparent 72%),
    radial-gradient(50% 50% at 15% 90%, rgba(53,201,164,.07), transparent 70%),
    linear-gradient(180deg,#10242f 0%,#0d1d28 60%,#0a1420 100%);
  border-top:1px solid var(--line-green);
  border-bottom:1px solid var(--line-soft)}
.gap h2{color:#ffffff;text-shadow:0 2px 30px rgba(0,0,0,.6)}
.gap h2 em{color:var(--green-bright)}
.gap-sub{color:#cfe0e8;font-size:1.08rem}
.gap-facts span{background:rgba(255,255,255,.05);border-color:rgba(120,220,195,.22);color:#b9cdd9}
.gap-facts span b{color:#ffffff}
/* the diverging lines are the whole point of the scene: make them read */
#sp0{stroke:rgba(210,235,245,.5)}
#sp1{stroke:var(--green-bright);stroke-width:2.6}
#sp2{stroke:rgba(226,140,120,.75);stroke-width:2.2}
.split-svg .ghostline{stroke:rgba(200,230,240,.14)}
.split-lbl{color:#dfeaf1}
.lbl-up{color:var(--green-bright)}
.lbl-dn{color:#e2917c}

/* product mocks need an edge now the page behind them is also dark */
.mock,.dash,.hero-mock .mock{border:1px solid rgba(120,200,185,.22)}
.mock{box-shadow:0 40px 90px rgba(0,0,0,.65), 0 0 0 1px rgba(120,200,185,.10)}
.wf-frame,.sheet-wrap,.mail-frame{border-color:rgba(120,200,185,.20)}

/* the scroll thread down the left edge */
.thread i{background:linear-gradient(180deg, transparent, rgba(53,201,164,.35) 40%, var(--green-bright))}
.thread b{background:var(--green-bright);box-shadow:0 0 12px rgba(53,201,164,.9)}

/* case chips under the build scene */
.case-chips span,.chip{background:var(--card);border:1px solid var(--line);color:var(--ink-dim)}
.chip b,.case-chips b{color:var(--green)}

/* found band (the £277,000 counter) */
.counter-band,#found{background:var(--bg2)}
.found-num,#foundNum{color:var(--green)}
.found-facts span{color:var(--ink-dim)}