/* Requiro demo splash — static page served by Caddy at "/".
   Single-viewport welcome screen (no scroll on desktop): headline + the
   two demo projects + a capability strip, all visible on arrival, with a
   staggered entrance and two subtle in-card loops.
   Design tokens mirror the showcase landing (requiro.altirratech.eu,
   src/styles/global.css): Minimalism ✕ Engineering, flat surfaces,
   hairline borders, color = meaning, IBM Plex Mono as the signature.
   Light + dark, switchable like the showcase: same data-theme attribute,
   same localStorage key ('requiro-theme'), prefers-color-scheme initial. */

/* ── Fonts (self-hosted, @fontsource latin subsets) ─────────────── */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/landing/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/landing/fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/landing/fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/landing/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/landing/fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2');
}

/* ── Tokens (1:1 with the showcase light theme) ─────────────────── */
:root {
  --font-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --color-primary: #2563EB;
  --color-primary-hover: #1D4ED8;
  --color-primary-deep: #1E40AF;
  --color-primary-light: #3B82F6;

  --color-page: #F8FAFC;
  --color-card: #FFFFFF;
  --color-section: #F1F5F9;

  --color-ink: #0F172A;
  --color-muted: #64748B;
  --color-faint: #94A3B8;

  --color-hairline: #E2E8F0;
  --color-hairline-strong: #CBD5E1;

  --color-success: #16A34A;
  --color-amber: #F59E0B;

  --color-uid-text: #1E3A8A;
  --color-uid-bg: #F1F5F9;
  --color-uid-border: #E2E8F0;

  /* change-bar palette (single source of truth in the app) */
  --color-cb-new: #10B981;
  --color-cb-modified: #F59E0B;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;

  --ease-decel: cubic-bezier(0.16, 1, 0.3, 1);
  /* Match the showcase landing (requiro.altirratech.eu): one centered column,
     max-width 1200px, side padding 20px (mobile) → 32px (≥640px). The topbar,
     body and footer all align to this same gutter. */
  --content-max: 1200px;
  --page-px: 20px;

  /* ambient pieces that can't ride a single token */
  --bar-translucent: rgba(248, 250, 252, 0.82);
  --dot-ink: rgba(37, 99, 235, 0.13);
  --wash-blue: rgba(37, 99, 235, 0.07);
  --wash-amber: rgba(245, 158, 11, 0.05);
}
@media (min-width: 640px) { :root { --page-px: 32px; } }

/* dark theme — same palette as the showcase's slate-dark */
[data-theme='dark'] {
  --color-primary: #3B82F6;
  --color-primary-hover: #60A5FA;
  --color-primary-deep: #2563EB;
  --color-primary-light: #60A5FA;

  --color-page: #0F172A;
  --color-card: #1E293B;
  --color-section: #0F172A;

  --color-ink: #F1F5F9;
  --color-muted: #CBD5E1;
  --color-faint: #94A3B8;

  --color-hairline: #334155;
  --color-hairline-strong: #475569;

  --color-success: #4ADE80;
  --color-amber: #FBBF24;

  --color-uid-text: #93C5FD;
  --color-uid-bg: rgba(59, 130, 246, 0.12);
  --color-uid-border: rgba(59, 130, 246, 0.24);

  --color-cb-new: #34D399;
  --color-cb-modified: #FBBF24;

  --bar-translucent: rgba(15, 23, 42, 0.82);
  --dot-ink: rgba(96, 165, 250, 0.14);
  --wash-blue: rgba(59, 130, 246, 0.09);
  --wash-amber: rgba(251, 191, 36, 0.05);
}
[data-theme='dark'] html, [data-theme='dark'] body { color-scheme: dark; }

/* ── Base ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
/* Honour the `hidden` attribute even on elements with an explicit display
   (e.g. .guide-success uses display:flex when shown). */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; color-scheme: light; transition: background-color 160ms ease, color 160ms ease; }
