/* ============================================================
   F/AS/T — fast.one

   How this file works
   -------------------
   One stylesheet for the whole site. No frameworks, no build
   step, no webfonts. Open it, read it top to bottom, edit it.

   It is written phone-first: every rule outside an @media block
   describes the phone layout. Two @media layers widen it:

      768px+   TABLET: grids go two-wide, nav sits inline
      1024px+  DESKTOP: everything at full size, grids three-wide

   Two more layers sit at the end: a dark-mode block that only
   swaps token values, and a print block that drops the furniture.

   Order of the file:

      1. Tokens          colours, type scale, spacing
      2. Reset + base    the few resets we actually need
      3. Layout          page shell, sections, rules
      4. Type            headings, eyebrows, lead paragraphs
      5. Components      nav, buttons, cards, steps, rows, form, footer
      6. Media queries   the width layers, then dark mode, then print
      ============================================================ */

/* ------------------------------------------------------------
   1. TOKENS

   Colours are sampled from the pitch deck so the site and the
   deck are the same brand:

      --blue   #479FF8  the wordmark blue. Bright, low contrast
                        on white — use it for fills, rules and
                        large display type, never small text.
      --link   #0B62C4  a darkened blue that clears 4.5:1 on
                        white. Every blue *word* uses this one.
      --grey   #929292  the slash grey in the F/AS/T wordmark.

   Dark mode overrides sit right below, so the two themes are
   readable side by side rather than pages apart.
   ------------------------------------------------------------ */

:root {
	--blue:      #479FF8;
	--link:      #0B62C4;
	--grey:      #929292;

	--ink:       #101114;   /* headings                          */
	--body:      #3F4247;   /* paragraphs                        */
	--muted:     #6E7278;   /* eyebrows, captions, meta          */
	--faint:     #A8ACB2;   /* the lightest text we allow        */

	--bg:        #FFFFFF;
	--bg-soft:   #F6F7F9;   /* one tone deeper: banded sections  */
	--rule:      #E4E6EA;   /* hairlines                         */
	--card:      #FFFFFF;
	--glass:     rgba(255, 255, 255, 0.82);   /* floating nav    */
	--on-blue:   #FFFFFF;   /* ink on a filled button            */
	--grid-line:  rgba(20, 22, 28, 0.05);     /* graph paper, fine  */
	--grid-major: rgba(20, 22, 28, 0.08);     /* every fifth line   */

	/* Spacing scale. Everything in the site uses one of these
	   six values, which is what keeps the vertical rhythm even. */
	--s1: 8px;
	--s2: 16px;
	--s3: 24px;
	--s4: 40px;
	--s5: 64px;
	--s6: 96px;

	/* Type scale. Eight tokens; every font-size on the site is one of
	   these or a component glyph (wordmark, stat numerals, arrows).
	   All values even by rule (17 Aug). Body steps up to 18px at
	   1024 by its own rule; everything else holds. */
	--t-h1:    clamp(36px, 6.4vw, 80px);
	--t-h2:    clamp(28px, 4.0vw, 44px);
	--t-big:   clamp(22px, 2.4vw, 28px);   /* claims, statement h3s */
	--t-lead:  clamp(18px, 2.1vw, 22px);
	--t-h3:    20px;
	--t-body:  16px;
	--t-small: 16px;   /* secondary text — kept apart from body so
	                      the tiers can split again in one line */
	--t-label: 14px;   /* the uppercase label tier */
	--t-label-track: 0.12em;   /* one tracking for that whole tier —
	                              it was split 0.1/0.14 while the sizes
	                              differed; at a uniform 14px the split
	                              showed (harmonized 17 Aug) */

	/* Letter colours — one per layer of the model. Olive is the
	   field (F: the people who show up), burgundy is the craft
	   (AS: the custom build), navy is the bedrock (T: the platform
	   underneath). The -soft versions are the same colours mixed
	   with white, for tinted backgrounds. */
	--olive:         #5F6B36;
	--olive-soft:    #E9EFD2;   /* page-top bands             */
	--olive-tint:    #F5F8EC;   /* small surfaces: tiles      */
	--olive-line:    #E5EBD2;   /* the tile's own hairline    */
	--burgundy:      #76303E;
	--burgundy-soft: #FBDCE4;
	--burgundy-tint: #FDEFF3;
	--burgundy-line: #F6D9E1;
	--navy:          #24466E;
	--navy-soft:     #DCE8FB;
	/* Navy's tint/line: the function panel and compounding cards on t.html. */
	--navy-tint:     #EFF5FD;
	--navy-line:     #D9E6F8;

	/* Corner radii and the two shadows. Everything rounded uses
	   one of these, which is what keeps the softness consistent. */
	--r-sm:   10px;
	--r-md:   14px;
	--r-lg:   20px;
	--r-pill: 999px;

	--lift:    0 1px 2px rgba(20, 22, 28, 0.04), 0 10px 30px rgba(20, 22, 28, 0.06);

	--measure: 40em;        /* comfortable reading width (34em until 17 Aug — widened with the shell) */
	--shell:   1280px;      /* max page width (1120 until 17 Aug) */

	/* Helvetica first — it is what the deck is set in, it is on
	   every Mac and iPhone, and it costs nothing to load. */
	--sans: "Helvetica Neue", Helvetica, Arial, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
	:root {
		--link:    #7FBBFA;   /* the bright blue reads fine on black */
		--ink:     #F2F3F5;
		--body:    #C3C7CD;
		--muted:   #8E949C;
		--faint:   #6B7178;

		--olive:         #A9B478;
		--olive-soft:    #17190F;
		--olive-tint:    #191C11;
		--olive-line:    #262B1A;
		--burgundy:      #C98B98;
		--burgundy-soft: #1F1114;
		--burgundy-tint: #201316;
		--burgundy-line: #2E1A20;
		--navy:          #8FB0D9;
		--navy-soft:     #0F1824;
		--navy-tint:     #121C29;
		--navy-line:     #1D2A3B;

		--bg:      #0C0D10;
		--bg-soft: #14161A;
		--rule:    #262A30;
		--card:    #14161A;
		--glass:   rgba(20, 22, 26, 0.78);
		/* The blue lightens in dark mode, so filled buttons need
		   dark ink, and the hero grid has to draw in white. */
		--on-blue:   #0A0D12;
		--grid-line:  rgba(255, 255, 255, 0.055);
		--grid-major: rgba(255, 255, 255, 0.09);

		/* Shadows barely read on black; the hairline does the work. */
		--lift:    0 1px 0 rgba(255, 255, 255, 0.04) inset;
	}
}

