/* Hallmark · shape: Narrative Workflow · genre: modern-minimal · theme: Ultraviolet (continued from existing first build) · job: enquire
 * hero: Settled · nav: edge-aligned bar that retracts on scroll · footer: mast · imagery: local illustrative examples, no photographs · signature: one English word translated differently for two business contexts · ultraviolet: night, one record band
 * axes: dark/geometric-sans/cool · posture: committed · v2.0.0 */
/* Hallmark · hero-review: parent agent, fresh artifact review · 3 findings · 3 resolved · finish-review: parent agent · ship · no open findings */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V3 · weakest: V, the inherited SaaS composition is familiar; its signature now demonstrates the user's specific Home/Thuis context problem instead of generic progress bars */
/* Hallmark · answered F4 · the white pill sits alone inside the record-colour band, where the theme turns the filled control white; the page's one violet pill stays the hero action */
/* Hallmark · dismissed 23 · the photo treatment rule in base.css is inactive here because the page has no photographs */
@import url("./tokens.css");
@import url("./base.css");

@font-face { font-family: "Outfit"; font-style: normal; font-weight: 300 500; font-display: swap; src: url("fonts/outfit-latin.woff2") format("woff2"); }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("fonts/onest-latin.woff2") format("woff2"); }

:root { --nav-h: 72px; }

/* ── shared ─────────────────────────────────────────────── */
h1, h2, h3 { text-transform: lowercase; }
h1.display-s { font-size: var(--text-display-s); font-weight: var(--display-weight); }
.label, small, figcaption, th { font: 500 var(--text-sm)/1.3 var(--font-display); color: var(--color-muted); text-transform: lowercase; letter-spacing: 0; }
.skip { position: absolute; left: var(--space-md); top: -80px; z-index: var(--z-modal); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font: 500 var(--text-sm)/1 var(--font-display); }
.skip:focus-visible { top: var(--space-sm); }

.btn, .pill { display: inline-flex; align-items: center; border-radius: var(--radius-pill); font: 500 var(--text-md)/1 var(--font-display); text-transform: lowercase; text-decoration: none; }
.btn { min-height: 48px; padding: 0 var(--space-lg); white-space: nowrap; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-accent-deep); }
.btn--secondary { color: var(--color-ink); box-shadow: inset 0 0 0 1.5px var(--color-ink); }
.btn--secondary:hover { background: var(--color-paper-2); }
.btn--white { background: var(--color-record-white); color: var(--color-record); }
.btn--white:hover { background: var(--color-record-ink); }
.btn:active { transform: translateY(1px); }
.pill { padding: var(--space-xs) var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); box-shadow: inset 0 0 0 1.5px var(--color-rule-2); }
.pill--on { background: var(--color-accent); color: var(--color-accent-ink); box-shadow: none; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }

.well { margin: 0; border-radius: var(--radius-card); background: var(--color-paper-2); box-shadow: var(--shadow-card); }
.well[data-slot] { background: var(--color-paper-2); overflow: visible; }

.section { padding-block: var(--section-gap-s); }
.band { background: var(--color-paper-2); color: var(--color-ink); }
.head { display: grid; gap: var(--space-md); margin-bottom: var(--space-2xl); }
.head h2 { max-width: 22ch; }
.head--split { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: end; }
.head--split h2 { grid-column: 1 / span 5; }
.head--split .lead { grid-column: 7 / span 6; }

.fill { padding: 0 0.25em; border: 1px dashed color-mix(in oklch, var(--color-muted) 70%, transparent); border-radius: 3px; color: var(--color-muted); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ── nav ────────────────────────────────────────────────── */
.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); transition: transform var(--dur-short) var(--ease-out); }
.nav.is-away { transform: translateY(-100%); }
.nav__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: var(--nav-h); }
.wordmark { font: 500 var(--text-xl)/1 var(--font-display); letter-spacing: var(--tracking-display); text-decoration: none; }
.nav__links { display: flex; gap: var(--space-xl); margin-left: auto; }
.nav__links a { font: 500 var(--text-md)/1 var(--font-display); text-transform: lowercase; text-decoration: none; color: var(--color-ink-2); padding-block: var(--space-sm); }
.nav__links a:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.35em; }

