/* Alium Intel — shared design system.
   Type: Fraunces (display serif) · Hanken Grotesk (body) · IBM Plex Mono (data/labels).
   Per-page accent comes from CSS custom properties set in each page's :root:
   --accent, --accent-ink, --accent-bg (used by in-article visuals: gauge, ramps, chips). */

/* Self-hosted fonts — latin woff2 subsets in intel-assets/ (versioned filenames, immutable).
   Fraunces + Hanken Grotesk are variable files; Plex Mono is three statics. No italic faces
   shipped — the only italics (.evidence em, sans) synthesize, same as before self-hosting.
   Fraunces carries opsz+wght only, so "SOFT"/"WONK" variation settings stay inert (as they
   were on the Google-served subset). Critical files are preloaded in partials/head.html. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 600;font-display:swap;
  src:url(/research/intel-assets/fraunces-v38-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/research/intel-assets/hanken-grotesk-v12-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(/research/intel-assets/ibm-plex-mono-v20-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(/research/intel-assets/ibm-plex-mono-v20-500-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url(/research/intel-assets/ibm-plex-mono-v20-600-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* type roles */
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Alium public brand, matching www.alium.io (2026-10-12; was the app's purple + yellow). */
  --blue:#1F5EFF;--blue-deep:#1546CC;--blue-tint:#E5ECFF;
  --cream:#F7ECDA;--cream-deep:#ECDCC2;--site-ink:#15131A;
  --poppins:"Poppins",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --link:var(--blue);

  /* neutrals — a white reading page under the cream chrome; purple-cast ink and greys */
  --ink:#17141d;--sub:#5b5666;--faint:#938e9e;--line:#e8e4ee;
  --bg:#ffffff;--card:#ffffff;--panel:#f4f1f7;
  /* semantic status tints used by page-level pills (.stage/.pill) */
  --red:#b3382c;--red-bg:#fbf0ee;--gold:#9a6c00;--gold-bg:#fdf6e3;--green:#0d7a4f;--green-bg:#edf7f1;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font:400 17px/1.62 var(--sans);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.wrap{max-width:728px;margin:0 auto;padding:0 24px}
a{color:var(--link);text-underline-offset:2px}

/* serif display — Fraunces, soft optical axis, tight */
h1,h2,.stat .n{font-family:var(--serif);font-optical-sizing:auto}

/* ---- channel chrome = the main site's (www.alium.io) header, 2026-10-12 (Alex: clicking
   Research from the site was jarring). Row 1 is a copy of the site header: cream, the
   black wordmark, the site nav in Poppins, pinned on scroll; its button is the page's
   always-visible ask (it replaced the purple sticky bar). Row 2 is the research nav and
   scrolls away with the page. The research fonts stay below the chrome on purpose.
   Keep row 1 in step with the site's _includes/header.html when its nav changes. */
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;
  src:url(/research/intel-assets/poppins-v24-500-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
header.site{position:sticky;top:0;z-index:40;background:rgba(247,236,218,.96);border-bottom:1px solid var(--cream-deep)}
header.site .wrap{max-width:1168px;display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px}
.logo{flex:none;display:inline-flex;align-items:center;text-decoration:none}
.logo img{width:92px;height:auto;display:block;filter:invert(1)}
.mnav{display:flex;align-items:center;gap:28px;font:500 15px/1 var(--poppins)}
.mnav a{color:var(--ink);text-decoration:none}
.mnav a:hover,.mnav a[aria-current="page"]{color:var(--blue)}
.mnav .hbtn,.mnav .hbtn:hover{background:var(--blue);color:#fff;padding:11px 20px;border-radius:999px;white-space:nowrap}
.mnav .hbtn:hover{background:var(--blue-deep)}

.subnav{background:var(--cream);border-bottom:1px solid var(--cream-deep)}
.subnav .wrap{max-width:1168px;display:flex;align-items:center;gap:24px;min-height:44px}
.sname{flex:none;font-family:var(--serif);font-size:15px;font-weight:600;color:var(--ink);text-decoration:none;padding-right:24px;border-right:1px solid var(--cream-deep);font-variation-settings:"opsz" 20,"wght" 600}
/* research nav: one destination per publishing format, then the page's crumb as
   context. Mono + uppercase so it reads as chrome, not as content. */
.snav{display:flex;align-items:center;gap:20px;min-width:0;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;text-transform:uppercase}
.snav a{flex:none;color:var(--sub);text-decoration:none;font-weight:500}
.snav a:hover{color:var(--blue)}
.crumb{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--faint);text-transform:uppercase}
/* The crumb is the only variable-width thing in the row, so it is the part that gives:
   it truncates rather than squeezing the format links. */
.snav .crumb{padding-left:20px;border-left:1px solid var(--cream-deep);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.snav .crumb:empty{display:none}

@media(max-width:860px){
  /* The site nav does not fit beside the wordmark on a tablet or phone: keep the
     wordmark and the ask, and let the research row carry navigation. */
  .mnav a:not(.hbtn){display:none}
  .subnav .wrap{flex-wrap:wrap;row-gap:8px;padding-top:10px;padding-bottom:10px}
  .sname{border-right:0;padding-right:0}
}
@media(max-width:640px){
  header.site .wrap{height:60px}
  .mnav .hbtn{padding:9px 16px;font-size:14px}
  /* Four format links do not fit one phone line; the row wraps rather than
     pushing the body wider than the viewport. */
  .snav{gap:14px;font-size:10.5px;flex-wrap:wrap;row-gap:8px}
  .snav .crumb{display:none}
}

.hero{padding:60px 0 8px}
.kicker{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.kicker::before{content:"";display:inline-block;width:18px;height:1px;background:var(--accent);vertical-align:middle;margin:-2px 10px 0 0}
h1{font-size:clamp(38px,6vw,54px);line-height:1.04;letter-spacing:-.02em;margin:18px 0 20px;font-variation-settings:"opsz" 120,"wght" 560,"SOFT" 48,"WONK" 0}
.dek{font-size:20px;line-height:1.5;color:var(--sub)}
.byline{display:flex;gap:22px;flex-wrap:wrap;margin:30px 0 0;padding:13px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:var(--faint);text-transform:uppercase}
.byline b{color:var(--ink);font-weight:500}

main{padding:42px 0 0}
h2{font-size:30px;line-height:1.12;margin:50px 0 14px;letter-spacing:-.018em;font-variation-settings:"opsz" 60,"wght" 540,"SOFT" 40,"WONK" 0}
p{margin:0 0 18px}
p.lead{font-size:19px;line-height:1.6}

.vlogo{width:22px;height:22px;border-radius:5px;vertical-align:-5px;margin-right:9px;background:#fff;border:1px solid var(--line)}
.vlogo.lg{width:28px;height:28px;vertical-align:-7px}

/* stats as a ruled data strip, not three boxes */
.statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:34px 0;border-top:2px solid var(--ink)}
/* Padding on BOTH sides of a divider, not just the left. The rule was
   `padding:18px 20px 4px 0` -- 20px before a column's own right border and zero
   after it, so every divider had 21px of air on one side and the next column's
   text hard against it on the other. The outer edges stay flush so the first
   column still lines up with body copy and the last with the wrap's right edge. */
.stat{padding:18px 20px 4px 20px;border-right:1px solid var(--line)}
.stat:first-child{padding-left:0}
.stat:last-child{border-right:none;padding-right:0}
.stat .n{font-size:42px;font-weight:560;letter-spacing:-.02em;line-height:1;font-variation-settings:"opsz" 80,"wght" 560,"SOFT" 40}
.stat .l{font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--sub);margin-top:12px;text-transform:uppercase;letter-spacing:.02em}

/* Every table is wrapped in .tablewrap by build.py (#93). width:100% does not stop a
   table exceeding its container — the cells' intrinsic minimum wins, and td.vendor's
   nowrap plus the fixed 100px .bar put a hard floor under each row. Uncontained, that
   overflow escapes to the document and slides the whole page sideways on a phone. The
   margin lives on the wrapper so the outer rhythm is unchanged; overflow-x on it also
   opens a block formatting context, which is why the table's own margin is zeroed. */
.tablewrap{overflow-x:auto;margin:24px 0}
.tablewrap > table{margin:0}
table{width:100%;border-collapse:collapse;margin:24px 0;font-size:15px}
caption{caption-side:bottom;font-family:var(--mono);font-size:11.5px;line-height:1.5;color:var(--faint);text-align:left;padding-top:12px}
th{text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);font-weight:500;padding:0 12px 10px 0;border-bottom:1.5px solid var(--ink)}
td{padding:15px 12px 15px 0;border-bottom:1px solid var(--line);vertical-align:middle}
td.vendor{white-space:nowrap;font-weight:600}
td.num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}

/* signature: the rating as a hairline tick-gauge (0–10), not a rounded dashboard bar.
   Each cell sets the fill via inline --v (%, where 100% = 10.0 — e.g. 7.9 -> --v:79%).
   Width-independent (issue #10): fill and quartile ticks are percentages of the track,
   so a narrower render (dense table, mobile) rescales instead of silently overflowing. */
.bar{position:relative;display:inline-block;width:100px;height:11px;vertical-align:middle;margin-right:13px;overflow:hidden}
.bar::before{content:"";position:absolute;inset:0;border-right:1px solid var(--line);background:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 25%)}
.bar::after{content:"";position:absolute;left:0;top:50%;height:2px;width:var(--v,0);max-width:100%;background:var(--accent);transform:translateY(-50%)}
/* thin-sample marker (F5 floor): a vendor we cover but won't put a number on.
   Reads as a deliberate abstention, not a missing cell — so use this instead of
   leaving td.num empty whenever n is below the publish floor. */
