/* ============================================================
   SHELTON STRATEGIES — "The Ledger"
   A set of books rendered as an instrument panel at night.

   The one bold move: numbers outrank prose. Every figure is mono,
   tabular, right-aligned on a ruled line. Hairlines and ledger rows
   replace cards; the page reads like a document you can audit,
   because that is literally what is being sold.

   Committed dark. Every colour painted explicitly.
   ============================================================ */

:root{
  /* paper, with a cool cast pulled from the navy in the logo — a chosen
     neutral, not a default grey and not the cream every AI site reaches for */
  --ink:      #F3F5FA;
  --ink-2:    #E9EDF6;
  --panel:    #FFFFFF;
  --panel-2:  #F7F9FC;

  /* hairlines still do the work cards used to do */
  --hair:     rgba(11,30,69,.15);
  --hair-2:   rgba(11,30,69,.07);
  --hair-hot: rgba(18,86,232,.35);

  /* text: the navy from the logo, not black */
  --bone:     #0B1E45;
  --dim:      #415374;
  --dimmer:   #6E7D99;

  /* brand, at full strength on paper */
  --blue:     #1256E8;
  --blue-hi:  #0D45BF;
  --blue-lo:  #0A348F;
  --red:      #E0111C;
  --amber:    #B87514;
  --green:    #16794A;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --maxw: 1240px;
  --pad: clamp(20px, 5vw, 64px);
  --rule: 1px solid var(--hair);
  color-scheme: light;
}

/* The three sections that stay dark, as deliberate contrast rather than a
   whole-site mood. Tokens are re-declared locally, so every rule inside
   keeps working untouched. */
.statement,.cta-band,.sec-navy{
  --ink:#08101F; --ink-2:#0B1425; --panel:#111C33; --panel-2:#16223C;
  --hair:rgba(150,175,215,.17); --hair-2:rgba(150,175,215,.09); --hair-hot:rgba(110,155,255,.45);
  --bone:#EAEFF8; --dim:#9FB1CC; --dimmer:#6E8199;
  --blue:#2E6BFF; --blue-hi:#7CA5FF; --red:#FF5A64;
  --amber:#E8A33D; --green:#3ECF8E;
  background:var(--ink); color:var(--bone);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:90px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  margin:0; background:var(--ink); color:var(--bone);
  font-family:var(--body); font-size:16.5px; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  font-feature-settings:"kern" 1;
}
img,svg,canvas{max-width:100%; display:block; height:auto}
a{color:var(--blue-hi); text-decoration:none}
a:hover{color:var(--blue-lo)}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px}
hr{border:0; border-top:var(--rule); margin:0}

/* ---------- type: display is tight and big, prose is quiet ---------- */
/* Width, not just weight. Every site in the top tier uses a display face with
   a width character — extended or condensed, never a normal-width geometric.
   Archivo carries a wdth axis, so the display voice is EXPANDED throughout. */
h1,h2,h3,h4{
  font-family:var(--display); margin:0; color:var(--bone);
  letter-spacing:-.035em; line-height:.98; text-wrap:balance; font-weight:700;
  font-stretch:118%; font-variation-settings:"wdth" 118;
}
h3,h4{font-stretch:108%; font-variation-settings:"wdth" 108}
h1{font-size:clamp(2.6rem,5.2vw,4.7rem); font-weight:800; letter-spacing:-.045em}
h2{font-size:clamp(2.1rem,4.4vw,3.6rem); font-weight:800; letter-spacing:-.04em}
h3{font-size:clamp(1.12rem,1.6vw,1.34rem); font-weight:700; letter-spacing:-.02em; line-height:1.18}
h4{font-size:.9rem; font-weight:700; letter-spacing:-.01em}
p{margin:0 0 1.05em; color:var(--dim)}
p:last-child{margin-bottom:0}
strong,b{color:var(--bone); font-weight:600}
.lede{font-size:clamp(1.05rem,1.45vw,1.22rem); line-height:1.58; color:var(--dim); max-width:60ch}

/* the mono label is the site's connective tissue — it is a document, so it is annotated */
.eyebrow{
  font-family:var(--mono); font-size:.71rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--blue-hi);
  margin:0 0 1.1rem; display:flex; align-items:center; gap:.85rem;
}
.eyebrow::before{content:""; width:20px; height:2px; background:var(--red); flex:0 0 auto}
.eyebrow.solo::after{display:none}
.small{font-size:.85rem; color:var(--dimmer)}
.tnum,.num{font-family:var(--mono); font-variant-numeric:tabular-nums}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)}
.wrap-narrow{max-width:860px; margin-inline:auto; padding-inline:var(--pad)}
section{padding-block:clamp(60px,8.5vw,120px); position:relative}
.sec-ground,.sec-navy{background:var(--ink-2)}
.sec-ground{border-block:var(--rule)}
.sec-navy{border-block:var(--rule)}
.sec-tight{padding-block:clamp(38px,5vw,60px)}
.grid{display:grid; gap:0}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.g-3,.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.g-2,.g-3,.g-4{grid-template-columns:minmax(0,1fr)}}
.sec-head{max-width:780px; margin-bottom:clamp(32px,4.5vw,56px)}
.sec-head .lede{margin-top:1.1rem}
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5.5vw,84px); align-items:center}
@media (max-width:900px){.split{grid-template-columns:minmax(0,1fr)}}
.stack{display:grid; gap:1.3rem}

