/*
 * spec-49 §3 — the design's own <style> block, moved here verbatim in its
 * DECLARATIONS (Biome reformats the whitespace and lowercases the hex, which
 * is what «verbatim» means in this repository), plus the four things the
 * translation needs: the self-hosted faces that replace the design's link to
 * a font service (F1), the hover and focus classes that replace the design
 * tool's style-hover and style-focus attributes, the header label's toggle
 * class, and the few classes this unit's own states need.
 */

/* ------------------------------------------------------------------------ */
/* THE FACES — IBM Plex Sans, self-hosted (F1), latin subset.               */
/* No visitor's browser talks to a third party to read this page: the design */
/* linked a font service, and those links are gone. The unicode-range is     */
/* IBM's own for this subset, so a character outside it falls back to the    */
/* system stack rather than rendering as nothing. Every character on this    */
/* page was checked against that range first-hand; all four non-ASCII marks  */
/* it uses are inside it.                                                    */
/* ------------------------------------------------------------------------ */

@font-face {
	font-family: "IBM Plex Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/fonts/IBMPlexSans-Regular-Latin1.woff2") format("woff2");
	unicode-range:
		U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF,
		U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A,
		U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074,
		U+20AC, U+2122, U+2212, U+FB01-FB02;
}

@font-face {
	font-family: "IBM Plex Sans";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("/fonts/IBMPlexSans-Medium-Latin1.woff2") format("woff2");
	unicode-range:
		U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF,
		U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A,
		U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074,
		U+20AC, U+2122, U+2212, U+FB01-FB02;
}

@font-face {
	font-family: "IBM Plex Sans";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("/fonts/IBMPlexSans-SemiBold-Latin1.woff2") format("woff2");
	unicode-range:
		U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF,
		U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A,
		U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074,
		U+20AC, U+2122, U+2212, U+FB01-FB02;
}

@font-face {
	font-family: "IBM Plex Sans";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("/fonts/IBMPlexSans-Bold-Latin1.woff2") format("woff2");
	unicode-range:
		U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF,
		U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A,
		U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074,
		U+20AC, U+2122, U+2212, U+FB01-FB02;
}

/* ------------------------------------------------------------------------ */
/* THE DESIGN'S OWN BLOCK, declaration for declaration.                      */
/* ------------------------------------------------------------------------ */

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	background: #ffffff;
}

body {
	-webkit-font-smoothing: antialiased;
}

a {
	color: #6d28d9;
	text-decoration: none;
}

a:hover {
	color: #09090b;
}

input,
select,
button,
textarea {
	font: inherit;
	color: inherit;
}

summary::-webkit-details-marker {
	display: none;
}

summary {
	list-style: none;
	cursor: pointer;
}

@media (max-width: 1040px) {
	#hdr-label {
		display: none;
	}
}

