/* ── Brand tokens — the ONLY place colors are defined. Set --accent,
   --ink and --gold from the company's real site (hex or oklch); every
   other surface/tint derives from them. ── */
:root {
  --accent:       #7FB0DA;
  --ink:          #0B2150;
  --gold:         #1FB97D;
  --accent-lt:    color-mix(in oklch, var(--accent) 60%, white);
  --accent-ink:   color-mix(in oklch, var(--accent) 72%, black);
  --accent-ink-d: color-mix(in oklch, var(--accent) 62%, black);
  --accent-lo:    color-mix(in oklch, var(--accent) 14%, transparent);
  --deep:         color-mix(in oklch, var(--ink) 80%, black);
  --paper:        color-mix(in oklch, var(--ink) 2%, white);
  --tint:         color-mix(in oklch, var(--accent) 7%, white);
  --tint-2:       color-mix(in oklch, var(--accent) 24%, white);
  --card:         #ffffff;
  --text-mid:     color-mix(in oklch, var(--ink) 62%, white);
  --line:         color-mix(in oklch, var(--ink) 15%, transparent);
  --serif: 'Poppins', system-ui, sans-serif;
  --sans:  'Mulish', system-ui, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --ease:  cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body { width:300px; height:600px; overflow:hidden; background:var(--paper); }
body { font-family:var(--sans); color:var(--ink); -webkit-font-smoothing:antialiased; }
a { text-decoration:none; color:inherit; }
button { border:0; background:none; font:inherit; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }

#banner {
  position:relative;
  width:300px;
  height:600px;
  overflow:hidden;
  cursor:pointer;
  background:var(--paper);
}

#top-rule {
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  z-index:6;
  background:linear-gradient(90deg, var(--accent-ink), var(--gold));
}

/* ── Persistent top chrome ──────────────────────────────────────── */
#top-bar {
  position:absolute;
  top:3px; left:0; right:0;
  z-index:5;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  padding:13px 18px 10px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
#logo { display:flex; align-items:center; gap:7px; }
.mark { width:24px; height:24px; flex:none; }
#wordmark {
  font-family:var(--serif);
  font-weight:800;
  font-size:13px;
  letter-spacing:0.01em;
  color:var(--ink);
}
#wordmark i { font-style:normal; color:var(--accent-ink); }
#masthead {
  font-family:var(--mono);
  font-size:7.6px;
  font-weight:500;
  letter-spacing:0.1em;
  color:var(--text-mid);
}

/* ── Slide stack ────────────────────────────────────────────────── */
#slides { position:absolute; top:67px; left:0; right:0; bottom:139px; z-index:1; overflow:hidden; }

.slide {
  position:absolute; inset:0;
  opacity:0;
  z-index:1;
  pointer-events:none;
  transition:opacity 0.8s ease;
}
.slide.active { opacity:1; z-index:2; pointer-events:auto; }

.slide-copy {
  padding:16px 18px 0;
  transform:translateY(10px);
  transition:transform 0.8s var(--ease);
}
.slide.active .slide-copy { transform:translateY(0); }

.eyebrow {
  font-family:var(--mono);
  font-size:9.5px;
  font-weight:500;
  letter-spacing:0.13em;
  text-transform:uppercase;
  color:var(--accent-ink);
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:9px;
}
.eyebrow::before {
  content:'';
  width:6px; height:6px;
  border-radius:50%;
  background:var(--accent);
  flex:none;
}

.slide-copy h1 {
  font-family:var(--serif);
  font-weight:700;
  font-size:20px;
  line-height:1.18;
  letter-spacing:-0.01em;
  color:var(--ink);
}
.slide-copy h1 em { font-style:normal; color:var(--accent-ink); }

.lead {
  min-height:calc(3 * 1.44em);  /* three lines on every slide, so each Figure card starts at the same y */
  margin-top:8px;
  font-family:var(--sans);
  font-size:10.8px;
  line-height:1.44;
  color:var(--text-mid);
}

/* ── "Figure" schematic card, matching the site's plate component ─ */
.fig-card {
  margin-top:13px;
  border:1px solid var(--line);
  border-radius:2px;
  background:var(--card);
  overflow:hidden;
}
.fig-bar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  background:var(--ink);
  color:#fff;
  font-family:var(--mono);
  font-size:6.6px;
  font-weight:500;
  letter-spacing:0.12em;
  text-transform:uppercase;
}
.fig-bar span:last-child { color:var(--accent-lt); }
.fig-body { padding:9px 11px 5px; }
.fig-body svg { width:100%; height:auto; display:block; }

/* figure line-art */
.fig-node rect { fill:var(--ink); }
.fig-rail { fill:none; stroke:var(--text-mid); stroke-width:1.6; }
.fig-ghost { fill:none; stroke:var(--tint-2); stroke-width:2; }
.fig-mark { fill:none; stroke-width:10.5; stroke-linecap:round; }
.fig-mark.a { stroke:var(--accent); }
.fig-mark.b { stroke:var(--ink); }
.fig-gold { fill:var(--gold); }

.fig-mesh line { stroke:var(--accent-lt); stroke-width:1; opacity:0.7; }
.fig-dot circle { fill:var(--accent-ink); }
.fig-hub { fill:var(--gold); stroke:var(--ink); stroke-width:1.4; }

