/* ============================================================
   TDDP — Track. Diagnose. Determine. Profit.
   Identity: black ground, bright ink, navy stamp accent,
   printed status inks, hairline rules.

   One theme, deliberately. There were four blocks of these —
   a light default, a dark preference, and an override for each —
   which meant every colour decision had to be made twice and
   verified twice, and the light one was nobody's first choice.
   ============================================================ */

:root{
  --paper:#000000;      /* page ground */
  --ground:#000000;     /* recessed */
  --panel:#0B0B0D;      /* raised card */
  --panel-2:#131316;    /* inset */
  --ink:#F2F3F5;
  --ink-2:#A8ACB4;
  --ink-3:#71757E;
  --rule:#1E1E22;
  --rule-2:#32323A;
  --navy:#8FB4E8;       /* accent / stamp */
  --navy-2:#A9C6F0;
  --navy-soft:#141C29;
  --good:#5FD59A;  --good-soft:#0C2318;
  --warn:#E8BC45;  --warn-soft:#241C0C;
  --bad:#FF7A64;   --bad-soft:#2A1310;
  /* hairline rings rather than drop shadows: nothing casts a visible
     shadow onto black, so depth has to come from an edge */
  --shadow-1:0 0 0 1px rgba(255,255,255,.025);
  --shadow-2:0 0 0 1px rgba(255,255,255,.04), 0 24px 60px -28px rgba(0,0,0,.9);
  --paper-edge:0 1px 0 rgba(255,255,255,.04) inset;

  /* One friendly, familiar sans across the whole product.
     ui-rounded gives Apple devices SF Rounded; Nunito/Quicksand are used if
     the reader happens to have them; everyone else gets their own OS UI font.
     Real monospace is now reserved for code, file paths and keys. */
  --f-body:ui-rounded, "Nunito", "Quicksand", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-display:var(--f-body);
  --f-mono:var(--f-body);
  --f-code:ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --r:14px; --r-lg:20px;
  --measure:820px;

  /* page width: fluid, with a ceiling that keeps text readable.
     92vw on small screens, up to 1560px on a large monitor. */
  --wrap: min(1560px, 92vw);
  --gutter: clamp(16px, 3vw, 48px);

  /* tells the browser to render its own furniture — scrollbars, form
     controls, the address bar on mobile — dark to match */
  color-scheme: dark;
}

@media (min-width:1900px){ :root{ --wrap: min(1760px, 90vw); } }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--navy); outline-offset:2px; border-radius:3px}
/* The :not() is the ?motion=on escape hatch, so the site can be looked at in
   motion on a machine that has the preference set. It is opt-in per URL and
   never applies to an ordinary visitor. */
@media (prefers-reduced-motion: reduce){
  :root:not([data-motion="on"]) *,
  :root:not([data-motion="on"]) *::before,
  :root:not([data-motion="on"]) *::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important
  }
}

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--f-body); font-size:11.5px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3);
}
.serif{font-family:var(--f-display)}
.num{font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1}
.money{font-family:var(--f-display); font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.015em}
.muted{color:var(--ink-2)}
.dim{color:var(--ink-3)}
.hr{height:1px;background:var(--rule);border:0;margin:0}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  padding:10px 18px;border-radius:999px;border:1px solid var(--rule-2);
  background:var(--panel); color:var(--ink); cursor:pointer; text-decoration:none;
  font-size:14px; font-weight:500; box-shadow:var(--shadow-1);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-2)}
.btn:active{transform:translateY(0)}
/* the accent is a pale blue on black, so the label on it has to be dark */
.btn.primary{background:var(--navy);border-color:var(--navy);color:#0F1418}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none}
.btn.ghost:hover{background:var(--panel-2);box-shadow:none;transform:none}
.btn.sm{padding:6px 11px;font-size:13px}
.btn.lg{padding:14px 22px;font-size:15px}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none}

/* ---------- chips / stamps ---------- */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;border:1px solid currentColor;white-space:nowrap;
}
.chip .gl{font-size:9px;line-height:1}
.chip.broken{color:var(--bad);background:var(--bad-soft)}
.chip.leaking{color:var(--warn);background:var(--warn-soft)}
.chip.working{color:var(--good);background:var(--good-soft)}
.chip.opp{color:var(--navy);background:var(--navy-soft)}
.chip.plain{color:var(--ink-3);background:transparent;border-color:var(--rule-2)}

/* ---------- cards ---------- */
.card{
  background:var(--panel);border:1px solid var(--rule);border-radius:var(--r);
  box-shadow:var(--shadow-1), var(--paper-edge);
}
.pad{padding:20px}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.between{display:flex;align-items:center;justify-content:space-between;gap:16px}
.wrap{flex-wrap:wrap}
.grow{flex:1}

/* ============================================================
   MARKETING
   ============================================================ */
.m-nav{
  position:sticky;top:0;z-index:50;background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--rule);
}
.m-nav-in{max-width:var(--wrap);margin:0 auto;padding:12px var(--gutter);display:flex;align-items:center;gap:24px}
/* The wordmark is drawn, not set — see the <symbol> in index.html.

   It was 17px and looked like a caption. A four-letter mark has to be a good
   deal larger than a word to carry the same weight, because there is simply
   less of it on the page. Hover dims rather than brightens now: the mark is
   already pure white and there is nowhere brighter to go. */
.logo{display:inline-flex;align-items:center;text-decoration:none;line-height:0}
.logo-svg{height:27px;width:auto;display:block}
.logo:hover .logo-svg{opacity:.72}
.rail .brand .logo-svg{height:30px}
@media (max-width:620px){ .logo-svg{height:22px} }

/* The mark at the size it deserves, used to open and close the page. */
.brandband{
  display:flex;flex-direction:column;align-items:center;gap:18px;
  padding:clamp(46px,7vw,86px) var(--gutter);
}
.brandband .logo-svg{height:clamp(58px,9vw,124px)}
.brandline{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;
  font-size:clamp(11px,1.15vw,13px);font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-3);
}
.brandline b{color:var(--ink);font-weight:700}
/* the four words, as the eyebrow above the hero headline */
.brandwords{
  display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;
  font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--navy);margin-bottom:16px;
}
.brandwords span{color:var(--ink-3)}
.m-nav a.lnk{text-decoration:none;color:var(--ink-2);font-size:14px}
.m-nav a.lnk:hover{color:var(--ink)}

