:root{
  --cream:#F5EFE3;--cream-2:#EFE7D8;--paper:#FBF7EE;--ivory:#FCF9F2;
  --esp:#180b04;--esp2:#22130a;--esp3:#2c1a0c;
  --ink:#241a10;--soft:#5b4a37;--faint:#766351;
  --terra:#BC603F;--terra-2:#D07A55;--terra-ink:#9C4A2B;--terra-btn:#B0552E;--teal:#2b7568;--teal-lt:#4f9c8c;--gold:#C39A54;
  --di1:#F7F0E2;--di2:rgba(243,235,221,.94);--di3:rgba(218,195,163,.9);--di4:rgba(191,166,131,.78);
  --line:rgba(42,32,22,.14);--line-2:rgba(42,32,22,.07);--dline:rgba(240,230,214,.12);
  --serif:"Cormorant Garamond","Didot",Georgia,serif;
  --sans:"Poppins","Avenir Next",system-ui,sans-serif;
  --mx:1280px;--pad:clamp(22px,5.5vw,84px);--e:cubic-bezier(.16,1,.3,1);
  --r-pill:999px;--r-card:10px;--r-sm:6px;
  --sh-btn:0 10px 26px rgba(24,11,4,.28);
  --sh-card:0 2px 6px rgba(24,11,4,.10),0 24px 60px rgba(24,11,4,.22);
  --sh-lift:0 40px 90px rgba(24,11,4,.42);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden;max-width:100vw}
body{background:var(--cream);color:var(--ink);font-family:var(--sans);font-weight:300;font-size:15px;line-height:1.8;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.3;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.42 0 0 0 0 0.36 0 0 0 0 0.26 0 0 0 0.5 -0.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:240px}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
em{font-style:italic}
h1,h2,h3{font-family:var(--serif);font-weight:300;line-height:1.06;letter-spacing:.002em}
.wrap{max-width:var(--mx);margin:0 auto;padding:0 var(--pad)}
.mphoto{filter:saturate(.86) contrast(1.02) brightness(1.02) sepia(.05)}

/* voice */
.kick{font-family:var(--sans);font-weight:400;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--terra-ink);line-height:1.6}
.kick.on-dark{color:var(--terra-2)}
.chap{display:inline-flex;align-items:center;gap:14px;font-family:var(--sans);font-weight:400;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--terra)}
.chap::before{content:"";width:34px;height:1px;background:currentColor;opacity:.5}
.chap.on-dark{color:var(--terra-2)}
.lead{font-family:var(--serif);font-weight:300;font-size:clamp(34px,4.6vw,62px);line-height:1.08;letter-spacing:-.01em}
.lead em{color:var(--terra)}
.lead.on-dark{color:var(--di1)}.lead.on-dark em{color:var(--terra-2)}
.body{font-size:16px;line-height:1.82;color:var(--soft)}
.body.on-dark{color:var(--di2)}
.dropcap::first-letter{float:left;font-family:var(--serif);font-weight:400;font-size:5.4em;line-height:.72;padding:6px 14px 0 0;color:var(--terra)}

.pill{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--ivory);background:var(--terra-btn);padding:16px 34px;border-radius:var(--r-pill);transition:background .45s var(--e),transform .45s var(--e),box-shadow .45s var(--e)}
.pill:hover{background:var(--terra-2);transform:translateY(-2px);box-shadow:var(--sh-btn)}
.pill.lg{padding:19px 44px;font-size:13px}
.tlink{display:inline-block;font-size:11px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:inherit;padding-bottom:7px;border-bottom:1px solid currentColor;transition:color .35s var(--e)}
.tlink:hover{color:var(--terra-2)}

/* image caption — carries story */
.imcap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(26px,4vw,54px);padding-top:clamp(70px,10vw,130px);background:linear-gradient(0deg,rgba(24,11,4,.92) 0%,rgba(24,11,4,.6) 34%,transparent 74%);font-family:var(--serif);font-style:italic;font-size:clamp(15px,1.5vw,19px);line-height:1.5;color:var(--di1);max-width:38ch;text-shadow:0 1px 12px rgba(24,11,4,.6)}
.imcap b{display:block;font-style:normal;font-family:var(--sans);font-weight:400;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--di4);margin-bottom:12px}

/* motion */
html.js .fade{opacity:0;transform:translateY(24px);transition:opacity 1.1s var(--e),transform 1.1s var(--e)}
html.js .fade.in{opacity:1;transform:none}
html.js .d1{transition-delay:.1s}html.js .d2{transition-delay:.24s}html.js .d3{transition-delay:.4s}html.js .d4{transition-delay:.54s}
html.js .rise{clip-path:inset(0 0 100% 0);transition:clip-path 1.3s var(--e)}
html.js .rise.in{clip-path:inset(0 0 0 0)}
@media(prefers-reduced-motion:reduce){html.js .fade,html.js .rise{opacity:1;transform:none;clip-path:none;transition:none}}

.flag{position:fixed;bottom:0;left:0;right:0;z-index:300;font-family:var(--serif);font-style:italic;font-size:13px;color:var(--di3);text-align:center;padding:8px;background:rgba(24,11,4,.82);backdrop-filter:blur(6px)}

/* NAV */
nav{position:absolute;top:0;left:0;right:0;z-index:60;display:flex;justify-content:space-between;align-items:center;padding:30px var(--pad)}
nav .brand{font-family:var(--serif);font-style:italic;font-weight:500;font-size:24px;color:var(--di1)}
nav .brand sup{font-style:normal;font-size:9px;vertical-align:super;opacity:.7}
nav .nr{display:flex;align-items:center;gap:28px}
nav .nl{font-family:var(--serif);font-style:normal;font-size:16px;letter-spacing:.03em;color:var(--di3);transition:color .35s var(--e)}
nav .nl:hover{color:var(--di1)}
nav .npill{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--esp);background:var(--di1);padding:11px 22px;border-radius:var(--r-pill);transition:transform .45s var(--e)}
nav .npill:hover{transform:translateY(-1px)}

/* HERO — editorial split */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;overflow:hidden;background:var(--esp);padding-top:clamp(88px,11vh,110px)}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:82% 24%;transform:scale(1.12) translateX(6%)}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--esp) 0%,rgba(24,11,4,.98) 22%,rgba(24,11,4,.86) 36%,rgba(24,11,4,.5) 50%,rgba(24,11,4,.18) 64%,rgba(24,11,4,.02) 78%,transparent 90%),linear-gradient(180deg,rgba(24,11,4,.58) 0%,rgba(24,11,4,.14) 12%,transparent 22%),linear-gradient(0deg,rgba(24,11,4,.74) 0%,transparent 42%)}
.hero-in{position:relative;z-index:2;max-width:var(--mx);margin:auto auto 0;width:100%;padding:24px var(--pad) clamp(36px,5vh,64px)}
.hero-eyebrow{font-family:var(--sans);font-weight:400;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--terra-2);margin-bottom:26px}
.hero-h{font-family:var(--serif);font-weight:300;font-size:clamp(46px,6.4vw,106px);line-height:.94;letter-spacing:-.028em;color:var(--di1);max-width:13ch}
.hero-h em{color:var(--terra-2)}
.hero-sub{margin-top:32px;font-family:var(--serif);font-style:normal;font-size:clamp(18px,1.55vw,22px);color:var(--di2);max-width:38ch;line-height:1.62}
.hero-acts{margin-top:36px;display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.hero-acts .tlink{color:var(--di1)}
.hero-bar{position:relative;z-index:2;border-top:1px solid var(--dline)}
.hero-bar-in{max-width:var(--mx);margin:0 auto;padding:24px var(--pad);display:flex;justify-content:center;gap:clamp(24px,6vw,88px);flex-wrap:wrap;text-align:center}
.hbi{align-items:center}
.hbi{display:flex;flex-direction:column;gap:3px}
.hbi b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:26px;color:var(--di1)}
.hbi span{font-size:11px;letter-spacing:.06em;color:var(--di3)}

