/*
Theme Name: SmartBOS Marketing
Theme URI: https://cogenic.app/
Author: Monza Creatives
Description: The cogenic.app marketing site. Content pages are routed by the theme, not by wp_posts, so a fresh install serves the whole site with nothing set up.
Version: 0.1.0
License: Proprietary
Text Domain: smartbos-marketing
*/

/* ⭐ THE BRAND BLUE IS READ FROM THE VECTOR — #2f3ae3, resolved by a real browser on all seven
   stroked elements of the logo. ☠️ The violet #7c3aed in those files is a presentation attribute
   overridden by an inline style and paints NOTHING; see functions.php. Never sample a brand colour
   off a PNG: a raster's dominant colour is an anti-aliased AVERAGE, not the colour. */

:root {
	--cg-brand: #2f3ae3;
	--cg-brand-deep: #1f27a8;
	--cg-brand-wash: #eef0fe;
	/* A step deeper than the wash, same hue — the brand blue at ~14% on white, where the wash is ~6%.
	   For a wash that has to hold its own on the lavender panels (#eef0fa), which the plain wash does not. */
	--cg-brand-wash-deep: #e2e4fb;
	/* A brand-blue RULE, for an outline that must read as an edge on a wash: the brand at ~35% on white. */
	--cg-brand-line: #b1b6f3;
	--cg-ink: #14162b;
	--cg-ink-soft: #4d5170;
	--cg-ground: #ffffff;
	/* ⭐ One step darker (David, 2026-09-11): the panels' lavender ground was #f6f7fd, and the CARDS
	   take their own, darker rule — dividers, chips and the form fields keep `--cg-line`. */
	--cg-tint: #eef0fa;
	--cg-line: #e2e4f2;
	--cg-card-line: #d6d9ec;
	/* The phone menu's ground: one step darker again than the panels, so it stands out over them. */
	--cg-menu: #e3e6f7;
	--cg-shell: 68rem;
	--cg-gutter: clamp(1.25rem, 4vw, 2.5rem);
	/* The stages page's big number — a token because the tick list beside it is offset by its block. */
	--cg-stagemark-size: 3rem;
	--cg-band-y: clamp(3.5rem, 8vw, 6rem);
	--cg-radius: 14px;
	--cg-display: 'Google Sans Flex', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
	--cg-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Self-hosted, so /privacy's "no third-party requests" stays true. Both are variable fonts, so one
   file covers every weight the site uses. */
/* ⭐ THE DISPLAY FACE IS GOOGLE SANS FLEX (David, 2026-09-12 — "try using google sans flex … instead
   of Outfit"). Self-hosted like the rest, so /privacy's "no third-party requests" stays true: the two
   files are Google Fonts' own latin and latin-ext subsets of the variable face, each covering every
   weight. ⚠️ The face decides every headline's width, so the size divisor on `.cg-hero__title` was
   re-measured after the swap. */
@font-face {
	font-family: 'Google Sans Flex';
	src: url('assets/fonts/google-sans-flex-latin.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	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: 'Google Sans Flex';
	src: url('assets/fonts/google-sans-flex-latin-ext.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Inter';
	src: url('assets/fonts/inter.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
/* ⭐ A JUMP WITHIN THE PAGE GLIDES (David, 2026-09-14) — "Sign up", "Try it out", the skip link. Only
   for a reader whose system has not asked for reduced motion; for them it stays an instant jump. */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

body {
	margin: 0;
	background: var(--cg-ground);
	color: var(--cg-ink);
	font-family: var(--cg-body);
	font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	/* ⭐ NO TAP HIGHLIGHT (David, 2026-09-11 — "the big blue square on touchstart"). A mobile browser
	   paints its own translucent box over any link or button while a finger is on it; this is that
	   box, and nothing else. It is inherited, so this one line covers every element on the site.
	   ⚙️ Keyboard focus is untouched — no `outline` rule here, so a tabbing reader keeps its ring. */
	-webkit-tap-highlight-color: transparent;
}

h1, h2, h3 {
	font-family: var(--cg-display);
	line-height: 1.12;
	letter-spacing: -0.018em;
	margin: 0 0 0.6em;
	font-weight: 600;
	/* ⭐ A heading that wraps splits into lines of EQUAL weight (David, 2026-09-11 — "One product,
	   many ways of using it" on a phone). Every heading, so they all behave alike; inert on one that
	   fits on a line, ignored by a browser without it. */
	text-wrap: balance;
}

/* ⭐ NO WORD LEFT ALONE ON A PARAGRAPH'S LAST LINE (David, 2026-09-11 — "seconds." sat by itself).
   `pretty` lets the browser rebalance the last few lines; a browser without it wraps as before, so
   this is a refinement, never something the layout depends on. */
p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--cg-brand); }
a:hover { color: var(--cg-brand-deep); }

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

.cg-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--cg-brand);
	color: #fff;
	padding: 0.75rem 1rem;
	z-index: 100;
}
.cg-skip:focus { left: 0; }

.cg-shell {
	width: min(var(--cg-shell), 100% - (var(--cg-gutter) * 2));
	margin-inline: auto;
}

/* ------------------------------------------------------------------ masthead */

.cg-masthead {
	border-bottom: 1px solid var(--cg-line);
	/* ⭐ 15% SEE-THROUGH (David, 2026-09-13 — "so that as content scrolls underneath it shows slightly",
	   first at 20%, then 10%, then "make that 15%"). The page ground (#fff) at 85% alpha, on the BACKGROUND only — `opacity` would fade the logo, the
	   links and the Menu button with it. The phone menu that drops from this bar keeps its own solid
	   ground, so its links never sit over moving content. */
	background: rgba(255, 255, 255, 0.85);
	/* ⭐ …AND FROSTED (David, 2026-09-13 — "with a blur effect as well"): what shows through is a soft
	   wash, never legible text fighting the logo and links. The `-webkit-` form is what Safari reads.
	   ⚠️ A backdrop filter makes this bar the containing block for positioned descendants — the phone
	   menu is already positioned against it (it is `sticky`), and nothing inside is `fixed`; the menu
	   was re-driven after the change. */
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	position: sticky;
	top: 0;
	z-index: 40;
}

.cg-masthead__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.9rem;
}