.m-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--rule)}
.m-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to bottom, color-mix(in srgb,var(--navy) 5%, transparent), transparent 45%),
    repeating-linear-gradient(to bottom, transparent 0 27px, color-mix(in srgb,var(--rule) 55%, transparent) 27px 28px);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.5), transparent 70%);
}
.m-hero-in{position:relative;max-width:var(--wrap);margin:0 auto;padding:clamp(48px,6vw,88px) var(--gutter) clamp(44px,5vw,72px);
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,4vw,64px);align-items:start}
.h1{font-family:var(--f-display);font-size:clamp(33px,4.2vw,50px);line-height:1.08;letter-spacing:-.03em;margin:18px 0 0;text-wrap:balance;font-weight:700}
.h1 em{font-style:italic;color:var(--navy)}
.lede{font-size:17px;line-height:1.6;color:var(--ink-2);max-width:52ch;margin:18px 0 0}
.m-cta{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.m-trust{margin-top:22px;font-size:13px;color:var(--ink-3);line-height:1.9}

.m-sec{max-width:var(--wrap);margin:0 auto;padding:clamp(48px,5.5vw,86px) var(--gutter)}
.m-sec.tight{padding-top:44px}
.h2{font-family:var(--f-display);font-size:clamp(25px,2.9vw,34px);line-height:1.15;letter-spacing:-.025em;margin:10px 0 0;font-weight:700;text-wrap:balance}
.h3{font-family:var(--f-display);font-size:19px;letter-spacing:-.015em;margin:0;font-weight:600}
.sec-head{max-width:62ch;margin-bottom:34px}
.sec-head p{color:var(--ink-2);margin:12px 0 0}
.band{background:var(--ground);border-block:1px solid var(--rule)}

.split2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.split3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

/* the anatomy ledger */
.anat{display:grid;grid-template-columns:132px 1fr;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;background:var(--panel)}
.anat > div{padding:14px 18px;border-bottom:1px solid var(--rule)}
.anat > div:nth-last-child(-n+2){border-bottom:0}
.anat .k{background:var(--panel-2);font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);border-right:1px solid var(--rule)}
.anat .v{font-size:14.5px}
.strike{position:relative;color:var(--ink-3)}
.strike::after{content:"";position:absolute;left:-2px;right:-2px;top:52%;height:1px;background:var(--bad)}

.logos{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.logo-ph{
  border:1px dashed var(--rule-2);border-radius:8px;height:62px;display:grid;place-items:center;
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
  background:repeating-linear-gradient(135deg,transparent 0 6px,color-mix(in srgb,var(--rule) 40%,transparent) 6px 7px);
}
.quote-ph{border:1px solid var(--rule);border-radius:var(--r);padding:20px;background:var(--panel)}
.quote-ph .ph-tag{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);border:1px dashed var(--rule-2);border-radius:4px;padding:2px 6px;display:inline-block;margin-bottom:12px}
.quote-ph blockquote{margin:0;font-family:var(--f-display);font-size:17px;line-height:1.5}
.quote-ph .by{margin-top:14px;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-2)}
.av{width:30px;height:30px;border-radius:50%;background:var(--panel-2);border:1px solid var(--rule-2);display:grid;place-items:center;font-family:var(--f-mono);font-size:11px;color:var(--ink-3)}

.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{padding:16px 0;cursor:pointer;font-size:16px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--ink-3);font-family:var(--f-mono)}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0 0 18px;color:var(--ink-2);max-width:70ch}

.m-foot{border-top:1px solid var(--rule);background:var(--ground)}
.m-foot-in{max-width:var(--wrap);margin:0 auto;padding:44px var(--gutter);display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px;font-size:13.5px}
.m-foot a{display:block;color:var(--ink-2);text-decoration:none;padding:3px 0}
.m-foot a:hover{color:var(--ink)}
.m-foot h4{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin:0 0 8px;font-weight:600}

/* ---------- pricing ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.tier{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow-1)}
.tier.feature{border-color:var(--navy);box-shadow:var(--shadow-2);position:relative}
.tier.feature::before{
  content:"Most chosen";position:absolute;top:-11px;left:26px;background:var(--navy);color:var(--paper);
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:3px 11px;border-radius:999px;
}
.tier h3{font-family:var(--f-display);font-size:21px;margin:0;font-weight:700;letter-spacing:-.02em}
.tier .who{color:var(--ink-2);font-size:13.5px;margin:6px 0 20px;min-height:38px}
.price-line{display:flex;align-items:baseline;gap:6px}
.price-line .big{font-family:var(--f-display);font-weight:700;font-size:40px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.price-line .per{color:var(--ink-3);font-size:13px}
.setup{margin-top:8px;padding-top:12px;border-top:1px dashed var(--rule-2);font-size:13.5px;color:var(--ink-2);display:flex;justify-content:space-between;gap:10px}
.feats{list-style:none;margin:20px 0 0;padding:0;font-size:14px}
.feats li{padding:7px 0 7px 22px;position:relative;border-bottom:1px solid var(--rule)}
.feats li:last-child{border-bottom:0}
.feats li::before{content:"—";position:absolute;left:0;color:var(--navy);font-family:var(--f-mono);font-size:12px}
.feats li.no{color:var(--ink-3)}
.feats li.no::before{content:"·";color:var(--ink-3)}
.gst-note{font-size:12.5px;color:var(--ink-3)}

/* ---------- comparison table ---------- */
.cmp{width:100%;border-collapse:collapse;font-size:14px}
.cmp th,.cmp td{padding:11px 14px;border-bottom:1px solid var(--rule);text-align:left}
.cmp thead th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.cmp td.c{text-align:center;font-size:13.5px;font-variant-numeric:tabular-nums}
.cmp tbody tr:hover{background:var(--panel-2)}

/* ============================================================
   WIZARD / CHECKOUT / INSTALL
   ============================================================ */
.w-shell{min-height:100vh;display:flex;flex-direction:column;background:var(--ground)}
.w-top{border-bottom:1px solid var(--rule);background:var(--paper)}
.w-top-in{max-width:min(1100px,94vw);margin:0 auto;padding:14px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:20px}
.steps{display:flex;align-items:center;gap:0;flex-wrap:wrap}
.step{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.step .dot{width:20px;height:20px;border-radius:50%;border:1px solid var(--rule-2);display:grid;place-items:center;font-size:10px;background:var(--panel)}
.step.on{color:var(--ink)}
.step.on .dot{background:var(--navy);border-color:var(--navy);color:var(--paper)}
.step.done .dot{background:var(--good-soft);border-color:var(--good);color:var(--good)}
.step-sep{width:26px;height:1px;background:var(--rule-2);margin:0 10px}
.w-body{flex:1;display:grid;place-items:start center;padding:44px 24px 80px}
.w-card{width:100%;max-width:min(860px,94vw);background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-lg);box-shadow:var(--shadow-2);overflow:hidden}
.w-card-in{padding:32px 34px}
.w-q{font-family:var(--f-display);font-size:26px;letter-spacing:-.025em;margin:8px 0 6px;font-weight:700}
.w-help{color:var(--ink-2);font-size:14.5px;margin:0 0 26px;max-width:56ch}
.w-foot{border-top:1px solid var(--rule);background:var(--panel-2);padding:16px 34px;display:flex;justify-content:space-between;align-items:center;gap:16px}

