/* Mobile Business Builders — design system
   Rebuilt to the "Home screen redesign principles" handoff (Aug 2026).
   Fonts self-hosted: Barlow, Barlow Condensed, IBM Plex Mono — all SIL OFL,
   cleared for commercial use. Latin subset only. */

@font-face{font-family:'Barlow';src:url('../fonts/barlow-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('../fonts/barlow-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('../fonts/barlow-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('../fonts/barlow-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('../fonts/barlowcond-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('../fonts/barlowcond-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/plexmono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/plexmono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  /* dark / ink family */
  --ink:#17150f; --ink-2:#1d1a14; --ink-3:#2b2620; --ink-border:#322d24;
  /* paper / surface family */
  --paper:#f5f1e8; --paper-2:#fffdf8; --paper-3:#f9f6ef; --paper-4:#f9f4e9; --paper-5:#efeade;
  /* action colour — buttons and action links ONLY */
  --rust:#c94d1b; --rust-hover:#b8410f; --rust-link:#bc4613; --rust-link-hover:#8f3510; --rust-dark:#a13f13;
  /* accent on dark */
  --orange:#f0803f; --orange-soft:#f0c39c;
  /* one-offs */
  --brass:#8d6433; --green:#2f6d4f;
  /* text ramp on light */
  --text:#17150f; --text-mid:#4a4438; --text-body:#33302a; --text-muted:#6b6558;
  --text-faint:#746b5c; --text-input:#7d7464;
  /* text ramp on ink */
  --on-ink:#f2ece0; --on-ink-2:#e8e0cf; --on-ink-3:#c9c1b0; --on-ink-4:#a39a88; --on-ink-5:#878072;
  /* lines */
  --border:#ddd5c4; --border-2:#e3dbc9; --border-3:#c9bfa9;
  /* placeholders — delete when real photos land */
  --ph-bg:#e9e3d4; --ph-label:#6c6355;
  /* the one shadow */
  --shadow-card-hover:0 16px 30px -22px rgba(23,21,15,.5);
  /* radii — these three only */
  --r-sm:3px; --r-md:4px; --r-lg:5px;
  --wrap:1180px;
  --display:'Barlow Condensed','Arial Narrow',Impact,sans-serif;
  --body:'Barlow',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* legacy aliases so the pages built before the redesign still resolve */
  --brand:var(--rust); --brand-deep:var(--rust-link); --brand-wash:var(--paper-5);
  --accent:var(--rust); --accent-dark:var(--rust-hover); --line:var(--border);
  --white:var(--paper-2); --r:var(--r-md);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;font-family:var(--body);color:var(--text);background:var(--paper);
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--rust-link);text-decoration:none;text-underline-offset:3px}
a:hover{color:var(--rust-link-hover)}
::selection{background:var(--rust);color:var(--paper-2)}
:focus-visible{outline:2px solid var(--rust);outline-offset:2px}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;margin:0 0 .4em;color:var(--text);
  line-height:1;text-wrap:balance}
h1{font-size:clamp(2.75rem,6.4vw,4.5rem);line-height:.94;letter-spacing:-.01em}
h2{font-size:clamp(1.875rem,4.2vw,2.625rem)}
h3{font-size:1.5rem;font-weight:700;line-height:1.08}
p{margin:0 0 1.1em;text-wrap:pretty}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
.narrow{max-width:70ch}
.center{text-align:center}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper-2);
  padding:10px 16px;z-index:100}
.skip:focus{left:8px;top:8px}

/* ---------- shared type helpers ---------- */
.eyebrow{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--rust-dark);margin:0 0 14px}
.eyebrow-rule{display:flex;align-items:center;gap:10px;margin:0 0 20px}
.eyebrow-rule::before{content:"";width:26px;height:2px;background:var(--rust);flex:none}
.eyebrow-rule span{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--rust-dark)}
.mono{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text-faint)}
.lede{font-size:19px;line-height:1.55;color:var(--text-mid);max-width:56ch}
.fine{font-size:13px;color:var(--text-faint);margin:11px 0 0}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--body);
  font-weight:700;font-size:15px;line-height:1;padding:13px 22px;border-radius:var(--r-sm);
  border:1px solid transparent;cursor:pointer;transition:background .18s ease,color .18s ease,
  border-color .18s ease;white-space:nowrap;text-decoration:none}
.btn-primary{background:var(--rust);color:var(--paper-2)}
.btn-primary:hover{background:var(--rust-hover);color:var(--paper-2)}
.btn-ghost{background:transparent;color:var(--text);border:1.5px solid var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper-2)}
.btn-lg{font-size:16px;padding:15px 26px}
.btn-block{display:flex;width:100%}
.btn[disabled]{opacity:.7;pointer-events:none}
/* A product with no checkout link yet. Deliberately not a button: it is a
   statement, not something to press, and a live store must never carry a
   control that does nothing when clicked. */
.btn.is-soon{background:none;border:1px dashed var(--border-3);color:var(--text-faint);
  cursor:default;font-weight:500}
.btn.is-soon:hover{background:none;color:var(--text-faint)}

/* ---------- announcement bar ---------- */
.announce{background:var(--ink);color:var(--on-ink-2);font-family:var(--mono);font-size:12px;
  letter-spacing:.04em;display:flex;align-items:center;justify-content:center;gap:12px;
  padding:10px 24px;text-align:center}
.announce .msg{opacity:.7}
.announce a{color:var(--orange);font-weight:500;border-bottom:1px solid rgba(240,128,63,.5)}
.announce a:hover{color:var(--orange)}
.announce .short{display:none}
.announce .wide{display:inline}

/* ---------- header ---------- */
.site-header{background:var(--paper);border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:40}
.site-header .bar{max-width:var(--wrap);margin-inline:auto;padding:16px 24px;display:flex;
  align-items:center;gap:36px}
.wordmark{display:flex;flex-direction:column;gap:2px;text-decoration:none;flex:none}
.wordmark .wm-1{font-family:var(--display);font-weight:800;font-size:23px;line-height:1;
  letter-spacing:.01em;text-transform:uppercase;color:var(--text)}
.wordmark .wm-2{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-faint)}
/* Back to seven items: "Revenue" moved under Free on 9 Sept 2026, so the tighter
   gap and the 1120px hamburger breakpoint it needed are both reverted. nowrap
   stays -- a nav label should never break mid-phrase at any width. */
.nav{display:flex;gap:28px;flex:1}
.nav a{font-size:15px;font-weight:500;color:var(--text-mid);text-decoration:none;
  white-space:nowrap}
.nav a:hover,.nav a[aria-current="page"]{color:var(--rust-link)}
.header-cta{flex:none;padding:11px 20px;font-size:14.5px}
.navtoggle{display:none;background:none;border:1px solid var(--border);border-radius:var(--r-sm);
  width:42px;height:38px;cursor:pointer;position:relative;flex:none}
.navtoggle span,.navtoggle::before,.navtoggle::after{content:"";position:absolute;left:11px;
  width:20px;height:2px;background:var(--text);transition:.18s ease}
.navtoggle span{top:18px}.navtoggle::before{top:12px}.navtoggle::after{top:24px}
.navtoggle[aria-expanded="true"] span{opacity:0}
.navtoggle[aria-expanded="true"]::before{top:18px;transform:rotate(45deg)}
.navtoggle[aria-expanded="true"]::after{top:18px;transform:rotate(-45deg)}

/* ---------- sections ---------- */
.section{padding:76px 0 0}
.section.tint{background:var(--paper-5);padding:64px 0;margin-top:76px}
.band{background:var(--ink);color:var(--on-ink);padding:64px 0}
.band h2{color:var(--paper-2);font-size:clamp(1.875rem,4.4vw,2.875rem);line-height:1.02;
  letter-spacing:.005em;text-transform:uppercase}
