/* ============================================================
   GTM DFW — gtmdfw.com

   The site sells a ledger: every company in a market, one row each, with
   the cut ones struck through and a reason written next to them. The
   design borrows from that document rather than from a software landing
   page. Ruled grids instead of floating cards, hairlines instead of
   shadows, squared corners, a faint sheet of graph paper behind the hero,
   and a monospace index on every section. Orange is reserved for things
   you can click and for the one italic word in each page's headline. The
   green is a structural mark — numerals, ticks, "checked" — never a link.
   ============================================================ */

:root{
  --ink:#1B1613;
  --ink-2:#4A423B;
  --ink-3:#7B7066;
  --paper:#F7F3EC;
  --paper-2:#EFE9DF;
  --paper-3:#E4DCCF;
  --surface:#FDFBF7;
  --line:#DCD3C5;
  --line-strong:#B8AC9B;
  --grid:rgba(27,22,19,.085);
  --accent:#C2410C;
  --accent-deep:#9A3309;
  --accent-soft:#F7E4D7;
  --accent-fg:#FFFFFF;
  --accent-2:#186B5C;
  --accent-2-soft:#DEECE6;
  --ok:#1E8F4E;
  --shadow-sm:0 1px 2px rgba(27,22,19,.06);
  --shadow-md:0 1px 2px rgba(27,22,19,.05), 0 14px 32px -16px rgba(27,22,19,.22);
  --radius:5px;
  --radius-lg:8px;
  --maxw:1140px;
  --gutter:clamp(20px,5vw,40px);
  /* dark bands: intentionally do NOT flip with the theme */
  --band:#151110;
  --band-2:#1E1917;
  --band-3:#282220;
  --band-line:#332C28;
  --band-line-strong:#4A413B;
  --band-grid:rgba(255,255,255,.055);
  --band-text:#F6F2EC;
  --band-text-2:#C5BCB2;
  --band-text-3:#8E847A;
  --band-accent:#F6935A;
  --band-accent-2:#5CCBBA;
  --band-btn-bg:#F6F2EC;
  --band-btn-fg:#151110;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* Dark theme. The accent is softened so it can sit next to the serif
   without vibrating, and the primary button flips to dark text so the label
   keeps its contrast. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#F2EDE6;
    --ink-2:#C3BAAF;
    --ink-3:#8F8479;
    --paper:#141110;
    --paper-2:#1B1816;
    --paper-3:#262120;
    --surface:#1B1816;
    --line:#2F2A27;
    --line-strong:#4A423C;
    --grid:rgba(255,255,255,.06);
    --accent:#F0834A;
    --accent-deep:#F9A876;
    --accent-soft:#2D1A10;
    --accent-fg:#1A120C;
    --accent-2:#4FC3B2;
    --accent-2-soft:#10312D;
    --ok:#3FBF77;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-md:0 1px 2px rgba(0,0,0,.4), 0 14px 32px -16px rgba(0,0,0,.6);
    --band:#0C0A09;
    --band-2:#141110;
    --band-3:#1D1917;
    --band-line:#2A2422;
    --band-line-strong:#3E3632;
    --band-btn-bg:#F2EDE6;
    --band-btn-fg:#141110;
  }
}
:root[data-theme="dark"]{
  --ink:#F2EDE6; --ink-2:#C3BAAF; --ink-3:#8F8479;
  --paper:#141110; --paper-2:#1B1816; --paper-3:#262120; --surface:#1B1816;
  --line:#2F2A27; --line-strong:#4A423C; --grid:rgba(255,255,255,.06);
  --accent:#F0834A; --accent-deep:#F9A876; --accent-soft:#2D1A10; --accent-fg:#1A120C;
  --accent-2:#4FC3B2; --accent-2-soft:#10312D; --ok:#3FBF77;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 1px 2px rgba(0,0,0,.4), 0 14px 32px -16px rgba(0,0,0,.6);
  --band:#0C0A09; --band-2:#141110; --band-3:#1D1917;
  --band-line:#2A2422; --band-line-strong:#3E3632;
  --band-btn-bg:#F2EDE6; --band-btn-fg:#141110;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  font-feature-settings:"kern","liga","cv05","cv11";
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.1;letter-spacing:-.02em;font-weight:600}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
main{counter-reset:sec}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.narrow{max-width:780px}

/* ---------- eyebrow / labels ----------
   A section index in the margin, the way a numbered document is set. Every
   .sec increments the counter; the eyebrow prints it. The two places that
   are not sections — the home hero and the closing band — get a short rule
   instead, so the label still has an anchor. */
.eyebrow{
  font-family:var(--mono);font-size:11.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  margin:0 0 20px;display:flex;align-items:baseline;gap:12px;
}
.eyebrow::before{content:"";width:20px;height:1px;background:var(--accent);flex:none;align-self:center}
.sec{counter-increment:sec}
.sec .eyebrow::before{
  content:counter(sec,decimal-leading-zero);width:auto;height:auto;background:none;
  color:var(--accent);font-weight:700;
}
.eyebrow.center{justify-content:center}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-size:14.5px;font-weight:600;letter-spacing:-.005em;
  padding:13px 20px;border-radius:var(--radius);border:1px solid transparent;
  text-decoration:none;cursor:pointer;white-space:nowrap;line-height:1.2;
  transition:background .15s,border-color .15s,color .15s,transform .15s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:var(--accent-fg)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--ink);background:var(--surface)}