.nr{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--faint)}

/* ---- comparison format: at-a-glance table + relative-cost axis (issue #14) ----
   These two ship to all 65 "X vs Y" pages, so they live here rather than inline.
   The six older comparison components (.verdict/.shape/.words/.cautions/.decider
   /.personas) are duplicated in all 65 sources, which is the pattern these would
   otherwise match — but pasting a component into 65 files makes its next restyle a
   65-file sweep, and CLAUDE.md's own rule says a component used by most pages gets
   promoted. Hoisting the other six is the same move and a separate change.

   FIXED SIDES apply here exactly as they do to the butterfly: vendor X (first in the
   title) is always the left column and always the marker above the axis. A reader
   tracking a vendor down the page must never have to re-read which side it is on. */

/* At-a-glance — the surface answer engines extract most reliably, which is precisely
   why it introduces NO claim of its own: every cell restates something the page has
   already established and mined. A summary that can drift from its own page is worse
   than no summary. No numbers, same as the rest of the format. */
.cmp thead th{font-family:var(--serif);font-size:18px;font-weight:600;letter-spacing:-.01em;text-transform:none;color:var(--ink);padding-bottom:12px;vertical-align:bottom}
.cmp thead th img{width:18px;height:18px;border-radius:3px;border:1px solid var(--line);background:#fff;vertical-align:-3px;margin-right:7px}
.cmp tbody th{text-align:left;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);border-bottom:1px solid var(--line);padding:14px 14px 14px 0;vertical-align:top}
.cmp td{padding:14px 14px 14px 0;vertical-align:top;line-height:1.45}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:2px solid var(--ink)}
.cmp th:first-child{width:22%}
.cmp td{width:39%}