.band .eyebrow{color:var(--orange)}
.band p{color:var(--on-ink-2)}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  margin-bottom:20px;flex-wrap:wrap}
.sec-head h2{margin:0;text-transform:uppercase}
.allarticles{font-size:15px;font-weight:700;color:var(--rust-link);
  border-bottom:2px solid var(--rust);padding-bottom:2px}

/* ---------- image placeholder ---------- */
.ph{position:relative;background:var(--ph-bg);border:1px solid var(--border);
  border-radius:var(--r-md);overflow:hidden;display:flex;align-items:flex-end;padding:14px 16px;
  background-image:repeating-linear-gradient(135deg,rgba(23,21,15,.05) 0 10px,transparent 10px 20px)}
.ph .ph-label{font-family:var(--mono);font-size:10.5px;line-height:1.5;color:var(--ph-label);
  white-space:pre-line}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph:has(img) .ph-label{display:none}
.ph.flush{border:0;border-radius:0}
.ph.round{border-radius:50%;flex:none;padding:0}

/* ---------- hero ---------- */
.hero{background:var(--paper);border-bottom:1px solid var(--border)}
/* No product shot rendered yet (see make_images.py): rather than leave half the
   hero empty, collapse to one column and let the founder card run full width.
   build.py sets .solo; the two-column hero returns once the image exists.
   (This is a class, not :has() -- :has() cannot legally nest inside :has().) */
.hero-grid.solo{grid-template-columns:1fr;gap:32px}
.hero-grid.solo .hero-media{max-width:none}

.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:60px;align-items:start;
  padding:66px 24px 70px}
.hero h1{margin:0 0 20px}
.hero .lede{max-width:50ch;margin:0 0 26px}
.stats{display:grid;grid-template-columns:repeat(3,auto);gap:26px;justify-content:start;
  padding:18px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  margin-bottom:30px}
.stats b{display:block;font-family:var(--display);font-weight:800;font-size:30px;line-height:1;
  color:var(--text)}
.stats span{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-faint)}
.hero-media{display:flex;flex-direction:column;gap:16px}
.hero-media .ph.mockup{height:340px}
/* Portrait column parked 30 Aug 2026 -- restore "120px 1fr" and the .ph
   min-height rules here and in the mobile block when the real photo lands. */
.whowrote{display:grid;grid-template-columns:1fr;gap:16px;align-items:stretch}
.whocard{background:var(--ink);border-radius:var(--r-md);padding:18px 20px;display:flex;
  flex-direction:column;justify-content:center;gap:8px}
/* This is the site's differentiator, not a label. It was set as an 11.5px mono
   eyebrow, which is the correct weight for "Why These Courses Exist" and much
   too quiet for "I didn't start as a builder." */
.whocard .k{display:block;font-family:var(--display);font-weight:800;font-size:26px;
  line-height:1.04;letter-spacing:.005em;text-transform:uppercase;color:var(--paper-2);
  margin-bottom:2px}
.whocard p{font-size:15px;font-weight:500;line-height:1.55;color:var(--on-ink);margin:0}
/* The three fragments close the argument, so they get the accent and the space. */
.whocard .op-close{margin-top:2px;padding-top:12px;border-top:1px solid var(--ink-border);
  font-family:var(--display);font-size:19px;line-height:1.24;color:var(--orange)}

/* The same story on a light page (About). Same words, same order, one source. */
.opstory{clear:both;background:var(--paper-5);border-left:4px solid var(--rust);border-radius:0 var(--r-md) var(--r-md) 0;
  padding:22px 24px;margin:26px 0}
.opstory h2{margin:0 0 10px;font-size:clamp(1.5rem,3.2vw,2rem);line-height:1.05;text-transform:uppercase}
.opstory p{margin:0 0 .85em}
.opstory p:last-child{margin-bottom:0}
.opstory .op-close{padding-top:12px;border-top:1px solid var(--border);
  font-family:var(--display);font-size:19px;line-height:1.24;color:var(--rust-dark)}

/* ---------- email capture ---------- */
.capture{background:var(--paper-2);color:var(--text);border:1px solid var(--border);
  border-radius:var(--r-md);padding:20px;max-width:520px}
.capture h2,.capture h3{color:var(--text)}
.capture p.fine{font-size:13px;line-height:1.45;color:var(--text-faint)}
.capture h3,.capture h2{font-family:var(--display);font-weight:700;font-size:21px;line-height:1.1;
  letter-spacing:.01em;text-transform:uppercase;margin:0 0 4px}
.capture .sub{font-size:14.5px;color:var(--text-muted);margin:0 0 14px}
.capture .row{display:flex;gap:8px}
.capture .row .btn{flex:none}
input[type=email],input[type=text],textarea,select{font-family:var(--body);font-size:15px;
  padding:12px 14px;border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--paper-3);color:var(--text);width:100%}
input::placeholder,textarea::placeholder{color:var(--text-input)}
.capture .row input{flex:1;min-width:0}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.capture.full{max-width:none;padding:26px;display:flex;flex-direction:column;gap:12px}
.capture.full h2{font-size:22px;margin:0}
.capture.full .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.terms{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;color:var(--text-muted)}
.terms input{width:15px;height:15px;flex:none;margin:2px 0 0;accent-color:var(--rust)}
.err{font-size:13.5px;color:var(--rust);margin:0}
.capture .done h3{margin-bottom:6px}
.capture .done p{font-size:15px;color:var(--text-muted);margin:0}

/* ---------- cost band cards ---------- */
.band-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:60px;align-items:center}
.costs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cost{background:var(--ink-2);border:1px solid var(--ink-border);border-radius:var(--r-md);
  padding:20px;display:flex;flex-direction:column;gap:6px}
/* The MISTAKE is the loud line. The cost sits under it as a small orange tag,
   so the card reads "this thing -> costs you that" in one pass. */
.cost strong{font-family:var(--display);font-weight:800;font-size:25px;line-height:1.05;
  letter-spacing:.01em;color:var(--paper-2)}
.cost b{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--orange);margin-bottom:2px}
.cost span{font-size:14.5px;font-weight:500;line-height:1.5;color:var(--on-ink-2)}
/* Which module fixes it. The line that turns a worry into a reason to buy. */
.cost em{margin-top:auto;padding-top:10px;font-family:var(--mono);font-style:normal;
  font-size:11.5px;letter-spacing:.08em;color:var(--on-ink-4);
  border-top:1px solid var(--ink-border)}
.costs-fix{margin:16px 0 0;font-size:15.5px;line-height:1.55;color:var(--on-ink-2);
  border-left:3px solid var(--orange);padding-left:14px}
.costs-fix strong{color:var(--paper-2);font-weight:700}

/* ---------- product ---------- */
.product-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
/* No product shots rendered yet: the copy column takes the full width. */
.product-grid.solo{grid-template-columns:1fr}
.covers .ph.cover{aspect-ratio:3/4}
.covers .spreads{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.covers .spreads .ph{height:100px}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 30px;padding:0;list-style:none}
.chips li{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-mid);background:var(--paper-2);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:8px 12px}
.modules{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;list-style:none;margin:0;padding:0}
.modules li{display:grid;grid-template-columns:32px 1fr;gap:12px;padding:14px 0;
  border-top:1px solid var(--border-2);align-items:start}
.modules .n{font-family:var(--mono);font-size:12px;color:var(--brass);padding-top:2px}
.modules strong{display:block;font-size:15.5px;font-weight:600;line-height:1.3;color:var(--text)}
.modules span{font-size:13.5px;line-height:1.45;color:var(--text-muted)}

/* ---------- price anchor ---------- */
.anchor{background:var(--paper-2);border:1px solid var(--border);border-radius:var(--r-lg);
  overflow:hidden}
.anchor .head{padding:26px 34px;border-bottom:1px solid var(--border-2);display:flex;
  align-items:baseline;gap:14px;flex-wrap:wrap}