/* ---------- buttons: squared, weighty, no pills ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--mono); font-weight:500; font-size:.83rem;
  letter-spacing:.13em; text-transform:uppercase;
  padding:1.05em 1.7em; border-radius:2px; border:1px solid transparent;
  transition:background-color .16s, color .16s, border-color .16s, box-shadow .16s;
  white-space:nowrap; line-height:1;
}
.btn-primary{background:var(--blue); color:#fff; box-shadow:0 0 0 0 rgba(46,107,255,.5)}
.btn-primary:hover{background:var(--blue-hi); color:#fff; box-shadow:0 8px 28px rgba(18,86,232,.28)}
.btn-navy{background:transparent; color:var(--bone); border-color:var(--hair)}
.btn-navy:hover{border-color:var(--blue); background:rgba(18,86,232,.08); color:var(--blue-hi)}
.btn-ghost{background:transparent; color:var(--bone); border-color:var(--hair)}
.btn-ghost:hover{border-color:var(--bone); color:var(--bone)}
.btn-lg{font-size:.86rem; padding:1.2em 2em}
.btn-row{display:flex; flex-wrap:wrap; gap:12px; align-items:center}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(243,245,250,.86); backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px); border-bottom:var(--rule);
}
.hdr{display:flex; align-items:center; gap:18px; height:78px}
.brand{display:flex; align-items:center; flex:0 0 auto}
.brand img{height:30px; width:auto; opacity:1}
.brand:hover img{opacity:1}
.nav{display:flex; align-items:center; gap:2px; margin-left:auto}
.nav a{
  font-family:var(--mono); font-size:.76rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--dim); padding:.7em .85em; transition:color .15s;
}
.nav a:hover{color:var(--blue-lo)}
.nav a[aria-current="page"]{color:var(--bone); box-shadow:inset 0 -2px 0 var(--red)}
.nav > .btn{display:none}
.hdr > .btn{margin-left:10px}
.hdr-phone{
  display:inline-flex; align-items:center; gap:.5em; margin-left:8px;
  font-family:var(--mono); font-size:.82rem; color:var(--bone);
  padding:.55em .7em; white-space:nowrap; letter-spacing:.02em;
}
.hdr-phone:hover{color:var(--blue-hi)}
.hdr-phone svg{width:15px; height:15px; stroke:var(--blue-hi); stroke-width:1.9; fill:none; stroke-linecap:round; stroke-linejoin:round}
.hdr-call{display:none; padding:9px; border:1px solid var(--hair); border-radius:2px}
.hdr-call svg{width:21px; height:21px; stroke:var(--blue-hi); stroke-width:1.9; fill:none; stroke-linecap:round; stroke-linejoin:round}
.nav-toggle{display:none; padding:9px; border:1px solid var(--hair); border-radius:2px}
.nav-toggle svg{width:21px; height:21px; stroke:var(--bone); stroke-width:1.8; fill:none; stroke-linecap:round}
@media (max-width:1120px){.hdr-phone{display:none}}
@media (max-width:960px){
  .hdr-call{display:inline-flex; margin-left:auto}
  .nav-toggle{display:inline-flex; margin-left:8px}
  .hdr > .btn{display:none}
  .nav{
    position:fixed; inset:78px 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    background:var(--ink); border-bottom:var(--rule); padding:10px var(--pad) 26px; margin:0;
    transform:translateY(-10px); opacity:0; pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
  }
  .nav.open{transform:none; opacity:1; pointer-events:auto}
  .nav a{padding:1.05em .2em; font-size:.95rem; border-bottom:1px solid var(--hair-2); letter-spacing:.08em}
  .nav > .btn{display:inline-flex; margin-top:16px; width:100%}
}

/* ---------- hero: the chart breathes behind it ---------- */
.hero{position:relative; overflow:hidden; padding-block:clamp(72px,10vw,150px) clamp(56px,8vw,110px); border-bottom:var(--rule)}
#ledger-canvas{position:absolute; inset:auto 0 0 0; width:100%; height:58%; opacity:.32; pointer-events:none; z-index:0}
.hero::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(70% 55% at 74% 4%, rgba(18,86,232,.09), transparent 62%),
             radial-gradient(45% 40% at 0% 96%, rgba(224,17,28,.045), transparent 66%);
}
.hero > *{position:relative; z-index:1}
.hero h1{max-width:17ch}
.hero h1 .accent{color:var(--blue-hi)}
.hero .lede{margin-top:1.5rem; font-size:clamp(1.06rem,1.55vw,1.26rem)}
.hero .btn-row{margin-top:2.3rem}
.hero-meta{
  display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:2.4rem; padding-top:1.5rem;
  border-top:var(--rule); font-family:var(--mono); font-size:.76rem; letter-spacing:.05em; color:var(--dimmer);
}
.hero-meta span{display:inline-flex; align-items:center; gap:.6em}
.dot{width:5px; height:5px; border-radius:0; background:var(--blue); flex:0 0 auto; transform:rotate(45deg)}
.dot.red{background:var(--red)}
.hero-grid{display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(30px,5vw,70px); align-items:center}
@media (max-width:1000px){.hero-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- stat strip: numbers as architecture ---------- */
.statstrip{background:var(--ink); border-bottom:var(--rule)}
.statstrip .wrap{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0}
@media (max-width:780px){.statstrip .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}}
.statstrip .s{padding:clamp(26px,3.2vw,40px) clamp(14px,2vw,26px) clamp(26px,3.2vw,40px) 0; border-left:var(--rule); padding-left:clamp(16px,2vw,26px)}
.statstrip .s:first-child{border-left:0; padding-left:0}
@media (max-width:780px){
  .statstrip .s:nth-child(3){border-left:0; padding-left:0}
  .statstrip .s:nth-child(n+3){border-top:var(--rule)}
}
.statstrip b{
  font-family:var(--mono); font-weight:500; font-size:clamp(2.1rem,4vw,3.2rem);
  line-height:1; color:#fff; font-variant-numeric:tabular-nums; display:block; letter-spacing:-.04em;
}
.statstrip .s.red b{color:var(--red)}
.statstrip span{font-size:.84rem; color:var(--dimmer); display:block; margin-top:.7rem; line-height:1.4; max-width:22ch}