/* The logo is 1400x200 in its own coordinates, so it is sized by HEIGHT and left to find its
   width. Giving it a width instead squashes the two rings out of round. */
/* ⭐ CENTRED IN THE BAR (David, 2026-09-11). This wrapper was a plain BLOCK, so the inline-flex logo
   sat in a line box with room for descenders: 40px tall around a 32px logo, the logo at its top —
   19px above, 27px below. A flex box is exactly as tall as the logo. `flex: none` so the bar never
   squeezes it (the 40vw cap is what keeps it small on a phone). */
.cg-masthead__logo { display: flex; align-items: center; flex: none; }

.cg-logo {
	display: inline-flex;
	align-items: center;
	color: var(--cg-brand);
	text-decoration: none;
}
/* ⭐ SIZED BY WIDTH, AT MOST 40vw (David, 2026-09-11). 14rem is the 224px the header always had, so a
   desktop is unchanged; a phone's logo shrinks to 40% of the page instead of taking 57%. Height
   follows from the viewBox (the width/height attributes are stripped on the way in). */
.cg-logo svg { width: min(14rem, 40vw); height: auto; display: block; }
.cg-logo--footer { color: #fff; }
.cg-logo--footer svg { width: 100%; }

/*
 * ⭐ THE RASTER/VECTOR SWITCH — the Developer's menu-logo rule (`pickAssetSource`) as a media query.
 * At a device-pixel ratio of 1 or below, the hand-made raster; above 1, the inline vector. Hidden by
 * default, so a browser that understands neither query keeps the vector it has always had.
 * ⚙️ Both queries on purpose: `resolution` is the standard, the `-webkit-` ratio is what older Safari
 * reads. The raster is sized like the vector (by height, `2rem`), so a visitor who has enlarged their
 * browser's text still gets a logo the same size as before — just scaled.
 * ⚠️ After `.cg-logo svg`, deliberately: `.cg-logo--hybrid svg` has the SAME specificity, so it is
 * the order that lets it win.
 */
.cg-logo__raster { display: none; width: min(14rem, 40vw); height: auto; }
@media (max-resolution: 1dppx), (-webkit-max-device-pixel-ratio: 1) {
	.cg-logo--hybrid svg { display: none; }
	.cg-logo--hybrid .cg-logo__raster { display: block; }
}

.cg-nav { display: flex; align-items: center; gap: 1.5rem; }
.cg-nav nav ul {
	display: flex;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.cg-nav a {
	color: var(--cg-ink-soft);
	text-decoration: none;
	font-weight: 500;
}
.cg-nav a:hover { color: var(--cg-brand); }
.cg-nav__signup { white-space: nowrap; }
/* ☠️ `.cg-nav a` (class + element) outranks `.cg-btn--solid`, and would paint the button's words in the
   link grey — and brand blue on hover, i.e. invisible on its own blue face. */
.cg-nav .cg-nav__signup, .cg-nav .cg-nav__signup:hover { color: #fff; }

.cg-navtoggle { display: none; }

/* ------------------------------------------------------------------ buttons */

.cg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border: 1px solid transparent;
	border-radius: 999px;
	padding: 0.6rem 1.25rem;
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.cg-btn--lg { padding: 0.8rem 1.6rem; font-size: 1.03rem; }
.cg-btn--solid { background: var(--cg-brand); color: #fff; }
.cg-btn--solid:hover { background: var(--cg-brand-deep); color: #fff; }
.cg-btn--ghost { border-color: var(--cg-line); color: var(--cg-ink); }
.cg-btn--ghost:hover { border-color: var(--cg-brand); color: var(--cg-brand); }
.cg-btn--quiet { color: var(--cg-ink); }
.cg-btn--quiet:hover { color: var(--cg-brand); }

/* ------------------------------------------------------------------ hero */

/*
 * ⭐ 80% OF THE SCREEN, AND THE AIR IS MEASURED IN SCREEN HEIGHT — David, 2026-09-11. The hero is
 * three blocks of words (eyebrow, headline, tagline) plus the buttons, centred in a panel that is
 * 80vh tall; every gap between them is a `vh`, so a taller screen spreads them and a shorter one
 * draws them in, and the panel stays the same share of the window.
 * ⚠️ `min-height`, not `height`: on a screen too short to hold the words (a phone on its side) the
 * panel GROWS rather than clipping the headline. `svh` after `vh` — the SMALL viewport, so a phone's
 * sliding toolbar does not make the hero jump; a browser without it keeps the `vh` line.
 * ⚙️ Same ground as the stages band (`--cg-tint`), by David's instruction — no wash gradient.
 */
.cg-hero {
	min-height: 80vh;
	min-height: 80svh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: 3vh;
	background: var(--cg-tint);
}

/*
 * ⭐ WHERE THE SPARE HEIGHT GOES — David, 2026-09-11: *"too much space at the top and bottom — reduce
 * it by 50% and add it to the 2 gaps between the 3 blocks of text"*. Centring put ALL the spare
 * height of the 80vh panel above and below the words. Now the block fills the panel and the spare
 * height is shared in quarters — above the eyebrow, eyebrow→headline, around the tagline, below the
 * buttons — so the top and bottom each keep half of what they had and the text gaps take the rest,
 * at every screen size. The padding halved (6vh → 3vh) and the text gaps gained that 3vh too.
 * ⭐ AND THE TAGLINE SITS EXACTLY HALFWAY (David, 2026-09-11: *"equalise the gap above and below"*):
 * its quarter is split in two, half above it and half below, on equal fixed gaps of 9vh.
 * ⚙️ A GRID OF ROWS, because the rule is now a set of WEIGHTS (1 · 1 · ½ · ½ · 1) and auto margins
 * can only share equally. Each gap is a fixed `vh` row plus an `fr` row: on a screen with no spare
 * height (a phone on its side) every `fr` is zero and the fixed gaps still hold.
 */
.cg-hero__inner {
	flex: 1;
	display: grid;
	grid-template-rows:
		1fr   auto            /* air · eyebrow */
		9vh 1fr auto          /* gap · air · headline */
		4.5vh .25fr auto      /* half gap · half air · the headline's tail line */
		4.5vh .25fr auto      /* half gap · half air · tagline */
		.5fr 9vh auto         /* air · gap · buttons */
		1fr;                  /* air */
	text-align: center;
}
/* ⭐ "EQUALIZE THE GAP ABOVE AND BELOW *and everything in-between*" (David, 2026-09-11). The tail
   line has a row of its own, and the headline→tagline space it used to hug the top of is split in
   two around it — HALF the gap and half the air on each side — so the two gaps are equal at every
   window size, and the tagline and buttons land exactly where they did (the rows add up to the
   same height). The tail stays INSIDE the <h1>, since it is part of the headline: the h1 spans rows
   5–8 as a SUBGRID, so its two parts sit on the outer grid's rows. ⚙️ A browser without subgrid
   stacks the h1's two parts one under the other — the look before this change. */
.cg-hero__eyebrow { grid-row: 2; }
.cg-hero__title { grid-row: 5 / 9; display: grid; grid-template-rows: subgrid; }
.cg-hero__title-main { grid-row: 1; }
.cg-hero__title--tail { grid-row: 4; }
.cg-hero__tagline { grid-row: 11; }
.cg-hero__actions { grid-row: 14; }

.cg-hero__eyebrow {
	font-family: var(--cg-display);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	/* 1rem (David, 2026-09-12) — was 0.78rem. */
	font-size: 1rem;
	font-weight: 600;
	color: var(--cg-brand);
	margin: 0;
}

/*
 * ⭐ THE HEADLINE LINES NEVER WRAP (David, 2026-09-11 — "to thriving business" split on his
 * iPhone 15). Each line is `nowrap`, and the size is capped so the LONGEST line fits the shell.
 * Re-measured 2026-09-12 in GOOGLE SANS FLEX (the face swap moves every one of these), default /
 * no-subpixel / 2× — they agree to 0.02. Per font-size, with the `.cg-dots` ellipses in place and
 * their fixed 12px taken out: "From first idea…" 7.93 · "and everything in-between" 13.09 at full
 * size, 9.82 at its 0.75em (see `--tail`) · "…to thriving business" 10.40 — the longest, so it sets
 * the divisor: 11.0 leaves ~5% for a device that sets it wider (Outfit's numbers were 7.89 / 12.42 /
 * 9.77 against a 10.3 divisor). ⚠️ The 12px is SUBTRACTED above, not divided: it does not scale. ☠️ `nowrap` is deliberate: if a future word change outgrows the
 * divisor the page OVERFLOWS, which `verify-smartbos.mjs` reports, instead of quietly wrapping
 * again. Re-measure the ratios after any change to these words, face, tracking or the tail size.
 */
.cg-hero__title {
	font-size: min(clamp(2.6rem, 7.2vw, 4.75rem), calc((100vw - 2 * var(--cg-gutter) - 12px) / 11.0));
	white-space: nowrap;
	margin: 0;
	font-weight: 600;
	/*
	 * ⭐ LOOSER THAN THE HEADING DEFAULT, AND THE DEFAULT IS WHY (David, 2026-09-10: letters
	 * colliding in Outfit, the face this was tuned for — kept unchanged across the 2026-09-12 swap to
	 * Google Sans Flex, whose terminals are less round; David's eye decides whether it still wants it).
	 * `h1, h2, h3` carry `letter-spacing: -0.018em` — negative tracking,
	 * which is the right call for a 1.5rem section heading and the wrong one at 4.75rem, where the
	 * same PROPORTIONAL pull is several times the absolute gap. Outfit's round terminals close up
	 * first, so the collision shows on the hero and nowhere else.
	 * ⚠️ Scoped to the hero rather than raised globally: every other heading on the site is set at
	 * a size where -0.018em reads correctly, and loosening those would be a change nobody asked
	 * for on eleven surfaces to fix one.
	 */
	/* ⭐ …and since 2026-09-11 OPENED, on David's instruction: 0.01em of positive tracking (was
	   -0.004em), so the headline reads as airy as the space around it. The reasoning above is why
	   it stays scoped to the hero rather than raised for every heading. */
	letter-spacing: 0.01em;
}
/* ⭐ THE "t" OF "to" SITS UNDER THE "F" OF "From" (David, 2026-09-12). Both lines are centred and the
   blue one is longer, so its "t" starts slightly to the LEFT of the "F" above — measured 3.7px out at
   430px wide, 13.4 at 820 and 20.1 at 1280, and 3px the OTHER way at 320. The gap is linear in the
   type size (the line-length difference is proportional; the dots' 12px gap is not), so ONE
   expression covers every width: 0.42em − 12px, fitted to those readings (within ~1.5px everywhere).
   ⚙️ `position: relative` shifts the PAINTED line and takes no layout space, so the centring, the
   size cap and the no-wrap guarantee are all untouched. ⛔ Not done by hanging the dots in the
   margin, which is exact but needs 40–75px of side room: measured, a 390px phone has 28px, so it
   would push the line off the page — and on a phone the two are already aligned within 3px. */
.cg-hero__title--accent { color: var(--cg-brand); position: relative; left: calc(0.42em - 12px); }
/* ⭐ THE TAIL LINE, "and everything in-between", below the blue line, at three-quarters size
   (2026-09-11): at full size it is the longest line by far (13.09 against the blue line's 10.40) and
   would shrink the whole headline by about a quarter on a phone to fit it; at 0.75em it measures
   9.82, under the blue line, so the headline keeps its size and the line reads as a coda to the
   statement above it. ⚠️ Keep it under 0.79em, or it becomes the longest line again and the divisor
   above must be re-derived (re-measured in Google Sans Flex, 2026-09-12). */
/* The tail line's own colour (David): #6b7fb9, a muted blue-grey, on 2026-09-12; #232DA5, a deep
   blue, on 2026-09-14. A literal, not a token — no slot on this site carries it, and inventing one
   for a single line would be a token nothing else reads. */
.cg-hero__title--tail { font-size: 0.75em; color: #232da5; }
/* ⭐ THE HEADLINE'S ELLIPSES — SMALLER, DOTS OPENED OUT (David, 2026-09-11). Three full stops
   (`smartbos_marketing_dots()`), not the "…" glyph, whose dot spacing cannot be changed. The
   letter-spacing also lands after the third dot, so the negative end margin takes it back and the
   dots keep their join to the word beside them. ⭐ 12px OF SPACING SITS BETWEEN THE DOTS AND THE
   LETTER BESIDE THEM (David, 2026-09-12) — before the dots on the trailing ellipsis, after them on
   the leading one, so it is always the gap next to a word. ⚠️ It changes both headline lines' widths
   — the size divisor on `.cg-hero__title` was re-measured with it, and because those 12px do NOT
   scale with the type they are SUBTRACTED from the width above rather than divided by the ratio. */
.cg-dots { font-size: 0.7em; letter-spacing: 0.2em; margin-inline-start: 12px; margin-inline-end: -0.2em; }
/* The LEADING ellipsis's gap belongs AFTER the dots, before "to" — and the tracking after the third
   dot is taken back first, so the space next to the word is 12px and not 12 plus a dot gap. */
.cg-hero__title--accent .cg-dots { margin-inline-start: 0; margin-inline-end: calc(12px - 0.2em); }

/* The third block: one line, in the display face, so it reads as part of the headline's statement
   rather than as body copy. `balance` so a narrow screen splits it evenly instead of orphaning a word. */
.cg-hero__tagline {
	max-width: 40rem;
	margin: 0 auto;
	font-family: var(--cg-display);
	font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem);
	font-weight: 500;
	line-height: 1.35;
	color: var(--cg-ink-soft);
	text-wrap: balance;
}

/* The two paragraphs that used to sit in the hero, now a panel of their own directly below it — white
   between the tinted hero and the tinted stages band, so the grounds alternate and need no rule. */
/* ⭐ EACH PARAGRAPH IS A CARD (David, 2026-09-11) — side by side where there is room, stacked on a
   phone. The same card as the stages and sectors (`--cg-ground`, a 1px `--cg-line` rule, the site
   radius), so it reads as one family. A grid, so the pair are equal WIDTH by construction and
   stretch to equal HEIGHT whatever each paragraph's length. Left-aligned: centred text in a box
   this wide is a ragged edge on both sides. */
.cg-intro__cards {
	display: grid;
	/* ⭐ STACKED, THE TWO CARDS ARE TWICE AS FAR APART (David, 2026-09-11 — "the vert gap between
	   the 2 top cards needs to be doubled when stacked"). Row gap 2.5rem, column gap unchanged; side
	   by side there is only one row, so the row gap never shows there. */
	gap: 2.5rem 1.25rem;
	grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
	.cg-intro__cards { grid-template-columns: 1fr 1fr; }
}
/* ⭐ "MORE VISUALLY PLEASING" (David, 2026-09-11) — made richer than the plain stages card, since
   this pair is the first thing under the hero: a wash from white into the brand tint, a 3px brand
   rule along the top (an INSET shadow, so it follows the rounded corners instead of squaring them)
   and a soft blue-tinted lift. ⭐ Each card now opens with a heading AT THE TOP (David, 2026-09-11),
   so the words start there — they were centred vertically while the cards had no heading. */
.cg-intro__card {
	margin: 0;
	display: grid;
	align-content: start;
	background: linear-gradient(160deg, var(--cg-ground) 35%, var(--cg-brand-wash));
	border: 1px solid var(--cg-card-line);
	border-radius: 18px;
	box-shadow:
		inset 0 3px 0 var(--cg-brand),
		0 1px 2px rgba(20, 22, 43, 0.04),
		/* A tighter lift (David, 2026-09-14 — "spread a bit tighter"): was 0 18px 40px -20px. */
		0 10px 22px -12px rgba(47, 58, 227, 0.28);
	padding: clamp(1.75rem, 3.5vw, 2.75rem);
	font-size: clamp(1.06rem, 1rem + 0.3vw, 1.2rem);
	line-height: 1.7;
	color: var(--cg-ink-soft);
}
/* The card heading: blue, capitalised, left-aligned (David, 2026-09-11) — the hero eyebrow's
   treatment, so the page's small blue labels read as one family. Capitals by CSS, so a screen
   reader and a copy-paste get "The next generation", not a shouted string. */
.cg-intro__title {
	margin: 0 0 1rem;
	font-family: var(--cg-display);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--cg-brand);
}

.cg-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin: 0;
}
/* "See how it works" became the outlined button (2026-09-13), and the ghost's pale rule all but vanishes
   on the hero's lavender, so it takes a white face and the cards' darker rule. */
.cg-hero__actions .cg-btn--ghost { background: var(--cg-ground); border-color: var(--cg-card-line); }

/* ------------------------------------------------------------------ bands */

.cg-band { padding-block: var(--cg-band-y); }
.cg-band--tint { background: var(--cg-tint); }

.cg-band__title { font-size: clamp(1.7rem, 3.4vw, 2.4rem); text-align: center; }
/* ⭐ BALANCED (David, 2026-09-11 — "balance this text"): a centred lede that wraps splits into
   lines of even length instead of leaving "perfect fit." alone under a full line. Every band lede
   takes it, so the site's centred intros all behave the same. */
.cg-band__lede {
	max-width: 42rem;
	margin-inline: auto;
	text-align: center;
	text-wrap: balance;
	color: var(--cg-ink-soft);
}
.cg-band__more { text-align: center; margin-top: 2rem; }

.cg-pagehead { padding-block: clamp(3rem, 7vw, 5rem) clamp(1.5rem, 3vw, 2.5rem); }
/*
 * ⚙️ `text-wrap: balance` — a page heading that wraps should split evenly rather than leaving one
 * word alone on the second line. "Many industry sectors, understood out of the box" orphaned
 * "box" at 1280px; balancing costs nothing and is inert on a heading that fits on one line.
 * ⚠️ Unsupported in older browsers, where it is simply ignored and the heading wraps as before —
 * so this is a refinement, never a layout the page depends on.
 */
.cg-pagehead h1 { font-size: clamp(2.2rem, 5.5vw, 3.4rem); text-wrap: balance; }
.cg-pagehead__lede {
	max-width: 46rem;
	font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
	color: var(--cg-ink-soft);
}

/* ------------------------------------------------------------------ stages */

/* ── The sector packs (`page-sectors.php`) ──────────────────────────────────────────────────
   ⭐ THREE COLUMNS AT DESKTOP, NOT FOUR. A dozen cards in four columns read as a feature matrix;
   in three they read as a list somebody chose. The `minmax` floor is what actually decides it —
   at 20rem a 1200px shell fits three and a narrow window drops to one without a media query. */
.cg-sectors {
	list-style: none;
	margin: 2.5rem 0 0;
	padding: 0;
	display: grid;
	gap: 1rem;
	/*
	 * ☠️ `minmax(20rem, …)` ALONE OVERFLOWS A 320px SCREEN, and `verify-smartbos.mjs` caught it —
	 * 20 hard rem is a FLOOR the track cannot go under, so at `narrow` the row was 20px wider than
	 * the viewport. `min(20rem, 100%)` keeps the three-column intent everywhere there is room and
	 * lets the single column shrink where there is not.
	 * ⚠️ The sibling `.cg-stages` above has the same shape at a 15rem floor and does not overflow —
	 * which is why this was not obvious by reading, and why the check is the thing that found it.
	 */
	grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}
.cg-sector {
	background: var(--cg-ground);
	border: 1px solid var(--cg-card-line);
	border-radius: var(--cg-radius);
	padding: 1.5rem;
}
.cg-sector__name {
	font-size: 1.15rem;
	margin: 0 0 0.5rem;
}
/* ⭐ ALWAYS ON ITS OWN LINE UNDER THE NAME. Inline, it sat beside a short name and dropped under a
   long one — still carrying its left margin, so a wrapped badge was indented 8px off the text edge
   and the three badged cards each looked different. One position, whatever the name's length. */
.cg-sector__uk {
	display: block;
	width: fit-content;
	margin-top: 0.4rem;
	font-family: var(--cg-body);
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cg-brand);
	background: var(--cg-brand-wash);
	border-radius: 999px;
	padding: 0.2rem 0.55rem;
}
/* The sector strapline sits under the pack name — the name is what the founder sees at the top of
   the Main Menu once the pack is installed; the strapline says who it is for. */
.cg-sector__sector {
	margin: 0 0 0.35rem;
	font-size: 0.8rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--cg-ink-soft);
}
.cg-sector__who { margin: 0 0 0.9rem; }
/* The shape line is the page's argument, so it is set apart rather than run into the prose. */
.cg-sector__shape {
	margin: 0 0 0.9rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--cg-line);
	font-weight: 500;
}
.cg-sector__shapelabel {
	display: block;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cg-ink-soft);
	margin-bottom: 0.2rem;
}
.cg-sector__gets { margin: 0; color: var(--cg-ink-soft); }