.anchor .head h2{margin:0;font-size:clamp(1.625rem,3.2vw,2.125rem);text-transform:uppercase}
.anchor .cols{display:grid;grid-template-columns:1fr 1fr}
.anchor .opt{padding:32px 34px;display:flex;flex-direction:column;gap:12px}
.anchor .opt.a{border-right:1px solid var(--border-2)}
.anchor .opt.b{background:var(--paper-4)}
.anchor .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-faint)}
.anchor .opt.b .k{color:var(--rust-dark)}
.anchor .fig{font-family:var(--display);font-weight:800;font-size:44px;line-height:1;
  color:var(--text-faint)}
.anchor .opt.b .fig{color:var(--text)}
.anchor .figrow{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.anchor .figrow em{font-style:normal;font-size:15px;color:var(--text-faint)}
.anchor .opt p{font-size:16px;line-height:1.5;color:var(--text-muted);margin:0}
.anchor .opt.b p{color:var(--text-body)}
.anchor .opt .btn{align-self:flex-start;padding:12px 20px}

/* ---------- testimonials ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.quote{background:var(--paper-2);border:1px solid var(--border);border-radius:var(--r-md);
  padding:26px;display:flex;flex-direction:column;gap:16px}
.quote blockquote{margin:0;font-size:16.5px;line-height:1.55;color:var(--text-body)}
.quote .who{margin-top:auto;padding-top:16px;border-top:1px solid var(--border-2);display:flex;
  gap:12px;align-items:center}
.quote .who .ph{width:40px;height:40px}
.quote .who b{display:block;font-size:14.5px;font-weight:700;color:var(--text)}
.quote .who span{font-size:13px;color:var(--text-faint)}

/* ---------- final CTA ---------- */
.finalcta{background:var(--ink);color:var(--on-ink);border-radius:var(--r-lg);padding:52px;display:grid;
  grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;margin-top:76px}
.finalcta .cta-copy h2{color:var(--paper-2);font-size:clamp(2.125rem,4.6vw,3.25rem);line-height:.98;
  text-transform:uppercase;margin:0 0 14px}
.badge-out{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(240,128,63,.4);
  border-radius:var(--r-sm);padding:6px 11px;margin-bottom:18px;font-family:var(--mono);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-soft)}
.badge-out::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange);flex:none}
.pricerow{display:flex;align-items:baseline;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.pricerow .now{font-family:var(--display);font-weight:800;font-size:56px;line-height:1;color:var(--orange)}
.pricerow .was{font-size:19px;color:var(--text-muted);text-decoration:line-through}
.pricerow .note{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-muted)}
/* Dark containers flip them back. Previously the dark values were the default,
   which made the note on the consulting page's cream pricebox unreadable. */
.finalcta .pricerow .was,.band .pricerow .was{color:var(--on-ink-4)}
.finalcta .pricerow .note,.band .pricerow .note{color:var(--on-ink-2)}
.finalcta .cta-copy > p{font-size:17px;font-weight:500;line-height:1.55;color:var(--on-ink-2);
  max-width:48ch;margin:0}

/* ---------- qualifier ---------- */
.qual{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.qual > div{background:var(--paper-2);border:1px solid var(--border);border-radius:var(--r-md);
  padding:30px}
.qual .yes{border-left:3px solid var(--green)}
.qual .no{border-left:3px solid #a39a88}
.qual .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  display:block;margin-bottom:14px}
.qual .yes .k{color:var(--green)}
.qual .no .k{color:var(--text-faint)}
.qual ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.qual li{font-size:16px;line-height:1.45;color:var(--text-body)}
.qual .no li{color:var(--text-muted)}

/* ---------- consulting strip ---------- */
.strip{border:1px solid var(--border);border-radius:var(--r-md);background:var(--paper-5);
  padding:30px 34px;display:flex;justify-content:space-between;align-items:center;gap:32px}
.strip b{display:block;font-family:var(--display);font-weight:700;font-size:26px;line-height:1.1;
  text-transform:uppercase;color:var(--text);margin-bottom:4px}
.strip p{font-size:16px;color:var(--text-mid);margin:0}

/* ---------- cards / blog ---------- */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{display:flex;flex-direction:column;background:var(--paper-2);border:1px solid var(--border);
  border-radius:var(--r-md);overflow:hidden;position:relative;
  transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-card-hover);border-color:var(--border-3)}
@media (prefers-reduced-motion:reduce){.card:hover{transform:none}}
.card > img,.card > .ph{height:150px;object-fit:cover;border:0;border-radius:0;flex:none}
/* Blog cards carry a brand band drawn at 1400x456. Sizing it by height and
   cover-cropping trimmed the wordmark at both ends -- "OBILE BUSINESS ILDERS"
   -- because the slot's ratio changes with the card's width. These scale to the
   card instead, so nothing is ever cropped. */
.card.post > img,.card.post > .ph{height:auto;aspect-ratio:1400/456}
.card .body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.card .body > *{margin:0}
.card .cat{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--rust-dark)}
.card h3{font-family:var(--display);font-weight:700;font-size:24px;line-height:1.08;
  text-transform:uppercase}
.card h3 a{color:inherit;text-decoration:none}
.card p{font-size:14.5px;line-height:1.45;color:var(--text-muted)}
.card .more{margin-top:auto;padding-top:12px;font-size:13.5px;font-weight:700;color:var(--rust-link)}
.card .badge{align-self:flex-start;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--rust-dark);background:var(--paper-5);
  border:1px solid var(--border);border-radius:var(--r-sm);padding:4px 8px}
.card .price{font-family:var(--display);font-weight:800;font-size:30px;line-height:1;color:var(--text)}
.stretch::after{content:"";position:absolute;inset:0}

/* ---------- legacy blocks kept alive ---------- */
.pain{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:2em}
.pain > div{background:var(--paper-2);border:1px solid var(--border);border-radius:var(--r-md);padding:24px}
.pain strong{display:block;font-family:var(--display);font-weight:700;font-size:20px;
  text-transform:uppercase;margin-bottom:8px}
.pain p{font-size:15px;color:var(--text-muted);margin:0}
.credit{display:flex;gap:12px;align-items:center;margin-top:24px}
.credit .avatar{width:42px;height:42px;border-radius:50%;background:var(--ink);color:var(--paper-2);
  font-family:var(--display);font-weight:800;font-size:20px;display:flex;align-items:center;
  justify-content:center;flex:none}
.credit p{font-size:14.5px;line-height:1.45;color:var(--text-muted);margin:0}
.credit strong{display:block;color:var(--text);font-weight:600}
.linklist{display:flex;flex-direction:column}
.linklist a{padding:6px 0;font-size:15px}
.faq details{border-top:1px solid var(--border-2);padding:16px 0}
.faq summary{font-family:var(--display);font-weight:700;font-size:20px;text-transform:uppercase;
  cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--rust);font-family:var(--body)}
.faq details[open] summary::after{content:"–"}
.faq p{margin:12px 0 0;color:var(--text-muted);max-width:70ch}
.article{max-width:70ch}
.article h2{font-size:clamp(1.5rem,3vw,2rem);margin:1.6em 0 .4em;text-transform:uppercase}
.article h3{margin:1.4em 0 .3em;text-transform:uppercase}
.article p,.article li{font-size:17px;line-height:1.65;color:var(--text-body)}
.article ul,.article ol{padding-left:1.2em}
.contents{list-style:none;margin:0;padding:0}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);margin-top:76px}
.site-footer .wrap{padding-top:52px;padding-bottom:0}
.site-footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;padding-bottom:52px}
.site-footer .wordmark .wm-1{color:var(--paper-2);font-size:22px}
.site-footer .wordmark .wm-2{color:var(--on-ink-5)}
.site-footer .blurb{font-size:15px;line-height:1.6;color:var(--on-ink-2);max-width:44ch;margin:14px 0 0}
.site-footer h4{font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--on-ink-5);margin:0 0 14px}
.site-footer .cols > div > a{display:block;font-size:15px;color:var(--on-ink-2);padding:5px 0}
.site-footer .cols > div > a:hover{color:var(--paper-2)}
.site-footer .base{border-top:1px solid var(--ink-3);display:flex;justify-content:space-between;
  gap:16px;padding:18px 0;font-family:var(--mono);font-size:11.5px;color:var(--on-ink-5);flex-wrap:wrap}

