/* ============================================================
   THE COMPANY PAGES — `/`, /about, /contact and the company sections the
   merge adds to the /for-* pages (consolidation plan WS5.3b, V7).
   ------------------------------------------------------------
   Waypoint's own component layer (src/lib/waypoint/, vendored) draws the
   pieces — the ink band, the doors, the spine, the ledger, the rail, the
   lead form. This file lays them out on prepgraph.com's company pages, the
   way prepgraph.ai's route files laid them out on the umbrella: the same
   grammar, the same measures.

   Rules this file keeps (company.test.ts holds the first two):
   - Every value that is a colour, a face or a type size is a Waypoint token
     (var(--u-…)). No hex, no rgb(), no named colour.
   - Every selector starts with .co-, under the company page's root, so the
     file repaints nothing that has not opted in.
   - Motion lives only under prefers-reduced-motion: no-preference (the
     package's .wp-rv carries the reveal; the spine draws itself).

   It reaches a page only as the `company` family of a Waypoint cohort
   (src/lib/theme/cohorts.ts, WaypointCohortHead): render-blocking in the
   head, because the company components load lazily and carry no <style>
   of their own (their CSS would miss the first paint).

   THE ONE RULE (prepgraph.ai's): if you read it, Inter; if it announces,
   Bricolage; if it is counted, dated, addressed or measured, Geist Mono.
   One accent, used like a laser pointer: it lights one thing at a time.
   ============================================================ */

/* ---- Rhythm helpers (the umbrella's Tailwind steps, named) --------- */
.co .co-mt-3 { margin-top: 0.75rem; }
.co .co-mt-4 { margin-top: 1rem; }
.co .co-mt-5 { margin-top: 1.25rem; }
.co .co-mt-6 { margin-top: 1.5rem; }
.co .co-mt-8 { margin-top: 2rem; }

.co {
	font-family: var(--u-font-sans);
	color: var(--u-text);
	background: var(--u-paper);
}
/* app.postcss styles bare elements site-wide, unlayered: lists at 14px in
   the old grey with a .5rem gap under every item, and every link in the old
   indigo. The company markup sets its own type on each piece, so under its
   root those bare rules are put back to "inherit", exactly as the bridge
   does for the Waypoint chrome. The legacy previews framed in .co-plate
   keep the rules they were drawn against. */
.co :is(ul, ol):not(.co-plate *) {
	font-size: inherit;
	color: inherit;
	line-height: inherit;
}
.co li:not(.co-plate *) {
	margin-bottom: 0;
}
/* app.postcss sets every bare <p> at 14px: a paragraph of Waypoint prose
   takes its block's size and leading instead. */
.co p:not([class]):not(.co-plate *) {
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}
.co a:not([class]):not(.co-plate *) {
	color: var(--u-laser-text);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}
.co .co-small-lk {
	font-size: var(--u-fs-14);
}
/* A word and the dash after it, kept on one line. */
.co .co-nobr {
	white-space: nowrap;
}
/* The accent word in an H1: the laser, once per page. */
.co .co-laser {
	color: var(--u-laser-text);
}
/* A supporting section's heading, one step under a main section's wp-d2
   (52px): about 36px, so nine H2s on `/` do not all announce at one size. */
.co .co-h2s {
	font-size: clamp(1.625rem, 1.1rem + 1.6vw, 2.25rem);
	line-height: 1.12;
	max-width: 16em;
}

/* One filled "Start free" in the first screen: while the hero's actions are
   on screen (CompanyHome sets data-co-cta-in, the prerender included), the
   header's own steps aside. It collapses to no width, so the header row
   closes up rather than keeping a hole at its end; when it comes back, once
   the hero's has scrolled under the header, the market pill and Log in slide
   left by its width. That is a small shift the reader's scroll starts
   (≤0.005 measured at 1280–1440px), and the one this rule costs.
   It stays a Tab stop while collapsed and opens when keyboard focus reaches
   it, so Start free is still the fifth stop at the top of `/` (WS1.6
   acceptance 2: at most 8 Tabs at 1280px); hidden outright it would be the
   fourteenth, the hero's.
   The one rule in this file that reaches outside a company root: it reads
   the home's state, and only it (company.test.ts allows this one shape). */
:root:has(.co-home[data-co-cta-in]) .wp-hdr__go:not(:focus-visible) {
	opacity: 0;
	max-width: 0;
	padding-inline: 0;
	border-width: 0;
	margin-left: -0.5rem;
	overflow: hidden;
}
:root:has(.co-home) .wp-hdr__go {
	max-width: 12rem;
	white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
	:root:has(.co-home) .wp-hdr__go {
		transition:
			opacity var(--u-t-2) var(--u-ease),
			max-width var(--u-t-2) var(--u-ease),
			padding var(--u-t-2) var(--u-ease),
			margin var(--u-t-2) var(--u-ease);
	}
}

/* ---- The research strip: 40px, paper-2, a hairline below ---------- */
.co-strip {
	background: var(--u-paper-2);
	border-bottom: 1px solid var(--u-rule);
	font-size: var(--u-fs-13);
	color: var(--u-text-2);
}
.co-strip__in {
	min-height: 40px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.75rem;
	padding-block: 0.4rem;
}
.co-strip .co-strip__lk {
	font-size: var(--u-fs-13);
}