/* ⭐ NEVER AN UNBALANCED WRAP (David, 2026-09-11): four stages show as 4 across, 2 × 2 or one
   column — never 3 + 1 with Growth alone on a second row, which is what `auto-fit` produced at
   ~870px. Explicit steps, because `auto-fit` fills a row with as many as fit and cannot know the
   COUNT must divide evenly. (The sector grid needs no such rule: twelve divides by 1, 2 and 3.) */
.cg-stages {
	list-style: none;
	margin: 2.5rem 0 0;
	padding: 0;
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
}
@media (min-width: 36rem) {
	.cg-stages { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) {
	.cg-stages { grid-template-columns: repeat(4, 1fr); }
}

/* ⭐ THE FOUNDATION STRIP under the four stage cards (David, 2026-09-12): the back-office layer every
   stage sits on. The stage card's own ground, rule and radius, spanning the full width of the row
   above at the grid's 1rem gap, so it reads as one more card — the one beneath the other four. */
.cg-foundation {
	margin: 1rem 0 0;
	padding: 1.1rem 1.5rem;
	/* ⭐ THE STAGE NUMBERS' COLOUR SCHEME (David, 2026-09-13): brand blue words on a brand wash, like the
	   "1"–"4" circles in the cards above — then "a bit darker" for the ground: the circles' own wash
	   (238,240,254) measured all but identical to the lavender band behind it (238,240,250), so the
	   strip used the deeper wash of the same hue. The circles have no outline, so the rule takes the
	   ground's colour: the 1px stays, and the strip keeps its measured size.
	   ⭐ …and then "add a border … to make it pop out more" (David, 2026-09-13): the same 1px, now in a
	   brand-blue rule a clear step stronger than the ground, so the strip's size is unchanged. */
	background: var(--cg-brand-wash-deep);
	border: 1px solid var(--cg-brand-line);
	border-radius: var(--cg-radius);
	text-align: center;
	font-family: var(--cg-display);
	font-weight: 500;
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	line-height: 1.4;
	color: var(--cg-brand);
	text-wrap: balance;
}

.cg-stage {
	background: var(--cg-ground);
	border: 1px solid var(--cg-card-line);
	border-radius: var(--cg-radius);
	padding: 1.5rem;
	position: relative;
}
.cg-stage__num {
	font-family: var(--cg-display);
	font-weight: 700;
	font-size: 0.8rem;
	color: var(--cg-brand);
	background: var(--cg-brand-wash);
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 999px;
	display: inline-grid;
	place-items: center;
	margin-bottom: 0.9rem;
}
/* ⭐ THE QUESTION SITS HALFWAY between the stage name and the text below (David, 2026-09-11).
   Measured by INK, not boxes — the three lines have different line-heights, so equal margins
   looked 11px above / 20px below. The question moved down ~4.5px: this margin gained it (0.25em
   ≈ 5.2px → 0.61rem ≈ 9.8px) and `.cg-stage__q`'s bottom margin gave it up. Both in `rem` so
   the pair stays balanced when the body text size changes with the window. */
.cg-stage__name { font-size: 1.3rem; margin-bottom: 0.61rem; }
/* ⚙️ BALANCED, not merely `pretty`: in a quarter-width card these run two or three lines, and
   Chromium's `pretty` measured as leaving "anything." and "discipline." alone on the last line.
   `balance` evens every line of a short block, which is exactly what a narrow card wants. */
.cg-stage__q { color: var(--cg-brand); font-weight: 500; margin-bottom: 0.35rem; text-wrap: balance; }
.cg-stage__body { color: var(--cg-ink-soft); margin: 0; font-size: 0.97rem; text-wrap: balance; }
/* ⭐ FANCY QUOTATION MARKS (David, 2026-09-11): a larger SERIF “ ” in the brand blue — the site's
   own faces draw plain, straight-ish quotes. Georgia is a SYSTEM face, never downloaded, so
   /privacy's "no third-party requests" stays true. `line-height: 0` stops the bigger glyph from
   pushing its line apart. The opening mark HANGS into the card's padding, so the question's first
   WORD lines up with the stage name above it — the typographer's hanging punctuation.
   Real characters in the markup (not CSS `content`), so copy-and-paste still carries them. */
.cg-q {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 1.7em;
	font-weight: 400;
	line-height: 0;
	vertical-align: -0.3em;
	color: var(--cg-brand);
	opacity: 0.6;
}
.cg-q--open { margin-left: -0.42em; margin-right: 0.04em; }
.cg-q--close { margin-left: 0.04em; }

.cg-stagemark {
	font-family: var(--cg-display);
	font-weight: 700;
	font-size: var(--cg-stagemark-size);
	line-height: 1;
	color: var(--cg-brand);
	opacity: 0.22;
	margin: 0 0 0.2em;
}
/* ⭐ THE QUESTION SITS HALFWAY, as on the landing cards (David, C4, 2026-09-11). By INK it was
   ~14px under the name and ~31px over the text (phone 11 / 30); the question moved down ~8–9px —
   this margin gained it (0.15em ≈ 5px → 0.85rem) and the question's own bottom margin gave it up
   (1em → 0.6rem). Both in `rem`, so the name's fluid size cannot tip the balance. */
.cg-stagehead { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 0.85rem; }
/* ⭐ THE QUESTION TEXT IS BRAND BLUE, like its quote marks (David, D1, 2026-09-11). Scoped under
   `.cg-split__text` on purpose: that column's `p { color: ink-soft }` is (0,1,1) and a bare
   `.cg-stagehead__q` (0,1,0) lost to it, so the text rendered grey while the marks were blue. */
.cg-split__text .cg-stagehead__q {
	font-family: var(--cg-display);
	font-size: 1.15rem;
	color: var(--cg-brand);
	margin-bottom: 0.6rem;
}

/* ------------------------------------------------------------------ split */

.cg-split {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	grid-template-columns: 1fr;
	align-items: start;
}
@media (min-width: 48rem) {
	.cg-split { grid-template-columns: 1.15fr 1fr; }
	.cg-split--wide { grid-template-columns: 1fr 1fr; }
	/* ⭐ THE TICK LIST STARTS LEVEL WITH THE STAGE NAME, not with the big number above it (David,
	   2026-09-11). Side by side only — stacked, the list comes after the text anyway. The offset IS
	   the number's block: its size × (line-height 1 + its 0.2em bottom margin). Keyed on the number
	   being there, so a split without one is untouched. */
	.cg-split:has(> .cg-split__text > .cg-stagemark) > .cg-split__aside {
		padding-top: calc(var(--cg-stagemark-size) * 1.2);
	}
}
.cg-split__text h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); }
.cg-split__text p { color: var(--cg-ink-soft); }