.btn-onink{background:var(--band-btn-bg);color:var(--band-btn-fg);border-color:var(--band-btn-bg)}
.btn-onink:hover{background:#fff;border-color:#fff}
.btn-onink-ghost{background:transparent;color:var(--band-text);border-color:var(--band-line-strong)}
.btn-onink-ghost:hover{border-color:var(--band-text);background:rgba(255,255,255,.04)}
.btn svg{flex:none}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:var(--paper);border-bottom:1px solid var(--line);
  transition:box-shadow .2s;
}
.site-header.scrolled{box-shadow:0 1px 0 var(--line), 0 10px 24px -20px rgba(27,22,19,.35)}
.nav{display:flex;align-items:center;gap:14px;height:64px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto;flex:none}
.brand-mark{
  width:30px;height:30px;border-radius:var(--radius);flex:none;
  background:var(--accent);color:var(--accent-fg);
  display:grid;place-items:center;
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:-.02em;
}
.brand-text{display:flex;flex-direction:column;line-height:1.05;gap:2px}
.brand-name{font-family:var(--serif);font-size:20px;font-weight:400;letter-spacing:-.01em;color:var(--ink)}
.brand-sub{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-links a{
  text-decoration:none;color:var(--ink-2);font-size:14.5px;font-weight:500;
  padding:8px 12px;border-radius:var(--radius);transition:color .15s,background .15s;
}
.nav-links a:hover{color:var(--ink);background:var(--paper-2)}
.nav-links a[aria-current="page"]{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:6px;text-decoration-thickness:1.5px}
/* .nav-links a outranks .btn-primary, so the call-to-action needs its own
   colour rule or it renders as dark text on orange. */
.nav-links a.nav-cta{margin-left:10px;padding:10px 16px;font-size:14px;color:var(--accent-fg);background:var(--accent);border-color:var(--accent);font-weight:600}
.nav-links a.nav-cta:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:var(--accent-fg)}
.nav-toggle{
  display:none;background:none;border:1px solid var(--line-strong);border-radius:var(--radius);
  width:38px;height:38px;place-items:center;cursor:pointer;color:var(--ink);
}
@media (max-width:900px){
  .nav-links{
    position:fixed;inset:64px 0 auto;flex-direction:column;align-items:stretch;
    background:var(--paper);border-bottom:1px solid var(--line-strong);
    padding:10px var(--gutter) 20px;gap:2px;box-shadow:var(--shadow-md);
    transform:translateY(-6px);opacity:0;pointer-events:none;transition:.18s;
  }
  .nav-links.open{transform:none;opacity:1;pointer-events:auto}
  .nav-links a{padding:13px 12px;font-size:16px;border-radius:0;border-bottom:1px solid var(--line)}
  .nav-links a[aria-current="page"]{text-decoration:none;color:var(--accent)}
  .nav-links a.nav-cta{margin:14px 0 0;justify-content:center;border-bottom:0}
  .nav-toggle{display:grid}
}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(56px,9vw,104px) 0 clamp(56px,8vw,96px);overflow:hidden}
/* A sheet of graph paper behind the headline — the one decorative gesture on
   the page, and it is the thing the business actually produces. It fades out
   before the edges so it reads as a surface, not a pattern. */
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:44px 44px;background-position:center top;
  -webkit-mask-image:radial-gradient(75% 85% at 50% 30%,#000 25%,transparent 100%);
  mask-image:radial-gradient(75% 85% at 50% 30%,#000 25%,transparent 100%);
}
.hero .wrap{position:relative;z-index:1}
/* The home hero does not use .hero-grid at all any more: the copy is the
   whole width, and the sample sheet comes below it on scroll. Side by side,
   the sheet competed with the headline for the first screen and the headline
   lost. .hero-grid survives for the service pages, but it now stacks at
   1080px instead of 940px — a tablet in landscape is 1024px, which was
   landing right in the cramped two-column case. */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(36px,6vw,80px);align-items:center}
@media (max-width:1080px){.hero-grid{grid-template-columns:1fr;gap:44px}}
.hero-copy{max-width:53rem}
.hero-copy .lede{max-width:56ch}
/* what "go-to-market" means, for the owners who do not already know */
.hero-def{
  margin:clamp(34px,5vw,50px) 0 0;max-width:74ch;padding-top:20px;
  border-top:1px solid var(--line-strong);
  font-size:16.5px;line-height:1.6;color:var(--ink-2);
}
.hero-def b{color:var(--ink);font-weight:600}
.hero .hero-card{margin-top:clamp(32px,4.5vw,52px)}
.hero .hero-card .btn{width:auto}
@media (min-width:760px){.hero .hero-card{padding:30px 32px}}
h1,.h1{
  font-family:var(--serif);font-weight:400;letter-spacing:-.025em;line-height:.98;
  font-size:clamp(44px,6.6vw,78px);margin:0 0 24px;text-wrap:balance;
}
h1 em,.h1 em{font-style:italic;color:var(--accent)}
.lede{font-size:clamp(17.5px,2vw,20px);line-height:1.55;color:var(--ink-2);max-width:54ch;margin:0 0 30px}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.hero-note{
  display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--ink-3);font-weight:500;
}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 18%,transparent)}
/* "Taking on new clients this quarter" is the one line on the page worth
   catching an eye that is only going to give the site a few seconds. It
   breathes rather than blinks: a slow green glow, and nothing at all for
   anyone who has asked for reduced motion. */
.hero-note.live{
  display:inline-flex;width:auto;padding:9px 17px 9px 14px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--ok) 32%,transparent);
  background:color-mix(in srgb,var(--ok) 8%,transparent);
  color:var(--ink-2);animation:live-glow 3.4s ease-in-out infinite;
}
.hero-note.live .dot{animation:live-dot 3.4s ease-in-out infinite}
@keyframes live-glow{
  0%,100%{box-shadow:0 0 0 0 transparent}
  50%{box-shadow:0 0 24px 1px color-mix(in srgb,var(--ok) 28%,transparent)}
}
@keyframes live-dot{
  0%,100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 16%,transparent)}
  50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--ok) 24%,transparent)}
}
@media (prefers-reduced-motion:reduce){
  .hero-note.live,.hero-note.live .dot{animation:none}
}

