/*
	domusmio landing — stylesheet

	Palette is lifted from the logo file (logos/dm-logo-400x100.png): #231F20 ink,
	#818285 steel, #8DC63F marker. The green behaves like a highlighter pen — a swipe
	behind a word, a status dot, a progress bar — never as the button fill.

	Type: Herceptin (brand) for headings, IBM Plex Sans for body, IBM Plex Mono for
	the small technical labels.
*/

/* ---- Fonts ---- */

@font-face {
	font-family: "Herceptin";
	src: url("../fonts/herceptin-light.otf") format("opentype");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Herceptin";
	src: url("../fonts/herceptin-medium.otf") format("opentype");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

/* ---- Tokens ---- */

:root {
	/* Strong curves — the built-in CSS easings are too weak to read as deliberate. */
	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

	--ink: #231f20;
	--ink-soft: #4b4749;
	--steel: #818286;
	--paper: #f4f5f1;
	--card: #ffffff;
	--rule: #e0e1da;
	--marker: #8dc63f;

	--display: "Herceptin", "Segoe UI", system-ui, sans-serif;
	--body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
	--mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

	--wrap: 1200px;
	--gut: clamp(20px, 5vw, 48px);
	--head: 74px;
	--secpad: clamp(48px, 5.5vw, 74px);
}

/* ---- Reset & base ---- */

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

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

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--body);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover {
	color: var(--ink);
}

:focus-visible {
	outline: 2px solid var(--marker);
	outline-offset: 3px;
}

.wrap {
	max-width: var(--wrap);
	margin: 0 auto;
	padding-left: var(--gut);
	padding-right: var(--gut);
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---- Type ---- */

h1,
h2,
h3 {
	font-family: var(--display);
	font-weight: 500;
	letter-spacing: -0.015em;
	margin: 0;
}

h1 {
	font-size: clamp(40px, 5.6vw, 66px);
	line-height: 1.04;
}

h2 {
	font-size: clamp(28px, 3.8vw, 44px);
	line-height: 1.1;
}

h3 {
	font-size: 20px;
	line-height: 1.28;
}

/* The hero copy column is ~520px on desktop and ~302px inside the phone card;
   "Én del ad gangen." holds two lines at <=52px and <=30px respectively, and
   7vw carries it between the two. */
.hero h1 {
	font-size: clamp(30px, 7vw, 52px);
	line-height: 1.05;
}

.eyebrow {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--steel);
	margin: 0 0 20px;
}

.eyebrow .tick {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 99px;
	background: var(--marker);
	vertical-align: 0.1em;
	margin-right: 5px;
}

.lead {
	font-size: clamp(17px, 1.6vw, 20px);
	color: var(--ink-soft);
	max-width: 52ch;
	line-height: 1.55;
}

.mark {
	background-image: linear-gradient(to top, rgba(141, 198, 63, 0.55) 0 0.3em, transparent 0.3em 100%);
	padding: 0 0.04em;
}

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

.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	font-family: var(--body);
	font-size: 16px;
	font-weight: 500;
	padding: 14px 24px;
	border-radius: 3px;
	border: 1px solid var(--ink);
	background: var(--ink);
	color: #fff;
	cursor: pointer;
	transition: transform 0.18s ease, background 0.18s ease;
}

.btn:hover {
	background: #000;
	color: #fff;
	transform: translateY(-1px);
}

.btn[disabled] {
	opacity: 0.55;
	cursor: default;
	transform: none;
}

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

.btn--ghost:hover {
	background: transparent;
	color: var(--ink);
	border-color: var(--ink);
}

/* ---- Header: transparent over the hero photo, paper once scrolled ---- */

.site-head {
	position: sticky;
	top: 0;
	z-index: 30;
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.site-head.is-stuck {
	background: rgba(244, 245, 241, 0.92);
	backdrop-filter: blur(10px);
	border-bottom-color: var(--rule);
	box-shadow: 0 1px 6px rgba(35, 31, 32, 0.06);
}

.site-head .wrap {
	display: flex;
	align-items: center;
	gap: 32px;
	height: var(--head);
}

.brand img {
	height: 26px;
	width: auto;
	mix-blend-mode: multiply;
}

.site-nav {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 28px;
	font-size: 15px;
}

.site-nav a {
	color: var(--ink-soft);
}

.site-nav a:hover {
	color: var(--ink);
}

.head-actions {
	display: flex;
	align-items: center;
	gap: 18px;
}

.lang-toggle {
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--steel);
}