/* ── hero (settled) ─────────────────────────────────────── */
.hero { min-height: calc(100svh - var(--nav-h)); display: grid; align-items: center; padding-block: var(--space-2xl); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-2xl); align-items: center; }
.hero__text h1 { max-width: 17ch; }
.hero__text .lead { margin-top: var(--space-lg); max-width: 32ch; color: var(--color-ink-2); }

.lanes { display: grid; gap: var(--space-xl); padding: var(--space-xl); min-height: 520px; align-content: center; }
.lanes__source { display: grid; gap: var(--space-xs); padding-bottom: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.lanes__quote { font: 500 var(--text-3xl)/1.1 var(--font-display); letter-spacing: var(--tracking-display); }
.lanes select { width: 100%; min-height: 44px; border: 0; border-bottom: var(--rule-hair) solid var(--color-muted); border-radius: 0; padding: var(--space-xs) 0; margin-bottom: var(--space-sm); color: var(--color-ink); background: var(--color-paper-2); font: 500 var(--text-md)/1.2 var(--font-display); cursor: pointer; }
.lanes select:hover { border-bottom-color: var(--color-ink); }
.lanes select:active { border-bottom-color: var(--color-accent); }
.lanes select:disabled { opacity: 0.5; cursor: not-allowed; }
.lanes option { font-size: var(--text-md); }
.lanes__list { display: grid; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.lane { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; grid-template-areas: "lang text pill" ". bar bar"; align-items: center; column-gap: var(--space-md); row-gap: var(--space-sm); }
.lane__lang { grid-area: lang; }
.lane__text { grid-area: text; font: 500 var(--text-lg)/1.25 var(--font-display); overflow-wrap: break-word; min-width: 0; }
.lane > .pill { grid-area: pill; }
.lane__bar { grid-area: bar; height: 3px; border-radius: var(--space-3xs); background: var(--color-accent-soft); overflow: hidden; }
.lane__bar > span { display: block; height: 100%; background: var(--color-accent); transform: scaleX(var(--fill)); transform-origin: left; animation: settle var(--dur-long) var(--ease-out) backwards; }
.lane__text--wait { display: flex; gap: var(--space-xs); }
.lane__text--wait span { display: block; height: 10px; border-radius: var(--space-xs); background: var(--color-accent-soft); }
.lane__text--wait span:nth-child(1) { width: 34%; } .lane__text--wait span:nth-child(2) { width: 22%; } .lane__text--wait span:nth-child(3) { width: 28%; }
@keyframes settle { from { transform: scaleX(0); } }
.context-examples { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-lg); }
.context-examples li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-md); align-items: center; padding-bottom: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.context-examples__result { font: 500 var(--text-2xl)/1.15 var(--font-display); letter-spacing: var(--tracking-display); }
.context-guide { margin: var(--space-lg) 0 0; }
.context-guide > div { display: flex; justify-content: space-between; gap: var(--space-lg); padding-block: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule-2); }
.context-guide dt { color: var(--color-muted); font-size: var(--text-sm); }
.context-guide dd { margin: 0; text-align: right; }

/* ── pinned run ─────────────────────────────────────────── */
.pinned__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--space-3xl); align-items: start; }
.flow { position: sticky; top: calc(var(--nav-h) + var(--space-xl)); display: grid; gap: var(--space-md); margin: 0; }
.station { display: grid; gap: var(--space-xs); padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper-3); transition: opacity var(--dur-short) var(--ease-out); }
.station__name { font: 500 var(--text-xl)/1.1 var(--font-display); letter-spacing: var(--tracking-display); }
.chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); margin: var(--space-sm) 0 0; padding: 0; list-style: none; }
.chip { display: grid; gap: var(--space-2xs); padding-block: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule-2); font: 500 var(--text-sm)/1.25 var(--font-display); color: var(--color-ink-2); }
.chip--src { grid-column: 1 / -1; font-size: var(--text-md); color: var(--color-ink); }
.chip__on-wait { display: none; }
.chip__on-done { color: var(--color-ink); }
.wires { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); padding-inline: var(--space-lg); }
.wire { display: grid; gap: var(--space-xs); justify-items: start; transition: opacity var(--dur-short) var(--ease-out); }
.wire__line { display: block; width: 100%; height: 2px; border-radius: var(--space-3xs); background: var(--color-accent); }
.wire--back .wire__line { background: var(--color-accent-soft); }
.wire--back .label { order: -1; }
.flow[data-step="1"] .station--server, .flow[data-step="1"] .wire--back,
.flow[data-step="2"] .station--site, .flow[data-step="2"] .wires,
.flow[data-step="3"] .wire--out { opacity: 0.4; }
.flow[data-step="1"] .station--site .chip__on-wait, .flow[data-step="2"] .station--site .chip__on-wait, .flow[data-step="1"] .station--server .chip__on-wait, .flow[data-step="1"] .station--server .chip__on-done { display: inline; }
.flow[data-step="1"] .station--site .chip__on-done, .flow[data-step="2"] .station--site .chip__on-done { display: none; }
.flow[data-step="1"] .station--server .chip__on-done { display: none; }
.flow[data-step="2"] .station--server .chip__on-wait { display: none; }
.flow[data-step="3"] .station--server .chip__on-wait { display: none; }
.flow[data-step="3"] .wire--back .wire__line { background: var(--color-accent); }
.flow[data-step="2"] .station--server, .flow[data-step="1"] .station--site, .flow[data-step="3"] .station--site { box-shadow: inset 0 0 0 1.5px var(--color-accent); }