/* ---- The ink band --------------------------------------------------- */
.co-hero__grid {
	padding-top: clamp(2.25rem, 5vw, 4.5rem);
	padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		'head'
		'door'
		'acts'
		'sub';
	row-gap: 1.5rem;
}
.co-hero__head { grid-area: head; min-width: 0; }
.co-hero__door { grid-area: door; min-width: 0; }
.co-hero__acts { grid-area: acts; }
.co-hero__sub { grid-area: sub; }

/* The first screen's measures are in em, not ch: `ch` is the width of the
   font's "0", so it changed when Bricolage and Inter replaced their metric
   fallbacks, the H1 lost a line at 768px and everything under it jumped
   (CLS 0.11). An em is the font size, the same before and after the swap.
   10.5em and 29em are 17ch of Bricolage and 46ch of Inter. */
.co-hero .co-hero__h1 {
	margin-top: 1.1rem;
	max-width: 10.5em;
	color: var(--u-on-ink-hi);
}
.co-hero .co-hero__sub {
	color: var(--u-on-ink-2);
	max-width: 29em;
}
/* Tablet, 640–1023px: the H1 in its three lines, each a block, so Bricolage
   and its fallback break it alike and the font swap moves nothing (review,
   30 Sep: with the fonts 500 ms late the H1 re-broke there, CLS 0.06–0.27).
   The size is the d1's, capped at 8.2vw: the longest line, "mastered the
   syllabus —", is about 10.4em in either face, so it fills about 91% of the
   column (94% of the viewport) at every width in the range, where uncapped it
   filled 96–101%. Phones and desktops keep their own sizes and wrap as they
   did; home.ts heroTitleLines says where the lines turn. */
@media (min-width: 640px) and (max-width: 1023px) {
	.co-hero .co-hero__h1 {
		font-size: min(var(--u-fs-d1), 8.2vw);
		max-width: none;
	}
	.co-hero .co-hero__l {
		display: block;
	}
}
.co-hero__acts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
}
.co-hero__fine {
	font-size: var(--u-fs-12);
	letter-spacing: 0.06em;
	color: var(--u-on-ink-3);
}
/* The door sits on ink: its tiles are ink plates, the voice line bridges them. */
.co-hero .wp-door__line {
	color: var(--u-on-ink-hi);
}
/* Keyboard focus on a door is the ring the hero's buttons wear, not the
   hover's glow alone: the two most important links in the first screen
   must say "you are here" differently from "you are pointing here". */
.co-hero .wp-door__tile:is(a):focus-visible {
	box-shadow: var(--u-focus-on-ink), var(--u-glow-laser);
}

/* Desktop: the copy on the left, the two doors on the right, all four
   above the fold at 1280 × 720. */
@media (min-width: 1024px) {
	.co-hero__grid {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		grid-template-areas:
			'head door'
			'acts door'
			'sub  door';
		grid-template-rows: auto auto 1fr;
		column-gap: clamp(2.5rem, 5vw, 5rem);
		row-gap: 1.25rem;
		align-items: start;
	}
	.co-hero__door {
		padding-top: 2.4rem;
	}
	/* In the right-hand column the two tiles stack; the voice line sits
	   level in the gap between them, as it reads at 768px — turned upright
	   it read as a stray squiggle (design QA, 29 Sep). */
	.co-hero .wp-door__grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 2.75rem;
		column-gap: 0;
	}
	/* Big enough to announce, small enough that the H1, Log in and Start free
	   all sit above a 1280 × 720 fold beside the doors. */
	.co-hero .co-hero__h1 {
		font-size: clamp(3.25rem, 1rem + 4.2vw, 4.75rem);
		line-height: 1.02;
	}
	.co-hero__acts {
		margin-top: 0.5rem;
	}
}

/* Phone: the two doors side by side, short, so that both — and Log in and
   Start free under them — sit in the first screen at 390 × 844. The tiles
   keep their country, exams and door; the sentence under each is on the
   country's own page, one tap away. */
@media (max-width: 639px) {
	.co-hero .co-hero__h1 {
		font-size: clamp(2.125rem, 9.4vw, 2.75rem);
		line-height: 1.02;
	}
	.co-hero .wp-door__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 0.75rem;
	}
	.co-hero .wp-door__tile {
		padding: 1rem;
	}
	.co-hero .wp-door__body {
		display: none;
	}
	.co-hero .wp-door__name {
		font-size: var(--u-fs-17);
	}
	.co-hero .wp-door__line {
		font-size: var(--u-fs-17);
	}
	.co-hero__acts .wp-btn {
		flex: 1 1 auto;
	}
	.co-hero__fine {
		flex-basis: 100%;
	}
}
/* The narrowest phones: side by side, each door lost its sentence and the
   India tile stood half empty beside the US one's wrapped link. Two
   full-width rows instead — the country and its exams on one line, the door
   under them — with the voice line level in the gap, as on a desktop. */
