/* ── 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:       #ff5b00;
  --ink:          #26222a;
  --gold:         #ffc0ab;
  --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:  'Public Sans', system-ui, sans-serif;
  --mono:  'Martian 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; }
.lockup { display:block; width:65px; height:19px; }
#wordmark {
  font-family:var(--sans);
  font-weight:800;
  font-size:13px;
  letter-spacing:0.01em;
  color:var(--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:58px; left:0; right:0; bottom:138px; 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:600;
  font-size:21px;
  line-height:1.16;
  letter-spacing:-0.01em;
  color:var(--ink);
}
.slide-copy h1 em { font-style:normal; color:var(--accent-ink); }

.lead {
  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; }

/* 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:322px;
  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:108px;
  z-index:5;
  background:var(--deep);
  display:flex;
  gap:6px;
  padding:9px 18px 6px;
}
.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);
  height:108px;
  padding:8px 18px 10px;
}
#bf-line-unused {
  font-family:var(--mono);
  font-size:7.4px;
  font-weight:500;
  letter-spacing:0.11em;
  color:color-mix(in oklch, var(--accent-lt) 75%, transparent);
  margin-bottom:9px;
}
#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 under the CTA: names the positive items the slides forward-look about, then the SEC
   risk-factor pointer. Public Sans 7.6px, left-aligned, four lines. */
#fls {
  margin:8px -4px 0;
  font-family:var(--sans);
  font-size:7.6px;
  letter-spacing:0.005em;
  line-height:1.22;
  text-align:left;
  color:color-mix(in oklch, var(--accent-lt) 62%, white);
  opacity:.9;
}
@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; }
}


/* ── Guardforce figures (drawn to filed amounts by .tmp/gen_b.py) ───── */
:root { --s2: color-mix(in oklch, var(--ink) 72%, white); --s3: color-mix(in oklch, var(--ink) 46%, white); }
.s1 { fill:var(--ink); } .s2 { fill:var(--s2); } .s3 { fill:var(--s3); } .s4 { fill:var(--gold); } .s5 { fill:var(--tint-2); } .s6 { fill:var(--accent); }
.seg-lab { font-family:var(--mono); font-size:6.4px; font-weight:600; fill:#fff; }
.seg-lab.dk { fill:var(--ink); }
.seg-call { font-family:var(--mono); font-size:6.2px; font-weight:600; letter-spacing:0.04em; fill:var(--accent-ink); }
.fig-lead { fill:none; stroke:var(--accent-ink); stroke-width:1; }
.leg { font-family:var(--mono); font-size:5.9px; font-weight:500; fill:var(--ink); }
.leg.dim { fill:var(--text-mid); font-size:5.6px; }
.tl-dot { fill:var(--ink); } .tl-now { fill:var(--accent); stroke:var(--ink); stroke-width:1.2; }
.tl-cap { font-family:var(--mono); font-size:5.4px; font-weight:500; letter-spacing:0.04em; fill:var(--text-mid); }
.fig-bar-year.l { font-size:6.2px; letter-spacing:0.06em; fill:var(--ink); font-weight:500; }
.fig-bar-ai { fill:var(--accent); }
.fig-bar-loss { fill:var(--ink); }
.fig-bar-label.sm { font-size:7.6px; } .fig-bar-year.sm { font-size:6.2px; }

/* v3: numbered orange tabs for the three layers, and the wave texture on the dark band */
.lay-no { fill:var(--accent); }
.lay-n { font-family:var(--mono); font-size:7.6px; font-weight:700; fill:var(--deep); }
.lay-t { font-family:var(--serif); font-size:8.8px; font-weight:600; fill:var(--ink); }
.lay-s { font-family:var(--mono); font-size:5.9px; font-weight:500; fill:var(--text-mid); }
#bottom-fixed, #dots {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='28'%3E%3Cg fill='none' stroke='%23fff3ec' stroke-opacity='.07' stroke-width='.8'%3E%3Cpath d='M0 14C12 2 36 2 48 14S84 26 96 14'/%3E%3Cpath d='M0 14C12 26 36 26 48 14S84 2 96 14'/%3E%3C/g%3E%3C/svg%3E");
  background-size:96px 28px;
}