/* ── Brand tokens — the ONLY place colors are defined. Set --dark,
   --navy, --accent and --gold from the company's real site; the rest
   derive from them (color-mix: Chrome 111+ / Safari 16.2+). ── */
:root {
  --dark:      oklch(0.14 0.010 303);
  --dark-2:    color-mix(in srgb, var(--dark) 70%, black);
  --navy:      oklch(0.19 0.006 303);
  --accent:    oklch(0.78 0.121 291.9);
  --accent-d:  color-mix(in srgb, var(--accent) 82%, black);
  --accent-lt: color-mix(in srgb, var(--accent) 62%, white);
  --gold:      oklch(0.86 0.075 291.9);
  --gold-d:    color-mix(in srgb, var(--gold) 85%, black);
  --white:     #ffffff;
  --cta-ink:   var(--dark-2);  /* the accent is a light lavender, so the CTA label takes the dark ink */
  --font-head: 'Sora', system-ui, sans-serif;
  --font:      'Sora', system-ui, sans-serif;
  --mono:      'Fragment Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --ease:      cubic-bezier(0.16,1,0.3,1);
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body { width:300px; height:600px; overflow:hidden; background:var(--dark); }
body { font-family:var(--font); -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; }

/* ── Canvas ─────────────────────────────────────────────────────────
   Fixed 300x600 stage. A crossfading slide stack sits at the bottom of
   the z-order; persistent chrome (logo, nav, stats, CTA) is pinned on
   top of it and never rotates — same "fixed shell / rotating cards"
   split the Knorex reference banner used with royalSlider. */
#banner {
  position:relative;
  width:300px;
  height:600px;
  overflow:hidden;
  cursor:pointer;
  background:var(--dark);
}

/* ── Slide stack ────────────────────────────────────────────────── */
#slides { position:absolute; inset:0; z-index:1; }

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

/* Motif background: the IR page's concentric rings, redrawn per slide as inline SVG (no photography on that page).
   Art lives in the clear band between the top bar and the stat chip (about y 62-236). */
.slide-bg {
  position:absolute;
  inset:0;
  z-index:1;
  user-select:none;
}
.slide-bg svg { display:block; width:100%; height:100%; }
.m-ghost   { fill:none; stroke:var(--accent); stroke-opacity:0.13; stroke-width:1; }
.m-ring    { fill:none; stroke:var(--accent); stroke-width:1.5; }
.m-ring-lt { fill:none; stroke:var(--accent-lt); stroke-width:1.1; stroke-opacity:0.85; }
.m-wall    { stroke-width:2.6; }
.m-dash    { stroke-dasharray:3 4; }
.m-disc    { fill:var(--accent); }
.m-core    { fill:var(--accent); }
.m-glow    { fill:var(--accent); fill-opacity:0.16; }
.m-line    { fill:none; stroke:var(--accent-lt); stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
.m-inhib   { fill:none; stroke:var(--accent-lt); stroke-width:1.8; stroke-linecap:round; }
.m-trav    { fill:var(--accent-lt); }
.m-label {
  font-family:var(--mono);
  font-size:7px;
  letter-spacing:0.08em;
  fill:var(--accent-lt);
}
.m-label.strong { fill:var(--white); }
.m-label.m-case { text-transform:none; letter-spacing:0.04em; }
.motif-pulse {                      /* the IR hero's slow ring pulse */
  transform-box:fill-box;
  transform-origin:center;
  animation:ring-pulse 6s ease-in-out infinite;
}
@keyframes ring-pulse {
  0%, 100% { transform:scale(1);     opacity:0.6; }
  50%      { transform:scale(1.07);  opacity:1; }
}

.slide-scrim-top, .slide-scrim-bottom {
  position:absolute;
  left:0; right:0;
  z-index:2;
  pointer-events:none;
}
.slide-scrim-top {                      /* motif art needs no photo scrim, only a soft fade under the header */
  top:0; height:66px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--dark-2) 92%, transparent) 0%, color-mix(in srgb, var(--dark-2) 0%, transparent) 100%);
}
.slide-scrim-bottom {
  bottom:0; height:336px;
  background:linear-gradient(0deg, var(--dark) 0%, color-mix(in srgb, var(--dark) 93%, transparent) 42%, color-mix(in srgb, var(--dark) 0%, transparent) 100%);
}

.slide-copy {
  position:absolute;
  inset:0;
  z-index:3;
  transform:translateY(12px);
  transition:transform 0.9s var(--ease);
}
.slide.active .slide-copy { transform:translateY(0); }