.lang-toggle:hover {
	color: var(--ink);
}

.site-head .btn {
	padding: 10px 18px;
	font-size: 15px;
}

/* ---- Hamburger ---- */

.hamburger {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 10px 6px;
	margin-left: auto;
	flex-direction: column;
	gap: 5px;
}

.hamburger span {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--ink);
	border-radius: 1px;
	transition: transform 0.25s, opacity 0.25s;
}

.site-head.nav-open .hamburger span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.site-head.nav-open .hamburger span:nth-child(2) {
	opacity: 0;
}

.site-head.nav-open .hamburger span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ---- Hero: the photograph owns the first screen ---- */

.hero {
	position: relative;
	margin-top: calc(var(--head) * -1);
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	background: url("../images/hero2.jpg") center left / cover no-repeat;
	padding: calc(var(--head) + 40px) var(--gut) 96px;
}

.hero-content {
	max-width: 540px;
	margin-right: 5%;
}

.hero .lead {
	margin: 22px 0 30px;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.hero-note {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--steel);
	margin: 26px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
}

.hero-note .free {
	color: var(--ink-soft);
	font-weight: 500;
}

.scroll-cue {
	position: absolute;
	left: 50%;
	bottom: 30px;
	transform: translateX(-50%);
	color: var(--ink-soft);
	opacity: 0.7;
	transition: opacity 0.2s ease;
}

.scroll-cue:hover {
	opacity: 1;
	color: var(--ink);
}

@keyframes cue {
	0%,
	100% {
		transform: translateY(0);
		opacity: 1;
	}
	50% {
		transform: translateY(9px);
		opacity: 0.2;
	}
}

.cue-dot {
	animation: cue 2s ease-in-out infinite;
}

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