/* ------------------------------------------------------------
   2. RESET + BASE
   ------------------------------------------------------------ */

* { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
}

body {
	position: relative;
	margin: 0;
	background: var(--bg);
	color: var(--body);
	font: 400 var(--t-body)/1.6 var(--sans);
	letter-spacing: -0.003em;
	-webkit-font-smoothing: antialiased;
}

a {
	color: var(--link);
	text-decoration: none;
}

a:hover { text-decoration: underline; }

/* Keyboard focus must stay visible — several people will reach
   this site by tab, and the default ring is what tells them
   where they are. */
a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--link);
	outline-offset: 3px;
	border-radius: 2px;
}

img, svg { max-width: 100%; }

p  { margin: 0 0 var(--s2); }
ul { margin: 0 0 var(--s2); padding-left: 1.15em; }
li { margin-bottom: var(--s1); }

strong { color: var(--ink); font-weight: 600; }

/* The faint grid behind the top of every page. It sits on the body,
   not the hero, so it runs from the very top — under the floating
   masthead — and z-index -1 keeps it behind every section's own
   background, which is what crops it below the hero. */
body::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 700px;
	z-index: -1;
	background-image:
		linear-gradient(to right, var(--grid-major) 1px, transparent 1px),
		linear-gradient(to bottom, var(--grid-major) 1px, transparent 1px),
		linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
		linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
	background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
	mask-image: linear-gradient(to bottom, #000, transparent 78%);
	-webkit-mask-image: linear-gradient(to bottom, #000, transparent 78%);
	pointer-events: none;
}

/* ------------------------------------------------------------
   3. LAYOUT

   .shell centres and pads. .section owns the vertical rhythm.
   Nothing else sets top or bottom page margins, so sections
   always sit an even distance apart no matter how they are
   ordered or which ones get deleted.
   ------------------------------------------------------------ */

.shell {
	max-width: var(--shell);
	margin: 0 auto;
	padding: 0 var(--s3);
}

.section {
	padding: var(--s4) 0;
	background: var(--bg);
}

/* Bands are told apart by tone, not by rules — a hairline only
   appears where two same-toned sections would otherwise merge. */
.section:not(.section--soft) + .section:not(.section--soft) {
	border-top: 1px solid var(--rule);
}

.section--soft   { background: var(--bg-soft); }

/* Anchor jumps must clear the sticky masthead. */
section[id] { scroll-margin-top: 110px; }

/* A pause before the end of the page: whatever section runs into the
   CTA band gets extra room underneath, and so does the last section
   on pages that have no CTA. */
section:has(+ .cta) { padding-bottom: var(--s5); }
main > section:last-child:not(.cta) { padding-bottom: var(--s5); }

/* ------------------------------------------------------------
   4. TYPE

   Display sizes are set in vw-clamped rem so headlines scale
   with the viewport instead of stepping at breakpoints. Tight
   negative tracking on the big sizes is what makes Helvetica
   look set rather than typed.
   ------------------------------------------------------------ */

h1, h2, h3 {
	color: var(--ink);
	font-weight: 600;
	letter-spacing: -0.032em;
	line-height: 1.08;
	margin: 0 0 var(--s3);
	text-wrap: balance;
}

h1 { font-size: var(--t-h1); letter-spacing: -0.04em; }
/* Capped so long headlines break into two balanced lines instead of
   running the full 1280 shell — balance only evens lines out, it
   never forces the break. */
h2 { font-size: var(--t-h2); letter-spacing: -0.034em; max-width: 20em; }

h3 {
	font-size: var(--t-h3);
	font-weight: 600;
	letter-spacing: -0.012em;
	line-height: 1.3;
	margin-bottom: var(--s1);
}

/* The eyebrow — a small grey label above a heading. The deck
   puts a pale label at the top of every slide; this is that. */
.eyebrow {
	display: block;
	margin-bottom: var(--s2);
	color: var(--muted);
	font-size: var(--t-label);
	font-weight: 600;
	letter-spacing: var(--t-label-track);
	text-transform: uppercase;
}

.lead {
	max-width: var(--measure);
	color: var(--body);
	font-size: var(--t-lead);
	line-height: 1.55;
}

/* A block of running text, held to the reading measure. */
.prose { max-width: var(--measure); }

/* Anything that needs one rhythm-step of air above it. */
.gap-above { margin-top: var(--s3); }

/* A single sentence given its own line and weight, for the lines that carry
   an argument — e.g. "Forward is a position, not a seniority." Never for a
   feature note: if the sentence does not argue something, it is prose. */
.claim {
	max-width: 30em;
	margin: var(--s3) 0 0;
	color: var(--ink);
	font-size: var(--t-big);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.32;
}

.claim--first { margin-top: 0; }     /* a claim that opens its section  */

/* The page-closing verdict on each letter page. Extra air above it, so it
   reads as the page's last word rather than the previous block's caption. */
.claim--verdict { margin-top: var(--s5); }

/* A section-closing verdict mid-page (homepage Why it works): the same
   look, one step less air — s6 after a short lead stack reads as a
   hole, not a pause. */
.claim--close { margin-top: var(--s4); }
.claim + .lead { margin-top: var(--s3); }

.blue { color: var(--link); }

.note {
	color: var(--muted);
	font-size: var(--t-small);
}

/* ------------------------------------------------------------
   5. COMPONENTS
   ------------------------------------------------------------ */

/* --- Masthead ------------------------------------------------
   Three links and a button. On a phone they wrap onto a second
   line, which is why there is no menu toggle and no JavaScript
   in the masthead. */

/* The bar floats: an inset rounded panel rather than a full-width
   strip with a border under it. On a phone it is two rows — brand
   and CTA, then the links — and it does not stick; from 768px up
   it sticks to the top. */
.masthead {
	z-index: 10;
	padding: var(--s2) var(--s3) 0;
}

.masthead__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s2);
	padding: 10px 12px 10px 18px;
	max-width: var(--shell);
	margin: 0 auto;
	background: var(--glass);
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	border: 1px solid var(--rule);
	border-radius: var(--r-lg);
	box-shadow: var(--lift);
}