/* Crisp light-on-dark text. `antialiased` thins glyphs — good on cream, but on
   the ink surfaces it reads as blurry. Subpixel rendering is sharper there. */
.announce,.band,.whocard,.finalcta,.site-footer{
  -webkit-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing:auto}
.cost span,.finalcta > div > p,.band p,.whocard p,.site-footer .blurb{
  text-rendering:optimizeLegibility}

/* ---------- responsive ---------- */
@media (max-width:1099px){
  h1{font-size:clamp(2.5rem,7vw,3.75rem)}
  .hero-grid,.band-grid,.product-grid{grid-template-columns:1fr;gap:36px}
  .hero-media{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
  .hero-media:not(:has(.ph)){grid-template-columns:1fr}
  .hero-media .ph.mockup{height:280px}
  .modules{grid-template-columns:1fr}
  .g4{grid-template-columns:1fr 1fr}
  .finalcta{grid-template-columns:1fr;gap:36px;padding:40px}
  .nav{gap:20px}
}
@media (max-width:979px){
  .navtoggle{display:block;order:3;margin-left:auto}
  .nav{display:none;order:4;flex-basis:100%;flex-direction:column;gap:0;
    border-top:1px solid var(--border);padding-top:8px}
  .nav[data-open="true"]{display:flex}
  .nav a{padding:12px 0;min-height:44px;display:flex;align-items:center}
  .site-header .bar{flex-wrap:wrap;gap:12px}
  .header-cta{order:2;margin-left:auto}
}
@media (max-width:899px){
  h2{font-size:clamp(1.75rem,5vw,2.125rem)}
  .quotes{grid-template-columns:1fr 1fr}
  .quotes > :last-child:nth-child(odd){grid-column:1/-1}
  .anchor .cols{grid-template-columns:1fr}
  .anchor .opt.a{border-right:0;border-bottom:1px solid var(--border-2)}
  .g3{grid-template-columns:1fr 1fr}
  .pain{grid-template-columns:1fr}
  .site-footer .cols{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:759px){
  .wrap,.hero-grid{padding-inline:20px}
  .section{padding-top:48px}
  .section.tint{margin-top:48px;padding:48px 0}
  .band{padding:48px 0}
  .hero-grid{padding-top:44px;padding-bottom:48px}
  h1{font-size:2.75rem}
  h2{font-size:1.875rem}
  .band h2{font-size:2rem}
  .finalcta{padding:28px;margin-top:48px}
  .finalcta h2{font-size:2.25rem}
  .pricerow .now{font-size:44px}
  .announce{padding:0 20px}
  .announce .msg,.announce .wide{display:none}
  .announce .short{display:inline}
  .announce a{display:flex;align-items:center;min-height:44px}
  .navtoggle{height:44px;width:46px}
  .navtoggle span{top:21px}.navtoggle::before{top:15px}.navtoggle::after{top:27px}
  .navtoggle[aria-expanded="true"] span{opacity:0}
  .navtoggle[aria-expanded="true"]::before,.navtoggle[aria-expanded="true"]::after{top:21px}
  .allarticles,.card .more,.terms a{display:inline-flex;align-items:center;min-height:44px}
  .wordmark{min-height:44px;justify-content:center}
  .stats{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .hero-media{grid-template-columns:1fr}
  .costs,.quotes,.g2,.g3,.g4,.qual,.covers .spreads,.capture.full .two{grid-template-columns:1fr}
  .anchor .head,.anchor .opt{padding:24px 22px}
  .strip{flex-direction:column;align-items:stretch;text-align:left}
  .strip .btn{width:100%}
  .capture .row{flex-direction:column}
  .capture .row .btn{width:100%;padding:15px}
  .btn{min-height:44px}
  .site-footer{margin-top:48px}
  .site-footer .cols{grid-template-columns:1fr;gap:28px}
  .site-footer .cols > div > a,.linklist a{padding:10px 0;min-height:44px;display:flex;align-items:center}
}

/* ---------- form fields on interior pages ---------- */
.field{margin-bottom:16px}
.field label{display:block;font-size:13.5px;font-weight:600;color:var(--text-mid);margin-bottom:6px}
.price-sm{font-family:var(--display);font-weight:800;font-size:30px;line-height:1;
  color:var(--text);margin:0 0 12px}

/* About page portrait. It used to sit on its own line under the headline, which
   left a 340px picture stranded above a full-width column. A grid was worse: in
   the .narrow container it squeezed the prose into a 155px ribbon.
   Floated instead, so the opening paragraphs sit beside it and the rest of the
   essay closes underneath at full measure -- no column, no width jump. */
.portrait{float:right;width:250px;height:auto;border-radius:var(--r-md);
  margin:4px 0 20px 30px;shape-margin:30px}
.article-end{clear:both}
@media (max-width:719px){
  .portrait{float:none;width:100%;max-width:260px;margin:.4em 0 1.6em}
}

/* Consulting: four short blocks instead of four long sections. The page ran to
   997 words and stated the 120-day term three times; "Use the sessions
   strategically" repeated the timeline section almost verbatim. Consulting is
   not the feature on this site, so it earns a scan, not an essay. */
.conscards{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.cc{background:var(--paper-2);border:1px solid var(--border);border-radius:var(--r-md);
  padding:26px 26px 22px}
.cc h3{font-size:20px;text-transform:uppercase;margin:0 0 .5em}
.cc p{font-size:15px;line-height:1.55;color:var(--text-body);margin:0 0 .8em}
.cc p:last-child{margin-bottom:0}
@media (max-width:859px){.conscards{grid-template-columns:1fr;gap:16px}}

/* ---------- article furniture ---------- */
.postmeta{display:flex;gap:12px;align-items:center;margin:0 0 2em;padding-bottom:1.4em;
  border-bottom:1px solid var(--border-2)}
.postmeta .avatar{width:42px;height:42px;border-radius:50%;background:var(--ink);
  color:var(--paper-2);font-family:var(--display);font-weight:800;font-size:20px;display:flex;
  align-items:center;justify-content:center;flex:none}
.postmeta p{font-size:14.5px;line-height:1.45;color:var(--text-muted);margin:0}
.postmeta strong{display:block;color:var(--text);font-weight:600}
.postmeta strong a{color:inherit;text-decoration:none}
.postmeta strong a:hover,.postmeta strong a:focus-visible{text-decoration:underline;
  text-underline-offset:3px}
/* Publish date. Its own line under the byline, in the mono face the rest of the
   site uses for facts about a document rather than the document itself. */
.postdate{display:block;margin-top:3px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted)}
.incap{margin:2.4em 0}
.endcta{margin-top:2.6em;padding:30px;background:var(--paper-5);border:1px solid var(--border);
  border-radius:var(--r-md)}
.endcta h3{font-family:var(--display);font-weight:700;font-size:26px;text-transform:uppercase;
  margin:0 0 .4em}
.endcta p{font-size:16px;color:var(--text-mid);margin:0 0 1.2em}
.price-sm.quote-price{font-family:var(--body);font-size:16px;font-weight:600;color:var(--text-mid)}

/* ---------- store ---------- */
.card.prod .body{gap:10px}
.card.prod .price{margin-top:6px}
.card.bundle{border-color:var(--border-3);background:var(--paper-4)}
.card.ultimate{border-color:var(--ink)}
.card .save{font-size:13.5px;color:var(--text-muted);margin:0}
.card .save strong{color:var(--rust-dark)}
.card .inc{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.card .inc li{font-size:13.5px;color:var(--text-muted);padding-left:15px;position:relative}
.card .inc li::before{content:"+";position:absolute;left:0;color:var(--brass);font-weight:700}
.card .legalnote{font-size:12.5px;line-height:1.45;color:var(--text-faint);
  border-left:2px solid var(--border);padding-left:10px;margin:2px 0 0}
.card .btn[data-nocheckout]{background:var(--paper-5);color:var(--text-mid);
  border:1px solid var(--border)}
.card .btn[data-nocheckout]:hover{background:var(--border);color:var(--text)}
.ladder{list-style:none;margin:1.4em 0 0;padding:0}
.ladder li{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:13px 0;
  border-top:1px solid var(--border-2);align-items:baseline}
.ladder b{font-family:var(--display);font-weight:800;font-size:22px;color:var(--text)}
.ladder span{font-size:15.5px;color:var(--text-muted)}
@media (max-width:759px){.ladder li{grid-template-columns:90px 1fr;gap:12px}}

/* A wide photo band. Used once, on the consulting page, where a finished build
   is the evidence behind a paid call. Height is capped so the photo supports the
   copy rather than pushing the pricing cards below the fold. */
.ph.banner{height:400px;border-radius:var(--r-md)}
@media (max-width:719px){.ph.banner{height:210px}}

/* Page count on a product card. Deliberately quiet — mono, muted, small: it is
   evidence that a $97 module is a real document, not a claim about why it costs
   $97. The pricing ladder still says price follows consequence, not length. */
.card .pages{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text-muted);margin:-4px 0 10px}

/* ---------------------------------------------------------------- look inside
   Preview thumbnail on a product card, opening a native <dialog>. Colours come
   from the existing tokens rather than new literals, so the panel follows the
   theme instead of pinning white. */
.preview{margin:0 0 14px}
.preview__trigger{display:block;width:100%;padding:0;border:0;cursor:zoom-in;background:none;
  text-decoration:none;
  position:relative;border-radius:var(--r-sm);overflow:hidden;line-height:0}
.preview__trigger img{width:100%;height:auto;display:block;
  box-shadow:0 2px 12px rgb(0 0 0 / .18);transition:transform 180ms ease}
.preview__trigger:hover img,.preview__trigger:focus-visible img{transform:scale(1.02)}
.preview__trigger:focus-visible{outline:2px solid var(--rust);outline-offset:3px}
.preview__label{position:absolute;left:0;right:0;bottom:0;padding:8px 12px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;background:linear-gradient(transparent,rgb(0 0 0 / .72));text-align:left}
.excerpt-link{margin:0 0 14px;font-size:14px}

/* The thumbnail is a tall page; cap it so one card is not four times the height
   of its neighbours in the same grid row. */
.card .preview__trigger{max-height:210px}
.card .preview__trigger img{object-fit:cover;object-position:top;height:210px}

.lightbox{border:0;padding:0;background:transparent;max-width:min(1100px,92vw);max-height:92vh;
  overflow:visible}
.lightbox::backdrop{background:rgb(23 21 15 / .88)}
.lightbox__panel{position:relative;background:var(--paper);border-radius:var(--r-md);
  padding:clamp(16px,3vw,32px);max-height:92vh;overflow:auto}
.lightbox__title{margin:0 0 16px;font-size:20px;line-height:1.3;padding-right:44px}
.lightbox__pages{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.lightbox__page{width:100%;height:auto;display:block;border:1px solid var(--border)}
.lightbox__note{margin:16px 0 0;font-size:14px;line-height:1.5;color:var(--text-muted)}
.lightbox__close{position:absolute;top:8px;right:8px;width:40px;height:40px;border:0;
  border-radius:50%;background:none;cursor:pointer;font-size:28px;line-height:1;
  color:var(--ink-2)}
.lightbox__close:hover{background:rgb(0 0 0 / .06)}
@media (prefers-reduced-motion:reduce){.preview__trigger img{transition:none}}

/* Module rows on a course page carry their own preview thumbnail. */
.modules.previewable li{grid-template-columns:auto 1fr 110px;align-items:start;gap:16px}
.modules.previewable .preview{margin:0;width:110px}
.modules.previewable .preview__trigger{max-height:142px}
.modules.previewable .preview__trigger img{height:142px;object-fit:cover;object-position:top}
.modules.previewable .preview__label{font-size:8.5px;padding:5px 6px;letter-spacing:.05em}
@media (max-width:719px){
  .modules.previewable li{grid-template-columns:auto 1fr}
  .modules.previewable .preview{display:none}
}

/* ---------------------------------------------------------------- shop nav
   35 SKUs on one page. Without this a mobile-bar buyer scrolls nine coffee
   modules before reaching anything they want. Scrolls horizontally on small
   screens rather than wrapping into a tall block above the first product. */
.catnav{display:flex;gap:8px;overflow-x:auto;padding:0 0 4px;margin:0 0 8px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.catnav::-webkit-scrollbar{display:none}
.catnav a{flex:none;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;padding:9px 14px;border:1px solid var(--border);
  border-radius:999px;color:var(--ink-2);text-decoration:none;white-space:nowrap}
.catnav a:hover{border-color:var(--rust);color:var(--rust)}

/* Hero CTA pair. The state pills and the free-downloads nudge that used to sit
   here were removed 30 Aug 2026 — the banner already carries the launch date and
   the header already has a Free downloads button. */
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 26px}

/* Buttons wrap rather than force the page wider than the viewport. A long
   product name in a CTA once pushed a blog post to 485px on a 375px screen. */
.endcta .btn,.hero-cta .btn{white-space:normal;text-align:center}
@media (max-width:479px){
  .endcta .btn,.hero-cta .btn{display:block;width:100%;margin:0 0 10px}
  .endcta .btn+.btn,.hero-cta .btn+.btn{margin-left:0}
}

/* Effective date on the legal pages. Quiet — it is a fact about the document,
   not a heading. */
.legal-date{font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-muted);margin:-6px 0 26px}
/* Registered name and postal address. Set apart from the body copy: it is a
   record to be read off and checked, not a paragraph. */
.entity{margin:1.2em 0 0;padding:14px 16px;border-left:2px solid var(--border-2);
  font-size:14.5px;line-height:1.6;color:var(--text-muted)}
.entity a{color:inherit}

/* ---------------------------------------------------------------- pick one
   The home page's single decision. Two targets, no prices — a visitor choosing
   between coffee and bar should not be doing arithmetic yet. */
.picks{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pick{display:flex;flex-direction:column;gap:8px;padding:26px 26px 22px;
  border:1px solid var(--border);border-radius:var(--r-md);background:var(--paper-3);
  text-decoration:none;transition:border-color 140ms ease,transform 140ms ease}
.pick:hover{border-color:var(--rust);transform:translateY(-2px)}
.pick-k{font-family:var(--display,inherit);font-size:22px;font-weight:800;line-height:1.15;
  color:var(--ink);text-transform:uppercase;letter-spacing:.01em}
.pick-b{font-size:15.5px;line-height:1.55;color:var(--text-mid)}
.pick-go{margin-top:6px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--rust)}
@media (max-width:719px){.picks{grid-template-columns:1fr}}

/* Free downloads as a plain list rather than priced cards. */
.freelist{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.freelist a{display:grid;gap:2px;padding:15px 0;border-top:1px solid var(--border);
  text-decoration:none}
.freelist li:last-child a{border-bottom:1px solid var(--border)}
.freelist strong{font-size:17px;color:var(--ink)}
.freelist span{font-size:15px;color:var(--text-muted);line-height:1.5}
.freelist a:hover strong{color:var(--rust)}

/* Qualifier is single-column since the "Skip it if" side was removed. */
.qual.solo{grid-template-columns:1fr}

/* ---------------------------------------------------------------- mobile taps
   Touch targets need ~44px. The category pills measured 35px and the FAQ
   summaries 30px, which is a miss on a phone even though both look fine. */
@media (max-width:719px){
  .catnav a{min-height:44px;display:inline-flex;align-items:center}
  .faq summary{min-height:44px;display:flex;align-items:center}
  .freelist a{padding:17px 0}
}

/* The full banner message is too long for a phone, but hiding it entirely left
   mobile visitors with no launch date at all — which is the one thing the
   banner exists to say. Short version on small screens instead of nothing. */
.announce .msg-short{display:none}
@media (max-width:719px){
  .announce .msg-short{display:inline;opacity:.7}
  .announce{gap:8px}
}

/* Prompt above the two hero buttons. Without it the pair reads as navigation;
   with it, it reads as a question to answer. */
.hero-ask{margin:0 0 10px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2)}


/* ---------------------------------------------------------------- vault page
   The $897 both-verticals page. Contents listed as plain rows so the length of
   the list is itself the argument. */
.pricebox{background:var(--paper);border:1px solid var(--border);border-radius:var(--r-md);
  padding:clamp(20px,3vw,32px)}
.v-h{margin:1.8em 0 .5em;font-size:15px;font-family:var(--mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--rust)}
.vlist{list-style:none;margin:0;padding:0}
.vlist li{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:baseline;
  padding:9px 0;border-top:1px solid var(--border);font-size:15.5px}
.vlist li:last-child{border-bottom:1px solid var(--border)}
.v-pp,.v-pr{font-family:var(--mono);font-size:12px;color:var(--text-muted);white-space:nowrap}
.v-pr{color:var(--ink-2);min-width:44px;text-align:right}
@media (max-width:519px){
  .vlist li{grid-template-columns:1fr auto}
  .v-pp{display:none}
}

/* Module price on a course page row, and the buy-the-set prompt under the list. */
/* Was a bordered "Buy $97 ->" pill on every module row. It is now plain text:
   the price still justifies the bundle saving, without nine checkout links
   arguing against the bundle they sit inside. */
.modules.previewable .m-price{display:block;margin-top:9px;font-family:var(--mono);
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint)}
.buyboth{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;
  margin-top:28px;padding:22px 24px;background:var(--paper);border:1px solid var(--rust);
  border-radius:var(--r-md)}
.buyboth b{display:block;font-size:18px;margin-bottom:6px}
.buyboth p{margin:0;font-size:15px;line-height:1.55;color:var(--text-muted);max-width:60ch}
@media (max-width:719px){.buyboth .btn{width:100%}}

/* ---------------------------------------------------------------- pick block
   This is the only decision the home page asks for, so it stops looking like a
   section and starts looking like a question: its own ground, ruled off top and
   bottom, heading at hero scale, and cards big enough to be the obvious target. */
.pickblock{background:var(--paper-3);border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);padding:clamp(48px,7vw,86px) 0}
.pickblock h2{font-size:clamp(2rem,4.4vw,3rem);line-height:1.02;margin:0 0 14px;
  text-transform:uppercase}
.pickblock > .wrap > p{font-size:18px;line-height:1.55;color:var(--text-mid);
  max-width:56ch;margin:0 0 34px}
.pickblock .picks{gap:22px}
.pickblock .pick{padding:32px 30px 28px;background:var(--paper);gap:10px}
.pickblock .pick-k{font-size:clamp(21px,2.4vw,27px)}
.pickblock .pick-b{font-size:16.5px}
.pickblock .pick-go{margin-top:10px;font-size:12px}
.pickblock .pick:hover{box-shadow:0 6px 24px rgb(0 0 0 / .08)}

/* Free downloads, folded in beside the articles at the foot of the home page.
   Both are "useful, free, no card" — they were two sections saying that. */
.freerow{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;
  margin-top:34px;padding:22px 24px;border:1px solid var(--border);border-radius:var(--r-md);
  background:var(--paper-3)}
.freerow b{display:block;font-size:17px;margin-bottom:5px}
.freerow p{margin:0;font-size:14.5px;line-height:1.5;color:var(--text-muted);max-width:72ch}
@media (max-width:719px){.freerow .btn{width:100%}}

/* ---------------------------------------------------------------- hero choice
   The single decision above the fold. Given real separation from the paragraph
   above it, and buttons sized to be the obvious next move rather than two more
   links. */
/* This is the conversion point on the home page — where the site stops
   explaining itself and asks the visitor to identify themselves. It was styled
   as a mono eyebrow, so it read as metadata and the buttons overpowered the
   question they answer. It is a secondary heading now: display face, heading
   weight, and real space on both sides of it. */
.hero-ask{margin:60px 0 25px;font-family:var(--display);font-weight:700;font-size:26px;
  line-height:1.15;letter-spacing:.015em;text-transform:uppercase;color:var(--ink)}
@media (max-width:719px){
  .hero-ask{margin:44px 0 20px;font-size:22px}
}
.hero-cta{gap:14px;margin:0}
.hero-cta .btn{font-size:17.5px;padding:20px 30px;border-radius:var(--r-md);
  gap:10px;box-shadow:0 2px 10px rgb(23 21 15 / .10);
  transition:background .18s ease,transform .16s ease,box-shadow .18s ease}
.hero-cta .btn span{transition:transform .16s ease}
.hero-cta .btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgb(23 21 15 / .18)}
.hero-cta .btn:hover span{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){
  .hero-cta .btn,.hero-cta .btn span{transition:none}
  .hero-cta .btn:hover{transform:none}
}
@media (max-width:719px){
  .hero-cta{flex-direction:column}
  .hero-cta .btn{width:100%;font-size:17px;padding:19px 24px}
}

