/* 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 brand (from the app design system): purple primary, blue secondary, yellow highlight. */
  --brand-purple:#580081;--brand-purple-deep:#42005f;--brand-blue:#365dcc;--brand-yellow:#e5e57a;--brand-navy:#00005f;
  --link:#3f51c9;

  /* neutrals — cool paper + purple-cast ink (ties to brand), not the default blue-grays */
  --ink:#17141d;--sub:#5b5666;--faint:#938e9e;--line:#e8e4ee;
  --bg:#fbfaf8;--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}

header.site{border-bottom:1px solid var(--line);background:var(--bg)}
/* The header bar is wider than the reading column (880 vs 728) because the chrome
   has more to carry than the article does: wordmark + five format destinations +
   the crumb. At 728 the budget was over by ~70px and the crumb -- the ONLY place a
   page's category and format live, since killing the eyebrow -- was the part that
   got cut, so "Customer service · Alternatives" rendered as "CUSTOMER SER…". That
   is the one label on the page that cannot afford to truncate.
   880 is not a new number: the index and the format hubs already set .wrap to 880,
   so their headers were 880 while every article page's was 728. Making the bar 880
   everywhere fixes the truncation and makes the chrome consistent, rather than
   matching the article measure it never needed to match. The ellipsis below stays
   as a graceful fallback if a future crumb outgrows even this. */
header.site .wrap{max-width:880px;display:flex;align-items:center;justify-content:space-between;gap:32px;padding-top:18px;padding-bottom:18px}
.logo{flex:none}
.logo{display:inline-flex;align-items:center;text-decoration:none}
.logo img{height:26px;width:auto;display:block}
/* header 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}
.snav a{color:var(--sub);text-decoration:none;font-weight:500}
.snav a:hover{color:var(--brand-purple)}
.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 header, so it is the part
   that gives: it truncates rather than squeezing the nav into the wordmark
   (a 33-character crumb closed the gap to zero before this). */
.snav .crumb{padding-left:20px;border-left:1px solid var(--line);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.snav .crumb:empty{display:none}

@media(max-width:640px){
  /* Four format destinations no longer fit beside the wordmark on a phone, so the
     nav drops to its own line rather than overflowing the header. */
  header.site .wrap{flex-wrap:wrap;row-gap:12px}
  /* Five destinations do not fit one phone line either -- at 375 the fifth link
     pushed the body 28px wider than the viewport, which is a horizontal scroll on
     every page. The nav wraps to a second line rather than overflowing. */
  .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 placement (sticky bar, mid-page,
   final CTA, strip) so the placements can't drift apart. Purple ground + yellow
   button = the ask; nothing else on a page uses this pairing. */
.ybtn{display:inline-block;background:var(--brand-yellow);color:var(--brand-navy);font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;border-radius:6px;padding:13px 20px;text-decoration:none;text-align:center;white-space:nowrap;cursor:pointer;border:none}
.ybtn:hover{filter:brightness(.96)}

/* sticky ask: page-wide bar, hidden (by the inline script in partials/stickybar.html)
   while the reader is at the main CTA or below it scrolling down. Degrades to
   always-visible without JS. */
.stickybar{position:sticky;top:0;z-index:40;background:var(--brand-purple);color:#fff;border-bottom:1px solid var(--brand-purple-deep);transition:opacity .25s ease,transform .25s ease}
.stickybar.hide{opacity:0;transform:translateY(-100%);pointer-events:none}
.stickybar .wrap{display:flex;align-items:center;gap:12px;justify-content:space-between;padding-top:9px;padding-bottom:9px}
.stickybar p{margin:0;font-size:13.5px;font-weight:500}
.stickybar .ybtn{flex:none;font-size:11.5px;padding:8px 14px}
@media(prefers-reduced-motion:reduce){.stickybar{transition:none}}

/* 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. */
.midcta{background:var(--brand-purple);color:#fff;border-radius:10px;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:#e3d4ef;margin-top:6px;line-height:1.5}
.midcta .ybtn{flex:none}
.ctastrip{background:var(--brand-purple);color:#fff;border-radius:8px;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:#fff}
.ctastrip .ybtn{flex:none;font-size:11px;padding:10px 16px}

/* 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 — flat brand purple block (confident, no gradient) */
.cta{background:var(--brand-purple);color:#fff;border-radius:6px;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:#e3d4ef;max-width:46ch;margin:0 auto 24px;font-size:16px;line-height:1.55}
.cta .ybtn{font-size:13px;padding:15px 26px}
.cta .fine{font-family:var(--mono);font-size:11px;letter-spacing:.02em;text-transform:uppercase;color:#bda6d2;margin:16px auto 0}

/* secondary offer: email capture as its OWN section below the CTA — outlined (light)
   vs the CTA's filled purple, so the two asks read as different weights */
.secondary{border:1px solid var(--line);background:var(--card);border-radius:6px;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(--brand-purple);border:1.5px solid var(--brand-purple);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(--brand-purple);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)}
  .stickybar .wrap{padding-top:8px;padding-bottom:8px;gap:10px;flex-wrap:nowrap}
  .stickybar p{font-size:12px;line-height:1.35}
  .stickybar .ybtn{font-size:10.5px;padding:8px 11px}
  .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 mono uppercase 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%}
}