/* On a phone the bar carries the brand and the links only — two
   rows, no third. The CTA is hidden there because the bar does not
   stick on phones and the hero's own CTA sits right below it; it
   comes back at 768px, where it fits on one line. */
.masthead .wordmark { order: 1; }
.masthead .nav      { order: 2; flex-basis: 100%; margin-left: 0; }
.masthead .btn      { display: none; }        /* shown again at 768px */

.wordmark {
	display: inline-block;
	color: var(--ink);
	font-size: 32px;
	font-weight: 700;
	letter-spacing: -0.035em;
	white-space: nowrap;
}

/* The footer repeats the wordmark at a smaller size. */
.wordmark--small { font-size: 24px; }

.wordmark:hover { text-decoration: none; }
.wordmark b    { color: var(--link); font-weight: 700; }
.wordmark span { color: var(--grey); font-weight: 700; padding: 0 0.02em; }

.nav {
	display: flex;
	flex-wrap: nowrap;
	gap: 2px;
	margin-left: auto;
	font-size: var(--t-label);
	overflow-x: auto;              /* safety valve on narrow phones */
	scrollbar-width: none;
}

.nav::-webkit-scrollbar { display: none; }

.nav a {
	padding: 7px 11px;
	border-radius: var(--r-sm);
	color: var(--body);
}