.cg-quote {
	margin: 0;
	background: var(--cg-brand);
	color: #fff;
	border-radius: var(--cg-radius);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	font-family: var(--cg-display);
	font-size: clamp(1.15rem, 2vw, 1.45rem);
	/* ⭐ A LITTLE MORE AIR BETWEEN THE LINES (David, 2026-09-12): 1.35 → 1.45. The card is display-face
	   text at up to 1.45rem, so it sets tighter than body copy by default and read cramped at four
	   lines. */
	line-height: 1.45;
}
.cg-quote p { margin: 0; }

.cg-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
/* ⭐ A TICK LIST INSIDE A TEXT COLUMN IS A PARAGRAPH'S NEIGHBOUR, so it needs a paragraph's space
   below it (measured: the Co-star closing paragraph sat hard against the last tick, 2026-09-12).
   Scoped to `.cg-split__text`: in an aside the list IS the whole column and takes no margin. */
.cg-split__text .cg-ticks { margin-bottom: 1.1em; }
.cg-ticks li {
	position: relative;
	padding-left: 1.9rem;
	color: var(--cg-ink);
}
.cg-ticks li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 1.1rem;
	height: 0.6rem;
	border-left: 2px solid var(--cg-brand);
	border-bottom: 2px solid var(--cg-brand);
	transform: rotate(-45deg);
}