/* ---------------------------------------------------------------- mobile weight
   The course page is a long list of nine modules, each with a two-sentence
   description. On a phone that is a wall of text between a visitor and the buy
   button. Titles, page-equivalent and price stay; the descriptions drop, and
   the preview thumbnail already shows what the module looks like. */
@media (max-width:719px){
  .modules.previewable .m-note{display:none}
  .modules.previewable li{padding:14px 0}
  .modules.previewable strong{font-size:16.5px}
}

/* ---------------------------------------------------------------- footer
   Four links, not twelve. Everything else is in the header menu; the footer
   only carries what the header deliberately leaves out. */
.site-footer .footlinks{display:flex;flex-wrap:wrap;gap:10px 28px;padding:0 0 22px;
  border-bottom:1px solid rgb(255 255 255 / .12)}
.site-footer .footlinks a{font-size:15px;text-decoration:none;min-height:44px;
  display:inline-flex;align-items:center}
@media (max-width:719px){
  .site-footer .footlinks{gap:0 26px}
  .site-footer .base{flex-direction:column;align-items:flex-start;gap:8px}
}

/* The bundle reminder at the foot of each shop category — shown after the
   individual prices, which is when "all of it costs less" actually lands. */
.bundle-tail{margin-top:30px;padding:22px 24px;border-top:2px solid var(--rust)}
.bundle-tail b{display:block;font-size:19px;margin-bottom:6px}
.bundle-tail p{margin:0;font-size:15px;line-height:1.55;color:var(--text-muted);max-width:66ch}