.nav a:hover { background: var(--grid-line); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; background: var(--grid-line); }

/* --- Buttons ------------------------------------------------- */

.btn {
	display: inline-block;
	padding: 13px 24px;
	border: 1px solid var(--link);
	border-radius: var(--r-pill);
	box-shadow: var(--lift);
	background: var(--link);
	color: var(--on-blue);
	font-size: var(--t-small);
	font-weight: 600;
	letter-spacing: -0.01em;
	text-align: center;
	white-space: normal;      /* a long label wraps rather than widening the page */
}

.btn:hover { background: #0A57AC; border-color: #0A57AC; text-decoration: none; }

.btn--ghost {
	background: var(--card);
	border-color: var(--rule);
	color: var(--ink);
}

.btn--ghost:hover { border-color: var(--faint); background: var(--card); }

.btn--small { padding: 9px 16px; }

.actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2);
	margin-top: var(--s3);
}

/* --- Hero --------------------------------------------------- */

/* The hero paints nothing: the tint and the grid both come from the
   body, so they start above it, behind the floating masthead. */
.hero { padding: var(--s4) 0 var(--s5); }

/* index.html's hero carries the product image: stacked on phones, copy
   left and product right from 768px. The PNG floats on alpha, so the
   hero's tint and grid show between its cards. */
.hero__copy p:last-child { margin-bottom: 0; }

.hero__art {
	display: block;
	max-width: min(100%, 600px);
	height: auto;
	margin: var(--s4) auto 0;
}

/* --- Grids --------------------------------------------------
   One grid class, phone-first single column. The media queries
   at the end decide when it goes two- or three-wide. */

.grid {
	display: grid;
	gap: var(--s3);
	margin-top: var(--s3);
}

/* Three gains that multiply rather than add, so a x sits in each gap.
   Portrait cards side by side: the x reads as an operator between three
   terms. Phone-first the cards stack and the x sits above each subsequent
   one; from 768px the row forms and the x swings into the left gap.

   This grid goes 1 -> 3 columns and SKIPS the site's two-wide layer on
   purpose: at two columns the third card drops to its own row and its x
   would point at empty space. The gap is s5 because the 60px x is ~43px
   wide and has to clear both card edges. */
.grid--times { gap: var(--s5); }

/* Top-aligned, not centred: the three cards hold different amounts of prose,
   and centring them pushes each heading to a different height. Headings line
   up across the row; the slack falls at the foot of the shorter cards. */
.grid--times .card { position: relative; }

/* The letter tint, same idea as .panel--f and .panel--as: on the T page the
   compounding cards carry navy rather than sitting plain white. */
.grid--t .card { background: var(--navy-tint); border-color: var(--navy-line); }

.grid--times .card + .card::before {
	content: "\00d7";
	position: absolute;
	left: 50%;
	top: calc(-1 * var(--s5) / 2);
	transform: translate(-50%, -50%);
	color: var(--muted);
	font-size: 60px;
	font-weight: 700;
	line-height: 1;
}