.field{display:block;margin-bottom:18px}
.field > span{display:block;font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);margin-bottom:7px}
.input{
  width:100%;padding:11px 14px;border-radius:12px;border:1px solid var(--rule-2);
  background:var(--paper);font-size:15px;
}
.input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px color-mix(in srgb,var(--navy) 18%,transparent)}
.input.mono{font-family:var(--f-code);font-size:14px}
.url-wrap{display:flex;align-items:stretch;border:1px solid var(--rule-2);border-radius:12px;overflow:hidden;background:var(--paper)}
.url-wrap:focus-within{border-color:var(--navy);box-shadow:0 0 0 3px color-mix(in srgb,var(--navy) 18%,transparent)}
.url-wrap .pre{padding:11px 12px;background:var(--panel-2);border-right:1px solid var(--rule);font-family:var(--f-code);font-size:13px;color:var(--ink-3);display:flex;align-items:center}
.url-wrap input{flex:1;border:0;background:transparent;padding:11px 13px;font-family:var(--f-code);font-size:14.5px}
.url-wrap input:focus{outline:none}

.pickgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pick{
  text-align:left;padding:15px;border-radius:14px;border:1px solid var(--rule-2);background:var(--paper);
  cursor:pointer;display:flex;gap:12px;align-items:flex-start;transition:border-color .12s,background .12s,transform .12s;
}
.pick:hover{transform:translateY(-1px);border-color:var(--rule-2);background:var(--panel-2)}
.pick .mark{width:26px;height:26px;border-radius:6px;display:grid;place-items:center;background:var(--panel-2);border:1px solid var(--rule);font-family:var(--f-mono);font-size:11px;flex:none}
.pick .t{display:block;font-size:14.5px;font-weight:500;line-height:1.3}
.pick .s{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px;line-height:1.35}
.pick[aria-pressed="true"]{border-color:var(--navy);background:var(--navy-soft);box-shadow:0 0 0 1px var(--navy) inset}
.pick[aria-pressed="true"] .mark{background:var(--navy);color:var(--paper);border-color:var(--navy)}

.recip{display:flex;align-items:center;gap:10px;padding:10px 13px;border:1px solid var(--rule);border-radius:14px;background:var(--paper);margin-bottom:8px}
.recip .who{flex:1;min-width:0}
.recip .em{font-family:var(--f-mono);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seg{display:inline-flex;border:1px solid var(--rule-2);border-radius:999px;overflow:hidden;background:var(--paper)}
.seg button{border:0;background:transparent;padding:8px 14px;cursor:pointer;font-size:13.5px;border-right:1px solid var(--rule)}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--navy);color:var(--paper)}

/* stripe-styled mock checkout */
.co{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;background:var(--panel)}
.co-left{background:var(--ground);border-right:1px solid var(--rule);padding:56px 6vw;display:flex;flex-direction:column}
.co-right{padding:56px 6vw;display:flex;flex-direction:column;justify-content:flex-start}
.co-inner{width:100%;max-width:400px}
.co-left .co-inner{margin-left:auto;margin-right:36px}
.co-right .co-inner{margin-right:auto}
.demo-banner{
  display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border-radius:8px;
  border:1px dashed var(--warn);background:var(--warn-soft);color:var(--warn);
  font-size:13px;line-height:1.45;margin-bottom:26px;
}
.co-line{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--rule);font-size:14.5px}
.co-line .sub{font-size:12.5px;color:var(--ink-3)}
.co-total{display:flex;justify-content:space-between;align-items:baseline;padding:16px 0 0;font-size:15px}
.fake-field{
  border:1px solid var(--rule-2);border-radius:12px;background:var(--panel-2);
  padding:11px 13px;font-family:var(--f-mono);font-size:13.5px;color:var(--ink-3);
  display:flex;justify-content:space-between;align-items:center;gap:10px;user-select:none;
}
.fake-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pay-btn{width:100%;margin-top:20px;padding:14px;border-radius:999px;border:0;background:var(--navy);color:var(--paper);font-size:15px;font-weight:600;cursor:pointer}
.pay-btn:hover{background:var(--navy-2)}
.spinner{width:15px;height:15px;border:2px solid color-mix(in srgb,var(--paper) 45%,transparent);border-top-color:var(--paper);border-radius:50%;animation:spin .7s linear infinite;display:inline-block;vertical-align:-2px}
@keyframes spin{to{transform:rotate(360deg)}}

/* code + copy */
.code{
  position:relative;background:var(--panel-2);border:1px solid var(--rule);border-radius:12px;
  padding:14px 16px;font-family:var(--f-code);font-size:12.5px;line-height:1.65;
  overflow-x:auto;white-space:pre;color:var(--ink-2);
}
.code .tag{color:var(--navy)}
.code .att{color:var(--good)}
.code .str{color:var(--bad)}
.code .cm{color:var(--ink-3);font-style:italic}
.copy{position:absolute;top:9px;right:9px}

.tabs{display:flex;gap:2px;border-bottom:1px solid var(--rule);overflow-x:auto;margin-bottom:18px}
.tab{
  border:0;background:transparent;padding:9px 13px;cursor:pointer;font-size:13.5px;color:var(--ink-2);
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;
}
.tab:hover{color:var(--ink)}
.tab[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--navy);font-weight:500}

.steps-list{counter-reset:s;list-style:none;margin:0;padding:0}
.steps-list li{counter-increment:s;position:relative;padding:0 0 14px 34px;font-size:14.5px;line-height:1.55}
.steps-list li::before{
  content:counter(s);position:absolute;left:0;top:1px;width:21px;height:21px;border-radius:50%;
  background:var(--navy-soft);color:var(--navy);border:1px solid color-mix(in srgb,var(--navy) 35%,transparent);
  font-family:var(--f-mono);font-size:11px;display:grid;place-items:center;
}
.steps-list li:last-child{padding-bottom:0}
kbd{
  font-family:var(--f-body);font-size:12.5px;font-weight:600;background:var(--panel-2);
  border:1px solid var(--rule-2);border-bottom-width:2px;border-radius:7px;padding:1px 7px;
  white-space:nowrap;color:var(--ink);
}
.path{font-family:var(--f-code);font-size:12.5px;color:var(--ink-2)}
.path b{color:var(--ink);font-weight:500}

/* ============================================================
   APP SHELL
   ============================================================ */
.app{display:grid;grid-template-columns:212px 1fr;min-height:100vh;background:var(--ground)}
/* keep overscroll matching the screen's own ground */
body:has(.app),body:has(.w-shell){background:var(--ground)}
body:has(.co){background:var(--panel)}
.rail{
  border-right:1px solid var(--rule);background:var(--paper);padding:16px 12px;
  position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:4px;
}
.rail .brand{padding:6px 8px 16px;display:flex;align-items:center}
.rail-lbl{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding:16px 10px 6px}
.rail a{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:7px;text-decoration:none;
  color:var(--ink-2);font-size:14px;position:relative;
}
.rail a:hover{background:var(--panel-2);color:var(--ink)}
.rail a.on{background:var(--navy-soft);color:var(--ink);font-weight:500}
.rail a.on::before{content:"";position:absolute;left:-12px;top:6px;bottom:6px;width:2px;background:var(--navy);border-radius:0 2px 2px 0}
.rail .ic{width:16px;text-align:center;font-family:var(--f-mono);font-size:12px;color:var(--ink-3)}
.rail a.on .ic{color:var(--navy)}
.rail .badge{margin-left:auto;font-size:11px;font-weight:600;background:var(--bad);color:var(--paper);border-radius:9px;padding:1px 6px}
.site-pill{margin-top:auto;border:1px solid var(--rule);border-radius:8px;padding:9px 10px;background:var(--panel);font-size:12.5px}
.site-pill .u{font-family:var(--f-mono);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}

