/*
  Palette: Navy + Sky Blue + White ("Trust & Professionalism"), picked to
  match this page's keywords — simple, educational, serious, technical,
  trustworthy — per landingpageflow.com's color-combination guide. Their
  raw accent (#00A8E8) fails WCAG AA against white (~2.7:1), so the accent
  here is #0071e3 instead: same sky-blue family, but it clears 4.5:1 on
  white (verified via the WCAG relative-luminance formula, not eyeballed),
  so it's usable as real text/link color, not just a button fill. --ink is
  a deep navy rather than near-black, for a more "serious/institutional"
  read than a neutral gray-black would give.

  Layout: the article's own sample screenshots run the color combination
  edge-to-edge (image/graphic on one side, text on the other, both filling
  the viewport) rather than a narrow centered column with wide empty
  margins — this page follows that: a full-width two-column hero (text +
  a terminal panel) and full-width card rows below, left-aligned instead
  of center-stacked.
*/
:root{
  --bg:#fff;--bg-subtle:#f3f6fb;--ink:#12123a;--muted:#5a5a6e;--muted-2:#6b6b78;
  --blue:#0071e3;--blue-hover:#0059b3;--line:rgba(18,18,58,.12);
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:var(--sans);color:var(--ink);line-height:1.45;
  -webkit-font-smoothing:antialiased;background:var(--bg);
}
a{color:inherit;text-decoration:none}
.wrap{max-width:1320px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}

/* header itself stays full-bleed (the border-bottom line should span the
   whole viewport), but its CONTENT is capped by the same .wrap max-width
   as the page body — otherwise, past ~1320px+padding, the logo/nav (which
   used to hug the true screen edge via the header's own padding) drift
   away from the body content's left/right edges, which are capped and
   centered. .header-inner supplies the layout (grid, not flex: with 3
   flex siblings and justify-content:space-between, the two inner gaps
   resize around whatever width the nav link/arrow text happens to render
   at — which differs slightly between this page ("How it works →") and
   the technical page ("← Overview"), visibly nudging the logo and the
   audience chips sideways between the two pages even though their own
   markup/CSS is identical. A 1fr/auto/1fr grid pins the brand to the true
   left edge and the nav to the true right edge of THIS capped width
   regardless of either side's content width, so the centered audience
   column lands at the same x position on both pages — only the nav link
   itself differs). */
header{padding:clamp(12px,2.2vh,18px) 0;border-bottom:1px solid var(--line)}
.header-inner{display:grid;grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr);align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:9px;font-size:15px}
/* A flat card, not a divider line: grouping "Built for" + the audience
   chips inside their own light rectangle keeps them from reading as part
   of the nav ("How it works") sitting right next to them. */