/* ---------- the ledger row: replaces every card grid ---------- */
.card{
  background:transparent; border:0; border-top:var(--rule);
  padding:clamp(22px,2.6vw,30px) clamp(18px,2vw,26px) clamp(24px,2.8vw,32px) 0;
  display:flex; flex-direction:column; gap:.7rem; position:relative;
  transition:background-color .2s;
}
.grid > .card{border-left:var(--rule); padding-left:clamp(18px,2vw,26px)}
.grid.g-3 > .card:nth-child(3n+1),
.grid.g-2 > .card:nth-child(2n+1){border-left:0; padding-left:0}
@media (max-width:900px){
  .grid.g-3 > .card:nth-child(2n+1){border-left:0; padding-left:0}
  .grid.g-3 > .card:nth-child(3n+1){border-left:var(--rule); padding-left:clamp(18px,2vw,26px)}
  .grid.g-3 > .card:nth-child(2n+1){border-left:0; padding-left:0}
}
@media (max-width:620px){.grid > .card{border-left:0!important; padding-left:0!important}}
.card.hoverable:hover{background:rgba(18,86,232,.045)}
.card p{font-size:.94rem; color:var(--dim); margin:0}
.card h3{color:var(--bone)}
.card .price{
  font-family:var(--mono); font-weight:500; font-size:1.6rem; color:var(--bone);
  font-variant-numeric:tabular-nums; margin-top:auto; padding-top:1rem; letter-spacing:-.03em;
}
.card .price small{display:block; font-family:var(--body); font-weight:400; font-size:.76rem; color:var(--dimmer); letter-spacing:0; margin-top:.3rem}
/* icons shrink to a quiet index mark rather than a tinted tile */
.card-icon{width:22px; height:22px; display:block; margin-bottom:.2rem; background:none}
.card-icon svg{width:22px; height:22px; stroke:var(--blue-hi); stroke-width:1.5; fill:none; stroke-linecap:round; stroke-linejoin:round; opacity:.9}
.card-n{font-family:var(--mono); font-weight:500; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--dimmer); margin:0}
.flag{
  display:inline-block; font-family:var(--mono); font-size:.58rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--red);
  border:1px solid rgba(255,59,71,.4); padding:.25em .5em; margin-left:.5em; vertical-align:middle;
}

/* ---------- PRICE LEDGER: the centrepiece ---------- */
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.ptable{width:100%; border-collapse:collapse; font-size:.95rem; background:transparent}
.ptable caption{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.ptable thead th{
  background:transparent; color:var(--dimmer);
  font-family:var(--mono); font-weight:500; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  text-align:left; padding:0 1.1rem .9rem 0; border-bottom:var(--rule);
}
.ptable thead th:last-child{text-align:right; padding-right:0}
.ptable tbody th{
  text-align:left; font-family:var(--display); font-weight:700; font-size:1.06rem; color:var(--bone);
  padding:1.35rem 1.4rem 1.35rem 0; vertical-align:top; width:23%; letter-spacing:-.02em;
}
.ptable tbody td{padding:1.35rem 1.4rem 1.35rem 0; vertical-align:top; color:var(--dim); font-size:.93rem; line-height:1.55}
.ptable tbody td.amt{
  text-align:right; white-space:nowrap; width:18%; padding-right:0;
  font-family:var(--mono); font-weight:500; font-size:1.42rem; color:var(--bone);
  font-variant-numeric:tabular-nums; letter-spacing:-.03em;
}
.ptable tbody td.amt small{
  display:block; font-family:var(--body); font-weight:400; font-size:.72rem;
  color:var(--dimmer); line-height:1.45; margin-top:.35rem; letter-spacing:0; white-space:normal;
}
.ptable tbody tr{border-bottom:1px solid var(--hair-2)}
.ptable tbody tr:hover{background:rgba(18,86,232,.045)}
.ptable tbody tr:last-child{border-bottom:var(--rule)}
@media (max-width:760px){
  .ptable thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  .ptable tbody tr{display:grid; grid-template-columns:1fr auto; gap:.2rem 1rem; padding:1.2rem 0; border-bottom:1px solid var(--hair-2)}
  .ptable tbody th{width:auto; padding:0; grid-column:1}
  .ptable tbody td.amt{width:auto; padding:0; grid-column:2; grid-row:1; font-size:1.2rem; text-align:right}
  .ptable tbody td:not(.amt){grid-column:1/-1; padding:.5rem 0 0}
}

/* ---------- comparison: two ledgers side by side ---------- */
.compare{border:0; border-top:var(--rule); background:transparent}
.cmp-head{display:grid; grid-template-columns:1fr 1fr; font-family:var(--mono); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase}
.cmp-head div{padding:1rem 1.3rem 1rem 0}
.cmp-head .a{color:var(--dimmer)}
.cmp-head .b{color:var(--blue-hi); border-left:var(--rule); padding-left:1.3rem}
.cmp-row{display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--hair-2); font-size:.94rem}
.cmp-row div{padding:1.05rem 1.3rem 1.05rem 0}
.cmp-row .a{color:var(--dimmer); text-decoration:line-through; text-decoration-color:rgba(255,59,71,.45); text-decoration-thickness:1px}
.cmp-row .b{color:var(--bone); border-left:var(--rule); padding-left:1.3rem}
@media (max-width:660px){
  .cmp-head{display:none}
  .cmp-row{grid-template-columns:minmax(0,1fr); padding:.9rem 0; gap:.3rem}
  .cmp-row div{padding:0}
  .cmp-row .a::before{content:"THEM  "; font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; color:var(--dimmer)}
  .cmp-row .b{border-left:0; padding-left:0}
  .cmp-row .b::before{content:"HERE  "; font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; color:var(--blue-hi)}
}