.main{min-width:0}
.topbar{
  position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);padding:12px 26px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.topbar h1{font-family:var(--f-display);font-size:18px;font-weight:700;margin:0;letter-spacing:-.02em}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 0 0 color-mix(in srgb,var(--good) 60%,transparent);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--good) 55%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.page{padding:clamp(16px,2vw,32px);max-width:min(1600px,100%);margin:0 auto;width:100%}
/* the report reads like a document, so it keeps a tighter measure —
   but still grows on a big screen instead of sitting at 960px */
.page.doc{max-width:min(1180px,100%);margin:0 auto}

/* ============================================================
   DATA / CHARTS
   ============================================================ */
.stat{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r);padding:17px 19px;box-shadow:var(--shadow-1)}
.stat .lbl{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.stat .val{font-family:var(--f-display);font-weight:700;font-size:32px;letter-spacing:-.03em;line-height:1.15;margin-top:6px;font-variant-numeric:tabular-nums}
.stat .sub{font-size:12.5px;color:var(--ink-2);margin-top:3px}
.delta{font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums}
.delta.up{color:var(--good)} .delta.down{color:var(--bad)}

table.data{width:100%;border-collapse:collapse;font-size:13.5px}
table.data th{
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;text-align:left;padding:0 10px 8px;border-bottom:1px solid var(--rule);
}
table.data td{padding:9px 10px;border-bottom:1px solid var(--rule)}
table.data tr:last-child td{border-bottom:0}
table.data td.n{text-align:right;font-variant-numeric:tabular-nums;font-size:13px}
table.data tr.flag td{background:var(--bad-soft)}
table.data td .pth{font-family:var(--f-mono);font-size:12.5px}
.tbl-scroll{overflow-x:auto}
/* subtle scrollbars on the containers that need to scroll sideways */
.tabs,.tbl-scroll,.code,.pickgrid{scrollbar-width:thin;scrollbar-color:var(--rule-2) transparent}
.tabs::-webkit-scrollbar,.tbl-scroll::-webkit-scrollbar,.code::-webkit-scrollbar{height:6px}
.tabs::-webkit-scrollbar-track,.tbl-scroll::-webkit-scrollbar-track,.code::-webkit-scrollbar-track{background:transparent}
.tabs::-webkit-scrollbar-thumb,.tbl-scroll::-webkit-scrollbar-thumb,.code::-webkit-scrollbar-thumb{background:var(--rule-2);border-radius:3px}

.meter{height:6px;border-radius:3px;background:var(--panel-2);overflow:hidden;position:relative}
.meter i{display:block;height:100%;background:var(--navy);border-radius:3px}
.meter i.good{background:var(--good)} .meter i.bad{background:var(--bad)} .meter i.warn{background:var(--warn)}

.feed{font-family:var(--f-code);font-size:12px;max-height:268px;overflow:hidden;position:relative}
.feed .ev{display:flex;gap:10px;padding:6px 0;border-bottom:1px dotted var(--rule);align-items:baseline;animation:slidein .4s ease}
@keyframes slidein{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.feed .ev .t{color:var(--ink-3);width:52px;flex:none}
.feed .ev .p{color:var(--ink);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feed .ev .s{color:var(--ink-3)}
.feed::after{content:"";position:absolute;bottom:0;left:0;right:0;height:44px;background:linear-gradient(transparent,var(--panel));pointer-events:none}

/* funnel */
.funnel{display:flex;flex-direction:column;gap:2px}
.fstep{display:grid;grid-template-columns:150px 1fr 132px;gap:14px;align-items:center;padding:7px 0}
.fstep .fl{font-size:13.5px}
.fstep .fl .sub{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.fbar{height:26px;background:var(--panel-2);border-radius:3px;display:flex;overflow:hidden;position:relative}
.fbar i{display:block;height:100%;background:var(--navy);border-radius:2px}
.fbar u{display:block;height:100%;flex:1;margin-left:2px;text-decoration:none;
  background:repeating-linear-gradient(135deg,transparent 0 4px,color-mix(in srgb,var(--bad) 26%,transparent) 4px 8px);}
.fdrop{text-align:right;font-size:12.5px;font-weight:600;color:var(--bad);font-variant-numeric:tabular-nums}
.fdrop .ok{color:var(--ink-3)}
.fstep.clickable{cursor:pointer;border-radius:6px;transition:background .12s}
.fstep.clickable:hover{background:var(--panel-2)}

/* ============================================================
   REPORT (hero screen)
   ============================================================ */
.rep{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-lg);box-shadow:var(--shadow-2);overflow:hidden}
.rep-mast{padding:26px 32px 22px;border-bottom:1px solid var(--rule);background:var(--panel)}
.rep-mast .rule{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.rep-mast .rule .line{flex:1;height:1px;background:var(--ink);opacity:.5}
.rep-title{font-family:var(--f-display);font-size:29px;letter-spacing:-.03em;margin:0;font-weight:700}
.rep-meta{font-size:13px;color:var(--ink-3);margin-top:8px}
.tldr{padding:24px 32px;border-bottom:1px solid var(--rule);background:var(--panel-2)}
.tldr ol{margin:14px 0 0;padding:0 0 0 20px;font-size:16px;line-height:1.65}
.tldr ol li{margin-bottom:10px;padding-left:4px}
.tldr ol li:last-child{margin-bottom:0}
.ledger{display:grid;grid-template-columns:repeat(2,1fr);border-bottom:1px solid var(--rule)}
.ledger > div{padding:18px 24px;border-right:1px solid var(--rule)}
.ledger > div:last-child{border-right:0}
.ledger .lbl{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.ledger .v{font-family:var(--f-display);font-weight:700;font-size:30px;letter-spacing:-.03em;margin-top:5px;font-variant-numeric:tabular-nums}
.ledger .v.pos{color:var(--good)} .ledger .v.neg{color:var(--bad)}
.ledger .n{font-size:12.5px;color:var(--ink-2);margin-top:3px}

.find-head{padding:22px 32px 4px;display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap}
.ins{border-bottom:1px solid var(--rule)}
.ins:last-child{border-bottom:0}
.ins-head{padding:20px 32px;display:flex;gap:15px;align-items:flex-start;cursor:pointer;background:none;border:0;width:100%;text-align:left}
.ins-head:hover{background:var(--panel-2)}
.ins-num{flex:none;width:24px;height:24px;margin-top:3px;border-radius:50%;background:var(--panel-2);border:1px solid var(--rule);color:var(--ink-3);font-size:12px;font-weight:700;display:grid;place-items:center}
.ins-obs{font-family:var(--f-display);font-weight:600;font-size:19px;line-height:1.35;letter-spacing:-.015em;margin:9px 0 0;text-wrap:balance}
.ins-sum{font-size:13.5px;color:var(--ink-2);margin-top:7px}
.ins-money{font-family:var(--f-display);font-weight:700;font-size:22px;font-variant-numeric:tabular-nums;text-align:right;flex:none;letter-spacing:-.025em}
.ins-money.neg{color:var(--bad)} .ins-money.pos{color:var(--good)}
.ins-money .u{display:block;font-size:11px;font-weight:500;letter-spacing:.02em;color:var(--ink-3);margin-top:2px}
.ins-body{padding:0 32px 26px 70px;display:none}
.ins.open .ins-body{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.blk{margin-top:24px}
.blk-k{
  font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--ink-2);
  display:flex;align-items:center;gap:9px;margin-bottom:10px;
}
.blk p{margin:0;font-size:15px;line-height:1.62;max-width:70ch}
.ins-lead{margin:0;font-size:16px;line-height:1.6;max-width:66ch}
.conf-pill{
  font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--ink-3);
  background:var(--panel-2);border:1px solid var(--rule);border-radius:999px;padding:2px 10px;
}
/* secondary detail, one click away — keeps the card quiet by default */
.more{margin-top:12px}
.more summary{
  cursor:pointer;list-style:none;font-size:13px;color:var(--navy);
  display:inline-flex;align-items:center;gap:6px;
}
.more summary::-webkit-details-marker{display:none}
.more summary::before{content:"▸";font-size:10px;transition:transform .15s ease}
.more[open] summary::before{transform:rotate(90deg)}
.more summary:hover{text-decoration:underline}
.more > p{margin:10px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink-2);max-width:70ch}
.more .plat-sel{margin-top:12px}
.evidence{background:var(--panel-2);border:1px solid var(--rule);border-radius:14px;padding:16px 18px}
.ev-note{font-size:12.5px;line-height:1.55;color:var(--ink-3);margin-top:12px;padding-top:10px;border-top:1px dotted var(--rule-2)}
.conf{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:11px;color:var(--ink-2)}
.conf .bars{display:flex;gap:2px}
.conf .bars b{width:4px;height:10px;background:var(--rule-2);border-radius:1px}
.conf .bars b.on{background:var(--navy)}
.disproof{font-size:13px;color:var(--ink-3);margin-top:8px;font-style:italic}
.fix-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.plat-sel{display:flex;gap:6px;flex-wrap:wrap}
.plat-btn{
  border:1px solid var(--rule-2);background:var(--paper);border-radius:999px;padding:5px 12px;cursor:pointer;
  font-size:12px;color:var(--ink-2);
}
.plat-btn:hover{border-color:var(--ink-3);color:var(--ink)}
.plat-btn[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--paper)}
.fixbox{border:1px solid var(--rule);border-radius:14px;overflow:hidden}
.fixbox .fx-top{padding:10px 16px;background:var(--panel-2);border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:13px}
.fixbox .fx-in{padding:16px 18px}
.impact{
  display:flex;gap:16px;flex-wrap:wrap;align-items:center;
  margin-top:24px;padding-top:16px;border-top:1px solid var(--rule);
}
.impact-line{font-size:14.5px;color:var(--ink-2)}
.impact-line b{font-size:16px;color:var(--ink)}
.ins-acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.marked{background:var(--good-soft);border:1px solid var(--good);color:var(--good);border-radius:8px;padding:10px 14px;font-size:13.5px;margin-top:16px;display:flex;gap:10px;align-items:center}

.rep-foot{padding:24px 32px;background:var(--panel-2);border-top:1px solid var(--rule);font-size:13.5px;color:var(--ink-2)}
.thumbs{display:flex;gap:8px;align-items:center;margin-top:12px}

/* changes */
.tl{position:relative;padding-left:26px}
.tl::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:1px;background:var(--rule-2)}
.tl-item{position:relative;margin-bottom:18px}
.tl-item::before{
  content:"";position:absolute;left:-24px;top:20px;width:11px;height:11px;border-radius:50%;
  background:var(--panel);border:2px solid var(--rule-2);
}
.tl-item.keep::before{border-color:var(--good);background:var(--good)}
.tl-item.roll::before{border-color:var(--bad);background:var(--bad)}
.tl-item.watch::before{border-color:var(--navy);background:var(--paper)}
.diffbox{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--rule);border-radius:12px;overflow:hidden;font-family:var(--f-code);font-size:12.5px}
.diffbox > div{padding:12px 14px}
/* the diff is neutral — the verdict below it does the judging */
.diffbox .before{background:var(--panel-2);border-right:1px solid var(--rule);color:var(--ink-3)}
.diffbox .after{background:var(--navy-soft)}
.diffbox .hd{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.verdict{display:flex;align-items:center;gap:12px;padding:13px 17px;border-radius:14px;font-size:14.5px}
.verdict.keep{background:var(--good-soft);color:var(--good)}
.verdict.roll{background:var(--bad-soft);color:var(--bad)}
.verdict.watch{background:var(--navy-soft);color:var(--navy)}
.verdict b{font-family:var(--f-display);font-size:17px;font-weight:600;white-space:nowrap;flex:none}

/* ============================================================
   LANDING — motion & interaction
   ============================================================ */
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.06s}.rv.d2{transition-delay:.12s}.rv.d3{transition-delay:.18s}
.rv.d4{transition-delay:.24s}.rv.d5{transition-delay:.3s}
.meter i{transition:width .9s cubic-bezier(.2,.7,.3,1)}