@keyframes rise {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.hero-content > * {
	animation: rise 0.8s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
}

.hero-content > *:nth-child(1) {
	animation-delay: 0.06s;
}
.hero-content > *:nth-child(2) {
	animation-delay: 0.13s;
}
.hero-content > *:nth-child(3) {
	animation-delay: 0.2s;
}
.hero-content > *:nth-child(4) {
	animation-delay: 0.27s;
}
.hero-content > *:nth-child(5) {
	animation-delay: 0.34s;
}

/* ---- Scroll reveals ----
   Inert until site.js puts .js-anim on <html>, so a page whose script did not run
   shows every section rather than a blank one. */

/* A wipe, not a fade. clip-path is the sanctioned fourth animatable property
   and it is what makes the content read as arriving rather than as brightening.
   None of the elements this lands on carry a box-shadow, so clipping to the
   border box costs nothing. */
.js-anim .reveal,
.js-anim .stagger > * {
	clip-path: inset(0 0 100% 0);
	transform: translateY(16px);
	transition: clip-path 0.6s var(--ease-in-out), transform 0.6s var(--ease-in-out);
}

/* Accepts the marker on the CHILD (current) or on the CONTAINER (what an older
   cached site.js sets). A visitor holding a stale script alongside fresh CSS
   would otherwise have had these hidden permanently — the one failure this
   pairing can produce, and it costs a single selector to rule out. */
.js-anim .reveal.in,
.js-anim .stagger > *.in,
.js-anim .stagger.in > * {
	clip-path: inset(0 0 0 0);
	transform: none;
}

/* Siblings that come into view together still arrive one after another.
   Elements far enough apart to be seen separately never share a frame, so
   the delay costs them nothing. */
.js-anim .stagger > *.in:nth-child(1) {
	transition-delay: 0ms;
}
.js-anim .stagger > *.in:nth-child(2) {
	transition-delay: 45ms;
}
.js-anim .stagger > *.in:nth-child(3) {
	transition-delay: 90ms;
}
.js-anim .stagger > *.in:nth-child(4) {
	transition-delay: 135ms;
}
.js-anim .stagger > *.in:nth-child(5) {
	transition-delay: 180ms;
}
.js-anim .stagger > *.in:nth-child(6) {
	transition-delay: 225ms;
}
.js-anim .stagger > *.in:nth-child(7) {
	transition-delay: 270ms;
}
.js-anim .stagger > *.in:nth-child(8) {
	transition-delay: 315ms;
}
.js-anim .stagger > *.in:nth-child(9) {
	transition-delay: 360ms;
}

.figure {
	overflow: hidden;
}

.js-anim .figure img {
	transform: scale(1.06);
	transition: transform 1.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.js-anim .figure.in img {
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.js-anim .reveal,
	.js-anim .stagger > *,
	.js-anim .figure img {
		opacity: 1 !important;
		clip-path: none !important;
		transform: none !important;
		transition: none !important;
	}

	/* The cards keep their fan — that is the arrangement, not the motion — and
	   lose only the travel and the fade. */
	.js-anim .plate-card > .bdk {
		opacity: 1 !important;
		transition: none !important;
		animation: none !important;
	}

	.plate-card > .bdk + .bdk {
		transform: translate(-42px, 116px) rotate(-3.4deg) !important;
		z-index: 3;
	}

	.hero-content > * {
		animation: none !important;
	}

	.cue-dot {
		animation: none !important;
	}
}

/* ---- Bygningsdelskortet ---- */

.bdk {
	background: var(--card);
	border: 1px solid var(--rule);
	border-radius: 3px;
	box-shadow: 0 1px 0 var(--rule), 0 26px 50px -34px rgba(35, 31, 32, 0.4);
	overflow: hidden;
}

.bdk-top {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 20px 22px 16px;
	border-bottom: 1px solid var(--rule);
}

.bdk-top h3 {
	font-size: 22px;
}

.bdk-id {
	margin-left: auto;
	font-family: var(--mono);
	font-size: 12px;
	color: var(--steel);
}

.bdk-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-bottom: 1px solid var(--rule);
	margin: 0;
}

.bdk-f {
	padding: 13px 22px;
	border-bottom: 1px solid var(--rule);
}

.bdk-f:nth-child(odd) {
	border-right: 1px solid var(--rule);
}

.bdk-f:nth-last-child(-n + 2) {
	border-bottom: 0;
}

.bdk-f dt {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--steel);
	margin: 0 0 3px;
}

.bdk-f dd {
	margin: 0;
	font-size: 15px;
	font-weight: 500;
}

.bdk-cond {
	padding: 16px 22px;
	border-bottom: 1px solid var(--rule);
}

.bdk-cond .row {
	display: flex;
	justify-content: space-between;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--steel);
	margin-bottom: 8px;
}

.bar {
	height: 6px;
	background: #edeee8;
	border-radius: 99px;
	overflow: hidden;
}

.bar span {
	display: block;
	height: 100%;
	width: var(--bar, 72%);
	background: var(--marker);
	border-radius: 99px;
}

.bdk-tasks {
	padding: 6px 0 8px;
}

.bdk-tasks .hd {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--steel);
	padding: 10px 22px 6px;
	margin: 0;
}

.task {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 22px;
	border-top: 1px solid var(--rule);
}

.dot {
	width: 8px;
	height: 8px;
	border-radius: 99px;
	background: var(--marker);
	flex: none;
}

.dot--wait {
	background: #d3d4cd;
}

.task .nm {
	font-size: 15px;
	font-weight: 500;
}

.task .mt {
	margin-left: auto;
	font-family: var(--mono);
	font-size: 12px;
	color: var(--steel);
	white-space: nowrap;
}

/* ---- Sections ---- */

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

.sec-head {
	max-width: 60ch;
	margin-bottom: clamp(32px, 5vw, 52px);
}

.sec-head p {
	margin: 18px 0 0;
}

.problem h2 {
	max-width: 16ch;
}

.problem-body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 5vw, 64px);
	margin-top: 36px;
}