.cg-note { color: var(--cg-ink-soft); font-size: 0.93rem; }
.cg-note--centred { text-align: center; margin-top: 1.5rem; }

.cg-chips {
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
}
.cg-chip {
	border: 1px solid var(--cg-line);
	background: var(--cg-ground);
	border-radius: 999px;
	padding: 0.45rem 1.1rem;
	font-weight: 500;
	color: var(--cg-ink-soft);
}

/* ------------------------------------------------------------------ tiers */

.cg-tiers {
	display: grid;
	gap: 1.25rem;
	/* ☠️ `min(18rem, 100%)`, as on `.cg-sectors`: once a phone card is inset by a second gutter the
	   track has 240px at 320 wide, and a bare 18rem floor overflowed the page by 8px (the gate). */
	grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
	align-items: start;
}
.cg-tier {
	background: var(--cg-ground);
	border: 1px solid var(--cg-card-line);
	border-radius: var(--cg-radius);
	padding: clamp(1.5rem, 3vw, 2.25rem);
}
.cg-tier--feature { border-color: var(--cg-brand); box-shadow: 0 1px 0 var(--cg-brand); }
.cg-tier__name { font-size: 1.5rem; margin-bottom: 0.15em; }
.cg-tier__price { font-family: var(--cg-display); color: var(--cg-brand); font-weight: 600; }
.cg-tier__lede { color: var(--cg-ink-soft); }
.cg-tier .cg-ticks { margin-top: 1.25rem; }

