/* ═══════════ GROWTH STRATEGY SESSION ═══════════
   Ported from the Growth Scan document. Scoped under .scan-root so it
   renders as the finished client document inside the dark back office,
   the same way the shop review does. Slate and steel, Archivo over
   Instrument Sans, with IBM Plex Mono carrying every label and figure. */
.scan-root{
  /* ── type ──
     Helvetica Neue is a licensed desktop font, not a webfont we can ship, so
     it is referenced rather than bundled: Macs have it, and everything else
     falls through to Helvetica then Arial, which are metrically close enough
     that the layout does not move. Poppins is a real webfont and loads. */
  --f-head:"Helvetica Neue","HelveticaNeue",Helvetica,Arial,sans-serif;
  --f-body:Poppins,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ground:#F1F4F7; --surface:#FFFFFF; --surface-2:#F7F9FB; --sunk:#E9EEF3;
  --ink:#0C1420; --ink-2:#39485A; --muted:#67788B; --line:#DCE3EB; --line-2:#C6D1DD;
  --accent:#1B6B9E; --accent-soft:#E3EFF7; --accent-ink:#11506F;
  --now:#A86634; --now-soft:#F6ECE2;
  --crit:#B23F38; --crit-soft:#FBEAE7;
  --caut:#8F6D0E; --caut-soft:#FAF2DC;
  --good:#2E7A57; --good-soft:#E5F3EB;
  --shadow:0 1px 2px rgba(12,20,32,.05), 0 10px 30px -14px rgba(12,20,32,.22);
  --lift:0 2px 4px rgba(12,20,32,.06), 0 22px 48px -22px rgba(12,20,32,.32);
  --r:12px;
  --band:#0A111B; --band-2:#111B29; --band-ink:#EAF1F8; --band-mute:#7F93AA;
  --band-line:#1E2C3C; --band-accent:#63AEDD; --band-now:#D08F52;
  background:var(--ground); color:var(--ink);
  font-family:var(--f-body);
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
.scan-root *,.scan-root *::before,.scan-root *::after{box-sizing:border-box;}
.scan-root h1,.scan-root h2,.scan-root h3,.scan-root h4{
  font-family:var(--f-head); margin:0; text-wrap:balance;
  letter-spacing:-.025em; line-height:1.12;
}
.scan-root p{margin:0;}
.scan-root a{color:var(--accent);}
.k-wrap{max-width:1200px; margin:0 auto; padding:0 24px;}

/* top bar */
.k-topbar{
  position:sticky; top:0; z-index:20; background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--line);
}
.k-topbar-in{display:flex; align-items:center; gap:20px; height:60px;}
.k-brand{font-family:var(--f-head); font-weight:800; letter-spacing:-.04em; font-size:17px; flex:none;}
.k-brand em{
  font-style:normal; color:var(--muted); font-weight:500; font-size:10.5px;
  letter-spacing:.16em; text-transform:uppercase; font-family:var(--f-mono); margin-left:8px;
}
.k-brand img{height:26px; display:block;}
.k-topnav{display:flex; gap:2px; margin-left:auto; overflow-x:auto; scrollbar-width:none;}
.k-topnav::-webkit-scrollbar{display:none;}
.k-topnav a{
  font-size:12.5px; color:var(--muted); text-decoration:none; padding:6px 11px;
  border-radius:7px; white-space:nowrap; font-weight:500;
}
.k-topnav a:hover{color:var(--ink); background:var(--surface-2);}
.k-topnav a.on{color:var(--accent); background:var(--accent-soft);}

.k-sec{padding:64px 0; border-bottom:1px solid var(--line);}
.k-sec.alt{background:var(--surface);}
.k-sec.last{border-bottom:none;}
/* the closing panel used to carry .last; now that any section can be the final
   one, let the last rendered section drop its rule on its own */
.scan-root .k-sec:last-of-type{border-bottom:none;}
.k-eyebrow{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); display:flex; align-items:center; gap:12px; margin-bottom:16px;
}
.k-eyebrow::after{content:""; flex:1; height:1px; background:var(--line);}
.k-h{font-size:clamp(26px,3.8vw,40px); font-weight:700; margin-bottom:12px;}
.k-h3{font-family:var(--f-head); font-size:22px; font-weight:700; margin-bottom:6px;}
.k-sub{color:var(--ink-2); max-width:64ch; font-size:16px; margin-bottom:30px;}
.k-note{font-size:12.5px; color:var(--muted); margin-top:14px; max-width:74ch; line-height:1.55;}
.k-note.tight{margin-top:2px;}
.k-note strong{color:var(--ink);}
.k-spacer{height:26px;}
/* ── a section the client will not see ──
   Only ever drawn in the studio editor. It has to read as a placeholder at a
   glance, or it becomes another thing to mistake for real content. */
.k-sec.k-empty{padding:0;}
.k-empty .k-emptynote{
  margin:10px 0; padding:14px 18px; border-radius:10px;
  border:1px dashed var(--line-2); background:var(--surface-2);
  color:var(--muted); font-size:13px; line-height:1.5;
}
.k-empty .k-emptynote b{color:var(--ink-2); font-weight:600;}
.k-prose p{margin-bottom:14px; color:var(--ink-2); max-width:70ch;}

/* ═══════════ COVER ═══════════
   Its own world: MedStar blue, a portrait bleeding off the left, and the
   headline at full size. Deliberately unlike the sections below it — this is
   the only page meant to be looked at rather than read.

   The type runs white, matching the closing panel so the document opens and
   closes the same way. White on #00A6E6 measures 2.8:1, which is under the
   usual bar — carried here by the size and weight of the name, and by
   Freddy's call. */
.k-hero{
  --cov-ground:#00A6E6;
  --cov-ground-2:#31BDF0;
  --cov-accent:#FFFFFF;
  --cov-accent-soft:#FFFFFF;
  --cov-solid:#FFFFFF;
  --cov-body:rgba(255,255,255,.94);
  position:relative; overflow:hidden;
  background:linear-gradient(105deg, #0089C4 0%, var(--cov-ground) 38%, var(--cov-ground-2) 100%);
  color:#FFFFFF;
  display:grid; grid-template-columns:minmax(0,0.92fr) minmax(0,1.35fr);
  align-items:stretch; min-height:600px;
  border-bottom:1px solid rgba(255,255,255,.18);
}
.k-hero.noshot{grid-template-columns:1fr; min-height:460px;}
/* the glow sits ABOVE the portrait, not behind it — otherwise the portrait's
   fade ends on flat ground while the ground beside it is lit, and the seam
   between the two columns becomes a visible vertical line. */
.k-hero::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 130% at 88% 6%, rgba(255,255,255,.26) 0%, transparent 58%);
}