.problem-body p {
	margin: 0 0 18px;
	font-size: 18px;
	color: var(--ink-soft);
}

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

.steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--rule);
	border: 1px solid var(--rule);
}

.step {
	background: var(--paper);
	padding: 28px 26px 32px;
}

.step-n {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--marker);
	letter-spacing: 0.1em;
	margin: 0 0 22px;
}

.step h3 {
	margin-bottom: 10px;
}

.step p {
	margin: 0;
	font-size: 15.5px;
	color: var(--ink-soft);
	line-height: 1.55;
}

/* ---- The image band, with the card straddling its lower edge ---- */

.figure-band {
	margin: 0;
	background: var(--rule);
}

.figure-band img {
	width: 100%;
	height: clamp(340px, 38vw, 480px);
	object-fit: cover;
}

.plate {
	background: var(--paper);
}

.plate .wrap {
	display: grid;
	grid-template-columns: 1fr minmax(0, 460px);
	gap: clamp(28px, 5vw, 64px);
	align-items: start;
	padding-bottom: var(--secpad);
}

/* The two cards LAYER rather than list. The card behind keeps its header and
   its lower edge visible, so the stack reads as "and there are more of these"
   without costing a second card's height. */
.plate-card {
	/* Both cards occupy ONE grid cell, so the row sizes itself to whichever card
	   reaches lowest — offset included. An absolutely positioned card would have
	   needed the container's height hard-coded and would break the moment either
	   card's copy changed. */
	display: grid;
	grid-template-areas: "stack";
	margin-top: -150px;
}

.plate-card > .bdk {
	grid-area: stack;
	align-self: start;
	position: relative;
	z-index: 1;
}

/* THE FAN.
   Both cards sit in the same grid cell. The base state below is the FINISHED
   arrangement — cards splayed, the second one resting on top — because that is
   what a browser with no scroll-driven animation support, and anyone with
   reduced motion, will see. The scroll animation further down only replaces the
   journey to it, never the destination. */
.plate-card > .bdk:first-child {
	transform: rotate(2.2deg);
	transform-origin: 50% 100%;
}

/* The BASE is the animation's from-state, squared up behind its neighbour. A
   view timeline is inactive until its subject is in the scrollport, so a base
   set to the finished fan would snap backwards the instant the timeline woke —
   and the browsers that never wake one are handled explicitly further down. */
.plate-card > .bdk + .bdk {
	transform: translate(0, 0) rotate(2.2deg);
	transform-origin: 50% 0%;
	z-index: 1;
	box-shadow: 0 -10px 26px -16px rgba(35, 31, 32, 0.26), 0 22px 46px -24px rgba(35, 31, 32, 0.38);
}

/* Transforms do not grow the row, so the travelled card would hang out of the
   section without this. */
.plate-card {
	padding-bottom: 128px;
}

/* Scrubbed to scroll: the card is tucked square behind its neighbour when the
   section starts entering the viewport and has swung fully out by the time it is
   most of the way in, so it has settled before anyone tries to read it.
   z-index steps rather than eases — the swap happens while the two are furthest
   apart, where it cannot be seen. */
@keyframes fan-out {
	from {
		transform: translate(0, 0) rotate(2.2deg);
		z-index: 1;
	}

	60% {
		z-index: 1;
	}

	61% {
		z-index: 3;
	}

	to {
		transform: translate(-42px, 116px) rotate(-3.4deg);
		z-index: 3;
	}
}

@supports (animation-timeline: view()) {
	.plate-card > .bdk + .bdk {
		animation: fan-out linear both;
		animation-timeline: view();
		/* From 0%, so the animation takes over on the same frame the timeline
		   becomes active and there is no gap to snap across. Finished by 80%, well
		   before the section settles, so it has arrived by the time it is read. */
		animation-range: entry 0% entry 80%;
	}
}

/* No scroll-driven animations (Firefox today): show the finished fan. The
   arrangement is the point; only the travel is lost. */
@supports not (animation-timeline: view()) {
	.plate-card > .bdk + .bdk {
		transform: translate(-42px, 116px) rotate(-3.4deg);
		z-index: 3;
	}
}