/* ---------- the statement: one enormous typographic moment ---------- */
.statement{background:var(--ink); padding-block:clamp(84px,13vw,190px); border-block:var(--rule); position:relative; overflow:hidden}
.statement::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(60% 90% at 88% 50%, rgba(46,107,255,.14), transparent 62%);
}
.statement .wrap{position:relative}
.statement .big{
  font-family:var(--display); font-weight:800; font-stretch:122%; font-variation-settings:"wdth" 122; font-size:clamp(2.8rem,9vw,7.5rem);
  line-height:.86; letter-spacing:-.055em; color:#fff; margin:0; text-wrap:balance;
}
.statement .big em{font-style:normal; color:var(--blue-hi)}
.statement .sub{margin-top:2rem; max-width:52ch; color:var(--dim); font-size:clamp(1rem,1.5vw,1.16rem); border-left:2px solid var(--red); padding-left:1.3rem}

/* ---------- numbered list ---------- */
.numlist{counter-reset:nl; list-style:none; padding:0; margin:1.8rem 0 0; display:grid; gap:0}
/* block, not grid: a bare <b> inside a grid li becomes its own cell and
   strangles the heading into a narrow column. */
.numlist li{
  counter-increment:nl; position:relative; display:block; padding:1.15rem 0 1.15rem 3.4rem;
  font-size:.96rem; color:var(--dim); border-top:1px solid var(--hair-2);
}
.numlist li::before{
  content:"0" counter(nl); position:absolute; left:0; top:1.35rem;
  font-family:var(--mono); font-weight:500; font-size:.76rem;
  color:var(--blue-hi); letter-spacing:.1em;
}
.numlist b{display:block; margin-bottom:.3rem; font-size:1.02rem}
.numlist b{color:var(--bone); font-family:var(--display); font-weight:700; letter-spacing:-.015em; display:block; margin-bottom:.3rem; font-size:1.02rem}

/* ---------- report: an instrument panel ---------- */
.rep{background:var(--panel); border:1px solid var(--hair); border-radius:3px; overflow:hidden; box-shadow:0 2px 6px rgba(11,30,69,.06), 0 24px 60px rgba(11,30,69,.10)}
.rep-head{padding:1rem 1.2rem; border-bottom:var(--rule); background:var(--panel-2); display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.rep-head b{font-family:var(--mono); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bone); display:block; font-weight:500}
.rep-head span{font-family:var(--mono); font-size:.68rem; color:var(--dimmer); letter-spacing:.08em}
.rep-body{padding:1.25rem; display:grid; gap:1.2rem}
.rep-kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0}
@media (max-width:620px){.rep-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rep-kpis .kpi{padding:.2rem .7rem; border-left:1px solid var(--hair-2)}
.rep-kpis .kpi:first-child{border-left:0; padding-left:0}
@media (max-width:620px){.rep-kpis .kpi:nth-child(3){border-left:0; padding-left:0} .rep-kpis .kpi:nth-child(n+3){margin-top:1rem}}
.rep-kpis .kpi b{
  font-family:var(--mono); font-weight:500; font-size:clamp(1.05rem,2vw,1.42rem);
  color:var(--bone); display:block; line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-.03em;
}
.rep-kpis .kpi span{font-size:.66rem; color:var(--dimmer); display:block; margin-top:.45rem; letter-spacing:.04em}
.rep-kpis .kpi .d{font-family:var(--mono); font-size:.64rem; margin-top:.5rem; display:inline-block; font-style:normal; letter-spacing:.06em}
.rep-kpis .kpi .d.up{color:var(--green)}
.rep-kpis .kpi .d.flat{color:var(--dimmer)}
.rep-chart{margin:0; border-top:1px solid var(--hair-2); border-bottom:1px solid var(--hair-2); padding:.9rem 0 .3rem}
.rep-chart figcaption{font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dimmer); margin-bottom:.5rem}
.rep-plain{border-left:2px solid var(--blue); padding:.2rem 0 .2rem 1rem; font-size:.85rem; color:var(--dim); margin:0; line-height:1.55}
.rep-plain b{color:var(--bone)}
.badge{
  display:inline-flex; align-items:center; gap:.4em; font-family:var(--mono); font-weight:500;
  font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--blue-hi);
  border:1px solid var(--hair-hot); padding:.4em .7em;
}
.badge.red{color:var(--red); border-color:rgba(255,59,71,.4)}