@media (max-width: 480px) {
	.co-hero .wp-door__grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 1.75rem;
	}
	.co-hero .wp-door__tile {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			'name exams'
			'cta cta';
		align-items: baseline;
		column-gap: 0.75rem;
		row-gap: 0.4rem;
		padding: 0.9rem 1rem;
	}
	.co-hero .wp-door__name {
		grid-area: name;
	}
	.co-hero .wp-door__exams {
		grid-area: exams;
		justify-self: end;
	}
	.co-hero .wp-door__cta {
		grid-area: cta;
		margin-top: 0;
		padding-top: 0;
	}
	.co-hero .wp-door__bridge {
		display: block;
		position: absolute;
		left: 50%;
		top: 50%;
		width: 64px;
		height: 24px;
		transform: translate(-50%, -50%);
		pointer-events: none;
	}
}

/* The loop, drawn under the band. */
.co-hero__loop {
	padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
.co-hero .co-hero__looplbl {
	color: var(--u-on-ink-3);
	padding-top: 1.25rem;
	border-top: 1px solid var(--u-rule-on-ink);
}
.co-hero__spine {
	margin-top: 0.75rem;
}
.co-hero__spine > .wp-spine {
	min-width: 640px;
}

/* ---- Plates: a legacy preview framed as a Waypoint figure ---------- */
.co-plate {
	margin: 0;
	background: var(--u-plate);
	border: 1px solid var(--u-rule);
	border-radius: var(--u-r-3);
	padding: clamp(1rem, 2.5vw, 1.5rem);
	box-shadow: var(--u-shadow-1);
	min-width: 0;
}
.co-plate__cap {
	display: block;
	margin-bottom: 1rem;
}
/* A phone has no room for a frame around a frame: the preview's own card is
   the plate, and the caption sits above it. */
@media (max-width: 639px) {
	.co-plate {
		padding: 0;
		border: 0;
		background: none;
		box-shadow: none;
	}
}
.co-plate__note {
	margin-top: 1rem;
	color: var(--u-text-2);
}

/* ---- 3. The system -------------------------------------------------- */
/* The mastery graph keeps its three states apart. Its preview paints
   "mastered" in --pg-gold and "tonight's target" in --pg-coral, and the
   bridge maps both to the laser, so the legend's first and third entries
   would be one blue. Here the laser marks only tonight's target — the one
   thing to look at — what is mastered is ink, and what is not yet stays
   the preview's grey. */
.co .co-graph {
	--pg-gold: var(--u-text-hi);
	--pg-coral: var(--u-laser-text);
}
.co-system__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2.5rem;
	padding-bottom: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 1024px) {
	.co-system__grid {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		column-gap: clamp(2.5rem, 5vw, 4.5rem);
		align-items: start;
	}
	.co-system__tutor {
		position: sticky;
		top: 6rem;
	}
}
.co-system__pair {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
	padding-bottom: var(--u-section);
}
@media (min-width: 900px) {
	.co-system__pair {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: stretch;
	}
	/* The graph's plate is as tall as the report's beside it, and the graph
	   fills it: the card starts under the caption, its canvas takes the
	   height the report gives the row, and the note sits at the foot — no
	   empty paper above or below a card centred in a tall plate. */
	.co-graph {
		display: flex;
		flex-direction: column;
	}
	.co-graph > :not(.co-plate__cap):not(.co-plate__note) {
		flex: 1 1 auto;
	}
}
.co-report__body {
	margin-top: 0.5rem;
	color: var(--u-text-2);
	max-width: 52ch;
}
.co-report__sample {
	margin-top: 1.25rem;
}

/* ---- The three previews, dressed in Waypoint inside their plates ----- */
/* The previews are legacy components with scoped CSS of their own (the
   route imports them statically; other pages still render them as they
   are). Inside the home's plates they take Waypoint's faces, rules and
   grounds, and one laser each: the tutor's live dot, the graph's target,
   the report's "Focus next week". Each rule names the plate and the
   preview's root as well, to out-rank the preview's scoped rules without
   !important. */

/* The tutor at work. */
.co .co-system__tutor .tutor-preview {
	font-family: var(--u-font-sans);
	max-width: none;
	border-color: var(--u-rule);
	border-radius: var(--u-r-2);
	box-shadow: none;
}
.co .co-system__tutor .tutor-preview .tp-head {
	border-bottom-color: var(--u-rule);
}
.co .co-system__tutor .tutor-preview :is(.tp-live, .tp-topic, .tp-exam) {
	font-family: var(--u-font-mono);
	font-size: var(--u-fs-12);
	font-weight: 500;
	letter-spacing: 0.1em;
	color: var(--u-text-3);
}
.co .co-system__tutor .tutor-preview .tp-topic {
	color: var(--u-text-hi);
}
.co .co-system__tutor .tutor-preview .tp-dot {
	background: var(--u-laser-line);
	box-shadow: 0 0 0 3px var(--u-laser-wash);
	animation: none;
}
@keyframes co-live {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0.35;
	}
	100% {
		opacity: 1;
	}
}
@media (prefers-reduced-motion: no-preference) {
	.co .co-system__tutor .tutor-preview .tp-dot {
		animation: co-live 2s ease-in-out infinite;
	}
}
.co .co-system__tutor .tutor-preview .tp-board {
	background: var(--u-paper-2);
	border-color: var(--u-rule);
	border-radius: var(--u-r-2);
}
/* The diagram's two quantities in ink; the axis keeps the laser. */
.co .co-system__tutor .tutor-preview .tp-diagram :is(.s6, .s7) {
	stroke: var(--u-text-2);
}
.co .co-system__tutor .tutor-preview .tp-diagram marker path {
	fill: var(--u-text-2);
}
.co .co-system__tutor .tutor-preview .tp-caption {
	font-family: var(--u-font-display);
	font-style: normal;
}
.co .co-system__tutor .tutor-preview .tp-who {
	font-family: var(--u-font-mono);
	font-size: var(--u-fs-12);
	font-weight: 500;
	letter-spacing: 0.08em;
}
/* The student's label on the laser wash: the ink laser at 12px. */
.co .co-system__tutor .tutor-preview .tp-who-you {
	color: var(--u-laser-text);
}
.co .co-system__tutor .tutor-preview .tp-who-ai {
	color: var(--u-text-2);
}
.co .co-system__tutor .tutor-preview :is(.tp-who-you i, .tp-mic-hint i) {
	display: none;
}
.co .co-system__tutor .tutor-preview .tp-turn-you {
	background: var(--u-laser-wash);
	border-color: var(--u-rule);
}
.co .co-system__tutor .tutor-preview .tp-turn-you p {
	color: var(--u-text-hi);
}
.co .co-system__tutor .tutor-preview .tp-voice {
	background: var(--u-paper-2);
	border-color: var(--u-rule);
}
.co .co-system__tutor .tutor-preview .tp-voice-text {
	font-family: var(--u-font-sans);
	font-style: normal;
	color: var(--u-text);
}
/* The tutor speaking is the voice line (the preview's orb slot), which is
   the waveform too: the bars beside it would say it twice. */