/* hero instrument */
.hero-live{
  background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-lg);
  box-shadow:var(--shadow-2);overflow:hidden;max-width:100%;
}
.hl-top{display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid var(--rule);background:var(--panel-2);font-size:13px}
.hl-count{margin-left:auto;white-space:nowrap;font-size:13px}
.hl-count b{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.hl-body{padding:20px}
.hl-obs{font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.3;margin:12px 0 0;text-wrap:balance}
.hl-bars{margin-top:18px;display:flex;flex-direction:column;gap:9px}
.hl-bar{display:grid;grid-template-columns:118px 1fr 42px;align-items:center;gap:10px;font-size:12.5px}
.hl-bl{color:var(--ink-2)}
.hl-bv{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.hl-note{font-size:12px;color:var(--ink-3);margin-top:2px}
.hl-c{margin-top:20px;padding-top:16px;border-top:1px solid var(--rule)}
.hl-money b{font-size:30px;color:var(--bad);letter-spacing:-.03em}
.hl-fix{font-size:13px;color:var(--ink-2);margin-top:8px;line-height:1.6}
.hl-foot{
  border-top:1px solid var(--rule);background:var(--panel-2);padding:11px 18px;
  display:flex;align-items:center;gap:14px;min-height:58px;
}
.drop{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--bad);min-width:0}
.drop span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drop .drop-amt{font-weight:700;font-variant-numeric:tabular-nums;flex:none}
.drop.flash{animation:dropin .55s cubic-bezier(.2,.7,.3,1)}
@keyframes dropin{0%{opacity:0;transform:translateX(-8px)}60%{opacity:1}100%{opacity:1;transform:none}}
.hl-total{margin-left:auto;text-align:right;flex:none}
.hl-total b{display:block;font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--bad);letter-spacing:-.02em}