/* --- The phase chain (homepage engagement, hidden for now) --
   Three plain columns joined by arrows, so the phases read as a
   sequence. Boxes were tried and flagged (17 Aug): cards made
   the phases look like a set of offerings. Same connector
   geometry as .grid--times: stacked with a down-arrow between
   on phone, three-across with right-arrows from 768. */
.phases {
	display: grid;
	gap: var(--s4);
	margin-top: var(--s3);
}

.phases > div { position: relative; }

.phases h3 { margin-bottom: var(--s1); }
.phases p  { margin: 0; color: var(--muted); font-size: var(--t-small); }

.phases > div + div::before {
	content: "\2193";
	position: absolute;
	left: 50%;
	top: calc(-1 * var(--s4) / 2);
	transform: translate(-50%, -50%);
	color: var(--link);
	font-size: 28px;
	font-weight: 600;
	line-height: 1;
}

button.btn { border: 0; cursor: pointer; font: inherit; }

/* --- Form ----------------------------------------------------
   One form on the site (walkthrough.html). Stacked labels, plain
   fields. Its script posts to /api/walkthrough and falls back to
   mailto; the only other script is the carousel on index. */

.form { max-width: var(--measure); margin-top: var(--s3); }

/* The walkthrough hero carries the form in a card beside the copy;
   the card's own padding replaces the form's usual gap. */
.hero--split .form { margin-top: 0; }

.form label {
	display: block;
	margin-bottom: var(--s2);
	color: var(--ink);
	font-size: var(--t-small);
	font-weight: 600;
}

.form input,
.form select {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 10px 12px;
	font: inherit;
	color: var(--ink);
	background: var(--card);
	border: 1px solid var(--rule);
	border-radius: var(--r-md);
}

.form input:focus,
.form select:focus {
	outline: 2px solid var(--link);
	outline-offset: 1px;
	border-color: var(--link);
}

.form .btn { margin-top: var(--s2); }

/* --- Cards -------------------------------------------------- */

.card {
	padding: var(--s3);
	border: 1px solid var(--rule);
	border-radius: var(--r-lg);
	background: var(--card);
	box-shadow: var(--lift);
}

.card p:last-child { margin-bottom: 0; }

/* A list inside a card: the six things an offering covers. */
.card ul { margin: var(--s2) 0 0; padding-left: 1.1em; color: var(--muted); font-size: var(--t-small); }
.card li { margin-bottom: 4px; }

.card__meta {
	display: block;
	margin-bottom: var(--s2);
	color: var(--blue);
	font-size: var(--t-label);
	font-weight: 600;
	letter-spacing: var(--t-label-track);
	text-transform: uppercase;
}

/* The case carousel. On the homepage: one row of six, scroll-snap,
   dots injected by the script there. carousel--duo is the
   letter pages' two-card case band — the same sideways track on phone,
   back to a two-up grid from 768. These are the site's only horizontal
   scrollers, and they are deliberate, so the page-wide
   no-horizontal-overflow audit must except them. */
.carousel {
	display: grid;
	grid-auto-flow: column;
	/* Whole cards only in the viewport, never a clipped one (his ask,
	   17 Aug): one per view on phone, two from 768, three from 1024 —
	   the dots carry the swipe cue. The duo keeps its peek instead. */
	grid-auto-columns: 100%;
	gap: var(--s3);
	margin-top: var(--s3);
	padding-bottom: var(--s2);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;       /* JS scrolls instantly; this animates it.
	                                  behavior:'smooth' in JS is inert on a
	                                  snap-mandatory container in Chromium. */
	scrollbar-width: thin;
}

.carousel .card { scroll-snap-align: start; }

/* The letter pages' two-card band: the peek of the second card is
   the scroll cue there (no dots), so it keeps the partial width. */
.carousel--duo { grid-auto-columns: min(86%, 360px); }

/* The carousel's dots, centred under the track. Injected by the
   script on index.html, so pages without it carry no dead markup. */
.car-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: var(--s2);
}

.car-dot {
	width: 12px;
	height: 12px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--rule);
	cursor: pointer;
}

