/* concierge.simple-forge.com — hand-written, no framework.
 *
 * Two rules run through the whole file and are worth stating once:
 *
 *  1. COLOUR IS SEMANTIC. --ice means "a human did this", --amber means "an
 *     agent did this". Never use either decoratively; the page's clearest claim
 *     (a person is always in the loop) is carried by that consistency, and one
 *     amber heading would quietly destroy it.
 *
 *  2. ONE MOTION VOCABULARY: arrival, handoff, waiting. Only `waiting` loops.
 *     Everything animates transform/opacity only — no animated shadows, filters
 *     or widths — and everything collapses to its end state under
 *     prefers-reduced-motion, at the bottom of this file.
 */

/* ── tokens ──────────────────────────────────────────────────────────────── */
:root {
  --ground:    #0C0A09;   /* warm near-black: the lamp is on, this is not a cyber dashboard */
  --ground-2:  #100D0B;
  --surface:   #16120F;
  --surface-2: #1C1714;
  --line:      #2A231E;
  --line-soft: #201A16;

  --ink:   #EFE9E3;
  --ink-2: #B3A79C;
  --ink-3: #7C7067;

  --amber:     #F0A93B;   /* an AGENT acted */
  --amber-dim: #6E4E1C;
  --ice:       #8FD3E8;   /* a HUMAN acted */
  --ice-dim:   #34535E;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur:  .52s;

  --topbar-h: 64px;
  --wrap: 1180px;
  --gut:  clamp(20px, 5vw, 56px);

  --font-display: 'Bricolage Grotesque', 'Instrument Sans', system-ui, sans-serif;
  --font-body:    'Instrument Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'Martian Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

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

/* hidden must win over any component rule that sets display. Without this
   .field__err{display:block} outranked [hidden] and the email error was
   shown on an untouched field. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Grain and vignette. Both are one-time rasterisations on fixed layers, so they
   cost nothing per frame — and they are what stops the page reading as another
   flat dark SaaS template. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .038;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 85% at 50% 0%, transparent 40%, rgba(0,0,0,calc(.55 - .34 * var(--dawn, 0))) 100%);
}
.topbar, main, .foot { position: relative; z-index: 2; }

a { color: inherit; }
img, svg { max-width: 100%; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.04em; }

::selection { background: var(--amber); color: #1A1206; }

:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; }

/* ── type ────────────────────────────────────────────────────────────────── */
.kicker {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 18px;
}
.h2 {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.06; letter-spacing: -.025em; font-weight: 600;
  margin: 0 0 20px; max-width: 19ch;
}
.lede { font-size: clamp(17px, 1.5vw, 20px); color: var(--ink-2); max-width: 62ch; margin: 0 0 40px; }
.note { color: var(--ink-3); font-size: 15px; max-width: 60ch; margin: 34px 0 0; }

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 24px; border-radius: 999px; border: 1px solid transparent;
  font: 500 15px/1 var(--font-body); text-decoration: none; cursor: pointer;
  transition: transform .22s var(--ease), background-color .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
}
.btn--primary { background: var(--amber); color: #180F03; font-weight: 600; }
.btn--primary:hover { transform: translateY(-2px); background: #FFBC4F; }
.btn--ghost { border-color: var(--line); color: var(--ink-2); }
.btn--ghost:hover { transform: translateY(-2px); border-color: var(--ink-3); color: var(--ink); }
.btn--wide { width: 100%; padding-block: 16px; }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* ── topbar ──────────────────────────────────────────────────────────────── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; gap: 28px;
  padding: 16px var(--gut);
  transition: background-color .3s var(--ease), border-color .3s var(--ease), padding .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.topbar.is-stuck {
  background: rgba(12, 10, 9, .82); backdrop-filter: blur(14px);
  border-bottom-color: var(--line-soft); padding-block: 11px;
}
.topbar__mark { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.topbar__lamp {
  width: 9px; height: 9px; border-radius: 50%; background: var(--amber);
  box-shadow: 0 0 14px 2px rgba(240,169,59,.55);
  animation: breathe 4.2s ease-in-out infinite;      /* the one permitted loop: the shift is on */
}
.topbar__name { font-family: var(--font-display); font-size: 16px; letter-spacing: -.01em; font-weight: 400; }
.topbar__name b { font-weight: 700; }
.topbar__nav { display: flex; gap: 26px; font-size: 14px; }
.topbar__nav a { color: var(--ink-3); text-decoration: none; transition: color .2s var(--ease); }
.topbar__nav a:hover { color: var(--ink); }
.topbar__end { display: flex; align-items: center; gap: 18px; }
.topbar__clock { font-size: 12px; color: var(--ink-3); }
.topbar__signin {
  font-size: 14px; text-decoration: none; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 16px;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.topbar__signin:hover { border-color: var(--ice-dim); color: var(--ice); }

/* ── 1. hero ─────────────────────────────────────────────────────────────── */
.hero { padding: clamp(120px, 17vh, 190px) 0 clamp(60px, 9vh, 110px); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 76px); align-items: center; }

.hero__h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 6.6vw, 78px);
  line-height: .98; letter-spacing: -.035em; font-weight: 700;
  margin: 0 0 22px; max-width: 13ch;
}
.hero__sub { font-size: clamp(16px, 1.4vw, 19px); color: var(--ink-2); max-width: 46ch; margin: 0 0 32px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 40px; }

.hero__clock { display: flex; align-items: baseline; gap: 14px; margin: 0; }
.hero__clock-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3);
}
.hero__clock-value { font-size: clamp(22px, 2.4vw, 30px); color: var(--ink); font-weight: 300; }

