/* Hallmark · pre-emit critique: P5 H5 E5 S4 R5 V4 · slop test 58/58 · contrast: pass (40–41) */
/* Hallmark · genre: modern-minimal · macrostructure: Split Studio (one diptych in the hero frame: pitch | form) · theme: custom (Apple-slick, one brand violet) · design-system: tokens.css + home.css · enrichment: none · nav: N1b focused (wordmark · language · log in) · footer: Ft5 statement (shared)
 * tone: Apple-like SaaS, slick · audience: projectleiders + directie at construction firms · action: request a demo
 * Loads after home.css and reuses its nav, buttons, card, status pill, spec list and footer.
 * Shared by waitlist.html and en/waitlist.html.
 */

.req [hidden] { display: none !important; }

/* ============ Nav: focused variant (no section links on a form page) ============ */
.nav-focus .nav-inner { grid-template-columns: minmax(0, 1fr) auto; }
.nav-focus .nav-right { gap: var(--space-2xs); }
.nav-focus .nav-lang,
.nav-login {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--space-xs);
  font-size: var(--text-xs); color: inherit; opacity: 0.72; text-decoration: none; white-space: nowrap;
  transition: opacity var(--dur-short) var(--ease-out);
}
.nav-login { font-weight: 500; opacity: 0.88; }   /* inside the glass capsule: same air as the logo side */
@media (hover: hover) and (pointer: fine) { .nav-focus .nav-lang:hover, .nav-login:hover { opacity: 1; } }
.nav-focus .nav-lang:active, .nav-login:active { opacity: 0.6; }

/* ============ The frame: same canvas as the homepage hero, pitch left, form right ============ */
.req { padding-block: calc(var(--nav-height) + var(--space-sm)) var(--space-3xl); }
@media (min-width: 60rem) { .req { padding-top: calc(var(--nav-height) + var(--space-md)); } }
.req-frame {
  position: relative; isolation: isolate; overflow: hidden;
  padding: var(--space-xl) var(--space-lg) var(--space-2xl);
  border-radius: var(--radius-stage);
  background:
    radial-gradient(58% 48% at 8% 0%, var(--color-glow-a), transparent 72%),
    radial-gradient(46% 42% at 100% 78%, var(--color-glow-b), transparent 72%),
    linear-gradient(165deg, var(--color-stage-a), var(--color-paper) 52%, var(--color-stage-b));
}
@media (min-width: 40rem) { .req-frame { padding: var(--space-2xl) var(--space-2xl) var(--space-3xl); border-radius: var(--radius-frame); } }
@media (min-width: 60rem) { .req-frame { padding-inline: clamp(2.5rem, 5vw, 5rem); } }

.req-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
@media (min-width: 60rem) {
  .req-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; }
}
.req-intro { display: grid; gap: var(--space-md); align-content: start; }
.req-title {
  font-size: var(--text-xl); font-weight: 700; line-height: 1.07; letter-spacing: var(--track-head);
  overflow-wrap: anywhere; min-width: 0;
}
.req-title span { display: block; text-wrap: balance; }
.req-intro .lede { max-width: 30rem; }

/* The card sits straight on the canvas, like the dossier in the homepage hero */
.req-stage { display: grid; justify-items: center; }
@media (min-width: 60rem) { .req-stage { justify-items: end; } }
.req-card { max-width: 34rem; padding: clamp(1.25rem, 4vw, 2.5rem); container-type: inline-size; }

/* ============ What happens next (the homepage timeline, three even steps) ============ */
.req-next { padding-top: var(--space-3xl); }
.req-next-title { font-size: var(--text-md); font-weight: 600; line-height: 1.25; letter-spacing: var(--track-head); }
.req-next .h-track { margin-top: var(--space-xl); }
.req-next .h-steps { gap: var(--space-xl); }
.req-next .h-step p:not(.h-when) { max-width: 24rem; }
@media (min-width: 60rem) { .req-next .h-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xl); } }
.req-alt { margin-top: var(--space-xl); color: var(--color-ink-2); }
.req-alt a { color: var(--color-accent); text-decoration: none; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .req-alt a:hover { text-decoration: underline; text-underline-offset: 0.2em; } }

/* Progress: three bars, the current label in ink */
.req-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); margin-bottom: var(--space-xl); }
.req-steps li { display: grid; gap: var(--space-xs); font-size: var(--text-xs); line-height: 1.3; letter-spacing: 0; color: var(--color-ink-2); white-space: nowrap; }
.req-steps li::before { content: ""; height: 3px; border-radius: var(--radius-pill); background: var(--color-rule-2); transition: background-color var(--dur-long) var(--ease-out); }
.req-steps li.is-done::before,
.req-steps li[aria-current="step"]::before { background: var(--color-accent); }
.req-steps li[aria-current="step"] { color: var(--color-ink); font-weight: 500; }

.req-panel { display: grid; gap: var(--space-lg); }
.req-panel:not([hidden]) { animation: panel-in var(--dur-long) var(--ease-out); }
@keyframes panel-in { from { opacity: 0; transform: translateY(var(--space-xs)); } }
.req-head { display: grid; gap: var(--space-xs); }
.req-q {
  font-size: var(--text-lg); font-weight: 600; line-height: 1.15; letter-spacing: var(--track-head);
  text-wrap: balance; overflow-wrap: anywhere; min-width: 0;
}
.req-q:focus:not(:focus-visible) { outline: none; }   /* programmatic focus target after sending */
.req-hint { color: var(--color-ink-2); text-wrap: pretty; }