/* The note is beside the first card rather than at the top of a tall column. */
.plate-note {
	align-self: center;
}



.plate-note h2 {
	max-width: 14ch;
}

.plate-note .lead {
	margin-top: 16px;
}

/* The cards fly further than the rest of the page rises — they are what the
   section is about, so they get their own arrival. Each card animates
   individually now, and the one on top arrives 80ms later so the stack builds
   rather than appearing whole. */
/* Opacity only. `transform` belongs to the fan now, and two rules writing the
   same property would have fought over it. */
.js-anim .plate-card > .bdk {
	opacity: 0;
	transition: opacity 0.55s cubic-bezier(0.2, 0.75, 0.3, 1);
}

.js-anim .plate-card > .bdk + .bdk {
	transition-delay: 80ms;
}

.js-anim .plate-card.in > .bdk {
	opacity: 1;
}

/* ---- Features: hairlines rather than cards ---- */

.feats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--rule);
	border: 1px solid var(--rule);
}

.feat {
	background: var(--paper);
	padding: 26px 24px 30px;
	transition: background 0.2s ease;
}

.feat:hover {
	background: var(--card);
}

.feat-tag {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--steel);
	margin: 0 0 16px;
}

.feat h3 {
	margin-bottom: 9px;
}

.feat p {
	margin: 0;
	font-size: 15.5px;
	color: var(--ink-soft);
	line-height: 1.55;
}

/* ---- Horizon ---- */

.hz {
	border-top: 1px solid var(--rule);
}

.hz-row {
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: clamp(20px, 5vw, 56px);
	padding: 26px 0;
	border-bottom: 1px solid var(--rule);
	align-items: start;
}

.hz-when {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--steel);
	padding-top: 4px;
	margin: 0;
}

.hz-row h3 {
	margin-bottom: 8px;
}

.hz-row p {
	margin: 0;
	color: var(--ink-soft);
	font-size: 16px;
	max-width: 64ch;
}

.hz-foot {
	margin-top: 28px;
	font-size: 15px;
	color: var(--steel);
	max-width: 60ch;
}

/* ---- Trust ---- */

.trust-wrap {
	display: grid;
	grid-template-columns: 1fr minmax(0, 340px);
	gap: clamp(32px, 5vw, 64px);
	align-items: start;
}

.trust {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(20px, 3vw, 36px);
}

.trust h3 {
	font-size: 18px;
	margin-bottom: 9px;
	padding-top: 16px;
	border-top: 2px solid var(--marker);
}

.trust p {
	margin: 0;
	font-size: 15.5px;
	color: var(--ink-soft);
	line-height: 1.55;
}

.trust-figure {
	margin: 0;
	border-radius: 3px;
}

.trust-figure img {
	width: 100%;
	height: auto;
}

/* ---- Scope: the seven catalogue categories ----
   Mirrors .trust-wrap but with the figure on the left, so the two picture
   sections either side of the feature grid alternate rather than stack. */

.scope-wrap {
	display: grid;
	grid-template-columns: minmax(0, 380px) 1fr;
	gap: clamp(32px, 5vw, 64px);
	align-items: start;
}

.scope-figure {
	margin: 0;
	border-radius: 3px;
}

.scope-figure img {
	width: 100%;
	height: auto;
}

.scope-list {
	border-top: 1px solid var(--rule);
}

.scope-row {
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: clamp(16px, 3vw, 36px);
	padding: 16px 0;
	border-bottom: 1px solid var(--rule);
	align-items: baseline;
}

.scope-row dt {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--steel);
}

.scope-row dd {
	margin: 0;
	font-size: 16px;
	color: var(--ink-soft);
}

/* The two the site used to leave out entirely. */
.scope-row.is-new dt {
	color: var(--ink);
}

.scope-row.is-new dd {
	color: var(--ink);
}

.scope-foot {
	margin-top: 26px;
	font-size: 15px;
	color: var(--steel);
	max-width: 60ch;
}

/* ---- FAQ ---- */

.faq {
	max-width: 840px;
}

.faq details {
	border-bottom: 1px solid var(--rule);
}

.faq summary {
	list-style: none;
	cursor: pointer;
	padding: 22px 40px 22px 0;
	position: relative;
	font-family: var(--display);
	font-size: 19px;
	font-weight: 500;
}

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

.faq summary::after {
	content: "+";
	position: absolute;
	right: 6px;
	top: 20px;
	font-family: var(--mono);
	font-size: 20px;
	color: var(--marker);
}

.faq details[open] summary::after {
	content: "\2013";
}

.faq .ans {
	margin: 0 0 24px;
	color: var(--ink-soft);
	max-width: 62ch;
}

/* ---- Launch signup, on landing3 under a scrim ---- */

.cta-band {
	position: relative;
	border-top: 1px solid var(--rule);
	background: #231f20 url("../images/landing3.jpg") center 62% / cover no-repeat;
}

.cta-band::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(23, 20, 21, 0.9) 0%, rgba(23, 20, 21, 0.8) 55%, rgba(23, 20, 21, 0.73) 100%);
}

.cta-inner {
	position: relative;
	/* Longhand, not `padding: var(--secpad) 0`. This element also carries .wrap,
	   and the shorthand resets all four sides — which silently removed the side
	   gutter. Invisible on desktop, where .wrap is centred with room to spare;
	   on a phone the e-mail field ran edge to edge. */
	padding-top: var(--secpad);
	padding-bottom: var(--secpad);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(28px, 6vw, 72px);
	align-items: center;
}

.cta-band h2 {
	max-width: 14ch;
	color: #fff;
}

.cta-band .lead {
	margin-top: 20px;
	color: rgba(255, 255, 255, 0.82);
}

.cta-band .eyebrow {
	color: rgba(255, 255, 255, 0.62);
}

.signup {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.signup input[type="email"] {
	flex: 1 1 260px;
	min-width: 0;
	padding: 14px 16px;
	font-family: var(--body);
	font-size: 16px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 3px;
	background: rgba(23, 20, 21, 0.45);
	color: #fff;
}

.signup input[type="email"]::placeholder {
	color: rgba(255, 255, 255, 0.55);
}

.signup input[type="email"]:focus {
	border-color: #fff;
	outline: none;
	box-shadow: 0 0 0 3px rgba(141, 198, 63, 0.45);
}

.cta-band .btn {
	background: #fff;
	color: var(--ink);
	border-color: #fff;
}

.cta-band .btn:hover {
	background: var(--paper);
	color: var(--ink);
}

.signup-note {
	font-family: var(--mono);
	font-size: 12px;
	color: rgba(255, 255, 255, 0.74);
	margin: 14px 0 0;
}

.signup-status {
	font-size: 15px;
	color: #fff;
	margin: 14px 0 0;
}

/*
	The notice at the point of collection. It has to be legible rather than fine print —
	it is what makes the submission an informed act — so it sits at 13px on the band's
	white rather than being dropped to the mono 12px of .signup-note above it.
*/

.signup-consent {
	font-size: 13px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.74);
	margin: 16px 0 0;
	max-width: 46ch;
}

.signup-consent a {
	color: rgba(255, 255, 255, 0.86);
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.35);
	text-underline-offset: 2px;
}

.signup-consent a:hover {
	color: #fff;
	text-decoration-color: var(--marker);
}

.signup-status.is-error {
	color: #ffd7d2;
}

/* ---- Footer ---- */

.site-foot {
	border-top: 1px solid var(--rule);
	background: var(--card);
	padding: 44px 0 52px;
}

.site-foot .wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: flex-end;
	justify-content: space-between;
}

.site-foot img {
	height: 22px;
	width: auto;
	mix-blend-mode: multiply;
	margin-bottom: 14px;
}

.site-foot address {
	font-style: normal;
	font-size: 14px;
	color: var(--steel);
	line-height: 1.7;
}

.foot-links {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	font-size: 14px;
	color: var(--steel);
}

.foot-links a:hover {
	color: var(--ink);
}

/* ---- Long-form documents ---- */

/*
	The layout for the pages that are text rather than pitch: the cookie disclosure today,
	the privacy policy and the beta terms when their open questions are answered.

	No .reveal or .stagger anywhere in here, on purpose. The reveal machinery is tuned for a
	page being browsed, and somebody who followed a link to read a legal document should not
	have to scroll before the text appears.

	.doc sits on the .wrap element, so it sets padding-top/padding-bottom LONGHAND. The
	shorthand resets all four sides and would silently take .wrap's side gutter with it —
	the bug validate-site.mjs exists to catch, and the one this site has already shipped once.
*/

.doc {
	max-width: 760px;
	padding-top: clamp(36px, 5vw, 64px);
	padding-bottom: clamp(56px, 8vw, 96px);
}

.doc h1 {
	font-size: clamp(30px, 5vw, 44px);
	line-height: 1.08;
}

.doc h2 {
	font-size: clamp(21px, 2.6vw, 27px);
	line-height: 1.2;
	margin-bottom: 14px;
}

.doc h3 {
	font-size: 17px;
	margin: 26px 0 8px;
}

.doc p {
	margin: 0 0 1.05em;
}

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

.doc ul {
	margin: 0 0 1.05em;
	padding-left: 20px;
}

.doc li {
	margin-bottom: 8px;
}

.doc a:not(.btn) {
	text-decoration: underline;
	text-decoration-color: var(--rule);
	text-underline-offset: 2px;
}

.doc a:not(.btn):hover {
	text-decoration-color: var(--marker);
}

/* Names of stored values, read literally — the mono face is the same one the site uses for
   its other technical labels, so a reader has already seen it mean "this is a name". */
.doc code {
	font-family: var(--mono);
	font-size: 0.86em;
	background: var(--card);
	border: 1px solid var(--rule);
	border-radius: 3px;
	padding: 0.08em 0.34em;
	white-space: nowrap;
}

.doc-head {
	padding-bottom: 28px;
	border-bottom: 1px solid var(--rule);
}

.doc-head .lead {
	margin: 18px 0 0;
}

.doc-updated {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--steel);
	margin: 18px 0 0;
}

.doc-sec {
	padding-top: 40px;
}

/*
	One row today, and the whole point of the page is that it is one row — so it is a table
	rather than a sentence, because the next thing this site stores then has somewhere
	obvious to be written down.
*/

.doc-table {
	overflow-x: auto;
	border: 1px solid var(--rule);
	border-radius: 3px;
	background: var(--card);
	margin: 0 0 1.05em;
}

.doc-table table {
	border-collapse: collapse;
	width: 100%;
	min-width: 460px;
	font-size: 15px;
}

.doc-table th,
.doc-table td {
	text-align: left;
	padding: 12px 16px;
	border-bottom: 1px solid var(--rule);
	vertical-align: top;
}

.doc-table thead th {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--steel);
	font-weight: 400;
	white-space: nowrap;
}

.doc-table tbody tr:last-child td {
	border-bottom: 0;
}

.doc-table td {
	color: var(--ink-soft);
}

.doc-table td:first-child {
	font-family: var(--mono);
	font-size: 13px;
	color: var(--ink);
	white-space: nowrap;
}

/*
	The cookie table's first column is a stored value's NAME — mono, and it must not wrap.
	The policy's tables put a sentence there instead, so they opt out of both. Two shapes,
	one component, rather than a second near-identical block of table styling.
*/

.doc-table--prose td:first-child {
	font-family: inherit;
	font-size: inherit;
	white-space: normal;
}

.doc-table--prose table {
	min-width: 520px;
}

/*
	On a phone, a two-column prose table scrolls sideways inside its own box — correct, and
	unreadable: half the legal basis sits off-screen behind a gesture nobody makes while
	reading. So below 640px the prose tables stop being tables and become labelled blocks,
	one field per line, using each cell's data-label (written from its own <th>).

	The cookie table is deliberately NOT included: its rows are short values that fit, and a
	table is the right shape for reading an inventory.
*/

@media (max-width: 640px) {
	.doc-table--prose {
		overflow-x: visible;
	}

	.doc-table--prose table {
		min-width: 0;
	}

	.doc-table--prose thead {
		display: none;
	}

	.doc-table--prose table,
	.doc-table--prose tbody,
	.doc-table--prose tr,
	.doc-table--prose td {
		display: block;
		width: auto;
	}

	.doc-table--prose tr {
		border-bottom: 1px solid var(--rule);
		padding: 15px 0;
	}

	.doc-table--prose tbody tr:last-child {
		border-bottom: 0;
	}

	.doc-table--prose td {
		border-bottom: 0;
		padding: 0 16px 12px;
	}

	.doc-table--prose tr td:last-child {
		padding-bottom: 0;
	}

	.doc-table--prose td::before {
		content: attr(data-label);
		display: block;
		font-family: var(--mono);
		font-size: 10.5px;
		letter-spacing: 0.11em;
		text-transform: uppercase;
		color: var(--steel);
		margin-bottom: 5px;
	}
}

.doc-note {
	border-left: 2px solid var(--marker);
	padding-left: 18px;
	color: var(--ink-soft);
}

/* ---- Responsive ---- */

@media (max-width: 1000px) {
	.steps,
	.feats {
		grid-template-columns: 1fr 1fr;
	}

	.problem-body,
	.cta-inner {
		grid-template-columns: 1fr;
	}

	.trust-wrap {
		grid-template-columns: 1fr;
	}

	.trust-figure {
		max-width: 420px;
	}

	.scope-wrap {
		grid-template-columns: 1fr;
	}

	.scope-figure {
		max-width: 420px;
	}

	.hero {
		justify-content: center;
	}

	.hero-content {
		margin-right: 0;
		background: rgba(244, 245, 241, 0.94);
		padding: clamp(24px, 5vw, 36px);
		border-radius: 3px;
	}

	/* Stacked, the card MUST come first: left in source order it keeps its
	   negative pull and lands on top of the intro text below it. */
	.plate .wrap {
		grid-template-columns: 1fr;
		align-items: start;
		gap: 32px;
	}

	/* No layering under 1000px: at phone widths the card behind would show as a
	   sliver, and the whitespace the stack solves does not exist in one column. */
	.plate-card {
		order: -1;
		max-width: 460px;
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.plate-card {
		padding-bottom: 0;
	}

	.plate-card > .bdk,
	.plate-card > .bdk + .bdk {
		grid-area: auto;
		transform: none;
		animation: none;
	}

	.plate-note {
		padding-bottom: 0;
	}

	/* Nav collapses behind the hamburger. */
	.hamburger {
		display: flex;
	}

	.site-nav {
		display: none;
		position: absolute;
		top: var(--head);
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--card);
		box-shadow: 0 4px 12px rgba(35, 31, 32, 0.1);
		padding: 0.6rem 0;
		font-size: 16px;
	}

	.site-head.nav-open .site-nav {
		display: flex;
	}

	.site-nav a {
		padding: 14px var(--gut);
	}

	.head-actions {
		margin-left: 0;
		gap: 14px;
	}
}

@media (max-width: 640px) {
	body {
		font-size: 16px;
	}

	.steps,
	.feats,
	.trust {
		grid-template-columns: 1fr;
	}

	.bdk-fields {
		grid-template-columns: 1fr;
	}

	.bdk-f:nth-child(odd) {
		border-right: 0;
	}

	.bdk-f:nth-last-child(-n + 2) {
		border-bottom: 1px solid var(--rule);
	}

	.bdk-f:last-child {
		border-bottom: 0;
	}

	.hz-row,
	.scope-row {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.scope-row {
		gap: 4px;
	}

	.site-head .wrap {
		height: 64px;
		gap: 14px;
	}

	.plate .wrap {
		gap: 26px;
	}

	.plate-card > .bdk:first-child {
		margin-top: -110px;
	}

	.task .mt {
		font-size: 11px;
	}

	.btn {
		padding: 13px 18px;
		font-size: 15px;
	}

	.hero {
		padding-bottom: 84px;
	}

	.scroll-cue {
		bottom: 22px;
	}
}