.co-tutor__voice {
	display: block;
	flex: none;
	width: 56px;
	--wp-voice-offset: 0;
}
.co-tutor__voice .wp-voice__line {
	stroke-width: 2;
}
.co .co-system__tutor .tutor-preview .tp-wave {
	display: none;
}
.co .co-system__tutor .tutor-preview .tp-mic-hint {
	color: var(--u-text-2);
	font-size: var(--u-fs-13);
}
/* A phone: the live label and the exam share the first row, spaced apart,
   and the topic takes the second whole — not three ragged rows. */
@media (max-width: 480px) {
	.co .co-system__tutor .tutor-preview .tp-head {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: 0.75rem;
		row-gap: 0.4rem;
	}
	.co .co-system__tutor .tutor-preview .tp-live {
		grid-column: 1;
		grid-row: 1;
	}
	.co .co-system__tutor .tutor-preview .tp-exam {
		grid-column: 2;
		grid-row: 1;
	}
	.co .co-system__tutor .tutor-preview .tp-topic {
		grid-column: 1 / -1;
		grid-row: 2;
		font-size: var(--u-fs-14);
		letter-spacing: 0.06em;
	}
}

/* The graph. */
.co .co-graph .mg {
	border-color: var(--u-rule);
	border-radius: var(--u-r-2);
	box-shadow: none;
}
.co .co-graph .mg :is(.mg-label, .mg-live) {
	font-family: var(--u-font-mono);
	font-size: var(--u-fs-12);
	font-weight: 500;
}
.co .co-graph .mg .mg-live {
	color: var(--u-text-2);
}
.co .co-graph .mg .mg-live i {
	background: var(--u-text-2);
}

/* The report: flat (no tilt, no cream glow), Waypoint chips, and one laser:
   "Focus next week". */
.co .co-report .co-report__sample .report {
	max-width: none;
	transform: none;
	transition: none;
	box-shadow: none;
	border: 1px solid var(--u-rule);
	border-radius: var(--u-r-2);
	color: var(--u-text);
}
.co .co-report .co-report__sample .report:hover {
	transform: none;
}
.co .co-report .co-report__sample .report::before {
	display: none;
}
.co .co-report .co-report__sample .report .report-head {
	border-bottom-color: var(--u-rule);
}
.co .co-report .co-report__sample .report .brand-mark {
	background: var(--u-text-hi);
	box-shadow: none;
	border-radius: var(--u-r-1);
}
.co .co-report .co-report__sample .report .brand-name {
	font-weight: 600;
	color: var(--u-text-hi);
}
.co .co-report .co-report__sample .report :is(.week, .who-goal) {
	font-family: var(--u-font-mono);
	font-size: var(--u-fs-12);
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--u-text-2);
}
.co .co-report .co-report__sample .report .who-name {
	font-family: var(--u-font-display);
	font-weight: 600;
	color: var(--u-text-hi);
}
.co .co-report .co-report__sample .report .block {
	background: var(--u-paper-2);
	border-color: var(--u-rule);
	border-radius: var(--u-r-1);
}
.co .co-report .co-report__sample .report .block-title {
	font-family: var(--u-font-mono);
	font-weight: 500;
	letter-spacing: 0.1em;
	color: var(--u-text-3);
}
.co .co-report .co-report__sample .report .d-on {
	background: var(--u-ink-700);
}
.co .co-report .co-report__sample .report :is(.streak-meta, .trend-meta) {
	font-weight: 500;
	color: var(--u-text-2);
}
.co .co-report .co-report__sample .report .up {
	font-family: var(--u-font-mono);
	font-weight: 600;
	color: var(--u-text-hi);
}
.co .co-report .co-report__sample .report .trend path:last-of-type {
	stroke: var(--u-ink-700);
}
.co .co-report .co-report__sample .report .chips li {
	font-weight: 500;
	background: var(--u-plate);
	color: var(--u-text);
	border: 1px solid var(--u-rule);
	border-radius: var(--u-r-1);
}
.co .co-report .co-report__sample .report .chips-warn li {
	background: var(--u-laser-wash);
	color: var(--u-laser-text);
	border-color: var(--u-laser-line);
}
.co .co-report .co-report__sample .report :is(.chips i, .badge i) {
	display: none;
}
.co .co-report .co-report__sample .report .report-foot {
	border-top-color: var(--u-rule);
}
.co .co-report .co-report__sample .report .badge {
	font-family: var(--u-font-mono);
	font-weight: 500;
	background: var(--u-paper-2);
	color: var(--u-text-2);
	border-radius: var(--u-r-1);
}
.co .co-report .co-report__sample .report .cta {
	color: var(--u-text-hi);
}

