/* ============================================================
   Page-level components. Loaded alongside site.css.
   Each block here maps to one WordPress pattern on conversion.
   ============================================================ */

/* ---- Page hero (every page except home) ---- */
.phero { padding: clamp(2.25rem,4vw,3.5rem) 0 clamp(1.75rem,3vw,2.5rem); position: relative; overflow: hidden; }
.phero::before { content:""; position:absolute; inset:-60% -20% auto -20%; height:120%; pointer-events:none;
  background: radial-gradient(40% 50% at 25% 20%, rgba(255,154,46,.10), transparent 70%); }
.phero .wrap { position:relative; z-index:1; }
.phero h1 { font-size: clamp(2.3rem, 5vw, 3.8rem); margin-top:.9rem; max-width:20ch; }
.phero .lead { margin-top:1.2rem; max-width:60ch; }
.phero.wide h1 { max-width:26ch; }

/* The 40 to 60 word answer-first block. Structural, not decorative. */
.answer-first { margin-top:1.6rem; padding:1.1rem 1.3rem; border-left:2px solid var(--marigold);
  background:var(--raise); border-radius:0 10px 10px 0; max-width:66ch; }
.answer-first p { color:var(--paper); font-size:1.02rem; line-height:1.6; }

/* ---- Prose ---- */
.prose { max-width:68ch; }
.prose > * + * { margin-top:1.1rem; }
.prose p { color:var(--dim); line-height:1.7; }
.prose h2 { margin-top:2.8rem; font-size:clamp(1.7rem,3vw,2.4rem); }
.prose h3 { margin-top:2rem; color:var(--paper); }
.prose strong, .prose b { color:var(--paper); font-weight:600; }
.prose ul, .prose ol { margin:0; padding-left:0; list-style:none; display:grid; gap:.6rem; }
.prose ul li { position:relative; padding-left:1.4rem; color:var(--dim); line-height:1.65; }
.prose ul li::before { content:""; position:absolute; left:0; top:.65em; width:6px; height:6px;
  border-radius:50%; background:var(--marigold); }
.prose ol { counter-reset:n; }
.prose ol li { position:relative; padding-left:2rem; color:var(--dim); counter-increment:n; line-height:1.65; }
.prose ol li::before { content:counter(n); position:absolute; left:0; top:0; font-family:var(--mono);
  font-size:.78rem; color:var(--marigold); }

/* ---- 7 day timeline ---- */
.timeline { margin-top:2.6rem; position:relative; display:grid; gap:0; }
.timeline::before { content:""; position:absolute; left:11px; top:14px; bottom:14px; width:1px; background:var(--line); }
.timeline .tl { display:grid; grid-template-columns:24px 1fr; gap:1.2rem; padding:1.1rem 0; align-items:start; }
.timeline .tl .dot { width:24px; height:24px; border-radius:50%; background:var(--ground); border:1px solid var(--line-2);
  display:grid; place-items:center; font-family:var(--body); font-size:0.8rem; color:var(--dim); position:relative; z-index:1; }