/* Floating mid-image stat chip (per slide) */
.mid-chip {
  position:absolute;
  top:258px; left:18px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 13px 9px 11px;
  background:color-mix(in srgb, var(--dark) 58%, transparent);
  border-left:3px solid var(--accent);
  border-radius:0 3px 3px 0;
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
.chip-num {
  font-family:var(--font-head);
  font-weight:800;
  font-size:19px;
  color:var(--white);
  white-space:nowrap;
}
.chip-num em { font-style:normal; color:var(--accent); }
.chip-label {
  font-family:var(--mono);
  font-size:8px;
  line-height:1.3;
  color:rgba(255,255,255,0.82);
}

/* Rotating headline block, pinned above the fixed bottom bar */
.copy-bottom {
  position:absolute;
  left:0; right:0;
  bottom:158px;
  padding:0 18px;
}
.kicker {
  font-family:var(--mono);
  font-weight:400;
  font-size:8px;
  letter-spacing:0.09em;
  text-transform:uppercase;
  color:var(--accent-lt);
  margin-bottom:6px;
}
.copy-bottom h1 {
  font-family:var(--font-head);
  font-weight:700;
  font-size:20px;
  line-height:1.14;
  letter-spacing:-0.01em;
  color:var(--white);
}
.copy-bottom h1 em { font-style:normal; color:var(--accent); }
.copy-bottom p {
  margin-top:7px;
  font-size:11px;
  line-height:1.4;
  color:rgba(255,255,255,0.8);
  max-width:255px;
}

/* ── Persistent chrome (never rotates) ─────────────────────────── */
#top-bar {
  position:absolute;
  top:0; left:0; right:0;
  z-index:5;
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:16px 18px 0;
}
#logo { display:flex; align-items:center; gap:7px; }
#logo img { display:block; width:90px; height:20px; }
#eyebrow {
  font-family:var(--mono);
  font-weight:400;
  font-size:8.2px;
  letter-spacing:0.1em;
  color:var(--accent-lt);
}

.nav-arrow {
  position:absolute;
  top:154px;
  width:26px; height:26px;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  background:color-mix(in srgb, var(--dark) 45%, transparent);
  border:1px solid rgba(255,255,255,0.18);
  border-radius:50%;
  color:rgba(255,255,255,0.9);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  transition:background .2s ease, transform .15s ease;
}
.nav-arrow svg { width:13px; height:13px; }
.nav-arrow:active { transform:scale(0.9); background:color-mix(in srgb, var(--accent) 55%, transparent); }
#arrow-prev { left:10px; }
#arrow-next { right:10px; }

#bottom-fixed {
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:5;
  padding:0 18px 12px;
}

#dots {
  display:flex;
  gap:6px;
  margin-bottom:11px;
}
.dot {
  width:14px; height:3px;
  border-radius:2px;
  background:rgba(255,255,255,0.28);
  transition:background .3s ease, width .3s ease;
  padding:6px 0;
  background-clip:content-box;
  box-sizing:content-box;
}
.dot.active { background-color:var(--accent); width:20px; }  /* background-color, not the shorthand: the shorthand resets background-clip and paints the whole 15px hit area as a square */

#stat-row {
  display:flex;
  align-items:center;
  gap:14px;
}
.stat { display:flex; flex-direction:column; gap:2px; }
.stat-num {
  font-family:var(--font-head);
  font-weight:800;
  font-size:15px;
  color:var(--white);
}
.stat-num em { font-style:normal; color:var(--accent); }
.stat-label {
  font-family:var(--mono);
  font-size:7.6px;
  font-weight:400;
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.58);
}
.stat-div { width:1px; height:26px; background:rgba(255,255,255,0.18); }

#cta {
  margin-top:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:100%;
  height:42px;
  background:var(--accent);
  border-radius:3px;
  color:var(--cta-ink);
  font-family:var(--font-head);
  font-weight:800;
  font-size:11.5px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  box-shadow:0 8px 20px color-mix(in srgb, var(--accent) 35%, transparent);
  animation:cta-pulse 1.8s ease-in-out 2.6s 6;
}
#cta-arrow { width:13px; height:13px; }

/* Required disclosure line under the CTA */
#disclosure {
  margin-top:8px;
  font-family:var(--mono);
  font-size:6.6px;
  letter-spacing:0.03em;
  line-height:1.2;
  text-align:center;
  color:rgba(255,255,255,0.55);
}
@keyframes cta-pulse {
  0%, 100% { box-shadow:0 8px 20px color-mix(in srgb, var(--accent) 35%, transparent); }
  50%      { box-shadow:0 8px 26px color-mix(in srgb, var(--accent) 65%, transparent), 0 0 0 5px color-mix(in srgb, var(--accent) 12%, transparent); }
}

/* ── Entrance sequence (initial load only) ─────────────────────── */
.reveal {
  opacity:0;
  transform:translateY(14px);
  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; }
#bottom-fixed[data-delay="4"] { transition-delay:.55s; }

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

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


/* ══ Concept C: sign-up block, appended to Concept A's stylesheet by
   scripts/build_concept_c.py. Everything above this line is A's CSS,
   copied verbatim; don't edit it here — edit A and rebuild. ══ */