.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { counter-increment: step; display: grid; align-content: center; gap: var(--space-md); min-height: 36svh; padding-left: var(--space-3xl); position: relative; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 50%; translate: 0 -50%; font: 300 var(--text-display-s)/0.9 var(--font-display); font-variant-numeric: tabular-nums; color: var(--color-accent); }
.steps li:first-child { min-height: 36svh; }
.steps p { max-width: 45ch; color: var(--color-ink-2); }

/* ── bento ──────────────────────────────────────────────── */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); }
.tile { grid-column: span 4; display: grid; align-content: start; gap: var(--space-md); padding: var(--space-xl); min-height: 280px; }
.tile--lead { grid-column: span 8; grid-template-rows: auto auto 1fr; }
.tile:nth-child(2) { grid-column: span 4; }
.tile:nth-child(n+3) { grid-column: span 6; min-height: 200px; }
.tile p { max-width: 45ch; color: var(--color-ink-2); }
.queue { align-self: end; display: grid; gap: var(--space-md); margin-top: var(--space-lg); }
.queue__row { display: grid; grid-template-columns: 3rem minmax(0, 1fr); align-items: center; gap: var(--space-md); }
.queue__pill { justify-self: start; padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font: 500 var(--text-sm)/1 var(--font-display); }
.queue__bars { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: var(--space-2xs); }
.queue__bars span { height: 22px; border-radius: var(--space-2xs); background: var(--color-accent-soft); }
.queue__bars span.is-on { background: var(--color-accent); }
.tokens { display: grid; gap: var(--space-xs); margin-top: var(--space-sm); font: 500 var(--text-lg)/1.3 var(--font-display); color: var(--color-ink); }
.tokens__to { padding-block: var(--space-2xs); }
.token { padding: 0 var(--space-xs); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); }

/* ── table ──────────────────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: var(--space-lg) var(--space-md) var(--space-lg) 0; text-align: left; vertical-align: baseline; border-top: var(--rule-hair) solid var(--color-rule); }
.table thead th { border-top: 0; padding-block: var(--space-sm); }
.table tbody th { font: 500 var(--text-xl)/1.2 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); text-transform: none; width: 34%; }
.table td { font-size: var(--text-lg); color: var(--color-ink-2); }
.table tbody tr:last-child th, .table tbody tr:last-child td { border-bottom: var(--rule-hair) solid var(--color-rule); }

/* ── grid of three ──────────────────────────────────────── */
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.cell { display: grid; align-content: space-between; gap: var(--space-xl); min-height: 280px; padding: var(--space-xl); }
.cell__title { font: 500 var(--text-display-s)/1 var(--font-display); letter-spacing: var(--tracking-display); }
.cell p { max-width: 45ch; color: var(--color-ink-2); }

/* ── faq ────────────────────────────────────────────────── */
.faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }
.faq__head { grid-column: 1 / span 4; margin-bottom: 0; align-content: start; }
.faq__rows { grid-column: 5 / span 8; border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq details { border-top: var(--rule-hair) solid var(--color-rule); }
.faq details:not([open]) > p { display: none; }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 72px; padding-block: var(--space-md); cursor: pointer; list-style: none; font: 500 var(--text-title)/1.2 var(--font-display); letter-spacing: var(--tracking-display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(var(--color-accent), var(--color-accent)) center / 100% 2px no-repeat, linear-gradient(var(--color-accent), var(--color-accent)) center / 2px 100% no-repeat; transition: transform var(--dur-short) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.3em; }
.faq details p { padding-bottom: var(--space-lg); color: var(--color-ink-2); max-width: 60ch; }

/* ── close band, record colourway ───────────────────────── */
.band-record { padding-block: var(--section-gap-s); background: var(--color-record); color: var(--color-record-ink); }
.band-record__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xl); }
.band-record h2 { max-width: 18ch; }
.band-record .lead { margin-top: var(--space-md); }
.band-record :focus-visible { outline-color: var(--color-record-white); }