/* hero card — the document itself */
.hero-card{
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-lg);
  padding:24px;position:relative;box-shadow:var(--shadow-md);
}
.hc-tag{
  display:inline-flex;align-items:center;gap:8px;color:var(--ink-3);
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:14px;
}
.hc-tag::before{content:"";width:7px;height:7px;background:var(--accent);flex:none}
.hc-title{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.05;letter-spacing:-.015em;margin:0 0 8px}
.hc-sub{font-size:14px;color:var(--ink-3);margin:0 0 18px;line-height:1.5}
.hc-price{display:flex;align-items:baseline;gap:10px;margin:0 0 18px}
.hc-price b{font-size:36px;font-weight:400;letter-spacing:-.03em;font-family:var(--serif)}
.hc-price span{font-family:var(--mono);font-size:12px;color:var(--ink-3);letter-spacing:.02em}
.hc-list{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:0}
.hc-list li{display:flex;gap:11px;font-size:14.5px;line-height:1.5;color:var(--ink-2);padding:9px 0;border-top:1px solid var(--line)}
.hc-list li:last-child{border-bottom:1px solid var(--line)}
.hc-list svg{flex:none;align-self:flex-start;margin-top:4px;color:var(--accent-2)}
.hc-list strong{color:var(--ink);font-weight:600}
.hero-card .btn{width:100%}

/* the sample sheet */
.sheet{
  border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden;
  background:var(--paper);margin-bottom:14px;
}
.sheet-bar{
  display:flex;align-items:center;gap:6px;padding:8px 12px;
  background:var(--paper-2);border-bottom:1px solid var(--line-strong);
}
.sheet-bar span{display:none}
.sheet-bar b{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.02em;color:var(--ink-2)}
.sheet-bar b::before{content:"";display:inline-block;width:9px;height:9px;margin-right:9px;vertical-align:-1px;border:1px solid var(--ink-3);border-top-width:3px;border-radius:1px}
.sheet-tbl{width:100%;border-collapse:collapse;font-size:12.5px;line-height:1.35;font-variant-numeric:tabular-nums}
.sheet-tbl th{
  text-align:left;font-family:var(--mono);font-size:9.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  padding:8px 10px;border-bottom:1px solid var(--line-strong);white-space:nowrap;background:var(--surface);
}
.sheet-tbl td{padding:8px 10px;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:middle;background:var(--surface)}
.sheet-tbl th+th,.sheet-tbl td+td{border-left:1px solid var(--line)}
.sheet-tbl tr:last-child td{border-bottom:0}
.sheet-tbl td:first-child{font-weight:600;color:var(--ink)}
.sheet-tbl .muted{color:var(--ink-3)}
.sheet-tbl .cut td{background:var(--paper)}
.sheet-tbl .cut td:first-child{text-decoration:line-through;text-decoration-color:var(--accent);color:var(--ink-3);font-weight:500}
.sheet .sig{font-family:var(--mono);font-size:10.5px;letter-spacing:.01em;white-space:nowrap}
.sheet .sig.up{color:var(--accent-2)}
.sheet .sig.no{color:var(--accent)}
.sheet .ok{display:inline-flex;color:var(--accent-2);vertical-align:-2px;margin-right:4px}
.sheet .ok svg{width:11px;height:11px}
.sheet-note{font-size:13px;line-height:1.55;color:var(--ink-3);margin:0 0 20px}
@media (max-width:420px){
  .sheet-tbl th:nth-child(2),.sheet-tbl td:nth-child(2){display:none}
}

/* ---------- sections ---------- */
section{position:relative}
.sec{padding:clamp(56px,7.2vw,96px) 0}
.sec-tight{padding:clamp(44px,6vw,72px) 0}
.sec-alt{background:var(--paper-2);border-block:1px solid var(--line)}
.sec-ink{background:var(--band);color:var(--band-text);border-block:1px solid var(--band-line)}
.sec-ink .eyebrow{color:var(--band-text-3)}
.sec-ink .eyebrow::before{color:var(--band-accent);background:var(--band-accent)}
.sec-ink h2,.sec-ink h3,.sec-ink h1,.sec-ink .h1,.sec-ink .h2{color:var(--band-text)}
.sec-ink p{color:var(--band-text-2)}
h2,.h2{
  font-family:var(--serif);font-weight:400;letter-spacing:-.02em;line-height:1.04;
  font-size:clamp(34px,4.6vw,54px);text-wrap:balance;
}
/* The italic in a section head stays in ink. Orange italics on every heading
   turned the one in the hero into wallpaper. */
h2 em,.h2 em{font-style:italic;color:inherit}
.sec-head{margin-bottom:clamp(32px,5vw,52px);max-width:760px}
.sec-head.center{margin-inline:auto;text-align:center;max-width:720px}
.sec-head p{margin-top:18px;font-size:17px;line-height:1.6;color:var(--ink-2)}
@media (min-width:980px){
  .sec-head:not(.center){
    display:grid;max-width:none;
    grid-template-columns:minmax(0,1.1fr) minmax(0,.75fr);
    column-gap:clamp(40px,6vw,88px);align-items:start;
  }
  .sec-head:not(.center) > .eyebrow{grid-column:1/-1;grid-row:1}
  .sec-head:not(.center) > h2,
  .sec-head:not(.center) > .h2{grid-column:1;grid-row:2}
  .sec-head:not(.center) > p:not(.eyebrow){
    grid-column:2;grid-row:2;margin-top:.55em;padding-top:14px;
    border-top:1px solid var(--line-strong);font-size:16.5px;
  }
  .sec-ink .sec-head:not(.center) > p:not(.eyebrow){border-top-color:var(--band-line-strong)}
  .narrow .sec-head:not(.center){display:block;max-width:100%}
  .narrow .sec-head:not(.center) > p:not(.eyebrow){margin-top:18px;padding-top:0;border-top:0}
}
.sec-ink .sec-head p{color:var(--band-text-2)}


/* ---------- section rail ----------
   Replaces the old keyword strip in the same slot. Where that listed five
   words nobody could act on, this is the table of contents for a page that is
   now one continuous scroll: it sticks under the header and every section of
   the page is one tap away from anywhere in it. It scrolls sideways on narrow
   screens rather than wrapping to two rows and eating the viewport. */