/* ---------- checks / crosses ---------- */
.checks,.crosses{list-style:none; padding:0; margin:0; display:grid; gap:0}
.checks li,.crosses li{
  display:grid; grid-template-columns:auto 1fr; gap:.85rem; align-items:start;
  font-size:.96rem; color:var(--dim); padding:.95rem 0; border-top:1px solid var(--hair-2);
}
.checks li::before{content:"+"; font-family:var(--mono); color:var(--blue-hi); font-size:.95rem; line-height:1.5}
.crosses li::before{content:"\2013"; font-family:var(--mono); color:var(--red); font-size:.95rem; line-height:1.5}
.fit{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(28px,5vw,64px)}
@media (max-width:820px){.fit{grid-template-columns:minmax(0,1fr)}}
.fit-col{background:transparent; border:0; padding:0}
.fit-col h3{margin-bottom:.6rem; font-family:var(--mono); font-size:.72rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--blue-hi)}
.fit-col.no h3{color:var(--red)}

/* ---------- callout ---------- */
.callout{border-left:2px solid var(--blue); background:transparent; border-radius:0; padding:.3rem 0 .3rem 1.3rem}
.callout p{margin:0; color:var(--dim); font-size:.94rem}
.callout strong{color:var(--bone)}

/* ---------- steps ---------- */
.steps{counter-reset:step; margin:0; padding:0; display:grid; gap:0; border-top:var(--rule); grid-template-columns:repeat(4,minmax(0,1fr))}
.steps.steps-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.steps > li{list-style:none; padding:clamp(24px,2.8vw,34px) clamp(16px,1.8vw,24px) clamp(28px,3.2vw,40px) 0; border-left:var(--rule); padding-left:clamp(16px,1.8vw,24px)}
.steps > li:first-child{border-left:0; padding-left:0}
.steps > li::before{
  counter-increment:step; content:"0" counter(step);
  font-family:var(--mono); font-weight:500; font-size:.72rem; color:var(--red);
  letter-spacing:.18em; display:block; margin-bottom:1.1rem;
}
.steps h3{margin-bottom:.55rem; color:var(--bone)}
.steps p{font-size:.9rem; color:var(--dim); margin:0}
@media (max-width:1000px){.steps,.steps.steps-5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps > li:nth-child(2n+1){border-left:0; padding-left:0}}
@media (max-width:560px){.steps,.steps.steps-5{grid-template-columns:minmax(0,1fr)}
  .steps > li{border-left:0!important; padding-left:0!important; border-top:1px solid var(--hair-2)}
  .steps > li:first-child{border-top:0}}

/* ---------- proof cases ---------- */
.cases{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; border-top:var(--rule)}
@media (max-width:880px){.cases{grid-template-columns:minmax(0,1fr)}}
.case{background:transparent; border:0; border-left:var(--rule); border-bottom:var(--rule); padding:clamp(26px,3vw,38px) clamp(20px,2.4vw,32px) clamp(30px,3.4vw,42px)}
.cases > .case:nth-child(2n+1){border-left:0; padding-left:0}
@media (max-width:880px){.case{border-left:0!important; padding-left:0!important}}
.case-top{padding:0 0 1rem; background:transparent; display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap}
.case-top h3{color:var(--bone); font-size:1.3rem}
.case-top .ind{font-family:var(--mono); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--dimmer); white-space:nowrap}
.case-body{padding:0; display:grid; gap:1rem}
.case-body p{font-size:.94rem; color:var(--dim); margin:0}
.case-body .tags{display:flex; gap:6px; flex-wrap:wrap}
.case-body .tags span{font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; padding:.3em .6em; border:1px solid var(--hair); color:var(--dimmer)}
.case-body .lesson{border-top:1px solid var(--hair-2); padding-top:1rem; font-size:.94rem}
.case-body .lesson b{color:var(--blue-hi); font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; display:block; margin-bottom:.4rem; font-weight:500}

/* ---------- packages ---------- */
.pkgs{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; border-top:var(--rule)}
@media (max-width:880px){.pkgs{grid-template-columns:minmax(0,1fr)}}
.pkg{
  background:transparent; border:0; border-left:var(--rule); border-bottom:var(--rule);
  padding:clamp(26px,3vw,38px) clamp(20px,2.4vw,32px) clamp(28px,3.2vw,40px);
  display:grid; gap:.9rem; align-content:start;
}
.pkgs > .pkg:nth-child(2n+1){border-left:0; padding-left:0}
@media (max-width:880px){.pkg{border-left:0!important; padding-left:0!important}}
.pkg.pkg-flag{background:rgba(18,86,232,.055)}
.pkg-top{display:flex; justify-content:space-between; gap:16px; align-items:flex-start; flex-wrap:wrap}
.pkg-n{font-family:var(--mono); font-weight:500; font-size:.68rem; letter-spacing:.2em; color:var(--dimmer); display:block; margin-bottom:.45rem}
.pkg h3{font-size:1.5rem; color:var(--bone)}
.pkg-price{text-align:right}
.pkg-price b{font-family:var(--mono); font-weight:500; font-size:2rem; color:var(--bone); display:block; line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-.04em}
.pkg-price span{font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; color:var(--dimmer); display:block; margin-top:.4rem}
.pkg p{font-size:.94rem; color:var(--dim); margin:0}
.pkg-save{border-top:1px solid var(--hair-2); padding-top:.9rem; font-size:.9rem; color:var(--dim)}
.pkg-save b{color:var(--bone); font-family:var(--mono); font-variant-numeric:tabular-nums}
.pkg-save.neutral{color:var(--dimmer)}
.pkg-foot{font-size:.86rem; color:var(--dimmer); font-style:italic}