/* the portrait bleeds off the left and dissolves into the ground */
.k-hero-shot{position:relative; overflow:hidden; z-index:0;}
.k-hero-shot img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center top; display:block;
}
.k-hero-shot::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent 40%, var(--cov-ground) 99%);
}

.k-hero-body{
  position:relative; z-index:2;
  display:flex; flex-direction:column; justify-content:center;
  padding:76px 7vw 76px 48px; max-width:760px;
}
.k-hero.noshot .k-hero-body{padding-left:7vw; margin:0 auto; width:100%; max-width:1180px;}

/* NB: .k-brow is the scoreboard's row class — the cover needs its own name */
.k-cbrow{
  display:flex; align-items:center; gap:14px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--cov-accent-soft); margin-bottom:26px;
  white-space:nowrap;
}
.k-cbrow i{width:34px; height:1px; background:var(--cov-accent); flex:none;}
/* the moustache: the same line, sitting under the name rather than over it,
   and four points larger — under a name at 96px the eyebrow size read as an
   afterthought rather than as the second line of the pair */
.k-cbrow.under{margin:0 0 24px; font-size:15px;}

.scan-root .k-hero-h1{
  font-family:var(--f-head); font-weight:900;
  font-size:clamp(40px,5.6vw,82px); line-height:1.02; letter-spacing:-.022em;
  color:#FFFFFF; margin:0 0 26px; text-wrap:balance;
}
/* a name with a moustache under it closes the gap between the two */
.scan-root .k-hero-h1.tight{margin-bottom:16px;}
/* *starred* words carry the accent, in italic — the one flourish on the page */
.scan-root .k-hero-h1 em{
  font-style:italic; font-weight:900; color:#04222E;
}
.scan-root .k-hero-h1 strong{font-weight:900; color:#FFFFFF;}
/* the practice name standing in for a headline: a name is usually shorter than
   a sentence, so it takes the larger end of the scale and sits tighter */
.scan-root .k-hero-h1.k-hero-name{
  font-size:clamp(46px,6.4vw,96px); line-height:.98; letter-spacing:-.03em;
}

/* scoped: .scan-root p{margin:0} is more specific than a bare class */
.scan-root .k-hero-sub{
  font-family:var(--f-body);
  font-size:16px; line-height:1.72; color:var(--cov-body);
  max-width:46ch; margin:0 0 34px;
}

.k-hpills{display:flex; flex-wrap:wrap; gap:11px;}
.k-hpill{
  font-family:var(--f-body);
  font-size:16px; font-weight:500; line-height:1.1;
  padding:13px 22px; border-radius:99px;
  border:1px solid rgba(255,255,255,.55); color:#FFFFFF; white-space:nowrap;
}
/* the filled one is the single anchor: solid white, navy on it */
.k-hpill.on{background:#FFFFFF; border-color:#FFFFFF; color:#04222E; font-weight:600;}

@media (max-width:900px){
  .k-hero{grid-template-columns:1fr; min-height:0;}
  .k-hero-shot{height:44vh; min-height:300px;}
  .k-hero-shot::after{background:linear-gradient(180deg, transparent 45%, var(--cov-ground) 99%);}
  .k-hero-body{padding:34px 24px 48px;}
  .k-hero.noshot .k-hero-body{padding:48px 24px;}
  .k-cbrow{white-space:normal; letter-spacing:.16em; gap:10px;}
  .k-cbrow i{width:22px;}
}

/* vitals */
/* auto-fit, not a fixed four: the tile count varies by profile (five common,
   plus whatever the profile adds), and a hard four leaves an orphan on row two */
/* The separator lines are drawn by each tile's own 1px ring, meeting in the
   gap — not by a coloured background showing through it. With a background the
   cells left over on the last row rendered as a solid grey block beside the
   tiles, which read as a broken tile rather than as nothing. */
.k-tiles{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1px;
  background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow);
}
.k-tile{
  background:var(--surface); padding:20px; display:grid; gap:6px;
  align-content:start; min-height:130px; box-shadow:0 0 0 1px var(--line);
}
.k-tile .lab{font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);}
.k-tile .big{
  font-family:var(--f-head); font-weight:800; font-size:33px; letter-spacing:-.04em;
  font-variant-numeric:tabular-nums; line-height:1; min-height:33px;
}
.k-tile .big em{font-style:normal; font-size:17px; font-weight:600; color:var(--muted);}
.k-tile .sub{font-size:12.5px; color:var(--ink-2); line-height:1.4;}
.k-flag{
  display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:600;
  padding:3px 9px; border-radius:99px; width:fit-content; font-family:var(--f-mono);
  letter-spacing:.06em; text-transform:uppercase;
}
.k-flag.f-crit{background:var(--crit-soft); color:var(--crit);}
.k-flag.f-caut{background:var(--caut-soft); color:var(--caut);}
.k-flag.f-good{background:var(--good-soft); color:var(--good);}
.k-flag.f-neut{background:var(--sunk); color:var(--muted);}
.k-flag.f-none{background:var(--sunk); color:var(--muted);}
/* a tile nothing has measured: present, plainly empty, making no claim */
.k-tile.is-blank{opacity:.62;}
.k-notyet{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.06em;
  color:var(--muted); align-self:end; padding-top:6px;
}
.k-srcline{margin-top:16px; font-size:12px; color:var(--muted); display:flex; flex-wrap:wrap; gap:8px 20px;}
.k-srcline span{display:inline-flex; align-items:center; gap:7px;}
.k-tick{width:5px; height:5px; border-radius:99px; background:var(--good); display:inline-block; flex:none;}
.k-tick.est{background:var(--caut);}

/* the leak */