/* ⭐ ON A PHONE, CARDS SIT 1.6× AS FAR FROM THE SCREEN EDGE AS THE TEXT (David, 2026-09-11 —
   "their edges are a bit too close to the phone edge … double what is there … only for the cards",
   then "just slightly less": 2× → 1.6×, i.e. 40 → 32px on a phone). Stated as a share of the page
   gutter, so it follows the gutter if that ever changes.
   ⚙️ On the card GRIDS, not on each card: space on the card would also widen the gap BETWEEN two
   side-by-side cards, which a 576–767px phone in landscape shows.
   ☠️ PADDING on a grid, not margin: the intro grid IS the page shell (`cg-shell cg-intro__cards`),
   whose `margin-inline: auto` centres it — a margin replaced that and slid the whole shell sideways
   with the cards still 20px from the edge (the gate caught it). Padding insets the cards whether or
   not the grid is also the shell. The quote block has no grid of its own (its column also holds tick
   lists, which are not cards) and padding would only fatten it, so it takes a margin.
   ⚙️ Placed after every card rule: these must follow the `margin`/`padding` shorthands above.
   ⚙️ `verify-smartbos.mjs` checks the inset on every card at phone widths. */
@media (max-width: 47.99rem) {
	.cg-intro__cards,
	.cg-stages,
	.cg-sectors,
	.cg-tiers { padding-inline: calc(var(--cg-gutter) * 0.6); }
	.cg-quote,
	.cg-foundation { margin-inline: calc(var(--cg-gutter) * 0.6); }
}