/* ---------- partnership ---------- */
.perf{background:var(--panel); border:1px solid var(--hair); border-radius:3px; padding:clamp(24px,3vw,34px); display:grid; gap:1rem}
.perf h3{color:#fff; font-size:1.5rem}
.perf .perf-line{font-family:var(--mono); font-size:.95rem; color:#fff; margin:0; letter-spacing:-.01em}
.perf .perf-line b{color:var(--blue-hi); font-weight:500}
.perf p{color:var(--dim); font-size:.93rem; margin:0}
.terms{display:grid; gap:0; margin:0}
.terms > div{display:grid; gap:.3rem; padding:1rem 0; border-top:1px solid var(--hair-2)}
.terms dt{font-family:var(--display); font-weight:700; color:#fff; font-size:.98rem; letter-spacing:-.015em}
.terms dd{margin:0; color:var(--dim); font-size:.92rem}

/* ---------- about ---------- */
.cos{display:grid; gap:0; border-top:var(--rule)}
.cor{display:grid; grid-template-columns:auto 1fr; gap:1.1rem; padding:1.1rem 0; border-bottom:1px solid var(--hair-2); background:transparent; border-left:0; border-right:0; border-top:0; align-items:baseline}
.cor .tag{font-family:var(--mono); font-size:.64rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--red); min-width:44px}
.cor strong{display:block; color:var(--bone); font-family:var(--display); font-weight:700; letter-spacing:-.015em}
.cor span{color:var(--dimmer); font-size:.87rem}
.facts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin-top:1.6rem; border-top:var(--rule)}
@media (max-width:560px){.facts{grid-template-columns:minmax(0,1fr)}}
.fact{border-left:var(--rule); padding:1.2rem 1rem 1.2rem 1.1rem}
.fact:first-child{border-left:0; padding-left:0}
.fact b{font-family:var(--mono); font-weight:500; font-size:1.9rem; display:block; line-height:1; color:var(--bone); letter-spacing:-.04em}
.fact span{font-size:.78rem; color:var(--dimmer); display:block; margin-top:.5rem}

/* ---------- FAQ ---------- */
.faq{border-top:var(--rule)}
.faq details{border-bottom:1px solid var(--hair-2)}
.faq summary{
  display:flex; justify-content:space-between; align-items:baseline; gap:1.8rem;
  padding:1.35rem 0; cursor:pointer; list-style:none;
  font-family:var(--display); font-weight:700; font-size:1.02rem; color:var(--bone); line-height:1.35; letter-spacing:-.02em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:var(--mono); color:var(--blue-hi); font-size:1.1rem; flex:0 0 auto; transition:transform .2s}
.faq details[open] summary::after{content:"\2212"}
.faq details > div{padding:0 0 1.5rem; max-width:68ch}
.faq details > div p{color:var(--dim); font-size:.95rem; margin:0}
.faq summary:hover{color:var(--blue-hi)}

/* ---------- CTA band ---------- */
.cta-band{background:var(--ink-2); border-block:var(--rule); position:relative; overflow:hidden}
.cta-band::before{content:""; position:absolute; inset:0; background:radial-gradient(55% 100% at 85% 50%, rgba(46,107,255,.16), transparent 60%)}
.cta-band > *{position:relative}
.cta-band h2{color:#fff; max-width:15ch}
.cta-band p{color:var(--dim); max-width:54ch}

/* ---------- tools ---------- */
.tool{background:var(--panel); border:1px solid var(--hair); border-radius:3px; overflow:hidden}
.tool-head{padding:1.4rem clamp(18px,2.2vw,28px); border-bottom:var(--rule); background:var(--panel-2); display:flex; justify-content:space-between; gap:16px; align-items:center; flex-wrap:wrap}
.tool-head h2{font-size:clamp(1.3rem,2.2vw,1.7rem)}
.tool-body{padding:clamp(18px,2.4vw,30px)}
.q{display:grid; gap:.8rem; padding:1.2rem 0; border-bottom:1px solid var(--hair-2)}
.q:first-child{padding-top:0}
.qt{font-weight:400; color:var(--bone); margin:0; display:flex; gap:.8rem; align-items:baseline; font-size:.97rem}
.qt .k{font-family:var(--mono); font-weight:500; font-size:.68rem; color:var(--red); flex:0 0 auto; letter-spacing:.14em}
.opts{display:flex; gap:8px; flex-wrap:wrap}
.opt{
  border:1px solid var(--hair); background:transparent; color:var(--dim);
  padding:.6em 1em; border-radius:2px; font-family:var(--mono); font-size:.78rem; letter-spacing:.03em;
  cursor:pointer; transition:border-color .14s, background-color .14s, color .14s;
}
.opt:hover{border-color:var(--blue); color:var(--blue-hi)}
.opt.on{background:var(--blue); border-color:var(--blue); color:#fff}
.tool-go{display:flex; gap:16px; align-items:center; flex-wrap:wrap; padding-top:1.5rem}
.hiddenpanel{display:none}
.hiddenpanel.show{display:block; margin-top:1.8rem; padding-top:1.8rem; border-top:2px solid var(--blue)}
.score-wrap{display:grid; grid-template-columns:auto 1fr; gap:clamp(22px,3.5vw,44px); align-items:center}
@media (max-width:620px){.score-wrap{grid-template-columns:minmax(0,1fr)}}
.ring{width:152px; height:152px; position:relative}
.ring svg{width:100%; height:100%}
.ring .num{position:absolute; inset:0; display:grid; place-items:center; text-align:center; line-height:1.1}
.ring .num b{font-family:var(--mono); font-size:2.7rem; font-weight:500; color:var(--bone); font-variant-numeric:tabular-nums; letter-spacing:-.05em}
.ring .num span{font-family:var(--mono); font-size:.6rem; color:var(--dimmer); letter-spacing:.18em; text-transform:uppercase}
.bars{display:grid; gap:0}
.bar{display:grid; grid-template-columns:118px 1fr 46px; gap:14px; align-items:center; font-size:.85rem; color:var(--dim); padding:.55rem 0; border-top:1px solid var(--hair-2)}
.bar:first-child{border-top:0}
@media (max-width:480px){.bar{grid-template-columns:92px 1fr 40px; font-size:.78rem}}
.bar .t{height:3px; background:rgba(11,30,69,.10); overflow:hidden}
.bar .t i{display:block; height:100%; background:var(--blue); width:0; transition:width .7s cubic-bezier(.2,.8,.3,1)}
.bar .v{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:.78rem; text-align:right; color:var(--bone)}
.verdict{font-size:.94rem; color:var(--dim); padding:0 0 0 1.2rem; border-left:2px solid var(--blue); margin:1.6rem 0 0; line-height:1.6}
.plan{margin-top:1.5rem; display:grid; gap:0; border-top:var(--rule)}
.plan .p{display:grid; grid-template-columns:auto 1fr; gap:1.1rem; padding:1.1rem 0; border-bottom:1px solid var(--hair-2)}
.plan .p .pr{font-family:var(--mono); font-size:.6rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; padding:.35em .6em; height:fit-content; white-space:nowrap; border:1px solid}
.pr.now{color:var(--red); border-color:rgba(255,59,71,.45)}
.pr.next{color:var(--amber); border-color:rgba(232,163,61,.45)}
.pr.later{color:var(--green); border-color:rgba(62,207,142,.45)}
.plan .p strong{display:block; color:var(--bone); font-family:var(--display); font-weight:700; letter-spacing:-.015em; margin-bottom:.25rem}
.plan .p span{color:var(--dim); font-size:.92rem}
.tool-foot{display:flex; gap:16px; align-items:center; flex-wrap:wrap; justify-content:space-between; margin-top:1.7rem; padding-top:1.3rem; border-top:var(--rule)}

/* calculator */
.calc{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3.5vw,44px)}
@media (max-width:780px){.calc{grid-template-columns:minmax(0,1fr)}}
.sl{display:grid; gap:.55rem; padding:1rem 0; border-bottom:1px solid var(--hair-2)}
.sl:first-child{padding-top:0}
.sl label{display:flex; justify-content:space-between; gap:12px; font-family:var(--mono); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dimmer)}
.sl label output{font-variant-numeric:tabular-nums; color:var(--bone); font-size:1rem; letter-spacing:-.02em}
.sl .hint{font-size:.78rem; color:var(--dimmer); margin:.2rem 0 0; line-height:1.5}
input[type=range]{width:100%; accent-color:var(--blue); height:20px; padding:0; border:0; background:transparent}
.out{display:grid; gap:0; align-content:start; border-top:var(--rule)}
.o{border:0; border-bottom:1px solid var(--hair-2); padding:1rem 0; background:transparent; display:flex; justify-content:space-between; align-items:baseline; gap:1rem}
.o b{font-family:var(--mono); font-size:1.5rem; font-weight:500; line-height:1; color:var(--bone); font-variant-numeric:tabular-nums; letter-spacing:-.035em; order:2}
.o span{font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--dimmer); order:1}
.o.hi{background:transparent; border-bottom:2px solid var(--blue)}
.o.hi b{color:var(--blue-hi); font-size:1.9rem}

