/* ── 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:      #032631;
  --dark-2:    color-mix(in srgb, var(--dark) 70%, black);
  --navy:      #23586a;
  --accent:    #59c7ec;
  --accent-d:  color-mix(in srgb, var(--accent) 82%, black);
  --accent-lt: color-mix(in srgb, var(--accent) 62%, white);
  --gold:      #e12627;
  --gold-d:    color-mix(in srgb, var(--gold) 85%, black);
  --white:     #ffffff;
  --cta-ink:   var(--white);  /* text on the accent CTA — set to var(--dark-2) if white fails contrast on a light accent */
  --font-head: 'Montserrat', system-ui, sans-serif;
  --font:      'Inter', system-ui, sans-serif;
  --mono:      'IBM Plex 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; }

.slide-bg {
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 20%;
  z-index:1;
  animation:kenburns 7s ease-out infinite alternate;
  user-select:none;
  -webkit-user-drag:none;
}
@keyframes kenburns {
  from { transform:scale(1); }
  to   { transform:scale(1.09); }
}

.slide-scrim-top, .slide-scrim-bottom {
  position:absolute;
  left:0; right:0;
  z-index:2;
  pointer-events:none;
}
.slide-scrim-top {
  top:0; height:190px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--dark-2) 94%, transparent) 0%, color-mix(in srgb, var(--dark-2) 62%, transparent) 55%, 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(--font);
  font-size:8.4px;
  line-height:1.25;
  font-weight:500;
  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:150px;
  padding:0 18px;
}
.kicker {
  font-family:var(--mono);
  font-weight:600;
  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:900;
  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 .mark { width:19px; height:19px; flex:none; }
#wordmark {
  font-family:var(--font-head);
  font-weight:800;
  font-size:13.5px;
  letter-spacing:0.01em;
  color:var(--white);
}
#eyebrow {
  font-family:var(--mono);
  font-weight:600;
  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(--font);
  font-size:8px;
  font-weight:500;
  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) {
  .slide-bg { animation:none; }
  #cta { animation:none; }
  .reveal { transition-duration:.01s; transition-delay:0s !important; }
  .slide, .slide-copy { transition-duration:.2s; }
}

/* ══ TELA Bio theme (the IR concept page's tokens: teal field, deep-teal ground, bright accent, red thread;
   Besley / Source Sans 3 / Source Code Pro). Appended to the scaffolded rules above. ══ */
:root {
  --cta-ink:   var(--dark-2);           /* the accent is light: dark ink holds contrast */
  --thread:    #e12627;                 /* the logo's red: the polymer thread. Fills and strokes only, never small text */
  --font-head: 'Besley', Georgia, 'Times New Roman', serif;
  --font:      'Source Sans 3', system-ui, sans-serif;
  --mono:      'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
body { font-family:var(--font); }

/* header: the company's own lockup (white variant), ticker eyebrow beneath */
#top-bar { gap:6px; padding-top:14px; }
#logo .lockup { display:block; width:108px; height:auto; }
#eyebrow { font-weight:500; font-size:7.4px; letter-spacing:0.1em; }

/* slide type: Besley display with an italic bright-teal phrase, like the IR hero's italic em */
.mid-chip { top:234px; border-left-color:var(--thread); }
.chip-num { font-family:var(--font-head); font-weight:600; font-size:22px; letter-spacing:-0.01em; line-height:1; }
.chip-label { font-size:8.4px; line-height:1.28; font-weight:500; color:rgba(255,255,255,0.88); }
.kicker { font-weight:500; font-size:7.4px; letter-spacing:0.1em; margin-bottom:7px; color:var(--accent-lt); }
.copy-bottom { top:282px; bottom:auto; }                 /* anchored from the top so every headline lands at the same y */
.copy-bottom h1 { font-weight:600; font-size:22px; line-height:1.1; letter-spacing:-0.012em; }
.copy-bottom h1 em { font-style:italic; font-weight:400; color:var(--accent-lt); }
.copy-bottom p { font-size:10.4px; line-height:1.36; color:rgba(255,255,255,0.88); max-width:264px; text-wrap:pretty; }

/* distressed issuer: no persistent stat row, so the disclosure is legible */
#bottom-fixed { padding:0 18px 10px; }
#ctl-row { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:9px; }
#dots { margin-bottom:0; }
/* persistent going-concern flag (R5): same row as the dots, so it costs no height */
#gc-flag { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; font-family:var(--font); font-weight:600; font-size:8.4px; line-height:15px; letter-spacing:0.01em; color:rgba(255,255,255,0.95); }
#gc-flag i { flex:none; width:5px; height:5px; border-radius:50%; background:#e12627; }
#cta { margin-top:0; height:34px; border-radius:8px; font-family:var(--font); font-weight:600; font-size:12px; letter-spacing:0.02em; text-transform:none; box-shadow:0 8px 20px color-mix(in srgb, var(--accent) 28%, transparent); }
#disclosure { margin:7px -10px 0; font-family:var(--font); font-size:7.3px; line-height:1.26; letter-spacing:0.004em; text-align:left; color:rgba(255,255,255,0.78); }

/* product art sits high in the frame: a short scrim keeps the logo legible without dimming the pads */
.slide-scrim-top { height:84px; background:linear-gradient(180deg, color-mix(in srgb, var(--dark-2) 88%, transparent) 0%, color-mix(in srgb, var(--dark-2) 0%, transparent) 100%); }


/* ══ 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) ══ */
/* The sign-up block is taller than A's CTA and A's disclosure runs several lines, so C's copy rides higher.
   A's CTA type is overridden at the end of A's CSS (Source Sans 3, 8px radius), so match it here. */
:root { --c-lift: 30px; }
#fls-line {
  white-space:normal;
  margin-top:6px;
  font-family:var(--font);
  font-size:7.3px;
  line-height:1.26;
  letter-spacing:0.004em;
  text-align:left;
  margin-left:-10px;
  margin-right:-10px;
  color:rgba(255,255,255,0.78);
}
#signup { margin-top:0; }
#signup-row { height:38px; }
#signup-email { border-radius:8px; font-size:11px; }
#signup-btn { border-radius:8px; font-family:var(--font); font-weight:600; font-size:12px; letter-spacing:0.02em; text-transform:none; box-shadow:0 8px 20px color-mix(in srgb, var(--accent) 28%, transparent); }
#signup-done { border-radius:8px; font-family:var(--font); font-weight:600; font-size:11.5px; }
#signup-consent { margin-top:6px; height:19px; font-size:7.3px; line-height:1.3; color:rgba(255,255,255,0.8); }