/* ── the console (hero + loop stage share it) ────────────────────────────── */
.console {
  position: relative; border: 1px solid var(--line); border-radius: 16px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: 0 40px 90px -50px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.03);
  overflow: hidden;
}
.console__head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--line-soft);
  background: rgba(255,255,255,.012);
}
.console__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ice); flex: none; }
.console__title { font-size: 13px; font-weight: 600; letter-spacing: -.01em; }
.console__sub { font-size: 11px; color: var(--ink-3); font-family: var(--font-mono); letter-spacing: -.02em; }
.console__replay {
  margin-left: auto; background: none; border: 1px solid var(--line); color: var(--ink-3);
  border-radius: 999px; padding: 5px 13px; font: 500 11px/1 var(--font-body); cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.console__replay:hover { color: var(--ink); border-color: var(--ink-3); }

.console__list { position: relative; list-style: none; margin: 0; padding: 18px 18px 20px 0; }

/* the rail: one gradient string, written by JS, describing the whole
   human/agent history — this IS the handoff gesture */
.console__body { position: relative; }
.rail { position: absolute; left: 15px; top: 24px; bottom: 24px; width: 1px; background: var(--line); }
/* clip-path, deliberately NOT scaleY: the fill carries a gradient describing the
   whole human/agent history, and scaling would squash that gradient instead of
   revealing it, so the colours would land at the wrong events. clip-path is
   composited just the same. */
.rail__fill {
  position: absolute; inset: 0;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .55s var(--ease);
  background: var(--ice);
}

.ev {
  position: relative;
  display: grid; grid-template-columns: 30px 66px auto minmax(0, 1fr);
  align-items: baseline; column-gap: 12px;
  padding: 7px 0 7px 0;
  opacity: 0; transform: translateY(7px) scale(.987);
  transition: opacity .34s var(--ease), transform .34s var(--ease);
}
.ev.is-in { opacity: 1; transform: none; }
.ev__node {
  grid-column: 1; justify-self: center; align-self: center;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ground); border: 1px solid var(--line);
  transition: background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.ev.is-in[data-actor="human"] .ev__node { background: var(--ice); border-color: var(--ice); box-shadow: 0 0 10px rgba(143,211,232,.4); }
.ev.is-in[data-actor="agent"] .ev__node { background: var(--amber); border-color: var(--amber); box-shadow: 0 0 10px rgba(240,169,59,.45); }

.ev__time { font-size: 11px; color: var(--ink-3); }
.ev__actor {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .13em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 4px; white-space: nowrap;
}
.ev[data-actor="human"] .ev__actor { color: var(--ice); background: rgba(143,211,232,.09); }
.ev[data-actor="agent"] .ev__actor { color: var(--amber); background: rgba(240,169,59,.09); }
.ev__text { font-size: 14px; color: var(--ink-2); }

/* arrival: the edge flash, decaying. Same gesture everywhere something
   "just happened in the system". */
.ev::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px;
  border-radius: 2px; background: currentColor; opacity: 0;
}
.ev[data-actor="human"]::before { color: var(--ice); }
.ev[data-actor="agent"]::before { color: var(--amber); }
.ev.is-in::before { animation: flash .42s var(--ease) forwards; }