/* ⭐ THE SPARKLE BESIDE "Meet Co-star" (David, 2026-09-12) — the AI mark, in the brand blue.
   ⚙️ Both dimensions are stated: an inline `<svg>` is NOT a replaced element, so with only a width
   it takes the whole cap it is given and letterboxes, and with neither it can measure 0 in a
   shrink-to-fit box. In `em`, so it follows the heading's size wherever the heading is used.
   ⚙️ `vertical-align` lifts it onto the cap line — the glyphs' tops, not the box's. */
.cg-sparkle {
	display: inline-block;
	margin-inline-start: 0.3em;
	color: var(--cg-brand);
	vertical-align: 0.02em;
}
/* Lucide draws in STROKE, not fill — its own settings: 2 units on a 24 viewBox, round joins. */
.cg-sparkle svg {
	width: 0.9em;
	height: 0.9em;
	display: block;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ------------------------------------------------------------------ prose */

.cg-prose h2 { font-size: 1.4rem; margin-top: 2rem; }
.cg-prose h2:first-child { margin-top: 0; }
.cg-prose p { max-width: 44rem; color: var(--cg-ink-soft); }

/* ------------------------------------------------------------------ cta */

.cg-cta {
	padding-block: var(--cg-band-y);
	/* ⭐ THE DEEPER WASH (2026-09-13): with "Built to keep growing" dropped, this panel sits directly
	   under the tinted integrations band, and the plain wash measured 238,240,254 against the band's
	   238,240,250 — the two read as one block. The deeper wash (226,228,251) separates them without a
	   rule, which the alternating grounds were designed not to need, and keeps this a coloured closing
	   panel above the white sign-up section. */
	background: var(--cg-brand-wash-deep);
	text-align: center;
}
.cg-cta h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); }
.cg-cta p { max-width: 42rem; margin-inline: auto; color: var(--cg-ink-soft); }
.cg-cta .cg-btn { margin-top: 1.5rem; }

/* ------------------------------------------------------------------ sign up */

/* ⭐ The register-interest form (David, 2026-09-13), in the measure and centring the sign-in panel
   used before it was withdrawn the same day. */
.cg-signup {
	padding-block: var(--cg-band-y);
	border-top: 1px solid var(--cg-line);
}
/* ☠️ THE BAR IS STICKY, SO A JUMP TO THE PANEL PARKS ITS TOP UNDER THE BAR. Measured at 390px: the
   band padding (56px) is less than the bar (73px), and the heading sat 16px BEHIND it. 2.5rem more
   puts it 24px clear on a phone and 58px on a desktop; what shows above is the previous section's
   last 40px, which the bar covers. */