/* ---------- forms ---------- */
.form{display:grid; gap:1.2rem}
.field{display:grid; gap:.45rem}
.field label{font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dimmer)}
.field .req{color:var(--red)}
input,select,textarea{
  font:inherit; font-size:.97rem; color:var(--bone); background:var(--panel);
  border:1px solid var(--hair); border-radius:2px; padding:.85em .95em; width:100%;
  transition:border-color .15s, background-color .15s;
}
input::placeholder,textarea::placeholder{color:#93A0B8}
input:hover,select:hover,textarea:hover{border-color:#B9C5DA}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--blue); background:var(--panel)}
textarea{min-height:140px; resize:vertical}
select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E7D99' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .9em center; background-size:16px; padding-right:2.6em}
.form-row{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.2rem}
@media (max-width:620px){.form-row{grid-template-columns:minmax(0,1fr)}}
.hp{position:absolute!important; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-note{font-family:var(--mono); font-size:.72rem; color:var(--dimmer); letter-spacing:.04em}
.form-status{display:none; padding:.9em 1.1em; border-radius:2px; font-size:.92rem; line-height:1.5}
.form-status.show{display:block}
.form-status.ok{background:#E8F6EE; border:1px solid #BCE3CD; color:#14532D}
.form-status.err{background:#FDECEE; border:1px solid #F5C4CA; color:#8A1220}

/* ---------- contact list ---------- */
.contact-list{list-style:none; padding:0; margin:0; display:grid; gap:0; border-top:var(--rule)}
.contact-list li{display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start; padding:1.2rem 0; border-bottom:1px solid var(--hair-2)}
.contact-list .ci{width:20px; height:20px; display:grid; place-items:center; background:none; border-radius:0; margin-top:.15rem}
.contact-list .ci svg{width:18px; height:18px; stroke:var(--blue-hi); stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round}
.contact-list h4{margin:0 0 .3rem; font-family:var(--mono); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--dimmer); font-weight:500}
.contact-list a{color:var(--bone); font-family:var(--mono); letter-spacing:-.01em}
.contact-list a:hover{color:var(--blue)}

/* ---------- footer ---------- */
.site-footer{background:var(--ink-2); border-top:var(--rule); color:var(--dimmer); padding-block:clamp(48px,6vw,76px) 30px; font-size:.9rem}
.site-footer a{color:var(--dim)}
.site-footer a:hover{color:var(--blue-lo)}
.foot-grid{display:grid; grid-template-columns:1.7fr 1fr 1fr 1.1fr; gap:clamp(26px,4vw,56px)}
@media (max-width:860px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.foot-grid{grid-template-columns:minmax(0,1fr)}}
.site-footer img{height:28px; width:auto; margin-bottom:1.2rem; opacity:1}
.site-footer h4{color:var(--dimmer); font-family:var(--mono); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; margin:0 0 1.1rem; font-weight:500}
.site-footer ul{list-style:none; padding:0; margin:0; display:grid; gap:.65rem}
.site-footer p{color:var(--dimmer); font-size:.88rem; max-width:34ch}
.foot-bottom{
  margin-top:clamp(34px,4.5vw,54px); padding-top:24px; border-top:var(--rule);
  display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:space-between;
  font-family:var(--mono); font-size:.72rem; color:var(--dimmer); letter-spacing:.05em;
}

/* ---------- misc ---------- */
.skip{position:absolute; left:-9999px; top:0; background:var(--blue); color:#fff; padding:.8em 1.2em; z-index:200}
.skip:focus{left:0}
.page-head{background:var(--ink-2); border-bottom:var(--rule); padding-block:clamp(56px,8vw,110px) clamp(40px,5vw,70px); position:relative; overflow:hidden}
.page-head::before{content:""; position:absolute; inset:0; background:radial-gradient(60% 80% at 80% 0%, rgba(18,86,232,.08), transparent 62%)}
.page-head .wrap{position:relative}
.page-head h1{font-size:clamp(2.4rem,5.4vw,4.4rem); max-width:17ch}
.page-head .lede{margin-top:1.3rem}
.crumbs{font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dimmer); margin-bottom:1.4rem}
.crumbs a{color:var(--dimmer)}
.crumbs a:hover{color:var(--blue-hi)}


/* ---------- the anti-positioning line (NoGood's device, Jeff's words) ---------- */
.anti{
  margin:1.4rem 0 0; font-family:var(--mono); font-size:.88rem; line-height:1.55;
  color:var(--red); letter-spacing:.01em; max-width:46ch;
  border-left:2px solid var(--red); padding-left:1rem;
}

/* ---------- proof chips: hard numbers above the fold ---------- */
.proof-chips{
  list-style:none; margin:2.3rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,auto); gap:0; justify-content:start;
}
@media (max-width:520px){.proof-chips{grid-template-columns:repeat(3,1fr)}}
.proof-chips li{padding:0 clamp(16px,2.4vw,30px); border-left:var(--rule)}
.proof-chips li:first-child{border-left:0; padding-left:0}
.proof-chips b{
  font-family:var(--mono); font-weight:500; font-size:clamp(1.5rem,2.6vw,2.05rem);
  color:var(--bone); display:block; line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-.04em;
}
.proof-chips span{
  display:block; margin-top:.55rem; font-family:var(--mono);
  font-size:.66rem; letter-spacing:.11em; text-transform:uppercase; color:var(--dimmer); line-height:1.5;
}

/* ---------- marquee: the four companies, moving ---------- */
.marquee{
  overflow:hidden; border-bottom:var(--rule); background:var(--ink);
  padding-block:1.15rem; position:relative;
}
.marquee::before,.marquee::after{content:""; position:absolute; top:0; bottom:0; width:90px; z-index:2; pointer-events:none}
.marquee::before{left:0; background:linear-gradient(90deg,var(--ink),transparent)}
.marquee::after{right:0; background:linear-gradient(-90deg,var(--ink),transparent)}
.marquee .track{display:flex; gap:clamp(30px,4vw,60px); width:max-content; animation:ledger-scroll 44s linear infinite}
.marquee:hover .track{animation-play-state:paused}
@keyframes ledger-scroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .marquee .track{animation:none; flex-wrap:wrap; width:auto; justify-content:center; gap:20px}
  .marquee::before,.marquee::after{display:none}
}
.marquee .it{
  font-family:var(--mono); font-size:.76rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bone); white-space:nowrap; display:inline-flex; align-items:center; gap:.9em;
}
.marquee .it::before{content:""; width:4px; height:4px; background:var(--blue); transform:rotate(45deg); flex:0 0 auto}
.marquee .it.dim{color:var(--dimmer)}
.marquee .it.dim::before{background:var(--dimmer)}