/* the flip: metric vs diagnosis */
.swap-wrap{display:flex;flex-direction:column;align-items:center;gap:22px}
.swap{display:inline-flex;background:var(--panel-2);border:1px solid var(--rule);border-radius:999px;padding:4px;gap:4px}
.swap button{border:0;background:transparent;padding:9px 18px;border-radius:999px;cursor:pointer;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.swap button:hover{color:var(--ink)}
.swap button[aria-pressed="true"]{background:var(--navy);color:var(--paper)}
.swap-stage{width:100%;max-width:min(940px,100%);transition:opacity .18s ease,transform .18s ease}
.swap-stage.fading{opacity:0;transform:translateY(6px)}
.swap-card{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-lg);box-shadow:var(--shadow-1);padding:32px}
.swap-card.metric{text-align:center}
.swap-badge{margin-bottom:18px}
.metric-big{font-size:clamp(56px,9vw,88px);font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--ink-3);display:inline-block}

/* scan demo */
.scan-wrap{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-lg);box-shadow:var(--shadow-2);overflow:hidden}
.scan-in{padding:26px 28px}
.scan-form{display:flex;gap:12px;flex-wrap:wrap;align-items:stretch}
.scan-form .url-wrap{flex:1}
.scan-plat{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-top:16px}
.scanbar{height:5px;border-radius:3px;background:var(--panel-2);overflow:hidden;margin:6px 0 18px}
.scanbar i{display:block;height:100%;width:0;background:var(--navy);border-radius:3px;transition:width .35s linear}
.scanlog{font-family:var(--f-code);font-size:12.5px;line-height:1.9}
.scanlog .ln{display:flex;gap:10px;opacity:0;transform:translateY(4px);transition:opacity .3s ease,transform .3s ease;color:var(--ink-2)}
.scanlog .ln.in{opacity:1;transform:none}
.scanlog .ok{color:var(--good)}
.scan-result{animation:pop-in .45s cubic-bezier(.2,.7,.3,1)}
@keyframes pop-in{0%{opacity:0;transform:translateY(10px) scale(.99)}100%{opacity:1;transform:none}}
.scan-result .ins-money{text-align:right}
.scan-result .ins-money b{font-size:26px;font-weight:700;letter-spacing:-.03em;color:var(--bad)}
.scan-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:22px;padding-top:18px;border-top:1px solid var(--rule)}

@media (max-width:1000px){
  .hero-live{max-width:none}
  .scan-result .split2{grid-template-columns:1fr}
}
@media (max-width:620px){
  .swap-card{padding:22px 18px}
  .scan-in{padding:20px}
  .hl-bar{grid-template-columns:96px 1fr 38px}
  .scan-cta{flex-direction:column;align-items:flex-start}
  .scan-cta .row{margin-left:0!important}
}

/* prototype chrome */
#proto{
  position:fixed;right:14px;bottom:14px;z-index:900;display:flex;gap:6px;align-items:center;
  background:color-mix(in srgb,var(--panel) 94%,transparent);backdrop-filter:blur(10px);
  border:1px solid var(--rule-2);border-radius:999px;padding:5px 6px 5px 12px;box-shadow:var(--shadow-2);
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
}
#proto select{
  border:1px solid var(--rule-2);background:var(--paper);border-radius:999px;padding:5px 9px;
  font-size:11.5px;cursor:pointer;
}
#proto button{border:1px solid var(--rule-2);background:var(--paper);border-radius:999px;width:27px;height:27px;cursor:pointer;font-size:12px;display:grid;place-items:center}
#proto button:hover{background:var(--panel-2)}
.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:950;
  background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:999px;font-size:13px;
  box-shadow:var(--shadow-2);animation:pop .25s ease;
}
@keyframes pop{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}

/* responsive */
/* small laptops and large tablets: keep two columns, tighten the gaps */
@media (max-width:1240px){
  .m-hero-in{gap:34px}
  .split3{grid-template-columns:repeat(2,1fr)}
  .tiers{grid-template-columns:repeat(2,1fr)}
  .app{grid-template-columns:186px 1fr}
}

@media (max-width:1000px){
  .m-hero-in{grid-template-columns:1fr;gap:38px;padding-top:48px}
  .split2,.split3,.tiers,.co,.pickgrid{grid-template-columns:1fr}
  .app{grid-template-columns:1fr}
  .rail{position:static;height:auto;flex-direction:row;align-items:center;overflow-x:auto;gap:2px;border-right:0;border-bottom:1px solid var(--rule)}
  .rail .brand,.rail-lbl,.site-pill{display:none}
  .logos{grid-template-columns:repeat(2,1fr)}
  .m-foot-in{grid-template-columns:1fr 1fr}
  .ledger{grid-template-columns:1fr}
  .ledger > div{border-right:0;border-bottom:1px solid var(--rule)}
  .co-left .co-inner,.co-right .co-inner{margin:0 auto}
  .fstep{grid-template-columns:1fr;gap:6px}
  .ins-body{padding-left:32px}
}
@media (max-width:620px){
  .m-sec{padding:52px 18px}
  .rep-mast,.tldr,.ins-head,.rep-foot{padding-inline:20px}
  .ins-body{padding-inline:20px}
  .diffbox{grid-template-columns:1fr}
  .diffbox .before{border-right:0;border-bottom:1px solid var(--rule)}
  .w-card-in{padding:24px 20px}
  .w-foot{padding-inline:20px}
}

@media print{ .rail,.topbar{display:none!important} .page,.page.doc{max-width:none;padding:0} }

/* ============================================================
   LANDING — the daily email, told as a scroll
   ============================================================ */

/* how far down the page you are */
.scrollbar-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:200;
  background:linear-gradient(90deg, var(--navy), var(--good));
  transition:width .1s linear;
}

/* section openers */
.act{max-width:var(--wrap);margin:0 auto;padding:clamp(56px,7vw,110px) var(--gutter) clamp(24px,3vw,44px)}
.act-num{
  font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--navy);display:flex;align-items:center;gap:12px;margin-bottom:14px;
}
.act-num::after{content:"";flex:1;height:1px;background:var(--rule);max-width:120px}
.act h2{
  font-size:clamp(30px,4.4vw,56px);line-height:1.05;letter-spacing:-.035em;
  font-weight:700;margin:0;text-wrap:balance;max-width:18ch;
}
.act p.lead{font-size:clamp(16px,1.5vw,19px);line-height:1.6;color:var(--ink-2);max-width:56ch;margin:18px 0 0}

/* A centred variant of the same header. The measure caps on the heading and
   the lead are what actually hold them left, so both need re-centring too —
   text-align alone would leave a centred line of text inside a block still
   sitting against the left margin. The eyebrow's rule is mirrored, because
   one line trailing off a centred label reads as a mistake. */