/* Relative cost — two markers on ONE labelled low→premium axis. A POSITION, never a
   filled meter: a bar that fills from zero reads as a score, and this format publishes
   none. It is also not the .bar tick-gauge for the same reason. No dollar figures
   (Roy's ruling) — the axis is labelled in words and the markers are relative to each
   other within this pair only, so it says nothing about a third vendor.
   Vendor X sits above the line, vendor Y below, so the two labels cannot collide no
   matter how close the positions are. Keep --p between 10% and 90%: nearer the edge
   the label clips, and at this resolution 90% and 100% say the same thing. */
.cost{margin:26px 0 10px;border-top:2px solid var(--ink);padding-top:18px}
.cost .axis{position:relative;height:92px;margin:0 2px}
.cost .track{position:absolute;left:0;right:0;top:50%;height:11px;transform:translateY(-50%);background:linear-gradient(var(--ink),var(--ink)) 0 50%/100% 1px no-repeat,linear-gradient(var(--faint),var(--faint)) 0 0/1px 100% no-repeat,linear-gradient(var(--faint),var(--faint)) 50% 0/1px 100% no-repeat,linear-gradient(var(--faint),var(--faint)) 100% 0/1px 100% no-repeat}
.cost .mk{position:absolute;left:var(--p);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center}
.cost .mk.up{bottom:50%}
.cost .mk.down{top:50%;flex-direction:column-reverse}
.cost .mk b{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);white-space:nowrap;background:var(--bg);padding:0 3px}
.cost .mk b img{width:15px;height:15px;border-radius:3px;border:1px solid var(--line);background:#fff}
.cost .mk i{width:1px;height:24px;background:var(--accent)}
.cost .mk::after{content:"";position:absolute;left:50%;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--bg)}
.cost .mk.up::after{bottom:-4.5px}
.cost .mk.down::after{top:-4.5px}
.cost .ends{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-top:6px}