@keyframes flash { from { opacity: .85; } to { opacity: 0; } }
@keyframes breathe { 0%, 100% { opacity: .55; transform: scale(.92); } 50% { opacity: 1; transform: scale(1); } }

/* ── 2. the gap ──────────────────────────────────────────────────────────── */
.gap { padding: clamp(80px, 12vh, 140px) 0; }
.axis { margin: 56px 0 0; }
.axis__caption {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 46px;
}
.axis__track { position: relative; height: 2px; background: var(--line); border-radius: 2px; margin: 0 0 172px; }
.axis__heat {
  position: absolute; inset: 0; border-radius: 2px; transform-origin: left;
  transform: scaleX(0); transition: transform 1.5s var(--ease);
  background: linear-gradient(90deg, var(--amber) 0%, #8A5F26 26%, #3A302A 62%, var(--line) 100%);
}
.axis[data-in] .axis__heat { transform: scaleX(1); }

.axis__mark { position: absolute; left: var(--at); top: 0; width: 200px; transform: translateX(-50%); text-align: center; }
.axis__mark::before {
  content: ""; display: block; width: 11px; height: 11px; border-radius: 50%;
  margin: -5px auto 0; background: var(--ground); border: 2px solid var(--line);
}
.axis__mark--a::before { border-color: var(--ice); }
.axis__mark--c::before { border-color: var(--amber); }
.axis__mark--b::before { border-color: var(--ink-3); }
.axis__time { display: block; font-size: 15px; margin-top: 14px; }
.axis__label { display: block; font-size: 12.5px; color: var(--ink-3); max-width: 22ch; margin: 4px auto 0; }
/* the middle mark drops to a second row on a connector, so its label cannot
   share a baseline with the first one */
.axis__mark--c .axis__time { margin-top: 74px; }
.axis__mark--c::after { content: ""; position: absolute; left: 50%; top: 8px; width: 1px; height: 62px; background: var(--line); }
.axis__mark--a { text-align: left; transform: none; }
.axis__mark--a .axis__label, .axis__mark--a .axis__time { margin-left: 0; }
.axis__mark--a::before { margin-left: 0; }
.axis__mark--b { text-align: right; transform: translateX(-100%); }
.axis__mark--b::before { margin-right: 0; margin-left: auto; }

.axis__delta { display: flex; align-items: baseline; gap: 12px; margin: 0; }
.axis__delta-value { font-size: clamp(46px, 8vw, 92px); line-height: 1; color: var(--amber); font-weight: 300; }
.axis__delta-unit { font-size: 15px; color: var(--ink-3); font-family: var(--font-mono); letter-spacing: .04em; }

/* ── 3. the loop (sticky) ────────────────────────────────────────────────── */
.loop { padding: clamp(40px, 6vh, 74px) 0 0; }
.loop__intro { margin-bottom: 20px; }
.loop__scroll { position: relative; height: 300vh; }
.loop__sticky { position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h)); display: flex; align-items: center; }
.loop__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: clamp(32px, 5vw, 72px); align-items: center; width: 100%; }

.loop__steps { list-style: none; margin: 0; padding: 0; }
.lstep {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px;
  padding: 15px 0 15px 16px; position: relative;
  opacity: .3; transition: opacity .45s var(--ease), transform .45s var(--ease);
  transform: translateX(-4px);
}
.lstep.is-active { opacity: 1; transform: none; }
.lstep::before {
  content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 2px;
  border-radius: 2px; background: var(--line); transform: scaleY(0); transform-origin: top;
  transition: transform .45s var(--ease), background-color .45s var(--ease);
}
.lstep.is-active::before { transform: scaleY(1); }
.lstep.is-active[data-actor="human"]::before { background: var(--ice); }
.lstep.is-active[data-actor="agent"]::before { background: var(--amber); }
.lstep__num { font-size: 12px; color: var(--ink-3); padding-top: 5px; }
.lstep.is-active[data-actor="human"] .lstep__num { color: var(--ice); }
.lstep.is-active[data-actor="agent"] .lstep__num { color: var(--amber); }
.lstep__title { font-family: var(--font-display); font-size: clamp(20px, 2.1vw, 27px); line-height: 1.14; letter-spacing: -.02em; font-weight: 600; margin: 0 0 8px; }
.lstep__text { margin: 0 0 10px; color: var(--ink-2); font-size: 15.5px; max-width: 46ch; }
.lstep__note {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
}
.console--stage .console__list { padding-block: 30px; }
/* future steps stay legible as ghosts, so the card is a plan being filled
   in rather than an empty box waiting for content */
