/* ==========================================================================
   Typography.
   Rubik for headings at tight negative tracking; Inter for everything else.
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.od-h1, .od-h2, .od-h3 {
	font-family: var(--od-font-head);
	color: var(--od-ink);
	font-weight: var(--od-fw-head);
	line-height: var(--od-lh-head);
	letter-spacing: var(--od-ls-tight);
	text-wrap: pretty;
}

h1, .od-h1 {
	font-size: var(--od-fs-h1);
	line-height: var(--od-lh-tight);
	font-weight: var(--od-fw-display);
}

h2, .od-h2 {
	font-size: var(--od-fs-h2);
	font-weight: var(--od-fw-display);
}

h3, .od-h3 {
	font-size: var(--od-fs-h3);
	letter-spacing: var(--od-ls-h3);
}

/* h4 is now Rubik and larger than --od-fs-lead. It was previously Inter at
   1.125rem, i.e. smaller than the lead paragraph beside it, which is why card
   titles never read as titles. */
h4 {
	font-size: var(--od-fs-h4);
	font-family: var(--od-font-head);
	font-weight: var(--od-fw-head);
	letter-spacing: var(--od-ls-h3);
	line-height: 1.3;
}

h5, h6 {
	font-family: var(--od-font-body);
	font-size: var(--od-fs-body);
	font-weight: 600;
	letter-spacing: 0;
}

/* Display — hero and the final CTA. */
.od-display {
	font-family: var(--od-font-head);
	font-size: var(--od-fs-display);
	font-weight: var(--od-fw-display);
	line-height: var(--od-lh-display);
	letter-spacing: var(--od-ls-display);
	color: var(--od-ink);
	/* Not `balance`: it evens out the line lengths and flattens the headline
	   into a block. `pretty` keeps a strong ragged right edge. */
	text-wrap: pretty;
}

/*
 * The violet half of a two-tone headline, and the page's signature device.
 * The accent is the BOLDER of the pair everywhere: the surrounding heading
 * carries the lighter weight and this carries 700, so emphasis always lands on
 * the violet words. Same family, same size — it does the work a second typeface
 * would, with no extra font request.
 */
.od-accent-text {
	color: var(--od-primary);
	font-weight: var(--od-fw-head);
}

/*
 * Scoped, not global. A blanket `p { max-width }` forced four components to
 * fight back with `max-width: none`; the cap belongs on prose, not on every
 * paragraph in a card.
 */
.od-prose p,
.od-section-header p {
	max-width: var(--od-measure);
}

.od-lead {
	font-size: var(--od-fs-lead);
	line-height: 1.6;
	color: var(--od-body);
	max-width: var(--od-measure-lead);
	text-wrap: pretty;
}

.od-eyebrow {
	display: inline-block;
	font-family: var(--od-font-body);
	font-size: var(--od-fs-eyebrow);
	font-weight: 600;
	letter-spacing: var(--od-ls-eyebrow);
	text-transform: uppercase;
	color: var(--od-primary-600);
	margin-bottom: var(--od-s-3);
}

.od-sm {
	font-size: var(--od-fs-sm);
}

.od-xs {
	font-size: var(--od-fs-xs);
}

.od-muted {
	color: var(--od-muted);
}

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

/* Tabular figures for anything numeric that must align in a grid. */
.od-num {
	font-family: var(--od-font-body);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

blockquote {
	font-size: var(--od-fs-lead);
	line-height: 1.55;
	color: var(--od-ink);
}

code, pre, kbd {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	font-size: 0.9em;
}

code {
	background: var(--od-alt-2);
	padding: 0.15em 0.4em;
	border-radius: 4px;
}

/* --- On dark sections ---------------------------------------------------- */

.od-section--ink h1,
.od-section--ink h2,
.od-section--ink h3,
.od-section--ink h4,
.od-section--ink .od-display {
	color: var(--od-on-ink);
}

.od-section--ink {
	color: var(--od-on-ink-muted);
}

.od-section--ink .od-lead {
	color: var(--od-on-ink-muted);
}

.od-section--ink .od-eyebrow {
	/* Violet is too dark on ink — lift it. */
	color: #B49BFF;
}

.od-section--ink strong {
	color: var(--od-on-ink);
}

/* --od-muted is tuned for light surfaces and is unreadable on ink. Anything
   using it must be lifted inside a dark section. */
.od-section--ink .od-muted,
.od-section--ink .od-metric__context,
.od-section--ink .od-placeholder-note,
.od-section--ink .od-card__meta,
.od-section--ink .od-cred__caption,
.od-section--ink .od-cred__label,
.od-section--ink .od-stepper__duration,
.od-footer .od-placeholder-note,
.od-footer .od-muted {
	color: var(--od-on-ink-muted);
}

/* --- Check list ---------------------------------------------------------- */

.od-list--check li {
	position: relative;
	padding-left: 30px;
	margin-bottom: var(--od-s-3);
}

/* Ticks are green: they assert something is true, they are not actions. */
.od-list--check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--od-green-100);
}

/*
 * A chevron, not a tick.
 *
 * Same two borders and the same rotation trick, turned 90 degrees: top + right
 * at 45deg draws ">" where left + bottom at -45deg drew a check. Kept as
 * borders rather than swapped for an inline SVG so the list glyph stays free of
 * markup and can never fall out of step with the icon file.
 */
.od-list--check li::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 0.72em;
	width: 5px;
	height: 5px;
	border-top: 2px solid var(--od-green);
	border-right: 2px solid var(--od-green);
	transform: translateX(-1px) rotate(45deg);
}

.od-section--ink .od-list--check li::before {
	background: rgba(74, 222, 158, 0.16);
}

.od-section--ink .od-list--check li::after {
	border-top-color: var(--od-green-light);
	border-right-color: var(--od-green-light);
}

/*
 * Eyebrow with a leading rule, for centred section headers. A centred eyebrow on
 * its own reads as a stray line of small caps; the rule anchors it to the
 * heading below and repeats the violet mark used by the left-aligned headers.
 */
.od-eyebrow--rule {
	display: inline-flex;
	align-items: center;
	gap: var(--od-s-3);
}

.od-eyebrow--rule::before {
	content: "";
	width: 28px;
	height: var(--od-rule);
	flex: none;
	background: var(--od-primary);
}