/* ---- 4. The countdowns ---------------------------------------------- */
.co-exams {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}
@media (min-width: 1024px) {
	.co-exams {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
.co-exams > li {
	display: flex;
}
.co .co-exam {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	text-decoration: none;
	color: var(--u-text);
	padding: 1.25rem;
}
.co .co-exam__cd {
	flex: 1;
}
/* The countdown's own component, set as a count: Geist Mono, large.
   ExamCountdown keeps its scoped rules, and Svelte scopes each part of a
   selector (`.cd--stack .cd-big .cd-num` reads six classes), so the rules
   below name the grid and the tile as well, to out-rank them without
   !important. */
.co .co-exam .cd.cd--stack {
	background: none;
	border: 0;
	padding: 0;
	box-shadow: none;
	align-items: flex-start;
	text-align: left;
}
.co .co-exams .co-exam .cd .cd-big {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	font-family: var(--u-font-mono);
	font-variant-numeric: tabular-nums;
	font-size: var(--u-fs-14);
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--u-text-2);
	line-height: 1;
}
/* The count itself: Geist Mono counts, and it counts big. */
.co .co-exams .co-exam .cd.cd--stack .cd-big .cd-num {
	font-family: var(--u-font-mono);
	font-size: clamp(2.25rem, 1.5rem + 2.2vw, 3.25rem);
	font-weight: 500;
	letter-spacing: -0.03em;
	color: var(--u-text-hi);
	line-height: 1;
}
.co .co-exams .co-exam .cd .cd-sub,
.co .co-exams .co-exam .cd .cd-deadline {
	display: block;
	margin-top: 0.6rem;
	font-family: var(--u-font-sans);
	font-size: var(--u-fs-14);
	color: var(--u-text-2);
	line-height: 1.45;
	letter-spacing: 0;
}
@media (hover: hover) and (pointer: fine) {
	.co .co-exams .co-exam:hover .cd.cd--stack .cd-big .cd-num {
		color: var(--u-laser-text);
	}
}
.co .co-exam__cta {
	font-size: var(--u-fs-13);
	color: var(--u-laser-text);
}

/* ---- 5. The free tools ---------------------------------------------- */
.co-tools {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	border-top: 1px solid var(--u-rule-strong);
}
@media (min-width: 720px) {
	.co-tools {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 2.5rem;
	}
}
.co .co-tool {
	display: grid;
	grid-template-columns: 7.5rem minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 1rem;
	padding: 1rem 0.25rem;
	border-bottom: 1px solid var(--u-rule);
	text-decoration: none;
	color: var(--u-text-hi);
}
.co-tool__tag {
	font-size: var(--u-fs-12);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--u-text-3);
}
/* Phone: the exam tag rides above the tool's name. */
@media (max-width: 639px) {
	.co .co-tool {
		grid-template-columns: minmax(0, 1fr) auto;
		row-gap: 0.15rem;
	}
	.co-tool__tag {
		grid-column: 1 / -1;
	}
}
.co-tool__name {
	font-size: var(--u-fs-16);
	font-weight: 500;
}
.co-tool__arrow {
	color: var(--u-text-3);
}
@media (prefers-reduced-motion: no-preference) {
	.co-tool__arrow {
		transition: transform var(--u-t-2) var(--u-ease), color var(--u-t-2) var(--u-ease);
	}
}
@media (hover: hover) and (pointer: fine) {
	.co .co-tool:hover .co-tool__name {
		color: var(--u-laser-text);
	}
	.co .co-tool:hover .co-tool__arrow {
		color: var(--u-laser-text);
		transform: translateX(3px);
	}
}
.co .co-tool:focus-visible {
	box-shadow: var(--u-focus);
}