.timeline .tl.live .dot { background:var(--marigold); border-color:var(--marigold); color:#1A1207; font-weight:700; }
.timeline .tl h3 { font-family:var(--display); font-size:1.2rem; color:var(--paper); }
.timeline .tl p { color:var(--dim); font-size:.95rem; margin-top:.3rem; line-height:1.6; max-width:62ch; }
.timeline .tl .day { font-family:var(--body); font-size:0.8rem; letter-spacing:0.07em; text-transform:uppercase; color:var(--marigold); font-weight:600;}

/* ---- Cards grid ---- */
.cards { margin-top:2.4rem; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:1rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:1.5rem 1.4rem; }
.card h3 { font-family:var(--display); font-size:1.25rem; color:var(--paper); }
.card p { color:var(--dim); font-size:.94rem; margin-top:.5rem; line-height:1.6; }
.card .k { font-family:var(--body); font-size:0.8rem; letter-spacing:0.07em; text-transform:uppercase; color:var(--marigold); font-weight:600;}

/* ---- FAQ ---- */
.faq { margin-top:2.2rem; border-top:1px solid var(--line); }
.faq details { border-bottom:1px solid var(--line); }
.faq summary { cursor:pointer; padding:1.2rem 2.5rem 1.2rem 0; position:relative; list-style:none;
  font-family:var(--display); font-size:1.15rem; color:var(--paper); line-height:1.4; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; position:absolute; right:.4rem; top:1.1rem; font-family:var(--mono);
  font-size:1.3rem; color:var(--marigold); transition:transform .2s; }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq summary:focus-visible { outline:2px solid var(--marigold); outline-offset:3px; }
.faq .ans { padding:0 2.5rem 1.4rem 0; color:var(--dim); line-height:1.7; }
.faq .ans p + p { margin-top:.8rem; }

/* ---- Apply form ---- */
.applyform { margin-top:2rem; background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:1.8rem 1.7rem 2rem; max-width:640px; }
.fg { display:grid; gap:.45rem; }
.fg + .fg { margin-top:1.4rem; }
.fg label { font-size:.95rem; color:var(--paper); font-weight:500; }
.fg .hint { font-size:.84rem; color:var(--dimmer); line-height:1.5; }
.fg .req { color:var(--marigold); font-family:var(--body); font-size:0.8rem; margin-left:.3rem; }
.fg .opt { color:var(--dimmer); font-family:var(--body); font-size:0.8rem; margin-left:.3rem; }
.fg input, .fg textarea, .fg select {
  width:100%; background:var(--ground); border:1px solid var(--line-2); border-radius:9px; color:var(--paper);
  font-family:var(--body); font-size:1rem; padding:.85rem .95rem; margin-top:.15rem; }
.fg textarea { min-height:110px; resize:vertical; line-height:1.6; }
.fg input:focus, .fg textarea:focus, .fg select:focus { outline:2px solid var(--marigold); outline-offset:1px; border-color:transparent; }
.fg input::placeholder, .fg textarea::placeholder { color:var(--dimmer); }
.applyform .btn { width:100%; justify-content:center; margin-top:1.6rem; }
.formnote { margin-top:1rem; font-size:.85rem; color:var(--dimmer); line-height:1.6; }
.gate { margin-top:1.6rem; padding:1rem 1.1rem; border-radius:10px; background:var(--raise);
  border:1px solid var(--line); font-size:.9rem; color:var(--dim); line-height:1.6; }
.gate b { color:var(--paper); }

/* ---- Blog empty ---- */
.empty { margin-top:2.5rem; border:1px dashed var(--line-2); border-radius:16px; padding:3rem 2rem; text-align:center; }
.empty h3 { font-family:var(--display); font-size:1.5rem; color:var(--paper); }
.empty p { color:var(--dim); margin-top:.7rem; max-width:52ch; margin-left:auto; margin-right:auto; line-height:1.65; }

/* ---- Simple table ---- */
.tbl { margin-top:1.6rem; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.tbl .tr { display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:.9rem 1.2rem; background:var(--card); border-bottom:1px solid var(--line); }
.tbl .tr:last-child { border-bottom:none; }
.tbl .tr span { color:var(--dim); font-size:.96rem; }
.tbl .tr b { font-family:var(--mono); color:var(--paper); font-variant-numeric:tabular-nums; }

/* ---- Callout ---- */
.callout { margin-top:2rem; border:1px solid rgba(255,154,46,.3); background:rgba(255,154,46,.05);
  border-radius:14px; padding:1.5rem 1.6rem; max-width:70ch; }
.callout h3 { color:var(--paper); font-family:var(--display); }
.callout p { color:var(--dim); margin-top:.6rem; line-height:1.7; }
.callout p + p { margin-top:.8rem; }
.callout b { color:var(--paper); }

/* ---- Next-page nav ---- */
.nextnav { margin-top:clamp(3rem,6vw,5rem); padding-top:2rem; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.nextnav a { color:var(--dim); text-decoration:none; font-size:.95rem; }
.nextnav a:hover { color:var(--marigold); }
.nextnav .nn-lab { font-family:var(--body); font-size:0.8rem; letter-spacing:0.07em;
  text-transform:uppercase; color:var(--dimmer); display:block; margin-bottom:.25rem; font-weight:600;}

/* ---- Breadcrumb (exactly one, never two) ---- */
.crumb { font-family:var(--body); font-size:0.8rem; letter-spacing:0.07em; color:var(--dimmer); }
.crumb a { color:var(--dimmer); text-decoration:none; }
.crumb a:hover { color:var(--marigold); }
.crumb span { color:var(--dim); }

/* ---- Footer (shared shell) ---- */
.footgrid { display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.footlinks { display:grid; grid-template-columns:repeat(3,auto); gap:.5rem 2rem; align-content:start; }
@media (max-width:640px){ .footlinks{ grid-template-columns:repeat(2,auto); } }
.footlinks a { color:var(--dim); text-decoration:none; font-size:.92rem; }
.footlinks a:hover { color:var(--marigold); }
.footbase { margin-top:2rem; padding-top:1.4rem; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; color:var(--dimmer); font-size:.85rem; }
.navlinks a.on { color:var(--paper); }

/* The illumination span is nowrap by default so the underline sweep reads as one
   gesture. On narrow screens that overflows, so let it wrap and draw per-line. */
@media (max-width: 560px) {
  .lit { white-space: normal; }
  .lit::after { left: 0; right: 0; }
}

/* ============================================================
   SHAPE VARIETY. The fix for "every section looks the same".
   Three distinct grounds and four distinct section shapes.
   ============================================================ */

/* --- Hero: text left, tool right, vertically centred --- */
.heroleft h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); margin-top:.9rem; }
.heroleft .lead { margin-top:1.1rem; max-width:46ch; }
.heroacts { margin-top:1.8rem; display:flex; gap:.7rem; flex-wrap:wrap; }
.herofoot { margin-top:1.2rem; font-size:.87rem; color:var(--dimmer); }
.heroright { min-width:0; }
@media (max-width:960px){
  .heroright { margin-top:2rem; }
}

/* --- BAND: the contrast ground. Breaks ten dark sections in a row. --- */
.band { background:var(--paper); color:#17140F; padding:clamp(2.25rem,3.5vw,3rem) 0; }
.bandinner { display:flex; align-items:center; gap:clamp(1.5rem,3vw,3rem); }
@media (max-width:820px){ .bandinner { flex-direction:column; align-items:flex-start; } }
.bandtext { font-size:clamp(1rem,1.3vw,1.12rem); line-height:1.65; color:#443C31; max-width:74ch; }
.bandtext b { color:#17140F; font-weight:600; }
.band .btn { background:#17140F; color:var(--paper); flex:none; }
.band .btn:hover { background:#332C22; box-shadow:none; transform:translateY(-1px); }

/* --- PROBLEM: asymmetric split, sticky head, editorial body --- */
.problem { background:var(--raise); }
.probgrid { display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
@media (max-width:900px){ .probgrid { grid-template-columns:1fr; gap:2rem; } }
.probhead h2 { margin-top:.9rem; font-size:clamp(1.9rem,3.2vw,2.7rem); }
@media (min-width:901px){ .probhead { position:sticky; top:calc(var(--hdr) + 1.5rem); } }
.probbody p { color:var(--dim); line-height:1.75; font-size:1.04rem; }
.probbody p + p { margin-top:1.1rem; }
.probbody .big { font-family:var(--display); font-size:clamp(1.5rem,2.6vw,2.1rem); color:var(--paper);
  line-height:1.2; letter-spacing:-.015em; margin-bottom:1.2rem; }
.probbody .punch { color:var(--paper); font-size:1.12rem; font-weight:500; margin-top:1.4rem;
  padding-top:1.4rem; border-top:1px solid var(--line); }

/* The one number on the page, given real scale. Something to look at. */
.statline { margin:1.8rem 0; padding:1.4rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  display:flex; align-items:baseline; gap:1.2rem; flex-wrap:wrap; }
.statnum { font-family:var(--display); font-size:clamp(2.6rem,6vw,4.4rem); font-weight:600; line-height:1;
  letter-spacing:-.04em; color:var(--marigold); font-variant-numeric:tabular-nums;
  text-shadow:0 0 40px rgba(255,154,46,.28); }
.statcap { color:var(--dim); font-size:1rem; max-width:26ch; line-height:1.5; }
/* Keep "See whose name comes up" together so "See" never orphans. */
.seewrap { display:inline-block; }

/* ============================================================
   SCALE CONTRAST + INTERACTIVE SECTIONS
   ============================================================ */

/* --- STATEMENT: the enormous type moment. Almost nothing else in it. --- */
.statement { padding:clamp(4rem,7vw,6.5rem) 0; position:relative; overflow:hidden; }
.statement::before { content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 70% at 50% 45%, rgba(255,154,46,.09), transparent 72%); }
.statement .wrap { position:relative; z-index:1; }
.statement .huge {
  font-family:var(--display); font-weight:600;
  font-size:clamp(2.6rem, 7.4vw, 6.6rem);
  line-height:0.99; letter-spacing:-.04em; color:var(--paper);
  max-width:20ch; text-wrap:balance; }
.statement .huge em { font-style:normal; color:var(--dimmer); }
.statement .sub { margin-top:2rem; max-width:56ch; color:var(--dim);
  font-size:clamp(1.02rem,1.4vw,1.18rem); line-height:1.7; }
.statement .sub b { color:var(--paper); font-weight:600; }

/* --- THE LOOP: interactive mechanism diagram --- */
.loop { background:var(--raise); }
.loopgrid { margin-top:2.6rem; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(2rem,4vw,4rem); align-items:center; }
@media (max-width:900px){ .loopgrid { grid-template-columns:1fr; } }
.loopdiagram { position:relative; aspect-ratio:1; max-width:420px; width:100%; margin:0 auto; }
.loopdiagram svg { width:100%; height:100%; display:block; overflow:hidden; }
.loopdiagram .ring { fill:none; stroke:var(--line-2); stroke-width:1; }
.loopdiagram .arc { fill:none; stroke:var(--marigold); stroke-width:2; stroke-linecap:round;
  opacity:0; transition:opacity .35s; }
.loopdiagram .arc.on { opacity:1; }
.loopnode { cursor:pointer; }
.loopnode circle { fill:var(--card); stroke:var(--line-2); stroke-width:1; transition:.28s; }
.loopnode text { fill:var(--dim); font-family:var(--body); font-size:13px; font-weight:600;
  text-anchor:middle; dominant-baseline:middle; transition:.28s; pointer-events:none; }
.loopnode .num { fill:var(--dimmer); font-family:var(--mono); font-size:10px; }
.loopnode:hover circle { stroke:var(--dim); }
.loopnode.on circle { fill:var(--marigold); stroke:var(--marigold);
  filter:drop-shadow(0 0 18px rgba(255,154,46,.45)); }
.loopnode.on text { fill:#1A1207; }
.loopnode.on .num { fill:rgba(26,18,7,.6); }
/* SVG <g tabindex> draws a rectangular focus ring around the whole node.
   Suppress it and put the focus state on the circle itself. */
.loopnode:focus { outline:none; }
.loopnode:focus-visible { outline:none; }
.loopnode:focus-visible circle { stroke:var(--marigold); stroke-width:2.5; }

.loopdetail { min-height:210px; }
.loopdetail .step { display:none; }
.loopdetail .step.on { display:block; animation:fadeUp .35s ease both; }
@keyframes fadeUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.loopdetail .sn { font-family:var(--body); font-size:0.8rem; letter-spacing:0.07em;
  text-transform:uppercase; color:var(--marigold); font-weight:600;}
.loopdetail h3 { font-family:var(--display); font-size:clamp(1.4rem,2.4vw,1.9rem);
  color:var(--paper); margin-top:.6rem; letter-spacing:-.015em; }
.loopdetail p { color:var(--dim); line-height:1.75; margin-top:.9rem; max-width:52ch; }
.loopdetail .why { margin-top:1.1rem; padding-top:1.1rem; border-top:1px solid var(--line);
  color:var(--paper); font-size:.98rem; line-height:1.65; }
.loopdetail .why span { color:var(--marigold); font-family:var(--body); font-size:0.8rem;
  letter-spacing:0.07em; text-transform:uppercase; display:block; margin-bottom:.4rem; font-weight:600;}
.loophint { margin-top:1.4rem; font-size:.85rem; color:var(--dimmer); }

/* --- PHASES: interactive "when does this work" timeline --- */
.phasetabs { margin-top:2.4rem; display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; }
@media (max-width:760px){ .phasetabs { grid-template-columns:repeat(2,1fr); } }
.phasetab { background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:1rem .9rem; cursor:pointer; text-align:left; transition:.2s; font-family:var(--body); }
.phasetab:hover { border-color:var(--line-2); }
.phasetab.on { border-color:var(--marigold); background:rgba(255,154,46,.07); }
.phasetab .pt { font-family:var(--body); font-size:0.8rem; letter-spacing:0.07em;
  text-transform:uppercase; color:var(--dimmer); display:block; font-weight:600;}
.phasetab.on .pt { color:var(--marigold); }
.phasetab .pl { display:block; margin-top:.4rem; color:var(--paper); font-weight:600; font-size:1rem; line-height:1.3; }
.phasetab:focus-visible { outline:2px solid var(--marigold); outline-offset:2px; }
.phasebody { margin-top:1.4rem; background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:1.8rem 1.7rem; min-height:250px; }
.phasebody .pane { display:none; }
.phasebody .pane.on { display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; animation:fadeUp .35s ease both; }
@media (max-width:760px){ .phasebody .pane.on { grid-template-columns:1fr; gap:1.4rem; } }
.phasebody h3 { font-family:var(--display); font-size:1.5rem; color:var(--paper); }
.phasebody ul { list-style:none; padding:0; margin:1rem 0 0; display:grid; gap:.55rem; }
.phasebody li { color:var(--dim); font-size:.96rem; padding-left:1.4rem; position:relative; line-height:1.6; }
.phasebody li::before { content:""; position:absolute; left:0; top:.6em; width:6px; height:6px;
  border-radius:50%; background:var(--marigold); }
.phasebody .expect { background:var(--ground); border:1px solid var(--line); border-radius:11px; padding:1.1rem 1.2rem; }
.phasebody .expect .el { font-family:var(--body); font-size:0.8rem; letter-spacing:0.07em;
  text-transform:uppercase; color:var(--dimmer); font-weight:600;}
.phasebody .expect p { color:var(--paper); margin-top:.5rem; line-height:1.6; font-size:.96rem; }
.phasebody .expect .warn { color:var(--dim); margin-top:.7rem; font-size:.9rem; }

/* No section may bleed horizontally. Glow filters and gradient pseudo-elements
   are the usual culprits and they are never worth a sideways scrollbar. */
.loop, .problem, .band, .statement, .divider { overflow-x: clip; }

/* ---- Mobile navigation. Lives here, in the source of truth, not the theme copy. ---- */
.navtoggle { display:none; }
@media (max-width:820px){
  .navtoggle { display:block; position:relative; }
  .navtoggle > summary {
    list-style:none; cursor:pointer; width:44px; height:44px; display:grid; place-items:center;
    border:1px solid var(--line-2); border-radius:8px; color:var(--paper);
    font-family:var(--body); font-size:0.8rem; letter-spacing:0.04em; }
  .navtoggle > summary::-webkit-details-marker { display:none; }
  .navtoggle > summary::marker { content:""; }
  .navtoggle > summary:focus-visible { outline:2px solid var(--marigold); outline-offset:2px; }
  .navtoggle[open] > summary { border-color:var(--marigold); color:var(--marigold); }
  .navdrawer {
    position:absolute; right:0; top:calc(100% + .6rem); min-width:220px; z-index:60;
    background:var(--card); border:1px solid var(--line-2); border-radius:12px; padding:.5rem;
    display:grid; gap:.15rem; box-shadow:0 18px 50px rgba(0,0,0,.5); }
  .navdrawer a { display:block; padding:.7rem .8rem; border-radius:8px; color:var(--dim);
    text-decoration:none; font-size:.95rem; }
  .navdrawer a:hover { background:var(--card-2); color:var(--paper); }
}

/* ---- Form status + honeypot ---- */
.formstatus { margin-bottom:1.2rem; padding:1rem 1.1rem; border-radius:10px; font-size:.95rem; line-height:1.6; max-width:640px; }
.formstatus.ok { background:rgba(111,207,143,.09); border:1px solid rgba(111,207,143,.3); color:var(--paper); }
.formstatus.ok b { color:var(--good); }
.formstatus.warn { background:rgba(194,84,63,.12); border:1px solid rgba(194,84,63,.32); color:var(--paper); }
.formstatus.warn b { color:#E8927A; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* A page hero already has bottom padding. The section straight after it does not
   need a full top pad as well, or you get ~120px of dead air on every inner page. */
.phero + section { padding-top: clamp(1.25rem, 2vw, 2rem); }
.phero + section.divider { padding-top: clamp(2rem, 3vw, 2.75rem); }
/* Same story for the hero on the homepage. */
.hero + section { padding-top: clamp(2rem, 3vw, 2.75rem); }

/* ---- Logo lockup ---- */
.brand { display:inline-flex; align-items:center; gap:.6rem; }
.brandmark { width:26px; height:26px; flex:none; color:var(--paper); }
.brandtext { font-family:var(--display); font-weight:600; font-size:1.24rem; letter-spacing:-.015em; }
.brand:hover .brandmark rect:nth-child(2) { fill:var(--ember); }
.brandmark rect { transition:fill .2s; }
@media (max-width:480px){ .brandtext { font-size:1.08rem; } .brandmark { width:22px; height:22px; } }

/* ---- Apply form: sections, two-up rows, consent check ---- */
.fsec { font-family:var(--body); font-size:0.8rem; letter-spacing:0.07em; text-transform:uppercase;
  color:var(--marigold); margin:2rem 0 1rem; padding-bottom:.6rem; border-bottom:1px solid var(--line); font-weight:600;}
.applyform > .fsec:first-of-type { margin-top:0; }
.fgrid { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
@media (max-width:620px){ .fgrid { grid-template-columns:1fr; gap:1.4rem; } }
.fgrid .fg + .fg { margin-top:0; }
.fcheck { display:flex; gap:.8rem; align-items:flex-start; margin-top:1.6rem;
  background:var(--ground); border:1px solid var(--line-2); border-radius:11px; padding:1.05rem 1.15rem;
  cursor:pointer; transition:border-color .18s; }
.fcheck:hover { border-color:var(--dim); }
.fcheck input { appearance:none; width:22px; height:22px; flex:none; margin-top:.1rem;
  border:1px solid var(--line-2); border-radius:6px; background:var(--card); cursor:pointer; position:relative; }
.fcheck input:checked { background:var(--marigold); border-color:var(--marigold); }
.fcheck input:checked::after { content:"¹3"; position:absolute; inset:0; display:grid; place-items:center;
  color:#1A1207; font-size:.86rem; font-weight:700; line-height:1; }
.fcheck input:focus-visible { outline:2px solid var(--marigold); outline-offset:2px; }
.fcheck span { font-size:.94rem; color:var(--dim); line-height:1.6; }
.applyform { max-width:720px; }

/* ---- Who you get: Faz block ---- */
.whobit { background:var(--raise); }
.whogrid { display:grid; grid-template-columns:230px 1fr; gap:clamp(2rem,4vw,3.5rem); align-items:start; }
@media (max-width:820px){ .whogrid { grid-template-columns:1fr; gap:1.8rem; } }
.whoface { position:relative; }
.whoface picture { display:block; }
.whoface img { width:100%; max-width:190px; height:auto; display:block; border-radius:50%;
  border:1px solid var(--line-2); background:var(--card); }
.whoface .whostats { margin-top:1.4rem; }
.whobadge { margin-top:1rem; display:inline-flex; align-items:baseline; gap:.5rem;
  background:var(--card); border:1px solid var(--line-2); border-radius:10px; padding:.6rem .85rem; }
.wbn { font-family:var(--display); font-size:1.6rem; font-weight:600; color:var(--marigold); line-height:1; }
.wbl { font-size:.82rem; color:var(--dim); }
.whotext h2 { margin-top:.9rem; font-size:clamp(1.9rem,3.4vw,2.8rem); }
.wholead { margin-top:1.1rem; color:var(--dim); font-size:clamp(1.02rem,1.4vw,1.16rem); line-height:1.7; max-width:60ch; }
.whofacts { margin-top:1.8rem; display:grid; gap:1.2rem; }
.wf { padding-left:1.2rem; border-left:2px solid var(--line-2); }
.wfk { display:block; font-family:var(--body); font-size:0.8rem; letter-spacing:0.07em;
  text-transform:uppercase; color:var(--marigold); margin-bottom:.4rem; font-weight:600;}
.wf p { color:var(--dim); font-size:.97rem; line-height:1.7; max-width:64ch; }
.whosign { margin-top:1.6rem; padding-top:1.2rem; border-top:1px solid var(--line);
  color:var(--paper); font-size:1rem; }

/* ---- Pain points grid ---- */
.painsgrid { margin-top:2.4rem; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:1rem; }
.pain { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:1.5rem 1.5rem 1.6rem; }
.pnum { font-family:var(--body); font-size:0.8rem; letter-spacing:0.07em; color:var(--marigold); }
.pain h3 { font-family:var(--display); font-size:1.22rem; color:var(--paper); margin-top:.6rem;
  line-height:1.3; letter-spacing:-.01em; }
.pain p { color:var(--dim); font-size:.95rem; line-height:1.7; margin-top:.7rem; }
.pain .pwhy { margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line); font-size:.93rem; }
.pain .pwhy b { color:var(--marigold); font-weight:600; }

/* ---- Apply page layout. Was an inline style with no breakpoint, which
        overflowed every mobile width on the one page that has to convert. ---- */
.applygrid { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,4vw,3.5rem); align-items:start; }
@media (max-width:860px){ .applygrid { grid-template-columns:1fr; gap:2rem; } }

/* ---- Tap targets. 44px minimum on touch, per the accessibility floor. ---- */
@media (hover:none), (max-width:820px) {
  .navdrawer a,
  .footlinks a,
  /* .fcol a is the footer column link. It was missed here and sat at 36px,
     under the 44px touch target, on every page. */
  .fcol a,
  .nextnav a { min-height:44px; display:flex; align-items:center; }
  .copy { min-height:44px; padding-left:1rem; padding-right:1rem; }
  .crumb a { display:inline-block; padding:.35rem 0; }
  .faq summary { padding-top:1.35rem; padding-bottom:1.35rem; }
  .eng-btn { min-height:52px; }
  .phasetab { min-height:60px; }
}
/* The form controls should never be small enough to mis-tap. */
.fg input, .fg select, .fg textarea { min-height:48px; }
.fcheck input { min-width:22px; min-height:22px; }

/* Remaining touch targets. Inline links inside prose are deliberately left
   alone: forcing 44px on them would wreck line spacing, and WCAG allows
   inline text links to be sized by their line box. */
@media (hover:none), (max-width:820px) {
  .brand { min-height:44px; align-items:center; }
  .seg button { min-height:44px; }
  .copy { min-height:44px; }
  .navtoggle > summary { min-width:48px; min-height:48px; }
}

/* The price toggles carry full sentences, so at phone widths they have to
   share the row rather than run off the right edge. */
@media (max-width:520px) {
  .ctrls { display:grid; gap:.6rem; }
  .seg { display:flex; width:100%; }
  .seg button { flex:1 1 0; min-width:0; padding-inline:.55rem;
    font-size:.84rem; line-height:1.25; text-wrap:balance; }
}

/* ============================================================
   READING WIDTH. Text blocks were capped at 68 to 78ch inside a
   1180px container, so they hugged the left with 400px of dead
   space beside them. Narrow the whole section instead, so heading
   and body sit in one centred column and it reads deliberate.
   ============================================================ */
section:has(> .wrap > .prose),
section:has(> .wrap > .faq),
section:has(> .wrap > .timeline),
section:has(> .wrap > .ladder) {
  --pmm-read: 1;
}
/* Inner pages used to pin these sections to 880px, which left half the screen
   empty at desktop widths and made every page feel narrower than the homepage.
   They now run at the same 1180px as everything else, and the reading measure
   is held by the text itself rather than by the container. */

.shead { align-self: start; }
.shead > :first-child { margin-top: 0; }
.shead h2 { margin-top: .8rem; }
.sbody > :first-child { margin-top: 0; }
.sbody .prose { max-width: 66ch; }

@media (min-width: 900px) {
  section:has(> .wrap > .shead) > .wrap {
    display: grid;
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: clamp(2rem, 4.5vw, 4.5rem);
    align-items: start;
  }
  .shead { position: sticky; top: 96px; }
  .shead h2 { max-width: 18ch; text-wrap: balance; }
  .shead .lead { max-width: 34ch; }
  .shead .eyebrow { text-wrap: balance; }
}

/* The hero on inner pages was capped at 980 while the homepage ran 1180.
   It now inherits the site width; the measure is held by the text. */
.phero .answer-first { max-width: 62ch; }
.phero h1 { max-width: 22ch; }

/* Inside a narrowed wrap the constrained children should fill it. */
section:has(> .wrap > .prose) .prose,
section:has(> .wrap > .faq) .faq,
section:has(> .wrap > .ladder) .ladder,
section:has(> .wrap > .prose) .callout,
section:has(> .wrap > .faq) .callout { max-width: 100%; }

/* Blocks that stay in a wide wrap get centred rather than left-hugging. */
.callout, .tbl, .answer-first { margin-inline: 0; }
.termsgrid { max-width: 100%; }

/* ============================================================
   FOOTER
   ============================================================ */
footer.site { border-top:1px solid var(--line); padding:0 0 2.5rem; margin-top:0; }
.footcta { display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap;
  padding:clamp(2.5rem,5vw,4rem) 0; border-bottom:1px solid var(--line); }
.footcta h2 { font-size:clamp(1.6rem,3vw,2.4rem); max-width:18ch; }
.footcta p { color:var(--dim); margin-top:.7rem; max-width:48ch; line-height:1.65; }
.footcols { display:grid; grid-template-columns:1.1fr 1.6fr; gap:clamp(2rem,4vw,4rem);
  padding:clamp(2.5rem,4vw,3.5rem) 0; }
@media (max-width:860px){ .footcols { grid-template-columns:1fr; gap:2.5rem; } }
.foottag { color:var(--dim); font-size:.94rem; line-height:1.7; margin-top:1rem; max-width:44ch; }
.footmail { margin-top:1rem; font-size:.95rem; }
.footmail a { color:var(--ember); }
.footnav { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
@media (max-width:620px){ .footnav { grid-template-columns:1fr 1fr; gap:1.8rem; } }
.fcol { display:grid; gap:.15rem; align-content:start; }
.fcol h3 { font-family:var(--body); font-size:0.8rem; letter-spacing:0.07em; text-transform:uppercase;
  color:var(--dimmer); margin-bottom:.7rem; font-weight:500; }
.fcol a { color:var(--dim); text-decoration:none; font-size:.94rem; padding:.35rem 0; }
.fcol a:hover { color:var(--marigold); }
.footterms { display:flex; flex-wrap:wrap; gap:.5rem; padding-bottom:1.6rem; }
.footterms span { font-family:var(--body); font-size:0.8rem; letter-spacing:0.06em; color:var(--dim);
  border:1px solid var(--line); border-radius:999px; padding:.4rem .8rem; background:var(--card); }
.footbase { padding-top:1.4rem; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; color:var(--dimmer); font-size:.85rem; }
.footjoke { font-family:var(--display); font-style:italic; }

/* Sticky header: make the scrolled state readable rather than semi-transparent mush. */
/* Sticky header. Transparent at rest, solid once you scroll past it, so it
   never turns into unreadable mush over content. */
/* Sticky header, solid at all times.
   A scroll-driven fade was tried and did not apply on a position:sticky
   element, so this is the version that simply works: opaque enough that
   content never shows through, with a hairline rule to seat it. */
header.site { background:#100E0B; border-bottom:1px solid var(--line); }

/* Header height as a token, so sticky offsets and anchor targets stay in sync
   with it instead of being guessed in three different places. */
:root { --hdr: 72px; }   /* measured, not guessed */

/* Anchor links must not land under the sticky header. */
[id] { scroll-margin-top: calc(var(--hdr) + 1rem); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html { scroll-behavior: auto; } }

/* ---- Mobile header. Restored after an edit removed it: without these the
        wordmark and CTA both wrap and the header grows to 103px. ---- */
.btn-short { display:none; }
.brandtext { white-space:nowrap; }
.navlinks { flex-wrap:nowrap; }
@media (max-width:620px){
  .nav { gap:.5rem; }
  .navlinks { gap:.5rem; }
  .brandtext { font-size:1rem; letter-spacing:-.02em; }
  .brandmark { width:20px; height:20px; }
  .navcta { padding:0 .85rem; font-size:.9rem; min-height:44px; white-space:nowrap; }
  .btn-long { display:none; }
  .btn-short { display:inline; }
  /* 44px is the floor for a touch target. This rule sits after the one that
     sets 48px, so shrinking it here quietly undid that. */
  .navtoggle > summary { width:44px; height:44px; min-width:44px; min-height:44px; font-size:.55rem; }
}
@media (max-width:380px){
  .brandtext { font-size:.92rem; }
  .navcta { padding:0 .7rem; font-size:.86rem; }
}
/* Measured at every breakpoint: the header is 72px throughout. */

/* ============================================================
   READABILITY PASS
   Small labels were monospace, uppercase, .66 to .74rem with
   .12 to .18em tracking. At that size a proportional face reads
   faster and does not shred into one word per line. Sizes and
   families are corrected at source above; what is left here is
   the wrapping behaviour and the base body size.
   ============================================================ */

/* A label is a label. It should never break mid-phrase. */
.tl, .cpk, .chl, .el, .tx-lab, .grouplab, .aek, .bvn, .fsec,
.eyebrow, .qlabel, .olabel, .wfk, .sn, .pt, .k, .fcol h3 {
  text-wrap: balance;
  hyphens: none;
  overflow-wrap: normal;
}

/* The two the eye actually catches stacking: tally rows and price keys. */
.tally .tl, .cprice .cpk { white-space: nowrap; }

/* Long-form site, so give the body copy room. */
body { font-size: 1.06rem; }
p, li { text-wrap: pretty; }
.lead { line-height: 1.65; }

/* Secondary notes were sitting under .9rem across the site. */
.tsub, .checknote, .demonote, .loophint, .formnote, .finalnote,
.herofoot, .peoplenote, .srcnote, .foottag, .botsub, .cpn, .wsl {
  font-size: .92rem;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
}
.hint { font-size: .88rem; line-height: 1.6; }

/* Monospace stays only where it means something. */
.bot, .bot i, .chv, .lrow b, .tbl .tr b, .role .rc, .upfront b {
  font-family: var(--mono);
}

/* ============================================================
   DAY STEPPER
   The seven day build was a static list that ran down a narrow
   column. It is now a stepper: pick a step, read that step.
   Full keyboard support, and it degrades to a readable stack
   with no script and at phone widths.
   ============================================================ */
.daystep { margin-top: 2.4rem; }

.ds-progress { height: 3px; background: var(--line); border-radius: 999px; overflow: hidden; }
.ds-bar { display: block; height: 100%; background: var(--marigold);
  border-radius: 999px; transition: width .35s cubic-bezier(.4,0,.2,1); }

.ds-rail { margin-top: 1.1rem; display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; }
.ds-chip { display: grid; gap: .45rem; justify-items: start; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: .85rem .8rem; cursor: pointer; color: var(--dim);
  transition: border-color .18s, background .18s, transform .18s; }
.ds-chip:hover { border-color: var(--line-2); transform: translateY(-2px); }
.ds-chip:focus-visible { outline: 2px solid var(--marigold); outline-offset: 2px; }
.ds-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ground); border: 1px solid var(--line-2);
  font-size: .82rem; font-weight: 600; color: var(--dim); }
.ds-chip--live .ds-n { background: rgba(255,154,46,.14); border-color: rgba(255,154,46,.4); color: var(--marigold); }
.ds-l { font-size: .84rem; font-weight: 600; letter-spacing: .02em; line-height: 1.3; }
.ds-chip.on { background: var(--raise); border-color: var(--marigold); color: var(--paper); }
.ds-chip.on .ds-n { background: var(--marigold); border-color: var(--marigold); color: #1A1207; }

.ds-panels { margin-top: 1.4rem; background: var(--card);
  border: 1px solid var(--line); border-radius: 16px; padding: clamp(1.4rem, 3vw, 2.2rem); }
.ds-panel { animation: dsIn .32s cubic-bezier(.4,0,.2,1) both; }
.ds-panel .day { display: block; color: var(--marigold); }
.ds-panel h3 { font-family: var(--display); font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  color: var(--paper); margin-top: .5rem; }
.ds-panel p { color: var(--dim); line-height: 1.75; margin-top: .7rem; max-width: 68ch; }
@keyframes dsIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.ds-hint { margin-top: .9rem; color: var(--dimmer); font-size: .88rem; }

/* Narrow screens get a scrollable rail rather than seven crushed chips. */
@media (max-width: 860px) {
  .ds-rail { grid-template-columns: repeat(7, 8.5rem);
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: .4rem; scrollbar-width: thin; }
  .ds-chip { scroll-snap-align: start; }
  .ds-hint { display: none; }
}

/* No JavaScript: show every step, stacked and readable. */
.daystep:not([data-ready]) .ds-panel[hidden] { display: block; }
.daystep:not([data-ready]) .ds-panel + .ds-panel { margin-top: 1.6rem;
  padding-top: 1.6rem; border-top: 1px solid var(--line); }
.daystep:not([data-ready]) .ds-panel { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .ds-panel { animation: none; }
  .ds-bar { transition: none; }
  .ds-chip { transition: none; }
  .ds-chip:hover { transform: none; }
}

/* ---- FAQ uses the full width now, two columns where there is room ---- */
@media (min-width: 1000px) {
  .faq { display: grid; grid-template-columns: 1fr 1fr;
    column-gap: 3rem; border-top: none; }
  .faq details { border-top: 1px solid var(--line); border-bottom: none; }
}

/* ============================================================
   MISSING COMPONENT STYLES
   These sections shipped with markup and no CSS at all, so they
   rendered as raw browser defaults. Found by diffing every class
   used in the built pages against every selector in the sheets.
   ============================================================ */

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---- Readability checker ---- */
.checkform { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: .7rem; align-items: stretch; }
.checkform input {
  flex: 1 1 22rem; min-width: 0; background: var(--ground);
  border: 1px solid var(--line-2); border-radius: 11px; color: var(--paper);
  padding: .95rem 1.1rem; font: inherit; font-size: 1rem;
}
.checkform input::placeholder { color: var(--dimmer); }
.checkform input:focus { outline: 2px solid var(--marigold); outline-offset: 1px; border-color: var(--marigold); }
.checkform .btn { flex: 0 0 auto; }
.checknote { margin-top: .9rem; color: var(--dimmer); max-width: 66ch; }

.checkout { margin-top: 1.8rem; background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: clamp(1.2rem, 2.5vw, 1.8rem); }
.checkhead { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
  justify-content: space-between; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.chhost { display: block; font-family: var(--display); font-size: 1.35rem;
  color: var(--paper); margin-top: .2rem; overflow-wrap: anywhere; }
.chscore { display: flex; align-items: baseline; gap: .45rem; }
.chsn { font-family: var(--display); font-size: 2.4rem; font-weight: 600; color: var(--marigold); line-height: 1; }
.chst { color: var(--dim); font-size: .92rem; }

.checklist { display: grid; gap: .5rem; margin-top: 1.1rem; }
.chrow { display: grid; grid-template-columns: 26px 1fr; gap: .9rem;
  align-items: start; padding: .85rem; border-radius: 11px; background: var(--raise); }
.chrow .chi { width: 26px; height: 26px; border-radius: 50%; display: grid;
  place-items: center; font-size: .9rem; font-weight: 700; line-height: 1; }
.chrow.ok .chi { background: rgba(111,207,143,.14); color: var(--good); border: 1px solid rgba(111,207,143,.35); }
.chrow.no .chi { background: rgba(194,84,63,.15); color: #E08A72; border: 1px solid rgba(194,84,63,.35); }
.chrow .chk { font-weight: 600; color: var(--paper); }
.chrow .chv { display: block; font-size: .88rem; color: var(--marigold); margin-top: .15rem; }
.chrow .chw { display: block; font-size: .92rem; color: var(--dim); margin-top: .4rem; line-height: 1.6; max-width: 78ch; }
.checkcta:not(:empty) { margin-top: 1.4rem; padding-top: 1.3rem; border-top: 1px solid var(--line); }
.checkcta p { color: var(--dim); line-height: 1.7; max-width: 70ch; }
.checkcta .btn { margin-top: 1rem; }
.checkerr { color: #E08A72; margin-top: 1rem; }
.checkform.busy input, .checkform.busy .btn { opacity: .6; pointer-events: none; }

/* ---- Four options compared ---- */
.comptabs { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.comptab { background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  padding: .7rem 1.15rem; color: var(--dim); font: inherit; font-size: .94rem;
  font-weight: 600; cursor: pointer; transition: border-color .18s, background .18s, color .18s; }
.comptab:hover { border-color: var(--line-2); color: var(--paper); }
.comptab:focus-visible { outline: 2px solid var(--marigold); outline-offset: 2px; }
.comptab.on { background: var(--marigold); border-color: var(--marigold); color: #1A1207; }

.compbody { margin-top: 1.4rem; }
.comppane { display: none; }
.comppane.on { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,20rem);
  gap: clamp(1.2rem, 3vw, 2.4rem); align-items: start;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: clamp(1.3rem, 3vw, 2rem); animation: dsIn .3s cubic-bezier(.4,0,.2,1) both; }
@media (max-width: 820px) { .comppane.on { grid-template-columns: 1fr; } }
.comppane h3 { font-family: var(--display); font-size: clamp(1.3rem,2.4vw,1.8rem); color: var(--paper); }
.comppane p { color: var(--dim); line-height: 1.75; margin-top: .8rem; max-width: 74ch; }
.cgood b, .cbad b { color: var(--paper); }
.cgood { border-left: 2px solid rgba(111,207,143,.5); padding-left: 1rem; }
.cbad { border-left: 2px solid rgba(194,84,63,.5); padding-left: 1rem; }
.cprice { background: var(--raise); border: 1px solid var(--line); border-radius: 13px;
  padding: 1.3rem; display: grid; gap: .25rem; }
.cpv { font-family: var(--display); font-size: clamp(1.7rem,3vw,2.3rem); font-weight: 600;
  color: var(--paper); line-height: 1.1; }
.comppane[data-comp="3"] .cpv { color: var(--marigold); }

/* ---- Reasons not to hire us ---- */
.objgrid { margin-top: 2.4rem; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1rem; }
.obj { background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 1.5rem 1.4rem; }
.obj h3 { font-family: var(--display); font-size: 1.2rem; color: var(--paper); }
.obj p { color: var(--dim); font-size: .95rem; margin-top: .55rem; line-height: 1.7; }

/* ---- Blog archive, static and shortcode rendered ---- */
.archive-empty { margin-top: 2.2rem; background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: clamp(1.4rem, 3vw, 2.2rem);
  display: grid; gap: 1.4rem; justify-items: start; }
.archive-empty h3 { font-family: var(--display); font-size: clamp(1.3rem,2.4vw,1.7rem); color: var(--paper); }
.archive-empty p { color: var(--dim); line-height: 1.75; max-width: 72ch; }
.archive-empty .aek { display: block; margin-bottom: .5rem; }

.archivegrid { margin-top: 2.2rem; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1rem; }
.acard { background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  transition: border-color .18s, transform .18s; }
.acard:hover { border-color: var(--line-2); transform: translateY(-2px); }
.acard-link { display: grid; gap: .5rem; padding: 1.5rem 1.4rem; text-decoration: none; }
.acard-link h3 { font-family: var(--display); font-size: 1.2rem; color: var(--paper); }
.acard-link p { color: var(--dim); font-size: .94rem; line-height: 1.65; }
.aread { color: var(--marigold); font-size: .92rem; font-weight: 600; }
.archive-all { margin-top: 1.4rem; }
.archive-all a { color: var(--marigold); font-weight: 600; }

/* ---- Faz stat stack ---- */
.whostats { display: grid; gap: .9rem; }
.ws { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: baseline; }
.wsn { font-family: var(--display); font-size: 1.35rem; font-weight: 600;
  color: var(--marigold); line-height: 1; font-variant-numeric: tabular-nums; }
.ws--one .wsn { color: var(--paper); }

/* ---- Pricing terms ---- */
.terms { display: grid; gap: .7rem; }
.term { display: grid; grid-template-columns: 1.6rem 1fr; gap: .6rem; align-items: start;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; }
.term p { color: var(--dim); line-height: 1.7; }
.term b { color: var(--paper); }
.tk { color: var(--marigold); font-weight: 700; }

/* ---- Apply assurances ---- */
.applyside { display: grid; gap: 1rem; align-content: start; }
.assure { background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 1.3rem 1.25rem; }
.assure h3 { font-family: var(--display); font-size: 1.1rem; color: var(--paper); margin-top: .5rem; }
.assure p { color: var(--dim); font-size: .93rem; margin-top: .5rem; line-height: 1.7; }
.ak { font-size: .82rem; font-weight: 700; letter-spacing: .06em; color: var(--marigold); }
.pmm-form-slot { display: block; }

/* ============================================================
   ABOVE THE FOLD
   On a phone the headline, lead and two stacked buttons pushed
   the demo widget, the only thing that proves the claim, off
   the screen. Tighter type and a side by side button row pull
   it back into view.
   ============================================================ */
@media (max-width: 720px) {
  .hero { padding-top: 1.4rem; }
  .hero h1 { font-size: clamp(2rem, 8.2vw, 2.5rem); line-height: 1.08; }
  .hero .lead { font-size: 1rem; line-height: 1.55; margin-top: .9rem; }
  .heroacts { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }
  .heroacts .btn { flex: 1 1 auto; text-align: center; padding-inline: 1rem; }
  .herofoot { margin-top: .8rem; }
}

/* One filled marigold button above the fold, not two. The header
   CTA is the fallback once the hero scrolls away, so it reads as
   secondary until then. */
header.site .btn {
  background: transparent;
  color: var(--marigold);
  border: 1px solid var(--marigold);
}
header.site .btn:hover { background: var(--marigold); color: #1A1207; }


/* ---- Apply form, two steps ---- */
.fprog { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem;
  margin-bottom: 1.4rem; color: var(--dimmer); font-size: .88rem; }
.fpon { color: var(--marigold); font-weight: 600; }
.fpsep { width: 1px; height: 14px; background: var(--line-2); }
.fnext { margin-top: 1.6rem; }
.fnextnote { margin-top: .8rem; }
.fend { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.fback { background: none; border: none; color: var(--dim); font: inherit;
  font-size: .92rem; cursor: pointer; padding: .6rem .2rem; text-decoration: underline;
  text-underline-offset: 3px; }
.fback:hover { color: var(--paper); }
.fback:focus-visible { outline: 2px solid var(--marigold); outline-offset: 2px; }
.fstep .fsec:focus { outline: none; }

/* Without JavaScript both steps show as one form, and the step
   chrome would only be confusing. */
.applyform:not([data-ready]) .fstep[hidden] { display: block; }
.applyform:not([data-ready]) .fnext,
.applyform:not([data-ready]) .fnextnote,
.applyform:not([data-ready]) .fback,
.applyform:not([data-ready]) .fprog { display: none; }


/* ============================================================
   POST BODY
   The single template shipped with no styles at all. These are
   the components the blog standard requires: an answer capsule,
   Faz commentary, real tables, and a readable long form column.
   See docs/blog-standard.md.
   ============================================================ */
.postmeta { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .6rem;
  align-items: center; color: var(--dimmer); font-size: .9rem; }
.mdot { color: var(--dimmer); }
.mby { color: var(--marigold); font-weight: 600; }

.postbody .wrap > .posthero { max-width: none; }
.posthero { margin-top: 0; margin-bottom: 2.4rem;
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line); background: var(--card); }
.posthero img { display: block; width: 100%; height: auto; }
.posthero figcaption { padding: .8rem 1.1rem; color: var(--dimmer); font-size: .88rem; }

/* The reading column.
   The measure belongs on the text, not on the container. Capping
   .entry-content instead trapped the tables inside a 788px box and left
   450px of the column empty down the right hand side. Text is centred at a
   readable measure; data and visuals break out to the full width. */
.postbody .wrap > *,
.postbody .entry-content { max-width: none; }

/* One shared length, not ch. The ch unit is relative to each element's own
   font, so 74ch on a 36px heading is nearly twice the width it is on 17px
   body copy and the two never line up. */
.postbody .entry-content { --measure: 48rem; }
.postbody .entry-content > p,
.postbody .entry-content > h2,
.postbody .entry-content > h3,
.postbody .entry-content > ul,
.postbody .entry-content > ol,
.postbody .entry-content > blockquote,
.postbody .entry-content > .capsule,
.postbody .entry-content > .keytake,
.postbody .entry-content > .srcnote {
  max-width: var(--measure);
  margin-inline: auto;
}
.postbody .entry-content > .fazsays { max-width: 52rem; margin-inline: auto; }
/* srcnote belongs to the block above it, so it lines up with the table. */
.postbody .entry-content > .tablewrap + .srcnote { max-width: none; margin-inline: 0; }
.postbody p { color: var(--dim); line-height: 1.8; margin-top: 1.15rem; font-size: 1.06rem; }
.postbody h2 { margin-top: 3rem; font-size: clamp(1.7rem, 3vw, 2.3rem); color: var(--paper); }
.postbody h3 { margin-top: 2.2rem; font-size: clamp(1.25rem, 2.2vw, 1.5rem); color: var(--paper); }
.postbody strong, .postbody b { color: var(--paper); font-weight: 600; }
/* Buttons are excluded. .postbody a outranks .btn, so without :not() the
   CTA rendered marigold text on a marigold background and vanished. */
.postbody a:not(.btn) { color: var(--marigold); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px; }
.postbody a:not(.btn):hover { text-decoration-thickness: 2px; }
.postbody .btn { color: #1A1207; text-decoration: none; }
.postbody ul, .postbody ol { margin-top: 1.15rem; padding-left: 0;
  list-style: none; display: grid; gap: .65rem; }
.postbody ul li { position: relative; padding-left: 1.4rem; color: var(--dim); line-height: 1.7; }
.postbody ul li::before { content: ""; position: absolute; left: 0; top: .7em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--marigold); }
.postbody ol { counter-reset: pn; }
.postbody ol li { position: relative; padding-left: 2rem; color: var(--dim); line-height: 1.7;
  counter-increment: pn; }
.postbody ol li::before { content: counter(pn); position: absolute; left: 0; top: 0;
  color: var(--marigold); font-weight: 700; font-variant-numeric: tabular-nums; }
.postbody blockquote { margin-top: 1.6rem; padding-left: 1.2rem;
  border-left: 2px solid var(--marigold); color: var(--paper);
  font-family: var(--display); font-size: 1.2rem; line-height: 1.6; }

/* ---- Answer capsule: 60 words, liftable whole ---- */
.capsule { margin-top: 2rem; background: var(--card);
  border: 1px solid var(--line-2); border-left: 3px solid var(--marigold);
  border-radius: 12px; padding: 1.3rem 1.4rem; }
.capsule .caplab { display: block; font-size: .8rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--marigold); }
.capsule p { margin-top: .55rem; color: var(--paper); font-size: 1.1rem;
  line-height: 1.65; max-width: 68ch; }

/* ---- Faz commentary: the part nobody can copy ---- */
.fazsays { margin-top: 2rem; background: var(--raise);
  border: 1px solid var(--line-2); border-radius: 14px;
  padding: 1.4rem 1.5rem; display: grid;
  grid-template-columns: 56px minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.fazsays img { width: 56px; height: 56px; border-radius: 50%; display: block;
  border: 1px solid var(--line-2); background: var(--card); }
.fazsays .fzname { font-size: .84rem; font-weight: 700; letter-spacing: .04em;
  color: var(--marigold); }
.fazsays p { margin-top: .4rem; color: var(--paper); line-height: 1.75; font-size: 1rem; }
.fazsays p + p { margin-top: .8rem; }
@media (max-width: 560px) {
  .fazsays { grid-template-columns: 1fr; gap: .8rem; }
  .fazsays img { width: 48px; height: 48px; }
}

/* ---- Tables: extractable reference data ---- */
.postbody .tablewrap { margin-top: 1.8rem; max-width: none;
  overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.postbody table { width: 100%; border-collapse: collapse; font-size: .95rem;
  min-width: 34rem; }
.postbody caption { caption-side: bottom; padding: .8rem 1rem;
  color: var(--dimmer); font-size: .86rem; text-align: left; }
.postbody thead th { text-align: left; padding: .9rem 1rem;
  background: var(--raise); color: var(--paper); font-weight: 600;
  font-size: .88rem; letter-spacing: .03em;
  border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.postbody tbody td, .postbody tbody th { padding: .85rem 1rem; color: var(--dim);
  border-top: 1px solid var(--line); line-height: 1.6; vertical-align: top; }
.postbody tbody th { text-align: left; color: var(--paper); font-weight: 600; }
.postbody tbody tr:nth-child(even) td,
.postbody tbody tr:nth-child(even) th { background: rgba(255,255,255,.014); }
.postbody td .num, .postbody .tabnum { font-variant-numeric: tabular-nums; color: var(--paper); }

/* ---- Source note under a data block ---- */
.srcnote { margin-top: .7rem; color: var(--dimmer); font-size: .88rem; line-height: 1.6; }

/* ---- Key takeaway pull ---- */
.keytake { margin-top: 2rem; border: 1px dashed var(--line-2); border-radius: 12px;
  padding: 1.2rem 1.3rem; background: rgba(255,154,46,.045); }
.keytake .ktl { display: block; font-size: .8rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--marigold); }
.keytake p { margin-top: .5rem; color: var(--paper); line-height: 1.7; }


/* ============================================================
   BLOG INDEX
   templates/home.html renders the posts loop. These classes had
   no rules at all, so the archive would have shipped as browser
   defaults the moment it stopped being an empty page.
   ============================================================ */
.postlist .wp-block-query { margin-top: 2.4rem; }
.postlist .wp-block-post-template {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.postcard {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 1.6rem 1.5rem; display: grid; align-content: start; gap: .5rem;
  transition: border-color .18s, transform .18s;
}
.postcard:hover { border-color: var(--line-2); transform: translateY(-2px); }

.pdate { font-size: .8rem; font-weight: 600; letter-spacing: .05em;
  color: var(--marigold); text-transform: uppercase; }

.ptitle { font-family: var(--display); font-size: 1.3rem; line-height: 1.3; margin: 0; }
.ptitle a { color: var(--paper); text-decoration: none; }
.ptitle a:hover { color: var(--marigold); }

.pexcerpt { color: var(--dim); font-size: .95rem; line-height: 1.65; margin: 0; }
.pexcerpt p { margin: 0; }
.pexcerpt .wp-block-post-excerpt__more-link {
  display: inline-block; margin-top: .7rem; color: var(--marigold);
  font-size: .92rem; font-weight: 600; text-decoration: none;
}
.pexcerpt .wp-block-post-excerpt__more-link:hover { text-decoration: underline; }

.ppager { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: .5rem;
  align-items: center; justify-content: center; }
.ppager a, .ppager span {
  min-width: 44px; min-height: 44px; display: inline-grid; place-items: center;
  padding: .5rem .85rem; border: 1px solid var(--line); border-radius: 10px;
  color: var(--dim); text-decoration: none; font-size: .95rem;
}
.ppager a:hover { border-color: var(--marigold); color: var(--paper); }
.ppager .current { background: var(--marigold); border-color: var(--marigold);
  color: #1A1207; font-weight: 600; }

/* ---- Code blocks in posts ---- */
.postbody .codeblock { margin-top: 1.6rem; max-width: none;
  background: var(--raise); border: 1px solid var(--line-2); border-radius: 12px;
  overflow-x: auto; }
.postbody .codeblock pre { margin: 0; padding: 1.2rem 1.3rem;
  font-family: var(--mono); font-size: .86rem; line-height: 1.65;
  color: var(--paper); white-space: pre; tab-size: 2; }
.postbody .codeblock code { font: inherit; color: inherit; background: none; }
.postbody p code, .postbody li code {
  font-family: var(--mono); font-size: .9em; padding: .12em .38em;
  background: var(--raise); border: 1px solid var(--line);
  border-radius: 5px; color: var(--paper); }

/* ---- Classes that were rendering with no rules at all ---- */
/* .adate is the date on the homepage blog cards. Without this it inherited
   the body size and the link colour from its <a> parent, so it read as body
   copy rather than a date label. Matches .pdate on the blog index. */
.adate { display: block; font-size: .8rem; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--marigold); }
.acard-link .adate { color: var(--marigold); }

/* Footer brand block: the mark, the wordmark and the one line under them. */
.footbrand { display: grid; gap: .8rem; align-content: start; max-width: 34ch; }
.footbrand .brand { display: inline-flex; align-items: center; gap: .6rem; }
.footbrand p { color: var(--dim); font-size: .94rem; line-height: 1.65; }

/* Post template wrapper. No visual role, but it should not be a layout hazard. */
.postmain { display: block; }


/* ============================================================
   POST TYPE SCALE
   Body text in a post had six different sizes: 16.96px for
   paragraphs, 17.6 in the capsule, 16 in Faz blocks, 15.2 in
   table cells, 14.08 in table headers, 13.76 in captions. Read
   together it looked arbitrary, and tables felt shrunken next
   to the prose.

   Two steps now, and only two:
     --post-text   everything you read as body copy, tables included
     --post-small  genuine small print: captions and source notes

   Change the two values here and the whole post follows.
   ============================================================ */
.postbody {
  --post-text: 1rem;
  --post-small: .875rem;
}

/* Body copy, lists, and every block that carries prose. */
.postbody p,
.postbody li,
.postbody .capsule p,
.postbody .keytake p,
.postbody .fazsays p,
.postbody .faq .ans p,
.postbody .checkcta p {
  font-size: var(--post-text);
}

/* Tables match the prose exactly. This is the bit that looked wrong. */
.postbody table,
.postbody tbody td,
.postbody tbody th,
.postbody thead th {
  font-size: var(--post-text);
}

/* Small print stays small, and is the same small everywhere.
   .srcnote is a <p>, so `.postbody p` was outranking it and it
   rendered at full body size. Scoped higher here on purpose. */
.postbody caption,
.postbody .srcnote,
.postbody p.srcnote,
.postbody .entry-content > .srcnote {
  font-size: var(--post-small);
}

/* Line height follows the size so the rhythm holds. */
.postbody p,
.postbody .faq .ans p { line-height: 1.75; }
.postbody li { line-height: 1.7; }
.postbody tbody td,
.postbody tbody th { line-height: 1.6; }
.postbody caption,
.postbody .srcnote { line-height: 1.6; }