.act.mid{text-align:center}
.act.mid .act-num{justify-content:center}
.act.mid .act-num::before{
  content:"";flex:1;height:1px;background:var(--rule);max-width:120px;
}
.act.mid h2,
.act.mid p.lead{margin-left:auto;margin-right:auto}

/* ---------- the email, which is the product ---------- */
.mail{
  background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-lg);
  box-shadow:var(--shadow-2);overflow:hidden;
}
/* the window buttons, now only on the mail client's title bar — the message
   itself carries a sender line instead of pretending to be its own window */
.mail-dot{width:7px;height:7px;border-radius:50%;background:var(--rule-2)}
.mail-head{padding:20px 24px 0}
.mail-subject{font-size:17px;font-weight:700;letter-spacing:-.015em;line-height:1.35;margin:0 0 3px}
.mail-body{padding:18px 24px 24px}

.mail-money{
  font-size:clamp(38px,5vw,54px);font-weight:700;letter-spacing:-.04em;line-height:1;
  color:var(--bad);font-variant-numeric:tabular-nums;
}
.mail-money-sub{font-size:14px;color:var(--ink-2);margin-top:6px}
.mail-thing{
  font-size:19px;font-weight:700;line-height:1.35;letter-spacing:-.015em;
  margin:20px 0 0;text-wrap:balance;
}
.mail-steps{counter-reset:ms;list-style:none;margin:0;padding:0}
.mail-steps li{
  counter-increment:ms;position:relative;padding:0 0 11px 32px;font-size:14.5px;line-height:1.5;
}
.mail-steps li::before{
  content:counter(ms);position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;
  background:var(--navy-soft);color:var(--navy);font-size:11px;font-weight:700;
  display:grid;place-items:center;
}
/* a small label above a block, so the email scans without prose */
.mail-k{
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin:18px 0 8px;
}
/* Where the customers came from. Two columns, because the comparison between
   them is the entire argument and a sentence explaining it would be longer
   than the table. */
.mail-ch{width:100%;border-collapse:collapse;font-size:12.5px}
.mail-ch th{
  font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);text-align:right;padding:0 0 5px;
}
.mail-ch th:first-child{text-align:left}
.mail-ch td{padding:5px 0;border-top:1px solid var(--rule);text-align:right}
.mail-ch td:first-child{text-align:left;color:var(--ink-2)}
.mail-ch tr.up td b{color:var(--good)}
.mail-ch tr.down td b{color:var(--bad)}
.mail-ch-line{font-size:12.5px;color:var(--ink-2);margin-top:9px;line-height:1.45}

.mail-quiet{text-align:center;padding:30px 10px}
.mail-quiet .big{font-size:26px;font-weight:700;letter-spacing:-.02em;margin-bottom:8px}

/* the parts that light up as the story moves.
   The highlight is painted on the element rather than by a z-index:-1
   pseudo-element sitting behind it. That trick only survives while no
   ancestor makes a stacking context, and the laptop's perspective and
   preserve-3d both do — the tint would have been trapped behind the screen.
   A box-shadow spread reproduces the bleed past the text without one. */
.ep{transition:opacity .45s ease, filter .45s ease, background-color .45s ease, box-shadow .45s ease}
.ep.dim{opacity:.28;filter:saturate(.4)}
.ep.lit{
  position:relative;border-radius:10px;
  background-color:color-mix(in srgb, var(--navy) 9%, transparent);
  box-shadow:0 0 0 9px color-mix(in srgb, var(--navy) 9%, transparent);
}

/* ---------- the funnel editor in settings ---------- */
.fsteps{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.fstep{border:1px solid var(--rule);border-radius:12px;padding:12px 14px;background:var(--panel-2)}
.fstep.bad{border-color:var(--bad);background:var(--bad-soft)}
.fkind,.fval{
  height:34px;padding:0 10px;border-radius:9px;
  border:1px solid var(--rule-2);background:var(--panel);color:var(--ink);font-size:13.5px;
}
.fval{min-width:0;flex:1}
.fkind{flex:0 0 auto}
@media (max-width:620px){ .fkind,.fval{flex:1 1 100%} }

/* ---------- the laptop the email is read on ----------
   Real elements in a preserve-3d space rather than a drawing, so the email
   on the screen stays live text: still lit by the beats, still selectable,
   still readable by a crawler.

   --open runs 0 (shut) to 1 (open) and is written by the scroll handler. It
   defaults to 1 so that if the script never runs — or the reader asked for
   reduced motion — the laptop is simply sitting open rather than shut and
   hiding the entire pitch. */
/* A nearer vanishing point is the whole of the depth here: 1700px was far
   enough away to flatten the lid and the deck into much the same plane. At
   1150 the deck recedes visibly and the turn has somewhere to go. */
.lap-stage{ perspective:1150px; perspective-origin:50% 34%; margin-bottom:104px; }

/* The body is fixed. It used to turn to face you as you arrived, which was
   more movement than the moment wanted: the lid opening already says
   everything the turn was saying, and says it about the email rather than
   about itself. One variable drives the whole thing now. */
.lap{
  position:relative; transform-style:preserve-3d;
  transform:rotateX(9deg);
}
.lap-lid{
  position:relative; z-index:2; transform-style:preserve-3d;
  transform-origin:50% 100%;
  /* -90deg lies flat on the deck; -8deg is an open screen's natural recline */
  transform:rotateX(calc(-90deg + var(--open,1) * 82deg));
  background:linear-gradient(168deg, var(--panel-2), var(--ground));
  border:1px solid var(--rule-2); border-radius:14px 14px 4px 4px;
  padding:10px 10px 0;
  box-shadow:0 26px 60px -30px rgba(0,0,0,.6);
}
.lap-screen{
  position:relative; overflow:hidden; aspect-ratio:16/10;
  border-radius:6px 6px 0 0; background:var(--panel);
  /* dark until the lid is far enough up to read, and gone entirely once we
     are looking at the back of a turned-away machine */
  opacity:clamp(0, calc((var(--open,1) - .28) * 3.2), 1);
  backface-visibility:hidden;
}
.lap-glass{
  position:absolute; inset:0 0 auto 0;
  transition:transform .62s cubic-bezier(.4,0,.2,1);
}
.lap-gloss{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(122deg, rgba(255,255,255,.10), rgba(255,255,255,0) 46%);
}
.lap-chin{
  height:22px; display:grid; place-items:center;
  border-radius:0 0 4px 4px;
}
.lap-chin::after{
  content:""; width:44px; height:3px; border-radius:2px; background:var(--rule-2);
}

/* the deck. Absolutely positioned from the hinge so its 280px of depth
   collapses to about 75px on screen without pushing the page around. */
.lap-base{
  position:absolute; top:100%; left:-3.5%; right:-3.5%; height:280px;
  transform-origin:50% 0; transform:rotateX(74deg);
  background:linear-gradient(180deg, var(--ground), var(--panel-2));
  border:1px solid var(--rule-2); border-radius:4px 4px 16px 16px;
  padding:16px 7% 0;
}
.lap-kb{
  height:112px; border-radius:6px;
  background:var(--panel-2); border:1px solid var(--rule);
  background-image:repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 7.5%),
                   repeating-linear-gradient(180deg, var(--rule) 0 1px, transparent 1px 25%);
}
.lap-pad{
  width:34%; height:74px; margin:14px auto 0; border-radius:7px;
  background:var(--panel-2); border:1px solid var(--rule);
}
.lap-shadow{
  position:absolute; top:100%; left:0; right:0; height:120px;
  transform:translateY(56px); z-index:0; pointer-events:none;
  background:radial-gradient(56% 50% at 50% 0, rgba(0,0,0,.50), transparent 74%);
  filter:blur(13px);
}