/* ---- 6. The audience doors ------------------------------------------ */
.co-doors {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
}
@media (min-width: 720px) {
	.co-doors {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 1024px) {
	.co-doors {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
	.co-doors > .co-door {
		grid-column: span 2;
	}
	.co-doors > .co-door:nth-child(-n + 2) {
		grid-column: span 3;
	}
}
.co .co-door {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	text-decoration: none;
	color: var(--u-text);
}
.co-door__body {
	font-size: var(--u-fs-15);
	line-height: 1.55;
	color: var(--u-text-2);
}
.co-door__cta {
	margin-top: auto;
	padding-top: 0.75rem;
	font-size: var(--u-fs-13);
	color: var(--u-laser-text);
}

/* ---- 7. The five parts: a compact ledger ---------------------------- */
/* One row a part: its name (Bricolage announces), who it is for (Inter
   reads), and its address (Geist Mono). What each does is on /about. */
.co-parts {
	list-style: none;
	margin: 0;
	padding: 0;
}
.co-parts__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.3rem 2rem;
	align-items: baseline;
	padding-block: 1.1rem;
	border-bottom: 1px solid var(--u-rule);
}
@media (min-width: 720px) {
	.co-parts__row {
		grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr);
		padding-block: 1.3rem;
	}
}
.co .co-parts__name {
	margin: 0;
	font-family: var(--u-font-display);
	font-size: var(--u-fs-d3);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.25;
	color: var(--u-text-hi);
	text-wrap: balance;
}
.co .co-parts__line {
	margin: 0;
	font-size: var(--u-fs-15);
	line-height: 1.55;
	color: var(--u-text-2);
	text-wrap: pretty;
}
.co .co-parts__host {
	margin: 0;
	font-size: var(--u-fs-13);
	overflow-wrap: anywhere;
}
@media (min-width: 720px) {
	.co .co-parts__host {
		justify-self: end;
		text-align: right;
	}
}
@media (hover: hover) and (pointer: fine) {
	.co .co-parts__row:hover .co-parts__name {
		color: var(--u-laser-text);
	}
}
@media (prefers-reduced-motion: no-preference) {
	.co .co-parts__name {
		transition: color var(--u-t-2) var(--u-ease);
	}
}

/* ---- 9. The company and its founders -------------------------------- */
.co-company {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2.5rem;
}
@media (min-width: 1024px) {
	.co-company {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		column-gap: clamp(2.5rem, 5vw, 5rem);
		align-items: start;
	}
}
.co-beats {
	list-style: none;
	margin: 0;
	padding: 1.25rem 0 0;
	border-top: 1px solid var(--u-rule);
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	max-width: 62ch;
}
.co-beats__row {
	display: grid;
	grid-template-columns: 1rem minmax(0, 1fr);
	gap: 0.5rem;
	font-size: var(--u-fs-16);
	line-height: 1.6;
	color: var(--u-text);
}
/* The laser square — the site's eyebrow mark — as the bullet. */
.co-beats__n {
	width: 6px;
	height: 6px;
	margin-top: 0.65rem;
	background: var(--u-laser-line);
}
.co-company__line {
	color: var(--u-text-2);
	max-width: 62ch;
}
.co-people {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--u-rule-strong);
}
.co-person {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.2rem;
	padding-block: 1.1rem;
	border-bottom: 1px solid var(--u-rule);
}
.co-person__role {
	font-size: var(--u-fs-12);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--u-text-3);
}
.co .co-person__name {
	font-family: var(--u-font-display);
	font-size: var(--u-fs-24);
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--u-text-hi);
	text-decoration: none;
	line-height: 1.2;
}
.co a.co-person__name {
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--u-laser-line) 45%, transparent);
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}
.co a.co-person__name:hover {
	color: var(--u-laser-text);
}
.co-person__bio {
	font-size: var(--u-fs-15);
	line-height: 1.55;
	color: var(--u-text-2);
}

/* ---- 11. Where to start: a laser-edged panel on paper (the footer is the ink) */
.co .co-close {
	padding: clamp(1.75rem, 4vw, 3rem);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
}
@media (min-width: 1024px) {
	.co .co-close {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		column-gap: 3rem;
		align-items: end;
	}
}
.co-close__voice {
	display: block;
	width: 72px;
	margin-bottom: 1.25rem;
	--wp-voice-offset: 0;
}
/* The primary on a row of its own; the two markets an equal pair under it,
   side by side where both fit on one line each, else one above the other —
   never a ragged wrap with one button alone. */
.co-close__acts {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.75rem;
	min-width: 0;
}
.co .co-close__go {
	align-self: stretch;
	justify-content: center;
}
.co-close__pair {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
	gap: 0.75rem;
}
.co .co-close__pair .wp-btn {
	justify-content: center;
	text-align: center;
}