/* scoreboard */
.k-mapmeta{display:flex; gap:40px; margin-bottom:20px; flex-wrap:wrap;}
.k-mapmeta .mk{font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);}
.k-mapmeta .mv{font-family:var(--f-head); font-weight:800; font-size:30px; letter-spacing:-.04em; line-height:1.1;}
.k-mapmeta .mv.warn{color:var(--now);}
.k-board{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--lift);}
.k-brow{
  display:grid; grid-template-columns:1.5fr 1.1fr 78px 66px; gap:16px;
  align-items:center; padding:15px 22px; border-bottom:1px solid var(--line);
}
.k-brow.head{background:var(--surface-2); padding:12px 22px;}
.k-brow.head div{font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);}
.k-brow.head div:last-child{text-align:right;}
.k-brow:last-child{border-bottom:none;}
.k-brow .nm{font-size:14.5px; color:var(--ink-2); font-weight:500;}
.k-rv{display:flex; align-items:center; gap:10px;}
.k-rv .track{flex:1; height:8px; background:var(--sunk); border-radius:99px; overflow:hidden;}
.k-rv .fill{height:100%; background:var(--line-2); border-radius:99px;}
.k-rv .n{font-family:var(--f-mono); font-size:12.5px; color:var(--ink-2); width:38px; text-align:right; font-variant-numeric:tabular-nums;}
.k-brow .st{font-family:var(--f-mono); font-size:12.5px; color:var(--ink-2); font-variant-numeric:tabular-nums;}
.k-brow .rk{font-family:var(--f-mono); font-size:13px; color:var(--ink-2); text-align:right; font-variant-numeric:tabular-nums;}
.k-brow.you{background:var(--now-soft); border-top:2px solid var(--now); border-bottom:none;}
.k-brow.you .nm{color:var(--ink); font-weight:700; font-size:15.5px;}
.k-brow.you .k-rv .fill{background:var(--now);}
.k-brow.you .st,.k-brow.you .rk{color:var(--ink); font-weight:600;}

/* findings */
.k-finding{
  display:grid; grid-template-columns:auto 1fr auto; gap:22px; align-items:start;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:22px 24px;
}
.k-finding + .k-finding{margin-top:12px;}
.k-finding .fnum{font-family:var(--f-mono); font-size:12px; color:var(--muted); padding-top:4px; width:24px;}
.k-finding h4{font-size:19px; font-weight:600; margin:8px 0 7px;}
.k-finding p{font-size:14.5px; color:var(--ink-2); max-width:66ch;}
.k-ev{
  margin-top:11px; font-family:var(--f-mono); font-size:11.5px; color:var(--muted);
  background:var(--sunk); padding:8px 11px; border-radius:7px; display:inline-block;
}
.k-cost{text-align:right; min-width:140px;}
.k-cost .c-lab{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);}
.k-cost .c-val{
  font-family:var(--f-head); font-weight:800; font-size:23px; color:var(--now);
  font-variant-numeric:tabular-nums; white-space:nowrap; letter-spacing:-.03em;
}

/* tables */
.k-tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); box-shadow:var(--shadow);}
.k-table{border-collapse:collapse; width:100%; min-width:660px; font-size:13.5px;}
.k-table th{
  text-align:left; font-family:var(--f-mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); font-weight:500; padding:13px 16px;
  border-bottom:1px solid var(--line); white-space:nowrap; background:var(--surface-2);
}
.k-table td{padding:13px 16px; border-bottom:1px solid var(--line); color:var(--ink-2); vertical-align:middle;}
.k-table tr:last-child td{border-bottom:none;}
.k-table td.n,.k-table th.n{font-family:var(--f-mono); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap;}
.k-table td strong{color:var(--ink); font-weight:600;}
.k-table tr.hot td{background:var(--crit-soft);}

/* ad cards */

/* the model */
.k-model{display:grid; grid-template-columns:280px 1fr; gap:28px; align-items:start;}
.k-inputs{display:grid; gap:14px;}
.k-inp{display:grid; gap:6px;}
.k-inp label{font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);}
.k-inp .ctl{
  display:flex; align-items:center; background:var(--surface); border:1px solid var(--line-2);
  border-radius:8px; padding:0 11px; transition:border-color .12s, box-shadow .12s;
}
.k-inp .ctl span{color:var(--muted); font-size:13px; font-family:var(--f-mono);}
.k-inp input{
  width:100%; border:0; background:transparent; color:var(--ink); padding:10px 4px;
  font-family:var(--f-mono); font-size:15px; font-variant-numeric:tabular-nums; outline:none;
}
.k-inp .ctl:focus-within{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.k-legend{display:flex; gap:18px; font-size:12.5px; color:var(--ink-2); margin-bottom:16px; flex-wrap:wrap;}
.k-legend b{display:inline-flex; align-items:center; gap:8px; font-weight:500;}
.k-legend .sw{width:11px; height:11px; border-radius:3px; display:inline-block;}
.k-legend .sw.now{background:var(--now);}
.k-legend .sw.ms{background:var(--accent);}
.k-fun{display:grid; gap:2px;}
.k-fstep{display:grid; grid-template-columns:160px 1fr 1fr; gap:14px; align-items:center; padding:10px 0; border-bottom:1px dashed var(--line);}
.k-fstep:last-child{border-bottom:none;}
.k-fstep .sl{font-size:13.5px; color:var(--ink-2);}
.k-fstep .sl small{display:block; font-family:var(--f-mono); font-size:10px; color:var(--muted); letter-spacing:.08em;}
.k-fbar{display:flex; align-items:center; gap:10px;}
.k-fbar .b{height:22px; border-radius:5px; min-width:3px; transition:width .35s cubic-bezier(.4,0,.2,1);}
.k-fbar .b.now{background:var(--now);}
.k-fbar .b.ms{background:var(--accent);}
.k-fbar .t{font-family:var(--f-mono); font-size:13px; font-variant-numeric:tabular-nums; font-weight:500; white-space:nowrap;}
.k-fstep.tot{border-top:1px solid var(--line-2); border-bottom:none; margin-top:8px; padding-top:16px;}
.k-fstep.tot .sl{font-weight:600; color:var(--ink); font-size:15px;}
.k-fstep.tot .t{font-size:16px; font-weight:600;}
.k-delta{
  margin-top:22px; background:var(--accent-soft); border:1px solid rgba(27,107,158,.3);
  border-radius:var(--r); padding:20px 24px; display:flex; flex-wrap:wrap; gap:26px; align-items:center;
}
.k-delta .d-big{
  font-family:var(--f-head); font-weight:800; font-size:35px; color:var(--accent-ink);
  font-variant-numeric:tabular-nums; letter-spacing:-.04em;
}
.k-delta .d-lab{font-size:13.5px; color:var(--ink-2); max-width:42ch;}
.k-delta .dsub{font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:2px;}

/* proof */
.k-proof-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-bottom:26px;
}
.k-ps{background:var(--surface); padding:22px; text-align:center;}
.k-ps .v{font-family:var(--f-head); font-weight:800; font-size:34px; letter-spacing:-.045em; line-height:1;}
.k-ps .k{font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:8px;}
.k-hero-case{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:32px;
  display:grid; grid-template-columns:1fr 340px; gap:36px; align-items:center;
  box-shadow:var(--lift); margin-bottom:20px;
}
.k-badge{
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  font-family:var(--f-head); font-weight:800; font-size:17px; letter-spacing:-.02em;
  background:var(--accent); color:#fff; flex:none;
}
.k-badge.sm{width:44px; height:44px; font-size:15px; border-radius:12px; background:var(--sunk); color:var(--ink);}
.k-case-head{display:flex; align-items:center; gap:14px; margin-bottom:18px;}
.k-case-head .n{font-family:var(--f-head); font-weight:700; font-size:20px;}
.k-case-head .m{font-size:12.5px; color:var(--muted); font-family:var(--f-mono);}
.k-quote{font-family:var(--f-head); font-weight:500; font-size:clamp(19px,2.3vw,25px); line-height:1.35; letter-spacing:-.02em; color:var(--ink);}
.k-attrib{margin-top:14px; font-size:13px; color:var(--muted);}
.k-rankgrid{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;}
.k-rank{background:var(--surface-2); padding:12px 16px; display:flex; justify-content:space-between; align-items:center; gap:14px;}
.k-rank .rl{font-size:13px; color:var(--ink-2);}
.k-rank .rv2{font-family:var(--f-mono); font-size:13px; font-weight:600; color:var(--accent); white-space:nowrap;}
/* ── testimonial cards ──
   One wide card per practice: the photograph bleeds down the left with the
   name laid over it, and the argument stacks on the right. Deliberately the
   tallest thing in the report — these are the pages a sceptical owner
   actually reads. */