/* ---------- the mail client on the screen ----------
   The message on its own read as a card with a subject on it. Sitting it in
   an inbox — folders, other mail, ours selected among them — is what makes
   it unmistakably email. */
.mapp{
  position:absolute; inset:0; display:flex; flex-direction:column;
  background:var(--panel); text-align:left;
}
.mapp-bar{
  flex:0 0 auto; display:flex; align-items:center; gap:7px; padding:7px 11px;
  background:var(--panel-2); border-bottom:1px solid var(--rule);
}
.mapp-title{font-size:11px;font-weight:700;color:var(--ink-2);margin-left:5px}
.mapp-search{
  flex:1; max-width:150px; height:15px; margin-left:auto; border-radius:999px;
  background:var(--ground); border:1px solid var(--rule);
}
.mapp-body{flex:1;display:flex;min-height:0}
.mapp-list{
  flex:0 0 33%; min-width:0; overflow:hidden;
  background:var(--panel-2); border-right:1px solid var(--rule);
}
.mrow{padding:7px 9px;border-bottom:1px solid var(--rule)}
.mrow.on{background:var(--navy-soft);box-shadow:inset 2px 0 0 var(--navy)}
.mrow .f{
  font-size:10.5px;font-weight:700;color:var(--ink);
  display:flex;justify-content:space-between;gap:6px;align-items:baseline;
}
.mrow-t{font-size:9.5px;font-weight:400;color:var(--ink-3);white-space:nowrap}
.mrow .s{
  font-size:10px;line-height:1.35;color:var(--ink-2);margin-top:2px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.mapp-read{flex:1;position:relative;overflow:hidden;min-height:0}

/* the email, once it is behind glass rather than sitting on the page */
.lap-glass .mail{ border:0; border-radius:0; box-shadow:none; }
.lap-glass .mail-money{ font-size:clamp(26px,2.6vw,38px) }
.mail-from{
  display:flex;align-items:center;gap:9px;padding:12px 16px 10px;
  border-bottom:1px solid var(--rule);
}
.mail-av{
  width:26px;height:26px;flex:0 0 26px;border-radius:50%;
  background:var(--navy);color:var(--paper);
  display:grid;place-items:center;font-size:12px;font-weight:700;
}
.mail-who{font-size:12.5px;line-height:1.3}
.mail-to{font-size:11px;color:var(--ink-3)}
.mail-acts{color:var(--ink-3);font-size:12px;letter-spacing:3px}
.lap-glass .mail-head{padding:14px 16px 0}
.lap-glass .mail-body{padding:12px 16px 20px}

/* ---------- the pinned walkthrough ---------- */
.story{
  max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter) clamp(40px,6vw,90px);
  display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(30px,5vw,80px);align-items:start;
}
.story-pin{position:sticky;top:92px}
/* Runway. The laptop does not begin opening until it is fully on screen,
   which leaves only a couple of hundred pixels before the first beat would
   otherwise arrive — and a beat asking you to read the subject line while
   the lid is still halfway up is worse than no animation. This pushes the
   first beat down so the machine has finished opening before anything is
   asked of it. */
.beats{display:flex;flex-direction:column;padding-top:34vh}
.beat{
  min-height:64vh;display:flex;flex-direction:column;justify-content:center;
  opacity:.32;transition:opacity .5s ease;
}
.beat.on{opacity:1}
.beat-k{
  font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--navy);margin-bottom:10px;
}
.beat h3{font-size:clamp(22px,2.6vw,31px);line-height:1.2;letter-spacing:-.025em;font-weight:700;margin:0 0 12px;text-wrap:balance}
.beat p{font-size:16px;line-height:1.65;color:var(--ink-2);margin:0;max-width:46ch}

/* ---------- see / understand / grow ---------- */
.triad{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px);
  max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter) clamp(50px,6vw,90px)}
.tri{
  background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:clamp(22px,2.4vw,32px);box-shadow:var(--shadow-1);
}
.tri .glyph{font-size:26px;line-height:1;margin-bottom:16px;display:block}
.tri h3{font-size:22px;font-weight:700;letter-spacing:-.02em;margin:0 0 8px}
.tri p{font-size:15px;line-height:1.6;color:var(--ink-2);margin:0}

/* ---------- the money strip ---------- */
.ledger-strip{
  max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter) clamp(50px,6vw,90px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px);
}
.lstat{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow-1)}
.lstat .k{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.lstat .v{font-size:clamp(28px,3.4vw,40px);font-weight:700;letter-spacing:-.03em;margin-top:8px;font-variant-numeric:tabular-nums}
.lstat .n{font-size:13.5px;color:var(--ink-2);margin-top:6px;line-height:1.5}

@media (max-width:1000px){
  .story{grid-template-columns:1fr;gap:26px}
  .story-pin{position:static}
  .beats{padding-top:0}          /* no laptop to wait for down here */
  .beat{min-height:0;padding:22px 0;opacity:1}
  .triad,.ledger-strip{grid-template-columns:1fr}
  .ep.dim{opacity:1;filter:none}

  /* Below this the pin unsticks and the beats stop taking turns, so there is
     no scroll left to open a lid with, no room for a 16:10 screen, and none
     at all for a message list beside the message. Fold the laptop away and
     drop back to the email on its own — still plainly mail, because the
     sender line and subject travel with it. */
  .lap-stage{perspective:none;margin-bottom:0}
  .lap,.lap-lid{transform:none}
  .lap-lid{padding:0;border:0;border-radius:0;background:none;box-shadow:none}
  .lap-screen{aspect-ratio:auto;overflow:visible;opacity:1;border-radius:var(--r-lg);backface-visibility:visible}
  .mapp{position:static;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--rule);box-shadow:var(--shadow-2)}
  .mapp-list{display:none}
  .mapp-read{overflow:visible}
  .lap-glass{position:static;transform:none!important;transition:none}
  .lap-glass .mail-money{font-size:clamp(34px,7vw,48px)}
  .lap-base,.lap-shadow,.lap-gloss,.lap-chin{display:none}
}

/* No reduced-motion override for the laptop, deliberately.
   One used to pin the lid open, which stopped the script from ever being
   able to move it and left the section completely inert. What remains is a
   lid opening as you scroll — a small contained movement, and the only
   reason the object on screen is legible as a laptop at all. The turn
   through depth, which is what that preference is really for, is gone for
   everybody. The global rule above still removes the transitions. */