/* ---- Page heads on the company pages (the H1s they keep) ----------- */
.co .co-ph {
	padding-top: clamp(2.5rem, 6vw, 5rem);
	padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
/* em, not ch, as in the home's band: the page heads keep their line
   breaks when the faces replace their fallbacks. 12.4em and 35em are 20ch of
   Bricolage and 56ch of Inter. */
.co .co-ph__h1 {
	margin-top: 1.1rem;
	color: var(--u-on-ink-hi);
	max-width: 12.4em;
}
/* Tablet, 640–1023px: the d1 capped at 8.2vw, as the home's is, so a page
   head's H1 fills the same share of its column at every width in the range
   and the two faces cannot straddle a line end there ("Why we built
   PrepGraph." took two lines in Bricolage and one in its fallback at 660px:
   CLS 0.30 on /about with the fonts late). */
@media (min-width: 640px) and (max-width: 1023px) {
	.co .co-ph__h1 {
		font-size: min(var(--u-fs-d1), 8.2vw);
	}
}
.co .co-ph__lede {
	margin-top: 1.25rem;
	color: var(--u-on-ink-2);
	max-width: 35em;
}
.co .co-crumbs {
	padding-top: 1.25rem;
}

/* ---- /about ------------------------------------------------------- */
.co-about__story {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
}
@media (min-width: 1024px) {
	.co-about__story {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		column-gap: clamp(2.5rem, 5vw, 5rem);
		align-items: start;
	}
}
.co-forum {
	max-width: 62ch;
	padding-top: 1.25rem;
	border-top: 1px solid var(--u-rule);
	color: var(--u-text-2);
}
.co .co-legend {
	font-size: var(--u-fs-13);
	letter-spacing: 0.04em;
	color: var(--u-text-2);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	flex-direction: row-reverse;
	justify-content: flex-end;
}
@media (min-width: 720px) {
	.co .co-legend {
		flex-direction: row;
		justify-content: flex-start;
	}
}
/* Each route's key is its line as the spine draws it: a node and an edge in
   the laser, the institution's at the spine's lighter weight. */
.co-legend__item {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
}
.co-legend__key {
	flex: none;
	width: 28px;
	height: 10px;
	overflow: visible;
}
.co-legend__key path {
	fill: none;
	stroke: var(--u-laser-line);
	stroke-width: 2;
	stroke-linecap: round;
}
.co-legend__key circle {
	fill: var(--u-paper);
	stroke: var(--u-laser-line);
	stroke-width: 1.5;
}
.co-legend__item--2 .co-legend__key {
	opacity: 0.6;
}
/* Two journey tables, one above the other, on one column grid (22 / 56 /
   22 %): WHAT and DELIVERED BY start at the same x in both. Below 1024px the
   tables size to their words; below 720px they stack into rows. */
@media (min-width: 1024px) {
	.co .co-jt--fixed {
		table-layout: fixed;
	}
	.co .co-jt--fixed .co-jt__c1 {
		width: 22%;
	}
	.co .co-jt--fixed .co-jt__c2 {
		width: 56%;
	}
	.co .co-jt--fixed .co-jt__c3 {
		width: 22%;
	}
}
.co-spine-band {
	margin-top: 1.5rem;
}
.co-spine-band--h {
	display: none;
}
.co-spine-band--v {
	display: block;
	max-width: 420px;
}
@media (min-width: 720px) {
	.co-spine-band--h {
		display: block;
	}
	.co-spine-band--v {
		display: none;
	}
}
.co-about__journeys {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2.5rem;
}
.co-team {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
}
@media (min-width: 720px) {
	.co-team {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 1280px) {
	.co-team {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
.co .co-team__card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.co .co-team__name {
	margin: 0;
}

/* ---- The forms on the company pages: one border for every field ------ */
/* A site-wide input[type=…] rule outranks .wp-lf__input, so a text, e-mail
   or phone field drew a lighter border than the select beside it. Restated
   at the form's weight, with its hover, focus and error states. */
.co .wp-lf .wp-lf__input {
	border: 1px solid var(--u-rule-input);
	border-radius: var(--u-r-1);
	background: var(--u-plate);
	color: var(--u-text);
	box-shadow: none;
}
.co .wp-lf .wp-lf__input:hover {
	border-color: var(--u-text-2);
}
.co .wp-lf .wp-lf__input:focus-visible {
	outline: none;
	border-color: var(--u-laser-500);
	box-shadow: var(--u-focus);
}
.co .wp-lf .wp-lf__input.wp-lf__input--error {
	border-color: var(--u-error);
}

/* ---- /contact: the page -------------------------------------------- */
.co .co-contact__paths {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2rem;
}
@media (max-width: 480px) {
	.co .co-contact__paths .wp-btn {
		flex: 1 1 100%;
		justify-content: center;
	}
}
.co-support {
	scroll-margin-top: 5rem;
}
.co-support__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
}
@media (min-width: 1024px) {
	.co-support__grid {
		grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
		column-gap: clamp(2.5rem, 5vw, 5rem);
		align-items: start;
	}
	.co-support__side {
		position: sticky;
		top: 6rem;
	}
}
.co-support__side {
	display: grid;
	gap: 1.25rem;
	min-width: 0;
}
.co-support__form {
	min-width: 0;
}
.co-support__rows {
	margin: 1.25rem 0 0;
	display: grid;
	gap: 1.1rem;
}
.co-support__row {
	display: grid;
	gap: 0.25rem;
}
.co-support__row dd {
	margin: 0;
}
.co .co-support__mail {
	font-size: var(--u-fs-15);
	overflow-wrap: anywhere;
}
.co .co-support__note {
	font-size: var(--u-fs-14);
	color: var(--u-text-2);
}
.co-support__links {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
	font-size: var(--u-fs-15);
}
.co .co-support__text {
	min-height: 140px;
	resize: vertical;
	line-height: 1.55;
}
.co .co-req {
	margin-left: 0.2rem;
	color: var(--u-error);
}
.co-support__msg {
	display: grid;
	gap: 0.2rem;
	margin-bottom: 1.25rem;
	padding: 0.9rem 1rem;
	font-size: var(--u-fs-14);
	line-height: 1.5;
	color: var(--u-text);
	background: var(--u-paper-2);
	border: 1px solid var(--u-rule);
	border-left: 3px solid var(--u-ok);
	border-radius: var(--u-r-1);
}
.co-support__msg--err {
	border-left-color: var(--u-error);
}
/* A phone: the form card gives its padding to the fields, so the longest
   choice in a select is read whole. */
@media (max-width: 480px) {
	.co :is(.co-support, .co-enquiry) .wp-lf__card {
		padding: 1.25rem 1rem 1.4rem;
	}
	.co :is(.co-support, .co-enquiry) select.wp-lf__input {
		font-size: var(--u-fs-14);
		padding-inline: 0.6rem;
	}
}

/* ---- /about/umesh-sharma ------------------------------------------ */
/* One axis, top to bottom: the ink head and every section below start at
   the container's left edge; the reading measure is set on the text. */
.co .co-ph__crumbs {
	font-size: var(--u-fs-14);
}
.co .co-ph__acts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 2rem 0 0;
}
/* The founder page's measures are in em, not ch, as the first screen's are
   (above): `ch` is the width of the font's "0", so the story's box widened by
   a sixth when Inter replaced its fallback and the roles band under it rose
   (gates image, the faces 500 ms late: CLS 0.06-0.12 at 1020px). 42.87em and
   44.14em are 68ch and 70ch of Inter. */
.co .co-founder__story {
	max-width: 42.87em;
}
.co-founder__roles {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
}
@media (min-width: 900px) {
	.co-founder__roles {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
.co .co-founder__role {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.co .co-founder__org {
	font-family: var(--u-font-display);
	font-size: var(--u-fs-d3);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.25;
	color: var(--u-text-hi);
}
.co-founder__find {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 42.87em;
	border-top: 1px solid var(--u-rule-strong);
}
.co-founder__link {
	display: grid;
	gap: 0.25rem;
	padding-block: 1rem;
	border-bottom: 1px solid var(--u-rule);
	font-size: var(--u-fs-16);
}
.co .co-founder__link span {
	font-size: var(--u-fs-15);
	color: var(--u-text-2);
}

/* ---- /contact: the enquiry section ------------------------------ */
.co.co-enquiry {
	background: var(--u-paper-2);
	border-top: 1px solid var(--u-rule);
	scroll-margin-top: 5rem;
}
.co-enquiry__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
}
@media (min-width: 1024px) {
	.co-enquiry__grid {
		grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
		column-gap: clamp(2.5rem, 5vw, 5rem);
		align-items: start;
	}
	.co-enquiry__intro {
		position: sticky;
		top: 6rem;
	}
}
.co-enquiry__intro,
.co-enquiry__form {
	min-width: 0;
}
.co-enquiry__note {
	color: var(--u-text-2);
	max-width: 44ch;
}

/* ---- The /for-* company section ----------------------------------- */
/* The ground alternates with the section before it (forPages `ground`):
   `.co` paints paper, so each ground is restated at the section's weight. */
.co.co-forsec {
	border-top: 1px solid var(--u-rule);
}
.co.co-forsec.wp-paper {
	background: var(--u-paper);
}
.co.co-forsec.wp-paper-2 {
	background: var(--u-paper-2);
}
/* The page's own column: the /for-* pages set their sections at 820px. */
.co.co-forsec--narrow > .wp-wrap {
	max-width: 820px;
}
.co .co-forsec__body-wrap.wp-panel {
	padding: clamp(1.5rem, 4vw, 2.5rem);
}
/* AICP set apart (FD44): a rule, then the aside. */
.co .co-forsec__rule {
	margin: 0 0 2.5rem;
	border: 0;
	border-top: 1px solid var(--u-rule-strong);
}
/* /for-schools' band: every way to start, one ledger. */
.co-ways {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--u-rule-strong);
}
.co-ways__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.3rem 1.5rem;
	padding-block: 1rem;
	border-bottom: 1px solid var(--u-rule);
}
@media (min-width: 720px) {
	.co-ways__row {
		grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	}
	.co .co-ways__body,
	.co .co-ways__cta {
		grid-column: 2;
	}
}
.co .co-ways__name {
	margin: 0;
	font-family: var(--u-font-display);
	font-size: var(--u-fs-17);
	font-weight: 600;
	color: var(--u-text-hi);
}
.co .co-ways__body {
	margin: 0;
	font-size: var(--u-fs-15);
	line-height: 1.55;
	color: var(--u-text-2);
}
.co .co-ways__cta {
	font-size: var(--u-fs-13);
	justify-self: start;
}
.co .co-forsec__policy {
	max-width: 70ch;
	color: var(--u-text-3);
}
/* /for-schools: each market's ways under its label, the label a mono
   caption over the ledger's rule (Addendum A: both markets shown). */
.co .co-ways__label {
	margin: 0 0 0.75rem;
	color: var(--u-text-2);
}
.co-forsec__items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
}
@media (min-width: 900px) {
	.co-forsec__items {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.co-forsec--narrow .co-forsec__items {
		grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	}
}
.co .co-forsec__item {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.co-forsec__body {
	font-size: var(--u-fs-15);
	line-height: 1.6;
	color: var(--u-text-2);
}
.co .co-forsec__cta {
	margin-top: auto;
	padding-top: 0.5rem;
	font-size: var(--u-fs-13);
}
/* A note the section stands behind (AICP's placement line, the Academy's
   programme): read, so Inter, set off by the laser rule. */
.co-forsec__pinned {
	max-width: 62ch;
	font-size: var(--u-fs-15);
	line-height: 1.6;
	color: var(--u-text);
	padding-left: 1rem;
	border-left: 2px solid var(--u-laser-line);
}
.co .co-founder__policy {
	max-width: 44.14em;
	color: var(--u-text-3);
}