.fig-step rect { fill:var(--tint); stroke:var(--line); stroke-width:1; }
.fig-step.accent rect { fill:var(--accent-lo); stroke:var(--accent-ink); }
.fig-step.gold rect { fill:var(--tint); stroke:var(--gold); }
.fig-step text {
  font-family:var(--mono);
  font-size:8.6px;
  font-weight:700;
  letter-spacing:0.01em;
  fill:var(--ink);
}
.fig-arrow { fill:none; stroke:var(--text-mid); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

.fig-base { stroke:var(--line); stroke-width:1; }
.fig-bar-prior { fill:var(--tint-2); }
.fig-bar-now { fill:var(--accent-ink); }
.fig-bar-label { font-family:var(--mono); font-size:9px; font-weight:600; fill:var(--text-mid); }
.fig-bar-label.strong { fill:var(--accent-ink); font-weight:700; font-size:10px; }
.fig-bar-year { font-family:var(--mono); font-size:7.5px; fill:var(--text-mid); letter-spacing:0.04em; }

/* xybir figure parts: labels, hub caption, funnel */
.fig-lab { font-family:var(--mono); font-size:6.6px; font-weight:500; letter-spacing:0.08em; fill:var(--text-mid); }
.fig-lab.strong { fill:var(--accent-ink); font-weight:700; }
.fig-lab.r { text-anchor:end; letter-spacing:0.03em; }
.fig-rail.dash { stroke-dasharray:3 3; }
.fig-hub-t { font-family:var(--mono); font-size:8px; font-weight:700; fill:var(--ink); }
.fig-fun.a { fill:var(--tint-2); }
.fig-fun.b { fill:var(--accent-lo); stroke:var(--accent-ink); stroke-width:1; }
.fig-fun.c { fill:var(--accent-ink); }
.fig-fun-t { font-family:var(--mono); font-size:8.4px; font-weight:700; fill:var(--ink); letter-spacing:0.02em; }
.fig-fun-s { font-family:var(--mono); font-size:5.6px; font-weight:500; fill:var(--text-mid); letter-spacing:0.08em; }
.fig-fun-t.light, .fig-fun-s.light { fill:#fff; }
.fig-bar-year.strong { fill:var(--accent-ink); font-weight:700; }

/* key-fact row, matching the site's .kf definition-list pattern */
.kf {
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:baseline;
}
.kf dt {
  font-family:var(--mono);
  font-size:7.8px;
  font-weight:500;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--text-mid);
}
.kf dd {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
  font-family:var(--mono);
  font-size:13px;
  font-weight:700;
  color:var(--ink);
  text-align:right;
}
.kf dd em {
  font-style:normal;
  font-weight:600;
  font-size:7.6px;
  letter-spacing:0.03em;
  color:var(--accent-ink);
}

/* ── Nav arrows ─────────────────────────────────────────────────── */
.nav-arrow {
  position:absolute;
  top:316px;
  z-index:5;
  width:24px; height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--ink);
  box-shadow:0 2px 8px color-mix(in oklch, var(--ink) 12%, transparent);
  transition:transform 0.15s ease, background 0.2s ease;
}
.nav-arrow svg { width:12px; height:12px; }
.nav-arrow:active { transform:scale(0.9); background:var(--tint); }
#arrow-prev { left:6px; }
#arrow-next { right:6px; }

/* ── Persistent dark band: dots + CTA ───────────────────────────── */
#dots {
  position:absolute;
  left:0; right:0; bottom:105px;
  z-index:5;
  background:var(--deep);
  display:flex;
  gap:6px;
  padding:11px 18px 8px;
}
.dot {
  width:13px; height:3px;
  border-radius:2px;
  background:oklch(1 0 0 / 0.28);
  padding:6px 0;
  background-clip:content-box;
  box-sizing:content-box;
  transition:background 0.3s ease, width 0.3s ease;
}
.dot.active { background-color:var(--accent); width:19px; }  /* background-color, not the shorthand: the shorthand resets background-clip and paints the whole hit area as a square */

#bottom-fixed {
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:5;
  background:var(--deep);
  padding:10px 18px 10px;
}
#cta {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:100%;
  height:42px;
  background:var(--accent);
  border-radius:3px;
  color:var(--deep);
  font-family:var(--sans);
  font-weight:700;
  font-size:12px;
  letter-spacing:0.01em;
  box-shadow:0 8px 20px color-mix(in oklch, var(--accent) 30%, transparent);
  animation:cta-pulse 1.8s ease-in-out 2.6s 6;
}
#cta-arrow { width:13px; height:13px; }

/* Required disclosure line under the CTA */
#fls {
  margin:7px -6px 0;
  font-family:var(--sans);
  font-size:7.4px;
  font-weight:500;
  letter-spacing:0.01em;
  line-height:1.22;
  text-align:center;
  color:color-mix(in oklch, var(--accent-lt) 85%, transparent);
}
@keyframes cta-pulse {
  0%, 100% { box-shadow:0 8px 20px color-mix(in oklch, var(--accent) 30%, transparent); }
  50%      { box-shadow:0 8px 26px color-mix(in oklch, var(--accent) 55%, transparent), 0 0 0 5px color-mix(in oklch, var(--accent) 16%, transparent); }
}

/* ── Entrance sequence (initial load only) ─────────────────────── */
.reveal { opacity:0; transform:translateY(12px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
#banner.is-live .reveal { opacity:1; transform:none; }
#top-bar[data-delay="0"] { transition-delay:.05s; }
#dots.reveal { transition-delay:.5s; }
#bottom-fixed[data-delay="1"] { transition-delay:.6s; }

#click-tag-wrapper { position:absolute; width:0; height:0; overflow:hidden; }

@media (prefers-reduced-motion: reduce) {
  #cta { animation:none; }
  .reveal { transition-duration:.01s; transition-delay:0s !important; }
  .slide, .slide-copy { transition-duration:.2s; }
}