.rail{
  position:sticky;top:64px;z-index:50;
  background:var(--paper);border-block:1px solid var(--line-strong);
}
.rail-inner{display:flex;align-items:stretch;gap:0;min-height:46px;overflow-x:auto;scrollbar-width:none}
.rail-inner::-webkit-scrollbar{display:none}
.rail-inner a{
  flex:none;display:flex;align-items:center;white-space:nowrap;text-decoration:none;
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);padding:0 15px;border-bottom:2px solid transparent;
  transition:color .15s,border-color .15s;
}
.rail-inner a:first-child{padding-left:0}
.rail-inner a:hover,.rail-inner a:focus-visible{color:var(--ink);border-bottom-color:var(--accent)}

/* Anchored sections have to clear the sticky header (64px) and the rail
   (46px), or the nav's /#crm-rehab lands with the heading tucked behind them. */
[id]{scroll-margin-top:124px}

/* ---------- who this is for ----------
   The B2B/B2C answer, stated on the page instead of left in the FAQ. Two
   columns that are the same shape so the contrast reads at a glance. */
.fit-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  border-block:1px solid var(--line-strong);
}
@media (max-width:820px){.fit-grid{grid-template-columns:1fr}}
.fit{padding:30px 32px}
.fit:first-child{padding-left:0;border-right:1px solid var(--line)}
.fit:last-child{padding-right:0}
@media (max-width:820px){
  .fit{padding-inline:0}
  .fit:first-child{border-right:0;border-bottom:1px solid var(--line)}
}
.fit-label{
  display:flex;align-items:center;gap:9px;margin:0 0 16px;
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.fit-yes .fit-label{color:var(--accent-2)}
.fit-no .fit-label{color:var(--accent)}
.fit-no .fit-label::before{content:"";width:13px;height:2px;background:var(--accent);flex:none}
.fit ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.fit li{font-size:15.5px;line-height:1.55;color:var(--ink-2);padding-left:18px;position:relative;max-width:48ch}
.fit li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--line-strong)}
.fit-yes li::before{background:var(--accent-2)}
.fit-no li::before{background:var(--accent)}
.fit strong{color:var(--ink);font-weight:600}

/* ---------- numbered rows ----------
   The problems, the method and the discovery questions all used to run as a
   two-column zig-zag: 01 top-left, 02 top-right, 03 back to the left. Reading
   order fought the numbering, and on a tablet the method's heading sat in one
   column with its own sentence half a screen away in the next — "Ask" over
   here, "how you sell today" over there. These are one column at every width,
   with the number in a narrow rail and the heading directly above the
   paragraph it belongs to. */
.rows{
  list-style:none;margin:0;padding:0;display:grid;
  border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);
}
.row{
  display:grid;grid-template-columns:54px minmax(0,1fr);column-gap:clamp(14px,2.2vw,26px);
  padding:26px 0;border-bottom:1px solid var(--line);
}
.row:last-child{border-bottom:0}
.row-n{
  font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.1em;
  color:var(--accent-2);padding-top:.45em;
}
.row-body h3{font-family:var(--serif);font-weight:400;font-size:clamp(23px,2.9vw,30px);line-height:1.06;letter-spacing:-.018em;margin:0 0 9px}
.row-body p{font-size:16px;line-height:1.6;color:var(--ink-2);margin:0;max-width:66ch}
.row-body h3 em{font-style:italic;color:var(--accent)}
.rows-tight .row{padding:17px 0}
@media (max-width:520px){.row{grid-template-columns:38px minmax(0,1fr)}}
.sec-ink .rows{border-color:var(--band-line-strong)}
.sec-ink .row{border-bottom-color:var(--band-line)}
.sec-ink .row:last-child{border-bottom:0}
.sec-ink .row-n{color:var(--band-accent-2)}
.sec-ink .row-body p{color:var(--band-text-2)}

/* ---------- the question that matters most ----------
   Reviewed as the most insightful thing on the page and the easiest to scroll
   past, because it arrived as the eighth identical row. It is now its own
   block, in the accent, after the other seven. */