.k-tcards{display:grid; gap:24px;}
.k-tcard{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  background:var(--surface); border:1px solid var(--line);
  border-radius:16px; overflow:hidden; box-shadow:var(--shadow);
}
.k-tcard.noshot{grid-template-columns:1fr;}

.k-tshot{position:relative; overflow:hidden; min-height:500px; background:var(--sunk);}
.k-tshot img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 18%; display:block;
}
/* the name sits on the picture, so the picture needs to darken under it */
.k-tshot::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:46%;
  background:linear-gradient(180deg, transparent, rgba(8,14,24,.78));
  pointer-events:none;
}
.k-tpill{
  position:absolute; top:18px; left:18px; z-index:2;
  background:var(--accent); color:#fff; border-radius:99px; padding:7px 15px;
  font-family:var(--f-mono); font-size:10.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
}
.k-tover{position:absolute; left:24px; right:24px; bottom:22px; z-index:2; color:#fff;}
.k-tover .nm{font-family:var(--f-head); font-weight:700; font-size:19px; letter-spacing:-.02em;}
.k-tover .rl{font-size:12.5px; color:rgba(255,255,255,.8); margin-top:3px; line-height:1.4;}

.k-tbody{padding:38px 40px; display:flex; flex-direction:column; justify-content:center; gap:22px;}
.k-thead{display:flex; align-items:center; gap:14px;}
.k-thead .n{font-family:var(--f-head); font-weight:700; font-size:21px; letter-spacing:-.02em;}
.k-thead .m{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); margin-top:3px;
}
.k-tstats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px;}
.k-tstat{
  background:var(--accent-soft); border:1px solid rgba(27,107,158,.14);
  border-radius:10px; padding:16px 14px; text-align:center;
}
.k-tstat .v{
  font-family:var(--f-head); font-weight:800; font-size:26px; letter-spacing:-.03em;
  color:var(--accent-ink); line-height:1.05;
}
.k-tstat .k{
  font-size:11px; color:var(--ink-2); margin-top:5px; line-height:1.35;
  text-transform:uppercase; letter-spacing:.06em; font-family:var(--f-mono);
}
.k-tnote{font-size:13px; color:var(--muted); margin-top:-10px;}
/* the rule down the left is what makes it read as testimony rather than body copy */
.k-tquote{
  margin:0; padding-left:20px; border-left:3px solid var(--accent);
  font-family:var(--f-head); font-style:italic; font-weight:500;
  font-size:17px; line-height:1.6; color:var(--ink);
}
.k-tatt{font-size:12.5px; color:var(--muted); margin-top:-12px; padding-left:23px;}
.k-tranklab{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin-bottom:-12px;
}
.k-tranks{display:grid; gap:9px;}
.k-trank{
  background:var(--surface-2); border:1px solid var(--line); border-radius:9px;
  padding:12px 16px; display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.k-trank .rl{font-size:13.5px; color:var(--ink); font-weight:500;}
.k-trank .rv2{
  font-family:var(--f-mono); font-size:12.5px; font-weight:600;
  color:var(--accent); text-align:right;
}
.k-trank.hot{background:var(--good-soft); border-color:rgba(46,122,87,.22);}
.k-trank.hot .rv2{color:var(--good);}

.k-cases{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
.k-case{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:24px; display:grid; gap:14px; align-content:start;}
.k-case .topline{display:flex; align-items:center; gap:13px;}
.k-case .n{font-family:var(--f-head); font-weight:700; font-size:17px;}
.k-case .m{font-size:12px; color:var(--muted); font-family:var(--f-mono);}
.k-headline{display:flex; align-items:baseline; gap:11px; padding:12px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); flex-wrap:wrap;}
.k-headline .hv{font-family:var(--f-head); font-weight:800; font-size:26px; letter-spacing:-.04em; color:var(--accent);}
.k-headline .hk{font-size:13px; color:var(--ink-2);}
.k-case q{font-size:14px; color:var(--ink-2); line-height:1.5; font-style:normal; quotes:"\201C" "\201D";}
.k-case .att{font-size:12px; color:var(--muted);}
/* ── the team ──
   Two faces lead at full width, the rest run four across. Portraits are
   landscape crops on a pale ground, so the grid reads as one set of
   photographs rather than a directory of avatars. */
/* flex rather than grid so a trailing part-row centres. With fourteen or
   sixteen people the last row holds two, and left-aligned they read as a
   mistake rather than the end of a set. */
.k-faces{display:flex; flex-wrap:wrap; gap:16px; margin-bottom:16px; justify-content:center;}
.k-face{margin:0; display:grid; gap:10px; flex:0 0 calc((100% - 48px) / 4); min-width:0;}
/* the leads run wider than the four-across, but not half the page — a
   portrait tile at half width is a poster, not a headshot */
.k-faces.lead .k-face{flex:0 0 30%;}
.k-face .shot{
  /* Headshots are portrait. A landscape tile crops one to a band across the
     forehead — the first version used 16/9 and cut every chin off. */
  position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:10px;
  background:var(--sunk); border:1px solid var(--line); box-shadow:var(--shadow);
  display:grid; place-items:center;
}
.k-face .shot img{width:100%; height:100%; object-fit:cover; object-position:center 28%; display:block;}
.k-face .shot .ini{
  font-family:var(--f-head); font-weight:800; font-size:26px; letter-spacing:-.02em; color:var(--muted);
}
.k-face figcaption{display:grid; gap:2px; padding:0 2px;}
.k-face .nm{font-family:var(--f-head); font-weight:700; font-size:14.5px; letter-spacing:-.01em; color:var(--ink);}
.k-face.big .nm{font-size:18px;}
.k-face .rl{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); line-height:1.4;
}
/* ── presented by ──
   The closing panel, and the one place in the document that asks the reader to
   act. It takes the cover's dark ground deliberately: the deck opens and closes
   on the same surface, and everything measured sits on white in between. */