/* MARQUEE */
.mq{background:var(--esp2);padding:15px 0;overflow:hidden;border-bottom:1px solid var(--dline);white-space:nowrap}
.mq-t{display:inline-block;animation:mqx 44s linear infinite}
.mq:hover .mq-t{animation-play-state:paused}
.mq-i{font-family:var(--serif);font-style:italic;font-size:19px;padding:0 26px;color:var(--di3)}
.mq-i.a{color:var(--terra-2)}.mq-i.b{color:var(--teal-lt)}.mq-i.c{color:var(--gold)}
.mq-s{color:var(--di4);padding:0 2px}
@keyframes mqx{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* EDITORIAL SPREAD */
.spread{display:grid;grid-template-columns:1.05fr .95fr;min-height:92vh;background:var(--esp)}
.spread.light{background:var(--cream)}
.spread.rev .spread-fig{order:2}
.spread-fig{position:relative;overflow:hidden;min-height:56vh}
.spread-fig img{width:100%;height:100%;object-fit:cover}
.spread-txt{display:flex;flex-direction:column;justify-content:center;padding:clamp(52px,7vw,116px) clamp(34px,5.5vw,92px)}
.spread-txt .chap{margin-bottom:26px}
.spread-txt .lead{font-size:clamp(32px,4vw,56px);margin-bottom:26px}
.spread-txt p{font-size:15.5px;line-height:2;color:var(--soft);margin-bottom:16px;max-width:46ch}
.spread.dark .spread-txt p{color:var(--di2)}
.spread-txt .sig{display:block;margin-top:34px;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(21px,2.7vw,36px);line-height:1.1;color:var(--terra-2);letter-spacing:-.01em;text-align:center;padding-right:clamp(0px,4vw,64px)}
.spread.dark .spread-txt .sig{color:var(--terra-2)}
.spread-txt .sig-tag{display:block;width:fit-content;text-align:center;margin-top:30px;font-family:var(--serif);font-weight:500;font-size:clamp(30px,4.1vw,60px);line-height:1.06;color:var(--terra);letter-spacing:-.018em}
.spread-txt .sig-tag em{font-style:italic;font-weight:500;color:var(--terra-ink)}

/* SECTION */
.sec{padding:clamp(80px,11vh,150px) 0}
.sec.dark{background:var(--esp);color:var(--di1)}
.sec.dark2{background:var(--esp2);color:var(--di1)}
.head{max-width:660px}
.head.center{margin:0 auto;text-align:center}
.head .chap,.head .kick{display:block;margin-bottom:20px}
.head .body{margin-top:22px}

/* STATS */
.stats{background:var(--ivory)}
.stat-grid{margin-top:56px;display:grid;grid-template-columns:repeat(4,1fr);gap:0 clamp(26px,3.4vw,60px);border-top:1px solid var(--line)}
.st{padding:40px 0 0;position:relative}
.st:last-child{border-right:none}
.st .n{font-family:var(--serif);font-weight:300;font-size:clamp(56px,6vw,86px);line-height:.9;color:var(--ink);letter-spacing:-.02em}
.st .n em{font-style:normal;color:var(--terra);font-size:.5em;white-space:nowrap;letter-spacing:0}
/* The percent sat on the baseline under an 86px numeral, so it read as dropped
   rather than paired. Raised to sit against the cap height. */
.st .n em.pct{display:inline-block;font-size:.44em;transform:translateY(-.43em);margin-left:.06em}
.st p{margin-top:18px;font-size:15px;line-height:1.72;color:var(--soft);max-width:26ch}
.st cite{display:block;margin-top:18px;font-family:var(--sans);font-style:normal;font-size:11px;letter-spacing:.04em;color:var(--faint)}
.stats-out{margin-top:52px;text-align:center;font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.2vw,27px);color:var(--soft)}
.stats-out em{color:var(--terra-ink)}

/* PRODUCT */
.prod-grid{margin-top:60px;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:start}
.report{background:var(--paper);border:0;border-radius:var(--r-card);overflow:hidden;box-shadow:var(--sh-lift)}
/* Was a second tinted header band stacked under the chrome strip: two tops,
   two fills, one job. The numeral carries the hierarchy on its own. */
.report-hero{padding:38px 34px 4px}
.report-hero .rm{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);margin-bottom:16px}
.report-hero .rv{display:flex;align-items:baseline;gap:15px}
.report-hero .rn{font-family:var(--serif);font-size:4.4rem;line-height:.8;color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.report-hero .rname{font-family:var(--serif);font-style:italic;font-size:1.4rem;color:var(--soft)}
.report-hero .rname small{display:block;font-family:var(--sans);font-style:normal;font-size:11px;color:var(--faint);margin-top:6px}
.report-body{padding:24px 34px 34px}
.rstat{display:inline-flex;align-items:center;gap:10px;font-family:var(--serif);font-style:italic;font-size:19px;color:var(--terra-ink);margin-bottom:18px}
.rstat::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--terra);box-shadow:0 0 0 4px rgba(188,96,63,.2)}
.rbar{margin:8px 0 20px}
.rbar-track{position:relative;height:6px;border-radius:var(--r-sm);background:linear-gradient(90deg,var(--teal) 0%,var(--teal) 34%,var(--gold) 50%,var(--terra) 72%,var(--terra) 100%);opacity:.8}
.rbar-dot{position:absolute;top:50%;left:63%;width:16px;height:16px;border-radius:50%;background:var(--ivory);border:3px solid var(--terra);transform:translate(-50%,-50%);box-shadow:0 2px 8px rgba(24,11,4,.3)}
.rbar-labs{display:flex;justify-content:space-between;margin-top:11px;font-size:11px;letter-spacing:.05em;color:var(--faint)}
.rbar-labs em{color:var(--terra-ink);font-style:normal}
.report-body p{font-size:15px;line-height:1.8;color:var(--soft)}
.report-body p strong{color:var(--ink);font-weight:400}
.rcite{margin-top:22px;padding-top:16px;border-top:1px solid var(--line-2);font-family:var(--serif);font-style:normal;font-size:13px;color:var(--faint)}
.prod-side{display:flex;flex-direction:column;gap:16px}
.prod-side .pk{font-family:var(--sans);font-weight:400;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--terra-2);margin-bottom:6px}
/* The rail was four cream cards beside a cream document: two light blocks
   competing for the same job. It reads as a list now, so the report is the
   only object in the composition. */
.bm{display:grid;grid-template-columns:112px 1fr;gap:20px;align-items:center;background:var(--cream-2);border:0;border-radius:var(--r-sm);overflow:hidden;padding-right:20px;transition:transform .5s var(--e),box-shadow .5s var(--e)}
.bm:hover{transform:translateX(5px);box-shadow:var(--sh-card)}
.bm-img{width:112px;height:112px;overflow:hidden;position:relative}
.bm-img img{width:100%;height:100%;object-fit:cover;filter:saturate(1.08) contrast(1.04);transition:transform .7s var(--e)}
.bm:hover .bm-img img{transform:scale(1.05)}
.bm-txt .bn{font-family:var(--serif);font-size:23px;color:var(--ink);line-height:1.1}
.bm-txt .bs{display:flex;align-items:baseline;gap:10px;margin-top:6px}
.bs .bv{font-family:var(--serif);font-style:normal;font-size:19px;color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.bs .bstate{font-family:var(--sans);font-weight:400;font-size:10px;letter-spacing:.15em;text-transform:uppercase;padding:4px 9px;border-radius:var(--r-sm);background:rgba(36,26,16,.07);background:color-mix(in srgb,currentColor 13%,transparent)}
.bs.hi{color:var(--terra-ink)}.bs.mid{color:#7A5718}.bs.ok{color:#24594C}
.prod-note{margin-top:44px;text-align:center;font-family:var(--serif);font-style:italic;font-size:clamp(19px,2vw,24px);color:var(--di2)}
.prod-note em{color:var(--terra-2)}
.supp{margin-top:clamp(58px,7.5vw,96px);display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(32px,5vw,72px);align-items:center}
.supp h3{margin-top:18px;font-family:var(--serif);font-weight:300;font-size:clamp(26px,3.1vw,42px);line-height:1.12;color:var(--di1);letter-spacing:-.012em}
.supp h3 em{font-style:italic;color:var(--terra-2)}
.supp .supp-txt p{margin-top:20px;font-size:16px;line-height:1.78;color:var(--di2);max-width:44ch}
.supp .supp-txt p.supp-price{margin-top:24px;font-family:var(--sans);font-size:11px;line-height:1.6;letter-spacing:.22em;text-transform:uppercase;color:var(--di3);max-width:none}
/* The audit is a second artifact, so it is built like the report card: same
   cream ground, same shadow, same shape. The product is the proof. */
.audit{background:var(--paper);border-radius:var(--r-card);box-shadow:var(--sh-lift);padding:26px 30px 14px}
.audit-h{font-family:var(--sans);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);padding-bottom:16px;border-bottom:1px solid var(--line-2)}
.au{padding:20px 0;border-bottom:1px solid var(--line-2)}
.au:last-child{border-bottom:0}
.au-top{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.au-n{font-family:var(--serif);font-size:21px;color:var(--ink);line-height:1.1}
.au-s{font-family:var(--sans);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
/* The same range device the report card uses, so the two artifacts read as
   one product: where you are, and where the research sits. */
.au-track{position:relative;height:5px;margin-top:16px;border-radius:var(--r-sm);background:rgba(36,26,16,.11)}
.au-fill{position:absolute;left:0;top:0;bottom:0;border-radius:var(--r-sm);background:var(--terra)}
.au-target{position:absolute;top:50%;width:2px;height:14px;background:var(--teal);transform:translate(-50%,-50%)}
.au-labs{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font-size:11px;letter-spacing:.03em;color:var(--faint)}
.au-labs--solo{margin-top:16px}
.au-labs b{font-weight:400;color:var(--ink)}
.au p{margin-top:12px;font-size:14.5px;line-height:1.7;color:var(--soft)}

/* CINEMATIC BAND / PULL-QUOTE */
.band{position:relative;min-height:82vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--esp)}
.band-bg{position:absolute;inset:0;z-index:0}
/* The photo is 1.50:1 in a 2.04:1 band, so object-fit:cover leaves no horizontal
   overflow and object-position X does nothing. Scaling up creates the room, then
   the translate pushes the cup right so the quote sits on the dark left of frame. */
.band-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 34%;transform:scale(1.28) translateX(12.5%);transform-origin:center}
/* The whole frame was being dimmed to protect one column of text. Now the scrim
   is tight to the text column only, so the cup and the warm light stay bright and
   the band still lifts against the dark sections on either side of it. */
.band-bg::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(24,11,4,.5) 0%,rgba(24,11,4,.1) 34%,transparent 62%),linear-gradient(95deg,rgba(24,11,4,.94) 0%,rgba(24,11,4,.86) 26%,rgba(24,11,4,.5) 42%,rgba(24,11,4,.14) 58%,transparent 74%)}
.band-in{position:relative;z-index:2;max-width:var(--mx);margin:0 auto;width:100%;padding:0 var(--pad) clamp(56px,8vh,100px)}
.band-in .chap{color:var(--terra-2);margin-bottom:24px}
.band-q{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4vw,56px);line-height:1.18;color:var(--di1);max-width:17ch;letter-spacing:-.005em;text-shadow:0 1px 16px rgba(24,11,4,.45)}
.band-q em{color:var(--terra-2)}
.band-cite{margin-top:26px;font-family:var(--serif);font-style:normal;font-size:19px;color:var(--di1);text-shadow:0 1px 14px rgba(24,11,4,.8)}