/* ============ Fields: 44px like the buttons, 1px border in every state, outline ring reserved at rest ============ */
.req-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs) var(--space-md); }
@container (min-width: 26rem) { .req-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { display: grid; gap: var(--space-xs); align-content: start; min-width: 0; }
.field label { font-size: var(--text-xs); font-weight: 500; line-height: 1.3; letter-spacing: 0; }
.field input,
.field textarea {
  display: block; width: 100%; margin: 0;
  padding: var(--space-sm) var(--space-md);
  font: inherit; font-size: var(--text-base); line-height: 1.3; letter-spacing: var(--track-body);
  color: var(--color-ink);
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-paper-2);
  border-radius: var(--radius-input);
  outline: 2px solid transparent; outline-offset: 1px;
  -webkit-appearance: none; appearance: none;
  transition: background-color var(--dur-short) var(--ease-out);
}
.field input { height: 44px; padding-block: 0; }
.field textarea { min-height: 6rem; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: var(--color-ink-3); opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .field input:hover, .field textarea:hover { border-color: var(--color-rule); }
}
.field input:focus-visible,
.field textarea:focus-visible { outline-color: var(--color-focus); background: var(--color-card); border-color: var(--color-rule); }
/* Error: border flips, the message underneath says what to fix */
.field input[aria-invalid="true"] { background: var(--color-card); border-color: var(--color-error); }
.field input[aria-invalid="true"]:focus-visible { outline-color: var(--color-error); }
.field input:disabled,
.field textarea:disabled { opacity: 0.55; cursor: not-allowed; }

/* Message slot keeps one line reserved, so an error never pushes the buttons down */
.field-msg {
  display: flex; gap: var(--space-2xs); align-items: flex-start;
  min-height: calc(var(--text-xs) * 1.45);
  font-size: var(--text-xs); line-height: 1.45; letter-spacing: 0;
  color: var(--color-error);
}
.field-msg:not(:empty)::before,
.req-alert::before {
  content: ""; flex: none; width: 1em; height: 1em; margin-top: 0.22em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.75' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M8 4.5v4.25' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.25' r='0.95'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.75' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M8 4.5v4.25' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.25' r='0.95'/%3E%3C/svg%3E") center / contain no-repeat;
}

.req-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.req-alert {
  display: flex; gap: var(--space-xs); align-items: flex-start;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-input);
  background: var(--color-error-bg); color: var(--color-error);
  font-size: var(--text-xs); line-height: 1.45; letter-spacing: 0;
}

/* ============ Actions ============ */
.req-actions { display: flex; align-items: center; gap: var(--space-sm) var(--space-md); }
.req-actions .btn-primary { margin-left: auto; }
.req-back {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  min-height: 44px; padding: 0 var(--space-sm); margin-left: calc(-1 * var(--space-sm));
  background: none; border: 0; border-radius: var(--radius-pill);
  color: var(--color-ink-2);
  font: inherit; font-size: var(--text-base); letter-spacing: var(--track-body);
  white-space: nowrap; cursor: pointer;
  transition: color var(--dur-short) var(--ease-out);
}
.req-back::before { content: "‹"; font-size: 1.2em; line-height: 1; transform: translateY(-0.04em); }
@media (hover: hover) and (pointer: fine) { .req-back:hover { color: var(--color-ink); } }
.req-back:active { opacity: 0.6; }
.req-back:disabled { opacity: 0.4; cursor: not-allowed; }

/* Sending: spinner in the button, label stays readable */
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"]::before {
  content: ""; flex: none; width: 1em; height: 1em; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Narrow card: primary on top, full width; back underneath */
@container (max-width: 19rem) {
  .req-actions { flex-direction: column-reverse; align-items: stretch; }
  .req-actions .btn-primary { margin-left: 0; }
  .req-back { justify-content: center; margin-left: 0; }
}

.req-fine { color: var(--color-ink-2); }

/* ============ Sent ============ */
.req-done { display: grid; gap: var(--space-lg); justify-items: start; }
.req-done .spec { width: 100%; }
.req-done .spec > div { grid-template-columns: minmax(0, 6rem) minmax(0, 1fr); }
.req-done .spec dd { overflow-wrap: anywhere; min-width: 0; }
@container (max-width: 20rem) { .req-done .spec > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); } }

/* ============ Entrance (once, same blur-to-sharp as the homepage hero) ============ */
.motion .req-title > span,
.motion .req-intro .lede { animation: focus-in var(--dur-reveal) var(--ease-out) backwards; }
.motion .req-title > span:nth-child(2) { animation-delay: 120ms; }
.motion .req-intro .lede { animation-delay: 240ms; }
.motion .req-stage > form { animation: rise-in var(--dur-reveal) var(--ease-out) 200ms backwards; }
.req-done:not([hidden]) { animation: panel-in var(--dur-long) var(--ease-out); }
@keyframes rise-in { from { opacity: 0; transform: translateY(var(--space-lg)); } }