.keyq{
  margin-top:clamp(24px,3.6vw,36px);
  display:grid;grid-template-columns:54px minmax(0,1fr);column-gap:clamp(14px,2.2vw,26px);
  background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);
  border-radius:var(--radius-lg);padding:clamp(24px,3.4vw,36px);
}
@media (max-width:520px){.keyq{grid-template-columns:1fr}}
.keyq-n{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--accent);padding-top:.55em}
@media (max-width:520px){.keyq-n{padding:0 0 8px}}
.keyq-flag{margin:0 0 12px;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.keyq-q{
  font-family:var(--serif);font-weight:400;font-size:clamp(25px,3.6vw,38px);
  line-height:1.08;letter-spacing:-.022em;color:var(--ink);margin:0 0 16px;text-wrap:balance;
}
.keyq-q em{font-style:italic;color:var(--accent)}
.keyq-a{font-size:16px;line-height:1.62;color:var(--ink-2);margin:0;max-width:64ch}

/* ---------- ruled grids ----------
   Cells separated by hairlines, no card chrome. Used for the four problems,
   the discovery questions, the deliverables and the contact details. */
.prob-grid,.deliv{
  display:grid;grid-template-columns:1fr;
  border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);
}
.prob,.deliv-item{border-bottom:1px solid var(--line)}
.prob:last-child,.deliv-item:last-child{border-bottom:0}
@media (min-width:700px){
  .prob-grid,.deliv{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prob:nth-child(odd),.deliv-item:nth-child(odd){border-right:1px solid var(--line)}
  .prob:nth-last-child(-n+2),.deliv-item:nth-last-child(-n+2){border-bottom:0}
  /* three items, as on the contact page: one row, no orphan */
  .prob-grid.prob-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .prob-grid-3 .prob{border-bottom:0;border-right:1px solid var(--line)}
  .prob-grid-3 .prob:last-child{border-right:0}
}
@media (min-width:700px) and (max-width:900px){
  .prob-grid.prob-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prob-grid-3 .prob{border-right:0;border-bottom:1px solid var(--line)}
  .prob-grid-3 .prob:nth-child(odd){border-right:1px solid var(--line)}
  .prob-grid-3 .prob:last-child{border-bottom:0}
}
.prob{padding:30px 30px 32px}
.prob:nth-child(odd){padding-left:0}
@media (max-width:699px){.prob{padding-inline:0}}
.prob-n{
  font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.14em;
  color:var(--accent-2);margin-bottom:18px;
}
.prob h3{font-size:21px;margin-bottom:10px;letter-spacing:-.015em;font-weight:600}
.prob p{font-size:15.5px;line-height:1.6;color:var(--ink-2);margin:0;max-width:46ch}

/* ---------- service list ---------- */
.svc-grid{
  display:grid;grid-template-columns:1fr;
  border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);
}
@media (min-width:760px){.svc-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}}
.svc{
  padding:30px 30px 28px;display:flex;flex-direction:column;
  text-decoration:none;color:inherit;position:relative;
  border-bottom:1px solid var(--line);
  transition:background .18s;
}
.svc:last-child{border-bottom:0}
@media (min-width:760px){
  .svc{border-bottom:0;border-right:1px solid var(--line)}
  .svc:first-child{padding-left:0}
  .svc:last-child{border-right:0;padding-right:0}
}
@media (max-width:759px){.svc{padding-inline:0}}
.svc:hover{background:transparent}
.svc:hover h3{color:var(--accent)}
.svc-icon{display:none}
.svc-lane{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-2);margin:0 0 20px;
}
.svc h3{font-family:var(--serif);font-weight:400;font-size:30px;margin-bottom:12px;letter-spacing:-.015em;line-height:1.05;transition:color .15s}
.svc p{font-size:15.5px;line-height:1.6;color:var(--ink-2);margin-bottom:22px}
.svc-meta{
  margin-top:auto;padding-top:14px;border-top:1px solid var(--line);
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
}
.svc-price{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--ink);letter-spacing:-.01em;flex:1 1 auto;min-width:0}
.svc-more{flex:none;font-size:13.5px;font-weight:600;color:var(--accent);display:flex;align-items:center;gap:6px}
.svc-more svg{transition:transform .2s}
.svc:hover .svc-more svg{transform:translateX(3px)}


/* ---------- stats / proof ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.stat{padding:26px 24px;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.sec-ink .stat{border-color:var(--band-line)}
.stat-fig{font-family:var(--serif);font-size:clamp(38px,5vw,52px);line-height:1;font-weight:400;color:var(--accent-2);letter-spacing:-.03em;margin-bottom:12px}
.sec-ink .stat-fig{color:var(--band-accent-2)}
.stat p{font-size:14.5px;line-height:1.55;color:var(--ink-2);margin:0}
.sec-ink .stat p{color:var(--band-text-2)}
.stat-src{display:block;margin-top:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.sec-ink .stat-src{color:var(--band-text-3)}

/* ---------- offer explorer ----------
 *
 * Three engagements listed down the left, one detail panel on the right, and
 * clicking a name swaps the panel so two can be compared without leaving the
 * page. It is also where the nav now sends you: "CRM Rehab" in the header is
 * a link to #crm-rehab, not to a separate landing page.
 *
 * The whole thing runs on :target. Each tab is an ordinary anchor to its
 * panel's id, so it works with scripting off, deep links work, and the back
 * button steps through the panels you looked at. The script only suppresses
 * the scroll jump on click.
 *
 * Fallback: where :has() is missing, the two :has() rules below are dropped
 * and the default panel simply stays visible alongside whichever panel is
 * targeted. Denser than intended, never blank.
 */
.offers{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(20px,3vw,40px);align-items:start}
@media (max-width:900px){.offers{grid-template-columns:1fr}}

.offer-tabs{display:grid;border-top:1px solid var(--line-strong)}
.offer-tab{
  display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;row-gap:3px;
  text-decoration:none;padding:17px 16px;border-bottom:1px solid var(--line);
  border-left:2px solid transparent;transition:background .15s,border-color .15s;
}
.offer-tab:last-child{border-bottom:1px solid var(--line-strong)}
.offer-tab:hover{background:var(--paper-2)}
.ot-stage{grid-column:1;grid-row:1;align-self:center;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.ot-price{
  grid-column:2;grid-row:1;text-align:right;white-space:nowrap;
  font-family:var(--mono);font-size:13px;font-weight:600;color:var(--ink);
}
.ot-price small{font-size:9px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-left:7px}
/* the name gets the whole row, so "Pipeline Ops" is not wrapping around a price */
.ot-name{grid-column:1/-1;grid-row:2;font-family:var(--serif);font-size:23px;font-weight:400;letter-spacing:-.018em;color:var(--ink);line-height:1.12}

.offer-panel{
  display:none;background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--radius-lg);padding:clamp(24px,3.2vw,34px);box-shadow:var(--shadow-md);
}
.offer-panel-default{display:block}
.offer-panel:target{display:block}
.offers:has(.offer-panel:not(.offer-panel-default):target) .offer-panel-default{display:none}

/* Which tab reads as selected is derived from which panel :target matched, so
   the two can never disagree. One line per engagement — add one here if a
   fourth is ever listed. */