.console--stage .ev { opacity: .17; transform: none; }
.console--stage .ev.is-in { opacity: 1; }
.console--stage .ev { grid-template-columns: 30px auto minmax(0, 1fr); padding-block: 17px; }
.console--stage .ev__text { font-size: 15.5px; }

/* ── 4. choose ───────────────────────────────────────────────────────────── */
.choose { padding: clamp(60px, 8vh, 104px) 0 clamp(48px, 6vh, 80px); }
.choose__groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(28px, 4vw, 56px); }
.cgroup { border: 0; margin: 0; padding: 0; min-width: 0; }
.cgroup__legend {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); padding: 0; margin-bottom: 18px;
}
.cgroup__opts { display: grid; gap: 10px; }
.copt {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 14px; align-items: start; text-align: left;
  padding: 17px 20px; border-radius: 13px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-2);
  font: 400 15px/1.45 var(--font-body);
  transition: transform .24s var(--ease), border-color .24s var(--ease), background-color .24s var(--ease), color .24s var(--ease);
}
.copt:hover { transform: translateY(-2px); border-color: var(--ink-3); color: var(--ink); }
.copt__tick {
  width: 18px; height: 18px; border-radius: 50%; margin-top: 2px;
  border: 1.5px solid var(--line); position: relative;
  transition: border-color .24s var(--ease);
}
.copt__tick::after {
  content: ""; position: absolute; inset: 3.5px; border-radius: 50%;
  background: var(--ice); transform: scale(0); transition: transform .26s var(--ease);
}
.copt[aria-checked="true"] { border-color: var(--ice-dim); background: rgba(143,211,232,.055); color: var(--ink); }
.copt[aria-checked="true"] .copt__tick { border-color: var(--ice); }
.copt[aria-checked="true"] .copt__tick::after { transform: scale(1); }

/* ── 5/6. your card, the form, the done state ────────────────────────────── */
.start { padding: clamp(56px, 7vh, 92px) 0 clamp(56px, 7vh, 90px); }
.start__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: clamp(36px, 5vw, 76px); align-items: start; }

.mycard {
  margin: 8px 0 0; border: 1px solid var(--line); border-radius: 16px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  padding: 6px 22px; box-shadow: 0 40px 90px -55px rgba(0,0,0,.95);
}
.mycard__row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--line-soft); }
.mycard__row:last-child { border-bottom: 0; }
.mycard dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding-top: 4px; }
.mycard dd { margin: 0; font-size: 15px; color: var(--ink); }
.mycard dd.is-empty { color: var(--ink-3); font-style: italic; }
.mycard__trail { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.mycard__trail li {
  font-size: 12.5px; color: var(--ice); background: rgba(143,211,232,.07);
  border: 1px solid var(--ice-dim); border-radius: 999px; padding: 3px 11px;
  opacity: 0; transform: translateY(5px) scale(.985);
  animation: arrive .38s var(--ease) forwards;
}
.mycard__trail li b { font-family: var(--font-mono); font-weight: 300; font-size: 11px; opacity: .75; letter-spacing: -.04em; }
@keyframes arrive { to { opacity: 1; transform: none; } }

.lead { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); padding: clamp(24px, 3vw, 34px); }
.lead__h3 { font-family: var(--font-display); font-size: 23px; letter-spacing: -.02em; font-weight: 600; margin: 0 0 22px; }
.field { display: block; margin-bottom: 16px; }
.field__label { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 7px; }
.field__label i { font-style: normal; color: var(--ink-3); font-size: 11px; }
.field__input {
  width: 100%; padding: 13px 15px; border-radius: 11px;
  background: var(--ground-2); border: 1px solid var(--line); color: var(--ink);
  font: 400 16px/1.4 var(--font-body);
  transition: border-color .22s var(--ease), background-color .22s var(--ease);
}
.field__input:focus { outline: none; border-color: var(--amber); background: var(--ground); }
.field__input::placeholder { color: var(--ink-3); }
.field__hint { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 7px; }
.field__err { display: block; font-size: 12.5px; color: #E8896B; margin-top: 7px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lead__fine { font-size: 12.5px; color: var(--ink-3); margin: 16px 0 0; }
.lead__err { font-size: 13px; color: #E8896B; margin: 12px 0 0; }
.cf-turnstile { margin: 6px 0 16px; }

.done__card {
  position: relative; border: 1px solid var(--ice-dim); border-radius: 18px;
  background: linear-gradient(180deg, rgba(143,211,232,.05), var(--surface));
  padding: clamp(24px, 3vw, 34px);
  opacity: 0; transform: translateY(8px) scale(.99);
}
.done:not([hidden]) .done__card { animation: arrive .5s var(--ease) forwards; }
.done__pulse {
  position: absolute; top: 26px; right: 26px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--ice); animation: breathe 3.4s ease-in-out infinite;   /* waiting */
}
.done__h3 { font-family: var(--font-display); font-size: 24px; letter-spacing: -.02em; font-weight: 600; margin: 0 0 14px; }
.done__status { margin: 0 0 14px; }
.done__chip {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ice); border: 1px solid var(--ice-dim); border-radius: 999px; padding: 5px 12px;
}
.done__body { color: var(--ink-2); font-size: 15px; margin: 0; }
.done__dev { margin: 16px 0 0; font-size: 12.5px; color: var(--amber); font-family: var(--font-mono); letter-spacing: -.02em; }