/* PATTERNS */
.pat-grid{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
/* A card on a dark ground should be a different ground, not the same colour with a
   line around it. These were --esp2 sitting on an --esp2 section. */
.pc{background:var(--paper);border:0;border-radius:var(--r-card);overflow:hidden;box-shadow:var(--sh-card);transition:transform .5s var(--e),box-shadow .5s var(--e)}
.pc:hover{transform:translateY(-4px)}

.pc-img{height:190px;overflow:hidden}
.pc-img img{width:100%;height:100%;object-fit:cover}
.pc-b{padding:28px 26px 32px;text-align:center}
.pc-b .pn{font-family:var(--serif);font-size:27px;color:var(--ink);line-height:1.08}
.pc-b .pd{font-family:var(--sans);font-weight:400;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--terra-ink);margin:10px 0 18px}
.pc-b p{font-size:15px;line-height:1.78;color:var(--soft)}

/* HOW */
.how-grid{margin-top:58px;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(26px,3vw,46px)}
.step .n{font-family:var(--serif);font-style:italic;font-size:52px;color:var(--terra);display:block;margin-bottom:18px;line-height:1}
.step h3{font-family:var(--serif);font-weight:400;font-size:24px;color:var(--ink);margin-bottom:11px;line-height:1.2}
.step p{font-size:15px;line-height:1.8;color:var(--soft)}
/* Sits on the espresso ground at the close of the product section, so the last
   thing heard after the report and the audit is a customer, not us. */
.qb{margin:0 auto;max-width:min(780px,84vw);text-align:center}
.qb-sec{padding-top:clamp(70px,9vw,120px);padding-bottom:clamp(70px,9vw,120px)}
/* Light variant: keeps the coffee band from butting straight into the dark
   patterns section, so the quote gets its own breath. */
.qb-sec--light{background:var(--ivory)}
.qb-sec--light .qb blockquote{color:var(--ink)}
.qb-sec--light .qb figcaption{color:var(--terra-ink)}
.qb blockquote{margin:0;font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(28px,3.6vw,52px);line-height:1.16;color:var(--di1);letter-spacing:-.014em}
.qb figcaption{margin-top:30px;font-family:var(--sans);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--terra-2)}
.how-fine{margin:58px auto 0;max-width:none;text-align:center;font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.3vw,30px);line-height:1.3;color:var(--soft)}

/* FOUNDER magazine profile */
.founder{background:var(--esp);color:var(--di1)}
/* 9. Ground changes get a teal hairline. Section 5 of the brand guide assigns
   teal to rules and the top cascade bar, so the seam is articulated in the
   brand's own science signal rather than blurred with a gradient. */
.sec.dark,.sec.dark2,.founder,.cta{border-top:1px solid rgba(79,156,140,.26)}
.founder-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(40px,6vw,88px);align-items:center}
.founder .fig{position:relative;display:grid;grid-template-columns:100%}
.founder .fig img{grid-area:1/1;position:relative;z-index:0}
.founder .fig img{width:100%;display:block;border-radius:var(--r-sm);filter:saturate(.84) contrast(1.07) brightness(.98) sepia(.11)}
.founder .fig::after{content:"";grid-area:1/1;border-radius:var(--r-sm);pointer-events:none;background:radial-gradient(ellipse 82% 78% at 48% 40%,transparent 44%,rgba(24,11,4,.48) 100%);box-shadow:inset 0 0 0 1px rgba(240,230,214,.1)}
.founder .fig figcaption{grid-area:2/1;position:relative;z-index:2;margin-top:16px;font-family:var(--serif);font-style:normal;font-size:15px;color:var(--di3);line-height:1.5;border-top:1px solid var(--dline);padding-top:14px}
.founder .fig figcaption b{display:block;font-style:normal;font-family:var(--sans);font-weight:400;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--di4);margin-bottom:8px}
.founder .fq{font-family:var(--serif);font-weight:300;font-size:clamp(28px,3.4vw,48px);line-height:1.26;color:var(--di1);letter-spacing:-.01em}
.founder .fq em{color:var(--terra-2)}
.founder .fname{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--terra-2);margin:26px 0 20px}
.founder .fb p{font-size:15.5px;line-height:1.84;color:var(--di2);margin-bottom:17px;max-width:56ch}
.founder .fb strong{color:var(--di1);font-weight:400}

/* FAQ */
.faq{background:var(--ivory)}
.faq-w{max-width:860px;margin:0 auto}
.faq-list{margin-top:44px;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:flex-start;gap:26px;background:none;border:0;cursor:pointer;text-align:left;padding:26px 0;font-family:var(--serif);font-weight:400;font-size:clamp(20px,2.1vw,26px);color:var(--ink);line-height:1.3;transition:color .35s var(--e)}
.faq-q:hover{color:var(--terra)}
.faq-i{position:relative;flex:0 0 16px;width:16px;height:16px;margin-top:8px}
.faq-i::before,.faq-i::after{content:"";position:absolute;background:var(--terra);transition:transform .4s var(--e),opacity .4s}
.faq-i::before{left:0;top:7px;width:16px;height:1.5px}
.faq-i::after{left:7px;top:0;width:1.5px;height:16px}
.faq-q[aria-expanded="true"] .faq-i::after{transform:scaleY(0);opacity:0}
.faq-a{max-height:0;overflow:hidden;transition:max-height .5s var(--e)}
.faq-a-in{padding:0 44px 30px 2px}
.faq-a p{font-size:15.5px;line-height:1.84;color:var(--soft);margin-bottom:13px}
.faq-a .disc{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--faint);margin-bottom:0}

/* CTA */
.cta{position:relative;overflow:hidden;text-align:center;background:var(--esp);color:var(--di1);padding:clamp(90px,14vh,170px) 0}
.cta-bg{position:absolute;inset:0;z-index:0}
.cta-bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%;filter:saturate(.62) brightness(.6) sepia(.1) blur(2.5px);transform:scale(1.06)}
.cta::after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse 78% 90% at 50% 44%,rgba(24,11,4,.62) 0%,rgba(24,11,4,.93) 100%),linear-gradient(0deg,rgba(24,11,4,.88) 0%,rgba(24,11,4,.52) 48%,rgba(24,11,4,.84) 100%)}
.cta-in{position:relative;z-index:2;text-shadow:0 2px 20px rgba(24,11,4,.6)}
.cta .lead{color:var(--di1);font-size:clamp(42px,5.4vw,82px)}
.cta .lead em{color:var(--terra-2)}
.cta-sub{margin:26px auto 0;max-width:46ch;color:var(--di2);font-size:15px;line-height:1.95}
.cta-price{margin-top:20px;font-family:var(--serif);font-size:clamp(52px,7vw,86px);color:var(--di1);line-height:1}
.cta-fine{margin-top:14px;font-family:var(--serif);font-style:italic;font-size:17px;color:var(--di3);margin-bottom:34px}