.offers:not(:has(.offer-panel:target)) .offer-tab[href="#market-map"],
.offers:has(#market-map:target) .offer-tab[href="#market-map"],
.offers:has(#crm-rehab:target) .offer-tab[href="#crm-rehab"],
.offers:has(#pipeline-ops:target) .offer-tab[href="#pipeline-ops"],
.offers:has(#bundle:target) .offer-tab[href="#bundle"]{
  background:var(--surface);border-left-color:var(--accent);
}

.offer-stage{margin:0 0 4px;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.offer-head{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:flex-start;justify-content:space-between;margin-bottom:18px}
.offer-head h3{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3.2vw,34px);line-height:1.05;letter-spacing:-.022em;margin:8px 0 0;max-width:20ch}
.offer-tag{text-align:right;white-space:nowrap;font-family:var(--mono)}
.offer-tag b{display:block;font-size:25px;font-weight:600;letter-spacing:-.025em;color:var(--ink)}
.offer-tag span{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:5px}
.offer-lede{font-size:16.5px;line-height:1.6;color:var(--ink-2);margin:0 0 20px;max-width:64ch}
.offer-list{list-style:none;margin:0 0 22px;padding:0;border-top:1px solid var(--line)}
.offer-list li{display:flex;gap:11px;font-size:15px;line-height:1.55;color:var(--ink-2);padding:11px 0;border-bottom:1px solid var(--line)}
.offer-list svg{flex:none;align-self:flex-start;margin-top:4px;color:var(--accent-2)}
.offer-list strong{color:var(--ink);font-weight:600}
.offer-note{
  font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:0 0 22px;
  background:var(--accent-soft);border-radius:var(--radius);padding:14px 16px;
}
.offer-note b{color:var(--ink);font-weight:600}
.offer-actions{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- pricing ----------
   Three prices side by side so they can be compared at a glance, then the
   bundle underneath with the saving spelled out. */
.plan-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid var(--line-strong);border-radius:var(--radius-lg);
  overflow:hidden;background:var(--surface);
}
@media (max-width:860px){.plan-grid{grid-template-columns:1fr}}
.plan{display:flex;flex-direction:column;padding:clamp(24px,3vw,32px);border-right:1px solid var(--line)}
.plan:last-child{border-right:0}
@media (max-width:860px){
  .plan{border-right:0;border-bottom:1px solid var(--line)}
  .plan:last-child{border-bottom:0}
}
.plan-lead{background:var(--band)}
.plan-flag{
  display:inline-block;align-self:flex-start;margin-bottom:14px;padding:5px 9px;border-radius:3px;
  font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  background:var(--band-accent);color:var(--band-btn-fg);
}
.plan-stage{margin:0 0 8px;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.plan h3{font-family:var(--serif);font-weight:400;font-size:30px;letter-spacing:-.022em;margin:0 0 14px}
.plan-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 9px;margin-bottom:14px}
.plan-price b{font-family:var(--serif);font-size:38px;font-weight:400;letter-spacing:-.03em;line-height:1}
.plan-price span{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.plan-card{font-size:15px;line-height:1.55;color:var(--ink-2);margin:0 0 22px;flex:1 1 auto}
.plan .btn{align-self:flex-start}
.plan-lead .plan-stage{color:var(--band-text-3)}
.plan-lead h3,.plan-lead .plan-price b{color:var(--band-text)}
.plan-lead .plan-price span{color:var(--band-text-3)}
.plan-lead .plan-card{color:var(--band-text-2)}
.plan-lead .btn-primary{background:var(--band-accent);border-color:var(--band-accent);color:var(--band-btn-fg)}
.plan-lead .btn-primary:hover{background:var(--band-text);border-color:var(--band-text)}

.deal{
  margin-top:clamp(20px,3vw,28px);display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(0,.65fr);gap:clamp(24px,4vw,46px);align-items:center;
  background:var(--band);color:var(--band-text);border:1px solid var(--band-line-strong);
  border-radius:var(--radius-lg);padding:clamp(26px,3.6vw,40px);
}
@media (max-width:820px){.deal{grid-template-columns:1fr;gap:26px}}
.deal-flag{
  display:inline-block;margin-bottom:14px;padding:5px 10px;border-radius:3px;
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  background:var(--band-accent-2);color:var(--band-btn-fg);
}
.deal h3{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.6vw,40px);letter-spacing:-.025em;line-height:1.04;color:var(--band-text);margin:0 0 12px}
.deal-body > p{font-size:16px;line-height:1.6;color:var(--band-text-2);margin:0 0 18px;max-width:58ch}
.deal-list{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:9px}
.deal-list li{display:flex;align-items:center;gap:10px;font-size:15.5px;color:var(--band-text)}
.deal-list svg{flex:none;color:var(--band-accent-2)}
.deal-note{font-size:13.5px;line-height:1.55;color:var(--band-text-3);margin:0;max-width:58ch}
.deal-amt{text-align:right}
@media (max-width:820px){.deal-amt{text-align:left}}
.deal-amt s{display:block;font-family:var(--mono);font-size:14px;color:var(--band-text-3);text-decoration-color:var(--band-accent)}
.deal-amt b{display:block;font-family:var(--serif);font-size:clamp(44px,6vw,62px);font-weight:400;letter-spacing:-.032em;line-height:1;margin:8px 0 5px;color:var(--band-text)}
.deal-amt > span{display:block;margin-bottom:20px;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--band-text-3)}

.price-foot{margin-top:20px;font-size:14.5px;line-height:1.6;color:var(--ink-3);text-align:left;max-width:60ch}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:0;border-top:1px solid var(--line-strong)}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line-strong)}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative;
  font-family:var(--serif);font-size:23px;font-weight:400;letter-spacing:-.012em;line-height:1.2;color:var(--ink);
  transition:color .15s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary::after{
  content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:20px;font-weight:500;color:var(--ink-3);line-height:1;
  transition:transform .2s,color .15s;
}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg);color:var(--accent)}
.faq-body{padding:0 0 26px;max-width:70ch}
.faq-body p{font-size:16px;line-height:1.65;color:var(--ink-2)}

