:root{
  --paper:#F7F3EC;
  --paper-2:#EFE8DC;
  --card:#FFFDF9;
  --ink:#1F1B16;
  --ink-2:#4A423A;
  --ink-3:#7A7067;
  --clay:#8C3A1E;
  --clay-lo:#B4552F;
  --line:rgba(31,27,22,.14);
  --line-2:rgba(31,27,22,.08);
  --maxw:1140px;
  --serif:Fraunces,Georgia,"Times New Roman",serif;
  --sans:"Source Sans 3",system-ui,-apple-system,Segoe UI,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.015em;margin:0}
p{margin:0}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.sec{padding:92px 0}
.sec.tight{padding:64px 0}
.band{background:var(--paper-2)}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--clay);margin:0 0 16px}
h2{font-size:clamp(30px,4vw,46px);line-height:1.1;max-width:20ch}
.lede{font-size:clamp(19px,2.1vw,22px);line-height:1.5;color:var(--ink-2);max-width:52ch}
.small{font-size:16px;color:var(--ink-3);max-width:62ch}

.btn{display:inline-flex;align-items:center;gap:12px;background:var(--clay);color:#fff;text-decoration:none;font-family:var(--sans);font-size:18px;font-weight:700;padding:18px 32px;border-radius:3px;border:0;cursor:pointer;transition:background .15s ease;white-space:nowrap}
.btn:hover{background:#73301A}
.btn.sm{font-size:15px;padding:11px 18px}

.nav{position:sticky;top:0;z-index:30;background:rgba(247,243,236,.94);backdrop-filter:blur(8px);border-bottom:1px solid transparent}
.nav.stuck{border-bottom-color:var(--line)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:16px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav-in img{height:40px;width:auto;filter:invert(1);opacity:.88}

/* ---- hero ---- */
.hero{padding:64px 0 0}
.hcols{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.hero h1{font-size:clamp(42px,6.4vw,76px);line-height:1;letter-spacing:-.025em}
.hero .lede{margin-top:22px}
.hoffer{margin:24px 0 30px;padding-left:18px;border-left:3px solid var(--clay);max-width:46ch;color:var(--ink-2);font-size:17px;line-height:1.55}
.hoffer b{color:var(--ink)}
.fine{font-size:15px;color:var(--ink-3);margin-top:14px}

.hcard{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:28px 28px 22px;box-shadow:0 1px 0 rgba(31,27,22,.04),0 18px 40px -28px rgba(31,27,22,.45)}
.hcard-top{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:4px 16px;padding-bottom:18px;border-bottom:1px solid var(--line-2)}
.hcard-lbl{grid-column:1/-1;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.hcard-num{font-family:var(--serif);font-size:52px;font-weight:600;line-height:1}
.hcard-num small{font-size:19px;color:var(--ink-3);font-weight:500}
.hcard-band{font-family:var(--serif);font-size:20px;color:var(--clay);justify-self:end}
.hcard ul{list-style:none;margin:0;padding:16px 0 0}
.hcard li{display:grid;grid-template-columns:1fr 58px 14px;align-items:center;gap:12px;padding:6px 0;font-size:14px;color:var(--ink-2)}
.hcard li.lo span,.hcard li.lo b{color:var(--clay);font-weight:700}
.hcard b{text-align:right;font-weight:600;color:var(--ink-3)}
.bar{height:7px;border-radius:2px;background:linear-gradient(to right,var(--f) 0 var(--w),rgba(31,27,22,.10) var(--w) 100%);--f:var(--ink-3);--w:0%}
.b1{--w:20%;--f:var(--clay)}
.b2{--w:40%;--f:var(--clay-lo)}
.b3{--w:60%}
.b4{--w:80%}
.hcard-foot{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line-2);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--clay)}

.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:64px}
.trust-in{max-width:var(--maxw);margin:0 auto;padding:30px 32px;display:grid;grid-template-columns:repeat(3,auto) 1fr;gap:40px;align-items:center}
.fig b{display:block;font-family:var(--serif);font-size:27px;font-weight:700;line-height:1.1}
.fig span{display:block;font-size:14px;line-height:1.35;color:var(--ink-3);margin-top:3px;max-width:19ch}
.tquote{border-left:2px solid var(--clay);padding-left:20px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.tquote cite{display:block;margin-top:6px;font-style:normal;font-size:13px;color:var(--ink-3)}

/* ---- the interviews ----
   The whole product in one picture. Two columns of real answers to
   the same question, the founder on the left and his own people on
   the right. Nothing to click, nothing to decode. */
.tr{margin-top:46px;position:relative}
.pair{display:grid;grid-template-columns:1fr 92px 1fr;align-items:stretch;margin-bottom:18px}
.qcard{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:26px 28px;display:flex;flex-direction:column;justify-content:center}
.qcard.them{border-color:rgba(140,58,30,.3);background:#FDF6F1;box-shadow:0 14px 30px -26px rgba(140,58,30,.8)}
.who{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.qcard.them .who{color:var(--clay)}
.qcard q{font-family:var(--serif);font-size:clamp(19px,2.1vw,25px);line-height:1.3;quotes:"\201C" "\201D"}
.qcard.them q{color:var(--clay)}
/* the gutter: a hairline with one mark on it, so the two sides read
   as the same question rather than two unrelated statements */
.mid{position:relative;display:flex;align-items:center;justify-content:center}
.mid::before{content:"";position:absolute;left:50%;top:-18px;bottom:-18px;width:1px;background:var(--line);transform:translateX(-.5px)}
.mid span{position:relative;width:9px;height:9px;border-radius:50%;background:var(--clay);box-shadow:0 0 0 7px var(--paper)}
.tr-note{margin-top:26px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);text-align:center}

/* One line, set large. It was a 16px grey paragraph and Whitney was
   right that nobody stops to read that. */
.stmt{margin-top:44px;font-family:var(--serif);font-size:clamp(23px,3.1vw,34px);line-height:1.25;max-width:26ch;color:var(--ink)}
.stmt em{font-style:normal;color:var(--clay)}
/* The page is long. The button repeats at each point where a reader
   has just been given a reason. */
.again{margin-top:44px}
.again .fine{margin-top:12px}
/* A centred header over a symmetric block below it. Body copy stays left
   aligned everywhere, because centred paragraphs are measurably harder to
   read; only these standalone headers and the one statement get centred. */
.mid-head{text-align:center;max-width:none}
.mid-head h2{max-width:24ch;margin:0 auto}
.mid-head .lede{margin:22px auto 0}
.stmt{text-align:center;margin-left:auto;margin-right:auto;max-width:34ch}
.again{text-align:center}

/* The fourteen days. Was a thin list at 17px that Whitney could not read.
   Four cards, day stamped, so the fortnight is legible as a shape. */
.steps{margin-top:44px;border-top:0;display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.step{display:block;padding:32px 34px;background:var(--card);border:1px solid var(--line);border-left:3px solid var(--clay);border-radius:4px}
.step .day{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--clay);margin-bottom:14px}
.step h3{font-size:clamp(21px,2.4vw,27px);margin-bottom:10px}
.step p{font-size:17px;line-height:1.55;color:var(--ink-2)}
.step.last{border-left-color:var(--ink)}
.step.last .day{color:var(--ink)}

/* The course. Outlined button, so the eye still lands on the clay one. */
.alt{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:center}
.alt-h{font-size:clamp(26px,3.2vw,36px)}
.btn.ghost{margin-top:26px;background:transparent;color:var(--clay);border:1.5px solid rgba(140,58,30,.45);font-size:16px;padding:14px 26px}
.btn.ghost:hover{background:rgba(140,58,30,.06);border-color:var(--clay)}
.mods{margin:0;padding:0 0 0 22px;list-style:decimal;color:var(--ink-2)}
.mods li{padding:9px 0;font-size:16px;border-bottom:1px solid var(--line-2)}
.mods li:last-child{border-bottom:0}
.mods::marker{color:var(--clay)}

/* Two quiet doors, side by side, after the main call to action. */
.crossroad{padding:76px 0;border-top:1px solid var(--line);background:var(--paper-2)}
.crossroad .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.door h3{font-size:clamp(22px,2.6vw,28px);margin-bottom:12px}
.door p{font-size:17px;color:var(--ink-2);max-width:42ch}
.door .btn.ghost{margin-top:22px}

/* The rail. One line, four marks. */
.rail{margin-top:56px;display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.rail::before{content:"";position:absolute;left:8px;right:8px;top:34px;height:2px;background:var(--line)}
.rail::after{content:"";position:absolute;left:8px;top:34px;height:2px;width:calc(75% - 8px);background:var(--clay);opacity:.45}
.stop{position:relative;padding-right:22px}
.stop .d{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--clay);margin-bottom:14px}
.dot{width:16px;height:16px;border-radius:50%;background:var(--paper-2);border:3px solid var(--clay);position:relative;z-index:2;margin-bottom:22px}
.stop:last-child .dot{background:var(--clay)}
.stop h3{font-size:21px;margin-bottom:8px;max-width:15ch}
.stop p{font-size:16px;color:var(--ink-2);max-width:25ch}

@media (max-width:900px){
  .crossroad{padding:52px 0}
  .crossroad .wrap{grid-template-columns:1fr;gap:38px}
  .rail{grid-template-columns:1fr;gap:26px;margin-top:40px}
  .rail::before,.rail::after{display:none}
  .stop{padding:0 0 0 34px}
  .stop .dot{position:absolute;left:0;top:26px;margin:0}
  .stop h3,.stop p{max-width:none}
}


/* The close, on ink. */
.close{background:var(--ink);color:var(--paper);padding:104px 0}
.close h2{color:#fff}
.close p{color:rgba(247,243,236,.75)}
.close .btn{background:var(--clay)}
.close .btn:hover{background:var(--clay-lo)}

@media (max-width:900px){
  .close{padding:72px 0}
}
/* The hero card cycles through sample results. Values fade, the frame
   holds still, so nothing on the page jumps. */
.hcard .swap{transition:opacity .45s ease}
.hcard.fading .swap{opacity:.18}

@media (max-width:900px){
  .steps{grid-template-columns:1fr;gap:16px}
  .step{padding:24px 22px}
  .alt{grid-template-columns:1fr;gap:30px}
  .stmt{max-width:none}
}


/* ---- the deliverable ---- */
.gets{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:40px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.gets div{padding:24px 28px 24px 0;border-right:1px solid var(--line-2)}
.gets div:last-child{border-right:0;padding-right:0}
.gets b{display:block;font-family:var(--serif);font-size:19px;font-weight:600;margin-bottom:6px}
.gets span{font-size:15px;line-height:1.45;color:var(--ink-3)}

.doc{margin-top:48px;background:var(--card);border:1px solid #D8CEBB;border-radius:4px;box-shadow:0 22px 50px -30px rgba(31,27,22,.6);overflow:hidden}
.doc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 30px;border-bottom:2px solid var(--ink)}
.doc-head b{font-family:var(--serif);font-size:17px}
.doc-head span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.doc-cols,.doc-row{display:grid;grid-template-columns:40px 1fr 300px 110px 70px;gap:18px;padding:16px 30px;align-items:start}
.doc-cols{background:var(--paper-2);border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.doc-row{border-bottom:1px solid var(--line-2);font-size:16px}
.doc-row .i{font-family:var(--serif);font-size:17px;color:var(--clay)}
.doc-row b{display:block;font-size:16px}
.doc-row .ev{font-size:14px;line-height:1.45;color:var(--ink-3);font-style:italic}
.doc-row .o,.doc-row .d{font-size:14px;color:var(--ink-3)}
.doc-foot{padding:15px 30px;background:var(--paper-2);font-size:13px;color:var(--ink-3)}

/* ---- photo band ---- */
.pband{position:relative}
.pband img{width:100%;height:min(46vh,420px);object-fit:cover;object-position:50% 40%}
.pband-tx{position:absolute;inset:0;display:flex;align-items:center;}
.pband-tx .wrap{width:100%}
.pband-tx{background:linear-gradient(90deg,rgba(31,27,22,.82) 0%,rgba(31,27,22,.55) 55%,rgba(31,27,22,.25) 100%)}
.pull{font-family:var(--serif);font-size:clamp(28px,4.4vw,52px);line-height:1.12;color:#fff;max-width:18ch;margin:0}

/* ---- bio ----
   No fixed box and no cover crop. The photograph is 3:2 and it is
   shown at 3:2. */
.bio{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
.bio img{width:100%;height:auto;border-radius:4px}
.bio p+p{margin-top:16px}
.says{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:56px}
.says blockquote{margin:0;border-left:2px solid var(--line);padding-left:18px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.says cite{display:block;margin-top:8px;font-style:normal;font-size:13px;color:var(--ink-3)}

.close{text-align:center}
.close h2{margin:0 auto 18px;max-width:none}
.close p{margin:0 auto 32px;max-width:46ch;color:var(--ink-2)}

footer{border-top:1px solid var(--line)}
.fbot{max-width:var(--maxw);margin:0 auto;padding:26px 32px;display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between;font-size:14px;color:var(--ink-3)}
.fbot a{color:var(--ink-3)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;background:var(--ink);color:#fff;padding:10px 16px;z-index:60}

.rv{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease;transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
}

@media (max-width:900px){
  body{font-size:17px}
  .wrap,.nav-in,.trust-in,.fbot{padding-left:20px;padding-right:20px}
  .sec{padding:60px 0}
  .hcols{grid-template-columns:1fr;gap:38px}
  .trust-in{grid-template-columns:1fr 1fr;gap:26px}
  .tquote{grid-column:1/-1}

  /* The pair stacks, and the clay card keeps its colour so the two
     sides are still obviously two different people. */
  .pair{grid-template-columns:1fr;margin-bottom:26px}
  .mid{height:22px}
  .mid::before{top:0;bottom:0}
  .qcard{padding:20px 22px}

  .gets{grid-template-columns:1fr}
  .gets div{padding:18px 0;border-right:0;border-bottom:1px solid var(--line-2)}
  .gets div:last-child{border-bottom:0}
  .doc-cols{display:none}
  .doc-row{grid-template-columns:32px 1fr;gap:12px;padding:16px 20px}
  .doc-row .o,.doc-row .d{display:none}
  .doc-row .ev{margin-top:4px}
  .bio{grid-template-columns:1fr;gap:30px}
  .says{grid-template-columns:1fr;gap:22px}
}

/* ============================================================
   COMPONENTS USED BY About AND Podcast ONLY.
   Ported onto the new type scale and the new spacing on
   2026-09-22, so the inner pages stop looking a version behind
   the homepage. Same tokens, same rhythm, no second palette.
   ============================================================ */

.brand{min-width:0;display:block}
.a{display:inline-block}

/* page header, used instead of the homepage hero */
.pagehead{padding:72px 0 0}
.pagehead h1{font-size:clamp(38px,5.4vw,64px);line-height:1.02;letter-spacing:-.022em;max-width:16ch}
.pagehead .lede{margin-top:24px}
.pagehead-photo{margin-top:56px}
.pagehead-photo img{width:100%;height:min(52vh,480px);object-fit:cover;object-position:50% 38%}

/* the timeline on About */
.tl{margin-top:44px;border-top:1px solid var(--line)}
.tl-row{display:grid;grid-template-columns:200px 1fr;gap:40px;padding:26px 0;border-bottom:1px solid var(--line-2);align-items:baseline}
.tl-yr{font-family:var(--serif);font-size:clamp(22px,2.6vw,30px);font-weight:600;color:var(--clay)}
.tl-row p{font-size:17px;color:var(--ink-2)}

/* two column blocks */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split.flip .fig{order:2}
.split .fig img,.withfig .fig img{width:100%;height:auto;border-radius:4px}
.split .tx p+p{margin-top:16px}
.split .tx h2{margin-bottom:20px}
.withfig{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:start}
.withfig p+p{margin-top:16px}

/* the "what founders want" list */
.wants{margin-top:38px;display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--line)}
.want{padding:24px 30px 24px 0;border-bottom:1px solid var(--line-2);font-size:19px;line-height:1.4;color:var(--ink-2)}
.want b{color:var(--ink);font-weight:600}

/* long-form passages */
.prose{max-width:66ch}
.prose p+p{margin-top:16px}
.prose h2{margin-bottom:20px}
.prose .btn{margin-top:30px}
.prose .eyebrow+h2{margin-top:0}

/* the quiet one-on-one block */
.aside{margin-top:26px;padding:38px 42px;background:var(--card);border:1px solid var(--line);border-left:3px solid var(--clay);border-radius:4px;max-width:70ch}
.aside h3{font-size:clamp(22px,2.6vw,28px);margin-bottom:14px}
.aside p+p{margin-top:14px}
.aside p{color:var(--ink-2)}
.aside .btn{margin-top:26px}

.go{color:var(--clay);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(140,58,30,.35)}
.go:hover{border-bottom-color:var(--clay)}

/* podcast */
.platforms{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.platforms .btn{font-size:15px;padding:12px 22px}
.player{margin-top:40px;min-height:200px}
.player iframe{border-radius:4px;border:1px solid var(--line)}

/* forms, and the placeholder that shows while one is not connected */
.formwrap{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:30px}
.field{margin-bottom:18px}
.field label{display:block;font-size:14px;font-weight:600;color:var(--ink-2);margin-bottom:7px}
.field input,.field textarea{width:100%;font-family:var(--sans);font-size:16px;padding:13px 14px;border:1px solid var(--line);border-radius:3px;background:var(--paper);color:var(--ink)}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field textarea:focus{outline:2px solid var(--clay);outline-offset:-1px}
.todo{background:#FDF6F1;border:1px dashed rgba(140,58,30,.4);border-radius:3px;padding:16px 18px;margin-bottom:20px;font-size:14px;color:var(--ink-2)}
.todo b{display:block;margin-bottom:4px;color:var(--clay)}
.formnote{margin-top:14px;font-size:14px;color:var(--clay)}

/* footer nav on the inner pages */
.fnav{display:flex;flex-wrap:wrap;gap:8px 18px}

@media (max-width:900px){
  .pagehead{padding:44px 0 0}
  .pagehead-photo{margin-top:34px}
  .pagehead-photo img{height:38vh}
  .tl-row{grid-template-columns:1fr;gap:6px;padding:22px 0}
  .split,.withfig{grid-template-columns:1fr;gap:32px}
  .split.flip .fig{order:0}
  .wants{grid-template-columns:1fr}
  .want{padding:20px 0}
  .aside{padding:26px 22px}
  .formwrap{padding:22px 18px}
}