footer{background:var(--esp);border-top:1px solid var(--dline);padding:44px var(--pad) 80px;text-align:center;color:var(--di4)}
footer .brand{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--di2);display:inline-block;margin-bottom:10px}
.foot-tag{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--di3);margin:0 0 4px}
.foot-links{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 22px;margin:22px auto 20px;max-width:640px}
.foot-links a{font-family:var(--sans);font-size:11px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--di3);text-decoration:none;transition:color .35s var(--e)}
.foot-links a:hover{color:var(--di1)}
.foot-copy{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--di4);margin:0 auto}
.foot-disc{font-size:11px;line-height:1.7;color:var(--di4);max-width:820px;margin:16px auto 0;font-family:var(--sans)}

/* waitlist form (in the CTA section) */
.kh-form{max-width:440px;margin:32px auto 0;text-align:left}
.kh-form .fst{display:flex;flex-direction:column;gap:14px}
.kh-form label.fl{display:block;font-size:11px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--di3);margin-bottom:7px}
.kh-form input.fi{width:100%;padding:14px 16px;background:rgba(24,11,4,.55);border:1px solid rgba(240,230,214,.2);border-radius:var(--r-sm);color:var(--di1);font-family:var(--sans);font-weight:300;font-size:15px;outline:none;transition:border-color .25s}
.kh-form input.fi::placeholder{color:var(--di4)}
.kh-form input.fi:focus{border-color:var(--terra-2)}
.kh-form .fbtn{width:100%;margin-top:16px;padding:16px;background:var(--terra-btn);color:var(--ivory);border:none;border-radius:var(--r-pill);font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background .45s var(--e),transform .45s var(--e),box-shadow .45s var(--e)}
.kh-form .fbtn:hover{background:var(--terra-2);transform:translateY(-1px)}
.kh-form .fbtn:disabled{opacity:.6;cursor:default;transform:none}
.kh-form .ferr{display:none;color:#e79a82;font-size:11.5px;margin-top:5px}
.kh-form .ferrbanner{display:none;color:#e79a82;font-size:12px;text-align:center;margin-top:10px}
.kh-form .fmic{margin-top:18px;font-size:11.5px;line-height:1.72;color:var(--di4);text-align:center;max-width:52ch;margin-left:auto;margin-right:auto}
.kh-form .fsuc{display:none;text-align:center;padding:10px 0}
.kh-form .fsuc-h{font-family:var(--serif);font-style:italic;font-size:1.7rem;color:var(--di1)}
.kh-form .fsuc-b{color:var(--di2);font-size:14px;line-height:1.7;margin-top:8px}

/* sticky CTA (appears on scroll) */
/* One call to action on screen at a time. The hero owns it on load; this bar
   takes over only once the hero has scrolled away, and steps aside again at
   the sign-up section. */
.sticky-cta{position:fixed;top:0;left:0;right:0;z-index:150;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:13px var(--pad);background:rgba(24,11,4,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--dline);opacity:0;transform:translateY(-100%);pointer-events:none;transition:opacity .45s var(--e),transform .55s var(--e)}
.sticky-cta .snav-brand{font-family:var(--serif);font-style:italic;font-weight:500;font-size:19px;color:var(--di1);white-space:nowrap}
.sticky-cta .snav-brand sup{font-size:.44em;vertical-align:super}
.sticky-cta .snav-cta{font-family:var(--sans);font-size:11px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--esp);background:var(--di1);padding:10px 20px;border-radius:var(--r-pill);white-space:nowrap;transition:transform .45s var(--e)}
.sticky-cta .snav-cta:hover{transform:translateY(-1px)}
.sticky-cta.show{opacity:1;transform:none;pointer-events:auto}

@media(prefers-reduced-motion:reduce){.sticky-cta{transition:opacity .35s var(--e)}}

@media(max-width:960px){
  .spread{grid-template-columns:1fr}.spread.rev .spread-fig{order:0}.spread-fig{min-height:60vh}
  .prod-grid{grid-template-columns:1fr;gap:28px}
  .supp{grid-template-columns:1fr;gap:34px}
  .pat-grid{grid-template-columns:1fr;gap:18px}
  .how-grid{grid-template-columns:1fr 1fr;gap:34px}
  .founder-grid{grid-template-columns:1fr;gap:38px}.founder .fig{max-width:420px;margin:0 auto}
  .stat-grid{grid-template-columns:1fr 1fr}.st{border-bottom:1px solid var(--line)}.st:nth-child(2){border-right:none}
  .hero-bg img{object-position:66% 18%;transform:none}
  .hero-bg::after{background:linear-gradient(90deg,var(--esp) 0%,rgba(24,11,4,.9) 30%,rgba(24,11,4,.5) 55%,rgba(24,11,4,.2) 80%,transparent 100%),linear-gradient(0deg,rgba(24,11,4,.9) 0%,rgba(24,11,4,.3) 30%,transparent 55%),linear-gradient(180deg,rgba(24,11,4,.55) 0%,transparent 20%)}
  .hero-h{max-width:18ch}
}
@media(max-width:680px){
  nav{padding:16px var(--pad)}
  nav .brand{white-space:nowrap;font-size:21px}
  nav .nl{display:none}
  nav .npill{display:none}
  /* mobile hero: photo as a clean band on top, text below on the dark ground */
  .hero{min-height:auto;padding-top:0}
  /* THE CUT-OFF HEAD. At 48vh capped to 440px the frame was so shallow that a
     landscape source cropped to her chin and eyebrows, with the nav sitting across her
     eye. Taller, and anchored to the top of the image rather than 22% down, so the
     whole head stays in frame and she is looking at the reader.
     Compared against three alternatives at 390px before choosing this one. */
  /* With the nav lifted off, the band can be shallower and framed on her eyes rather
     than fighting for the hairline that is not in the file. */
  .hero-bg{position:relative;inset:auto;width:100%;height:44vh;max-height:400px}
  .hero-bg img{object-position:50% 12%;transform:none}
  .hero{padding-top:0}
  .hero-bg::after{background:linear-gradient(180deg,rgba(24,11,4,.6) 0%,rgba(24,11,4,.12) 18%,transparent 38%),linear-gradient(0deg,var(--esp) 0%,rgba(24,11,4,.5) 10%,transparent 30%)}
  .hero-in{text-align:center;margin:0 auto;padding-top:34px}
  .hero-eyebrow,.hero-h,.hero-sub{margin-left:auto;margin-right:auto}
  .hero-acts{flex-direction:column;align-items:center;gap:16px}
  .hero-bar-in{flex-direction:column;gap:14px}
  .hbi b{font-size:22px}
  .head{text-align:center;margin-left:auto;margin-right:auto}
  .head .body,.head .lead{margin-left:auto;margin-right:auto}
  .step{text-align:center}
  .step .n{display:block}
  .how-fine{text-align:center}
  /* punch lines centered + bigger on mobile */
  .spread-txt .sig,.spread-txt .sig-tag{display:block;text-align:center;margin:22px auto 0}
  .spread-txt .sig{font-size:clamp(24px,6.5vw,30px)}
  .spread-txt .sig-tag{font-size:clamp(27px,7.4vw,36px)}
  .prod-note,.stats-out,.proof .outro{text-align:center}
}
@media(max-width:600px){.how-grid{grid-template-columns:1fr}
  .hero-h{font-size:clamp(38px,9.6vw,50px);max-width:none}
  .hero-h br{display:none}
  .lead,.hero-h,.band-q,.fq,.cta .lead,.founder .fq{overflow-wrap:break-word}

  /* MOBILE ART DIRECTION for the coffee band.
     The desktop scale+translate was tuned for a 2.04:1 band. On a portrait phone
     object-fit:cover already crops hard, so compounding it zooms into the crema
     and the terracotta lines end up sitting on the brightest part of the frame.
     Drop the transform, re-aim the crop, and switch the scrim to bottom-up since
     the text sits at the bottom here rather than on the left. */
  .band{min-height:70vh}
  .band-bg img{transform:none;object-position:58% 32%}
  .band-bg::after{background:linear-gradient(0deg,rgba(24,11,4,.96) 0%,rgba(24,11,4,.88) 30%,rgba(24,11,4,.55) 56%,rgba(24,11,4,.22) 78%,rgba(24,11,4,.12) 100%)}
  .band-q{max-width:none}

  /* Tracked uppercase labels get long fast at 375px. These two were wrapping to
     two lines, which reads as an accident rather than a line break. */
  .supp .supp-txt p.supp-price{font-size:10.5px;letter-spacing:.14em}
  .audit-h{letter-spacing:.14em}

  /* Text-link CTA was a 27px tap target. Padding it out to ~44px without moving
     the underline, which is drawn on the ::before/::after at the text baseline. */
  .tlink{padding-top:9px;padding-bottom:16px}
  .tlink::before,.tlink::after{bottom:9px}
  /* This sentence cannot be one line at 375px, so let it wrap at a calmer size. */
  .how-fine{max-width:30ch;font-size:20px}
  /* Was tuned for the old floating pill. With top:0 on the base rule a leftover
     bottom:14px would have stretched the bar down the whole screen. */
  .sticky-cta{padding:11px 16px;gap:12px}
  .sticky-cta .snav-brand{font-size:16px}
  .sticky-cta .snav-cta{font-size:10px;letter-spacing:.12em;padding:13px 16px}
  .report-hero .rn,.us .unum{font-size:3rem}
  /* At 375px the three range labels ran into each other. The middle one takes
     its own centred line instead of fighting the two ends for space. */
  .rbar-labs{flex-wrap:wrap;gap:6px 14px;font-size:9.5px}
  .rbar-labs em{order:3;width:100%;text-align:center}
  .rstat{align-items:flex-start}
  .rstat::before{flex:0 0 auto;margin-top:9px}
}

/* ── PREMIUM UPLIFT (2026-08-20) ─────────────────────────────────────────
   Refinement layer only. Nothing here introduces a new visual language:
   it puts the existing brand curve (--e) and the existing rules on a
   system, and repairs two places where type sat on unprotected photography. */

/* The underline that draws itself. Replaces a flat border with a faint
   resting rule plus a wipe on the brand easing curve. */
.tlink{position:relative;border-bottom:0}
.tlink::before,.tlink::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor}
.tlink::before{opacity:.34}
.tlink::after{transform:scaleX(0);transform-origin:left;transition:transform .55s var(--e)}
.tlink:hover::after,.tlink:focus-visible::after{transform:scaleX(1)}