/* compact index rows — used by the main index and the comparison hub.
   Each row sets its family hue via inline --a. */
/* compact rows: the angle pages (Lessons / Pricing / Switching / …) under a family's flagship */
.rows{margin:18px 0 0}
.row{display:grid;grid-template-columns:150px 1fr auto;gap:16px;align-items:baseline;padding:14px 2px;border-top:1px solid var(--line);text-decoration:none;color:var(--ink)}
.rows .row:last-child{border-bottom:1px solid var(--line)}
/* a card-less group (comparisons) puts .rows straight under the .glabel rule —
   the first row's top border would double it up */
.glabel + .rows{margin-top:0}
.glabel + .rows .row:first-child{border-top:0}
.row .tag{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--a);line-height:1.35}
.row h3{font-family:var(--serif);font-size:19px;font-weight:700;line-height:1.25;letter-spacing:-.01em;margin:0}
.row .rd{font-size:14px;line-height:1.5;color:var(--sub);margin:3px 0 0}
.row .go{font-size:15px;font-weight:600;color:var(--a)}
.row:hover h3{color:var(--a)}

/* evidence = quoted buyer testimony; clean sans so a stack of them reads calmly */
.evidence{font-family:var(--sans);font-size:16.5px;line-height:1.55;color:var(--ink);border-left:2px solid var(--accent);padding:3px 0 3px 20px;margin:22px 0}
.evidence em{font-style:italic}
.evidence .who{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.03em;text-transform:uppercase;color:var(--faint);margin-top:10px}
.evidence .who b{color:var(--ink);font-weight:500}

/* counter-current = editorial sidebar, flat */
.counter{background:var(--panel);border-left:2px solid var(--red);padding:20px 24px;margin:28px 0}
.counter h3{font-size:16px;font-weight:700;color:var(--red);margin-bottom:8px;letter-spacing:-.01em}
.counter p{font-size:16px;margin-bottom:0;color:var(--ink)}

.faq{margin:10px 0 0}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{font-weight:600;font-size:17px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--accent);font-size:18px;flex-shrink:0}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:12px 0 0;color:var(--sub);font-size:16px}