/* ── footer ─────────────────────────────────────────────── */
.footer { padding-block: var(--space-3xl) var(--space-xl); }
.footer__mark { font: 500 clamp(3.5rem, 14vw, 11rem)/0.9 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); overflow-wrap: break-word; min-width: 0; }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-xl); margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.footer__links a { font: 500 var(--text-md)/1 var(--font-display); text-transform: lowercase; text-decoration: none; color: var(--color-ink-2); padding-block: var(--space-sm); }
.footer__links a:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); }
.footer__legal { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); max-width: 70ch; }

/* ── responsive ─────────────────────────────────────────── */
@media (max-width: 60rem) {
  .hero { min-height: 0; padding-block: var(--space-xl); }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
  .lanes { min-height: 0; padding: var(--space-lg); }
  .pinned__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); }
  .flow { position: static; }
  .steps li { min-height: 0; padding: var(--space-xl) 0 var(--space-xl) var(--space-2xl); }
  .steps li:first-child { min-height: 0; }
  .steps li::before { top: var(--space-xl); translate: 0 0; font-size: var(--text-3xl); }
  .head--split h2, .head--split .lead { grid-column: 1 / -1; }
  .head--split { row-gap: var(--space-md); }
  .bento, .grid3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tile, .tile--lead, .tile:nth-child(2), .tile:nth-child(n+3) { grid-column: auto; }
  .tile--lead { grid-column: 1 / -1; }
  .faq { display: block; }
  .faq__head { margin-bottom: var(--space-xl); }
  .nav__links { display: none; }
  .nav__row { justify-content: space-between; }
  .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .table, .table tbody, .table tr, .table th, .table td { display: block; width: 100%; }
  .table tbody th { width: 100%; border-top: var(--rule-hair) solid var(--color-rule); padding-bottom: var(--space-xs); }
  .table td { border-top: 0; padding: var(--space-2xs) 0; font-size: var(--text-md); }
  .table td::before { content: attr(data-label) ": "; color: var(--color-muted); font-family: var(--font-display); font-weight: 500; text-transform: lowercase; }
  .table tbody tr:last-child th { border-bottom: 0; }
  .table tbody tr:last-child td:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); padding-bottom: var(--space-lg); }
  .table tbody tr td:last-child { padding-bottom: var(--space-lg); }
}
@media (max-width: 40rem) {
  :root { --nav-h: 64px; }
  .nav .btn { min-height: 44px; padding: 0 var(--space-md); }
  .nav__row { gap: var(--space-xs); }
  .nav .btn { font-size: var(--text-sm); }
  .hero__grid { gap: var(--space-xl); }
  .hero .actions { gap: var(--space-xs); }
  .hero .actions .btn { padding-inline: var(--space-md); font-size: var(--text-sm); }
  .lanes { gap: var(--space-lg); }
  .lanes__source { padding-bottom: var(--space-md); }
  .lanes select { margin-bottom: 0; }
  .lanes__source .lanes__quote { display: none; }
  .bento, .grid3 { grid-template-columns: minmax(0, 1fr); }
  .tile--lead { grid-column: auto; }
  .tile, .cell { padding: var(--space-lg); min-height: 0; }
  .cell { gap: var(--space-lg); }
  .lane { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "lang pill" "text text" "bar bar"; }
  .lanes__quote { font-size: var(--text-2xl); }
  .chips { grid-template-columns: minmax(0, 1fr); }
  .wires { padding-inline: 0; }
  .queue__bars { grid-template-columns: repeat(16, minmax(0, 1fr)); }
  .queue__bars span:nth-child(n+17) { display: none; }
  .actions .btn { flex: 1 1 auto; justify-content: center; }
  .band-record .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .nav, .station, .wire, .btn, .faq summary::after { transition: none; }
  .lane__bar > span { animation: none; }
}