/* ---------- CTA band ---------- */
.cta-band{background:var(--band);color:var(--band-text);padding:clamp(56px,8vw,96px) 0;position:relative;overflow:hidden;border-top:1px solid var(--band-line)}
.cta-band::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(var(--band-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--band-grid) 1px,transparent 1px);
  background-size:44px 44px;background-position:center top;
  -webkit-mask-image:radial-gradient(70% 90% at 30% 40%,#000 20%,transparent 100%);
  mask-image:radial-gradient(70% 90% at 30% 40%,#000 20%,transparent 100%);
}
.cta-band .wrap{position:relative;z-index:1}
.cta-band .eyebrow{color:var(--band-text-3)}
.cta-band .eyebrow::before{background:var(--band-accent)}
.cta-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(32px,5vw,72px);align-items:start}
@media (max-width:900px){.cta-inner{grid-template-columns:1fr}}
.cta-band h2{color:var(--band-text);margin-bottom:18px}
.cta-band h2 em{color:var(--band-accent)}
.cta-band > .wrap p{color:var(--band-text-2)}
.cta-text p{font-size:17px;line-height:1.6;color:var(--band-text-2);margin-bottom:26px;max-width:50ch}
.cta-actions{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- form ---------- */
.form-card{
  background:var(--band-2);border:1px solid var(--band-line-strong);border-radius:var(--radius-lg);
  padding:26px;position:relative;
}
.form-card h3{font-family:var(--serif);font-weight:400;font-size:26px;color:var(--band-text);margin-bottom:6px;letter-spacing:-.015em}
.form-card > p{font-size:14px;color:var(--band-text-3);margin-bottom:20px}
.field{margin-bottom:14px}
.field label{display:block;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  font-family:var(--mono);color:var(--band-text-3);margin-bottom:7px}
.field input,.field textarea,.field select{
  width:100%;background:var(--band);border:1px solid var(--band-line-strong);border-radius:var(--radius);
  padding:11px 13px;font-family:var(--sans);font-size:15px;color:var(--band-text);
  transition:border-color .15s,box-shadow .15s;
}
.field textarea{resize:vertical;min-height:94px;line-height:1.55}
.field input::placeholder,.field textarea::placeholder{color:#7D736A}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--band-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--band-accent) 22%,transparent);
}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23958C84' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;cursor:pointer}
.field select option{background:#1E1A18;color:#F5F1EB}
.form-card .btn{width:100%;margin-top:6px}
.form-note{margin-top:14px;font-size:12.5px;color:var(--band-text-3);text-align:center;line-height:1.5}
.form-status{margin-top:14px;padding:12px 14px;border-radius:var(--radius);font-size:14px;line-height:1.5;display:none}
.form-status.ok{display:block;background:rgba(22,163,74,.14);color:#86EFAC;border:1px solid rgba(22,163,74,.3)}
.form-status.err{display:block;background:rgba(220,38,38,.14);color:#FCA5A5;border:1px solid rgba(220,38,38,.3)}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,64px);align-items:start}
@media (max-width:860px){.about-grid{grid-template-columns:1fr}}
.about-card{
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-lg);
  padding:26px;box-shadow:var(--shadow-md);position:sticky;top:88px;
}
@media (max-width:860px){.about-card{position:static}}
.about-avatar{
  width:64px;height:64px;border-radius:var(--radius);margin-bottom:18px;
  background:var(--ink);color:var(--paper);
  display:grid;place-items:center;font-family:var(--serif);font-size:28px;letter-spacing:-.02em;
}
.about-card h3{font-family:var(--serif);font-weight:400;font-size:28px;margin-bottom:4px;letter-spacing:-.015em}
.about-role{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:20px}
.about-facts{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line-strong)}
.about-facts li{display:flex;gap:11px;font-size:14.5px;color:var(--ink-2);line-height:1.5;padding:10px 0;border-bottom:1px solid var(--line)}
.about-facts svg{flex:none;align-self:flex-start;margin-top:4px;color:var(--accent-2)}
.prose p{font-size:17px;line-height:1.68;color:var(--ink-2);margin-bottom:1.2em}
.prose p strong{color:var(--ink);font-weight:600}
.prose h3{font-family:var(--serif);font-weight:400;font-size:28px;margin:1.8em 0 .55em;letter-spacing:-.015em;line-height:1.1}
.prose ul{margin:0 0 1.3em;padding-left:1.2em;color:var(--ink-2)}
.prose li{margin-bottom:.5em;font-size:16.5px;line-height:1.65}
.prose li::marker{color:var(--accent)}
.pull{
  border-left:2px solid var(--accent);padding:4px 0 4px 22px;margin:1.8em 0;
  font-family:var(--serif);font-size:27px;line-height:1.3;color:var(--ink);font-style:italic;letter-spacing:-.005em;
}

/* ---------- breadcrumb ---------- */
.crumb{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
  padding-top:22px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.crumb a{color:var(--ink-3);text-decoration:none}
.crumb a:hover{color:var(--accent)}
.crumb span{opacity:.5}

/* ---------- deliverables list ---------- */
.deliv-item{padding:24px 28px 26px}
.deliv-item:nth-child(odd){padding-left:0}
@media (max-width:699px){.deliv-item{padding-inline:0}}
.deliv-item h4{font-size:18px;margin-bottom:8px;letter-spacing:-.015em;display:flex;gap:9px;align-items:flex-start;font-weight:600}
.deliv-item h4 svg{flex:none;align-self:flex-start;margin-top:4px;color:var(--accent-2)}
.deliv-item p{font-size:15px;line-height:1.6;color:var(--ink-2);margin:0}

/* ---------- footer ---------- */
.site-footer{background:var(--paper);border-top:1px solid var(--line-strong);padding:52px 0 28px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:34px clamp(28px,4vw,52px);margin-bottom:40px}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr;gap:28px}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}
.foot-about p{font-size:14.5px;line-height:1.6;color:var(--ink-3);margin:16px 0 0;max-width:38ch}
.foot-col h4{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:14px;
  padding-bottom:10px;border-bottom:1px solid var(--line-strong)}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot-col a{font-size:14.5px;color:var(--ink-2);text-decoration:none;transition:color .15s}
.foot-col a:hover{color:var(--accent)}
.foot-bottom{border-top:1px solid var(--line);padding-top:20px;display:flex;flex-wrap:wrap;
  gap:12px 24px;align-items:center;justify-content:space-between;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:var(--ink-3)}
.foot-bottom p{margin:0}
.theme-toggle{
  background:transparent;border:1px solid var(--line-strong);border-radius:var(--radius);padding:7px 12px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);cursor:pointer;transition:.15s;display:flex;align-items:center;gap:7px;
}
.theme-toggle:hover{border-color:var(--ink);color:var(--ink)}