/* Marker cards: the illustration is the brand asset, so let it respond. */
.bm{transition:transform .5s var(--e),border-color .5s var(--e)}

/* Stats: on the two-column mobile grid the hairline is separation, not a table. */
@media(max-width:900px){
  .st{border-bottom:1px solid var(--line-2);padding-bottom:30px}
}

/* Motion is a refinement, never a requirement. */
@media(prefers-reduced-motion:reduce){
  .tlink::after{transition:none;transform:scaleX(1)}
  .bm,.pill{transition:none}
  .bm:hover,.pill:hover{transform:none}
}

/* ── FINAL PASS ──────────────────────────────────────────────────────────
   Five details that carry most of the remaining perceived-quality gap. */

/* 1. Let the browser set the rag. Kills orphans like "right away." sitting
      alone on the last line of the centred CTA paragraph. */
h1,h2,h3,.lead,.hero-h,.band-q,.cta .lead,.step h3,.st .n{text-wrap:balance}
.body,.cta-sub,.st p,.step p,.founder .fb p,.faq-a p,.hero-sub,.fmic{text-wrap:pretty}
.cta-sub{max-width:42ch}

/* 2. A real focus ring. There was none anywhere on the page, which is both a
      WCAG 2.1 AA gap and the kind of thing that reads as unfinished. */
a:focus-visible,button:focus-visible,input:focus-visible,
[tabindex]:focus-visible,summary:focus-visible{
  outline:2px solid var(--terra-2);outline-offset:3px;border-radius:var(--r-sm)}
.pill:focus-visible{outline-offset:4px}

/* 3. Entrance motion, tightened. 1.1s with a .54s tail meant the last stat
      landed 1.64s after it came into view, which reads hesitant. Same
      gesture, more confident: shorter travel, shorter tail. */
.fade{transform:translateY(16px);transition:opacity .85s var(--e),transform .85s var(--e)}
.d1{transition-delay:.06s}
.d2{transition-delay:.14s}
.d3{transition-delay:.24s}
.d4{transition-delay:.34s}

/* 4. Selection in the brand's own colour. */
::selection{background:var(--terra);color:var(--ivory)}

/* 5. Figures behave like figures: lining, evenly spaced, no oldstyle drop. */
.st .n,.cta-price,.rn{font-variant-numeric:lining-nums tabular-nums}

@media(prefers-reduced-motion:reduce){
  .fade{transition:none;transform:none;opacity:1}
}


/* ══ KASCADE 1.1 ═══════════════════════════════════════════════════════════
   Navigation, interior page headers, and the small polish items. Everything
   here reuses the existing type, colour and spacing language. No new system. */

/* ── navigation ───────────────────────────────────────────────────────────*/
nav .nr{display:flex;align-items:center;gap:clamp(16px,2vw,30px);flex-wrap:wrap}
nav .nl{font-family:var(--sans);font-weight:300;font-size:14px;letter-spacing:.01em;
  color:var(--di3);white-space:nowrap;transition:color .35s var(--e)}
nav .nl:hover{color:var(--di1)}
nav .nl.guide{color:var(--terra-2)}
nav .npill{font-family:var(--sans);font-weight:400;font-size:13px;letter-spacing:.02em;
  text-transform:none;color:var(--ivory);background:var(--terra-btn);
  padding:13px 26px;border-radius:var(--r-pill);white-space:nowrap;
  transition:background .4s var(--e),transform .4s var(--e)}
nav .npill:hover{background:var(--terra-2);transform:translateY(-1px)}

/* interior pages carry the same bar on the page's own ground */
nav.pagenav{position:relative;background:var(--esp);padding:26px var(--pad)}
nav.pagenav .brand{color:var(--di1)}

/* ── interior page header. same voice as a homepage section head. ─────────*/
.phead{background:var(--esp);padding:clamp(56px,8vh,96px) 0 clamp(64px,9vh,104px)}
.phead .wrap{max-width:var(--mx);margin:0 auto;padding:0 var(--pad)}
.phead h1{font-family:var(--serif);font-weight:300;
  font-size:clamp(38px,5.4vw,86px);line-height:1.02;letter-spacing:-.03em;
  color:var(--di1);max-width:16ch}
.phead h1 em{font-style:italic;color:var(--terra-2)}
.phead p{margin-top:clamp(18px,2.4vh,28px);max-width:52ch;
  font-family:var(--serif);font-size:clamp(18px,1.4vw,22px);line-height:1.6;
  color:var(--di2)}

/* ══ THE SAMPLE REPORT ═════════════════════════════════════════════════════
   These are wide, short components, so they need the full measure to stay
   legible: pairing them or setting them beside copy would shrink them back to
   unreadable. Composition comes from ground, scale and one overlap instead.
   No frames, no rules, no captions: the ground change is the only separator. */

.rp-open{background:var(--esp);padding:clamp(52px,7.5vh,92px) 0 clamp(120px,17vh,230px)}
.rp-open .wrap{max-width:var(--mx);margin:0 auto;padding:0 var(--pad)}
.rp-open h1{font-family:var(--serif);font-weight:300;font-size:clamp(36px,5vw,78px);
  line-height:1.02;letter-spacing:-.03em;color:var(--di1)}
.rp-open h1 em{font-style:italic;color:var(--terra-2)}
.rp-open p{margin-top:clamp(18px,2.4vh,26px);max-width:54ch;font-family:var(--serif);
  font-size:clamp(18px,1.4vw,22px);line-height:1.58;color:var(--di2)}