.cg-signup { scroll-margin-top: 2.5rem; }
.cg-signup h2 { font-size: clamp(1.5rem, 3vw, 2rem); text-align: center; }
.cg-signup__lede { text-align: center; color: var(--cg-ink-soft); max-width: 36rem; margin-inline: auto; }
.cg-signup__form { max-width: 34rem; margin: 1.75rem auto 0; display: grid; gap: 1.25rem; }
.cg-signup__label {
	display: block;
	font-weight: 600;
	font-size: 0.9rem;
	margin-bottom: 0.5rem;
}
.cg-signup__fields { display: grid; gap: 1rem; }
@media (min-width: 36rem) {
	.cg-signup__fields { grid-template-columns: 1fr 1fr; }
}
.cg-signup__field .cg-signup__label { margin-bottom: 0.4rem; }
.cg-signup__input {
	box-sizing: border-box;
	width: 100%;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--cg-line);
	border-radius: 10px;
	background: var(--cg-ground);
	font: inherit;
	color: var(--cg-ink);
}
.cg-signup__input:focus { outline: 0; border-color: var(--cg-brand); }
.cg-signup__form .cg-btn { justify-self: center; }
.cg-signup__note { margin: 0; text-align: center; font-size: 0.88rem; color: var(--cg-ink-soft); }
.cg-signup__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cg-signup__status {
	max-width: 34rem;
	margin: 1.5rem auto 0;
	padding: 0.9rem 1.1rem;
	border-radius: var(--cg-radius);
	text-align: center;
}
.cg-signup__status--ok { background: var(--cg-brand-wash); border: 1px solid var(--cg-brand-line); color: var(--cg-brand-deep); }
.cg-signup__status--problem { background: #fff4f2; border: 1px solid #f1c5bd; color: #8a2a17; }

/* ------------------------------------------------------------------ footer */

.cg-footer {
	background: var(--cg-ink);
	color: #c9cce4;
	padding-block: clamp(2.5rem, 6vw, 4rem);
}
.cg-footer__inner { display: grid; gap: 2rem; }
@media (min-width: 48rem) {
	.cg-footer__inner { grid-template-columns: 1.4fr 1fr 1fr; align-items: start; }
}
/* ⭐ THE STRAPLINE SITS CLOSER TO THE LOGO (David, 2026-09-13 — "slightly smaller"). Measured, the 29px
   of blank space between the logo's ink and the strapline's was only 16px of intended margin: the
   logo link is inline-flex, so it sat in a LINE BOX with ~8px of descender room below it — the same
   trap the header logo had. A flex link is exactly as tall as the logo, so that hidden space goes and
   what remains is the margin itself. `fit-content` keeps the link's click area the size of the logo. */
.cg-footer__brand .cg-logo { display: flex; }
/* ⭐ THE FOOTER LOGO IS ALWAYS EXACTLY AS WIDE AS THE STRAPLINE UNDER IT (David, 2026-09-13).
   The brand block shrinks to its content; the LOGO contributes nothing to that (`width: 0`) and then
   fills it (`min-width: 100%`), so the only thing deciding the width is the strapline's text — change
   the words or their size and the logo follows, at every screen width, with no script. The strapline
   never wraps, or a narrow column would shrink the logo to one word's width. */
.cg-footer__brand { width: fit-content; }
/* ⚙️ Inset 1px at each end: the strapline's LETTERS sit 1px inside its box at each end (their side
   bearings, measured 2026-09-13: logo ink 216 against text ink 214 at every width), while the
   logo's ink fills its box edge to edge (its artwork has no margin in its viewBox). */
.cg-footer__brand .cg-logo { width: 0; min-width: calc(100% - 2px); margin-inline: 1px; }
.cg-footer__brand .cg-footer__strap { white-space: nowrap; }
/* …and "smaller still" (David, 2026-09-13): the margin halves, 1rem → 0.5rem. */
.cg-footer__strap { margin-top: 0.5rem; color: #8f95bd; font-size: 0.93rem; }
.cg-footer nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.cg-footer a { color: #c9cce4; text-decoration: none; }
.cg-footer a:hover { color: #fff; }
.cg-footer__legalnav { margin-bottom: 0.75rem; }
.cg-footer__legalnav a { margin-right: 1rem; }
.cg-footer__legal p { color: #8f95bd; font-size: 0.9rem; margin: 0; }

/* ------------------------------------------------------------------ narrow */

/* ⭐ THE MENU BUTTON TAKES OVER BELOW 60rem, NOT 48rem (2026-09-13). With "Sign up" added the bar's
   one-line menu measured 617px beside a 224px logo — 921–934px of viewport with the gutters — so from
   768 to ~930 the links wrapped onto two lines ("The four / stages") while nothing overflowed.
   960px leaves ~26px to spare. ⚙️ Sign in was withdrawn the same day and the menu re-measured 496px
   (fits from ~800px); 60rem is KEPT, so tablets keep the Menu button and a restored Sign in fits
   without moving the breakpoint again. ⚠️ A wider menu (another link, a longer word) lowers the
   margin: the smartbos gate fails on a wrapped link. This block is the menu's alone; the phone CARD
   rules keep 48rem. */
@media (max-width: 59.99rem) {
	.cg-navtoggle {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		background: none;
		border: 1px solid var(--cg-line);
		border-radius: 999px;
		padding: 0.45rem 0.9rem;
		font: inherit;
		font-weight: 500;
		color: var(--cg-ink);
		cursor: pointer;
	}
	.cg-navtoggle__bars { display: grid; gap: 3px; }
	.cg-navtoggle__bars span {
		display: block;
		width: 16px;
		height: 2px;
		background: currentColor;
		border-radius: 2px;
	}
	.cg-nav {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
		padding: 1rem var(--cg-gutter) 1.5rem;
		/* ⭐ Stands out (David, 2026-09-11): a darker lavender than the panels, the card rule, and a
		   drop shadow down onto the page. */
		background: var(--cg-menu);
		border-bottom: 1px solid var(--cg-card-line);
		box-shadow: 0 18px 32px -16px rgba(20, 22, 43, 0.3), 0 4px 10px -6px rgba(47, 58, 227, 0.2);
		/* ⭐ ANIMATED BOTH WAYS, and still `display: none` when closed. `allow-discrete` holds `display`
		   until the fade has run, and `@starting-style` gives the opening a painted start value — the
		   one thing a plain transition lacks on an element that was not displayed. ⚠️ Keeping
		   `display` (not a permanently shown menu hidden by opacity) is load-bearing twice: a closed
		   menu stays out of the tab order, and `verify-smartbos.mjs` asserts EXACTLY ONE of menu and
		   toggle is displayed. A browser without these features simply opens and closes instantly. */
		opacity: 0;
		transform: translateY(-0.5rem);
		transition: opacity 0.2s ease, transform 0.2s ease, display 0.2s allow-discrete;
	}
	.cg-nav[data-open='true'] { display: flex; opacity: 1; transform: none; }
	@starting-style {
		.cg-nav[data-open='true'] { opacity: 0; transform: translateY(-0.5rem); }
	}
	@media (prefers-reduced-motion: reduce) {
		.cg-nav { transition: none; }
	}
	.cg-nav nav ul { flex-direction: column; gap: 0.75rem; }
	/* ⚙️ The open menu is positioned against the STICKY MASTHEAD (a positioned box, so it is the
	   containing block), not the inner shell — so it runs edge to edge and its own gutter padding lines
	   the links up under the logo. Inside the shell it stopped a gutter short of both edges, which a
	   white menu hid and the darker lavender showed. Not `100vw`: that counts a desktop scrollbar and
	   would push the page sideways while the menu is open. */
}