/* ── footer ──────────────────────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--line-soft); padding: 44px 0; }
.foot__inner { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: baseline; }
.foot__tagline { margin: 0; color: var(--ink-3); font-size: 14px; margin-right: auto; }
.foot__links { display: flex; flex-wrap: wrap; gap: 24px; font-size: 14px; }
.foot__links a { color: var(--ink-2); text-decoration: none; transition: color .2s var(--ease); }
.foot__links a:hover { color: var(--amber); }

/* ── scroll reveal (shared easing + stagger) ─────────────────────────────── */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); transition-delay: var(--d, 0ms); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .hero__grid, .loop__grid, .start__grid { grid-template-columns: minmax(0, 1fr); }
  .loop__scroll { height: auto; }
  .loop__sticky { position: static; height: auto; padding: 20px 0 60px; }
  .lstep { opacity: 1; transform: none; }
  .lstep::before { transform: scaleY(1); }
  .lstep[data-actor="human"]::before { background: var(--ice); }
  .lstep[data-actor="agent"]::before { background: var(--amber); }
  .topbar__nav { display: none; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .field-row { grid-template-columns: 1fr; }
  .ev { grid-template-columns: 26px 60px minmax(0, 1fr); row-gap: 2px; }
  .ev__actor { grid-column: 3; justify-self: start; }
  .ev__text { grid-column: 2 / -1; }
  .rail { left: 13px; }
  .axis__track { height: auto; width: 2px; min-height: 560px; background: var(--line); margin: 0 0 40px 8px; }
  .axis__heat { transform-origin: top; transform: scaleY(0); background: linear-gradient(180deg, var(--amber) 0%, #8A5F26 26%, #3A302A 62%, var(--line) 100%); }
  .axis[data-in] .axis__heat { transform: scaleY(1); }
  .axis__mark { left: 0; top: var(--at); transform: translateY(-50%) !important; text-align: left !important; display: grid; grid-template-columns: 11px auto; gap: 0 14px; align-items: center; width: 76vw; }
  .axis__mark--c .axis__time { margin-top: 0; }
  .axis__mark--c::after { display: none; }
  .axis__mark::before { margin: 0 !important; }
  .axis__time { margin-top: 0; grid-column: 2; }
  .axis__label { grid-column: 2; margin: 0; max-width: none; }
  .topbar__clock { display: none; }
  .ev__actor { font-size: 10px; }
}

/* ── reduced motion: every animation collapses to its end state ──────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .ev, [data-reveal], .mycard__trail li, .done__card { opacity: 1 !important; transform: none !important; }
  .lstep { opacity: 1 !important; transform: none !important; }
  .lstep::before, .axis__heat { transform: none !important; }
  .rail__fill { clip-path: none !important; }
  .loop__scroll { height: auto !important; }
  .loop__sticky { position: static !important; height: auto !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE SCENE
   Everything below is the page's visual argument rather than its layout: the
   night you scroll through, the lamp you carry, the sleeping city, and the card
   that reacts to being looked at. All of it is decorative, all of it is hidden
   from the accessibility tree, and all of it is switched off wholesale under
   prefers-reduced-motion at the end of this file.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The page-wide sky. --sky-a/--sky-b are written by JS from scroll position, so
   reading the page is literally a journey from deep night to first light. */
.nightsky {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(135% 68% at 50% 108%, rgba(255,176,74,calc(.42 * var(--dawn, 0))) 0%, transparent 66%),
    radial-gradient(90% 50% at 78% 6%, rgba(120,150,255,calc(.10 * var(--dawn, 0))) 0%, transparent 70%),
    linear-gradient(180deg, var(--sky-a, #0A0908) 0%, var(--sky-b, #0C0A09) 100%);
}

/* The cursor is a lamp. In a dark room the visitor is the light source — which
   is also, precisely, what the product says about the one human in the loop. */
.lamp {
  position: fixed; left: 0; top: 0; z-index: 1; pointer-events: none;
  width: 560px; height: 560px; margin: -280px 0 0 -280px; opacity: 0;
  background: radial-gradient(circle, rgba(240,169,59,.13) 0%, rgba(240,169,59,.045) 34%, transparent 68%);
  transition: opacity .6s var(--ease);
  will-change: transform;
}
.lamp.is-on { opacity: 1; }

/* ── hero as a full-viewport scene ───────────────────────────────────────── */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; padding: 118px 0 96px; }
.hero__grid { position: relative; z-index: 2; }

.scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.scene__ghost {
  position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%);
  font-size: clamp(230px, 42vw, 680px); line-height: .82; font-weight: 300;
  color: #F6E3C4; opacity: calc(.13 - .085 * var(--dawn, 0)); white-space: nowrap; letter-spacing: -.08em;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.scene__glow {
  position: absolute; left: 50%; bottom: -12%; width: 130vw; height: 62vh; transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 100%, rgba(240,169,59,.11), transparent 70%);
}

/* The sleeping city. Built in JS from a fixed seed so it never reshuffles
   between builds. Almost every window is dark; a few burn amber; and one of
   them wakes up at the exact moment the sequence reaches the human approval. */
.skyline { position: absolute; left: 0; right: 0; bottom: 0; height: min(42vh, 375px); --night: calc(1 - .82 * var(--dawn, 0)); }
.skyline::before { content: ""; position: absolute; inset: -170px 0 auto 0; height: 330px; z-index: 4; pointer-events: none;
  background: linear-gradient(180deg, var(--sky-b, #0C0A09) 0%, var(--sky-b, #0C0A09) 42%, rgba(12,10,9,.72) 66%, transparent 100%); }
.plane { position: absolute; left: -2vw; right: -2vw; bottom: 0; display: flex; align-items: flex-end; gap: 4px; will-change: transform; }
.plane--back  { opacity: .40; filter: blur(.6px); z-index: 1; }
.plane--mid   { opacity: .72; z-index: 2; }
.plane--front { opacity: 1;   z-index: 3; }
.bld { position: relative; background: #060505; border-top: 1px solid #191411; border-radius: 3px 3px 0 0; display: grid; align-content: end; gap: 9px; padding: 12px 7px; }
.plane--front .bld { background: #030303; }
.win { height: 7px; border-radius: 1px; background: #141010; }
/* Windows live on their own clock. --wl (period, 110-300s) and --wd (offset)
   are set per window by the generator, so no two go out together and the city
   changes if you stay on the page — which is the whole point of a night that
   lasts as long as the visitor does.

   --night ties every light to the sunrise: as --dawn rises the windows fade,
   because a lit window at first light is a window nobody turned off. It is
   read inside the keyframes with calc(), so a scroll updates the animation in
   place rather than restarting it. */
.win.is-lit { background: #FFC978; box-shadow: 0 0 14px 1px rgba(240,169,59,.75); animation: windowlife var(--wl, 180s) ease-in-out var(--wd, 0s) infinite; }
.win.is-ice { background: var(--ice); box-shadow: 0 0 12px 1px rgba(143,211,232,.55); animation: windowlife var(--wl, 240s) ease-in-out var(--wd, 0s) infinite; opacity: .75; }

@keyframes windowlife {
  0%   { opacity: calc(.95 * var(--night, 1)); }
  34%  { opacity: calc(.90 * var(--night, 1)); }
  42%  { opacity: calc(.05 * var(--night, 1)); }   /* someone finally went to bed */
  58%  { opacity: calc(.05 * var(--night, 1)); }
  67%  { opacity: calc(.93 * var(--night, 1)); }   /* and someone else got up */
  100% { opacity: calc(.95 * var(--night, 1)); }
}
.win.is-wake { animation: wake 1.1s var(--ease) forwards; }
@keyframes wake { 0% { background: #141010; box-shadow: none; } 35% { background: #FFF0D2; box-shadow: 0 0 30px 3px rgba(255,201,120,1); } 100% { background: #FFC978; box-shadow: 0 0 16px 1px rgba(240,169,59,.9); opacity: .95; } }

/* ── the card reacts to being looked at ──────────────────────────────────── */
.tilt { position: relative; perspective: 1250px; }
.tilt .console { transform-style: preserve-3d; will-change: transform; }
.bloom {
  position: absolute; inset: -32% -22%; z-index: 0; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(240,169,59,.55), rgba(240,169,59,.12) 45%, transparent 72%);
  opacity: 0; transition: opacity 1.4s var(--ease);
}
.bloom.is-hot { opacity: 1; transition-duration: .12s; }
/* the card itself takes the light, not just the air behind it */
.console { transition: border-color .9s var(--ease), box-shadow .9s var(--ease); }
.console.is-hot { border-color: rgba(240,169,59,.55); box-shadow: 0 40px 90px -50px rgba(0,0,0,.95), 0 0 44px -6px rgba(240,169,59,.35), inset 0 1px 0 rgba(255,255,255,.06); transition-duration: .12s; }
/* and the row that just fired is briefly washed in its own colour */
.ev.is-fresh::after { content: ""; position: absolute; inset: 2px -10px 2px -6px; border-radius: 6px; z-index: -1; opacity: .16; animation: wash 1.1s var(--ease) forwards; }
.ev[data-actor="human"].is-fresh::after { background: var(--ice); }
.ev[data-actor="agent"].is-fresh::after { background: var(--amber); }
@keyframes wash { from { opacity: .20; } to { opacity: 0; } }
/* a specular sheen that tracks the pointer across the glass */
.console__sheen { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .4s var(--ease);
  background: radial-gradient(420px 420px at var(--mx, 50%) var(--my, 0%), rgba(255,236,204,.13), rgba(255,236,204,.03) 38%, transparent 66%); }
.tilt:hover .console__sheen { opacity: 1; }
.tilt .console { position: relative; z-index: 1; }

/* ── headings assemble out of a mask, word by word ───────────────────────── */
[data-split] .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .06em; }
[data-split] .w > span { display: inline-block; transform: translateY(108%); transition: transform .62s var(--ease); transition-delay: var(--wd, 0ms); }
[data-split].is-in .w > span { transform: none; }

/* ── sections arrive as a wipe, not a fade ───────────────────────────────── */
[data-wipe] { clip-path: inset(0 0 100% 0); transition: clip-path .95s var(--ease); }
[data-wipe].is-in { clip-path: inset(0 0 0 0); }

@media (max-width: 1000px) {
  .hero { min-height: 0; padding-top: 104px; }
  .scene__ghost { top: 15%; font-size: clamp(110px, 34vw, 230px); opacity: calc(.075 - .05 * var(--dawn, 0)); }
  .console__head { flex-wrap: wrap; }
  .console__sub { flex-basis: 100%; }
  .skyline { height: 190px; }
  .skyline::before { inset: -130px 0 auto 0; height: 240px; }
  .plane--back { display: none; }
  .hero__lede { padding-bottom: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .lamp { display: none !important; }
  .win.is-lit, .win.is-ice, .win.is-wake { animation: none !important; }
  [data-split] .w > span { transform: none !important; }
  [data-wipe] { clip-path: none !important; }
  .tilt .console { transform: none !important; }
  .bloom { opacity: .5 !important; }
}

/* The honeypot. Off-screen and untabbable rather than display:none, because a
   bot that skips hidden inputs still fills this one. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }