/* kukudze homepage (Concept 02). Mobile first. Only loaded on the front page. */

/* ---------- Hero ---------- */
.hero { padding-block: clamp(var(--space-24), 3vw, var(--space-48)) calc(var(--page-section) / 2); }
.hero__title { max-width: 19ch; }
/* Each sentence wraps as a unit when it fits, so the break falls after "Verify emails." */
.hero__s { display: inline-block; }
.hero__lead { margin-top: var(--space-24); max-width: 48ch; }
.hero .hero__actions { margin-top: var(--space-24); }
/* Try-it demo: under the actions, then right of the headline from 1280px (owner, 2026-11-03). */
.hero__grid { display: grid; gap: clamp(var(--space-32), 3vw, var(--space-48)); }
.hero__grid .demo { max-width: 720px; }
@media (min-width: 1280px) {
	.hero__grid { grid-template-columns: minmax(0, 7fr) minmax(400px, 5fr); align-items: start; }
	.hero__grid .demo { max-width: none; }
}

/* ---------- Sample verification ---------- */
.sample { margin-top: clamp(var(--space-32), 3vw, var(--space-48)); }
.sample__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-8) var(--space-24); padding: var(--space-16); background: var(--color-surface); border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-control) var(--radius-control) 0 0; }
.sample__title { font-family: var(--font-display); font-size: var(--font-size-h4); font-weight: 700; letter-spacing: var(--letter-spacing-h4); line-height: var(--line-height-h4); }
.sample__lede { margin-top: var(--space-4); color: var(--color-text-muted); }
.sample__file { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-24); color: var(--color-text-muted); }
.sample__name { display: inline-flex; align-items: center; gap: var(--space-8); color: var(--color-text); }
.sample__name .icon { width: 20px; height: 20px; }

/* Phone: Total on its own row, then 2 x 2 (the right column gets the divider). */
/* Totals: right under the heading, so they show in the first screen. Equal columns, tabular numerals. */
.totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--color-surface-muted); border: var(--border-thin) solid var(--color-border); border-top: 0; }
.totals__item { display: grid; gap: var(--space-4); align-content: start; padding: var(--space-16); border-top: var(--border-thin) solid var(--color-border); }
.totals__item--all { grid-column: 1 / -1; border-top: 0; }
.totals__item--all ~ .totals__item:nth-child(odd) { border-left: var(--border-thin) solid var(--color-border); }
.totals dt { display: flex; align-items: center; gap: var(--space-8); font-weight: 600; }
.totals dt .icon { width: clamp(24px, 2vw, 32px); height: clamp(24px, 2vw, 32px); }
.totals dd { font-family: var(--font-display); font-size: var(--font-size-h3); font-weight: 800; letter-spacing: var(--letter-spacing-h3); line-height: var(--line-height-h3); font-variant-numeric: tabular-nums; }
.totals__item--valid dt .icon { color: var(--color-success); }
.totals__item--invalid dt .icon { color: var(--color-error); }
.totals__item--risky dt .icon { color: var(--color-warning); }
.totals__item--unknown dt .icon { color: var(--color-unknown); }

.sample__scroll { overflow-x: auto; background: var(--color-surface); border: var(--border-thin) solid var(--color-border); border-top: 0; border-radius: 0 0 var(--radius-control) var(--radius-control); }
.sample__table th, .sample__table td { white-space: nowrap; }
.sample__table .sig-pass .icon { width: 24px; height: 24px; }
.sample__email { min-width: 0; }
/* Emails break only after the @, and only below 1440 where columns are tight. */
.em > span { display: inline-block; }
.em { white-space: normal; }
@media (min-width: 1440px) { .em { white-space: nowrap; } }
.sample__more { display: flex; align-items: center; gap: var(--space-4); min-height: var(--layout-touch-target); margin-top: var(--space-4); padding: 0; border: 0; background: none; color: var(--color-link); font-weight: 600; }
.sample__more:hover { text-decoration: underline; text-underline-offset: 3px; }
.sample__more .icon { transition: transform var(--motion-fast) var(--motion-ease); }
.sample__more[aria-expanded="true"] .icon { transform: rotate(180deg); }
.sample__details td { background: var(--color-surface-muted); height: auto; white-space: normal; }
.sample__details dl { display: grid; gap: var(--space-8); }
.sample__details dl > div { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); min-height: 32px; }
.sample__details dt { color: var(--color-text-muted); }
.sample__why { margin-top: var(--space-8); }
.col-check { display: none; }
.sample__foot { margin-top: var(--space-12); color: var(--color-text-muted); }
.sample__foot p + p { margin-top: var(--space-4); }
.sample__foot strong { color: var(--color-text); }

/* Phones: 5 rows (one of each result) with details; Email + Result only. */
@media (max-width: 767px) {
	.sample__row--more { display: none !important; }
	.no-js .sample__more { display: none; }
	.no-js .sample__details[hidden] { display: table-row !important; }
	.no-js .sample__details.sample__row--more { display: none !important; }
}
/* 320px phones: a little less padding so Email + Result fit without sideways scroll. */
@media (max-width: 359px) {
	.sample__table th, .sample__table td { padding-inline: var(--space-12); }
	.sample__more .icon { display: none; }
	.sample__table .badge { gap: var(--space-4); padding-inline: var(--space-4); }
}

@media (min-width: 768px) {
	.sample__head { padding: var(--space-20) var(--space-24); }
	.col-check { display: table-cell; }
	.sample__more, .sample__details { display: none !important; }
	.sample__table th:first-child, .sample__table td:first-child { padding-left: var(--space-24); }
	.sample__table .col-check { min-width: 104px; }
	.totals { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.totals__item, .totals__item--all { grid-column: auto; padding: var(--space-20) var(--space-24); border-top: 0; }
	.totals__item--all ~ .totals__item:nth-child(n) { border-left: var(--border-thin) solid var(--color-border); }
}

@media (min-width: 1024px) {
	.sample__table .col-email { min-width: 240px; }
}

/* ---------- Checks table ---------- */
.checks__table td, .checks__table th { vertical-align: top; }
.checks__table tbody th { font-weight: 600; }
@media (min-width: 1440px) { .checks__table tbody th { white-space: nowrap; } }
.checks__note { margin-top: var(--space-12); }
/* Phone: name as a heading, the description, then example and result on one line. No repeated labels. */
@media (max-width: 767px) {
	.checks__wrap { position: relative; }
	.checks__table thead { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
	.checks__table thead tr, .checks__table thead th { display: block; width: 1px; padding: 0; }
	.checks__table, .checks__table tbody { display: block; width: 100%; }
	.checks__table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-12); padding: var(--space-16); border-bottom: var(--border-thin) solid var(--color-border); }
	.checks__table tbody tr:last-child { border-bottom: 0; }
	.checks__table tbody th, .checks__table tbody td { display: block; height: auto; padding: 0; border: 0; white-space: normal; }
	.checks__name { grid-column: 1 / -1; font-family: var(--font-display); font-size: var(--font-size-h4); font-weight: 700; letter-spacing: var(--letter-spacing-h4); }
	.checks__what { grid-column: 1 / -1; margin-top: var(--space-4); }
	.checks__example { margin-top: var(--space-12); align-self: center; overflow-wrap: anywhere; color: var(--color-text-muted); }
	.checks__result { margin-top: var(--space-12); align-self: center; }
}

/* ---------- Cobalt band (edge to edge; no yellow rule, owner 2026-11-05) ---------- */
.band { margin-block: calc(var(--page-section) / 2); padding-block: calc(var(--page-section) * 0.75); background: var(--color-brand-band); color: var(--color-on-brand-band); }
.band h2 { color: var(--color-on-brand-band); }
.band__grid { display: grid; gap: var(--space-24); }
.band__body .lead { max-width: 60ch; }
@media (min-width: 1024px) {
	.band__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-48); align-items: center; }
	.band__body { padding-left: var(--space-48); border-left: var(--border-thin) solid rgba(255, 255, 255, 0.4); }
}

/* ---------- Background motif (homepage placements) ----------
   Thin signal arcs and fine lines with small square dots, cobalt at very low opacity.
   Only in empty corners: never behind the H1, the tables, the step text, the FAQ answers or the cobalt band. */
.hero::before { content: none; }
@media (min-width: 1280px) {
	/* Right of the headline; the headline ends near 62% of the width and the table has its own white background. */
	/* The demo panel sits on the right, so the arcs go in the empty space under the headline actions (left column), above the sample table. */
	.hero::before { content: ""; top: var(--motif-top, 470px); left: var(--page-gutter); width: clamp(220px, 20vw, 380px); aspect-ratio: 480 / 400; --motif: url("../img/motif-arcs.svg"); }
}
@media (min-width: 768px) {
	/* Beside the "three steps" title, above the third column. */
	.steps::before { content: ""; top: calc(var(--page-section) / 2 - var(--space-24)); right: var(--page-gutter); width: clamp(160px, 22vw, 360px); aspect-ratio: 3 / 1; --motif: url("../img/motif-lines.svg"); }
}
@media (min-width: 1024px) {
	/* Under the FAQ title in the left column. */
	.faq::before { content: ""; left: var(--page-gutter); bottom: calc(var(--page-section) / 2); width: clamp(200px, 20vw, 360px); aspect-ratio: 3 / 1; --motif: url("../img/motif-lines.svg"); transform: scaleX(-1); }
}