/* ---------------------------------------------------------------- module list
   One row per thing you can buy. No category headings — the names say what they
   are — and no cards, so nine modules read as a list you can scan rather than
   nine blocks you have to work through. */
.mlist{list-style:none;margin:0;padding:0}
.mrow{display:grid;grid-template-columns:1fr auto auto auto auto;gap:16px;align-items:center;
  padding:16px 0;border-top:1px solid var(--border)}
.mlist li:last-child{border-bottom:1px solid var(--border)}
.mrow .r-n{font-size:17px;font-weight:600;color:var(--ink)}
.mrow .r-pp{font-family:var(--mono);font-size:11.5px;color:var(--text-muted);white-space:nowrap}
.mrow .r-look{background:none;border:0;padding:0;cursor:zoom-in;font-family:var(--mono);
  font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--rust);
  text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.mrow .r-pr{font-family:var(--mono);font-size:15px;color:var(--ink);min-width:56px;
  text-align:right}
.mrow .r-buy{padding:10px 18px;font-size:14px;white-space:nowrap}
@media (max-width:859px){
  .mrow{grid-template-columns:1fr auto;row-gap:10px}
  .mrow .r-n{grid-column:1/-1}
  .mrow .r-pp{order:2}
  .mrow .r-look{order:3;justify-self:start}
  .mrow .r-pr{order:4;justify-self:end;grid-column:2}
  .mrow .r-buy{order:5;grid-column:1/-1;width:100%;justify-content:center;min-height:44px}
}