/* The sign-up is taller than A's CTA, so the chip and headline move up
   by --c-lift, and the bottom padding tightens. If A has foreground art
   in the slide background (a motif, a diagram) that now crowds the chip,
   lift it too in the C-only block at the end of this file. */
:root { --c-lift: 16px; --c-error: #ff7a6b; }
.slide-copy .mid-chip, .slide-copy .copy-bottom { translate: 0 calc(-1 * var(--c-lift)); }
#bottom-fixed { padding-bottom: 11px; }

#signup { position:relative; margin-top:13px; cursor:default; }
.sr-only {
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}
#signup-row {
  position:relative;
  display:flex;
  gap:6px;
  height:40px;
}
#signup-email {
  flex:1;
  min-width:0;
  height:100%;
  padding:0 11px;
  border:1px solid rgba(255,255,255,0.24);
  border-radius:3px;
  outline:0;
  background:color-mix(in srgb, var(--dark) 55%, transparent);
  color:var(--white, #fff);
  font-family:var(--font);
  font-size:11px;
  font-weight:500;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
#signup-email::placeholder { color:rgba(255,255,255,0.6); }
#signup-email:focus {
  border-color:var(--accent);
  background:color-mix(in srgb, var(--dark) 75%, transparent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
}
#signup.is-error #signup-email { border-color:var(--c-error); animation:shake .35s ease; }
@keyframes shake {
  0%, 100% { transform:translateX(0); }
  25% { transform:translateX(-4px); }
  75% { transform:translateX(4px); }
}
/* Same fill, ink and type as A's CTA (--cta-ink), so C reads as A */
#signup-btn {
  flex:none;
  height:100%;
  padding:0 13px;
  background:var(--accent);
  border-radius:3px;
  color:var(--cta-ink, var(--dark-2));
  font-family:var(--font-head, var(--font));
  font-weight:800;
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  box-shadow:0 8px 20px color-mix(in srgb, var(--accent) 35%, transparent);
  transition:filter .2s ease, transform .15s ease;
  animation:btn-pulse 1.8s ease-in-out 2.6s 6;
}
#signup-btn:hover { filter:brightness(1.08); }
#signup-btn:active { transform:scale(0.96); }
#signup.is-sending #signup-btn { opacity:0.6; pointer-events:none; }
@keyframes btn-pulse {
  0%, 100% { box-shadow:0 8px 20px color-mix(in srgb, var(--accent) 35%, transparent); }
  50%      { box-shadow:0 8px 26px color-mix(in srgb, var(--accent) 60%, transparent); }
}

#signup-done {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  background:var(--accent);
  border-radius:3px;
  color:var(--cta-ink, var(--dark-2));
  font-family:var(--font-head, var(--font));
  font-weight:700;
  font-size:11px;
  opacity:0;
  transform:scale(0.96);
  pointer-events:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
#signup-done svg { width:15px; height:15px; flex:none; }
#signup.is-done #signup-done { opacity:1; transform:none; }
#signup.is-done #signup-email, #signup.is-done #signup-btn { visibility:hidden; }

/* Consent and error share one two-line slot, so the error never moves
   anything; the consent comes back as soon as the viewer types. */
#signup-consent, #signup-msg {
  margin-top:7px;
  height:20px;
  font-family:var(--font);
  font-size:7px;
  line-height:1.42;
}
#signup-consent { color:rgba(255,255,255,0.6); }
#signup-consent a { color:inherit; text-decoration:underline; }
#signup-msg {
  display:none;
  font-size:9px;
  font-weight:600;
  color:var(--c-error);
}
#signup.is-error #signup-consent { display:none; }
#signup.is-error #signup-msg { display:block; }

#fls-line {
  margin-top:4px;
  font-family:var(--mono);
  font-size:6.6px;
  letter-spacing:0.03em;
  line-height:1.2;
  text-align:center;
  color:rgba(255,255,255,0.55);
  white-space:nowrap;
}

@media (prefers-reduced-motion: reduce) {
  #signup-btn { animation:none; }
}

/* A's CTA look, copied from its #cta rule by build_concept_c.py */
#signup-btn {
  background:var(--accent);
  color:var(--cta-ink);
  font-family:var(--font-head);
  font-weight:800;
  letter-spacing:0.06em;
  text-transform:uppercase;
  border-radius:3px;
}
#signup-done {
  background:var(--accent);
  color:var(--cta-ink);
  font-family:var(--font-head);
  font-weight:800;
  border-radius:3px;
}

/* ══ C-only overrides (kept on rebuild) ══ */
/* Scynexis: the disclosure is two lines (A's #disclosure wraps; C's slot was single-line), so the
   sign-up block grows by one line and the chip, headline and ring art lift to match. */
:root { --c-lift: 24px; }
#fls-line { white-space:normal; }
.slide-bg { translate: 0 -8px; }