@keyframes luupoRise {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* ------------------------------------------------------------------------ */
/* THE HOVER AND FOCUS CLASSES — the design tool's style-hover (four places) */
/* and style-focus (three fields), with the same declarations.               */
/*                                                                           */
/* THE ONE THING THAT MOVED OFF THE ELEMENTS, and why. The design tool        */
/* applies style-hover and style-focus as INLINE styles, which beat any       */
/* class; every one of these five elements carries a `style` attribute        */
/* setting the very property its hover or focus changes. Translated as        */
/* written, the hover and focus states would silently do nothing — the        */
/* «looks fine, does nothing» class no screenshot catches. The two exits are  */
/* `!important` (which Biome's noImportantStyles refuses, and the Definition  */
/* of Done forbids both a suppression comment and a config change) or moving  */
/* the conflicting declaration off the element into THIS SAME CLASS's base    */
/* rule, where the hover rule beats it by ordinary cascade. The second exit   */
/* is taken. NOTHING IS LOST: each declaration below is the element's own,    */
/* character for character, and the computed style in both states is what the */
/* design specifies. Nine declarations moved in all, and no other `style`     */
/* attribute on the page was touched. (A later ruling — the founder,          */
/* 2026-09-15 — moved six more, for the same reason: see THE NARROW-WIDTH     */
/* HEADER at the foot of this file.)                                          */
/* ------------------------------------------------------------------------ */

.cta-header {
	background: none;
	color: #6d28d9;
}

.cta-header:hover {
	background: #6d28d9;
	color: #ffffff;
}

.cta-hero {
	background: #6d28d9;
}

.cta-hero:hover {
	background: #5b21b6;
}

.cta-submit {
	background: #6d28d9;
}

.cta-submit:hover {
	background: #5b21b6;
}

.cta-again {
	color: #6d28d9;
	border: 1px solid #bbf7d0;
}

.cta-again:hover {
	border-color: #166534;
	/* The design's was a <button>, so the base `a:hover` colour above never
	   applied to it; this keeps the translated anchor looking the same. */
	color: #6d28d9;
}

/* The «Try again» link of the failure state (§4.4) — this unit's own, not
   the design's, so it takes the page's neutral border and a plain darkening
   on hover. */
.cta-retry {
	color: #6d28d9;
	border: 1px solid #e4e4e7;
}

.cta-retry:hover {
	border-color: #09090b;
	color: #6d28d9;
}

.field {
	border: 1px solid #e4e4e7;
}

.field:focus-visible {
	outline: 2px solid #6d28d9;
	outline-offset: 1px;
	border-color: #6d28d9;
}

/* ------------------------------------------------------------------------ */
/* THE HEADER LABEL'S TOGGLE — the design bound `opacity` to state; here the  */
/* hidden state is this rule and the script adds `is-visible`, which beats it */
/* on specificity. Same reason as above for the opacity not being inline.     */
/* ------------------------------------------------------------------------ */

#hdr-label {
	opacity: 0;
}

#hdr-label.is-visible {
	opacity: 1;
}

/* ------------------------------------------------------------------------ */
/* THIS UNIT'S OWN FEW CLASSES.                                              */
/* ------------------------------------------------------------------------ */

/*
 * THE HONEYPOT (§4.1). Off-screen rather than `display:none`, which many bots
 * skip on purpose; `aria-hidden` and `tabindex="-1"` keep it away from anyone
 * reading or tabbing the page.
 */