/* The three-beat line under the headline. Sits between the h1 and the lede —
   heavier than body copy, lighter than the headline. */
.hero-sub{margin:0 0 14px;font-family:var(--display,inherit);font-size:clamp(19px,2.2vw,23px);
  font-weight:700;line-height:1.25;color:var(--rust)}

/* The cost cards are evidence for the method copy beside them. On a phone they
   stack into four more full-width blocks and the paragraph has already made the
   point, so they come out. */
@media (max-width:719px){ .cost{padding:16px} .cost strong{font-size:22px} }

/* ---------------------------------------------------------------- mobile header
   The bar was 132px tall on a phone: the wordmark took the first row and the
   menu button wrapped onto a second, leaving a gap between them. Wordmark left,
   menu right, one row — which is also the answer to "right or centre": the two
   ends of the header justify to their own edges, and everything else on the
   page stays left-aligned. */
@media (max-width:919px){
  /* The bar must keep wrapping: the open menu is a flex child of it, so nowrap
     squeezed the panel onto the wordmark's row and pushed it off-screen. The
     toggle is pushed right with margin-left:auto instead — wordmark and button
     share row one — and the nav gets a full-width basis so it wraps to its own
     row when it opens. */
  .site-header .bar{flex-wrap:wrap;align-items:center;gap:0 16px;padding:14px 20px}
  .site-header .navtoggle{margin-left:auto;flex:none}
  .site-header .nav{flex-basis:100%;width:100%}
  .wordmark{min-width:0}
}

/* Bonus documents under the module list — what the full course adds on top of
   the nine, priced so the "free" is a number rather than a word. */
.bonus{margin-top:30px;padding:22px 24px;background:var(--paper);
  border:1px dashed var(--rust);border-radius:var(--r-md)}
.bonuslist{list-style:none;margin:0;padding:0}
.bonuslist li{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:baseline;
  padding:10px 0;border-top:1px solid var(--border)}
.bonuslist li:first-child{border-top:0}
.bonuslist .b-n{font-size:16px;font-weight:600;color:var(--ink)}
.bonuslist .b-pp,.bonuslist .b-pr{font-family:var(--mono);font-size:11.5px;color:var(--text-muted);
  white-space:nowrap}
.bonuslist .b-pr{color:var(--rust)}
@media (max-width:559px){
  .bonuslist li{grid-template-columns:1fr auto}
  .bonuslist .b-n{grid-column:1/-1}
}

/* Plain-statement box. Used where the honest answer is a limitation — the kind
   of thing a buyer needs before purchase, not after. */
.notebox{margin-top:26px;padding:20px 22px;background:var(--paper-3);
  border-left:3px solid var(--ink);border-radius:var(--r-sm)}
.notebox p{margin:0 0 10px;font-size:15.5px;line-height:1.6;color:var(--text-mid)}
.notebox p:last-child{margin:0}
/* The alcohol disclaimer. It has to be present and readable, but it is a
   footnote to the offer, not part of it -- so it sits under the Complete System
   box and is set smaller than the copy that is doing the selling. */
.notebox-sm{margin-top:18px;padding:14px 16px}
.notebox-sm p{font-size:13.5px;line-height:1.55;color:var(--text-faint)}

/* Two-column topic list and tick list, used on the Private Consulting page. */
.twocol{list-style:none;margin:0 0 1em;padding:0;display:grid;
  grid-template-columns:1fr 1fr;gap:6px 26px}
.twocol li{position:relative;padding-left:16px;font-size:15.5px;line-height:1.5;
  color:var(--text-mid)}
.twocol li::before{content:"·";position:absolute;left:2px;color:var(--rust);font-weight:700}
.ticks{list-style:none;margin:0 0 1em;padding:0}
.ticks li{position:relative;padding-left:22px;margin-bottom:9px;line-height:1.55}
.ticks li::before{content:"+";position:absolute;left:0;top:0;color:var(--rust);font-weight:700}
@media (max-width:639px){.twocol{grid-template-columns:1fr}}

/* In-article download. Replaced an email form — the site says no email is
   required, so a form here contradicted it and gated a one-click file. */
.inline-dl{background:var(--paper-3);border:1px solid var(--border);
  border-radius:var(--r-md);padding:22px 24px}
.inline-dl h3{margin:0 0 6px;font-size:20px}
.inline-dl .sub{margin:0 0 14px;font-size:15.5px;color:var(--text-muted);line-height:1.5}
.inline-dl .fine{margin:10px 0 0}

/* ---------- planning calculators ----------
   Built from the same tokens as the rest of the site on purpose. Suzanne's
   brief: "Do not make them look like financial software." So: paper ground,
   the display face on the numbers, one accent, and the result treated as the
   answer to a question rather than a spreadsheet cell. */
.calc{background:var(--paper-3);border:1px solid var(--border);border-radius:var(--r-md);
  padding:24px;margin:30px 0}
.calc-head h2{margin:0 0 6px;font-size:clamp(1.5rem,3.4vw,2rem);line-height:1.05;
  text-transform:uppercase}
.calc-intro{margin:0 0 4px;font-size:15.5px;line-height:1.55;color:var(--text-body)}
.calc-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:start;
  margin-top:18px}
.calc-in{display:flex;flex-direction:column;gap:16px;min-width:0}

.cg{border:1px solid var(--border-2);border-radius:var(--r-md);background:var(--paper-2);
  padding:14px 16px}
.cg-t,.cg-adv > summary{font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--text-muted);margin-bottom:10px}
.cg-f{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.cg-adv{padding:14px 16px}
.cg-adv > summary{cursor:pointer;margin:0;list-style:none;display:flex;align-items:center;gap:8px}
.cg-adv > summary::-webkit-details-marker{display:none}
.cg-adv > summary::before{content:"+";font-size:14px;color:var(--rust);font-weight:700}
.cg-adv[open] > summary::before{content:"–"}
.cg-adv[open] > summary{margin-bottom:12px}
.cg-more{margin-left:auto;font-weight:500;letter-spacing:.06em;color:var(--text-faint);
  text-transform:none}

.cf{display:flex;flex-direction:column;gap:5px;min-width:0}
.cf-l{font-size:13.5px;font-weight:600;line-height:1.25;color:var(--text-body)}
.cf-h{font-size:12px;line-height:1.35;color:var(--text-faint)}
.cf-i{position:relative;display:block}
/* 16px on the input itself: anything smaller and iOS Safari zooms the page on
   focus, which on a form this long throws the visitor's place away. */
.cf-i input{width:100%;min-height:46px;padding:10px 12px;font:600 16px/1.2 var(--body);
  color:var(--text);background:var(--paper-2);border:1px solid var(--border-3);
  border-radius:var(--r-sm);-moz-appearance:textfield}
.cf-i input::-webkit-outer-spin-button,.cf-i input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.cf-i input:focus{outline:2px solid var(--rust);outline-offset:1px;border-color:var(--rust)}
.cf-i[data-pre] input{padding-left:26px}
.cf-i[data-pre]::before{content:attr(data-pre);position:absolute;left:11px;top:50%;
  transform:translateY(-50%);font-size:15px;font-weight:600;color:var(--text-faint);
  pointer-events:none}
.cf-i[data-suf] input{padding-right:28px}
.cf-i[data-suf]::after{content:attr(data-suf);position:absolute;right:11px;top:50%;
  transform:translateY(-50%);font-size:15px;font-weight:600;color:var(--text-faint);
  pointer-events:none}

.calc-outwrap{position:sticky;top:16px}
.calc-out{background:var(--ink);color:var(--on-ink);border-radius:var(--r-md);padding:20px}
.calc-out-t{margin:0 0 12px;font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--orange)}
.co{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:8px 0;border-bottom:1px solid var(--ink-border)}
.co:last-of-type{border-bottom:0}
.co-l{font-size:13.5px;line-height:1.3;color:var(--on-ink-3)}
.co-v{font-family:var(--display);font-size:20px;font-weight:800;line-height:1;
  color:var(--paper-2);white-space:nowrap}