.topaud{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(12px,1.8vw,22px);flex-wrap:nowrap;
  background:var(--bg-subtle);border-radius:8px;
  padding:8px 18px;
}
.topaud-label{font-size:11px;line-height:1;font-weight:700;color:var(--muted-2);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;display:flex;align-items:baseline;gap:4px}
.topaud-label b{font-size:14px;color:var(--ink)}
.topaud-item{display:flex;align-items:center;line-height:1;gap:6px;font-size:12.5px;font-weight:600;color:var(--muted-2);white-space:nowrap}
.topaud-item .g{color:var(--blue);display:flex}
.topaud-item .g svg{width:14px;height:14px}
.brand-badge{display:flex;flex-direction:column;align-items:center;justify-content:center;height:2.1em;width:2.1em;background:var(--blue);color:#fff;border-radius:.4em;overflow:hidden;font-family:inherit;font-weight:800}
.badge-letter{font-size:.8em;line-height:1;height:1em;display:flex;align-items:center;justify-content:center}
.badge-bar{width:1em;height:.115em;background:#fff;margin:.12em 0;flex-shrink:0}
.brand-stack{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:.16em;line-height:1}
.brand-word{font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--blue);font-size:.72em;line-height:1;white-space:nowrap}
.brand-word .cap{font-size:1.2em}
.hnav{display:flex;align-items:center;justify-content:flex-end;gap:18px;white-space:nowrap}
/* Fixed width + left-align, same value on both pages: "How it works →"
   and "← Overview" are different lengths, so right-aligning each to its
   own natural width (the default) put their LEFT edges at different x
   positions between the two pages — a click that lands on, say, the "w"
   in "works" would land on the "O" in "Overview" after navigating, since
   the shorter text's start sits further right. Pinning both to the same
   left-aligned box (sized to the longer phrase) keeps that x position
   consistent across the click-through. */
.hnav-link{font-size:13px;font-weight:600;color:var(--muted-2);width:100px;display:inline-block;text-align:left}
.hnav-link:hover{color:var(--blue)}
.navcta{border:1.5px solid var(--line);border-radius:999px;padding:7px 16px;font-size:13px;font-weight:600;color:var(--ink)}
.navcta:hover{border-color:var(--blue);color:var(--blue)}

/* Hero — full-width two-column split, left-aligned (not a centered card).
   Explicit row structure (not two tall column <div>s): the terminal card
   and the intro text share row 1 (so the card centers against just the
   headline block, not the whole left column), the stats row and the
   requirements line share row 2 (so that line sits at the same height as
   "120 challenges" etc. across the column gap, not just visually under
   the card), and the CTA row is row 3 alone. Source order drives the
   implicit grid placement — intro block, card, stats, meta, cta, in that
   order — rather than named grid-column/row on each item. */
.hero{
  display:grid;grid-template-columns:1.05fr 1fr;
  column-gap:clamp(28px,5vw,64px);row-gap:0;
  align-items:start;padding:clamp(28px,5vh,56px) 0;
}
.kicker{color:var(--blue);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}
h1{
  font-size:clamp(2rem,4.2vw,3.2rem);font-weight:700;letter-spacing:-.03em;
  line-height:1.08;color:var(--ink);margin-bottom:16px;
}
h1 .accent{color:var(--blue)}
.lede{font-size:clamp(1rem,1.5vw,1.15rem);color:var(--muted);max-width:520px;margin:0 0 22px}
.lede b{color:var(--ink);font-weight:700}
.stats{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--muted-2);font-weight:600;margin-top:18px;flex-wrap:wrap}
.stats b{color:var(--ink);font-weight:700}
.cta{grid-column:1;display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.btn{display:inline-block;background:var(--blue);color:#fff;border-radius:999px;padding:13px 26px;font-size:15.5px;font-weight:600}
.btn:hover{background:var(--blue-hover)}
.secondary{color:var(--blue);font-size:15.5px;font-weight:600}
.secondary:hover{color:var(--blue-hover)}
/* 33px = the kicker line's own height + margin-bottom (measured), so the
   card's top edge lines up with the h1's top edge, not the kicker's. */
.termcard-wrap{margin-top:33px;margin-bottom:28px}
.meta{font-size:12px;color:var(--muted-2);text-align:center}
.meta code{font-family:var(--mono);background:var(--bg-subtle);padding:2px 7px;border-radius:6px}

/* Right-hand terminal panel — fills the space a centered layout leaves empty */
.termcard{
  background:var(--ink);border-radius:18px;padding:20px 22px;
  box-shadow:0 20px 44px -18px rgba(18,18,58,.35);
  margin-bottom:14px;
}
.termcard .dots{display:flex;gap:7px;margin-bottom:14px}
.termcard .dots span{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.22)}
.termcard pre{
  font-family:var(--mono);font-size:12.5px;line-height:1.8;color:#dfe6f5;
  white-space:pre-wrap;word-break:break-word;
}
.termcard .c{color:#9aa3c4}
.termcard .ok{color:#5fe0a0}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hero-feats{margin-top:clamp(24px,4vh,40px);padding-bottom:clamp(28px,5vh,56px)}

.feat{background:var(--bg-subtle);border-radius:16px;padding:22px}
.feat-icon{width:38px;height:38px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--blue);margin-bottom:12px;box-shadow:0 1px 3px rgba(18,18,58,.08)}
.feat-icon svg{width:18px;height:18px}
.feat h2{font-size:1rem;font-weight:700;margin-bottom:6px;color:var(--ink)}
.feat p{color:var(--muted);font-size:.88rem;line-height:1.5}

/* Empirically measured (headless Chrome, real render): brand + all 4
   audience chips + nav genuinely need ~1160-1190px of content width in
   one row — below that, minmax(max-content,1fr) (which never shrinks a
   column below its content, by design, to avoid the old word-by-word
   wrap bug) makes the row overflow the viewport instead of wrapping,
   which is worse. 1280px hides it with real margin above that measured
   edge, accounting for scrollbar/font-metric variance across browsers —
   this is why the cutoff is here and not at the hero's own 900px
   breakpoint below. */
@media (max-width:1280px){
  .topaud{display:none}
}
@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  /* 1 column, not 2 — with exactly 3 cards, 2 columns always orphans the
     3rd one alone on a row, leaving an empty gap beside it (confirmed at
     768/834px, common tablet-portrait widths). */
  .grid3{grid-template-columns:1fr}
}
@media (max-width:560px){
  .hnav-link{display:none}
}

.site-footer{border-top:1px solid var(--line);margin-top:48px;padding:28px 0 36px;font-size:13px;color:var(--muted-2,#6b6b78)}
.site-footer .foot-inner{max-width:1320px;margin:0 auto;padding:0 clamp(20px,4vw,56px);display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;justify-content:space-between}
.site-footer nav{display:flex;flex-wrap:wrap;gap:6px 20px}
.site-footer a{color:var(--blue);font-weight:600}
.site-footer a:hover{color:var(--blue-hover)}
.site-footer .foot-note{flex-basis:100%;font-size:12px}
.ul{text-decoration:underline}

/* Sticky footer: keep the footer at the bottom of the window on tall screens. */
body{min-height:100vh;display:flex;flex-direction:column}
main{flex:1 0 auto}