html[data-theme='dark'] { color-scheme: dark; }
body {
  margin: 0;
  background: var(--color-page);
  color: var(--color-ink);
  font-family: var(--font-sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: color-mix(in srgb, var(--color-primary) 22%, transparent); color: var(--color-ink); }
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
h1, h2 { margin: 0; line-height: 1.12; letter-spacing: -0.02em; }
p { margin: 0; }

/* ── Single-viewport shell ──────────────────────────────────────── */
.shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.dotgrid {
  /* blueprint dot-grid over two faint brand washes (blue top-right where
     the cards sit, a whisper of amber bottom-left under the strip) */
  background-image:
    radial-gradient(var(--dot-ink) 1px, transparent 1px),
    radial-gradient(820px 460px at 76% 18%, var(--wash-blue), transparent 70%),
    radial-gradient(640px 380px at 12% 96%, var(--wash-amber), transparent 70%);
  background-size: 22px 22px, auto, auto;
  animation: grid-drift 80s linear infinite;
}
@keyframes grid-drift {
  to { background-position: 220px 220px, 0 0, 0 0; }
}

/* ── Signature primitives ───────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(0.6875rem, 0.6vw, 0.9rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
  margin: 0 0 12px;
}
.eyebrow::before { content: '//'; color: var(--color-faint); }

.uid-chip {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(0.6875rem, 0.6vw, 0.92rem);
  font-weight: 500;
  line-height: 1;
  color: var(--color-uid-text);
  background: var(--color-uid-bg);
  border: 1px solid var(--color-uid-border);
  border-radius: var(--radius-sm);
  padding: 0.28rem 0.5rem;
  white-space: nowrap;
}

/* project cards carry an always-on 3px accent bar that sweeps in after
   the card lands; the hue follows meaning (emerald = you edit here,
   blue = baselined reference) */
.card--live, .card--read { position: relative; }
.card--live::before, .card--read::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  transform: scaleX(0);
  transform-origin: left;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  animation: bar-in 700ms var(--ease-decel) forwards;
}
.card--live::before {
  background: linear-gradient(90deg, #15803D, var(--color-cb-new), #34D399);
  animation-delay: 760ms;
}
[data-theme='dark'] .card--live::before {
  background: linear-gradient(90deg, #10B981, #34D399, #6EE7B7);
}
.card--read::before {
  background: linear-gradient(90deg, var(--color-primary-deep), var(--color-primary), var(--color-primary-light));
  animation-delay: 860ms;
}
@keyframes bar-in {
  to { transform: scaleX(1); }
}

/* ── Buttons ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.btn-lg { padding: clamp(12px, 1vw, 18px) clamp(22px, 1.8vw, 34px); font-size: clamp(0.95rem, 0.85vw, 1.25rem); }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-hover); }
.btn svg { transition: transform 200ms var(--ease-decel); }
.btn-primary:hover svg { transform: translateX(3px); }
.btn-ghost {
  background: var(--color-card);
  color: var(--color-ink);
  border: 1px solid var(--color-hairline-strong);
}
.btn-ghost:hover { border-color: var(--color-faint); }
/* Kill the user-agent default focus ring on mouse/programmatic focus. Without
   this, Safari draws its own dark focus ring on click — the "alone nero" — and
   a :focus-visible rule alone never suppresses it. */
.btn:focus { outline: none; }
/* Crisp keyboard focus-ring, identical to the app's @mixin focus-ring (2px
   solid outline, 2px offset). Only shows on real keyboard nav — never on a
   mouse click (no halo) — matching every button inside Requiro. */
.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ── Topbar ─────────────────────────────────────────────────────── */
/* Full-width bar (border + blur) with its content centered to the shared
   1200px column, so the brand/actions line up with the body and footer. */
.topbar {
  padding: 0;
  border-bottom: 1px solid var(--color-hairline);
  background: var(--bar-translucent);
  backdrop-filter: blur(8px);
}
.topbar-inner {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px var(--page-px);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-ink);
  text-decoration: none;
}
.brand img { display: block; }
.brand-name { font-weight: 700; font-size: 1.2rem; letter-spacing: -0.02em; }
.topbar-actions { display: inline-flex; align-items: center; gap: 10px; }
.theme-toggle {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  cursor: pointer;
  transition: color 150ms ease, background 150ms ease;
}
.theme-toggle:hover { color: var(--color-ink); background: var(--color-section); }
.theme-toggle .icon-moon { display: none; }
[data-theme='dark'] .theme-toggle .icon-sun { display: none; }
[data-theme='dark'] .theme-toggle .icon-moon { display: block; }

/* ── Stage: everything visible on arrival ───────────────────────── */
.stage {
  flex: 1;
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--page-px);
  display: grid;
  grid-template-columns: minmax(320px, 5fr) minmax(0, 7fr);
  grid-template-areas:
    "intro projects"
    "caps  caps";
  align-items: center;
  /* pack the rows and center the whole block vertically, so no dead band
     opens between the cards and the capability strip on tall screens */
  align-content: center;
  column-gap: clamp(28px, 4vw, 64px);
  row-gap: clamp(22px, 4.5vh, 56px);
  padding-block: clamp(24px, 4vh, 56px);
}