.car-dot[aria-current="true"] { background: var(--link); }

/* The stat pair at the foot of a case card. The numbers are template
   placeholders until real, client-approved ones exist — see the case-band
   comments on the letter pages. */
.case-figures {
	display: flex;
	gap: var(--s4);
	margin-top: var(--s2);
	padding-top: var(--s2);
	border-top: 1px solid var(--rule);
}

.case-figures b {
	display: block;
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--ink);
}

.case-figures span { font-size: var(--t-label); color: var(--muted); }

/* A card whose whole point is one short line — the three
   fragments in the homepage seams section. */
.card--fragment p { color: var(--muted); font-size: var(--t-small); }

/* --- Split panel --------------------------------------------
   One outer card: the explanation on the left, a grid of tinted
   tiles on the right. Phone-first, so it starts stacked and the
   tablet layer splits it into two columns. A --f/--as/--t
   modifier tints the tiles with that letter's pastel. */

.panel {
	display: grid;
	gap: var(--s3);
	margin-top: var(--s3);
	padding: var(--s3);
	border: 1px solid var(--rule);
	border-radius: var(--r-lg);
	background: var(--card);
	box-shadow: var(--lift);
}

.panel__intro { align-self: start; }
.panel__intro p:last-child { margin-bottom: 0; }
.panel__grid { display: grid; gap: var(--s2); }

.tile {
	padding: var(--s2);
	border: 1px solid var(--rule);
	border-radius: var(--r-md);
	background: var(--bg-soft);
}

.tile .card__meta { margin-bottom: 6px; }
.tile h3 { margin-bottom: 4px; }
.tile p  { margin: 0; color: var(--muted); font-size: var(--t-small); }

.panel--f  .tile { background: var(--olive-tint);    border-color: var(--olive-line); }
.panel--as .tile { background: var(--burgundy-tint); border-color: var(--burgundy-line); }
.panel--t  .tile { background: var(--navy-tint);     border-color: var(--navy-line); }

/* t.html's function panel stacks its internals — intro on top, nine tiles
   under it — so it opts out of the two-column split the other panels get at
   768, and its tile grid goes three-wide at desktop instead. */

/* --- Numbered steps (the engagement phases) ---------------- */

.steps { margin-top: var(--s3); counter-reset: step; }

.step {
	padding: var(--s3) 0;
	border-top: 1px solid var(--rule);
	counter-increment: step;
}

.step:last-child { border-bottom: 1px solid var(--rule); }

.step__no {
	display: block;
	margin-bottom: var(--s1);
	color: var(--blue);
	font-size: var(--t-label);
	font-weight: 700;
	letter-spacing: var(--t-label-track);
	text-transform: uppercase;
}

.step__body { max-width: var(--measure); }

/* The stack's rows on the homepage run bigger than standard steps:
   the h3s are the letter pages' hero headlines and the left rail
   carries the layer names, so both step up a tier (his ask, 17 Aug).
   Scoped — engagement, careers and who keep standard steps. */
.steps--stack .step__no { font-size: var(--t-small); }

.steps--stack .step__body h3 {
	font-size: var(--t-big);
	letter-spacing: -0.024em;
}
.step__body p:last-child { margin-bottom: 0; }

/* --- Plain definition rows: label left, prose right -------- */

.rows { margin-top: var(--s3); }

.row {
	padding: var(--s3) 0;
	border-top: 1px solid var(--rule);
}

.row:last-child { border-bottom: 1px solid var(--rule); }
.row h3 { margin-bottom: 4px; }
/* Capped: at the 1280 shell the right column would otherwise run
   ~120 characters a line. */
.row p  { margin: 0; max-width: var(--measure); color: var(--muted); font-size: var(--t-small); }

/* --- Keyword chips -----------------------------------------
   Identity. Permissions. Hierarchy. Set as a run of pills, so a
   long boring list reads as inventory rather than prose. */

.keywords {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s1) 10px;
	margin: var(--s3) 0 0;
	padding: 0;
	list-style: none;
}

.keywords li {
	margin: 0;
	padding: 7px 15px;
	border: 1px solid var(--rule);
	border-radius: var(--r-pill);
	background: var(--card);
	color: var(--ink);
	font-size: var(--t-small);
	font-weight: 600;
	letter-spacing: -0.012em;
}