.hp-field {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* A per-field refusal, above the field it is about (§4.1). */
.field-error {
	font-size: 18px;
	color: #b91c1c;
	margin: 0;
}

/* ------------------------------------------------------------------------ */
/* THE NARROW-WIDTH HEADER — the founder's ruling, 2026-09-15: at phone width */
/* the sticky header's «Register your interest» button was cut off at the     */
/* right edge, because the mark (162 px wide at its drawn height), the gap    */
/* and the button (250 px) come to 432 px, against 315 px of room inside the  */
/* row's own padding at 375 px. NO COPY CHANGES: the button keeps its words,  */
/* and this is a size change at narrow widths only.                           */
/*                                                                            */
/* WHY THESE SIX DECLARATIONS ARE HERE rather than on the elements. The same  */
/* reason as the hover classes above: the design writes sizes as inline       */
/* `style` attributes, which beat any class, so a media query on a class      */
/* would have been the «looks fine, does nothing» kind. The mark's `height`   */
/* and `width`, the button's `padding`, `font-size` and `min-height`, and the */
/* row's `gap` moved off their elements into the three base rules below,      */
/* character for character, so the media query beats them by ordinary         */
/* cascade. The desktop rendering is unchanged, to the pixel.                 */
/* ------------------------------------------------------------------------ */

.hdr-row {
	gap: 20px;
}

.hdr-mark {
	height: 50px;
	width: auto;
}

.cta-header {
	padding: 14px 27px;
	font-size: 20px;
	min-height: 60px;
}

@media (max-width: 640px) {
	/* The row may wrap as a last resort — below about 340 px even the shrunk
	   mark and button do not share a line — so the button drops beneath the
	   mark instead of being clipped. The page never scrolls sideways. */
	.hdr-row {
		flex-wrap: wrap;
		gap: 10px;
	}

	.hdr-mark {
		height: 36px;
	}

	/* 44 px is the touch target the button keeps whatever the text does. */
	.cta-header {
		padding: 10px 12px;
		font-size: 16px;
		min-height: 44px;
	}
}

/* ------------------------------------------------------------------------ */
/* THE THREE WIDE GRIDS AT PHONE WIDTH — the founder's report, 2026-09-15:    */
/* «On realism», «What comes back» and «Be one of the first» ran to the right */
/* edge with no margin on that side, and the two line drawings sat side by    */
/* side rather than under the paragraph each belongs to.                      */
/*                                                                            */
/* THE CAUSE, one for all three. Each grid asked for a column that cannot     */
/* shrink — `minmax(350px, 1fr)` for the realism paragraphs and the two        */
/* «What comes back» cards, `minmax(340px, 1fr)` for the interest section —    */
/* while a 375 px phone leaves 315 px inside the section's own padding (260 px */
/* at 320 px). A track below its minimum overflows to the right, and the page  */
/* wrapper's `overflow-x: clip` cuts it off: even left margin, none at all on  */
/* the right. Below these widths one column is the only honest answer, and     */
/* `minmax(0, 1fr)` has no minimum to break.                                   */
/*                                                                            */
/* WHY THESE DECLARATIONS ARE HERE rather than on the elements: the same       */
/* reason as the hover classes and the narrow-width header above — the design  */
/* writes `grid-template-columns` in a `style` attribute, which beats any      */
/* class, so a media query on a class would have been the «looks fine, does    */
/* nothing» kind. Only the column declarations moved; every other declaration  */
/* of those three grids is still on the element, character for character.      */
/* The desktop rendering is unchanged, measured before and after.              */
/* ------------------------------------------------------------------------ */

.returns-grid {
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

.interest-grid {
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

@media (max-width: 640px) {
	.returns-grid,
	.interest-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * THE REALISM SECTION'S SIX CELLS. The design drew TWO grids here — the two
 * paragraphs in one, the two drawings and their two captions in another — so
 * at any width where the paragraphs stacked, the drawings still sat side by
 * side, away from the paragraph each illustrates. They are ONE grid now, six
 * cells in the design's own source order, which is also the auto-flow the
 * desktop layout needs: paragraphs in the top row, drawings beneath, captions
 * beneath those, aligned across the two columns.
 *
 * THE SOURCE ORDER IS UNTOUCHED, because the copy fixture is an ORDERED list
 * and both suites scan it in order. The phone's reading order — paragraph,
 * its drawing, its caption, then the other three — is `order` instead.
 *
 * The row gap is the drawings-and-captions grid's own 14 px; the wider space
 * the design put between the paragraphs and the drawings is the drawings' own
 * margin, the design's `clamp(30px, 4vw, 44px)` less that 14 px, so the gap a
 * browser renders is the design's to the pixel.
 */

.realism-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px clamp(30px, 5vw, 55px);
	align-items: start;
}

.realism-draw-else,
.realism-draw-luupo {
	margin-top: calc(clamp(30px, 4vw, 44px) - 14px);
}

/*
 * 860 px is where this section's paragraphs already fell to one column before
 * this change (the measured point sits between about 850 and 868, depending on
 * whether the browser draws a classic scrollbar), so nothing that reads as two
 * columns today becomes one. Below it the drawings follow their paragraphs.
 */
@media (max-width: 860px) {
	.realism-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.realism-else {
		order: 1;
	}

	.realism-draw-else {
		order: 2;
	}

	.realism-cap-else {
		order: 3;
	}

	.realism-luupo {
		order: 4;
		/* The space the design put between the two columns, now between the
		   first caption and the second label. */
		margin-top: calc(clamp(30px, 5vw, 55px) - 14px);
	}

	.realism-draw-luupo {
		order: 5;
	}

	.realism-cap-luupo {
		order: 6;
	}
}

/* The 404, 413 and 415 pages (§4.4) — one line and a way back, nothing else. */
.plain-page {
	max-width: 40em;
	margin: 0 auto;
	padding: 60px 30px;
	font-family:
		ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica,
		Arial, sans-serif;
	font-size: 20px;
	line-height: 1.5;
	color: #09090b;
}