.k-presenter{
  --cov-ground:#00A6E6;
  --cov-ground-2:#31BDF0;
  /* the closing panel runs white on the blue: the moustache rule, the eyebrow,
     the role line and the paragraph all take it, so the block reads as one
     piece of type rather than two colours */
  --cov-accent:#FFFFFF;
  --cov-accent-soft:#FFFFFF;
  --cov-solid:#04222E;
  --cov-body:rgba(255,255,255,.94);
  position:relative; overflow:hidden; color:#FFFFFF;
  background:linear-gradient(105deg, #0089C4 0%, var(--cov-ground) 38%, var(--cov-ground-2) 100%);
  border-top:1px solid rgba(4,34,46,.14);
}
.k-presenter::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(90% 120% at 12% 10%, rgba(255,255,255,.24) 0%, transparent 60%);
}
/* the studio-only preview: the real panel, dimmed just enough to read as a
   placeholder, with a line above it saying so */
.k-presenter.k-pdemo .k-pwrap{opacity:.62;}
.k-pflag{
  position:relative; z-index:2;
  padding:12px 7vw; font-family:var(--f-mono); font-size:11px; line-height:1.6;
  letter-spacing:.04em; color:#FFFFFF;
  background:rgba(4,34,46,.34); border-bottom:1px solid rgba(255,255,255,.22);
}
.k-pwrap{
  position:relative; z-index:1;
  max-width:1180px; margin:0 auto; padding:64px 7vw;
  display:grid; grid-template-columns:260px minmax(0,1fr); gap:48px; align-items:center;
}
.k-pshot{
  aspect-ratio:4/5; border-radius:14px; overflow:hidden;
  background:rgba(255,255,255,.20); border:1px solid rgba(255,255,255,.42);
  box-shadow:0 24px 60px rgba(4,34,46,.30);
  display:grid; place-items:center;
}
.k-pshot img{width:100%; height:100%; object-fit:cover; object-position:center 28%; display:block;}
.k-pshot .ini{
  font-family:var(--f-head); font-weight:800; font-size:44px; letter-spacing:-.02em;
  color:rgba(255,255,255,.62);
}
/* scoped: .scan-root h2 and .scan-root a are more specific than a bare class,
   and will otherwise win on the font and the link colour */