/* --- Call to action band -----------------------------------
   The last band before the footer. Deep navy — one shade above
   the footer's #0E1726 — so every page ends by descending into
   the brand. Same in both themes. */
.cta {
	padding: var(--s5) 0;
	background: #1B2C47;
	color: #B6C1D2;
	text-align: center;
}

.cta h2 { margin: 0 auto var(--s2); color: #FFFFFF; }

.cta .lead {
	margin: 0 auto;
	max-width: 30em;
	color: #B6C1D2;
}

.cta .actions { justify-content: center; }

.cta a { color: #C7CEDA; }

.cta .btn {
	background: var(--blue);          /* the bright brand blue pops on navy */
	border-color: var(--blue);
	box-shadow: none;                 /* a lift makes no sense on navy */
	color: #08121F;
}

.cta .btn--ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.25);
	color: #E4EAF2;
}

/* --- Footer ------------------------------------------------
   The thick footer: a dark navy band — brand block plus three
   columns of grouped links, legal line under a hairline. The
   navy reads the same in light and dark mode, so it needs no
   overrides. */

.footer {
	background: #0E1726;
	color: #9AA3B2;
	font-size: var(--t-small);
}

.footer a { color: #C7CEDA; }
.footer a:hover { color: #FFFFFF; }

.footer .wordmark,
.footer .wordmark b      { color: #F2F5F9; }
.footer .wordmark b span { color: #7FBBFA; }   /* slashes, lifted off the navy */

.footer__grid {
	display: grid;
	gap: var(--s3);
	padding: var(--s5) 0 var(--s4);
}

.footer__brand p {
	margin: var(--s2) 0 0;
	max-width: 24em;
}

.footer__col h4 {
	margin: 0 0 var(--s2);
	color: #6E7887;
	font-size: var(--t-label);
	font-weight: 600;
	letter-spacing: var(--t-label-track);
	text-transform: uppercase;
}

.footer__col ul { margin: 0; padding: 0; list-style: none; }

.footer__legal {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding: var(--s3) 0;
	color: #6E7887;
	font-size: var(--t-label);
}

/* --- Figures ------------------------------------------------
   Inline SVG diagrams. Colours come from the letter palette, so
   a figure themes itself: the rack is navy (T, the bedrock) and
   what sits on it is olive and burgundy (F and AS output). */

.figure {
	margin: var(--s3) 0 0;
	max-width: 680px;
}

.figure svg { display: block; width: 100%; height: auto; }

/* A figure inside a card, above its label. Capped at its own viewBox width
   so it stays an illustration rather than filling the card — left it at 1:1
   because the full card width upscaled the 240-wide drawing about twofold. */
.figure--inset { margin: 0 0 var(--s3); max-width: 240px; }

/* --- Letter inks -------------------------------------------
   Olive = F (the field), burgundy = AS (the craft), navy = T
   (the bedrock). Last in this section on purpose: several
   components set their own colour, and these must win. */

.f-ink  { color: var(--olive); }
.as-ink { color: var(--burgundy); }
.t-ink  { color: var(--navy); }

/* Page-top and band tints. Also last on purpose: .section paints its own
   background at the same specificity, so a tint declared earlier loses —
   the same trap as the ink utilities above. */
/* The letter pages tint the whole top of the page. Because sections
   below carry their own opaque background, the colour stops where the
   hero ends. */
.tint-f  { background: var(--olive-soft); }
.tint-as { background: var(--burgundy-soft); }
.tint-t  { background: var(--navy-soft); }

/* The slashes inside a headline F/AS/T, greyed like the wordmark's, so
   the letters carry the colour and the marks read as separators. Must
   also sit after .blue, which wraps it at the same specificity. */
.slash { color: var(--grey); }

/* ------------------------------------------------------------
   6. MEDIA QUERIES

   Only two layers, and only these two do structural work.
   ------------------------------------------------------------ */

/* --- TABLET ----------------------------------------------- */
@media (min-width: 768px) {

	.section { padding: var(--s5) 0; }
	.hero { padding: var(--s5) 0 var(--s6); }

	section:has(+ .cta) { padding-bottom: var(--s6); }
	main > section:last-child:not(.cta) { padding-bottom: var(--s6); }
	.cta { padding: var(--s6) 0; }

	.masthead { position: sticky; top: 0; }

	.masthead .nav { order: 2; flex-basis: auto; margin-left: auto; font-size: var(--t-small); }
	/* nowrap here, not on .btn: the bar must stay one row tall. */
	.masthead .btn { display: inline-block; order: 3; white-space: nowrap; }

	.grid--2, .grid--3 { grid-template-columns: 1fr 1fr; }

	/* Two whole cards per view on the homepage carousel. */
	.carousel { grid-auto-columns: calc((100% - var(--s3)) / 2); }

	/* The two-card case bands stop scrolling and sit two-up. */
	.carousel--duo {
		grid-auto-flow: row;
		grid-template-columns: 1fr 1fr;
		grid-auto-columns: auto;
		overflow-x: visible;
		scroll-snap-type: none;
		padding-bottom: 0;
	}

	.hero--split {
		display: grid;
		grid-template-columns: 1.05fr 0.95fr;
		gap: var(--s4);
		align-items: start;      /* the copy starts where f/as heroes start */
	}
	.hero__art { margin: 0; justify-self: end; }

	.claim--verdict { margin-top: var(--s6); }

	/* Three-across, and the arrows swing into the left gaps. */
	.phases { grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
	.phases > div + div::before {
		content: "\2192";
		left: calc(-1 * var(--s5) / 2);
		top: 50%;
	}

	/* Straight to three, and the x swings into the left gap. */
	.grid--times { grid-template-columns: repeat(3, 1fr); }
	.grid--times .card + .card::before {
		left: calc(-1 * var(--s5) / 2);
		top: 50%;
	}

	.panel {
		grid-template-columns: 1fr 1.15fr;
		gap: var(--s4);
		padding: var(--s4);
	}

	/* The function panel stacks, not splits. */
	.panel--t { grid-template-columns: 1fr; }

	.panel__grid { grid-template-columns: 1fr 1fr; }

	/* An odd tile count spans its last tile rather than orphaning it in a
	   half-width column — t.html's function panel runs nine. */
	.panel__grid > .tile:last-child:nth-child(odd) { grid-column: 1 / -1; }

	.footer__grid {
		grid-template-columns: 1.7fr 1fr 1fr 1fr;
		gap: var(--s4);
		padding: var(--s6) 0 var(--s4);
	}

	/* Phase number in a column beside the text. */
	.step {
		display: grid;
		grid-template-columns: 8rem 1fr;
		gap: var(--s3);
		padding: var(--s3) 0;
	}

	.step__no { margin: 0; padding-top: 5px; }

	/* The layer names need the wider rail; the nudge keeps them on
	   the bigger h3's baseline. */
	.steps--stack .step { grid-template-columns: 13rem 1fr; }
	.steps--stack .step__no { padding-top: 9px; }

	.row {
		display: grid;
		grid-template-columns: 16rem 1fr;
		gap: var(--s3);
	}

	.row h3 { margin: 0; }
}

/* --- DESKTOP ---------------------------------------------- */
@media (min-width: 1024px) {

	/* 16px was tried at desktop (17 Aug) and reverted same day —
	   too small beside the 22px leads. */
	body { font-size: 18px; }

	.grid--3 { grid-template-columns: repeat(3, 1fr); }

	/* Three whole cards per view on the homepage carousel. */
	.carousel { grid-auto-columns: calc((100% - 2 * var(--s3)) / 3); }

	/* The function panel's nine tiles go three-wide — a clean 3x3 — and the
	   ninth tile's two-wide span is reset so it does not wreck the grid. */
	.panel--t .panel__grid { grid-template-columns: repeat(3, 1fr); }
	.panel--t .panel__grid > .tile:last-child:nth-child(odd) { grid-column: auto; }

	.row { grid-template-columns: 20rem 1fr; }
}

/* ------------------------------------------------------------
   PRINT
   People forward these pages to their boards. Drop the furniture
   and let the text run.
   ------------------------------------------------------------ */

@media print {
	.masthead, .cta, .actions { display: none; }
	body { color: #000; background: #fff; font-size: 11pt; }
	.section { padding: 12pt 0; border-top: 0.5pt solid #999; }
	a { color: #000; }
}