/* the contents view rides the seam between the two grounds. one accent, once. */
.rp-seam{background:#F1EADF;padding:0 0 clamp(52px,7vh,92px)}
.rp-lift{max-width:1180px;margin:0 auto;padding:0 var(--pad);
  transform:translateY(clamp(-190px,-14vh,-100px));margin-bottom:clamp(-190px,-14vh,-100px)}
.rp-lift img{width:100%;display:block;box-shadow:var(--sh-lift)}

.rp-light{background:#F1EADF;padding:clamp(46px,6.5vh,80px) 0 clamp(58px,8vh,104px)}
.rp-dark{background:var(--esp);padding:clamp(58px,8vh,110px) 0}
.rp-w{max-width:1180px;margin:0 auto;padding:0 var(--pad)}
/* the quieter beats change scale, not their left edge: one column down the
   whole page, so nothing reads as accidentally indented. */
.rp-w.narrow .rp-shot{max-width:82%}
@media(max-width:680px){.rp-w.narrow .rp-shot{max-width:100%}}

.rp-say{margin:0 0 clamp(20px,2.8vh,32px);max-width:820px}
.rp-say h2{font-family:var(--serif);font-weight:300;
  font-size:clamp(27px,3.1vw,46px);line-height:1.08;letter-spacing:-.026em;color:var(--ink)}
.rp-say h2 em{font-style:italic;color:var(--terra)}
.rp-say p{margin-top:clamp(11px,1.5vh,16px);font-family:var(--sans);font-weight:300;
  font-size:15.5px;line-height:1.64;color:var(--soft);max-width:60ch}
.rp-dark .rp-say h2{color:var(--di1)}
.rp-dark .rp-say h2 em{color:var(--terra-2)}
.rp-dark .rp-say p{color:var(--di2)}
.rp-quiet{margin-top:clamp(44px,6vh,80px)}
.rp-quiet .rp-say h2{font-size:clamp(22px,2.2vw,32px)}

.rp-shot{margin:0}
.rp-shot img{width:100%;display:block}
.rp-dark .rp-shot img{box-shadow:var(--sh-lift)}

@media(max-width:680px){
  .rp-open{padding-bottom:clamp(70px,10vh,120px)}
  .rp-lift{transform:translateY(-60px);margin-bottom:-60px}
}

/* running text in two columns. type only, no rules, no boxes. */
.twocol{margin-top:clamp(24px,3.2vh,36px);columns:2;column-gap:clamp(34px,4.5vw,72px)}
.twocol p{margin:0 0 1.05em;break-inside:avoid;font-family:var(--sans);font-weight:300;
  font-size:16px;line-height:1.68;color:var(--soft)}
@media(max-width:760px){.twocol{columns:1}}

/* the two closing lines were set as body copy and were carrying an argument.
   they get display scale so they land. */
.stats-out{font-family:var(--serif)!important;font-weight:300!important;
  font-size:clamp(19px,2.34vw,34px)!important;line-height:1.2!important;
  letter-spacing:-.022em!important;color:var(--ink)!important;
  max-width:none!important;margin-left:auto!important;margin-right:auto!important;
  text-align:center!important;white-space:nowrap!important}
.stats-out em{font-style:italic;color:var(--terra)}
.prod-note{font-family:var(--serif)!important;font-weight:300!important;
  font-size:clamp(19px,2.24vw,33px)!important;line-height:1.2!important;
  letter-spacing:-.022em!important;color:var(--di1)!important;
  max-width:none!important;margin-left:auto!important;margin-right:auto!important;
  text-align:center!important;white-space:nowrap!important}
.prod-note em{font-style:italic;color:var(--terra-2)}
/* the link out of that section is the main route to the sample, so it stops
   being a small italic aside */
.prod-note + p .more{font-family:var(--sans)!important;font-style:normal!important;
  font-size:13px!important;letter-spacing:.02em;color:var(--ivory)!important;
  background:var(--terra-btn);padding:15px 32px;border-radius:var(--r-pill);
  transition:background .4s var(--e),transform .4s var(--e)}
.prod-note + p .more:hover{background:var(--terra-2);transform:translateY(-1px)}
@media(max-width:1080px){
  .stats-out,.prod-note{white-space:normal!important;max-width:26ch!important;
    font-size:clamp(21px,3.4vw,30px)!important}}

.faq-ul{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.faq-ul li{position:relative;padding-left:22px;font-family:var(--sans);font-weight:300;
  font-size:16.5px;line-height:1.6;color:var(--soft)}
.faq-ul li::before{content:"";position:absolute;left:2px;top:.66em;width:6px;height:6px;
  border-radius:50%;background:var(--terra)}
.faq-a-in .faq-ul + p{margin-top:16px}

/* the founder caption sits centred under her photograph */
.founder .fig figcaption{text-align:center;border-top:0;padding-top:18px}

/* the founder caption was set at caption scale. it carries her name. */
.founder .fig figcaption{font-size:clamp(19px,1.6vw,24px);line-height:1.32;color:var(--di1)}
.founder .fig figcaption b{font-size:11px;letter-spacing:.24em;color:var(--terra-2);margin-bottom:10px}
.founder .fig figcaption span{display:block;margin-top:6px;font-family:var(--sans);
  font-weight:300;font-size:14.5px;letter-spacing:.01em;color:var(--di3)}

/* ── the free guide. one screen, one job, nothing else to click. ─────────*/
.gtop{background:var(--esp);padding:clamp(46px,6.5vh,88px) 0 clamp(56px,8vh,104px)}
.gtop-in{max-width:1180px;margin:0 auto;padding:0 var(--pad);display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr);gap:clamp(36px,5vw,86px);align-items:start}
.gtop h1{font-family:var(--serif);font-weight:300;font-size:clamp(38px,5vw,76px);
  line-height:1.02;letter-spacing:-.03em;color:var(--di1);max-width:13ch}
.gtop h1 em{font-style:italic;color:var(--terra-2)}
.gsay > p{margin-top:clamp(18px,2.4vh,28px);max-width:48ch;
  font-family:var(--serif);font-weight:300;font-size:clamp(18px,1.5vw,24px);
  line-height:1.5;color:var(--di2)}
.glist{margin:clamp(26px,3.6vh,40px) 0 0;list-style:none;display:grid;gap:clamp(11px,1.5vh,16px)}
.glist li{position:relative;padding-left:26px;font-family:var(--sans);font-weight:300;
  font-size:16px;line-height:1.55;color:var(--di3);max-width:52ch}
.glist li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;
  border-radius:50%;background:var(--terra-2)}
.gform{background:var(--cream);border-radius:var(--r-card);
  padding:clamp(26px,3.4vw,42px);box-shadow:var(--sh-lift)}
.gform-h{font-family:var(--serif);font-weight:300;font-size:clamp(22px,2vw,30px);
  line-height:1.1;color:var(--ink);margin-bottom:clamp(16px,2.2vh,24px)}
.gmeta{margin-top:clamp(18px,2.4vh,26px);font-family:var(--sans);font-weight:300;
  font-size:13px;line-height:1.6;color:var(--faint)}
@media(max-width:860px){.gtop-in{grid-template-columns:1fr;gap:clamp(30px,5vh,46px)}
  .gtop h1{max-width:none}}
/* ── small polish, as asked ───────────────────────────────────────────────*/
.body,.st p,.step p,.faq-a p,.founder .fb p,.pc-b p,.report-body p{font-size:16.5px}
.pill{font-size:13px;padding:18px 38px}
.pill.lg{font-size:14px;padding:20px 46px}
.prod-note{max-width:none}          /* let the punch line use the width it has */
.stats-out{max-width:none}
.faq-a p{max-width:66ch}

/* the link that hands a section over to its own page */
.more{display:inline-block;margin-top:clamp(22px,3vh,32px);
  font-family:var(--serif);font-style:italic;font-size:clamp(18px,1.4vw,21px);
  color:var(--terra);transition:color .35s var(--e)}
.more:hover{color:var(--terra-ink)}
.more.on-dark{color:var(--terra-2)}
.more.on-dark:hover{color:var(--di1)}


/* the sign-up form was styled for the dark call-to-action band. on a light
   page it needs the light-ground equivalent, same shapes, readable ink. */
.gform .kh-form label.fl{color:var(--faint)}
.gform .kh-form input.fi{background:#FFFDF9;border:1px solid rgba(124,104,82,.32);color:var(--ink)}
.gform .kh-form input.fi::placeholder{color:rgba(124,104,82,.62)}
.gform .kh-form input.fi:focus{border-color:var(--terra)}
.gform .kh-form .fmic{color:var(--faint);text-align:left;margin-left:0;font-size:12.5px}
.gform .kh-form .fsuc-h{color:var(--ink)}
.gform .kh-form .fsuc-b{color:var(--soft)}
.gform .kh-form .ferr,.gform .kh-form .ferrbanner{color:var(--terra-ink)}


/* ── page openings vary by page, so no two interior pages start the same way ─*/
/* the product page opens on the artifact, headline beside it */
.popen{background:var(--esp);padding:clamp(48px,7vh,84px) 0 clamp(56px,8vh,96px)}
.popen .wrap{max-width:var(--mx);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(34px,5vw,80px);align-items:center}
.popen h1{font-family:var(--serif);font-weight:300;font-size:clamp(34px,4.6vw,72px);
  line-height:1.02;letter-spacing:-.03em;color:var(--di1)}
.popen h1 em{font-style:italic;color:var(--terra-2)}
.popen p{margin-top:clamp(16px,2.2vh,26px);max-width:44ch;font-family:var(--serif);
  font-size:clamp(17px,1.35vw,21px);line-height:1.6;color:var(--di2)}
/* the questions page opens quietly, on the page's own ground, no dark slab */
.pquiet{background:var(--cream);padding:clamp(64px,9vh,110px) 0 clamp(18px,3vh,32px)}
.pquiet .wrap{max-width:var(--mx);margin:0 auto;padding:0 var(--pad)}
.pquiet{text-align:center}
.pquiet h1{font-family:var(--serif);font-weight:300;font-size:clamp(27px,3.5vw,54px);
  line-height:1.06;letter-spacing:-.026em;color:var(--ink);max-width:none;white-space:nowrap}
@media(max-width:640px){.pquiet h1{white-space:normal;font-size:clamp(26px,7vw,38px)}}
.pquiet h1 em{font-style:italic;color:var(--terra)}
/* a closing line that is not a poster */
.closeline{padding:clamp(60px,9vh,110px) 0;background:var(--cream-2)}
.closeline .wrap{max-width:var(--mx);margin:0 auto;padding:0 var(--pad)}
.closeline p{font-family:var(--serif);font-weight:300;font-size:clamp(26px,3vw,44px);
  line-height:1.1;letter-spacing:-.026em;color:var(--ink);max-width:22ch}
.closeline p em{font-style:italic;color:var(--terra)}
.closeline .pill{margin-top:clamp(24px,3.2vh,36px)}
@media(max-width:860px){.popen .wrap{grid-template-columns:1fr;gap:clamp(26px,4vw,40px)}}

@media(max-width:860px){
  nav .nr{gap:12px}
  nav .nl{font-size:13px}
}
/* the approved sheet hid every nav link under 680px, which was harmless when
   the bar held nothing but the wordmark. now it would leave a phone with no
   way off the page, so the links come back as a wrapped second row. */
@media(max-width:680px){
  nav{flex-wrap:wrap;gap:12px;padding:18px var(--pad) 20px}
  nav .nr{width:100%;justify-content:flex-start;gap:11px 15px}
  nav .nl{display:inline;font-size:13px}
  nav .npill{display:inline-block;font-size:12px;padding:11px 20px;margin-left:2px}
  .phead h1{max-width:none}
}

/* ── the threshold provenance block. a two-column definition list, because the
      argument IS the three labels: naming them is more convincing than a
      paragraph claiming they exist. no cards, no boxes. ──────────────────── */
.prov{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px,4.5vw,72px);align-items:start}
.prov dl{margin:0;display:grid;gap:clamp(20px,2.8vh,30px)}
.prov dt{font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(20px,1.7vw,25px);color:var(--terra);line-height:1.2}
.prov dd{margin:7px 0 0;font-family:var(--sans);font-weight:300;font-size:15.5px;
  line-height:1.62;color:var(--soft);max-width:44ch}
@media(max-width:860px){.prov{grid-template-columns:1fr;gap:clamp(26px,4vh,38px)}}

/* the questions page opens on the same ground as the questions, so the header
   is the top of one page rather than a strip laid over another. */
.pquiet + .sec.faq{padding-top:clamp(20px,3vh,34px)}
.faq{background:var(--cream)}
/* the heading shares the questions' left edge, so the page has one column */
.pquiet .wrap{max-width:calc(860px + var(--pad) * 2)}
.closeline .wrap{max-width:calc(860px + var(--pad) * 2)}

/* the guide list was running past a comfortable measure at this size */
.glist li{max-width:66ch}
.gform .kh-form{margin-left:0}
.gform .kh-form form,.gform .kh-form .fsuc{margin-left:0;text-align:left}

/* ── 2026-09-01: the sweep ─────────────────────────────────────────────────
   Walked every page in the browser and listed every element still painting a
   rail or a full-width hairline. 32 hairlines and 3 uppercase pills survived
   the earlier passes, including a teal rule between sections that nobody had
   asked for. Separation is space and ground from here, not lines. */
footer,.hero-bar,.mq,.sticky-cta,.stat-grid,.faq-list,
.sec,.cta,.faq-item{border-top:0 !important;border-bottom:0 !important}
/* the questions still need to read as a list, so they get rhythm not rules */
.faq-item{padding-top:clamp(6px,1vh,12px);padding-bottom:clamp(6px,1vh,12px)}
.faq-item + .faq-item{margin-top:clamp(4px,.8vh,10px)}
.faq-q{padding-top:clamp(17px,2.2vh,24px) !important;padding-bottom:clamp(17px,2.2vh,24px) !important}

/* the page buttons were uppercase while the nav pill next to them was sentence
   case: two button voices on one screen. one voice, and it is not shouting. */
.pill,.pill.lg,.fbtn,.snav-cta{text-transform:none !important;letter-spacing:.02em !important;
  font-size:13px !important}
.pill.lg{font-size:14px !important}

/* ── THE WORDMARK ─────────────────────────────────────────────────────────
   It was reading cheap for three reasons, none of them the letterforms.

   1. There were two of them. The site nav set it in Cormorant italic 500 in
      ivory; the paid funnel set it in italic 300 in terracotta. Same journey,
      two wordmarks, and the thin terracotta one is the weak one.
   2. The trademark used vertical-align:super, which is the browser's crude
      default. It rides too high, sits too close to the h, and at 9px it fills
      in and turns to a smudge. It is now positioned by hand, given air, and
      set at a size where the R and the M still read.
   3. Cormorant italic leans, so the space after the final letter is optically
      tighter than the space before the first. A little tracking and a small
      left margin on the mark put it back in balance.
   One wordmark, one weight, sized to be read rather than noticed. */
nav .brand,footer .brand{
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:26px;line-height:1;letter-spacing:.012em;color:var(--di1);
  -webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}
nav .brand sup,footer .brand sup{
  font-style:normal;font-weight:400;font-size:.38em;
  vertical-align:baseline;position:relative;top:-.82em;
  margin-left:.14em;letter-spacing:.04em;opacity:.55}
footer .brand{font-size:24px;color:var(--di1);opacity:.92}
@media(max-width:680px){nav .brand{font-size:22px}}

/* ── two findings from the ground-inversion audit that hold up on measurement,
      independent of whether the site ever goes dark ───────────────────────
   1. --teal is #2b7568, which measures 4.19:1 on linen and fails AA. The brand
      guide's own teal, #1F6B58, measures 4.89 and passes. The site had drifted
      off its own colour, in the direction that fails.
   2. .foot-disc is the primary medical disclaimer, and it was set at 11px in
      --di4, the quietest token on the site. It passes AA at 5.34, so this is
      not a violation, but the disclaimer should not be the least legible thing
      on the page. It moves up to --di3. */
:root{--teal:#1F6B58}
.foot-disc{color:var(--di3) !important;font-size:11.5px !important;line-height:1.75 !important}

/* ══ MOBILE PASS · 2026-09-01 ═══════════════════════════════════════════════
   Every item below was measured in a real 390px render, not guessed. */

@media(max-width:680px){
  /* NAV OVER THE PHOTOGRAPH. The links crossed the hero image where it goes pale
     and measured 1.56:1, against a 4.5:1 requirement. The nav gets its own scrim so
     legibility stops depending on which part of the photo is behind it. */
  /* THE NAV COMES OFF THE PHOTOGRAPH.
     A scrim was the wrong answer twice over. The links were illegible at 1.56:1, and
     darkening the photo to fix that put a translucent slab across her face. Worse, the
     nav landed exactly where the top of her head should be, which is what made the
     crop read as a mistake rather than as a tight portrait: hero-cine.jpg is cropped
     above the hairline IN THE FILE, so no object-position can put the head back.
     On a phone the nav now sits on solid espresso above the image, the photograph is a
     clean band underneath, and nothing overlaps her. */
  nav{position:static;background:var(--esp);padding:16px var(--pad) 15px}

  /* A BALANCED HEADER, NOT TWO RAGGED ROWS.
     The five links plus the pill wrapped into two left-aligned rows of different
     lengths, with the pill stranded beside one orphaned link. The pill now sits on the
     brand row where it belongs (the two most important things, one at each end), and
     the links form a single centred row beneath.
     "How it works" is dropped on phones only: it is an anchor to a section of THIS
     page, so on mobile she reaches it by scrolling, and removing it is what lets the
     rest fit on one line instead of wrapping. It stays in the footer. */
  /* A BALANCED HEADER, NOT TWO RAGGED ROWS.
     The five links plus the pill wrapped into two left-aligned rows of unequal length,
     with the pill stranded beside one orphaned link.

     The pill is a CHILD of .nr in the markup, so it cannot be lifted onto the brand row
     with flex order alone; an attempt at that with nowrap produced one row too wide for
     the screen, clipped at both ends. Everything centres instead: brand on its own line,
     then the links and the pill centred beneath it, wrapping naturally.

     "How it works" is hidden on phones only. It is an anchor to a section of THIS page,
     so on mobile she reaches it by scrolling, and dropping it is what lets the remaining
     links sit on one line. It stays in the footer and on desktop. */
  nav{flex-direction:column;align-items:center;gap:12px}
  nav .brand{text-align:center}
  nav .nr{width:100%;display:flex;flex-wrap:wrap;justify-content:center;
    align-items:center;gap:10px clamp(12px,3.4vw,20px)}
  nav .nl[href="/#how"]{display:none}
  /* TAP TARGETS, MEASURED TWICE.
     First attempt gave 39px-tall links with 12px between them. Both numbers were wrong:
     39 is under the 44px minimum, and a 12px gap between two targets means a thumb
     roughly 45px across covers the edge of one while aiming at the other. FAQ was the
     worst of them at 28px wide.
     Now: 46px tall, 10px of padding on each side so even FAQ is a 48px-wide target, and
     space-between so the remaining room becomes gap rather than being spent anywhere
     else. Type drops to 13px, which is what buys the padding without wrapping. */
  nav .nl{font-size:13px;padding:13px 10px;line-height:1.35;border-radius:6px}
  nav .nl:active{background:rgba(237,224,204,.08)}
  nav .nr{gap:2px 0;justify-content:space-between;padding:0 2px}
  /* NO PURCHASE PILL IN THE MOBILE HEADER. She has just arrived and has not been told
     what this is yet, so a Get your report button above the fold asks for the decision
     before the argument. It is also the widest thing in the header and the easiest to
     hit by accident while reaching for a nav link. The hero CTA is one screen down and
     the sticky bar brings it back once she has read something. */
  nav .npill{display:none}

  /* TOUCH TARGETS. The links were 23px tall, about half the 44px minimum, and the
     nav ate 150px of an 844px viewport across three rows. */
  /* superseded: the 46px targets with 10px side padding are set above. This line was
     an earlier, smaller attempt and, being later in the file, was silently winning. */

  /* A COMMON LEFT EDGE. The editorial spreads stepped in 12px from the page rail,
     so two adjacent sections did not line up down the left. */
  .spread-txt{padding-left:var(--pad);padding-right:var(--pad)}

  /* THE DROP CAP POCKET. The float reserved three lines and the letter filled two,
     leaving an empty notch under the R. The letter does not change size; the box it
     floats in comes below the two-line threshold. */
  .dropcap::first-letter{line-height:.66;padding:0 14px 0 0}
}

@media(max-width:760px){
  /* THE SAMPLE PLATE ON THE HOMEPAGE. It scaled a full-width report image down until
     its body text rendered at about 8.7px, which is below the 13px floor the type
     system sets and below what sample-report.html refuses to do with the same asset.
     It scrolls sideways instead, at a size that can actually be read. */
  /* SIZED DOWN, NOT SCROLLED. This was min-width:660px in a 346px column, so the
     sample plate hung 314px past the right edge and read as cut off. The earlier
     reasoning was that scaling it down put the report's body text below the legible
     floor, which is true, but a plate that looks broken is worse than a plate that
     looks small: the homepage only has to show her the SHAPE of a report. The real
     thing is one tap away on /sample-report, which fits and opens full screen. */
  .prod-grid .report{overflow:hidden !important}
  .prod-grid .report img{min-width:0;width:100%;max-width:100%;height:auto}
}

/* THE STAT CITATIONS. Cells were aligned but their sources floated to wherever the
   text above happened to end, drifting 28px in both directions across a row. Pinned
   to the bottom so the row reads as a row. */
.st{display:flex;flex-direction:column}
.st cite{margin-top:auto;padding-top:18px}

/* FOUR SQUARES, NOT A STACK. Collapsing these to one column made each stat a
   full-width paragraph and lost the shape of the set: four facts that belong together
   and are read as a group. They go back to a 2x2 grid of bordered cells, centred, with
   the number sized down so a two-column measure still reads. */
@media(max-width:680px){
  /* INTERNAL DIVIDERS ONLY, NO OUTER FRAME.
     The first version drew a border down the LEFT of the grid and along the right of
     the left-hand cells, but nothing on the top, right or bottom. The result was one
     stray vertical line hanging off the left edge with no box to belong to.
     A cross, not a frame: one line between the columns, one between the rows, and
     nothing around the outside. It matches the desktop treatment, which is also a
     single rule and no box. */
  .stat-grid{grid-template-columns:1fr 1fr;gap:0;
    border-top:1px solid var(--line);border-left:0;border-right:0;border-bottom:0}
  .st{border:0;padding:26px 14px 24px;text-align:center;align-items:center}
  .st:nth-child(odd){border-right:1px solid var(--line)}
  .st:nth-child(1),.st:nth-child(2){border-bottom:1px solid var(--line)}
  .st .n{font-size:42px}
  .st p{max-width:none;font-size:14px;line-height:1.6;margin-top:12px}
  .st cite{font-size:10px;padding-top:12px}
}

/* THE FOOTER DISCLAIMER. Measured, three times, because the first two attempts each
   traded one kind of ragged for another.

   It began centred at 11.5px and unreadable. Left-aligning fixed the reading and broke
   the footer, because everything above it is centred, so one left-aligned block sat
   off-axis. Centring it again at a 56ch measure gave 431px, narrower than the 640px
   links row above it, so it aligned with nothing and produced SEVEN lines whose
   longest and shortest differed by 125px. Centred text has two ragged edges, so a 29%
   spread reads as twice the mess it would left-aligned.

   Measured across five treatments. 720px with balanced wrapping wins outright:
     640px, no balance    5 lines, 59% spread
     640px, balanced      5 lines, 11%
     720px, balanced      4 lines,  7%   <- this
     640px, left-aligned  5 lines, 59%
     560px, balanced      6 lines, 10%

   `text-wrap:pretty` is declared first as the fallback: a browser too old for balance
   keeps pretty, which at least prevents the orphaned last line that made the 59% case
   look worst. */
.foot-disc{
  text-align:center;
  font-size:12.5px !important;
  line-height:1.8 !important;
  max-width:720px;
  margin-left:auto;margin-right:auto;
  text-wrap:pretty;
  text-wrap:balance}
@media(max-width:680px){
  /* Centred here too. Left-aligning it was a legibility argument that lost to a
     consistency one: everything else in this footer is centred, so one left-aligned
     block reads as a mistake no matter how well it wraps. Balanced wrapping keeps the
     lines even enough that centring holds. */
  .foot-disc{text-align:center;max-width:none;font-size:12px !important;
    line-height:1.78 !important;padding:0 4px}
}

/* THE FOOTER, EVENLY SPACED.
   The wordmark, tagline, links and small print were each carrying their own margins,
   so the gaps between them were four different sizes and the tagline sat closer to the
   links than to the wordmark it belongs with. One rhythm, set by the layout rather
   than by each element, and everything on the same centre line. */
footer .foot-cols,
footer .foot-copy,
footer .foot-disc,
footer .brand{text-align:center}
footer .brand{display:block;margin-left:auto;margin-right:auto}
@media(max-width:680px){
  footer{padding-left:var(--pad);padding-right:var(--pad)}
  footer .foot-cols{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 18px}
  footer .foot-copy{margin-top:18px}
  /* The tagline sat a long way from the links beneath it, so the wordmark and its
     tagline read as one orphaned block with a hole under it. One rhythm: the tagline
     belongs to the wordmark above it, and the links start a new group. */
  footer .foot-tag{margin-top:8px;margin-bottom:26px}
  footer .foot-links{margin-top:0}
  footer .foot-disc{margin-top:20px}
}

/* THE FAQ TOGGLE. The + sat 13px higher on two-line questions than on one-line ones,
   so the icon column read ragged down the page. */
.faq-q{align-items:center}
.faq-i{margin-top:0}

/* The address sits on the same line as the invitation now, and without the arrow.
   An arrow points somewhere; an email address is the destination, so the arrow was
   asking her to travel to a thing already in front of her. Sized to sit with the
   sentence rather than under it as a separate call to action. */
.closeline-mail{
  color:var(--terra);text-decoration:none;
  border-bottom:1px solid rgba(191,96,64,.32);
  padding-bottom:1px;
  transition:border-color .18s ease-out,color .18s ease-out;
  white-space:nowrap}
.closeline-mail:hover{color:var(--terra-2,#C06040);border-bottom-color:rgba(191,96,64,.75)}
@media(max-width:560px){
  /* At this width the sentence plus the address is two lines anyway, so the address
     is allowed to break onto its own rather than force a horizontal scroll. */
  .closeline-mail{white-space:normal}
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOUNDER PAGE, PHONE WIDTHS — 2026-09-01
   The column read as a zigzag: her name block centred, the headline and three
   paragraphs hard left, then the button centred again. Three different axes in
   one short column, which is what "not centred" actually described.

   The body is real prose, so left is correct there and centring it would hurt
   reading. The fix is therefore to bring the other two into line with the body
   rather than the reverse, giving the whole column one confident left edge.

   Desktop is untouched: there the photograph sits in its own narrow column and
   a centred caption beneath it reads as a unit, which is why it was written
   that way in the first place.
   ═══════════════════════════════════════════════════════════════════════ */
@media(max-width:760px){
  .founder .fig{max-width:none;margin:0}
  .founder .fig figcaption{text-align:left;padding-top:16px}
  .founder .fq{margin-top:34px}
  /* the inline text-align:center on the CTA paragraph is why this needs the
     extra weight. the button becomes full width, which removes the alignment
     question entirely and reads more deliberate on a phone than a small pill
     floating in the middle of the measure. */
  .founder .fb + p[style*="text-align:center"]{text-align:left !important}
  .founder .fb + p[style*="text-align:center"] .pill{
    display:flex;align-items:center;justify-content:center;
    width:100%;box-sizing:border-box;
  }
}