.intro { grid-area: intro; }
.intro h1 {
  font-size: clamp(2rem, 3.1vw, 4.9rem);
  font-weight: 700;
}
.grad {
  background: linear-gradient(90deg, var(--color-primary-deep), var(--color-primary), var(--color-primary-light), var(--color-primary-deep));
  background-size: 280% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: grad-pan 7s ease-in-out infinite;
}
@keyframes grad-pan {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.intro .lede {
  margin-top: 16px;
  font-size: clamp(0.95rem, 1.1vw, 1.5rem);
  color: var(--color-muted);
  max-width: 46ch;
}
.intro-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

/* ── Project cards ──────────────────────────────────────────────── */
.projects {
  grid-area: projects;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.6vw, 20px);
}
.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--color-card);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  padding: clamp(18px, 2.2vw, 40px);
  overflow: hidden;
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.card h2 { font-size: clamp(1.02rem, 1.25vw, 1.75rem); font-weight: 600; }
.card p { font-size: clamp(0.84rem, 0.95vw, 1.3rem); color: var(--color-muted); }

.state-chip {
  font-family: var(--font-mono);
  font-size: clamp(0.65rem, 0.55vw, 0.85rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  padding: 0.32rem 0.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid;
}
.state-chip--live {
  color: var(--color-success);
  border-color: color-mix(in srgb, var(--color-success) 38%, transparent);
  background: color-mix(in srgb, var(--color-success) 8%, transparent);
}
.state-chip--read {
  color: var(--color-muted);
  border-color: var(--color-hairline-strong);
  background: var(--color-section);
}

.roles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

/* ── In-card loop animations (one per card, very subtle) ────────── */
.mini { display: flex; }

/* Company Project: structuring in action — three requirement rows where
   the middle one indents under its parent and comes back (the
   indent / outdent action from the walkthrough) */
.tree-mini {
  flex-direction: column;
  gap: 6px;
}
.tree-row {
  display: flex;
  align-items: center;
  gap: 7px;
}
.tree-uid {
  width: clamp(9px, 0.7vw, 13px);
  height: clamp(9px, 0.7vw, 13px);
  border-radius: 3px;
  background: color-mix(in srgb, var(--color-primary) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 38%, transparent);
}
.tree-bar {
  width: var(--w, 50%);
  height: clamp(7px, 0.55vw, 11px);
  border-radius: 2px;
  background: var(--color-section);
  border: 1px solid var(--color-hairline);
}
.tree-row--moving {
  animation: indent 6.5s var(--ease-decel) infinite;
}
.tree-row--moving .tree-uid {
  background: color-mix(in srgb, var(--color-success) 26%, transparent);
  border-color: color-mix(in srgb, var(--color-success) 42%, transparent);
}
@keyframes indent {
  0%, 14%  { transform: translateX(0); }
  24%, 66% { transform: translateX(clamp(16px, 1.3vw, 26px)); }
  76%, 100% { transform: translateX(0); }
}

/* VAS: a miniature matrix row — one cell pulses amber (live suspect) */
.matrix-mini {
  gap: 6px;
  align-items: center;
}
.dot {
  width: clamp(11px, 0.85vw, 16px);
  height: clamp(11px, 0.85vw, 16px);
  border-radius: 3px;
}
.dot--ok  { background: color-mix(in srgb, var(--color-success) 55%, transparent); }
.dot--off { background: var(--color-hairline); }
.dot--suspect {
  background: var(--color-amber);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-amber) 35%, transparent); }
  50% { opacity: 0.65; box-shadow: 0 0 0 5px rgba(245, 158, 11, 0); }
}