.co-v.is-neg{color:var(--orange)}
.co-big{border-bottom:0;border-top:1px solid var(--ink-border);margin-top:6px;padding-top:14px;
  flex-direction:column;align-items:flex-start;gap:4px}
.co-big .co-l{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--orange)}
.co-big .co-v{font-size:38px;line-height:1}
.co-s{width:100%;font-size:12.5px;line-height:1.4;color:var(--on-ink-4)}
.calc-acts{display:flex;gap:8px;margin-top:12px}
.calc-acts .btn{flex:1;min-height:44px}
.calc-note,.mrange{font-size:13.5px;line-height:1.55;color:var(--text-muted);margin:14px 0 0}
.calc-disc{margin-top:18px}
.calc-disc p{font-size:13.5px;line-height:1.55;margin:0 0 .6em}
.calc-disc p:last-child{margin-bottom:0}
.mrange{background:var(--paper-5);border-left:3px solid var(--brass);padding:12px 14px;
  border-radius:0 var(--r-sm) var(--r-sm) 0}

/* Illustration tables. Numbers a reader can scan without a calculator, and the
   caption says out loud that they are arithmetic, not a forecast. */
.figs{width:100%;border-collapse:collapse;margin:16px 0;font-size:15px}
.figs th,.figs td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border-2)}
.figs th{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text-muted)}
.figs td:not(:first-child){font-family:var(--display);font-size:18px;font-weight:800;
  white-space:nowrap}
.figs caption{caption-side:bottom;margin-top:10px;font-size:13px;line-height:1.5;
  color:var(--text-faint);text-align:left}
.figs-wrap{overflow-x:auto}

@media (max-width:860px){
  .calc-grid{grid-template-columns:1fr}
  .calc-outwrap{position:static;order:-1}
  .co-big .co-v{font-size:32px}
}
@media (max-width:520px){
  .calc{padding:16px}
  .cg-f{grid-template-columns:1fr}
}
@media print{
  .site-header,.site-footer,.announce,.calc-acts,.skip{display:none!important}
  .calc{border:0;padding:0;background:none}
  .calc-out{background:none;color:#000;border:1px solid #999}
  .co-l,.co-v,.co-s,.calc-out-t{color:#000!important}
}

/* ---------- revenue hub + money pages ---------- */
.revcol{background:var(--paper-3);border:1px solid var(--border);border-radius:var(--r-md);
  padding:24px}
.revcol h2{margin:0 0 8px;font-size:clamp(1.4rem,3vw,1.85rem);text-transform:uppercase}
.revcol > p{margin:0 0 16px;font-size:15.5px;line-height:1.6;color:var(--text-body)}
.revlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.revlist a{display:block;background:var(--paper-2);border:1px solid var(--border-2);
  border-radius:var(--r-sm);padding:12px 14px;text-decoration:none;color:var(--text);
  transition:border-color .15s,transform .15s}
.revlist a:hover{border-color:var(--rust);transform:translateX(2px)}
.revlist strong{display:block;font-size:15px;line-height:1.3;color:var(--rust-link)}
.revlist span{display:block;margin-top:3px;font-size:13.5px;line-height:1.45;
  color:var(--text-muted)}
.revchain{margin:14px 0 0;padding-left:1.1em;display:flex;flex-direction:column;gap:7px}
.revchain li{font-size:16px;line-height:1.5;color:var(--on-ink-2)}
.revchain strong{color:var(--paper-2)}

/* .inc was only ever styled inside .card; the money pages use it in noteboxes
   and cross-link blocks, where it would otherwise fall back to browser bullets. */
.notebox .inc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.notebox .inc li{font-size:15px;line-height:1.45;color:var(--text-mid);padding-left:16px;
  position:relative}
.notebox .inc li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:1.5px;
  background:var(--brass)}
.notebox .inc a{color:var(--rust-link);font-weight:600}

.faqblock{margin-top:34px;padding-top:26px;border-top:2px solid var(--ink)}
.faqblock h2{margin:0 0 4px;text-transform:uppercase}
.faqblock h3{margin:20px 0 6px;font-size:17.5px;line-height:1.3}
.faqblock p{margin:0;font-size:15.5px;line-height:1.62;color:var(--text-body)}


/* The money pages are prose in a .narrow column with a calculator in the middle
   of them. The prose wants 70ch; the calculator wants the whole wrap. This
   widens just the calculator, centred on the same axis, so neither compromises.*/
@media (min-width:900px){
  .wrap.narrow .calc{width:min(1132px, calc(100vw - 48px));margin-left:50%;
    transform:translateX(-50%)}
}

/* The two revenue prompts on /free.html. Question-shaped on purpose: it is the
   question people arrive with, so it is the one worth putting on the page. */
.moneyq{background:var(--paper-3);border:1px solid var(--border);border-radius:var(--r-md);
  padding:26px;display:flex;flex-direction:column;gap:10px}
.moneyq h2{margin:0;font-size:clamp(1.35rem,2.8vw,1.75rem);line-height:1.1;
  text-transform:uppercase}
.moneyq p{margin:0;font-size:15.5px;line-height:1.6;color:var(--text-body)}
/* margin-top:auto pins the buttons to the bottom of each card, so they line up
   across the row even when one blurb runs a line longer. */
.moneyq .btn{align-self:flex-start;margin-top:auto}
.moneyq .btn span{margin-left:7px}

/* ---------- slide-in nudge ----------
   A corner card, not an interstitial. It sits beside the content on desktop and
   above the fold edge on mobile without covering what is being read, because
   these pages are meant to rank and an intrusive mobile interstitial is a
   ranking problem. Hidden entirely when printing. */
.slidein{position:fixed;right:18px;bottom:18px;z-index:60;width:min(330px,calc(100vw - 36px));
  background:var(--ink);color:var(--on-ink);border:1px solid var(--ink-3);
  border-radius:var(--r-md);padding:18px 20px 18px;
  box-shadow:0 18px 40px -18px rgba(23,21,15,.55);
  opacity:0;transform:translateY(14px);transition:opacity .26s ease,transform .26s ease}
.slidein[data-open="true"]{opacity:1;transform:translateY(0)}
.slidein__q{margin:0 22px 6px 0;font-family:var(--display);font-size:20px;font-weight:800;
  line-height:1.12;color:var(--paper-2)}
.slidein__s{margin:0 0 14px;font-size:13.5px;line-height:1.45;color:var(--on-ink-3)}
.slidein .btn{width:100%;min-height:44px}
.slidein__x{position:absolute;top:8px;right:8px;width:32px;height:32px;border:0;cursor:pointer;
  background:none;color:var(--on-ink-4);font-size:22px;line-height:1;border-radius:var(--r-sm)}
.slidein__x:hover{color:var(--paper-2);background:rgba(255,255,255,.08)}
@media (max-width:520px){
  .slidein{right:12px;left:12px;bottom:12px;width:auto;padding:15px 16px}
  .slidein__q{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  .slidein{transition:none;transform:none}
}
@media print{ .slidein{display:none!important} }