/* ---- conversion system (template v2, issue #12): one visual language for every ask.
   .ybtn is the single button class shared by every in-page placement (mid-page, strip,
   final CTA) so they can't drift apart; the header's .hbtn is the same pill. Since
   2026-10-12 the ask is the site's: a blue pill, matching www.alium.io's buttons
   (was purple ground + yellow button). Nothing else on a page is a blue pill. */
.ybtn{display:inline-block;background:var(--blue);color:#fff;font:500 15px/1 var(--poppins);border-radius:999px;padding:14px 24px;text-decoration:none;text-align:center;white-space:nowrap;cursor:pointer;border:none}
.ybtn:hover{background:var(--blue-deep);color:#fff}

/* mid-page asks: author-placed at the page's peak-intent moments (1–2 per page).
   Hrefs must use the {{ask_url_mid1}}/{{ask_url_mid2}}/{{ask_url_strip}} tokens so
   every placement carries its own utm_content — build.py enforces this. A white card
   with a hairline: the pill carries the ask, the card only frames it. */
.midcta{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:22px 26px;margin:34px 0;display:flex;align-items:center;gap:20px;justify-content:space-between;flex-wrap:wrap}
.midcta .mt{font-family:var(--serif);font-size:20px;font-weight:600;line-height:1.3;max-width:520px;font-variation-settings:"opsz" 40,"wght" 560}
.midcta .mt small{display:block;font-family:var(--sans);font-size:13.5px;font-weight:400;color:var(--sub);margin-top:6px;line-height:1.5}
.midcta .ybtn{flex:none}
.ctastrip{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:14px 20px;margin:26px 0;display:flex;align-items:center;gap:16px;justify-content:space-between;flex-wrap:wrap}
.ctastrip p{margin:0;font-size:15px;font-weight:500;color:var(--ink)}
.ctastrip .ybtn{flex:none;font-size:14px;padding:11px 18px}

/* trust line ("who we interview") directly under the byline — buys back the
   credibility we spend on anonymity. Injected by build.py; audience via meta. */
.trust{font-family:var(--mono);font-size:11.5px;color:var(--faint);line-height:1.6;margin:14px 0 0}

/* neutral vendor monogram — NEVER a valence-carrying colour next to a vendor name
   (a green dot beside one vendor and red beside the other silently picks a winner) */
.mgram{width:18px;height:18px;border-radius:5px;background:var(--accent-bg);border:1px solid var(--line);color:var(--accent-ink);font-family:var(--mono);font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none;vertical-align:-3px;margin-right:7px}

/* "who this is for" hero chip (Buyer-Truth) — helps the reader self-select */
.forwho{font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;color:var(--accent-ink);background:var(--accent-bg);display:inline-block;padding:5px 11px;border-radius:6px;margin:0 0 14px;line-height:1.5}

/* actionable checklist (replaces the prose synthesis on Buyer-Truth pages) */
.checklist{list-style:none;padding:0;margin:16px 0 8px}
.checklist li{position:relative;padding:12px 0 12px 32px;border-bottom:1px solid var(--line);font-size:16px}
.checklist li b{color:var(--accent-ink)}
.checklist li::before{content:"\2713";position:absolute;left:2px;top:12px;color:var(--accent);font-weight:700;font-family:var(--mono)}

/* related-page nudges: .xlinks (cross-links to comparisons) and .third (third-option)
   share a shell — they keep the undecided reader in the ecosystem */
.xlinks,.third{border:1px solid var(--line);border-radius:10px;padding:20px 22px;margin:28px 0}
.xlinks h3,.third h3{font-family:var(--serif);font-size:18px;font-weight:600;margin:0 0 10px}
.xlinks .opts,.third .opts{display:flex;flex-wrap:wrap;gap:10px}
.xlinks .opt,.third .opt{font-size:13.5px;border:1px solid var(--line);border-radius:6px;padding:9px 13px;text-decoration:none}
.third .opt{flex:1 1 180px;color:var(--ink)}
.third .opt b{display:block;margin-bottom:2px}
.third .opt span{color:var(--faint);font-size:12.5px}

/* CTA — the page's closing ask, an ink block like the site's closing section, with the
   same blue pill as every other ask */
.cta{background:var(--site-ink);color:#fff;border-radius:14px;padding:46px 36px;margin:58px 0 0;text-align:center}
.cta h2{margin:0 0 12px;color:#fff;font-size:30px;font-variation-settings:"opsz" 60,"wght" 540,"SOFT" 50}
.cta p{color:#d9d6de;max-width:46ch;margin:0 auto 24px;font-size:16px;line-height:1.55}
.cta .ybtn{font-size:16px;padding:16px 28px}
.cta .fine{font-family:var(--mono);font-size:11px;letter-spacing:.02em;text-transform:uppercase;color:#a29eaa;margin:16px auto 0}

/* secondary offer: email capture as its OWN section below the CTA — outlined (light)
   vs the CTA's filled ink block, so the two asks read as different weights */
.secondary{border:1px solid var(--line);background:var(--card);border-radius:14px;padding:22px 24px;margin:14px 0 0;display:flex;align-items:center;gap:20px;justify-content:space-between;flex-wrap:wrap}
.secondary .st{max-width:460px}
.secondary .st b{display:block;font-family:var(--serif);font-size:17px;font-weight:600;margin-bottom:3px}
.secondary .st span{font-size:14px;color:var(--sub);line-height:1.5}
.microrow{display:flex;gap:8px;flex:1 1 300px;max-width:380px}
/* 16px minimum — anything smaller triggers iOS Safari auto-zoom on focus (spec 2.5) */
.microrow input{flex:1;min-width:0;border:1px solid var(--line);border-radius:6px;padding:11px 12px;font-size:16px;font-family:var(--sans);background:var(--bg);color:var(--ink)}
.microrow .ebtn{background:transparent;color:var(--blue);border:1.5px solid var(--blue);border-radius:6px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:0 14px;white-space:nowrap;cursor:pointer}
.microrow .ebtn:hover{background:var(--blue);color:#fff}

.method{margin:48px 0 0;padding:20px 22px;background:var(--panel);border-radius:6px;font-family:var(--mono);font-size:12.5px;line-height:1.6;color:var(--sub)}
.method b{color:var(--ink);font-weight:600}

footer.site{margin-top:66px;border-top:1px solid var(--line);padding:26px 0 46px;font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:var(--faint);text-transform:uppercase}
footer.site .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
footer.site a{color:var(--sub)}

@media(max-width:640px){
  .hero{padding:40px 0 8px}
  h1{margin-top:14px}
  .statgrid{grid-template-columns:1fr;border-top:none}
  .stat{border-right:none;border-top:1px solid var(--line);padding:16px 0 10px}
  .stat:first-child{border-top:2px solid var(--ink)}
  .midcta{flex-direction:column;align-items:stretch;padding:20px;gap:14px}
  .midcta .mt{font-size:18px}
  /* in-flow ask buttons go full-width AND wrap — the longest label
     ("…15-min interview") is wider than a phone at white-space:nowrap */
  .midcta .ybtn,.ctastrip .ybtn,.cta .ybtn{display:block;width:100%;white-space:normal}
  .ctastrip{flex-direction:column;align-items:stretch;gap:12px}
  .secondary{flex-direction:column;align-items:stretch;padding:20px}
  /* flex:1 in a container that flips to column stretches VERTICALLY — reset it (spec 2.4) */
  .microrow{max-width:none;flex-direction:column;flex:none}
  .microrow input{flex:none;width:100%}
  .microrow .ebtn{flex:none;padding:13px 14px}
  .third .opt{flex:1 1 100%}
}