.scan-root .k-pname{
  font-family:var(--f-head); font-weight:900;
  font-size:clamp(34px,4.4vw,58px); line-height:1.03; letter-spacing:-.024em;
  color:#FFFFFF; margin:0;
}
.k-prole{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--cov-accent-soft); margin-top:12px;
}
.scan-root .k-pline{
  font-size:16px; line-height:1.68; color:var(--cov-body);
  margin:20px 0 0; max-width:56ch;
}
.k-pacts{display:flex; gap:12px; flex-wrap:wrap; margin-top:28px;}
.scan-root .k-pbtn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 26px; border-radius:999px;
  font-family:var(--f-head);
  font-weight:700; font-size:15px; letter-spacing:-.01em;
  text-decoration:none; white-space:nowrap;
  border:1px solid #FFFFFF; background:#FFFFFF; color:#04222E;
  box-shadow:0 10px 26px rgba(4,34,46,.22);
  transition:background .16s ease, border-color .16s ease, transform .16s ease;
}
.scan-root .k-pbtn:hover{background:#EAF7FE; border-color:#EAF7FE;}
.scan-root .k-pbtn.on{
  background:var(--cov-solid); border-color:var(--cov-solid); color:#fff;
  box-shadow:0 12px 30px rgba(4,34,46,.30);
}
.scan-root .k-pbtn.on:hover{background:#06384B; border-color:#06384B;}
.scan-root .k-pbtn:active{transform:translateY(1px);}
/* the address and the number in full, for anyone reading this on paper where
   a button is only a shape */
.k-pmeta{
  display:flex; gap:22px; flex-wrap:wrap; margin-top:18px;
  font-family:var(--f-mono); font-size:12px; letter-spacing:.02em;
  color:rgba(255,255,255,.82);
}
@media (max-width:820px){
  .k-pwrap{grid-template-columns:1fr; gap:28px; padding:48px 7vw; text-align:left;}
  .k-pshot{max-width:220px; aspect-ratio:1/1;}
  .scan-root .k-pbtn{flex:1 1 auto;}
}
@media print{
  .k-presenter{-webkit-print-color-adjust:exact; print-color-adjust:exact; break-inside:avoid;}
  .scan-root .k-pbtn{box-shadow:none;}
}

.k-teamempty{
  background:var(--surface-2); border:1px dashed var(--line-2); border-radius:var(--r);
  padding:22px 24px; color:var(--ink-2); font-size:14px; line-height:1.6; max-width:76ch;
}
.k-teamempty strong{color:var(--ink);}

/* ── practice profile ──
   Three rows of four, every row the same shape: what they type and what that
   makes. The uniform grid is the point — the eye reads across a row and the
   arithmetic is visible without anyone explaining it. */
.k-pfrow{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px; margin-bottom:16px; align-items:stretch;
}
.k-pfrow .k-sfield{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:16px 18px; align-content:start; box-shadow:var(--shadow);
}
.k-pftile{
  background:var(--surface-2); border:1px solid var(--line-2); border-radius:12px;
  padding:16px 18px; display:grid; align-content:start; gap:6px; box-shadow:var(--shadow);
}
.k-pftile .lab{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
.k-pftile .big{
  font-family:var(--f-head); font-size:30px; font-weight:800;
  letter-spacing:-.04em; line-height:1.05; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.k-pftile .sub{font-size:11.5px; color:var(--muted); line-height:1.45;}
/* the two figures the whole conversation turns on */
.k-pftile.gold{
  background:linear-gradient(180deg,#EAF6FD 0%, #DCEEF9 100%);
  border-color:#9AD3EE;
}
.k-pftile.gold .lab{color:#0E6A93;}
.k-pftile.gold .big{color:#04222E; font-size:34px;}
.k-pflab{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin:26px 0 14px;
  display:flex; align-items:center; gap:11px;
}
.k-pflab::after{content:""; flex:1; height:1px; background:var(--line);}
@media (max-width:1000px){ .k-pfrow{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:620px){ .k-pfrow{grid-template-columns:1fr;} }

/* ── organic search ──
   Five inputs the presenter fills in on the call, then two rows of tiles
   showing the same traffic through the industry's funnel and through ours.
   Dashes until the practice's own numbers are in. */
.k-schip{
  display:inline-block; margin-bottom:26px;
  background:var(--good-soft); color:var(--good); border-radius:99px; padding:7px 15px;
  font-family:var(--f-mono); font-size:11px; font-weight:600; letter-spacing:.08em;
}
.k-sinputs{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:22px; box-shadow:var(--shadow);
}
.k-sfield{display:grid; gap:6px;}
.k-sfield .lb{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted);
}
.k-sfield .in{display:flex; align-items:center; gap:6px; border-bottom:2px solid var(--line-2); padding-bottom:4px;}
.k-sfield .in .pre,.k-sfield .in .suf{font-style:normal; color:var(--muted); font-size:13px; flex:none;}
.k-sinput{
  border:none; background:none; width:100%; min-width:0; padding:0;
  font-family:var(--f-head); font-weight:800; font-size:26px; letter-spacing:-.03em;
  color:var(--ink); font-variant-numeric:tabular-nums;
}
.k-sinput:focus{outline:none;}
.k-sfield:focus-within .in{border-bottom-color:var(--accent);}
/* on the client's link these are figures, not fields */
.k-sfield.locked .in{border-bottom-color:var(--line);}
.k-sfield.locked .k-sinput{cursor:default;}
.k-sinput::placeholder{color:var(--line-2); font-weight:700;}
.k-sinput[readonly]{color:var(--ink);}
.k-sfield .hn{font-size:11.5px; color:var(--muted);}

.k-slab{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin:32px 0 14px;
}
.k-sbars{display:grid; gap:10px;}
.k-sbar{display:grid; grid-template-columns:minmax(150px,230px) 1fr; gap:16px; align-items:center;}
.k-sbar .lb{font-size:13px; color:var(--ink-2);}
.k-sbar .tr{background:var(--sunk); border-radius:7px; height:32px; overflow:hidden;}
.k-sbar .fl{
  height:100%; background:var(--line-2); border-radius:7px;
  display:flex; align-items:center; padding:0 12px; min-width:44px;
}
.k-sbar .fl span{font-family:var(--f-mono); font-size:12px; font-weight:600; color:var(--ink);}
.k-sbar.ms .fl{background:linear-gradient(90deg, var(--accent), var(--accent-ink));}
.k-sbar.ms .fl span{color:#fff;}

.k-stiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px;}
.k-stile{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:18px 20px; display:grid; gap:5px; align-content:start;
}
.k-stiles.ms .k-stile{border-color:rgba(27,107,158,.28); background:var(--accent-soft);}
.k-stile .lab{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted);
}
.k-stile .big{
  font-family:var(--f-head); font-weight:800; font-size:30px; letter-spacing:-.04em;
  line-height:1.05; font-variant-numeric:tabular-nums; color:var(--ink);
}
.k-stiles.ms .k-stile .big{color:var(--accent-ink);}
.k-stile .sub{font-size:12px; color:var(--ink-2); line-height:1.4;}
.k-snet{
  margin-top:14px; font-size:14.5px; color:var(--ink-2);
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r);
  padding:14px 18px;
}
.k-snet b{font-family:var(--f-head); font-size:19px; letter-spacing:-.02em; color:var(--ink);}
.k-snet span{color:var(--muted); font-size:12.5px;}
.k-snet span b{font-size:13px; font-family:var(--f-mono); font-weight:600; color:var(--ink-2);}

.k-snotes{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:30px;}
.k-snote{background:var(--accent-soft); border-radius:var(--r); padding:24px;}
.k-snote.warm{background:var(--now-soft);}
.k-snote h4{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent-ink); margin-bottom:12px; font-weight:600;
}
.k-snote.warm h4{color:var(--now);}
.k-snote p{font-size:14px; color:var(--ink-2); line-height:1.65;}
.k-snote p + p{margin-top:11px;}
.k-snote strong{color:var(--ink);}

/* ── the four programs ──
   Each one is a full-width panel rather than a column in a pricing grid:
   they carry a monthly list, a rate table and terms, and squeezing that
   into thirds is what made the old version unreadable. They are also not
   tiers of one another, and a row of three cards implies that they are. */
/* ── the four programmes ──
   A price list, not a spec sheet. The rail on the left holds the name and the
   figure and nothing else, pinned to the top so a short card and a long one
   start on the same line; the right side carries everything that justifies it.
   The brand blue appears only as a rule and a marker — at 2.9:1 on white it
   cannot carry text, so no price is ever set in it. */
.k-progs{display:grid; gap:26px;}
.k-prog{
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  display:grid; grid-template-columns:330px 1fr; overflow:hidden; position:relative;
  box-shadow:var(--shadow);
}
.k-prog::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px; z-index:2;
  background:linear-gradient(90deg,#00A6E6 0%, #1B6B9E 100%);
}
.k-prog.rec{border-color:#00A6E6; box-shadow:var(--lift);}
.k-prog .tag{
  position:absolute; top:3px; right:0; z-index:2;
  background:#04222E; color:#fff; padding:7px 15px; border-radius:0 0 0 12px;
  font-family:var(--f-mono); font-size:10px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
}
.k-prog-head{
  background:linear-gradient(180deg,var(--surface-2) 0%, #EDF2F7 100%);
  border-right:1px solid var(--line);
  padding:34px 28px; display:grid; align-content:start; gap:0;
}
.k-prog.rec .k-prog-head{background:linear-gradient(180deg,#EAF6FD 0%, #DCEEF9 100%);}
.k-prog-head h4{
  font-family:var(--f-head); font-size:19px; font-weight:700; letter-spacing:-.02em;
  line-height:1.2; color:var(--ink);
}
/* the figure gets a rule over it, so the eye lands on the money */
.k-prog-head .price{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  margin-top:18px; padding-top:16px; border-top:1px solid var(--line-2);
}
.k-prog-head .price b{
  font-family:var(--f-head); font-size:38px; font-weight:800;
  letter-spacing:-.045em; line-height:1; color:var(--ink);
}
.k-prog-head .price span{
  color:var(--ink-2); font-size:13px; font-weight:500;
  font-family:var(--f-body); letter-spacing:0;
}
.k-prog-head .pnote{
  font-size:12.5px; color:var(--muted); line-height:1.5; margin-top:12px;
}
.k-prog-body{padding:32px 34px; display:grid; gap:16px; align-content:start; min-width:0;}
.k-prog-body .lede{
  font-family:var(--f-head); font-weight:700; font-size:17px; color:var(--ink);
  line-height:1.4; letter-spacing:-.015em;
}
.k-prog-body .blurb{font-size:15px; color:var(--ink-2); line-height:1.62; max-width:72ch;}
.k-prog-body .lab{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin-top:8px;
  display:flex; align-items:center; gap:11px;
}
.k-prog-body .lab::after{content:""; flex:1; height:1px; background:var(--line);}
/* ten bullets down one column makes a card three screens tall; two columns
   keeps the whole programme in one view */
.k-prog-body ul{
  margin:0; padding:0; list-style:none; font-size:13.5px; color:var(--ink-2);
  columns:2; column-gap:34px;
}
.k-prog-body li{
  display:flex; gap:9px; align-items:flex-start; line-height:1.5;
  break-inside:avoid; -webkit-column-break-inside:avoid; margin-bottom:9px;
}
.k-prog-body li::before{
  content:"✓"; color:#0E86BE; font-size:12px; line-height:1.5; flex:none; font-weight:700;
}
.k-prog-body .enote{
  font-size:14px; color:var(--ink); font-weight:600;
  background:var(--surface-2); border:1px solid var(--line);
  border-left:3px solid #00A6E6; border-radius:0 8px 8px 0; padding:12px 16px;
}
.k-prog-body .term{
  font-size:12px; color:var(--muted); border-top:1px solid var(--line);
  padding-top:14px; margin-top:6px; line-height:1.5;
}

/* a price table inside a programme card is a sub-element, not a document of
   its own: no shadow, no forced width, and the money column carries the weight */
.k-prog-body .k-tablewrap{box-shadow:none; border-radius:10px;}
.k-prog-body .k-table{min-width:0; font-size:13px;}
.k-prog-body .k-table th{padding:11px 14px;}
.k-prog-body .k-table td{padding:11px 14px;}
.k-prog-body .k-table tbody tr:nth-child(odd) td{background:var(--surface-2);}
.k-prog-body .k-table td.n:last-child{color:var(--ink); font-weight:700;}

/* what every client gets regardless — deliberately one band, not three more cards */
.k-incwrap{margin-top:34px; border-top:2px solid var(--line-2); padding-top:30px;}
.k-incsub{color:var(--muted); font-size:13.5px; margin-bottom:22px;}
.k-incs{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:start;}
.k-inc{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r); padding:22px;}
.k-inc h5{font-family:var(--f-head); font-size:16px; font-weight:700; letter-spacing:-.01em; margin:0;}
.k-inc .m{font-size:11.5px; color:var(--muted); font-family:var(--f-mono); margin-top:5px; line-height:1.45;}
.k-inc p{font-size:13.5px; color:var(--ink-2); line-height:1.55; margin-top:11px;}
.k-inc ul{margin:13px 0 0; padding:0; list-style:none; display:grid; gap:7px; font-size:12.5px; color:var(--ink-2);}
.k-inc li{display:grid; grid-template-columns:14px 1fr; gap:8px; align-items:start; line-height:1.45;}
.k-inc li::before{content:"✓"; color:var(--good); font-size:11px; line-height:1.45;}
.k-incnote{
  margin-top:20px; font-size:14px; color:var(--ink); line-height:1.6;
  max-width:80ch; font-weight:500;
}

.k-trustline{margin-top:22px; text-align:center; font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);}

/* investment */

/* scroll reveal, matched to the shop format */
.scan-root .reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;}
.scan-root .reveal.in{opacity:1; transform:none;}
@media(prefers-reduced-motion:reduce){
  .scan-root .reveal{opacity:1; transform:none; transition:none;}
  .scan-root *{animation:none !important;}
}

@media (max-width:1000px){
  .k-hero-in,.k-model,.k-hero-case,.k-cases{grid-template-columns:1fr;}
  .k-face{flex:0 0 calc((100% - 16px) / 2);}
  .k-faces.lead .k-face{flex:0 0 calc((100% - 16px) / 2);}
  .k-snotes{grid-template-columns:1fr;}
  .k-sbar{grid-template-columns:1fr; gap:6px;}
  .k-sbar .tr{height:28px;}
  .k-prog{grid-template-columns:1fr;}
  .k-prog-head{border-right:none; border-bottom:1px solid var(--line); padding:24px;}
  .k-prog-body{padding:24px;}
  .k-incs{grid-template-columns:1fr;}
  .k-tcard{grid-template-columns:1fr;}
  .k-tshot{min-height:0; height:340px;}
  .k-tbody{padding:28px 24px;}
  .k-tiles,.k-proof-stats{grid-template-columns:repeat(2,1fr);}
  .k-finding{grid-template-columns:auto 1fr;}
  .k-cost{grid-column:2; text-align:left; min-width:0;}
  .k-brow{grid-template-columns:1.2fr 1fr 56px 46px; gap:10px; padding:13px 14px; font-size:12.5px;}
  .k-fstep{grid-template-columns:104px 1fr 1fr;}
  .k-hero-case{padding:28px;}
  .k-sec{padding:44px 0;}
}
/* ── phones ──
   This document gets read on a phone more often than anyone plans for: the
   client link is texted, and the person who opens it is standing up. Below
   this width the layout stops being a shrunken desktop page and becomes a
   single column with the top bar on two rows.

   The tablet block above already stacks the big grids. What is left here is
   everything that only breaks once the column is under ~420px wide: two-column
   bullets that end up three words per line, tiles that reserve desktop height
   for one line of text, and a sticky bar that eats the heading you just
   jumped to. */
@media (max-width:760px){
  /* ten bullets in two columns is a good idea on a card 700px wide and a bad
     one on a phone, where each column holds about three words */
  .k-prog-body ul{columns:1; column-gap:0;}
  .k-prog-body li{margin-bottom:11px;}
}

@media (max-width:700px){
  /* the bar goes to two rows: the mark on top, the section list under it,
     scrolling sideways. In one row the nav was pushed off the right edge and
     the client could not move around the document at all. */
  .k-topbar-in{
    display:block; height:auto; padding-top:9px;
  }
  .k-brand{font-size:16px; display:flex; align-items:center; min-height:22px;}
  /* "GROWTH STRATEGY SESSION" beside a 16px mark is what crushed the nav */
  .k-brand em{display:none;}
  .k-topnav{
    margin:7px -16px 0; padding:0 16px 8px;
    gap:4px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  }
  .k-topnav a{font-size:12px; padding:6px 10px;}

  /* jumping to a section used to land with its eyebrow and half its heading
     underneath the sticky bar. 108px clears both rows of it. */
  .scan-root .k-sec,
  .scan-root .k-hero,
  .scan-root .k-presenter{scroll-margin-top:108px;}
}

@media (max-width:620px){
  .k-tiles,.k-proof-stats{grid-template-columns:1fr;}
  .k-wrap{padding:0 16px;}

  /* type: one step down across the board. The headline scale already clamps,
     so only the copy sizes need moving. */
  .scan-root{font-size:15px;}
  .k-sub{font-size:15px; margin-bottom:24px;}
  .k-h{font-size:clamp(23px,6.4vw,30px);}
  .k-h3{font-size:19px;}
  .k-sec{padding:36px 0;}
  .k-eyebrow{font-size:9.5px; letter-spacing:.16em; margin-bottom:12px;}

  /* a tile holding one line of text does not need desktop height */
  .k-tile{min-height:0; padding:16px 18px;}
  .k-tile .big{font-size:28px; min-height:0;}
  .k-pftile{padding:16px 18px;}
  .k-pftile .big,.k-pftile.gold .big{font-size:28px;}

  /* the cover: a long practice name at 46px overflowed a 358px column */
  .scan-root .k-hero-h1{font-size:clamp(34px,10vw,52px);}
  .scan-root .k-hero-h1.k-hero-name{font-size:clamp(36px,11vw,58px);}
  .k-hero-shot{height:34vh; min-height:220px;}
  .k-hero-body{padding:28px 20px 40px;}
  .k-hero.noshot .k-hero-body{padding:40px 20px;}
  .k-hpill{font-size:14px; padding:11px 17px;}

  /* the scoreboard: four columns at 12.5px on a phone is unreadable. The
     name and its bar stack, the two figures sit on one line beside them. */
  .k-brow{grid-template-columns:1fr auto; gap:4px 12px; padding:13px 14px;}
  .k-brow .nm{grid-column:1; font-size:14px;}
  .k-brow .rk{grid-column:2; grid-row:1;}
  .k-brow .k-rv{grid-column:1 / -1;}
  .k-brow .st{grid-column:1 / -1; font-size:12px;}
  .k-brow.head div:not(:first-child):not(:last-child){display:none;}

  /* the funnel: the label above its two bars rather than beside them */
  .k-fstep{grid-template-columns:1fr 1fr; gap:6px 12px; padding:12px 0;}
  .k-fstep .sl{grid-column:1 / -1;}

  /* the money card */
  .k-prog-head{padding:20px;}
  .k-prog-head h4{font-size:18px;}
  .k-prog-head .price b{font-size:32px;}
  .k-prog-body{padding:20px; gap:14px;}
  .k-prog-body .lede{font-size:16px;}

  /* wide tables scroll inside their own frame — say so, rather than leaving
     the client to discover a cut-off column by accident */
  .k-table{min-width:520px;}
  .k-tablewrap{position:relative;}
  .k-tablewrap::after{
    content:""; position:absolute; top:1px; right:1px; bottom:1px; width:26px;
    border-radius:0 var(--r) var(--r) 0; pointer-events:none;
    background:linear-gradient(to left, var(--surface), transparent);
  }

  /* the plan is three columns of prose, and the third one — what they should
     see — is the promise. Off the right edge it may as well not be there, so
     on a phone each phase becomes a card with its columns labelled. */
  .k-plantable{min-width:0; display:block;}
  .k-plantable thead{display:none;}
  .k-plantable tbody,.k-plantable tr{display:block;}
  .k-plantable tr{border-bottom:1px solid var(--line); padding:4px 0 14px;}
  .k-plantable tr:last-child{border-bottom:none;}
  .scan-root .k-plantable td{display:block; border:none; padding:8px 16px 0;}
  .scan-root .k-plantable td::before{
    content:attr(data-l); display:block; margin-bottom:4px;
    font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--muted);
  }
  /* the window is the card's heading, so it carries no label of its own */
  .scan-root .k-plantable td:first-child{padding-top:16px;}
  .scan-root .k-plantable td:first-child::before{display:none;}
  .scan-root .k-plantable td:first-child strong{
    font-family:var(--f-head); font-size:17px; font-weight:700; color:var(--ink);
  }
  /* nothing scrolls sideways any more, so drop the edge cue on this one */
  .k-tablewrap:has(.k-plantable)::after{display:none;}

  .k-presenter .k-pwrap{padding:36px 20px;}
  .k-pacts{gap:10px;}
  .scan-root .k-pbtn{width:100%; padding:0 18px;}
}

/* iOS zooms the whole page in when a focused field is under 16px, and then
   leaves it zoomed. Every field the presenter or the client can land in has
   to clear that bar — this is the difference between typing a number on a
   call and fighting the viewport. */
@media (max-width:900px){
  .k-inp input,.k-sinput,.scan-root input,.scan-root textarea,.scan-root select{font-size:16px;}
  .k-sinput{font-size:24px;}
}

/* print: a paged document */
@media print{
  .scan-root .k-topbar{display:none;}
  .scan-root{background:#fff;}
  .k-sec{padding:30px 0; break-inside:avoid-page;}
  /* the cover is the one dark page; without this it prints as white-on-white
     whenever the browser's "background graphics" box is unticked */
  .k-hero,.k-hero::before,.k-hero-shot::after,.k-hpill,.k-hpill.on{
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  .k-hero{break-after:page; min-height:0;}
  .k-hero-body{padding:52px 40px;}
  .scan-root .k-hero-h1{font-size:52px;}
  .scan-root .k-hero-sub{font-size:15px; margin-bottom:26px;}
  .k-finding,.k-tile,.k-prog,.k-inc,.k-case,.k-brow,.k-table tr{break-inside:avoid;}
  .k-stile,.k-snote,.k-sbar,.k-face{break-inside:avoid;}
  .k-face .shot{-webkit-print-color-adjust:exact; print-color-adjust:exact;}
  .k-sbar .fl,.k-stiles.ms .k-stile,.k-snote,.k-schip{
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  .k-tcard{break-inside:avoid; box-shadow:none;}
  .k-tshot,.k-tshot::after,.k-tpill,.k-tstat,.k-trank,.k-trank.hot{
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  .k-tshot{min-height:360px;}
  .k-tablewrap{overflow:visible;}
  .k-table{min-width:0;}
  .scan-root .reveal{opacity:1 !important; transform:none !important;}
}