/* ── Capability strip ───────────────────────────────────────────── */
.caps {
  grid-area: caps;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(12px, 1.6vw, 18px);
}
.cap {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: clamp(0.82rem, 0.95vw, 1.3rem);
  font-weight: 600;
  color: var(--color-ink);
  background: var(--color-card);
  border: 1px solid var(--color-hairline);
  border-radius: 999px;
  padding: clamp(8px, 0.7vw, 13px) clamp(16px, 1.3vw, 26px) clamp(8px, 0.7vw, 13px) clamp(10px, 0.9vw, 16px);
  transition: border-color 150ms ease;
}
.cap:hover { border-color: var(--cap-hue, var(--color-primary-light)); }
.cap-num {
  font-family: var(--font-mono);
  font-size: clamp(0.65rem, 0.55vw, 0.85rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--cap-hue, var(--color-primary));
  background: color-mix(in srgb, var(--cap-hue, var(--color-primary)) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--cap-hue, var(--color-primary)) 26%, transparent);
  border-radius: 999px;
  padding: 4px 7px;
  line-height: 1;
}
/* hues from the app's attr-badge palette (700 stops) */
.cap--emerald { --cap-hue: #047857; }
.cap--sky     { --cap-hue: #0369A1; }
.cap--amber   { --cap-hue: #B45309; }
.cap--violet  { --cap-hue: #6D28D9; }
.cap--blue    { --cap-hue: #1D4ED8; }
[data-theme='dark'] .cap--emerald { --cap-hue: #34D399; }
[data-theme='dark'] .cap--sky     { --cap-hue: #38BDF8; }
[data-theme='dark'] .cap--amber   { --cap-hue: #FBBF24; }
[data-theme='dark'] .cap--violet  { --cap-hue: #A78BFA; }
[data-theme='dark'] .cap--blue    { --cap-hue: #60A5FA; }
/* one chip at a time gently lights up, cycling across the strip */
.cap {
  animation: cap-glow 12.5s ease-in-out infinite;
  animation-delay: calc(2.2s + var(--g, 0) * 2.5s);
}
@keyframes cap-glow {
  0%, 7%, 100% { border-color: var(--color-hairline); box-shadow: none; }
  3.5% {
    border-color: var(--cap-hue, var(--color-primary-light));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cap-hue, var(--color-primary)) 10%, transparent);
  }
}

/* ── Footer ─────────────────────────────────────────────────────── */
/* Bottom strip of the showcase footer, minus the version chip. Full-width
   bar with content centered to the same 1200px column as topbar/body. */
.footer {
  padding: 0;
  border-top: 1px solid var(--color-hairline);
  font-size: 0.8rem;
  color: var(--color-faint);
  background: var(--bar-translucent);
}
.footer-inner {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding: 14px var(--page-px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.footer a {
  color: var(--color-muted);
  font-weight: 500;
  text-decoration: none;
  transition: color 150ms ease;
}
.footer a:hover { color: var(--color-primary); }
.footer-chip {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  background: var(--color-card);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  white-space: nowrap;
}

/* ── Entrance: staggered fade + 8px lift (showcase .reveal) ─────── */
.reveal {
  opacity: 0;
  transform: translateY(8px);
  animation: reveal 520ms var(--ease-decel) forwards;
  animation-delay: calc(var(--d, 0) * 70ms);
}
@keyframes reveal {
  to { opacity: 1; transform: none; }
}

/* ── Small screens: stack (scroll is expected here) ─────────────── */
@media (max-width: 920px) {
  .stage {
    grid-template-columns: 1fr;
    grid-template-areas: "intro" "projects" "caps";
    align-items: start;
    text-align: left;
  }
  .projects { grid-template-columns: 1fr; }
}

/* ── Topbar back link + demo-guide gate ─────────────────────────── */
/* Lightweight text link (not a button): muted, arrow, hover → primary. */
.topbar-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 4px;
  background: transparent;
  border: none;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-muted);
  text-decoration: none;
  cursor: pointer;
  transition: color 150ms ease;
}
.topbar-back:hover { color: var(--color-primary); }
.topbar-back svg { transition: transform 200ms var(--ease-decel); }
.topbar-back:hover svg { transform: translateX(-3px); }

/* Modal overlay: dim scrim + centered card. The scrim is a fixed dark wash
   in both themes so it reads as "behind the modal" on light and dark. */
.guide-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 40px);
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(3px);
  overflow-y: auto;
  animation: guide-fade 160ms var(--ease-decel);
}
[data-theme='dark'] .guide-overlay { background: rgba(2, 6, 23, 0.66); }
.guide-modal {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(34rem, 100%);
  max-height: calc(100dvh - clamp(32px, 8vw, 80px));
  /* Clipping frame like the app's .mat-mdc-dialog-surface: overflow hidden +
     the 6px radius round-clip the contents to the corners. The 2px primary
     accent is a ::before bar, NOT a border: a real border-top bends down the
     rounded corners (a blue "hook" curling along the radius), while the bar is
     clipped straight by the radius. No 1px border/ring either, so nothing light
     shows above it; depth comes from the elevation shadow alone, like the app's
     preview-dialog. */
  overflow: hidden;
  background: var(--color-card);
  border-radius: var(--radius-md);
  box-shadow: 0 24px 60px -20px rgba(15, 23, 42, 0.5);
  animation: guide-pop 240ms var(--ease-decel);
}
/* Signature 2px primary accent pinned to the very top edge. The modal has no
   border, so the bar sits at the absolute top (nothing above it), and
   overflow:hidden + the radius clip its ends to the rounded corners — it stays
   a straight line instead of curling down the sides like a border would. */
.guide-modal::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--color-primary);
  z-index: 3;
  pointer-events: none;
}
/* Form and success are the two swappable screens; each fills the frame as a
   flex column so its body scrolls while the header + footer bands stay pinned —
   the same header / body / footer-band shell as the app's preview-dialog. */
.guide-form,
.guide-success {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
/* Scrolling middle band: fields + consent. The header and footer bands sit
   outside it, so only this region moves when the form outgrows the viewport. */
.guide-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: clamp(18px, 2.2vw, 26px) clamp(20px, 2.2vw, 32px);
}
@keyframes guide-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes guide-pop {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
.guide-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4; /* above the accent bar + scroll body */
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  cursor: pointer;
  transition: color 150ms ease, background 150ms ease;
}
.guide-close:hover { color: var(--color-ink); background: var(--color-section); }
/* Header band in the Requiro dialog language: a mono '// ' eyebrow title +
   subtitle on its own non-scrolling band, closed off by a hairline — exactly
   like the preview-dialog .dialog-header. */
.guide-header {
  flex-shrink: 0;
  /* generous right pad clears the absolutely-positioned close button */
  padding: clamp(16px, 2vw, 20px) 52px 14px clamp(20px, 2.2vw, 32px);
  border-bottom: 1px solid var(--color-hairline-strong);
}
.guide-header .eyebrow { margin: 0; }
.guide-form-lede {
  margin-top: 6px;
  font-size: clamp(0.82rem, 0.85vw, 1rem);
  color: var(--color-muted);
}
.guide-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
}
.guide-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.guide-field--full { grid-column: 1 / -1; }
.guide-field > span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}
/* Required-field mark — red bold asterisk, matching the Requiro app convention. */
.guide-req { font-style: normal; font-weight: 700; color: #DC2626; margin-left: 2px; }
[data-theme='dark'] .guide-req { color: #F87171; }
.guide-field input,
.guide-field textarea {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  color: var(--color-ink);
  background: var(--color-page);
  border: 1px solid var(--color-hairline-strong);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  width: 100%;
  transition: border-color 150ms ease;
}
.guide-field input:hover,
.guide-field textarea:hover { border-color: var(--color-faint); }
.guide-field textarea { resize: vertical; min-height: 44px; }

/* Honeypot — kept off-screen and out of the tab order */
.guide-hp {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* GDPR privacy notice (informativa) shown by the submit button. No consent
   checkbox: the lawful basis is pre-contractual / legitimate interest. */
.guide-consent {
  margin-top: 14px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--color-muted);
}
.guide-consent a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.guide-consent a:hover { color: var(--color-primary-hover); }

/* Footer band: a slate strip set off by a hairline with the action pinned to
   the right — mirrors preview-dialog .dialog-footer, where the SAVE .RTF button
   lives. The error sits left (margin-right:auto) and pushes the button right. */
.guide-foot {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding: 14px clamp(20px, 2.2vw, 32px);
  border-top: 1px solid var(--color-hairline-strong);
  background: var(--color-section);
}
.guide-error { font-size: 0.82rem; color: #DC2626; margin: 0 auto 0 0; }
[data-theme='dark'] .guide-error { color: #F87171; }

/* Primary action styled like preview-dialog's .btn-primary (the SAVE .RTF
   button): mono, uppercase, compact, icon + label, solid primary fill. */
.guide-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: clamp(0.7rem, 0.62vw, 0.84rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 9px 16px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: background 150ms ease, border-color 150ms ease, opacity 150ms ease;
}
.guide-action:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.guide-action:focus { outline: none; }
.guide-action:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.guide-action:disabled { opacity: 0.55; cursor: default; }
.guide-action svg { width: 16px; height: 16px; flex-shrink: 0; }

/* display / flex-direction / flex / min-height come from the shared
   .guide-form, .guide-success rule above; here we just center the content. */
.guide-success {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 18px;
  padding: clamp(28px, 4vw, 48px) clamp(20px, 2.2vw, 32px) clamp(24px, 3vw, 40px);
}
/* Programmatically focused (tabindex=-1) to move focus into the panel on
   success — it is not an interactive control, so it shows no ring. */
.guide-success:focus { outline: none; }
.guide-success-badge {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 12%, transparent);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--color-success) 6%, transparent);
  animation: guide-check-pop 380ms var(--ease-decel) both;
}
@keyframes guide-check-pop {
  0% { opacity: 0; transform: scale(0.6); }
  60% { transform: scale(1.07); }
  100% { opacity: 1; transform: scale(1); }
}
.guide-success-title {
  font-size: clamp(1.1rem, 1.3vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
.guide-success-sub {
  margin-top: 6px;
  max-width: 32ch;
  font-size: clamp(0.85rem, 0.85vw, 1rem);
  line-height: 1.55;
  color: var(--color-muted);
}

@media (max-width: 720px) {
  .guide-grid { grid-template-columns: 1fr; }
}

/* ── Reduced motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; opacity: 1; transform: none; }
  .dotgrid, .grad, .cap { animation: none; }
  .dot--suspect { animation: none; }
  .tree-row--moving { animation: none; }
  .card--live::before, .card--read::before { animation: none; transform: none; }
  .btn svg { transition: none; }
  .guide-overlay, .guide-modal { animation: none; }
  .guide-success-badge { animation: none; }
}