/* ---------- reveal ---------- */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .55s cubic-bezier(.2,.8,.3,1),transform .55s cubic-bezier(.2,.8,.3,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ---------- misc ---------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--accent-fg);padding:12px 18px;z-index:200;border-radius:0 0 var(--radius) 0}
.skip:focus{left:0}
::selection{background:color-mix(in srgb,var(--accent) 22%,transparent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
code{font-family:var(--mono);font-size:.9em;background:var(--paper-2);border:1px solid var(--line);border-radius:3px;padding:1px 5px}

/* ---------- calendly embed ---------- */
.cal-embed{
  background:#fff;border:1px solid var(--line-strong);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-md);margin-bottom:44px;
}
.cal-embed .calendly-inline-widget{border-radius:var(--radius-lg)}
@media (max-width:600px){.cal-embed .calendly-inline-widget{height:840px!important}}


/* ---------- the delivered pack (home, "What you get") ------------------
 *
 * One real engagement shown as it went out: an index of the workbook's tabs
 * with their counts, the three cover numbers, and a ledger of target rows
 * with the signal, its date, its source and the buyer role plus verification
 * grade. Names are withheld in the markup itself, not by styling. The ledger
 * scrolls sideways on narrow screens rather than stacking, so the columns
 * keep their meaning. */
.proof-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(32px,5vw,72px);align-items:start;margin-bottom:clamp(30px,4vw,44px)}
@media (max-width:940px){.proof-grid{grid-template-columns:1fr;gap:36px}}
.proof-grid .prose p{font-size:16.5px}
.pack{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-md)}
.pack h3{font-family:var(--serif);font-weight:400;font-size:27px;line-height:1.08;letter-spacing:-.015em;margin:0 0 8px}
.pack > p{font-size:14px;color:var(--ink-3);line-height:1.55;margin:0}
.pack-index{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid var(--line-strong)}
.pack-index li{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--ink-2)}
.pack-index .pi-n{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--accent-2);letter-spacing:.08em}
.pack-index .pi-t{color:var(--ink);font-weight:600}
.pack-index .pi-t small{display:block;font-weight:400;color:var(--ink-3);font-size:13px;line-height:1.45;margin-top:2px}
.pack-index .pi-c{font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:20px;border-top:1px solid var(--line-strong)}
.three > div{padding:16px 14px 4px 0;border-right:1px solid var(--line);margin-right:14px}
.three > div:last-child{border-right:0;margin-right:0}
.three b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(30px,3vw,38px);line-height:1;letter-spacing:-.03em;color:var(--accent-2);margin-bottom:6px}
.three small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.three p{font-size:12.5px;line-height:1.45;color:var(--ink-3);margin:0}
@media (max-width:520px){.three{grid-template-columns:1fr}.three > div{border-right:0;border-bottom:1px solid var(--line);padding:12px 0}.three > div:last-child{border-bottom:0}}
.pack-src{margin:18px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;line-height:1.6;color:var(--ink-3)}
.pack-src a{color:var(--ink-2)}

.ledger-wrap{border:1px solid var(--line-strong);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface)}
.ledger-bar{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;padding:9px 14px;background:var(--paper-2);border-bottom:1px solid var(--line-strong);font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--ink-2)}
.ledger-bar b{font-weight:600}
.ledger-bar b::before{content:"";display:inline-block;width:9px;height:9px;margin-right:9px;vertical-align:-1px;border:1px solid var(--ink-3);border-top-width:3px;border-radius:1px}
.ledger-bar span{color:var(--ink-3)}
.ledger-scroll{overflow-x:auto}
.ledger{width:100%;border-collapse:collapse;font-size:13.5px;line-height:1.4;font-variant-numeric:tabular-nums;min-width:960px}
.ledger th{text-align:left;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding:9px 12px;border-bottom:1px solid var(--line-strong);white-space:nowrap;background:var(--surface)}
.ledger td{padding:11px 12px;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:top;background:var(--surface)}
.ledger th+th,.ledger td+td{border-left:1px solid var(--line)}
.ledger tr:last-child td{border-bottom:0}
.ledger td.co{font-weight:600;color:var(--ink);white-space:nowrap}
.ledger td.co small{display:block;font-weight:400;color:var(--ink-3);font-size:12px;margin-top:2px}
.ledger td.pri{font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--accent-2);white-space:nowrap}
.ledger td.why{min-width:280px;max-width:44ch}
.ledger td.when{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.ledger td.src a{font-family:var(--mono);font-size:11.5px;color:var(--accent);text-decoration:none;white-space:nowrap}
.ledger td.src a::after{content:" ↗"}
.ledger td.who{white-space:nowrap}
.ledger td.who .ok{display:inline-flex;color:var(--accent-2);vertical-align:-2px;margin-right:5px}
.ledger td.who .ok svg{width:12px;height:12px}
.ledger td.who small{display:block;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);margin-top:3px;letter-spacing:.02em}
.ledger tr.cut td{background:var(--paper)}
.ledger tr.cut td.co{text-decoration:line-through;text-decoration-color:var(--accent);color:var(--ink-3);font-weight:500}
.ledger tr.cut td.co small{text-decoration:none}
.ledger tr.cut td.pri{color:var(--accent)}
.ledger tr.cut td.who{color:var(--ink-3)}
.ledger tr.cut td.who small{color:var(--accent)}
.ledger-key{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px 28px;padding:14px 14px 16px;border-top:1px solid var(--line-strong);background:var(--paper-2);font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.ledger-key b{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.06em;color:var(--ink);display:block;margin-bottom:2px}
.ledger-key b.g{color:var(--accent-2)}
.ledger-key b.r{color:var(--accent)}