@font-face {
  font-family: 'Simplex Sans';
  src: url('assets/fonts/SimplexSans-Regular.otf') format('opentype'),
       url('assets/fonts/SimplexSans-Regular.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}

/* ═══════════════════════════════════════════════════════════
   SPECIAL LINK — LANDING PAGE STYLES
   Dark · Clean · Premium
═══════════════════════════════════════════════════════════ */

/* ─── CUSTOM PROPERTIES ─── */
:root {
  /* Accent */
  --accent-1:     #ff7a3c;
  --accent-2:     #ffce81;
  --accent-grad:  linear-gradient(135deg, #ff7a3c, #ffce81);
  --accent-solid: #ff944d;
  --blue:         #ff944d;
  --blue-dim:     rgba(255, 148, 77, 0.12);
  --cyan:        #0cc0df;

  /* Backgrounds */
  --black:        #000000;
  --surface:      #ffffff;
  --surface2:     #fbf2e9;
  --surface3:     #f4e8dc;

  /* Borders */
  --border:       rgba(28, 20, 12, 0.10);
  --border-mid:   rgba(28, 20, 12, 0.16);

  /* Text */
  --text:         #241d18;
  --text-dim:     #5b5048;
  --text-dimmer:  #8c8077;

  /* Layout */
  --max-w:        1200px;
  --nav-h:        72px;
  /* Square design system 2026-05-12 — vars kept (legacy var() callers
     still resolve), all set to 0. Kit-maker .yk-* selectors use hardcoded
     radii because the phone / NFC / A5 mockups are illustrations of
     physical products and stay rounded. */
  --radius-sm:    0;
  --radius:       0;
  --radius-lg:    0;
  --radius-xl:    0;

  --ease:         cubic-bezier(0.4, 0, 0.2, 1);
  --dur:          0.22s;
}

/* ─── RESET ─── */
*, *::before, *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; }

body {
  background: linear-gradient(150deg, #fff4ea 0%, #fde9dc 45%, #eaf6f6 100%) fixed;
  background-color: #fff4ea;
  color: var(--text);
  font-family: 'Simplex Sans', sans-serif;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; outline: none; }
ul { list-style: none; }


/* ── TOPOGRAPHIC BACKGROUND IMAGE — fixed so it always fills the viewport on all devices ── */
#topo-img {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  background-image: url('BG1.png');
  background-size: cover;
  background-position: center top;
}

/* ── TOPOGRAPHIC BACKGROUND OVERLAY (breathing dimmer) ── */
#topo-bg {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  background: #ffffff;
  animation: topoBreathe 9s ease-in-out infinite;
}

@keyframes topoBreathe {
  0%, 100% { opacity: 0.80; }
  50%       { opacity: 0.68; }
}

/* ─── CONTENT LAYER ─── */
#navbar, section, footer { position: relative; z-index: 2; }

/* ─── TYPOGRAPHY ─── */
h1, h2 {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--text);
}

h1 { font-size: clamp(2.4rem, 6vw, 5.2rem); }
h2 { font-size: clamp(1.8rem, 4vw, 3.4rem); }

h3 {
  font-family: 'Simplex Sans', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--text);
}

p { color: var(--text-dim); }

/* ─── UTILITY ─── */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: 96px 0; }

.bg-surface {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.section-header {
  text-align: center;
  margin-bottom: 64px;
}
.section-header h2 { margin: 14px 0 16px; }
.section-header p  { max-width: 540px; margin: 0 auto; font-size: 1.05rem; }

/* ─── GRADIENT TEXT ─── */
.grad-text,
.grad-gold-text,
.grad-pink-text {
  background: linear-gradient(135deg, #ff7a3c, #ffce81);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: #ff944d;
}

/* ─── TAG PILL ─── */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 14px;
  border-radius: 0;
  background: rgba(28, 20, 12, 0.05);
  border: 1px solid var(--border-mid);
  font-family: 'Simplex Sans', monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
}

/* ─── BUTTONS — all unified ─── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 0;
  font-family: 'Simplex Sans', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  white-space: nowrap;
  background: linear-gradient(#000000, #000000) padding-box,
              linear-gradient(135deg, #ff7a3c, #ffce81) border-box;
  border: 1.5px solid transparent;
  color: var(--text);
  box-shadow: none;
  transition: background var(--dur) var(--ease);
}

.btn:hover {
  background: linear-gradient(rgba(255,148,77,0.12), rgba(255,148,77,0.12)) padding-box,
              linear-gradient(135deg, #ff7a3c, #ffce81) border-box;
}

.btn-primary,
.btn-ghost,
.btn-pink {
  background: linear-gradient(#000000, #000000) padding-box,
              linear-gradient(135deg, #ff7a3c, #ffce81) border-box;
  border: 1.5px solid transparent;
  color: var(--text);
  box-shadow: none;
}

.btn-primary:hover,
.btn-ghost:hover,
.btn-pink:hover {
  background: linear-gradient(rgba(255,148,77,0.12), rgba(255,148,77,0.12)) padding-box,
              linear-gradient(135deg, #ff7a3c, #ffce81) border-box;
  transform: none;
  box-shadow: none;
}

.btn-sm { padding: 10px 20px; font-size: 0.875rem; }
.btn-lg { padding: 17px 36px; font-size: 1rem; }

/* Login button — gradient orange background, white text */
.btn-login {
  background: linear-gradient(135deg, #ff7a3c, #ffce81) !important;
  border: none !important;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
}

@keyframes btn-sweep {
  0%   { left: -60%; }
  50%  { left: 120%; }
  100% { left: 120%; }
}
.become-partner-btn {
  position: relative;
  overflow: hidden;
  display: inline-block;
  padding: 14px 32px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
  border: none;
  border-radius: 0;
  background: linear-gradient(135deg, #ff7a3c, #ffce81);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.become-partner-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(28, 20, 12,0.28), transparent);
  animation: btn-sweep 2.6s ease-in-out infinite;
}


/* ══════════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════════ */
#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  /* Scroll-triggered: hidden by default, reveals on .scrolled.
     Hero stays clean on first paint; nav slides in once visitor
     scrolls past ~70% of the viewport. */
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform .42s cubic-bezier(.2,.8,.2,1),
              opacity .3s ease,
              background var(--dur) var(--ease);
}

#navbar.scrolled {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.9);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  width: 100%;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.nav-logo-img {
  height: 32px;
  width: auto;
}

.nav-logo2-img {
  height: 42px;
  width: auto;
  object-fit: contain;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-left: auto;
}

.nav-links a {
  font-family: 'Simplex Sans', monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color var(--dur);
}

.nav-links a:hover,
.nav-links a.active { color: var(--text); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Mobile login icon */
.nav-login-icon { display: none; }

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 48px;
  height: 48px;
  margin-left: auto;
  padding: 0;
  flex-shrink: 0;
}

.hamburger span {
  display: block;
  width: 28px;
  height: 2.5px;
  background: #ffffff;
  border-radius: 0;
  transition: all 0.3s var(--ease);
  transform-origin: center;
}

.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.nav-drawer {
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0;
  background: rgba(0, 0, 0, 0.97);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transform: translateY(-20px);
  opacity: 0;
  pointer-events: none;
  transition: all 0.28s var(--ease);
  z-index: 999;
}

.nav-drawer.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
}

.nav-drawer ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.drawer-link {
  display: block;
  padding: 13px 0;
  font-family: 'Simplex Sans', monospace;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  transition: color var(--dur);
}
.drawer-link:hover { color: var(--text); }


/* ══════════════════════════════════════════════
   HERO
══════════════════════════════════════════════ */
#hero {
  min-height: 100svh;
  min-height: 100vh;
  padding: calc(var(--nav-h) + 45px) 0 80px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* ── Full-width tagline — hidden everywhere (replaced by ticker on mobile) ── */
.hero-tagline {
  display: none;
}

/* ── Mobile integration ticker ── */
.mob-ticker-wrap {
  display: block;
  overflow: hidden;
  margin-bottom: 18px;
}

@media (min-width: 769px) {
  .mob-ticker-wrap {
    display: none;
  }
}

.mob-ticker-label {
  font-family: 'Simplex Sans', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  text-align: center;
  margin-bottom: 10px;
}

.mob-ticker-track {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

@keyframes tickerScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.mob-ticker-inner {
  display: flex;
  align-items: center;
  gap: 0;
  width: max-content;
  animation: tickerScroll 40s linear infinite;
}

.mob-tick-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 22px;
  font-family: 'Simplex Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(28, 20, 12,0.75);
  white-space: nowrap;
}

.mob-tick-item img {
  height: 36px;
  width: auto;
  max-width: 80px;
  object-fit: contain;
  opacity: 0.9;
  border-radius: 0;
}

.mob-tick-sep {
  color: rgba(255,206,129,0.5);
  font-size: 1rem;
  line-height: 1;
  padding: 0 4px;
}

/* ── Mobile unboxing tagline under video cards ── */
.mob-unboxing-tag {
  font-family: 'Simplex Sans', sans-serif;
  font-size: clamp(1.3rem, 5.5vw, 1.7rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: var(--text);
  text-align: center;
  margin: 18px 0 6px;
}

@media (min-width: 769px) {
  .mob-unboxing-tag {
    display: none;
  }
}

/* ── 2 square video placeholders — top row ── */
.hero-vids-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* ── Hero video boxes ── */
.hero-vid-box {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 0;
  overflow: hidden;
  border: 2px solid transparent;
  background: linear-gradient(#000, #000) padding-box,
              linear-gradient(135deg, #ff7a3c, #ffce81) border-box;
  box-shadow: 0 40px 80px rgba(0,0,0,0.7);
}

/* "Without Special Link" — dead / dull grey border */
.hero-vid-box.vid-dead {
  background: linear-gradient(#000, #000) padding-box,
              linear-gradient(135deg, #4a4a4e, #1e1e20) border-box;
  box-shadow: 0 40px 80px rgba(0,0,0,0.7);
}

.hero-box-vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-vid-label {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-family: 'Simplex Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text);
  white-space: nowrap;
  text-align: center;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.85);
}

/* ── Left video skip control ── */
.vid-controls {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 7;
  pointer-events: all;
}

.vid-ctrl-skip {
  background: linear-gradient(135deg, #ff7a3c, #ffce81);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  border: none;
  padding: 0;
  margin: 0;
  font-family: 'Simplex Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0.9;
  transition: opacity 0.2s ease;
  pointer-events: all;
  user-select: none;
  -webkit-user-select: none;
}

/* ── Video header label (top of each video card) ── */
.vid-header-label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px 14px 20px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, transparent 100%);
  pointer-events: none;
  transition: opacity 0.5s ease;
}

/* Mobile only: hide header label while missed-opportunity list is on screen */
@media (max-width: 768px) {
  .vid-dead.list-fullscreen .vid-header-label {
    opacity: 0;
    pointer-events: none;
  }
}

.vid-hl-text {
  font-family: 'Simplex Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0,0,0,0.7);
}

.vid-hl-icon {
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}

.vid-hl-icon-img {
  height: 18px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 0;
}

/* ── VL1 video captions ── */
.vl1-caption {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,0.22);
  font-family: 'Simplex Sans', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.55;
  text-align: center;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 12px rgba(0,0,0,0.7);
  opacity: 0;
  transition: opacity 0.6s ease;
  z-index: 5;
  pointer-events: none;
}

.vl1-caption.visible {
  opacity: 1;
}

/* Lines 2–3 of "moment is gone" caption */
.vl1-sub {
  display: block;
  font-size: 0.88em;
  font-weight: 600;
  color: var(--text);
  margin-top: 6px;
  line-height: 1.6;
}

/* Missed opportunity list (last caption) */
.vl1-missed {
  width: 100%;
  text-align: center;
  background: rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 0;
  padding: 16px 20px;
}

.vl1-missed-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 14px;
}

.vl1-missed-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vl1-missed-list li {
  font-size: 0.86rem;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.vl1-missed-key {
  font-weight: 700;
  color: var(--text);
}

.vl1-missed-val {
  font-weight: 700;
  background: linear-gradient(135deg, #ff7a3c, #ffce81);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.vl1-missed-footer {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid rgba(28, 20, 12, 0.15);
}

.sample1-caption {
  z-index: 11; /* above the waiting overlay */
}

/* ── Right video waiting overlay ── */
.vr-waiting-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 24px;
  background: rgba(0,0,0,0.72);
  z-index: 10;
  opacity: 1;
  transition: opacity 0.8s ease;
  pointer-events: none;
}

.vr-waiting-overlay.hidden {
  opacity: 0;
}

.vr-waiting-text {
  font-family: 'Simplex Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(28, 20, 12,0.88);
  text-align: center;
  line-height: 1.55;
  max-width: 280px;
}

.vr-countdown-wrap {
  position: relative;
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vr-circle-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg); /* progress starts from top */
}

.vr-circle-bg {
  fill: none;
  stroke: rgba(28, 20, 12, 0.12);
  stroke-width: 4;
}

.vr-circle-prog {
  fill: none;
  stroke: #ffce81;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 188.5;   /* 2 * PI * 30 */
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.95s linear;
}

.vr-countdown {
  position: relative;
  z-index: 1;
  font-family: 'Simplex Sans', sans-serif;
  font-size: 1.9rem;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, #ff7a3c, #ffce81);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Text row — mobile only ── */
.hero-copy-title { display: none; }
.hero-text-row   { display: none; }

.hero-copy-body {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 620px;
  width: 100%;
}

/* ── Proof strip above videos (desktop only) ── */
.hero-proof-row {
  display: none;
}

@media (min-width: 769px) {
  .hero-proof-row {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
  }

  .hero-proof-item {
    flex: 1;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: 0;
    background: linear-gradient(rgba(255,206,129,0.04), rgba(255,206,129,0.04)) padding-box,
                linear-gradient(135deg, #ff7a3c, #ffce81) border-box;
    font-family: 'Simplex Sans', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(28, 20, 12, 0.78);
    text-align: center;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
}

/* ── Below-videos 2-col row (desktop only) ── */
.hero-below-vids {
  display: none;
  font-family: 'Simplex Sans', sans-serif;
}

@media (min-width: 769px) {
  .hero-below-vids {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
  }
}

.hbv-tagline {
  font-family: 'Simplex Sans', sans-serif;
  font-size: clamp(2.6rem, 5vw, 5rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.12;
  color: var(--text);
  margin: 0;
}

.hbv-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hbv-bullets li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 18px;
  position: relative;
}

.hbv-bullets li::before {
  content: '→';
  position: absolute;
  left: 0;
  top: 0;
  color: #ffce81;
  font-size: 0.9rem;
  line-height: 1.5;
}

.hbv-feat {
  font-family: 'Simplex Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.5;
}

.hbv-desc {
  font-family: 'Simplex Sans', sans-serif;
  font-size: 0.82rem;
  color: rgba(28, 20, 12,0.65);
  line-height: 1.55;
}

.hbv-eyebrow {
  font-family: 'Simplex Sans', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 14px 0;
}

.hbv-data-note {
  font-family: 'Simplex Sans', sans-serif;
  font-size: 0.8rem;
  color: rgba(28, 20, 12,0.5);
  margin: 20px 0 0 0;
  line-height: 1.5;
}

.hbv-cta {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 20px;
  box-sizing: border-box;
}



.hero-sub {
  font-size: 1.08rem;
  line-height: 1.75;
  max-width: 500px;
  margin-bottom: 0;
}

.hero-sub-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  padding: 0;
}

.hero-sub-list li {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text);
  padding-left: 14px;
  border-left: 2px solid #ff944d;
}

.hero-sub-list li strong {
  color: var(--text);
  font-weight: 700;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.hero-check-row {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.hero-check-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.hero-check-item svg {
  flex-shrink: 0;
}

.hero-stats {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 0;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.stat-val {
  display: block;
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--text);
}

.stat-label {
  font-family: 'Simplex Sans', monospace;
  font-size: 0.65rem;
  color: var(--text-dimmer);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
  line-height: 1.4;
}

.stat-sep {
  width: 1px;
  height: 40px;
  background: var(--border);
  flex-shrink: 0;
}

/* ─── VIDEO PLACEHOLDERS (shared) ─── */
.vid-ph {
  border-radius: 0;
  border: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0,0,0,0.55);
}

.square-ph {
  width: 100%;
  aspect-ratio: 1 / 1;
}

.vid-ph-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px;
  text-align: center;
}

.vid-ph-icon {
  width: 52px;
  height: 52px;
  color: var(--text-dimmer);
}

.vid-ph-dim {
  font-family: 'Simplex Sans', monospace;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}

.vid-ph-note {
  font-size: 0.72rem;
  color: var(--text-dimmer);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: 'Simplex Sans', monospace;
}


/* ══════════════════════════════════════════════
   HOW IT WORKS — 3 cards side by side
══════════════════════════════════════════════ */
.how-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.how-card {
  border: 2px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box,
              linear-gradient(135deg, #ff7a3c, #ffce81) border-box;
  border-radius: 0;
  padding: 28px 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.how-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.how-step-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  flex-shrink: 0;
  background: var(--surface3);
  border: 1px solid var(--border-mid);
  color: var(--text);
}

.step1-circle,
.step2-circle,
.step3-circle {
  background: var(--surface3);
  border: 1px solid var(--border-mid);
  color: var(--text);
}

.how-card-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
}

.step1-title,
.step2-title,
.step3-title {
  background-image: none;
  color: var(--text);
  -webkit-text-fill-color: var(--text);
}

.how-card-vid {
  width: 100%;
  flex-shrink: 0;
}

/* Real video inside the rounded square wrapper. .vid-ph is
   position:relative + overflow:hidden, so the video fills it. */
.hc-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #ffffff;
}

.how-card-desc {
  font-size: 0.9rem;
  color: var(--text-dim);
  line-height: 1.6;
  margin: 0;
}


/* ══════════════════════════════════════════════
   SPECIAL LINK MARKETING SYSTEM — 3 columns
══════════════════════════════════════════════ */

/* Brand selector buttons */
.brand-btns-label {
  text-align: center;
  font-family: 'Simplex Sans', sans-serif;
  font-size: 1rem;
  color: var(--text);
  margin-bottom: 20px;
}

.brand-btns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  justify-content: center;
  align-items: stretch;
  margin: 0 auto 56px;
  max-width: 1320px;
}

.brand-btn-item {
  display: flex;
}

.brand-btn {
  /* Four-in-a-row rectangular cards — logo middle-left, brand name +
     3-line fact list on the right. Sized so the longest integration
     line ("WooCommerce and Mailchimp integrated") fits on one line,
     and the text has room to breathe vertically. */
  width: 100%;
  min-height: 148px;
  border-radius: 0;
  border: 2px solid rgba(28, 20, 12, 0.10);
  background: #fbf2e9;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  padding: 18px 14px;
  text-align: left;
  transition: background 0.2s var(--ease), transform 0.15s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
  position: relative;
}

.brand-btn-logo {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-btn-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: brightness(0.9);
  transition: filter 0.2s var(--ease);
}

.brand-btn-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  font-family: 'Simplex Sans', sans-serif;
  color: var(--text);
  line-height: 1.4;
}
.brand-btn-text strong {
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  margin-bottom: 3px;
  color: var(--text);
}
.brand-btn-text > span {
  font-size: 0.7rem;
  font-weight: 400;
  color: rgba(28, 20, 12, 0.6);
  line-height: 1.5;
}

.brand-btn:hover {
  background: #f4e8dc;
  border-color: rgba(28, 20, 12, 0.22);
  transform: translateY(-3px);
}
.brand-btn:hover .brand-btn-logo img { filter: brightness(1); }
.brand-btn:active { transform: translateY(0); }

/* Active brand — gradient orange border + soft bouncy bob.
   Continuous gentle up/down with a paired glow pulse signals
   "this is selected" without being noisy. */
.brand-btn-active {
  background:
    linear-gradient(#1c1c1c, #1c1c1c) padding-box,
    linear-gradient(135deg, #ff7a3c, #ffce81) border-box !important;
  border-color: transparent !important;
  animation: brandBtnBounce 2.4s ease-in-out infinite;
}
.brand-btn-active .brand-btn-logo img { filter: brightness(1) !important; }
@keyframes brandBtnBounce {
  0%, 100% {
    transform: translateY(-3px);
    box-shadow: 0 0 22px rgba(255, 148, 77, 0.28);
  }
  50% {
    transform: translateY(-7px);
    box-shadow: 0 0 32px rgba(255, 148, 77, 0.45);
  }
}
@media (prefers-reduced-motion: reduce) {
  .brand-btn-active {
    animation: none;
    transform: translateY(-3px);
    box-shadow: 0 0 24px rgba(255, 148, 77, 0.35);
  }
}

/* ══════════════════════════════════════════════
   KIT CARD — FLIP + TILT + SHEEN
══════════════════════════════════════════════ */
.kit-brand-panel { display: none; }
.kit-brand-panel.active { display: block; }

.kit-coming-soon { display: none; }
.kit-coming-soon.active {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
}
.kit-soon-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.kit-soon-icon { font-size: 2rem; }
.kit-soon-msg {
  font-size: 0.82rem;
  color: rgba(28, 20, 12,0.35);
  font-style: italic;
}

.kit-card-wrap { margin-bottom: 24px; }

.kit-mobile-extras { display: none; }
.kit-label-block { margin-top: 18px; text-align: center; }
.kit-label-line {
  font-family: 'Simplex Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.5;
  margin: 0;
}
.kit-label-line + .kit-label-line { margin-top: 2px; }
.kit-design-copy {
  margin-top: 20px;
  font-family: 'Simplex Sans', sans-serif;
  font-size: 0.82rem;
  color: var(--text);
  line-height: 1.7;
}

/* Idle floating tilt animation */
@keyframes kitIdleTilt {
  0%   { transform: perspective(900px) rotateX(5deg)  rotateY(-9deg);  }
  25%  { transform: perspective(900px) rotateX(-3deg) rotateY(8deg);   }
  50%  { transform: perspective(900px) rotateX(7deg)  rotateY(3deg);   }
  75%  { transform: perspective(900px) rotateX(-5deg) rotateY(-7deg);  }
  100% { transform: perspective(900px) rotateX(5deg)  rotateY(-9deg);  }
}

/* Outer wrapper — receives tilt transform via JS or idle CSS animation */
.kit-tilt-wrap {
  position: relative;
  cursor: pointer;
  border-radius: 0;
  transform-style: preserve-3d;
  will-change: transform;
  max-width: 75%;
  margin: 0 auto;
  animation: kitIdleTilt 8s ease-in-out infinite;
}

/* Inner flipper — rotates 180° on click */
.kit-flipper {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 0;
  line-height: 0;
}
.kit-tilt-wrap.is-flipped .kit-flipper {
  transform: rotateY(180deg);
}

/* Card faces */
.kit-face {
  width: 100%;
  border-radius: 0;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  position: relative;
}
.kit-face img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
}
.kit-face-back {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  transform: rotateY(180deg);
}

/* Mouse-driven radial sheen */
.kit-sheen {
  position: absolute;
  inset: 0;
  border-radius: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  mix-blend-mode: overlay;
}

/* Auto sweeping highlight (brand challenge card only) */
.kit-sheen-sweep {
  position: absolute;
  top: 0; left: -100%;
  width: 55%;
  height: 100%;
  background: linear-gradient(105deg, transparent 25%, rgba(28, 20, 12,0.14) 50%, transparent 75%);
  pointer-events: none;
  border-radius: inherit;
  animation: kitSheenSweep 5s ease-in-out infinite;
}
@keyframes kitSheenSweep {
  0%         { left: -100%; opacity: 0; }
  8%         { opacity: 1; }
  55%        { left: 170%; opacity: 1; }
  65%, 100%  { left: 170%; opacity: 0; }
}

/* Flip hint pill */

/* Tap-here hint — centred overlay, white, fades on first tap */
.kit-tap-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.5s ease;
}
.kit-tap-hint.gone {
  opacity: 0;
}
/* Inner wrapper handles the bounce so it doesn't fight the centering */
.kit-tap-bounce {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  animation: kitTapBounce 1.8s ease-in-out infinite;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55));
}
.kit-tap-icon {
  font-size: 30px;
  line-height: 1;
  display: block;
  filter: brightness(0) invert(1); /* turn emoji white */
}
.kit-tap-label {
  font-family: 'Simplex Sans', monospace;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text);
  white-space: nowrap;
}
@keyframes kitTapBounce {
  0%, 100% { transform: translateY(0px);  }
  40%, 60%  { transform: translateY(-7px); }
}

/* Label below card */
.kit-card-label {
  font-family: 'Simplex Sans', monospace;
  font-size: 0.56rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text);
  text-align: center;
  margin-top: 10px;
  line-height: 1.55;
}

/* ══════════════════════════════════════════════
   SOFTWARE CARDS
══════════════════════════════════════════════ */
.sw-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}

.sw-card {
  background: rgba(28, 20, 12,0.03);
  border: 1px solid rgba(28, 20, 12,0.08);
  border-radius: 0;
  overflow: hidden;
}

.sw-card-hd {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px 9px;
  border-bottom: 1px solid rgba(28, 20, 12,0.06);
  background: rgba(28, 20, 12,0.02);
}
.sw-icon { font-size: 0.95rem; line-height: 1; }
.sw-title {
  font-family: 'Simplex Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
}

.sw-card-bd {
  padding: 11px 14px 13px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* Influencer */
.sw-submission { display: flex; align-items: center; gap: 9px; }
.sw-avatar { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; }
.sw-av-a { background: linear-gradient(135deg,#ff7a3c,#ffce81); }
.sw-av-b { background: linear-gradient(135deg,#6c63ff,#48bfe3); }
.sw-sub-info { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.sw-sub-name { font-size: 0.72rem; font-weight: 700; color: var(--text); }
.sw-sub-type { font-size: 0.65rem; color: rgba(28, 20, 12,0.45); }
.sw-badge {
  font-size: 0.6rem; font-weight: 700;
  padding: 2px 7px; border-radius: 0;
  white-space: nowrap; flex-shrink: 0;
}
.sw-badge-live    { background: rgba(34,197,94,0.14); color: #4ade80; border: 1px solid rgba(34,197,94,0.22); }
.sw-badge-pending { background: rgba(234,179,8,0.12); color: #facc15; border: 1px solid rgba(234,179,8,0.2); }

/* Challenger */
.sw-ch-row { display: flex; align-items: center; justify-content: space-between; }
.sw-ch-name { font-size: 0.72rem; color: rgba(28, 20, 12,0.8); }
.sw-tog {
  font-size: 0.58rem; font-weight: 800;
  letter-spacing: 0.08em; padding: 2px 7px; border-radius: 0;
}
.sw-tog.on {
  background: rgba(255,148,77,0.14);
  color: #FF7043;
  border: 1px solid rgba(255,148,77,0.22);
}

/* Analytics */
.sw-big-stat { display: flex; align-items: baseline; gap: 8px; }
.sw-big-num {
  font-family: 'Inter', sans-serif;
  font-size: 1.7rem; font-weight: 900;
  line-height: 1; letter-spacing: -0.03em;
}
.sw-big-lbl {
  font-size: 0.62rem; color: rgba(28, 20, 12,0.45);
  text-transform: uppercase; letter-spacing: 0.08em;
  font-family: 'Simplex Sans', monospace;
}
.sw-mini-bars {
  display: flex; align-items: flex-end;
  gap: 3px; height: 32px;
}
.sw-mini-bar {
  flex: 1; height: var(--bh);
  background: linear-gradient(to top, #ff7a3c, #ffce81);
  border-radius: 0;
  opacity: 0.75; min-height: 3px;
}

/* Shared */
.sw-divider { height: 1px; background: rgba(28, 20, 12,0.06); margin: 1px 0; }
.sw-foot {
  display: flex; justify-content: space-between;
  font-size: 0.68rem; color: rgba(28, 20, 12,0.55);
  font-family: 'Simplex Sans', monospace;
}

/* === Integration Marquee === */
.int-intro {
  font-size: 0.8rem;
  color: var(--text);
  line-height: 1.55;
  margin: 0;
}
.sw-integrations {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.int-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.int-row-label {
  font-family: 'Simplex Sans', monospace;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text);
}
.int-track-wrap {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
.int-track {
  display: flex;
  align-items: center;
  gap: 28px;
  width: max-content;
  animation: int-marquee 20s linear infinite;
}
/* Static integrations row — used when there's nothing to scroll. */
.int-static {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  width: 100%;
}
.int-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  min-width: 110px;
}
.int-item img {
  height: 38px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  background: rgba(28, 20, 12,0.92);
  padding: 10px 14px;
  border-radius: 0;
  display: block;
  box-sizing: content-box;
}
.int-name {
  font-family: 'Simplex Sans', sans-serif;
  font-size: 0.58rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  opacity: 0.9;
}
/* Names inside the marquee track keep the staggered fade — static rows
   read better with always-visible labels. */
.int-track .int-name {
  opacity: 0.15;
  animation: int-name-fade 2.4s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.35s);
}
@keyframes int-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes int-name-fade {
  0%, 100% { opacity: 0.15; }
  40%, 60% { opacity: 0.9; }
}

/* Integration feature card */
.int-feat-card {
  background: rgba(28, 20, 12,0.04);
  border: 1px solid rgba(28, 20, 12,0.1);
  border-radius: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.int-feat-title {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.int-feat-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.int-feat-list li {
  font-size: 0.82rem;
  color: var(--text);
  display: flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1.4;
}
.int-feat-list li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff7a3c, #ffce81);
  flex-shrink: 0;
  margin-top: 5px;
}
.int-feat-footer {
  font-size: 0.78rem;
  color: var(--text);
  line-height: 1.5;
  border-top: 1px solid rgba(28, 20, 12,0.08);
  padding-top: 12px;
}

.system-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  align-items: start;
}

.system-col {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

.system-col-head {
  border-top: 2px solid var(--accent-solid);
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.system-col-num {
  font-family: 'Simplex Sans', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--accent-solid);
}

.system-col-title {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1.1;
}

/* Phone fits within the Experience column */
.system-col .ch-phone-col { justify-content: flex-start; }
.system-col .ch-phone-frame { width: 100%; max-width: 340px; }

.ch-phone-col {
  display: flex;
  justify-content: center;
}

@keyframes scrollWheelMove {
  0%,8%  { transform: translateY(0);   opacity: 1; }
  55%    { transform: translateY(10px); opacity: 0.3; }
  70%,100% { transform: translateY(0); opacity: 1; }
}

@keyframes scrollHintLoop {
  0%   { opacity: 0; transform: translateX(-50%) translateY(0); }
  10%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  65%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  78%  { opacity: 0; transform: translateX(-50%) translateY(4px); }
  100% { opacity: 0; transform: translateX(-50%) translateY(0); }
}

.ch-phone-frame {
  width: 390px;
  aspect-ratio: 9 / 19;
  /* Phone-shaped — stays rounded even on the otherwise-square platform.
     The frame is an illustration of a physical phone, not a UI card. */
  border-radius: 42px;
  border: 2px solid transparent;
  background: linear-gradient(rgba(0,0,0,0.95), rgba(0,0,0,0.95)) padding-box,
              linear-gradient(145deg, #ffffff 0%, #b0b0b0 25%, #f0f0f0 50%, #707070 75%, #d0d0d0 100%) border-box;
  position: relative;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0,0,0,0.65);
}

.scroll-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 9;
  background: transparent;
  cursor: default;
}

.scroll-hint {
  position: absolute;
  bottom: 18%;
  left: 50%;
  z-index: 10;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  opacity: 0;
  animation: scrollHintLoop 3.2s ease-in-out 2s infinite;
}

.scroll-mouse {
  width: 22px;
  height: 36px;
  border: 2px solid rgba(28, 20, 12,0.85);
  border-radius: 0;
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: 5px;
}

.scroll-wheel {
  width: 3px;
  height: 7px;
  background: rgba(28, 20, 12,0.9);
  border-radius: 0;
  animation: scrollWheelMove 3.2s ease-in-out 2s infinite;
}

.scroll-label {
  font-family: 'Simplex Sans', monospace;
  font-size: 0.42rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: rgba(28, 20, 12,0.7);
  text-transform: uppercase;
}

.ch-phone-notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 24px;
  background: var(--black);
  /* Rounded bottom corners only — sits flush against the phone's top edge */
  border-radius: 0 0 12px 12px;
  z-index: 3;
}

.ch-brand-iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: #ffffff;
  display: block;
}



/* ══════════════════════════════════════════════
   ADMIN DASHBOARD
══════════════════════════════════════════════ */
.admin-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: stretch;
  gap: 48px;
}

/* Left column stretches to match the right column height — tab buttons
   distribute themselves across the available vertical space. */
.admin-copy {
  display: flex;
  flex-direction: column;
}

.admin-lede {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--text);
  margin: 0 0 28px;
  flex: 0 0 auto;
}

/* ── Left-side tab buttons — grow to match preview height ── */
.admin-tabs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
}
.admin-tab {
  appearance: none;
  width: 100%;
  text-align: left;
  padding: 18px 42px 18px 22px; /* right padding reserves arrow space */
  background:
    linear-gradient(180deg, #1a1a1c 0%, #131316 100%);
  border: 1px solid var(--border);
  border-radius: 0;
  font-family: 'Simplex Sans', sans-serif;
  cursor: pointer;
  position: relative;
  flex: 1;
  min-height: 64px;
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 16px;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.admin-tab-num {
  font-family: 'Simplex Sans', monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(28, 20, 12, 0.38);
  min-width: 18px;
  transition: color 0.18s ease;
}
.admin-tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(28, 20, 12, 0.5);
  flex-shrink: 0;
  transition: color 0.18s ease, transform 0.18s ease;
}
.admin-tab-icon svg { display: block; }
.admin-tab-label {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: rgba(28, 20, 12, 0.78);
  transition: color 0.18s ease;
}

.admin-tab:hover {
  background:
    linear-gradient(180deg, #1f1b1c 0%, #161318 100%);
  border-color: rgba(255, 206, 129, 0.32);
  transform: translateX(3px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
}
.admin-tab:hover .admin-tab-num   { color: rgba(28, 20, 12, 0.7); }
.admin-tab:hover .admin-tab-icon  { color: var(--accent-2); transform: scale(1.06); }
.admin-tab:hover .admin-tab-label { color: var(--text); }

.admin-tab.is-active {
  background:
    linear-gradient(rgba(20, 20, 24, 1), rgba(20, 20, 24, 1)) padding-box,
    linear-gradient(135deg, #ff7a3c, #ffce81) border-box;
  border-color: transparent;
  box-shadow: 0 0 22px rgba(255, 206, 129, 0.22);
  transform: translateX(0);
}
.admin-tab.is-active .admin-tab-num   { color: rgba(255, 206, 129, 0.9); }
.admin-tab.is-active .admin-tab-icon  { color: var(--accent-2); }
.admin-tab.is-active .admin-tab-label { color: var(--text); }
.admin-tab.is-active::after {
  content: '→';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(135deg, #ff7a3c, #ffce81);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font-weight: 700;
  font-size: 1.05rem;
}

/* ── Admin section preview — 6 panes, only one visible at a time ── */
.admin-preview {
  position: relative;
}
.admin-pane {
  display: none;
  flex-direction: column;
  gap: 0;
  animation: adminPaneFade 0.35s ease-out;
}
.admin-pane.is-active { display: flex; }
@keyframes adminPaneFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Staggered entry — when JS adds .animate-in to a pane on tab activation
   (after the section has scrolled into view), the inner data items rise
   into place with a small offset cascade. CSS handles the visual; JS
   handles the trigger so we can re-play it on every tab switch. */
.admin-pane.animate-in .dpk,
.admin-pane.animate-in .ugc-prev-card,
.admin-pane.animate-in .int-prev-card,
.admin-pane.animate-in .ch-prev-row,
.admin-pane.animate-in .sup-prev-card {
  animation: adminItemRise 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.admin-pane.animate-in .dpk:nth-child(1),
.admin-pane.animate-in .ugc-prev-card:nth-child(1),
.admin-pane.animate-in .int-prev-card:nth-child(1),
.admin-pane.animate-in .ch-prev-row:nth-child(1),
.admin-pane.animate-in .sup-prev-card:nth-child(1) { animation-delay: 0.08s; }
.admin-pane.animate-in .dpk:nth-child(2),
.admin-pane.animate-in .ugc-prev-card:nth-child(2),
.admin-pane.animate-in .int-prev-card:nth-child(2),
.admin-pane.animate-in .ch-prev-row:nth-child(2),
.admin-pane.animate-in .sup-prev-card:nth-child(2) { animation-delay: 0.16s; }
.admin-pane.animate-in .dpk:nth-child(3),
.admin-pane.animate-in .ugc-prev-card:nth-child(3),
.admin-pane.animate-in .int-prev-card:nth-child(3),
.admin-pane.animate-in .ch-prev-row:nth-child(3),
.admin-pane.animate-in .sup-prev-card:nth-child(3) { animation-delay: 0.24s; }
.admin-pane.animate-in .dpk:nth-child(4),
.admin-pane.animate-in .int-prev-card:nth-child(4),
.admin-pane.animate-in .ch-prev-row:nth-child(4)  { animation-delay: 0.32s; }
.admin-pane.animate-in .ch-prev-row:nth-child(5)  { animation-delay: 0.4s; }
@keyframes adminItemRise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .admin-pane.animate-in .dpk,
  .admin-pane.animate-in .ugc-prev-card,
  .admin-pane.animate-in .int-prev-card,
  .admin-pane.animate-in .ch-prev-row,
  .admin-pane.animate-in .sup-prev-card {
    animation: none;
  }
}

/* Picture box — the CSS facsimile of the dashboard section */
.admin-pane-img {
  background: #0e0e10;
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55);
  font-family: 'Simplex Sans', sans-serif;
  color: var(--text);
}

/* Caption — separate gradient-orange card, sits below the picture
   with breathing room so the two read as distinct pieces. */
.admin-pane-caption {
  background:
    linear-gradient(rgba(20, 20, 24, 1), rgba(20, 20, 24, 1)) padding-box,
    linear-gradient(135deg, #ff7a3c, #ffce81) border-box;
  border: 1.5px solid transparent;
  margin-top: 18px;
  padding: 20px 22px 22px;
  box-shadow: 0 0 22px rgba(255, 206, 129, 0.18);
}
.admin-pane-caption h4 {
  font-family: 'Simplex Sans', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
  letter-spacing: -0.005em;
}
.admin-pane-caption p {
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(28, 20, 12, 0.72);
  margin: 0;
}
.admin-pane-caption p strong { color: var(--text); font-weight: 700; }

.dash-preview-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: rgba(28, 20, 12, 0.015);
}
.dash-preview-brand {
  font-size: 0.78rem;
  letter-spacing: -0.005em;
  color: rgba(28, 20, 12, 0.78);
}
.dash-preview-brand strong { color: var(--text); font-weight: 700; }
.dash-preview-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Simplex Sans', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5dd68c;
}
.dash-preview-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5dd68c;
  box-shadow: 0 0 6px rgba(93, 214, 140, 0.6);
  animation: dashLivePulse 2s ease-in-out infinite;
}
@keyframes dashLivePulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 6px  rgba(93, 214, 140, 0.55); }
  50%      { transform: scale(1.4);  box-shadow: 0 0 12px rgba(93, 214, 140, 0.9), 0 0 20px rgba(93, 214, 140, 0.25); }
}
@media (prefers-reduced-motion: reduce) {
  .dash-preview-dot { animation: none; }
}

.dash-preview-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dash-preview-section-label {
  font-family: 'Simplex Sans', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(28, 20, 12, 0.45);
  margin-top: 4px;
}
.dash-preview-section-label:first-child { margin-top: 0; }

/* Tap Rate hero — gradient orange border + soft glow, mirrors
   dashboard.html .tap-rate-hero */
.dash-preview-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(rgba(20, 20, 24, 0.7), rgba(20, 20, 24, 0.7)) padding-box,
    linear-gradient(135deg, #ff7a3c, #ffce81) border-box;
  box-shadow: 0 0 22px rgba(255, 206, 129, 0.22);
}
.dash-preview-hero-num {
  font-weight: 800;
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: -0.035em;
  background: linear-gradient(135deg, #ff7a3c, #ffce81);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.dash-preview-hero-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dash-preview-hero-meta strong {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text);
}
.dash-preview-hero-meta span {
  font-size: 0.74rem;
  color: rgba(28, 20, 12, 0.62);
  line-height: 1.4;
}
.dash-preview-hero-meta span b { color: var(--text); font-weight: 700; }

/* 4 KPI cards in a row — mirrors dashboard.html .kpi-card layout */
.dash-preview-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.dpk {
  position: relative;
  padding: 14px 14px 12px;
  background: rgba(28, 20, 12, 0.02);
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow:
    0 0 14px rgba(255, 206, 129, 0.15),
    inset 0 1px 0 rgba(28, 20, 12, 0.04);
}
.dpk::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1.5px;
  background: linear-gradient(135deg, #ff7a3c 0%, #ffce81 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.dpk-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(28, 20, 12, 0.78);
}
.dpk-num {
  font-weight: 800;
  font-size: 1.85rem;
  line-height: 1;
  letter-spacing: -0.035em;
  background: linear-gradient(135deg, #ff7a3c, #ffce81);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
  margin: 2px 0 2px;
}
.dpk-sub {
  font-size: 0.66rem;
  color: rgba(28, 20, 12, 0.55);
  line-height: 1.35;
}

/* Mini funnel — three stages with a gradient bar fill */
.dash-preview-funnel {
  display: flex;
  flex-direction: column;
  background: rgba(28, 20, 12, 0.02);
  border: 1px solid var(--border);
}
.dpf {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.dpf:last-child { border-bottom: none; }
.dpf-label {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text);
  min-width: 84px;
}
.dpf-bar {
  height: 6px;
  background: rgba(28, 20, 12, 0.06);
  position: relative;
}
.dpf-bar-fill {
  height: 100%;
  background: linear-gradient(135deg, #ff7a3c, #ffce81);
}
.dpf-num {
  font-family: 'Simplex Sans', monospace;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ── UGC pane preview ── */
.ugc-prev-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(28, 20, 12, 0.02);
  border: 1px solid var(--border);
  margin-bottom: 14px;
}
.ugc-prev-chip {
  padding: 5px 11px;
  font-size: 0.7rem;
  font-weight: 500;
  color: rgba(28, 20, 12, 0.55);
  background: rgba(28, 20, 12, 0.03);
  border: 1px solid var(--border);
}
.ugc-prev-chip.is-active {
  background: linear-gradient(135deg, #ff7a3c, #ffce81);
  color: var(--text);
  border-color: transparent;
  font-weight: 600;
  box-shadow: 0 4px 10px rgba(255, 122, 60, 0.22);
}
.ugc-prev-sep { width: 1px; height: 18px; background: var(--border-mid); }
.ugc-prev-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.ugc-prev-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(28, 20, 12, 0.02);
  border: 1px solid var(--border);
  padding: 10px;
}
.ugc-prev-thumb {
  aspect-ratio: 4 / 3;
  position: relative;
  background: linear-gradient(135deg, rgba(255, 122, 60, 0.1), rgba(255, 206, 129, 0.1));
  overflow: hidden;
}
.ugc-prev-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ugc-prev-badge {
  position: absolute;
  top: 6px; right: 6px;
  padding: 2px 6px;
  font-family: 'Simplex Sans', monospace;
  font-size: 0.52rem;
  letter-spacing: 0.06em;
  color: rgba(28, 20, 12, 0.85);
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(28, 20, 12, 0.1);
}
.ugc-prev-handle {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
}
.ugc-prev-meta {
  font-family: 'Simplex Sans', monospace;
  font-size: 0.6rem;
  color: rgba(28, 20, 12, 0.45);
}
.ugc-prev-dl {
  display: block;
  margin-top: 6px;
  padding: 6px 10px;
  background: linear-gradient(135deg, #ff7a3c, #ffce81);
  color: var(--text);
  font-size: 0.7rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.02em;
  box-shadow: 0 3px 10px rgba(255, 122, 60, 0.22);
}

/* ── Challenge Settings pane preview ── */
.ch-prev-list {
  display: flex; flex-direction: column;
  background: rgba(28, 20, 12, 0.02);
  border: 1px solid var(--border);
}
.ch-prev-row {
  display: grid;
  grid-template-columns: auto 1fr 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.ch-prev-row:last-child { border-bottom: none; }
.ch-prev-icon { font-size: 1.1rem; line-height: 1; }
.ch-prev-name { font-size: 0.86rem; font-weight: 600; color: var(--text); }
.ch-prev-slider {
  position: relative;
  height: 6px;
  background: rgba(28, 20, 12, 0.07);
}
.ch-prev-slider-fill {
  position: absolute; inset: 0 auto 0 0;
  background: linear-gradient(135deg, #ff7a3c, #ffce81);
  width: 0;
  transition: width 800ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ch-prev-val {
  font-family: 'Simplex Sans', monospace;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  min-width: 38px;
  text-align: right;
}

/* ── Integrations & Health pane preview ── */
.int-prev-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.int-prev-card {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(28, 20, 12, 0.02);
  border: 1.5px solid transparent;
  overflow: hidden;
}
.int-prev-card.int-prev-ok {
  background:
    linear-gradient(rgba(20, 32, 24, 0.5), rgba(20, 32, 24, 0.5)) padding-box,
    linear-gradient(135deg, #5dd68c, #2e8a4f) border-box;
  box-shadow: 0 0 16px rgba(93, 214, 140, 0.18);
}
.int-prev-card strong {
  display: block;
  font-size: 0.82rem;
  color: var(--text);
  margin-bottom: 1px;
}
.int-prev-card span {
  font-size: 0.66rem;
  color: rgba(28, 20, 12, 0.55);
  font-family: 'Simplex Sans', monospace;
}
.int-prev-logo {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: #ffffff;
  padding: 4px;
  overflow: hidden;
}
.int-prev-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* Klaviyo + Mailchimp logos already have white/light backgrounds in
   their source files — same white tile keeps the look consistent. */
.int-prev-logo-light { background: #ffffff; }
.int-prev-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #5dd68c;
  box-shadow: 0 0 8px rgba(93, 214, 140, 0.7);
}

/* ── Re-order kits pane preview ── */
.ord-prev {
  background:
    linear-gradient(rgba(20, 20, 24, 1), rgba(20, 20, 24, 1)) padding-box,
    linear-gradient(135deg, #ff7a3c, #ffce81) border-box;
  border: 1.5px solid transparent;
  padding: 22px 24px;
  box-shadow: 0 0 22px rgba(255, 206, 129, 0.18);
}
.ord-prev-head {
  font-family: 'Simplex Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(28, 20, 12, 0.55);
  margin-bottom: 14px;
}
.ord-prev-qty {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 14px;
}
.ord-prev-qty-num {
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  background: linear-gradient(135deg, #ff7a3c, #ffce81);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.ord-prev-qty-lbl {
  font-size: 0.82rem;
  color: rgba(28, 20, 12, 0.68);
}
.ord-prev-slider {
  position: relative;
  height: 6px;
  background: rgba(28, 20, 12, 0.07);
  margin-bottom: 18px;
}
.ord-prev-slider-fill {
  position: absolute; inset: 0 auto 0 0;
  background: linear-gradient(135deg, #ff7a3c, #ffce81);
  width: 0;
  transition: width 800ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ord-prev-total {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-top: 14px; border-top: 1px solid var(--border);
  margin-bottom: 18px;
}
.ord-prev-total span {
  font-family: 'Simplex Sans', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(28, 20, 12, 0.55);
}
.ord-prev-total strong {
  font-size: 1.4rem; font-weight: 800; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.ord-prev-cta {
  display: block;
  padding: 12px 18px;
  background: linear-gradient(135deg, #ff7a3c, #ffce81);
  color: var(--text);
  font-weight: 700;
  font-size: 0.9rem;
  text-align: center;
  box-shadow: 0 4px 14px rgba(255, 122, 60, 0.28);
}

/* ── Support pane preview — 3 contact-channel cards in a row ── */
.sup-prev-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.sup-prev-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 18px 16px;
  background: rgba(28, 20, 12, 0.02);
  border: 1px solid var(--border);
  position: relative;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.sup-prev-card:hover {
  border-color: rgba(255, 206, 129, 0.32);
  background: rgba(255, 206, 129, 0.025);
}
.sup-prev-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(255, 122, 60, 0.12), rgba(255, 206, 129, 0.12));
  border: 1px solid rgba(255, 206, 129, 0.28);
  color: var(--accent-2);
  flex-shrink: 0;
}
.sup-prev-icon svg { display: block; }
.sup-prev-body { display: flex; flex-direction: column; gap: 4px; }
.sup-prev-body strong {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.005em;
}
.sup-prev-body span {
  font-size: 0.74rem;
  line-height: 1.4;
  color: rgba(28, 20, 12, 0.6);
}
/* Action chip — non-clickable placeholder until WhatsApp number +
   Cal.com booking link are finalised. Styled to look like a button
   but with cursor:default + aria-disabled, so visitors clearly see
   the channel exists without expecting interaction yet. */
.sup-prev-action {
  margin-top: auto;
  align-self: stretch;
  padding: 8px 12px;
  background: rgba(28, 20, 12, 0.03);
  border: 1px solid var(--border);
  font-family: 'Simplex Sans', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: var(--accent-2);
  text-align: center;
  cursor: default;
  opacity: 0.65;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
a.sup-prev-action-link {
  text-decoration: none;
  cursor: pointer;
  opacity: 1;
  background: rgba(255, 206, 129, 0.06);
  border-color: rgba(255, 206, 129, 0.35);
  font-weight: 700;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
}
a.sup-prev-action-link:hover {
  background: rgba(255, 206, 129, 0.10);
  border-color: rgba(255, 206, 129, 0.55);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(255, 122, 60, 0.18);
}
@media (max-width: 900px) {
  .sup-prev-grid { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════
   PRICING — REDESIGN
══════════════════════════════════════════════ */

/* .pc-badge reused on plan-card */
.pc-badge {
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  padding: 4px 14px;
  border-radius: 0;
  background: var(--surface3);
  border: 1px solid var(--border-mid);
  font-family: 'Simplex Sans', monospace;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text);
  white-space: nowrap;
}

/* ── PILOT BANNER ── */
.pilot-banner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  background: rgba(255, 122, 60, 0.03) padding-box,
              linear-gradient(135deg, rgba(255,122,60,0.38), rgba(255,206,129,0.28)) border-box;
  border: 1px solid transparent;
  border-radius: 0;
  padding: 48px 52px;
  margin-bottom: 16px;
  align-items: center;
}

.pilot-badge {
  display: inline-flex;
  padding: 4px 13px;
  background: rgba(255, 148, 77, 0.12);
  border: 1px solid rgba(255, 148, 77, 0.32);
  border-radius: 0;
  font-family: 'Simplex Sans', monospace;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-solid);
  margin-bottom: 14px;
}

.pilot-name {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 2.2rem;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: 10px;
  line-height: 1.05;
}

.pilot-tagline {
  font-size: 1rem;
  color: var(--text);
  margin-bottom: 28px;
  line-height: 1.65;
  max-width: 420px;
}

.pilot-price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 22px;
}

.pilot-amount {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 4rem;
  line-height: 1;
  letter-spacing: -0.04em;
}

.pilot-price-label {
  font-size: 0.78rem;
  color: var(--text);
  line-height: 1.4;
}

.pilot-breakdown {
  display: flex;
  flex-direction: column;
  gap: 9px;
  background: rgba(28, 20, 12, 0.03);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 16px 18px;
  margin-bottom: 18px;
}

.pilot-break-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-size: 0.95rem;
  color: var(--text);
}

.pilot-break-row > span:first-child { flex-shrink: 0; }

.pil-incl {
  color: var(--accent-solid);
  font-weight: 600;
  white-space: nowrap;
}

.pil-was {
  text-decoration: line-through;
  color: rgba(28, 20, 12, 0.55);
  font-weight: 400;
  font-size: 0.72rem;
  margin-left: 5px;
}

.pil-price {
  color: var(--text);
  font-weight: 700;
}

.pilot-restriction {
  font-size: 0.7rem;
  color: var(--accent-solid);
  margin-bottom: 26px;
  line-height: 1.55;
}

.pilot-right {
  display: flex;
  flex-direction: column;
}

.pilot-includes-title {
  font-family: 'Simplex Sans', monospace;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text);
  margin-bottom: 22px;
}

.pilot-includes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 24px;
}

.pilot-include-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.pil-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.pilot-include-item > div { display: flex; flex-direction: column; gap: 3px; }

.pilot-include-item strong {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.pilot-include-item span {
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.3;
}

/* ── PLAN CARDS ── */
.plan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.plan-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 36px 32px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: border-color var(--dur) var(--ease);
}

.plan-card:hover { border-color: var(--border-mid); }

.plan-card.plan-featured {
  background: rgba(255, 122, 60, 0.02) padding-box,
              linear-gradient(135deg, rgba(255,122,60,0.45), rgba(255,206,129,0.3)) border-box;
  border: 1px solid transparent;
}

.plan-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.plan-name {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 1.7rem;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: 6px;
  line-height: 1;
}

.plan-sub {
  font-family: 'Simplex Sans', sans-serif;
  font-size: 0.9rem;
  color: var(--text);
  letter-spacing: 0;
  line-height: 1.4;
}

.plan-price-block { text-align: right; flex-shrink: 0; }

.plan-amount {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--text);
  letter-spacing: -0.04em;
}

.plan-percard {
  font-family: 'Simplex Sans', sans-serif;
  font-size: 0.88rem;
  color: var(--text);
  margin-top: 6px;
  line-height: 1.4;
}

.plan-breakdown {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 20px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.plan-break-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  font-size: 0.95rem;
  color: var(--text);
}

.plan-break-row > span:first-child { flex-shrink: 0; }

.plan-break-free {
  color: var(--accent-solid);
  font-weight: 600;
  text-align: right;
}

.plan-break-note {
  display: block;
  font-size: 0.63rem;
  color: var(--text);
  font-weight: 400;
  line-height: 1.45;
  margin-top: 3px;
}

.plan-partner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: linear-gradient(135deg, rgba(255,122,60,0.14), rgba(255,206,129,0.1));
  border: 1px solid rgba(255, 148, 77, 0.4);
  border-radius: 0;
  padding: 18px 20px;
  margin-bottom: 24px;
}

.plan-partner-tag {
  font-family: 'Simplex Sans', monospace;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-solid);
  font-weight: 700;
}

.plan-partner-val {
  font-family: 'Inter', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* ── PARTNERSHIP CARD ── */
.partnership-card {
  background: rgba(255, 122, 60, 0.025) padding-box,
              linear-gradient(135deg, rgba(255,122,60,0.45), rgba(255,206,129,0.3)) border-box;
  border: 1px solid transparent;
  border-radius: 0;
  padding: 48px 52px;
  margin-bottom: 16px;
}

.partnership-inner {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 56px;
  align-items: start;
}

.partnership-left {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.partnership-badge {
  display: inline-flex;
  padding: 4px 13px;
  background: rgba(255, 148, 77, 0.12);
  border: 1px solid rgba(255, 148, 77, 0.32);
  border-radius: 0;
  font-family: 'Simplex Sans', monospace;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-solid);
  margin-bottom: 16px;
  width: fit-content;
}

.partnership-name {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1.05;
  margin-bottom: 10px;
}

.partnership-sub {
  font-family: 'Simplex Sans', sans-serif;
  font-size: 0.97rem;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 28px;
}

.partnership-saas {
  display: flex;
  flex-direction: column;
  background: rgba(28, 20, 12, 0.03);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 4px 22px;
  margin-bottom: 22px;
}

.ps-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.ps-row:last-child { border-bottom: none; }

.ps-label {
  font-family: 'Simplex Sans', sans-serif;
  font-size: 1rem;
  color: var(--text);
  flex-shrink: 0;
}

.ps-price-block {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.ps-amount {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 2.2rem;
  line-height: 1;
  letter-spacing: -0.03em;
}

.ps-period {
  font-family: 'Simplex Sans', sans-serif;
  font-size: 1rem;
  color: var(--text);
}

.ps-setup {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.ps-free {
  color: var(--accent-solid);
  font-weight: 600;
  font-size: 1rem;
}

.ps-note {
  font-size: 0.88rem;
  color: var(--text);
  font-weight: 400;
  margin-left: 5px;
}

.ps-or {
  font-family: 'Simplex Sans', sans-serif;
  font-size: 0.95rem;
  color: var(--text);
}

.partnership-clarify {
  font-family: 'Simplex Sans', sans-serif;
  font-size: 1rem;
  color: var(--text);
  line-height: 1.65;
  margin-bottom: 28px;
}

.partnership-clarify strong {
  color: var(--text);
  font-weight: 700;
}

.partnership-cta {
  display: block;
  width: 100%;
  text-align: center;
  justify-content: center;
  box-sizing: border-box;
}

/* ── HARDWARE SELECTOR ── */
.hw-selector {
  background: rgba(28, 20, 12, 0.03);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 28px 32px;
}

.hw-selector-label {
  display: block;
  font-family: 'Simplex Sans', monospace;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-solid);
  font-weight: 700;
  margin-bottom: 24px;
}

/* ── Numbers above slider — open, no box ── */
.hw-display {
  display: flex;
  gap: 0;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.hw-display-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  padding-right: 24px;
  border-right: 1px solid var(--border);
  margin-right: 24px;
}

.hw-display-col:last-child {
  border-right: none;
  padding-right: 0;
  margin-right: 0;
}

.hw-display-label {
  font-family: 'Simplex Sans', monospace;
  font-size: 0.52rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(28, 20, 12,0.5);
  font-weight: 700;
}

.hw-display-val {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 2rem;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1;
  transition: opacity 0.1s ease;
}

/* ── HARDWARE SLIDER ── */
.hw-slider-wrap {
  margin-bottom: 20px;
}

.hw-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 0;
  background: #f4e8dc;
  outline: none;
  cursor: pointer;
  display: block;
}

.hw-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff7a3c, #ffce81);
  cursor: pointer;
  border: 2.5px solid #000000;
  box-shadow: 0 0 10px rgba(255, 148, 77, 0.55);
  transition: box-shadow 0.15s;
}

.hw-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff7a3c, #ffce81);
  cursor: pointer;
  border: 2.5px solid #000000;
  box-shadow: 0 0 10px rgba(255, 148, 77, 0.55);
  transition: box-shadow 0.15s;
}

.hw-slider::-webkit-slider-thumb:hover { box-shadow: 0 0 16px rgba(255, 148, 77, 0.8); }
.hw-slider::-moz-range-thumb:hover     { box-shadow: 0 0 16px rgba(255, 148, 77, 0.8); }

.hw-note {
  font-family: 'Simplex Sans', sans-serif;
  font-size: 0.88rem;
  color: rgba(28, 20, 12,0.55);
  line-height: 1.6;
  margin-top: 4px;
}

/* ── FEATURE BREAKDOWN ── */
/* ══ FEATURE BREAKDOWN — 4 premium cards in a row ══ */
.feat-breakdown {
  background: transparent;
  border: none;
  padding: 0;
  margin-top: 64px;
  scroll-margin-top: 90px;
}

.feat-breakdown-header {
  text-align: center;
  margin-bottom: 36px;
}

.feat-breakdown-title {
  font-family: 'Simplex Sans', sans-serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 0;
}

.feat-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.feat-card {
  background: linear-gradient(180deg, #1a1a1c 0%, #131316 100%);
  border: 1px solid rgba(28, 20, 12, 0.10);
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.feat-card:hover {
  border-color: rgba(255, 206, 129, 0.32);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.feat-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.feat-card-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(255, 122, 60, 0.12), rgba(255, 206, 129, 0.12));
  border: 1px solid rgba(255, 206, 129, 0.32);
  color: var(--accent-2);
  flex-shrink: 0;
}
.feat-card-icon svg { display: block; }

.feat-card-title {
  font-family: 'Simplex Sans', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
}

.feat-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.feat-card-list li {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.feat-card-list li strong {
  font-family: 'Simplex Sans', sans-serif;
  font-weight: 600;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--text);
}
.feat-card-list li > span {
  font-family: 'Simplex Sans', sans-serif;
  font-size: 0.72rem;
  line-height: 1.45;
  color: rgba(28, 20, 12, 0.55);
}

/* Designer note at the bottom of the Graphic design card */
.feat-card-note {
  margin-top: auto;
  padding-top: 16px;
  margin-bottom: 0;
  font-family: 'Simplex Sans', sans-serif;
  font-size: 0.72rem;
  line-height: 1.5;
  color: rgba(28, 20, 12, 0.5);
  font-style: italic;
}
.feat-card:has(.feat-card-note) .feat-card-list { margin-bottom: 16px; }

/* ── PRICING ANIMATIONS ── */
@keyframes pricing-shimmer {
  0%   { left: -80%; }
  100% { left: 160%; }
}

.btn-glow-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 24px;
  padding: 15px 24px;
  border-radius: 0;
  font-family: 'Simplex Sans', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
  text-decoration: none;
  background: linear-gradient(135deg, #ff7a3c, #ffce81);
  position: relative;
  overflow: hidden;
  transition: opacity var(--dur) var(--ease);
}

.btn-glow-cta::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(28, 20, 12,0.22), transparent);
  animation: pricing-shimmer 2.8s ease-in-out infinite;
  pointer-events: none;
}

.btn-glow-cta:hover { opacity: 0.85; }


/* ══════════════════════════════════════════════
   FAQ — 3 categories (Product · Dashboard · Billing) side-by-side
   in one row, each column with 5 accordion items. Click to expand.
══════════════════════════════════════════════ */
.faq-groups {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}
.faq-group { display: flex; flex-direction: column; gap: 14px; }
.faq-group-title {
  font-family: 'Simplex Sans', sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  text-transform: none;
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 206, 129, 0.18);
  background: linear-gradient(135deg, #ff7a3c, #ffce81);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  width: fit-content;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Tablet and mobile: stack to single column since 3-wide is too
   tight for the question text to read well. */
@media (max-width: 1024px) {
  .faq-groups {
    grid-template-columns: 1fr;
    max-width: 780px;
    gap: 36px;
  }
}

/* Each .faq-item is a native <details>. Open/close handled by the
   browser — zero JS, bulletproof against cache / script errors. */
.faq-item {
  background: linear-gradient(180deg, #1a1a1c 0%, #131316 100%);
  border: 1px solid var(--border);
  border-radius: 0;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.faq-item:hover { border-color: rgba(255, 206, 129, 0.22); }
.faq-item[open] { border-color: rgba(255, 206, 129, 0.35); }

/* <summary> = the question. Strip the default browser disclosure
   marker, restyle as our row layout. */
.faq-q {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  font-family: 'Simplex Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.4;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: color 0.18s ease;
  user-select: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::marker { display: none; }
.faq-q:hover { color: var(--text); }
.faq-q:focus-visible { outline: 2px solid var(--accent-2); outline-offset: -2px; }

.faq-icon {
  width: 20px; height: 20px;
  flex-shrink: 0;
  color: rgba(28, 20, 12, 0.55);
  transition: transform 0.3s var(--ease), color 0.18s ease;
}
.faq-item:hover .faq-icon { color: var(--accent-2); }
.faq-item[open] .faq-icon {
  transform: rotate(45deg);
  color: var(--accent-2);
}

.faq-body p {
  padding: 0 18px 18px;
  font-family: 'Simplex Sans', sans-serif;
  font-size: 0.8rem;
  line-height: 1.6;
  color: rgba(28, 20, 12, 0.74);
  margin: 0;
}
.faq-body p strong { color: var(--text); font-weight: 700; }

.faq-body::before {
  content: '';
  display: block;
  height: 1px;
  background: rgba(255, 206, 129, 0.18);
  margin: 0 18px 14px;
}


/* ══════════════════════════════════════════════
   CTA SECTION
══════════════════════════════════════════════ */
.cta-box {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 88px 40px;
  text-align: center;
  overflow: hidden;
}

.cta-glow { display: none; }

.cta-box h2 { margin-bottom: 18px; }
.cta-box p  { max-width: 480px; margin: 0 auto 40px; font-size: 1.05rem; }

.cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}


/* ══════════════════════════════════════════════
   BECOME A PARTNER — modal + form
   Triggered from the pricing card. Posts to formsubmit.co.
══════════════════════════════════════════════ */
.partner-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: pm-fade 0.18s ease-out;
}

@keyframes pm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pm-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.partner-modal[hidden] { display: none; }

.partner-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.partner-modal-card {
  position: relative;
  width: 100%;
  max-width: 720px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 56px 48px 48px;
  animation: pm-rise 0.22s ease-out;
}

.partner-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(28, 20, 12, 0.06);
  border: 1px solid rgba(28, 20, 12, 0.12);
  border-radius: 50%;
  color: var(--text);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.partner-modal-close:hover {
  background: rgba(255, 122, 60, 0.18);
  border-color: rgba(255, 206, 129, 0.5);
}

.partner-modal-header {
  text-align: center;
  margin-bottom: 28px;
}
.partner-modal-header h2 {
  margin: 0 0 12px;
  font-size: 1.6rem;
  line-height: 1.2;
}
.partner-modal-header p {
  margin: 0;
  color: var(--text);
  font-size: 0.98rem;
  line-height: 1.5;
  max-width: 480px;
  margin: 0 auto;
}

/* ── SECTIONS ── */
.pf-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
.pf-section:first-of-type { padding-top: 0; border-top: none; }

.pf-section-title {
  font: 700 0.92rem/1.2 'Simplex Sans', sans-serif;
  color: var(--text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}

/* Brand Information section — soft gradient-orange border + steady soft
   glow. Previously a full gradient-on-tinted-bg card with a pulse — too
   loud for the eye next to the rest of the form, so we tone it down to
   just a border + ambient glow. */
.pf-section-pulse {
  position: relative;
  /* override the .pf-section default top-only divider, give it all-round
     gradient border via the padding-box / border-box trick */
  border: 1.5px solid transparent;
  border-radius: 0;
  padding: 22px;
  background:
    linear-gradient(rgba(28, 20, 12, 0.02), rgba(28, 20, 12, 0.02)) padding-box,
    linear-gradient(135deg, #ff7a3c, #ffce81) border-box;
  box-shadow: 0 0 18px 0 rgba(255, 206, 129, 0.16);
}

/* Info card inside Brand Information — neutral surface, no extra orange
   border (the section's outer glow already carries the brand colour). */
.pf-info-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: 0;
  background: rgba(28, 20, 12, 0.02);
  border: 1px solid rgba(28, 20, 12, 0.08);
}
.pf-info-card-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff7a3c, #ffce81);
  color: var(--text);
}
.pf-info-card p {
  margin: 0;
  font: 400 0.92rem/1.55 'Simplex Sans', sans-serif;
  color: var(--text);
}
.pf-info-card strong { color: var(--text); font-weight: 700; }

/* Kit selector inside the modal — reuses .hw-* styles from pricing */
.pf-kit-selector {
  background: rgba(28, 20, 12, 0.025);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 22px 24px;
}

/* Payment summary card */
.pf-summary {
  background: rgba(28, 20, 12, 0.03);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Each line item is a wrapper that lets us show a detail line below the
   label/value row. Without the wrapper, the row would have to grow and
   the price would no longer align to the right of the label. */
.pf-summary-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pf-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font: 400 0.95rem/1.4 'Simplex Sans', sans-serif;
}
.pf-summary-label {
  color: var(--text);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.pf-summary-val   { color: var(--text); font-weight: 600; white-space: nowrap; }

/* Sub-text under each line item — what the cost includes */
.pf-summary-detail {
  margin: 0;
  font: 400 0.82rem/1.55 'Simplex Sans', sans-serif;
  color: var(--text);
}
.pf-summary-detail strong { color: var(--text); font-weight: 700; }

/* "Paid once · never again" badge next to the setup fee label */
.pf-summary-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 0;
  font: 700 0.66rem/1 'Simplex Sans', monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  background: linear-gradient(135deg, #ff7a3c, #ffce81);
  white-space: nowrap;
}

.pf-summary-divider {
  height: 1px;
  background: rgba(28, 20, 12, 0.12);
  margin: 0;
}
.pf-summary-total .pf-summary-label {
  color: var(--text);
  font-weight: 700;
  font-size: 1.05rem;
}
.pf-summary-total .pf-summary-val {
  font-size: 1.4rem;
  font-weight: 800;
}
.pf-summary-recurring {
  margin: 0;
  text-align: center;
  font: 400 0.82rem/1.55 'Simplex Sans', sans-serif;
  color: var(--text);
  padding: 10px 0 0;
  border-top: 1px dashed rgba(28, 20, 12, 0.12);
}
.pf-summary-recurring strong { color: var(--text); font-weight: 700; }

/* Fake payment screen */
.partner-pay {
  text-align: center;
}
.partner-pay .partner-modal-header { margin-bottom: 24px; }
.pf-pay-summary { text-align: left; margin-bottom: 24px; }
.pf-pay-btn {
  width: 100%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 18px 28px !important;
  font-size: 1.02rem !important;
  cursor: pointer;
}
.pf-pay-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.pf-pay-back {
  display: block;
  margin: 14px auto 0;
  padding: 8px 14px;
  background: none;
  border: none;
  color: var(--text);
  opacity: 0.7;
  font: 500 0.88rem/1 'Simplex Sans', sans-serif;
  cursor: pointer;
  transition: opacity 0.18s ease;
}
.pf-pay-back:hover { opacity: 1; }

/* ── FORM ── */
.partner-form {
  display: flex;
  flex-direction: column;
  gap: 30px;
  text-align: left;
}

.partner-form .pf-honey {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.pf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.pf-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.pf-field label {
  font: 600 0.78rem/1.3 'Simplex Sans', sans-serif;
  color: var(--text);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.pf-req { color: #ffce81; margin-left: 2px; }

.pf-field input[type="text"],
.pf-field input[type="email"],
.pf-field input[type="url"],
.pf-field input[type="tel"],
.pf-field select,
.pf-field textarea {
  width: 100%;
  padding: 13px 16px;
  font: 400 0.95rem/1.4 'Simplex Sans', sans-serif;
  color: var(--text);
  background-color: #f4e8dc;
  border: 1px solid rgba(28, 20, 12, 0.12);
  border-radius: 0;
  outline: none;
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
}

.pf-field input::placeholder,
.pf-field textarea::placeholder {
  color: rgba(28, 20, 12, 0.35);
}

.pf-field input:hover,
.pf-field select:hover,
.pf-field textarea:hover {
  border-color: rgba(28, 20, 12, 0.22);
}

.pf-field input:focus,
.pf-field select:focus,
.pf-field textarea:focus {
  border-color: #ffce81;
  background-color: #f4e8dc;
  box-shadow: 0 0 0 3px rgba(255, 206, 129, 0.18);
}

/* Override Chrome / Edge autofill — keeps the dark grey bg + white text
   when the browser fills saved data (otherwise it forces a light blue bg). */
.pf-field input:-webkit-autofill,
.pf-field input:-webkit-autofill:hover,
.pf-field input:-webkit-autofill:focus,
.pf-field input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--text) !important;
  -webkit-box-shadow: 0 0 0 1000px #1c1c1c inset !important;
  caret-color: var(--text);
  transition: background-color 100000s ease-in-out 0s;
}

.pf-field select {
  background-color: #f4e8dc;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 12px;
  padding-right: 40px;
  cursor: pointer;
}
.pf-field select option {
  background-color: #f4e8dc;
  color: var(--text);
}

.pf-field textarea {
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
}

.pf-field-file input[type="file"] {
  font: 400 0.9rem/1.4 'Simplex Sans', sans-serif;
  color: var(--text);
  padding: 12px 16px;
  background-color: #f4e8dc;
  border: 1px solid rgba(28, 20, 12, 0.12);
  border-radius: 0;
  cursor: pointer;
  width: 100%;
  transition: border-color 0.18s ease;
}
.pf-field-file input[type="file"]:hover {
  border-color: rgba(28, 20, 12, 0.22);
}
.pf-field-file input[type="file"]::file-selector-button {
  padding: 8px 14px;
  margin-right: 14px;
  font: 600 0.82rem/1 'Simplex Sans', sans-serif;
  color: var(--text);
  background: linear-gradient(135deg, #ff7a3c, #ffce81);
  border: none;
  border-radius: 0;
  cursor: pointer;
}

.pf-help {
  font: 400 0.78rem/1.4 'Simplex Sans', sans-serif;
  color: var(--text);
  margin: 0;
}
.pf-help-inline {
  font: 400 0.78rem/1.2 'Simplex Sans', sans-serif;
  color: rgba(28, 20, 12, 0.5);
  font-weight: 400;
  margin-left: 4px;
}

/* Brand Preview section inside the partner form */
.pf-brand-preview {
  background:
    radial-gradient(ellipse 120% 80% at 50% 0%, rgba(255, 122, 60, 0.06), transparent 70%),
    rgba(255, 206, 129, 0.03);
  border: 1px solid rgba(255, 206, 129, 0.30);
  border-radius: 0;
  padding: 22px;
}
.pf-brand-preview-row {
  display: flex;
  align-items: center;
  gap: 22px;
}
.pf-brand-logo-thumb {
  width: 86px;
  height: 86px;
  border-radius: 0;
  background: #ffffff;
  padding: 12px;
  object-fit: contain;
  border: 1.5px solid rgba(255, 206, 129, 0.45);
  flex-shrink: 0;
  box-shadow: 0 4px 18px rgba(255, 122, 60, 0.10);
}
.pf-brand-color-section {
  flex: 1;
  min-width: 0;
}
.pf-brand-color-label {
  font: 600 0.74rem/1 'Simplex Sans', sans-serif;
  color: rgba(28, 20, 12, 0.6);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.pf-brand-swatches {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.pf-color-swatch {
  width: 36px;
  height: 36px;
  border-radius: 0;
  border: 2px solid rgba(28, 20, 12, 0.18);
  cursor: pointer;
  padding: 0;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.pf-color-swatch:hover { transform: scale(1.06); }
.pf-color-swatch.is-active {
  border-color: var(--text);
  box-shadow: 0 0 0 3px rgba(255, 206, 129, 0.45);
}
.pf-brand-color-hex {
  font: 600 0.92rem/1 'Simplex Sans', monospace;
  color: #ffce81;
  margin: 0;
  letter-spacing: 0.02em;
}
@media (max-width: 600px) {
  .pf-brand-preview-row { flex-direction: column; align-items: flex-start; gap: 16px; }
  .pf-brand-color-section { width: 100%; }
}

.pf-submit {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
  padding: 16px 36px;
  font-size: 0.98rem;
  cursor: pointer;
  line-height: 1;
}
.pf-submit-icon { display: block; flex: 0 0 auto; }
.pf-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.pf-microcopy {
  text-align: center;
  font: 400 0.82rem/1.5 'Simplex Sans', sans-serif;
  color: var(--text);
  margin: 4px auto 0;
  max-width: 520px;
}

/* Thank-you screen (replaces the form on success) */
.partner-thanks {
  text-align: center;
  padding: 24px 12px 12px;
}
.partner-thanks .pf-checkmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  margin-bottom: 18px;
  background: linear-gradient(135deg, #ff7a3c, #ffce81);
  color: var(--text);
}
.partner-thanks h3 {
  font: 700 1.5rem/1.2 'Sora', sans-serif;
  color: var(--text);
  margin: 0 0 12px;
}
.partner-thanks p {
  color: var(--text);
  font-size: 1rem;
  line-height: 1.55;
  margin: 0 auto;
  max-width: 460px;
}


/* ══════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════ */
footer {
  border-top: 1px solid var(--border);
  padding: 64px 0 36px;
  background: var(--surface);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1.2fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}

.footer-brand p {
  font-size: 0.875rem;
  margin-top: 14px;
  max-width: 260px;
  line-height: 1.65;
}

.footer-col h5 {
  font-family: 'Simplex Sans', monospace;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text);
  margin-bottom: 18px;
}

.footer-col ul { display: flex; flex-direction: column; gap: 10px; }

.footer-col ul li a {
  font-size: 0.875rem;
  color: var(--text-dim);
  transition: color var(--dur);
}

.footer-col ul li a:hover { color: var(--text); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.footer-bottom p {
  font-family: 'Simplex Sans', monospace;
  font-size: 0.68rem;
  color: var(--text-dimmer);
  letter-spacing: 0.05em;
}


/* ══════════════════════════════════════════════
   SCROLL ANIMATIONS
══════════════════════════════════════════════ */
.anim {
  opacity: 0;
  transition: opacity 0.82s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.82s cubic-bezier(0.22, 1, 0.36, 1);
}

.anim[data-anim="fade-up"]    { transform: translateY(40px); }
.anim[data-anim="fade-in"]    { transform: scale(0.95) translateY(20px); }
.anim[data-anim="fade-left"]  { transform: translateX(-44px); }
.anim[data-anim="fade-right"] { transform: translateX(44px); }

.anim.visible { opacity: 1; transform: none; }


/* ══════════════════════════════════════════════
   INTEGRATION MARQUEE — DESKTOP
══════════════════════════════════════════════ */
@media (min-width: 769px) {
  /* Integration marquee — larger on desktop */
  .int-intro { font-size: 0.9rem; }
  .int-row { gap: 14px; }
  .int-track { gap: 36px; }
  .int-item { min-width: 150px; }
  .int-item img {
    height: 54px;
    max-width: 150px;
    padding: 14px 18px;
  }
  .int-name { font-size: 0.68rem; }
  .sw-integrations { gap: 40px; }

  /* Kit column — desktop tweaks */
  .kit-plus {
    text-align: center;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    margin: 34px 0;
  }
  .kit-card-label {
    font-family: 'Simplex Sans', sans-serif;
    font-size: 0.75rem;
    text-transform: none;
    letter-spacing: 0;
  }
  .kit-card-wrap + .kit-card-wrap { margin-top: 0; }
}

/* ══════════════════════════════════════════════
   RESPONSIVE — TABLET (≤1024px)
══════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .pilot-banner { gap: 36px; padding: 40px; }
  .partnership-inner { gap: 36px; }
  .feat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .system-cols { gap: 28px; }
  .system-col-title { font-size: 1.3rem; }
  /* Brand selector: drop from 4 cols to 2 cols on tablet so each card
     keeps enough horizontal room for the logo + 3-line fact list. */
  .brand-btns { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; }
}


/* ══════════════════════════════════════════════
   RESPONSIVE — MOBILE (≤768px)
══════════════════════════════════════════════ */
@media (max-width: 768px) {
  .section { padding: 56px 0; }
  #hero { padding-top: calc(var(--nav-h) + 24px); }
  .hero-inner { gap: 20px; }
  .mob-ticker-wrap { margin-bottom: 0; }

  .nav-links, .nav-actions { display: none; }
  .hamburger { display: flex; }

  .hero-sub { max-width: 100%; }
  .hero-actions { justify-content: center; }
  .hero-stats { justify-content: center; flex-wrap: wrap; gap: 20px; }
  .stat-sep { display: none; }

  #navbar.scrolled {
    background: rgba(0, 0, 0, 0.85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  .section::after {
    content: '';
    display: block;
    height: 1px;
    margin: 40px 24px 0;
    background: var(--border);
  }

  .how-cards { grid-template-columns: 1fr; }

  /* Brand buttons on mobile — neutral border by default, gradient orange
     border + glow only when active. Matches the desktop rule above. */
  .brand-btn {
    background: #fbf2e9 !important;
    border-color: rgba(28, 20, 12, 0.10) !important;
  }
  .brand-btn-active {
    background:
      linear-gradient(#1c1c1c, #1c1c1c) padding-box,
      linear-gradient(135deg, #ff7a3c, #ffce81) border-box !important;
    border-color: transparent !important;
  }
  .brand-btn:hover {
    background: #f4e8dc !important;
    border-color: rgba(28, 20, 12, 0.22) !important;
  }

  /* Kit panel: show only instruction card image + mobile label + design copy */
  .kit-brand-panel .kit-card-wrap:first-child { display: none !important; }
  .kit-brand-panel .kit-card-label { display: none; }
  .kit-mobile-extras { display: block; }

  .brand-btns-label { font-size: 1rem; }
  /* Mobile: stack into a single column so the logo + 3-line text has
     room to breathe. Tablet (handled below) shifts to 2 columns. */
  .brand-btns {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    max-width: 100%;
  }
  .brand-btn-item { display: flex; width: 100%; }
  .brand-btn {
    width: 100% !important;
    min-height: 88px;
    padding: 12px 14px !important;
    gap: 12px;
  }
  .brand-btn-logo {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
  }
  .brand-btn-text strong { font-size: 0.92rem; }
  .brand-btn-text > span { font-size: 0.72rem; }

  .system-cols { grid-template-columns: 1fr; gap: 32px; }
  .system-col .ch-phone-frame { max-width: 100%; }

  .admin-inner { grid-template-columns: 1fr; align-items: start; }
  /* On mobile, tabs sit at natural height — no need to stretch to match
     the preview since the section is now stacked vertically. */
  .admin-copy { display: block; }
  .admin-tabs { flex: 0 0 auto; gap: 8px; }
  .admin-tab { flex: 0 0 auto; min-height: 0; padding: 14px 38px 14px 16px; gap: 12px; }
  .admin-tab-icon svg { width: 20px; height: 20px; }
  .pilot-banner { grid-template-columns: 1fr; gap: 32px; padding: 32px 28px; }
  .pilot-amount { font-size: 3rem; }
  .pilot-breakdown { padding: 14px 14px; }
  .pilot-break-row { flex-wrap: wrap; gap: 4px; font-size: 0.88rem; }
  .pilot-break-row > span:first-child { flex-shrink: 1; min-width: 0; }
  .pil-incl { white-space: normal; text-align: right; }
  .pil-was { white-space: normal; }
  .partnership-card { padding: 32px 20px; }
  .partnership-inner { grid-template-columns: 1fr; gap: 32px; }
  .hw-selector { padding: 20px 18px; }
  .hw-slider-wrap { padding: 0 2px; }
  .hw-display { gap: 0; margin-bottom: 22px; padding-bottom: 20px; }
  .hw-display-col { padding-right: 16px; margin-right: 16px; }
  .hw-display-val { font-size: 1.45rem; }
  .btn-glow-cta { font-size: 0.88rem; padding: 13px 18px; }
  .feat-breakdown { margin-top: 40px; }
  .feat-cards { grid-template-columns: 1fr; gap: 12px; }
  .feat-card { padding: 22px 20px; }
  .cta-box { padding: 56px 24px; }

  /* Become a Partner modal — full-screen card, single-col fields */
  .partner-modal { padding: 0; }
  .partner-modal-card {
    max-width: 100%;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
    padding: 64px 20px 32px;
  }
  .partner-modal-header h2 { font-size: 1.3rem; }
  .partner-modal-header p  { font-size: 0.92rem; }
  .partner-form { gap: 24px; }
  .pf-section { padding-top: 20px; gap: 14px; }
  .pf-section-pulse { padding: 18px; }
  .pf-section-title { font-size: 0.84rem; }
  .pf-row { grid-template-columns: 1fr; gap: 12px; }
  .pf-field input,
  .pf-field select,
  .pf-field textarea { font-size: 16px; /* prevents iOS zoom on focus */ }
  .pf-field-file input[type="file"] { font-size: 0.85rem; }
  .pf-info-card { padding: 14px 14px; gap: 12px; }
  .pf-info-card-icon { width: 28px; height: 28px; }
  .pf-info-card p { font-size: 0.88rem; }
  .pf-kit-selector { padding: 18px 16px; }
  .pf-summary { padding: 18px 18px; gap: 16px; }
  .pf-summary-row { font-size: 0.9rem; }
  .pf-summary-detail { font-size: 0.78rem; }
  .pf-summary-pill  { font-size: 0.6rem; padding: 3px 8px; }
  .pf-summary-total .pf-summary-val { font-size: 1.25rem; }
  .partner-thanks h3 { font-size: 1.25rem; }
  .pf-pay-btn { padding: 16px 22px !important; font-size: 0.95rem !important; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
}


/* ══════════════════════════════════════════════
   RESPONSIVE — SMALL MOBILE (≤480px)
══════════════════════════════════════════════ */
@media (max-width: 480px) {
  .container { padding: 0 18px; }
  .footer-grid { grid-template-columns: 1fr; }
  .ugc-grid { grid-template-columns: repeat(3, 1fr); }
}





/* ══════════════════════════════════════════════════════════════════
   THE HANDBOOK — /handbook page
   Premium long-form product reference. Sticky side-nav on desktop,
   collapsible content stack on mobile.
══════════════════════════════════════════════════════════════════ */

/* Active marker on nav for the Handbook page */
.nav-link-active {
  color: var(--text);
  position: relative;
}
.nav-link-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -8px;
  height: 2px;
  background: linear-gradient(90deg, #ff7a3c, #ffce81);
  border-radius: 0;
}

/* ── HERO ── */
.hb-hero {
  position: relative;
  padding: calc(var(--nav-h, 72px) + 80px) 0 80px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 122, 60, 0.08), transparent 60%),
    #07070a;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

/* ── 6 LANDING CARDS — visual table of contents ── */
.hb-cards-section {
  background: #07070a;
  padding: 72px 0 32px;
  border-bottom: 1px solid var(--border);
}
.hb-cards-header {
  text-align: center;
  margin-bottom: 36px;
}
.hb-cards-eyebrow {
  margin: 0 0 10px;
  font: 700 0.74rem/1 'Simplex Sans', monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  opacity: 0.55;
}
.hb-cards-title {
  margin: 0;
  font: 800 clamp(1.6rem, 2.6vw, 2.2rem)/1.15 'Sora', sans-serif;
  letter-spacing: -0.015em;
  color: var(--text);
}
.hb-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.hb-card {
  position: relative;
  display: block;
  padding: 28px 28px 64px;
  text-decoration: none;
  background:
    linear-gradient(rgba(28, 20, 12, 0.025), rgba(28, 20, 12, 0.025)) padding-box,
    linear-gradient(135deg, rgba(28, 20, 12, 0.08), rgba(28, 20, 12, 0.04)) border-box;
  border: 1px solid transparent;
  border-radius: 0;
  transition: transform 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
  overflow: hidden;
  min-height: 220px;
}
.hb-card::before {
  /* subtle radial highlight that lights up on hover */
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% -20%, rgba(255, 206, 129, 0.18), transparent 70%);
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
}
.hb-card:hover {
  transform: translateY(-2px);
  background:
    linear-gradient(rgba(255, 122, 60, 0.04), rgba(255, 122, 60, 0.04)) padding-box,
    linear-gradient(135deg, #ff7a3c, #ffce81) border-box;
  box-shadow: 0 12px 36px rgba(255, 122, 60, 0.16);
}
.hb-card:hover::before { opacity: 1; }

.hb-card-num {
  font: 800 1.4rem/1 'Simplex Sans', monospace;
  background: linear-gradient(135deg, #ff7a3c, #ffce81);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}
.hb-card h3 {
  margin: 0 0 10px;
  font: 700 1.2rem/1.25 'Sora', sans-serif;
  color: var(--text);
}
.hb-card p {
  margin: 0;
  font: 400 0.92rem/1.6 'Simplex Sans', sans-serif;
  color: var(--text);
  opacity: 0.85;
}
.hb-card-arrow {
  position: absolute;
  bottom: 24px;
  right: 28px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(28, 20, 12, 0.06);
  border: 1px solid rgba(28, 20, 12, 0.12);
  color: var(--text);
  font-size: 1.05rem;
  transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}
.hb-card:hover .hb-card-arrow {
  background: linear-gradient(135deg, #ff7a3c, #ffce81);
  border-color: transparent;
  color: var(--text);
  transform: translateX(4px);
}
.hb-hero-inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.hb-hero-title {
  font: 800 clamp(2.4rem, 4.5vw, 4rem)/1.05 'Sora', sans-serif;
  margin: 0 0 22px;
  letter-spacing: -0.02em;
  color: var(--text);
}
.hb-hero-sub {
  margin: 0 auto 28px;
  font: 400 1.1rem/1.6 'Simplex Sans', sans-serif;
  color: var(--text);
  max-width: 620px;
}
.hb-hero-meta {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
  padding: 10px 22px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: rgba(28, 20, 12, 0.02);
}
.hb-hero-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 0.78rem/1 'Simplex Sans', monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
}
.hb-hero-meta-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff7a3c, #ffce81);
}

/* ── WHAT WE SOLVE — 5 numbered statements ── */
.hb-solve-section {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 122, 60, 0.04), transparent 70%),
    #07070a;
  padding: 80px 0 80px;
  border-bottom: 1px solid var(--border);
}
.hb-solve-header {
  text-align: center;
  margin-bottom: 48px;
}
.hb-solve-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.hb-solve-item {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 28px;
  align-items: start;
  padding: 36px 0;
  border-top: 1px solid var(--border);
}
.hb-solve-item:first-child { border-top: none; padding-top: 12px; }

.hb-solve-num {
  font: 800 2.4rem/1 'Simplex Sans', monospace;
  background: linear-gradient(135deg, #ff7a3c, #ffce81);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.04em;
  padding-top: 4px;
}
.hb-solve-body h3 {
  font: 700 1.35rem/1.25 'Sora', sans-serif;
  color: var(--text);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.hb-solve-body p {
  margin: 0 0 10px;
  font: 400 1.02rem/1.65 'Simplex Sans', sans-serif;
  color: var(--text);
}
.hb-solve-source {
  margin: 6px 0 0 !important;
  font: 500 0.78rem/1.4 'Simplex Sans', monospace !important;
  color: var(--text) !important;
  opacity: 0.55;
  letter-spacing: 0.02em;
}
.hb-solve-source a {
  color: #ffce81;
  text-decoration: underline;
  text-decoration-color: rgba(255, 206, 129, 0.4);
  text-underline-offset: 2px;
}
.hb-solve-source a:hover { text-decoration-color: #ffce81; }

@media (max-width: 880px) {
  .hb-solve-section { padding: 56px 0; }
  .hb-solve-header { margin-bottom: 32px; }
  .hb-solve-item { grid-template-columns: 1fr; gap: 8px; padding: 28px 0; }
  .hb-solve-num { font-size: 1.6rem; padding-top: 0; }
  .hb-solve-body h3 { font-size: 1.15rem; }
  .hb-solve-body p { font-size: 0.96rem; }
}

/* ── MAIN GRID ── */
.hb-main {
  padding: 80px 0 120px;
  background: #07070a;
}
.hb-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 80px;
  align-items: start;
}

/* ── SIDE NAV ── */
.hb-side-nav {
  position: sticky;
  top: calc(var(--nav-h, 72px) + 32px);
  align-self: start;
}
.hb-side-nav-label {
  font: 700 0.7rem/1 'Simplex Sans', monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  opacity: 0.55;
  margin: 0 0 14px;
}
.hb-side-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hb-side-link {
  display: block;
  padding: 8px 14px 8px 16px;
  font: 500 0.92rem/1.4 'Simplex Sans', sans-serif;
  color: var(--text);
  opacity: 0.55;
  border-left: 2px solid transparent;
  transition: opacity 0.18s ease, border-color 0.18s ease, padding 0.18s ease;
  text-decoration: none;
}
.hb-side-link:hover { opacity: 0.9; }
.hb-side-link.is-active {
  opacity: 1;
  border-left-color: #ffce81;
  padding-left: 18px;
}

/* ── CONTENT ── */
.hb-content {
  min-width: 0;
  max-width: 740px;
  color: var(--text);
}

.hb-section {
  padding-top: 64px;
  margin-top: 64px;
  border-top: 1px solid var(--border);
}
.hb-section:first-child { padding-top: 0; margin-top: 0; border-top: none; }

.hb-section-num {
  font: 700 0.78rem/1 'Simplex Sans', monospace;
  letter-spacing: 0.18em;
  color: #ffce81;
  margin-bottom: 12px;
}
.hb-section-title {
  font: 800 clamp(1.8rem, 3vw, 2.4rem)/1.15 'Sora', sans-serif;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0 0 28px;
}
.hb-h3 {
  font: 700 1.12rem/1.3 'Sora', sans-serif;
  color: var(--text);
  margin: 38px 0 14px;
}
.hb-content p {
  font: 400 1.02rem/1.7 'Simplex Sans', sans-serif;
  color: var(--text);
  margin: 0 0 18px;
}
.hb-content p strong { color: var(--text); font-weight: 700; }
.hb-content p code,
.hb-content li code {
  font: 600 0.88em/1 'Simplex Sans', monospace;
  background: rgba(28, 20, 12, 0.06);
  border: 1px solid rgba(28, 20, 12, 0.1);
  padding: 2px 6px;
  border-radius: 0;
  color: var(--text);
}
.hb-content a:not(.hb-howto-card):not(.btn) {
  color: #ffce81;
  text-decoration: underline;
  text-decoration-color: rgba(255, 206, 129, 0.35);
  text-underline-offset: 3px;
}
.hb-content a:not(.hb-howto-card):not(.btn):hover {
  text-decoration-color: #ffce81;
}

.hb-lede {
  font-size: 1.18rem !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
  margin-bottom: 26px !important;
}

/* Customer-perspective callout inside Problem section sub-sections.
   Distinguishes "what the customer sees" from "what it costs the brand"
   without splitting the page into two columns. */
.hb-perspective {
  position: relative;
  padding: 14px 18px 14px 22px !important;
  margin: 0 0 16px !important;
  background: rgba(255, 206, 129, 0.05);
  border-left: 3px solid;
  border-image: linear-gradient(180deg, #ff7a3c, #ffce81) 1;
  border-radius: 0;
  font-size: 0.98rem !important;
  line-height: 1.65 !important;
}
.hb-perspective strong { color: #ffce81; font-weight: 700; }

.hb-foot {
  margin-top: 22px !important;
  font-size: 0.92rem !important;
  color: var(--text) !important;
  opacity: 0.85;
}

/* ── PULL QUOTE (Manifesto) ── */
.hb-pullquote {
  margin: 32px 0;
  padding: 28px 32px;
  border-left: 3px solid;
  border-image: linear-gradient(180deg, #ff7a3c, #ffce81) 1;
  background: linear-gradient(90deg, rgba(255, 122, 60, 0.06), transparent 60%);
}
.hb-pullquote p {
  margin: 0 0 8px !important;
  font: 700 1.6rem/1.25 'Sora', sans-serif !important;
  color: var(--text) !important;
  letter-spacing: -0.01em;
}
.hb-pullquote span {
  font: 400 0.95rem/1.5 'Simplex Sans', sans-serif;
  color: var(--text);
  opacity: 0.8;
}

/* ── 2-COL GRID for product / challenge / integration cards ── */
.hb-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 18px 0;
}

.hb-prod-card,
.hb-ch-card,
.hb-int-card {
  background: rgba(28, 20, 12, 0.03);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 24px 26px;
}
.hb-prod-card h3,
.hb-ch-card h3,
.hb-int-card h3 {
  font: 700 1.05rem/1.3 'Sora', sans-serif;
  color: var(--text);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.hb-prod-card p,
.hb-ch-card p,
.hb-int-card p {
  font-size: 0.93rem !important;
  line-height: 1.6 !important;
  margin: 0 0 14px !important;
  color: var(--text) !important;
}
.hb-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hb-bullets li {
  position: relative;
  padding-left: 18px;
  font: 400 0.92rem/1.55 'Simplex Sans', sans-serif;
  color: var(--text);
}
.hb-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff7a3c, #ffce81);
}

/* Challenge cards — meta list + tag */
.hb-ch-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 0;
  background: rgba(255, 206, 129, 0.12);
  border: 1px solid rgba(255, 206, 129, 0.32);
  color: #ffce81;
  font: 700 0.66rem/1 'Simplex Sans', monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.hb-ch-meta {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hb-ch-meta li {
  display: flex;
  gap: 10px;
  font: 400 0.85rem/1.45 'Simplex Sans', sans-serif;
  color: var(--text);
  padding: 6px 0;
  border-top: 1px solid rgba(28, 20, 12, 0.05);
}
.hb-ch-meta li:first-child { border-top: none; padding-top: 0; }
.hb-ch-meta li span {
  flex: 0 0 100px;
  font-weight: 600;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text);
  opacity: 0.6;
  padding-top: 2px;
}

/* Integration status pill */
.hb-int-status {
  font: 700 0.62rem/1 'Simplex Sans', monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 0;
  background: linear-gradient(135deg, rgba(0, 200, 100, 0.18), rgba(0, 200, 100, 0.08));
  border: 1px solid rgba(0, 200, 100, 0.4);
  color: #4ade80;
  white-space: nowrap;
}
.hb-int-status-soon {
  background: linear-gradient(135deg, rgba(255, 206, 129, 0.12), rgba(255, 206, 129, 0.04));
  border-color: rgba(255, 206, 129, 0.32);
  color: #ffce81;
}

/* ── SYSTEM 4-CELL GRID ── */
.hb-system-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 28px 0;
}
.hb-system-cell {
  background: rgba(28, 20, 12, 0.03);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hb-system-cell .hb-system-icon {
  font-size: 1.4rem;
  background: linear-gradient(135deg, #ff7a3c, #ffce81);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 6px;
}
.hb-system-cell strong {
  color: var(--text);
  font: 700 1.05rem/1.2 'Sora', sans-serif;
}
.hb-system-cell p {
  font-size: 0.9rem !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  color: var(--text) !important;
}

/* ── SPEC LIST (Quality, Data) ── */
.hb-spec-list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.hb-spec-list li {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(28, 20, 12, 0.06);
  font: 400 0.95rem/1.55 'Simplex Sans', sans-serif;
  color: var(--text);
}
.hb-spec-list li:last-child { border-bottom: none; }
.hb-spec-list li strong {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text);
  opacity: 0.7;
  font-weight: 700;
  padding-top: 1px;
}

/* ── PRICING TABLE ── */
.hb-pricing-table {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 26px 0;
}
.hb-pricing-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  padding: 24px 26px;
  background: rgba(28, 20, 12, 0.03);
  border: 1px solid var(--border);
  border-radius: 0;
}
.hb-pricing-row h4 {
  font: 700 1.1rem/1.2 'Sora', sans-serif;
  color: var(--text);
  margin: 0 0 6px;
}
.hb-pricing-row p {
  font-size: 0.9rem !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  color: var(--text) !important;
}
.hb-pricing-amt {
  font: 800 1.8rem/1 'Sora', sans-serif;
  color: var(--text);
  white-space: nowrap;
  text-align: right;
}
.hb-pricing-amt span {
  display: block;
  font: 400 0.78rem/1 'Simplex Sans', sans-serif;
  color: var(--text);
  opacity: 0.6;
  margin-top: 6px;
}

/* ── CALLOUT box ── */
.hb-callout {
  margin: 28px 0;
  padding: 22px 26px;
  border-radius: 0;
  background:
    linear-gradient(rgba(255, 122, 60, 0.04), rgba(255, 122, 60, 0.04)) padding-box,
    linear-gradient(135deg, rgba(255, 122, 60, 0.5), rgba(255, 206, 129, 0.5)) border-box;
  border: 1.5px solid transparent;
}
.hb-callout p {
  margin: 0 !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  color: var(--text) !important;
}

/* ── ONBOARDING TIMELINE ── */
.hb-timeline {
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}
.hb-timeline::before {
  content: '';
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 56px;
  width: 1px;
  background: linear-gradient(180deg, rgba(255, 206, 129, 0.4), rgba(255, 122, 60, 0.4), rgba(255, 206, 129, 0));
}
.hb-timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 28px;
  padding: 16px 0;
}
.hb-timeline-step {
  display: inline-flex;
  align-items: flex-start;
  font: 700 0.74rem/1.3 'Simplex Sans', monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffce81;
  padding-top: 4px;
  position: relative;
}
.hb-timeline-step::after {
  content: '';
  position: absolute;
  right: -33px;
  top: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #07070a;
  border: 2px solid #ffce81;
}
.hb-timeline li h4 {
  font: 700 1.05rem/1.3 'Sora', sans-serif;
  color: var(--text);
  margin: 0 0 6px;
}
.hb-timeline li p {
  font-size: 0.92rem !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  color: var(--text) !important;
}

/* ── HOW-TO CARDS ── */
.hb-howto-card {
  position: relative;
  display: block;
  padding: 22px 26px;
  background: rgba(28, 20, 12, 0.03);
  border: 1px solid var(--border);
  border-radius: 0;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
  cursor: default;
}
.hb-howto-card:hover {
  border-color: rgba(255, 206, 129, 0.4);
  background: rgba(255, 206, 129, 0.04);
}
.hb-howto-card h3 {
  font: 700 1.02rem/1.3 'Sora', sans-serif;
  color: var(--text);
  margin: 0 0 10px;
  padding-right: 28px;
}
.hb-howto-card p {
  font-size: 0.9rem !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  color: var(--text) !important;
}
.hb-howto-arrow {
  position: absolute;
  top: 24px;
  right: 24px;
  font-size: 1.1rem;
  color: #ffce81;
  opacity: 0.6;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.hb-howto-card:hover .hb-howto-arrow { opacity: 1; transform: translateX(3px); }

/* ── CONTACT ── */
.hb-contact-card {
  margin: 26px 0 18px;
  padding: 28px 32px;
  background:
    linear-gradient(rgba(255, 122, 60, 0.025), rgba(255, 122, 60, 0.025)) padding-box,
    linear-gradient(135deg, #ff7a3c, #ffce81) border-box;
  border: 1.5px solid transparent;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hb-contact-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 20px;
  align-items: baseline;
  padding: 8px 0;
  border-top: 1px dashed rgba(28, 20, 12, 0.1);
}
.hb-contact-row:first-child { border-top: none; padding-top: 0; }
.hb-contact-label {
  font: 700 0.74rem/1 'Simplex Sans', monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  opacity: 0.65;
}
.hb-contact-val {
  font: 600 1.02rem/1.4 'Simplex Sans', sans-serif;
  color: var(--text);
  text-decoration: none;
}
a.hb-contact-val:hover {
  background: linear-gradient(135deg, #ff7a3c, #ffce81);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ══════════════════════════════════════════════
   HANDBOOK — RESPONSIVE
══════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .hb-grid { grid-template-columns: 200px 1fr; gap: 48px; }
  .hb-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 880px) {
  .hb-hero { padding: calc(var(--nav-h, 72px) + 56px) 0 56px; }
  .hb-cards-section { padding: 48px 0 24px; }
  .hb-cards-header { margin-bottom: 24px; }
  .hb-cards { grid-template-columns: 1fr; gap: 12px; }
  .hb-card { min-height: auto; padding: 22px 22px 56px; }
  .hb-card-num { font-size: 1.2rem; margin-bottom: 12px; }
  .hb-card h3 { font-size: 1.08rem; }
  .hb-card p { font-size: 0.88rem; }
  .hb-card-arrow { bottom: 20px; right: 22px; width: 32px; height: 32px; }
  .hb-hero-meta { gap: 14px; padding: 8px 18px; }
  .hb-hero-meta-item { font-size: 0.7rem; }

  .hb-main { padding: 56px 0 80px; }
  .hb-grid { grid-template-columns: 1fr; gap: 32px; }

  /* Side nav becomes a horizontal scrollable strip on mobile */
  .hb-side-nav {
    position: relative;
    top: auto;
    margin: 0 -18px;
    padding: 12px 18px;
    overflow-x: auto;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: rgba(28, 20, 12, 0.02);
  }
  .hb-side-nav-label { display: none; }
  .hb-side-nav ul {
    flex-direction: row;
    flex-wrap: nowrap;
    width: max-content;
    gap: 4px;
  }
  .hb-side-link {
    padding: 8px 14px;
    border-left: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    font-size: 0.85rem;
  }
  .hb-side-link.is-active {
    padding-left: 14px;
    border-bottom-color: #ffce81;
  }

  .hb-section { padding-top: 48px; margin-top: 48px; }
  .hb-section-title { font-size: 1.6rem; margin-bottom: 22px; }
  .hb-content p { font-size: 0.98rem; }
  .hb-lede { font-size: 1.05rem !important; }

  .hb-grid-2,
  .hb-system-grid { grid-template-columns: 1fr; }
  .hb-spec-list li { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }
  .hb-spec-list li strong { padding-top: 0; }

  .hb-pricing-row { grid-template-columns: 1fr; gap: 12px; padding: 20px; }
  .hb-pricing-amt { text-align: left; font-size: 1.5rem; }

  .hb-pullquote { padding: 22px 22px; }
  .hb-pullquote p { font-size: 1.25rem !important; }

  .hb-timeline::before { display: none; }
  .hb-timeline li { grid-template-columns: 1fr; gap: 6px; padding: 14px 0; border-bottom: 1px solid rgba(28, 20, 12,0.06); }
  .hb-timeline-step::after { display: none; }

  .hb-contact-card { padding: 22px 22px; }
  .hb-contact-row { grid-template-columns: 1fr; gap: 4px; padding: 10px 0; }
}


/* ══════════════════════════════════════════════════════════════════
   YOUR SPECIAL LINK KIT — interactive brand-preview tool
   Lives between Pricing and Why Special Link. Logo upload reads via
   FileReader → updates --yk-brand / --yk-brand-2 CSS vars + image
   src for all .yk-logo-target elements.
══════════════════════════════════════════════════════════════════ */

/* AceSans Free — used for the "CHALLENGE CARD" label on every NFC
   card mockup (and any future card labels). */
/* Canva Sans — used for the back-of-card Dutch instruction captions.
   File Simplex Sans.otf can be dropped in repo root if available; until
   then the stack falls through to Simplex Sans (already loaded) which has
   the same geometric character. */
.yk-section {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 122, 60, 0.06), transparent 70%),
    var(--surface);
  /* Brand colours default to Special Link palette; overridden on upload. */
  --yk-brand:   #ffce81;
  --yk-brand-2: #ff7a3c;
}

.yk-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr 1.15fr;
  gap: 36px;
  align-items: center;
  margin-top: 56px;
}

/* ── LEFT column ── */
.yk-left { display: flex; flex-direction: column; gap: 14px; align-self: start; }
.yk-left-title {
  font: 700 clamp(1.2rem, 1.7vw, 1.65rem)/1.15 'Sora', sans-serif;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.025em;
  white-space: nowrap;
}
/* Attention indicator — sits between the title and the disclaimer copy
   to draw the eye to the "this is a real-time mock-up" message. */
.yk-attention-icon {
  width: 30px;
  height: 30px;
  display: block;
  align-self: center;
  margin: 12px 0;
  animation: yk-attention-pulse 1.8s ease-in-out infinite;
}
.yk-attention-icon svg { width: 100%; height: 100%; display: block; }
@keyframes yk-attention-pulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 4px rgba(255, 122, 60, 0.45));
  }
  50% {
    transform: scale(1.16);
    filter: drop-shadow(0 0 14px rgba(255, 122, 60, 0.85));
  }
}
.yk-left-desc {
  font: 400 0.96rem/1.55 'Simplex Sans', sans-serif;
  color: var(--text);
  margin: 0;
}
/* Inline emphasis — bold + brand-orange. Distinct from .grad-text
   (which we reserve for single key brand words). */
.yk-highlight {
  font-weight: 700;
  color: #ffce81;
}
/* Inline link styled to match the body weight; gradient sits on "Ecosystem" via .grad-text */
.yk-inline-link {
  color: var(--text);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(255,206,129,0.55);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease;
}
.yk-inline-link:hover {
  text-decoration-color: rgba(255,206,129,1);
}

/* Upload box — square, matches the platform design system */
.yk-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
  padding: 30px 22px 22px;
  background:
    radial-gradient(ellipse 120% 70% at 50% 0%, rgba(255,122,60,0.10), transparent 70%),
    rgba(28, 20, 12, 0.03);
  border: 1.5px solid rgba(255, 206, 129, 0.65);
  border-radius: 0;
  box-shadow:
    0 0 28px rgba(255, 122, 60, 0.18),
    0 0 56px rgba(255, 206, 129, 0.10),
    inset 0 0 22px rgba(255, 206, 129, 0.05);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  cursor: pointer;
  text-align: center;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.yk-upload:hover {
  background: rgba(255, 206, 129, 0.06);
  border-color: rgba(255, 206, 129, 0.85);
}
/* Premium upload icon — gradient circle with white arrow inside */
.yk-upload-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff7a3c 0%, #ffce81 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(255, 122, 60, 0.30);
  margin-bottom: 6px;
}
.yk-upload-icon {
  color: var(--text);
  margin: 0;
}
.yk-upload-text {
  font: 700 1.05rem/1.2 'Simplex Sans', sans-serif;
  color: var(--text);
  letter-spacing: -0.01em;
}
.yk-upload-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 500 0.92rem/1.35 'Simplex Sans', sans-serif;
  color: var(--text);
  text-align: left;
  margin-top: 4px;
  max-width: 90%;
}
.yk-upload-hint-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.yk-upload-hint strong {
  font-weight: 700;
  color: #ffce81;
}
.yk-upload-formats {
  margin-top: 6px;
  font: 500 0.7rem/1.3 'Simplex Sans', sans-serif;
  color: rgba(28, 20, 12,0.55);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}
/* Hover lift — stronger glow */
.yk-upload:hover {
  border-color: rgba(255, 206, 129, 1);
  background:
    radial-gradient(ellipse 120% 70% at 50% 0%, rgba(255,122,60,0.16), transparent 70%),
    rgba(28, 20, 12, 0.05);
  box-shadow:
    0 0 38px rgba(255, 122, 60, 0.30),
    0 0 80px rgba(255, 206, 129, 0.16),
    inset 0 0 26px rgba(255, 206, 129, 0.08);
}

/* Color swatches (shown after upload) */
.yk-colors {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.yk-colors-label {
  margin: 0;
  font: 500 0.95rem/1.3 'Simplex Sans', sans-serif;
  color: var(--text);
  letter-spacing: 0;
  text-transform: none;
  opacity: 1;
}
.yk-color-swatches {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.yk-color-swatch {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 2px solid rgba(28, 20, 12, 0.18);
  background: #888;
  cursor: pointer;
  padding: 0;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.yk-color-swatch:hover { transform: scale(1.06); }
.yk-color-swatch.is-active {
  border-color: var(--text);
  box-shadow: 0 0 0 3px rgba(255, 206, 129, 0.45);
}

/* 6th swatch — Custom gradient. Same footprint as preset swatches but
   ALWAYS dashed-border + plus-icon so brands can tell it's the
   "build your own" button at a glance, even after they've filled it
   in with a custom gradient via the colour pickers. */
.yk-color-swatch--custom {
  background: rgba(28, 20, 12, 0.04);
  border: 2px dashed rgba(28, 20, 12, 0.45);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.yk-color-swatch--custom:hover {
  border-color: rgba(28, 20, 12, 0.75);
}
/* Active state: dashed border PRESERVED, just a slightly stronger outline
   + the box-shadow glow that matches preset swatches. The "+" icon stays
   visible over the user's chosen gradient (background is set inline by
   applyCustomVisualToButton()). */
.yk-color-swatch--custom.is-active {
  border-style: dashed;
  border-color: var(--text);
  box-shadow: 0 0 0 3px rgba(255, 206, 129, 0.45);
}

/* Custom-gradient panel — appears below swatches when the Custom button
   is clicked. Two native colour pickers + a live gradient preview chip. */
.yk-color-custom {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 4px;
  padding: 12px 14px;
  background: rgba(28, 20, 12, 0.04);
  border: 1px solid rgba(28, 20, 12, 0.12);
}
.yk-color-custom-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 0.84rem/1 'Simplex Sans', sans-serif;
  color: var(--text);
  cursor: pointer;
}
.yk-color-custom-row input[type="color"] {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(28, 20, 12, 0.28);
  background: transparent;
  cursor: pointer;
}
.yk-color-custom-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.yk-color-custom-row input[type="color"]::-webkit-color-swatch { border: 0; }
.yk-color-custom-preview {
  flex: 1;
  min-width: 80px;
  height: 32px;
  background: linear-gradient(135deg, #ff7a3c 0%, #ffce81 100%);
  border: 1px solid rgba(28, 20, 12, 0.22);
}

/* Stacked CTA group — primary / secondary / tertiary */
.yk-cta-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: stretch;
  margin-top: 14px;
}
.yk-cta-row .yk-cta,
.yk-cta-row .yk-cta-secondary,
.yk-cta-row .yk-cta-tertiary {
  align-self: stretch;
  width: 100%;
  justify-content: center;
}
/* Gradient-orange border via padding-box trick + soft brand-colour glow.
   Inner fill sits on top of the global topo bg, so we use a near-black
   that blends into the page rather than a hard surface colour. */
.yk-cta-secondary,
.yk-cta-tertiary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background:
    linear-gradient(#0a0b12, #0a0b12) padding-box,
    linear-gradient(135deg, #ff7a3c 0%, #ffce81 100%) border-box;
  border: 1.5px solid transparent;
  border-radius: 0;
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.yk-cta-secondary {
  padding: 14px 28px;
  font: 700 1rem/1 'Simplex Sans', sans-serif;
  box-shadow: 0 0 22px rgba(255, 122, 60, 0.18),
              0 0 44px rgba(255, 206, 129, 0.10);
}
.yk-cta-tertiary {
  padding: 12px 24px;
  font: 600 0.92rem/1 'Simplex Sans', sans-serif;
  box-shadow: 0 0 18px rgba(255, 122, 60, 0.14),
              0 0 36px rgba(255, 206, 129, 0.08);
}
.yk-cta-secondary:hover,
.yk-cta-tertiary:hover {
  background:
    linear-gradient(#15171f, #15171f) padding-box,
    linear-gradient(135deg, #ff7a3c 0%, #ffce81 100%) border-box;
  box-shadow: 0 0 32px rgba(255, 122, 60, 0.30),
              0 0 64px rgba(255, 206, 129, 0.16);
  transform: translateY(-1px);
}

.yk-cta {
  align-self: flex-start;
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  padding: 15px 30px !important;
  font-size: 1.02rem !important;
  font-weight: 700 !important;
  margin-top: 6px;
  cursor: pointer;
}

/* ── MIDDLE column: NFC card + A5 card ── */
.yk-middle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.yk-card-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.yk-card-tag {
  font: 500 0.92rem/1.3 'Simplex Sans', sans-serif;
  color: var(--text);
  opacity: 1;
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
}

/* ── NFC CARD: 3D-tilted flipper with front + back faces ── */

/* The flipper holds both faces. CONSTANT left-to-right 3D tilt — the
   card swings from -15deg to +15deg rotateY on a 7s loop, all the time.
   Click toggles .is-flipped which adds 180° to Y to expose the back. */
/* OUTER — runs the idle left/right tilt animation continuously. Never
   swaps animation; the actual flip happens on the inner .yk-nfc-faces
   wrapper via a smooth transition (same pattern as the ecosystem
   section's .kit-tilt-wrap + .kit-flipper). */
.yk-nfc-flipper {
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1.586 / 1;
  cursor: pointer;
  transform-style: preserve-3d;
  animation: yk-nfc-tilt-lr 7s ease-in-out infinite;
  outline: none;
}
.yk-nfc-flipper:focus-visible { outline: 2px solid var(--yk-brand); outline-offset: 6px; border-radius: 16px; }
@keyframes yk-nfc-tilt-lr {
  0%, 100% { transform: perspective(1400px) rotateY(-15deg) rotateX(-2deg); }
  50%      { transform: perspective(1400px) rotateY( 15deg) rotateX(-2deg); }
}

/* INNER — holds both faces. Smooth 700ms transition between front
   (rotateY 0) and back (rotateY 180deg) when .is-flipped is toggled
   on the OUTER flipper. */
.yk-nfc-faces {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.yk-nfc-flipper.is-flipped .yk-nfc-faces {
  transform: rotateY(180deg);
}

/* Each face: matches real kit — black + topo bg, with a GRADIENT border
   via the padding-box / border-box trick (replaces the previous solid
   box-shadow border so it can match the brand gradient). */
.yk-nfc {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(#000, #000) padding-box,
    linear-gradient(135deg, var(--yk-brand-2), var(--yk-brand)) border-box;
  overflow: hidden;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.55);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: background 0.4s ease;
}
.yk-nfc-back  { transform: rotateY(180deg); }

.yk-nfc-bg {
  position: absolute;
  inset: 0;
  background: url('BG1.png') center / cover no-repeat;
  opacity: 0.28;
  filter: saturate(0.4);
  pointer-events: none;
}
.yk-nfc-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 22px;
  padding: 18% 18px 16px;
}

/* Logo wrapper — fixed visual rectangle so EVERY logo (square / wide / tall)
   renders at a consistent size. The actual <img> uses object-fit:contain to
   scale into this box without distortion. Sized to a comfortable mid-card
   presence with clear room for the CHALLENGE CARD label below. */
.yk-nfc-logo-wrap {
  width: 60%;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.yk-nfc-logo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}
/* CHALLENGE CARD label — Simplex Sans, with the same brand gradient
   as the NFC circle. background-clip:text projects the gradient onto
   the glyphs; -webkit-text-fill-color:transparent reveals it. */
.yk-nfc-label {
  font-family: 'Simplex Sans', 'Simplex Sans', monospace;
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--yk-brand-2), var(--yk-brand));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transition: background 0.4s ease;
}
/* Tap-hint — copies the Ecosystem .kit-tap-hint pattern. Centred over
   the front face, bouncing 👆 + "Tap Here" label. Fades out on first
   click (.gone class added by JS). */
.yk-nfc-tap-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.5s ease;
}
.yk-nfc-tap-hint.gone { opacity: 0; }
.yk-nfc-tap-bounce {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  animation: ykNfcTapBounce 1.8s ease-in-out infinite;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55));
}
.yk-nfc-tap-icon {
  font-size: 30px;
  line-height: 1;
  display: block;
  filter: brightness(0) invert(1);
}
.yk-nfc-tap-label {
  font-family: 'Simplex Sans', monospace;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text);
  white-space: nowrap;
}
@keyframes ykNfcTapBounce {
  0%, 100% { transform: translateY(0); }
  40%, 60% { transform: translateY(-7px); }
}

/* ══════════════════════════════════════════════
   NFC CARD — BACK FACE
   3-column grid: LEFT image · gradient line · RIGHT image
   Each image is one of the user-supplied SVGs. Captions in Canva Sans.
══════════════════════════════════════════════ */
.yk-nfc-back-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 14px 1fr;
  align-items: stretch;
  gap: 6px;
  /* horizontal padding tightened so caption rows fit nowrap text */
  padding: 14px 8px 10px;
}

.yk-nfc-back-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* IMAGES vertically centred in the column (was space-between which
     stuck them to the top). Caption sits underneath via the gap. */
  justify-content: center;
  /* Bumped gap pushes caption a touch lower beneath the image */
  gap: 16px;
  padding: 0 2px;
}

.yk-nfc-back-img {
  position: relative;
  /* FORCE square. Without max-width matching max-height, the container
     was getting full column width but height capped, so it rendered
     wider than tall. The SVG inside still rendered square (centred),
     but my %-based card cover was relative to the wider container —
     that's why the cover extended past the SVG's empty-card outline. */
  width: 100%;
  max-width: 100px;
  max-height: 100px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

/* Each layer (base phone, wifi waves overlay, oval overlay) is absolute-
   positioned at 0,0 with the same dimensions, so they stack pixel-perfect.
   Both source SVGs share the same 150×150 viewBox, so positioning one
   over the other works without per-asset coordinates. */
.yk-nfc-back-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.yk-nfc-back-base { z-index: 1; }

/* Single brand-gradient overlay for the wifi waves + NFC oval.
   'waves and oval.svg' shares the exact same coord space as
   Left side.svg, so masking a brand-gradient div with it produces
   pixel-perfect alignment with the white phone illustration below. */
.yk-nfc-back-overlay {
  z-index: 2;
  background: linear-gradient(135deg, var(--yk-brand-2), var(--yk-brand));
  -webkit-mask-image: url('waves and oval.svg');
          mask-image: url('waves and oval.svg');
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  transition: background 0.4s ease;
}

/* RIGHT SIDE — anchor SVG sits over the right-side phone illustration in the
   SAME viewBox + preserveAspectRatio as right side.svg, so the foreignObject
   inside it lines up pixel-perfect with the empty card outline regardless of
   how the .yk-nfc-back-img container is shaped. */
.yk-nfc-back-card-anchor {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  overflow: visible;
  pointer-events: none;
}
.yk-nfc-back-card-anchor foreignObject {
  overflow: visible;
}

/* Cover now fills its foreignObject (which is sized to the marker rect in
   SVG coords), so no absolute positioning needed on the cover itself. */
.yk-nfc-back-card-cover {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(#000, #000) padding-box,
    linear-gradient(135deg, var(--yk-brand-2), var(--yk-brand)) border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  transition: background 0.4s ease;
}
/* Topo bg inside the mini card — same as the front face */
.yk-nfc-back-card-bg {
  position: absolute;
  inset: 0;
  background: url('BG1.png') center / cover no-repeat;
  opacity: 0.28;
  filter: saturate(0.4);
  pointer-events: none;
  z-index: 0;
}
.yk-nfc-back-card-logo {
  position: relative;
  z-index: 1;
  max-width: 60%;
  max-height: 50%;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}
.yk-nfc-back-card-label {
  position: relative;
  z-index: 1;
  font-family: 'Simplex Sans', 'Simplex Sans', monospace;
  font-size: 0.4rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--yk-brand-2), var(--yk-brand));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transition: background 0.4s ease;
}

/* Mini NFC badge in the top-right corner of the back-right front-card cover.
   Uses the same SVG as the real front-card badge (with a unique clipPath
   ID to avoid collisions). */
.yk-nfc-back-card-badge {
  position: absolute;
  top: 6%;
  right: 4%;
  width: 18%;
  aspect-ratio: 1 / 1;
  z-index: 2;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}
.yk-nfc-back-card-badge svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Middle gradient divider line — solid vertical bar, brand gradient.
   2px wide, 80% of column height tall, centred in the 14px-wide column. */
.yk-nfc-back-line {
  width: 2px;
  height: 80%;
  margin: auto;
  background: linear-gradient(to bottom, var(--yk-brand-2), var(--yk-brand));
  border-radius: 2px;
  box-shadow: 0 0 6px color-mix(in srgb, var(--yk-brand) 50%, transparent);
  transition: background 0.4s ease;
}

/* Captions under each column — Canva Sans, two-line:
   bold/larger first line + slightly smaller secondary line */
.yk-nfc-back-cap {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 4px;
  font-family: 'Canva Sans', 'Simplex Sans', sans-serif;
}
/* Each sentence forced to ONE row via white-space:nowrap. Sizes pushed
   smaller until the longest line ('PROBEER DE VOOR EN ACHTERKANT VAN JE
   MOBIEL') fits inside the ~140px caption width without overflowing. */
.yk-nfc-back-cap strong {
  font-weight: 700;
  font-size: 0.42rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--text);
  white-space: nowrap;
}
.yk-nfc-back-cap span {
  font-weight: 500;
  font-size: 0.32rem;
  line-height: 1.25;
  letter-spacing: 0;
  color: rgba(28, 20, 12, 0.78);
  white-space: nowrap;
}

/* NFC badge — the SVG file carries its own circle background (filled
   with the brand gradient via CSS-variable stop-colors), so this
   wrapper is just position + size. */
.yk-nfc-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  z-index: 3;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
}
.yk-nfc-badge svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ══════════════════════════════════════════════
   A5 INSTRUCTION CARD — sharp corners, flipper, brand-gradient border.
   Mirrors NFC-card flipper pattern: outer runs constant left/right tilt,
   inner faces wrapper does the click-to-flip with smooth transition.

   Element placement uses percentages derived from the source design's
   viewBox (0 0 419.25 595.5) so the layout matches the printed kit at
   any size. NO ROUNDED CORNERS on the A5 sheet itself — only the mini
   Challenge Card and the pill have rounding.
══════════════════════════════════════════════ */

/* Outer flipper — 3D tilt loop, click target. */
.yk-a5-flipper {
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1 / 1.414;
  cursor: pointer;
  transform-style: preserve-3d;
  animation: yk-a5-tilt-lr 7s ease-in-out infinite;
  outline: none;
}
.yk-a5-flipper:focus-visible {
  outline: 2px solid var(--yk-brand);
  outline-offset: 6px;
}
@keyframes yk-a5-tilt-lr {
  0%, 100% { transform: perspective(1400px) rotateY(-15deg) rotateX(-2deg); }
  50%      { transform: perspective(1400px) rotateY( 15deg) rotateX(-2deg); }
}

/* Inner faces wrapper — does the actual flip on .is-flipped. */
.yk-a5-faces {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.yk-a5-flipper.is-flipped .yk-a5-faces {
  transform: rotateY(180deg);
}

/* Each face: black + topo bg with brand-gradient border via
   padding-box / border-box (matches NFC card). SHARP CORNERS. */
.yk-a5 {
  position: absolute;
  inset: 0;
  border-radius: 0;
  border: 1.5px solid transparent;
  background:
    linear-gradient(#000, #000) padding-box,
    linear-gradient(135deg, var(--yk-brand-2), var(--yk-brand)) border-box;
  overflow: hidden;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.55);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: background 0.4s ease;
  color: var(--text);
}
.yk-a5-back { transform: rotateY(180deg); }

/* Topo overlay — brand-gradient div masked by `topo lines.svg`. The
   source is a vector with true alpha (lines on transparent bg), so
   default mask-mode: alpha works cleanly — no luminance trick. The
   .yk-a5 face's padding-box is solid black underneath. */
.yk-a5-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--yk-brand-2), var(--yk-brand));
  -webkit-mask-image: url('physical-to-digital%20UX%20Brand%20A5%20Card/topo%20lines.svg');
          mask-image: url('physical-to-digital%20UX%20Brand%20A5%20Card/topo%20lines.svg');
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  pointer-events: none;
  transition: background 0.4s ease;
}

/* ─── Front-face stacked layers ───
   Every layer (mask + <img>) is positioned at inset:0 with width/height
   100%. Because every source SVG shares viewBox 0 0 419.25 595.5 +
   preserveAspectRatio xMidYMid meet, they overlay pixel-perfectly when
   sized to the parent face — no per-element coordinate math needed. */

.yk-a5-front .yk-a5-layer,
.yk-a5-front .yk-a5-mask {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* <img> source-SVG layers — display as block, draw at full size.
   The SVG's own viewBox + xMidYMid meet handles internal positioning. */
.yk-a5-front .yk-a5-layer {
  display: block;
  user-select: none;
}

/* Retintable layers — brand-gradient div masked by the source SVG.
   Where the source SVG is opaque (the gradient region) the div is
   visible; everywhere else the mask makes it transparent.
   Result: original shape from the SVG, colour from CSS variables. */
.yk-a5-mask {
  background: linear-gradient(135deg, var(--yk-brand-2), var(--yk-brand));
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  transition: background 0.4s ease;
}
.yk-a5-mask-midline {
  -webkit-mask-image: url('physical-to-digital%20UX%20Brand%20A5%20Card/gradient%20middle%20line2.svg');
          mask-image: url('physical-to-digital%20UX%20Brand%20A5%20Card/gradient%20middle%20line2.svg');
}
.yk-a5-mask-taps {
  -webkit-mask-image: url('physical-to-digital%20UX%20Brand%20A5%20Card/gradient%20tap%20areas3.svg');
          mask-image: url('physical-to-digital%20UX%20Brand%20A5%20Card/gradient%20tap%20areas3.svg');
}
.yk-a5-mask-welkom {
  -webkit-mask-image: url('physical-to-digital%20UX%20Brand%20A5%20Card/welkom%20text%20ace%20sans.svg');
          mask-image: url('physical-to-digital%20UX%20Brand%20A5%20Card/welkom%20text%20ace%20sans.svg');
}

/* Brand-logo overlay — top-left placement at the source clipPath bounds.
   Source: x=11.84 y=13.44 w=155.25 h=132.98 (out of 419.25×595.5).
   No background block behind it — just the logo on the topo bg. */
.yk-a5-overlay-logo {
  position: absolute;
  left: 2.82%;
  top: 2.26%;
  width: 37.03%;
  height: 22.33%;
  object-fit: contain;
  padding: 3%;
  box-sizing: border-box;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
  pointer-events: none;
}

/* Mini Challenge Card replica — same DNA as the real NFC card front
   (topo bg + brand-gradient border + logo + CHALLENGE CARD label),
   sized and positioned to fill the front-design-card-placement region.
   Source clipPath: x=88.28 y=161.86 w=242.24 h=152.74
                  → 21.06%, 27.18%, 57.78%, 25.65%. */
.yk-a5-minicard {
  position: absolute;
  left: 21.06%;
  top: 27.18%;
  width: 57.78%;
  height: 25.65%;
  border-radius: 8px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(#000, #000) padding-box,
    linear-gradient(135deg, var(--yk-brand-2), var(--yk-brand)) border-box;
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  transition: background 0.4s ease;
}
/* Glossy sheen sweep — a diagonal light stripe that slides across the
   mini card every 4.5 s, the way light catches on a real plastic card.
   Sells the "card stuck onto the A5 instruction sheet" effect. */
.yk-a5-minicard::after {
  content: '';
  position: absolute;
  top: -10%;
  left: -60%;
  width: 40%;
  height: 120%;
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(28, 20, 12, 0.06) 35%,
    rgba(28, 20, 12, 0.32) 50%,
    rgba(28, 20, 12, 0.06) 65%,
    transparent 100%);
  transform: skewX(-18deg);
  animation: yk-a5-mini-sweep 4.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 3;
}
@keyframes yk-a5-mini-sweep {
  0%, 35%   { left: -60%; opacity: 0; }
  40%       { opacity: 1; }
  85%       { left: 220%; opacity: 1; }
  100%      { left: 220%; opacity: 0; }
}
/* Inner content wrapper — absolute positioning for exact control over
   logo size, gap, and label position. Flex with percentage padding kept
   clipping because percentage paddings resolve against width while card
   height is the constraint, so values fought each other. */
.yk-a5-mini-content {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}
/* Brand-gradient topo bg INSIDE the mini card — same trick as
   .yk-a5-bg, using the vector topo lines source. */
.yk-a5-mini-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--yk-brand-2), var(--yk-brand));
  -webkit-mask-image: url('physical-to-digital%20UX%20Brand%20A5%20Card/topo%20lines.svg');
          mask-image: url('physical-to-digital%20UX%20Brand%20A5%20Card/topo%20lines.svg');
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
  transition: background 0.4s ease;
}
/* NFC badge — top-right corner of the mini Challenge Card.
   Brand-gradient circle with black phone + NFC arc icons. */
.yk-a5-mini-badge {
  position: absolute;
  top: 8%;
  right: 6%;
  width: 16%;
  aspect-ratio: 1;
  z-index: 2;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
  pointer-events: none;
}
.yk-a5-mini-badge svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* Logo: anchored near top, sized for max visibility on a square logo.
   Square logos fit inside the wrap by HEIGHT (the smaller dimension),
   so a tall+wide wrap with 80% width × 65% height gives a logo that's
   65% of card height (~75 px on a 116 px card). */
.yk-a5-mini-logo-wrap {
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.yk-a5-mini-logo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}
/* CHALLENGE CARD label — anchored near the bottom of the mini card,
   so there's a real gap (~14 px) between the logo bottom and the label. */
.yk-a5-mini-label {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Simplex Sans', 'Simplex Sans', monospace;
  font-weight: 400;
  font-size: 0.62rem;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--yk-brand-2), var(--yk-brand));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transition: background 0.4s ease;
}

/* Tap-hint — same pattern as NFC. Centred bouncing 👆 + label. */
.yk-a5-tap-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.5s ease;
}
.yk-a5-tap-hint.gone { opacity: 0; }
.yk-a5-tap-bounce {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  animation: ykA5TapBounce 1.8s ease-in-out infinite;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55));
}
.yk-a5-tap-icon {
  font-size: 30px;
  line-height: 1;
  display: block;
  filter: brightness(0) invert(1);
}
.yk-a5-tap-label {
  font-family: 'Simplex Sans', monospace;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text);
  white-space: nowrap;
}
@keyframes ykA5TapBounce {
  0%, 100% { transform: translateY(0); }
  40%, 60% { transform: translateY(-7px); }
}

/* ─── A5 BACK FACE ─── Five stacked sections:
   1. TAP | SPEEL | WIN headline (gradient words, dim grey separators)
   2. Static phone mockup (mirrors right-column phone, no animations)
   3. "Bewaar deze sleutel" gradient subhead
   4. Two-line white body copy
   5. Bottom pill — black bg, brand-gradient border, white text. */

.yk-a5-back-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5% 5% 4%;
  gap: 1.6%;
  box-sizing: border-box;
}

/* 1. Headline — TAP | SPEEL | WIN. Margin-top sits it a touch below
   the A5 top edge instead of hugging it. */
.yk-a5-back-headline {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Simplex Sans', 'Sora', serif;
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1;
  letter-spacing: 0.04em;
}
.yk-a5-back-word {
  background: linear-gradient(135deg, var(--yk-brand-2), var(--yk-brand));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transition: background 0.4s ease;
}
.yk-a5-back-sep {
  color: rgba(28, 20, 12, 0.22);
  font-weight: 300;
}

/* 2. Static phone mockup — the RIGHT-COLUMN phone, rendered at its full
   original size (340 px wide) and shrunk visually with `transform: scale`.
   This preserves every proportion automatically — bezel thickness, screen
   corner radius, card padding, font sizes, dynamic island, etc. — instead
   of trying to recreate the phone with overrides.

   The wrap reserves the SCALED visual size (158 × 343 px); the inner
   .yk-phone is absolutely positioned at full 340 px width and scaled to
   ~46.5% so it fits exactly inside the wrap. */
.yk-a5-back-phone-wrap {
  width: 112px;
  height: 243px;          /* 112 × 19.5/9 — matches phone aspect */
  margin-top: 18px;
  position: relative;
  flex-shrink: 0;
}
.yk-phone-static {
  width: 340px !important;
  max-width: 340px !important;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) scale(0.329);
  transform-origin: top center;
  pointer-events: none;
}
/* Override `.yk-phone:hover` so the cloned phone keeps its scale on
   hover instead of jumping to the full-size hover transform. */
.yk-phone-static:hover {
  transform: translateX(-50%) scale(0.329) !important;
}
/* Disable every animation on the cloned phone — user wants it static. */
.yk-phone-static,
.yk-phone-static .yk-phone-logo,
.yk-phone-static .yk-page-logo-glow,
.yk-phone-static .yk-ch,
.yk-phone-static .yk-ch-influencer,
.yk-phone-static .yk-ch-influencer::before,
.yk-phone-static .yk-ch-influencer .yk-ch-icon,
.yk-phone-static .yk-ch-sparkles span,
.yk-phone-static .yk-hr-state {
  animation: none !important;
}
/* With the rotator animation disabled, every .yk-hr-state defaults to
   opacity: 0 (the animation provided the visibility window). Force the
   first state on so the cloned phone still shows a hero prompt. */
.yk-phone-static .yk-hr-s1 { opacity: 1 !important; }

/* 3. Subhead — "Bewaar deze sleutel" gradient */
.yk-a5-back-subhead {
  margin-top: 22px;
  font-family: 'Simplex Sans', 'Sora', serif;
  font-weight: 400;
  font-size: 0.85rem;
  line-height: 1.1;
  letter-spacing: 0.02em;
  background: linear-gradient(135deg, var(--yk-brand-2), var(--yk-brand));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transition: background 0.4s ease;
  text-align: center;
}

/* 4. Body copy — two centred rows, white Simplex Sans. Small margin-top
   so it sits slightly below the subhead instead of butting up against. */
.yk-a5-back-body {
  margin: 8px 4px 0;
  text-align: center;
  font: 400 0.55rem/1.45 'Simplex Sans', sans-serif;
  color: var(--text);
}

/* 5. Bottom pill — black bg, brand-gradient border via padding-box,
       white uppercase text. Mirrors the front pill colour swap (border
       brand-coloured, not white). */
.yk-a5-back-pill {
  margin-top: auto;
  border: 1.5px solid transparent;
  background:
    linear-gradient(#000, #000) padding-box,
    linear-gradient(135deg, var(--yk-brand-2), var(--yk-brand)) border-box;
  border-radius: 4px;
  padding: 6px 14px;
  font: 700 0.5rem/1 'Simplex Sans', monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
  transition: background 0.4s ease;
}

/* ── RIGHT column: realistic iPhone with brand challenge page ── */
.yk-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.yk-phone-wrap {
  perspective: 1600px;
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Phone body — brushed metallic silver / natural-titanium frame.
   Multi-stop diagonal gradient simulates light catching on a polished
   metal frame; combined inset highlights/shadows give edge dimension. */
.yk-phone {
  position: relative;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 9 / 19.5;
  background:
    linear-gradient(135deg,
      #d8dadf 0%,
      #f2f3f6 18%,
      #b6bac1 38%,
      #e4e6ea 55%,
      #a4a8b0 72%,
      #c8ccd2 88%,
      #8d9098 100%);
  border-radius: 42px;
  padding: 3px;
  box-shadow:
    0 60px 100px rgba(0, 0, 0, 0.55),
    0 30px 60px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(28, 20, 12, 0.7),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28);
  transform-style: preserve-3d;
  animation: yk-phone-float 7s ease-in-out infinite;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.yk-phone:hover {
  animation-play-state: paused;
  transform: rotateY(-2deg) rotateX(0deg) translateY(-4px);
}
@keyframes yk-phone-float {
  0%, 100% { transform: rotateY(-12deg) rotateX(4deg) rotateZ(-1deg) translateY(0); }
  50%      { transform: rotateY(-9deg)  rotateX(2deg) rotateZ(-0.5deg) translateY(-10px); }
}

/* Side buttons — silver, matching the metallic frame */
.yk-phone-btn {
  position: absolute;
  background: linear-gradient(180deg, #c8ccd2, #98a0a6);
  box-shadow:
    inset 0 1px 0 rgba(28, 20, 12, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30);
  z-index: 1;
}
.yk-phone-btn-mute  { left: -2px; top:  10%; width: 3px; height: 26px; border-radius: 2px 0 0 2px; }
.yk-phone-btn-volup { left: -2px; top:  18%; width: 3px; height: 42px; border-radius: 2px 0 0 2px; }
.yk-phone-btn-voldn { left: -2px; top:  26%; width: 3px; height: 42px; border-radius: 2px 0 0 2px; }
.yk-phone-btn-power { right: -2px; top: 22%; width: 3px; height: 60px; border-radius: 0 2px 2px 0; }

.yk-phone-screen {
  width: 100%;
  height: 100%;
  border-radius: 40px;
  background: #07070a;
  overflow: hidden;
  position: relative;
}

/* iOS status bar */
.yk-phone-status {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 22px 0;
  z-index: 5;
  color: var(--text);
  pointer-events: none;
}
.yk-phone-time {
  font: 700 0.74rem/1 'Simplex Sans', sans-serif;
  font-feature-settings: 'tnum';
}
.yk-phone-status-right {
  display: flex;
  align-items: center;
  gap: 5px;
}
.yk-phone-battery {
  width: 22px;
  height: 10px;
  border: 1px solid rgba(28, 20, 12, 0.55);
  border-radius: 3px;
  position: relative;
  padding: 1px;
  display: block;
}
.yk-phone-battery::after {
  content: '';
  position: absolute;
  right: -3px;
  top: 50%;
  transform: translateY(-50%);
  width: 1.5px;
  height: 4px;
  background: rgba(28, 20, 12, 0.55);
  border-radius: 0 1px 1px 0;
}
.yk-phone-battery-fill {
  display: block;
  height: 100%;
  width: 80%;
  background: #ffffff;
  border-radius: 1px;
}

/* Dynamic Island */
.yk-phone-island {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 84px;
  height: 22px;
  border-radius: 100px;
  background: #07070a;
  z-index: 4;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
}

/* Home indicator */
.yk-phone-home {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 4px;
  border-radius: 100px;
  background: rgba(28, 20, 12, 0.4);
  z-index: 4;
}

/* ── Brand challenge page hub (mirrors real /b/{brand}/ visual style.
       Card sizes, padding, and the holographic Influencer border are
       all proportional to the SuddenlySheep brand page CSS. The phone
       screen is narrower than a real mobile viewport (~310 px content
       vs ~340 px), so dimensions are scaled by ~0.9. */
.yk-page {
  position: absolute;
  inset: 0;
  padding: 30px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
.yk-page-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% -10%, color-mix(in srgb, var(--yk-brand) 22%, transparent) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 100%, color-mix(in srgb, var(--yk-brand-2) 12%, transparent) 0%, transparent 50%),
    #07070a;
  transition: background 0.4s ease;
  pointer-events: none;
}
/* Topo wave overlay — same mask trick as the A5 card. Brand-gradient
   div masked by topo lines.svg so the wave lines pick up the brand
   colour at low opacity. Sits between .yk-page-bg and the content. */
.yk-page-waves {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--yk-brand-2), var(--yk-brand));
  -webkit-mask-image: url('physical-to-digital%20UX%20Brand%20A5%20Card/topo%20lines.svg');
          mask-image: url('physical-to-digital%20UX%20Brand%20A5%20Card/topo%20lines.svg');
  -webkit-mask-size: 130% 130%;
          mask-size: 130% 130%;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
  transition: background 0.4s ease;
}
.yk-page > *:not(.yk-page-bg) { position: relative; z-index: 1; }

.yk-page-hero {
  text-align: center;
  margin-bottom: 4px;
  padding: 0 8px;
}
.yk-page-logo-glow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  padding: 6px;
  animation: yk-logo-breathe 3.2s ease-in-out infinite;
  transform-style: preserve-3d;
  transition: filter 0.4s ease;
}
@keyframes yk-logo-breathe {
  0%, 100% {
    filter:
      drop-shadow(0 0 10px var(--yk-brand))
      drop-shadow(0 0 22px color-mix(in srgb, var(--yk-brand) 45%, transparent));
  }
  50% {
    filter:
      drop-shadow(0 0 18px var(--yk-brand))
      drop-shadow(0 0 38px color-mix(in srgb, var(--yk-brand) 65%, transparent));
  }
}
/* Strong 3D rocking tilt on the logo image itself. Constant left-right
   rotateY swing combined with a small rotateX nod, on a deep perspective
   so the tilt reads strongly in 3D. Same pattern as the NFC card flipper
   but with a wider angle range. */
.yk-phone-logo {
  animation: yk-logo-tilt 5s ease-in-out infinite;
  transform-style: preserve-3d;
  will-change: transform;
}
@keyframes yk-logo-tilt {
  0%, 100% { transform: perspective(800px) rotateY(-16deg) rotateX(5deg)  rotateZ(-1deg); }
  50%      { transform: perspective(800px) rotateY( 16deg) rotateX(-5deg) rotateZ( 1deg); }
}
.yk-phone-logo {
  height: 200px;
  max-width: 100%;
  object-fit: contain;
}
.yk-page-tagline {
  margin: 0;
  font: 400 0.62rem/1.5 'Simplex Sans', sans-serif;
  color: var(--text);
}

/* ── Kit-maker hero rotator: mirrors the live brand-page rotator ──
   Three challenge prompts crossfade on a 9s loop (3s each, ~0.4s
   fade overlap). Brand-orange gradient border + soft glow, fully
   CSS-driven (no JS). Used inside the mockup phone screen. */
.yk-page-rotator {
  position: relative;
  display: block;
  margin: 0 auto;
  padding: 0;
  width: 92%;
  height: 32px;
  border-radius: 100px;
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(10, 12, 20, 0.85), rgba(10, 12, 20, 0.85)) padding-box,
    linear-gradient(135deg, var(--yk-brand-2), var(--yk-brand)) border-box;
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.45),
    0 0 14px color-mix(in srgb, var(--yk-brand) 35%, transparent);
  overflow: hidden;
  transition: background 0.4s ease, box-shadow 0.4s ease;
}
.yk-hr-state {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  opacity: 0;
  animation: yk-hr-cycle 9s ease-in-out infinite;
}
.yk-hr-s1 { animation-delay: 0s; }
.yk-hr-s2 { animation-delay: 3s; }
.yk-hr-s3 { animation-delay: 6s; }
@keyframes yk-hr-cycle {
  0%, 100% { opacity: 0; }
  4%       { opacity: 1; }
  29%      { opacity: 1; }
  33%      { opacity: 0; }
}
.yk-hr-icon {
  font-size: 0.88rem;
  line-height: 1;
  flex-shrink: 0;
}
.yk-hr-text {
  font: 600 0.6rem/1 'Simplex Sans', sans-serif;
  color: var(--text);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.yk-hr-text b {
  background: linear-gradient(135deg, var(--yk-brand-2), var(--yk-brand));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-weight: 800;
  transition: background 0.4s ease;
}
@media (prefers-reduced-motion: reduce) {
  .yk-hr-state { animation: none; }
  .yk-hr-s1 { opacity: 1; }
}

/* ── Store CTA inside the mockup phone screen ──
   Static gradient-orange button matching the live brand page CTA. */
.yk-page-cta {
  margin: 12px auto 4px;
  padding: 9px 18px;
  max-width: 88%;
  text-align: center;
  font: 700 0.62rem/1 'Simplex Sans', sans-serif;
  color: var(--text);
  letter-spacing: 0.02em;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--yk-brand-2), var(--yk-brand));
  box-shadow: 0 3px 12px color-mix(in srgb, var(--yk-brand) 40%, transparent);
  transition: background 0.4s ease, box-shadow 0.4s ease;
}

/* ── Language flag picker — decorative footer row inside the phone ── */
.yk-page-lang {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 8px auto 0;
}
.yk-page-lang span {
  font-size: 0.82rem;
  line-height: 1;
  opacity: 0.9;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.yk-page-section-label {
  margin: 6px 4px 2px;
  font: 700 0.5rem/1 'Simplex Sans', monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
}
.yk-page-section-label-2 {
  margin-top: 10px;
}

.yk-challenges {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Brand-page-style cards: tall, multi-line subs, large icons.
   Mirrors `.bp-card` — padding 22px 18px, min-height 92px,
   border-radius 18px, gap 16px — scaled for the 310 px screen. */
.yk-ch {
  position: relative;
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 11px;
  padding: 12px 11px;
  min-height: 62px;
  border-radius: 14px;
  /* Brand-gradient BORDER via padding-box / border-box trick. Inner bg
     is solid so brand colour does NOT bleed through the card body —
     only the border edge picks up the gradient. */
  border: 1.5px solid transparent;
  background:
    linear-gradient(#0a0c14, #0a0c14) padding-box,
    linear-gradient(135deg, var(--yk-brand-2), var(--yk-brand)) border-box;
  overflow: hidden;
  /* Breathing glow tight around the border edge — pulses 3.2 s loop. */
  animation: yk-ch-breathe 3.2s ease-in-out infinite;
  transition: background 0.4s ease;
}
@keyframes yk-ch-breathe {
  0%, 100% {
    box-shadow:
      0 4px 16px rgba(0, 0, 0, 0.55),
      0 0 4px color-mix(in srgb, var(--yk-brand) 25%, transparent),
      inset 0 1px 0 rgba(28, 20, 12, 0.05);
  }
  50% {
    box-shadow:
      0 4px 16px rgba(0, 0, 0, 0.55),
      0 0 12px color-mix(in srgb, var(--yk-brand) 55%, transparent),
      inset 0 1px 0 rgba(28, 20, 12, 0.05);
  }
}
.yk-ch-icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: rgba(28, 20, 12, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
}
.yk-ch-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.yk-ch-name {
  font: 700 0.78rem/1.2 'Sora', sans-serif;
  color: var(--text);
  letter-spacing: -0.01em;
}
.yk-ch-sub {
  font: 400 0.58rem/1.4 'Simplex Sans', sans-serif;
  color: var(--text);
}
/* Loyalty Streak progress dots — 7 small circles, brand-color when filled */
.yk-ch-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 3px 0 4px;
}
.yk-ch-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(28, 20, 12, 0.12);
  border: 1px solid rgba(28, 20, 12, 0.22);
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.yk-ch-dots span.is-filled {
  background: var(--yk-brand);
  border-color: var(--yk-brand);
  box-shadow: 0 0 6px color-mix(in srgb, var(--yk-brand) 60%, transparent);
}

/* Status badges */
.yk-ch-badge {
  font: 800 0.58rem/1 'Simplex Sans', monospace;
  letter-spacing: 0.05em;
  padding: 5px 9px;
  border-radius: 100px;
  white-space: nowrap;
  border: 1px solid transparent;
  flex-shrink: 0;
}
.yk-ch-badge-gold {
  background: linear-gradient(135deg, var(--yk-brand-2), var(--yk-brand));
  color: #07070a;
  text-transform: capitalize;
  box-shadow: 0 1px 8px color-mix(in srgb, var(--yk-brand) 40%, transparent);
  transition: background 0.4s ease, box-shadow 0.4s ease;
}
.yk-ch-badge-progress {
  background: rgba(28, 20, 12, 0.07);
  color: rgba(28, 20, 12, 0.85);
  border-color: rgba(28, 20, 12, 0.18);
}
.yk-ch-badge-vip {
  background: linear-gradient(135deg, rgba(232, 87, 138, 0.22), rgba(91, 142, 240, 0.20));
  color: #c0f0ff;
  border-color: rgba(91, 142, 240, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ─── Influencer challenge card — full holographic treatment ───
   Animated multi-color gradient border via ::before mask trick,
   pulsing rainbow glow via box-shadow keyframes on the card itself,
   and floating sparkles inside. */
.yk-ch-influencer {
  position: relative;
  border: none;
  background:
    linear-gradient(135deg,
      rgba(232, 87, 138, 0.13),
      rgba(6, 8, 16, 0.95),
      rgba(91, 142, 240, 0.09));
  overflow: visible;
  animation: yk-ch-infl-glow 3s ease-in-out infinite;
}
.yk-ch-influencer::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: 15.5px;
  padding: 1.5px;
  background: linear-gradient(90deg,
    #e8578a, #93c5fd, #5b8ef0, #c0f0ff, #60a5fa, #e8578a, #93c5fd);
  background-size: 400% 100%;
  animation: yk-ch-infl-holo 5s linear infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index: 0;
  pointer-events: none;
}
.yk-ch-influencer .yk-ch-icon {
  font-size: 1.65rem;
  width: 42px;
  height: 42px;
  background: rgba(28, 20, 12, 0.08);
  animation: yk-ch-infl-icon-pop 2.5s ease-in-out infinite;
}
.yk-ch-influencer > *:not(.yk-ch-sparkles) { position: relative; z-index: 1; }

/* Floating sparkles inside the influencer card */
.yk-ch-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: 14px;
  z-index: 1;
}
.yk-ch-sparkles span {
  position: absolute;
  font-size: 0.7rem;
  opacity: 0;
  animation: yk-ch-infl-sparkle 2s ease-in-out infinite;
}
.yk-ch-sparkles span:nth-child(1) { top: 14%; right: 24%; color: #c0f0ff; animation-delay: 0s; }
.yk-ch-sparkles span:nth-child(2) { bottom: 18%; right: 15%; color: #f799bb; animation-delay: 0.6s; }
.yk-ch-sparkles span:nth-child(3) { top: 50%; right: 32%; color: #93c5fd; animation-delay: 1.2s; font-size: 0.55rem; }
.yk-ch-sparkles span:nth-child(4) { bottom: 32%; right: 8%; color: #c0f0ff; animation-delay: 1.8s; font-size: 0.5rem; }

@keyframes yk-ch-infl-holo {
  0%   { background-position: 0% 50%; }
  100% { background-position: 400% 50%; }
}
@keyframes yk-ch-infl-glow {
  0%, 100% { box-shadow: 0 0 16px rgba(232, 87, 138, 0.45), 0 0 36px rgba(232, 87, 138, 0.14); }
  33%      { box-shadow: 0 0 20px rgba(91, 142, 240, 0.45), 0 0 40px rgba(91, 142, 240, 0.16); }
  66%      { box-shadow: 0 0 18px rgba(147, 197, 253, 0.45), 0 0 38px rgba(147, 197, 253, 0.16); }
}
@keyframes yk-ch-infl-icon-pop {
  0%, 100% { transform: translateY(0) scale(1) rotate(-3deg); }
  50%      { transform: translateY(-3px) scale(1.10) rotate(3deg); }
}
@keyframes yk-ch-infl-sparkle {
  0%, 100% { opacity: 0; transform: scale(0.4) translateY(0); }
  50%      { opacity: 1; transform: scale(1.3) translateY(-3px); }
}

.yk-right-cap {
  margin: 0;
  text-align: center;
  font: 500 0.92rem/1.3 'Simplex Sans', sans-serif;
  color: var(--text);
  opacity: 1;
  letter-spacing: 0;
}

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .yk-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .yk-right { grid-column: 1 / -1; }
  .yk-phone { max-width: 260px; }
}
@media (max-width: 768px) {
  .yk-grid { grid-template-columns: 1fr; gap: 36px; margin-top: 36px; }
  .yk-right { grid-column: 1; }
  .yk-left-title { font-size: 1.3rem; }
  .yk-nfc-flipper, .yk-a5-flipper, .yk-phone { max-width: 260px; }
  .yk-phone { animation: none; transform: rotateY(-6deg) rotateX(2deg); }
  .yk-phone:hover { transform: rotateY(-3deg) rotateX(1deg); }
  .yk-cta { width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════
   HIDDEN COST — problem-statement section between kit-maker
   and Ecosystem. Sharp corners across the board (square design
   system). Special Link column gets the brand gradient outline.
═══════════════════════════════════════════════════════════════ */
.hc-section {
  padding: 70px 0 84px;
  position: relative;
}
.hc-header {
  text-align: center;
  max-width: 1100px;
  margin: 0 auto 40px;
}
/* Sized to match .nh-headline (the new top hero overlay) so both
   "story beats" of the landing page read at the same visual weight. */
.hc-title {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: clamp(16px, 2.4vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 14px;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .hc-title {
    font-size: clamp(12px, 3.4vw, 18px);
    white-space: normal;
  }
}
.hc-sub {
  font: 500 1.02rem/1.5 'Simplex Sans', sans-serif;
  color: rgba(28, 20, 12, 0.78);
  margin: 0;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* Grid: video (left) + stat stack (right) */
.hc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: stretch;
  margin: 0 auto 56px;
  max-width: 1100px;
}
/* Right column distributes 5 stat cards evenly across the square video's
   height so the visual rhythm balances. */
.hc-stats { justify-content: space-between; }

/* LEFT — the unboxing video. Fills the grid row height (which is set by
   whichever column is taller — usually the stats column with 7 cards).
   Source is 1080x1080 so object-fit: cover only crops marginally. */
.hc-video-wrap {
  position: relative;
  min-height: 480px;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(28, 20, 12, 0.10);
}
.hc-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Own GPU compositing layer so the absolutely-positioned caption above
     can never trigger repaints on the video pixels underneath. */
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}
.hc-video-caption {
  position: absolute;
  top: 14px; left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font: 600 0.82rem/1 'Simplex Sans', sans-serif;
  color: var(--text);
  letter-spacing: 0.01em;
}
.hc-vc-icon { font-size: 1rem; }

/* RIGHT — vertical stat-card stack. Each card: big gradient number on
   the left, white label + small grey source line on the right. The cards
   space-between across the video's height so the column reads as a
   curated industry-backed wall of evidence. */
.hc-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: space-between;
}
.hc-stat {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: center;
  padding: 14px 20px;
  background: var(--surface);
  border-left: 2px solid rgba(255, 206, 129, 0.45);
  border-top: 1px solid rgba(28, 20, 12, 0.06);
  border-right: 1px solid rgba(28, 20, 12, 0.06);
  border-bottom: 1px solid rgba(28, 20, 12, 0.06);
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
  position: relative;
}
.hc-stat:hover {
  border-left-color: #ffce81;
  border-top-color: rgba(255, 206, 129, 0.30);
  border-right-color: rgba(255, 206, 129, 0.30);
  border-bottom-color: rgba(255, 206, 129, 0.30);
  transform: translateX(2px);
  box-shadow: -2px 0 14px rgba(255, 122, 60, 0.10);
}
.hc-stat-num {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: -0.03em;
  line-height: 1;
  min-width: 84px;
  text-align: left;
  font-variant-numeric: tabular-nums;
}
.hc-stat-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.hc-stat-lbl {
  font: 500 0.88rem/1.4 'Simplex Sans', sans-serif;
  color: var(--text);
}
.hc-stat-lbl strong { color: var(--text); font-weight: 700; }
.hc-stat-src {
  font: 500 0.7rem/1.2 'Simplex Sans', sans-serif;
  color: rgba(28, 20, 12, 0.45);
  letter-spacing: 0.01em;
  font-style: italic;
}

/* Top-3 "key" stats — the upside opportunities (LTV, retention, UGC).
   Stronger gradient left bar + slightly bigger number + subtle gradient
   background tint so the eye lands here first. */
.hc-stat-key {
  background:
    linear-gradient(180deg, rgba(255, 122, 60, 0.07), rgba(255, 206, 129, 0.03)),
    var(--surface);
  border-left-width: 4px;
  border-left-color: #ffce81;
  border-top-color: rgba(255, 206, 129, 0.20);
  border-right-color: rgba(255, 206, 129, 0.20);
  border-bottom-color: rgba(255, 206, 129, 0.20);
}
.hc-stat-key .hc-stat-num {
  font-size: clamp(1.7rem, 2.9vw, 2.2rem);
}
.hc-stat-key .hc-stat-lbl {
  font-size: 0.92rem;
}
.hc-stat-key:hover {
  border-left-color: #ff7a3c;
}

/* VS TABLE */
.hc-table-wrap {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.hc-table-title {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 8px;
}
.hc-table-sub {
  font: 500 0.95rem/1.5 'Simplex Sans', sans-serif;
  color: rgba(28, 20, 12, 0.72);
  margin: 0 0 32px;
}
.hc-table {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.15fr;
  background: #18181d;       /* uniform grey grid */
  border: 1px solid var(--border);
  text-align: left;
  overflow: visible;         /* allow PU column glow to extend beyond edges */
  position: relative;
}

/* Continuous gradient-orange outline around the entire Special Link column
   with soft brand-colour glow. Absolutely-positioned overlay sized to
   match the 4th grid track (column = 1.15fr of total 4.55fr → starts at
   74.725%, width 25.275%). Single gradient unbroken across all 25 rows,
   not a per-cell pile-up. */
.hc-table::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 74.725%;
  width: 25.275%;
  pointer-events: none;
  z-index: 5;
  padding: 2px;
  background: linear-gradient(135deg, #ff7a3c 0%, #ffce81 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  box-shadow:
    0 0 28px  rgba(255, 206, 129, 0.32),
    0 0 60px  rgba(255,  49, 49, 0.14);
}
.hc-row {
  display: contents;
}
.hc-row-head .hc-cell {
  font: 700 0.78rem/1.2 'Simplex Sans', sans-serif;
  color: rgba(28, 20, 12, 0.85);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 18px 16px;
  background: #1f1f24;
  border-bottom: 1px solid rgba(28, 20, 12, 0.10);
}
/* Header PU cell — logo fills the box. Drop the redundant "Special Link"
   text; the wordmark logo IS the brand. Cell padding minimised so the
   logo gets edge-to-edge breathing room. */
.hc-row-head .hc-cell-pu {
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1c1c22;
}
.hc-pu-logo {
  width: 100%;
  max-width: 180px;
  height: auto;
  max-height: 36px;
  object-fit: contain;
  display: block;
}
.hc-cell {
  padding: 16px 18px;
  font: 500 0.92rem/1.45 'Simplex Sans', sans-serif;
  color: rgba(28, 20, 12, 0.95);
  background: #18181d;       /* uniform grey for ALL cells */
  border-bottom: 1px solid rgba(28, 20, 12, 0.06);
  display: flex;
  align-items: center;
}
.hc-row:last-child .hc-cell { border-bottom: none; }
.hc-cell-label {
  font-weight: 700;
  color: var(--text);
  background: #1c1c22;       /* slightly darker so the row labels read first */
  border-right: 1px solid rgba(28, 20, 12, 0.06);
}

/* Red X and green check icons inside cells. Margin-right opens up
   breathing room from the following text. Display inline-block so the
   ::after spacing is consistent and so the green check can animate
   subtly via transform. */
.hc-x,
.hc-ok {
  display: inline-block;
  font-weight: 700;
  margin-right: 8px;
  font-size: 1.05em;
  line-height: 1;
  vertical-align: -0.05em;
}
.hc-x  { color: #ff5252; }
.hc-ok {
  color: #5DD68C;
  animation: hc-ok-pulse 2.6s ease-in-out infinite;
  transform-origin: center;
}

/* Subtle "alive" pulse on every green check — slight scale + soft green
   glow at the peak. All checks tick in unison so the PU column reads
   as one continuous heartbeat, not 30 separate distractions. */
@keyframes hc-ok-pulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 transparent);
  }
  50% {
    transform: scale(1.10);
    filter: drop-shadow(0 0 5px rgba(93, 214, 140, 0.55));
  }
}
@media (prefers-reduced-motion: reduce) {
  .hc-ok { animation: none; }
}

/* PU cells keep no individual borders — the .hc-table::after overlay
   above draws the continuous gradient outline + glow for the whole
   column at once. */

/* Top 5 "key" comparison rows — gradient-orange tint on the LABEL cell
   only (the PU column distinction now comes from the outline border). */
.hc-row-key .hc-cell-label {
  background:
    linear-gradient(90deg, rgba(255, 122, 60, 0.14), rgba(255, 206, 129, 0.06)),
    #1c1c22;
  border-left: 3px solid #ffce81;
  padding-left: 15px;
  color: var(--text);
}
.hc-pos { color: var(--text); }
.hc-neg { color: rgba(28, 20, 12, 0.55); }
.hc-cell strong { color: var(--text); font-weight: 700; }

.hc-footnote {
  font: 500 0.74rem/1.4 'Simplex Sans', sans-serif;
  color: rgba(28, 20, 12, 0.45);
  text-align: center;
  margin: 22px 0 0;
  letter-spacing: 0.01em;
}

/* Rows 11–24 are hidden by default. The .is-expanded class on the table
   reveals them. Since .hc-row uses display:contents, hiding it via
   display:none removes ALL of its cells from the grid in one go. */
.hc-row-extra { display: none; }
.hc-table.is-expanded .hc-row-extra { display: contents; }

/* Wide expand button — full table width, gradient-orange border via the
   padding-box trick (matches the PU column outline aesthetic), soft glow
   that gets stronger on hover. */
.hc-table-expand {
  display: block;
  width: 100%;
  margin: 14px 0 0;
  padding: 18px 24px;
  background:
    linear-gradient(180deg, rgba(255, 122, 60, 0.10), rgba(255, 206, 129, 0.06)) padding-box,
    linear-gradient(135deg, #ff7a3c 0%, #ffce81 100%) border-box;
  border: 2px solid transparent;
  border-radius: 0;
  color: var(--text);
  font: 700 0.98rem/1 'Simplex Sans', sans-serif;
  letter-spacing: 0.01em;
  cursor: pointer;
  text-align: center;
  transition: filter 200ms ease, transform 100ms ease, box-shadow 250ms ease;
  box-shadow:
    0 0 22px rgba(255, 206, 129, 0.22),
    0 0 50px rgba(255, 122, 60, 0.10);
}
.hc-table-expand:hover {
  filter: brightness(1.12);
  box-shadow:
    0 0 32px rgba(255, 206, 129, 0.38),
    0 0 70px rgba(255, 122, 60, 0.18);
}
.hc-table-expand:active {
  transform: scale(0.995);
}
.hc-table-expand:focus-visible {
  outline: 2px solid #ffce81;
  outline-offset: 3px;
}

/* HC RESPONSIVE */
@media (max-width: 900px) {
  .hc-section { padding: 56px 0 64px; }
  .hc-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-bottom: 48px;
  }
  .hc-video-wrap { aspect-ratio: 1 / 1; max-width: 480px; margin: 0 auto; }
  .hc-stat-num { min-width: 80px; }
}
@media (max-width: 700px) {
  /* Compact mobile table — each row becomes its own card with the row
     label as a small heading on top spanning the full width, and the
     three values (Flyer / Social / Special Link) in a 3-col sub-grid
     underneath. Column-header row is hidden. */
  .hc-table {
    display: flex;
    flex-direction: column;
  }
  .hc-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1.15fr;
    border-bottom: 1px solid rgba(28, 20, 12, 0.06);
  }
  .hc-row-head { display: none; }
  .hc-row .hc-cell-label {
    grid-column: 1 / -1;
    background: rgba(255, 206, 129, 0.10);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(28, 20, 12, 0.90);
    padding: 10px 14px;
    border-right: none;
    border-left: none;
    border-bottom: 1px solid rgba(28, 20, 12, 0.06);
  }
  .hc-cell {
    padding: 12px 10px;
    font-size: 0.82rem;
  }
  /* PU column outline doesn't translate to mobile (rows stack) —
     mark PU cells with a thin top edge accent instead. */
  .hc-cell-pu {
    border-left: none;
    border-right: none;
    border-top: 1px solid rgba(255, 206, 129, 0.55);
    background:
      linear-gradient(180deg, rgba(255, 206, 129, 0.06), transparent),
      #18181d;
  }
  .hc-row-head .hc-cell-pu,
  .hc-row-last .hc-cell-pu { border: none; border-top: 1px solid rgba(255, 206, 129, 0.55); }
}


/* ══════════════════════════════════════════════
   CONTACT SECTION — Talk to the Special Link team
   4 channels (Mail, Live chat coming soon, Video call, WhatsApp coming soon).
   Mirrored inside the contact modal opened from the kit-maker
   "Let's talk first" button.
══════════════════════════════════════════════ */
.contact-section {
  padding: 96px 0 110px;
  position: relative;
}
.contact-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
  padding: 0 24px;
}
.contact-head h2 {
  font-family: 'Simplex Sans', sans-serif;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 14px;
  line-height: 1.15;
  color: var(--text);
}
.contact-head p {
  font-family: 'Simplex Sans', sans-serif;
  font-size: 1.02rem;
  line-height: 1.55;
  color: rgba(28, 20, 12, 0.7);
  margin: 0;
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 18px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  align-items: stretch;
}

/* "Inhouse" wrapper — gradient orange border + soft glow, with the
   Special Link logo + label at the top, then 3 inner cards (Mail / Chat / Meet). */
.contact-group {
  display: flex;
  flex-direction: column;
}
.contact-group-inhouse {
  background:
    linear-gradient(rgba(14, 14, 16, 1), rgba(14, 14, 16, 1)) padding-box,
    linear-gradient(135deg, #ff7a3c, #ffce81) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 0 28px rgba(255, 206, 129, 0.18);
  padding: 30px 26px 24px;
}
.contact-group-head {
  text-align: center;
  margin-bottom: 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(28, 20, 12, 0.08);
}
.contact-group-logo {
  height: 28px;
  width: auto;
  max-width: 180px;
  display: block;
  margin: 0 auto 10px;
  object-fit: contain;
}
.contact-group-label {
  font-family: 'Simplex Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(28, 20, 12, 0.7);
}
.contact-group-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  flex: 1;
}

.contact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 22px 26px;
  background: linear-gradient(180deg, #1a1a1c 0%, #131316 100%);
  border: 1px solid rgba(28, 20, 12, 0.10);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  min-height: 100%;
}
.contact-card:hover {
  border-color: rgba(255, 206, 129, 0.32);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32), 0 0 18px rgba(255, 206, 129, 0.12);
}

/* Cards inside the Inhouse wrapper: slightly less padding + softer surface
   since the wrapper already provides the gradient frame + emphasis. */
.contact-group-inner .contact-card {
  padding: 24px 16px 20px;
  background: linear-gradient(180deg, #1f1f23 0%, #16161a 100%);
  border-color: rgba(28, 20, 12, 0.08);
}
.contact-group-inner .contact-card-logo { height: 56px; margin-bottom: 16px; }
.contact-group-inner .contact-card h3   { font-size: 1rem; }
.contact-group-inner .contact-card p    { font-size: 0.85rem; margin-bottom: 18px; }

/* WhatsApp standalone (external channel) — keep plain grey border, no
   gradient, no orange hover tint. Sits next to the Inhouse block. */
.contact-card-external:hover {
  border-color: rgba(28, 20, 12, 0.20);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
}

.contact-card-logo {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.contact-card-logo-icon svg {
  width: 38px;
  height: 38px;
  color: var(--accent-2);
}
.contact-card-logo-wa svg {
  width: 40px;
  height: 40px;
  color: #25D366;
}
.contact-card-logo-img img {
  height: 30px;
  width: auto;
  max-width: 160px;
  display: block;
  object-fit: contain;
}

.contact-card h3 {
  font-family: 'Simplex Sans', sans-serif;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
  color: var(--text);
}
.contact-card p {
  font-family: 'Simplex Sans', sans-serif;
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(28, 20, 12, 0.7);
  margin: 0 0 22px;
  flex: 1;
}

.contact-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  background: rgba(28, 20, 12, 0.04);
  border: 1px solid rgba(28, 20, 12, 0.18);
  color: var(--text);
  font-family: 'Simplex Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.12s ease;
  align-self: stretch;
}
.contact-card-cta:hover {
  background: rgba(255, 206, 129, 0.08);
  border-color: rgba(255, 206, 129, 0.55);
  color: var(--text);
  transform: translateY(-1px);
}

.contact-card-cta-primary {
  background: linear-gradient(135deg, #ff7a3c, #ffce81);
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(255, 122, 60, 0.32);
}
.contact-card-cta-primary:hover {
  filter: brightness(1.08);
  background: linear-gradient(135deg, #ff7a3c, #ffce81);
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(255, 122, 60, 0.45);
}

.contact-card-cta-soon {
  background: rgba(28, 20, 12, 0.025);
  border-color: rgba(28, 20, 12, 0.08);
  color: rgba(28, 20, 12, 0.45);
  cursor: not-allowed;
}
.contact-card-cta-soon:hover {
  background: rgba(28, 20, 12, 0.025);
  border-color: rgba(28, 20, 12, 0.08);
  color: rgba(28, 20, 12, 0.45);
  transform: none;
}

/* Featured (video-call) card — gradient orange border + soft glow to
   single it out as the primary action without crowding the row. */
.contact-card-featured {
  background:
    linear-gradient(rgba(20, 20, 24, 1), rgba(20, 20, 24, 1)) padding-box,
    linear-gradient(135deg, #ff7a3c, #ffce81) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 0 22px rgba(255, 206, 129, 0.18);
}
.contact-card-featured:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32), 0 0 28px rgba(255, 206, 129, 0.32);
}

.contact-card-soon { opacity: 0.92; }
.contact-card-soon:hover { opacity: 1; }

@media (max-width: 1024px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 580px) {
  .contact-section { padding: 64px 0 76px; }
  .contact-head { margin-bottom: 38px; }
  .contact-grid { gap: 14px; }
  .contact-group-inhouse { padding: 26px 18px 18px; }
  .contact-group-inner { grid-template-columns: 1fr; }
  .contact-card { padding: 26px 20px 22px; }
}


/* ══════════════════════════════════════════════
   CONTACT MODAL — opened from the kit-maker
   "Let's talk first" button. Same 4 cards inside
   a centered modal frame.
══════════════════════════════════════════════ */
.contact-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
}
.contact-modal[hidden] { display: none !important; }
.contact-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: cmFadeIn 0.22s ease-out;
}
@keyframes cmFadeIn { from { opacity: 0; } to { opacity: 1; } }

.contact-modal-card {
  position: relative;
  width: 100%;
  max-width: 1100px;
  background: linear-gradient(180deg, #15151a 0%, #0e0e12 100%);
  border: 1px solid rgba(28, 20, 12, 0.10);
  padding: 44px 38px 36px;
  animation: cmRise 0.26s cubic-bezier(0.22, 1, 0.36, 1);
  margin: auto 0;
}
@keyframes cmRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.contact-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(28, 20, 12, 0.04);
  border: 1px solid rgba(28, 20, 12, 0.12);
  color: rgba(28, 20, 12, 0.78);
  cursor: pointer;
  border-radius: 0;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.contact-modal-close:hover {
  background: rgba(255, 206, 129, 0.08);
  border-color: rgba(255, 206, 129, 0.4);
  color: var(--text);
}
.contact-modal-head {
  text-align: center;
  margin: 0 auto 36px;
  max-width: 640px;
}
.contact-modal-head h2 {
  font-family: 'Simplex Sans', sans-serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.022em;
  margin: 0 0 10px;
  color: var(--text);
}
.contact-modal-head p {
  font-family: 'Simplex Sans', sans-serif;
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(28, 20, 12, 0.7);
  margin: 0;
}

.contact-grid-modal {
  max-width: 100%;
  padding: 0;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
  .contact-grid-modal { grid-template-columns: minmax(0, 1fr) 240px; }
}
@media (max-width: 640px) {
  .contact-modal-card { padding: 36px 22px 26px; }
  .contact-grid-modal { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════
   THE FLYWHEEL — 90-day customer journey scrubber.
   Side-by-side: brand dashboard (left) + customer phone (right).
   Range input across the bottom drives both panes + the narration.
══════════════════════════════════════════════ */
.flywheel-section { padding: 96px 0 110px; position: relative; }
.flywheel-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
  padding: 0 24px;
}
.flywheel-head h2 {
  font-family: 'Simplex Sans', sans-serif;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 14px;
  line-height: 1.15;
  color: var(--text);
}
.flywheel-head p {
  font-size: 1.02rem;
  line-height: 1.55;
  color: rgba(28, 20, 12, 0.7);
  margin: 0;
}

.flywheel-stage {
  display: grid;
  grid-template-columns: 340px 1fr;  /* phone fixed width, dashboard takes the rest */
  gap: 28px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  align-items: stretch;   /* both columns same height — narration card fills to phone bottom */
}
.flywheel-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.flywheel-pane-title {
  font-family: 'Simplex Sans', sans-serif;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  text-align: center;
  line-height: 1.2;
}
.flywheel-pane {
  background: linear-gradient(180deg, #1a1a1c 0%, #131316 100%);
  border: 1px solid rgba(28, 20, 12, 0.10);
  padding: 24px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* Right column stretches with phone height; narration card grows to fill. */
.flywheel-col-dashboard { display: flex; flex-direction: column; gap: 18px; }
/* Dashboard card has a fixed min-height so it doesn't grow as feed items
   pile up — feed list is given a fixed area so it stays put. */
.flywheel-col-dashboard .flywheel-dashboard {
  flex-shrink: 0;
  min-height: 460px;
}
/* The feed inside takes the leftover space in the dashboard pane and shows
   exactly enough room for the max 5 items — items beyond that get cropped
   gracefully (FEED_MAX = 5 in JS already enforces this). */
.flywheel-col-dashboard .flywheel-feed {
  flex: 1;
  min-height: 0;
}

/* Dashboard pane */
.flywheel-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.flywheel-kpi {
  background: rgba(28, 20, 12, 0.02);
  border: 1px solid rgba(28, 20, 12, 0.08);
  padding: 14px 16px 12px;
}
.flywheel-kpi-num {
  font-family: 'Simplex Sans', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #ff7a3c, #ffce81);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  line-height: 1.1;
}
.flywheel-kpi-lbl {
  font-family: 'Simplex Sans', sans-serif;
  font-size: 0.74rem;
  color: rgba(28, 20, 12, 0.55);
  margin-top: 4px;
}

.flywheel-feed {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.flywheel-feed-label {
  font-family: 'Simplex Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(28, 20, 12, 0.5);
}
.flywheel-feed-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
}
.flywheel-feed-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-family: 'Simplex Sans', sans-serif;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(28, 20, 12, 0.85);
  padding: 8px 10px;
  background: rgba(255, 206, 129, 0.04);
  border-left: 2px solid rgba(255, 206, 129, 0.45);
  animation: fwFeedIn 0.32s ease-out;
}
.flywheel-feed-day {
  font-weight: 700;
  color: var(--accent-2);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.flywheel-feed-empty {
  font-family: 'Simplex Sans', sans-serif;
  font-size: 0.82rem;
  color: rgba(28, 20, 12, 0.35);
  padding: 8px 10px;
  background: none;
  border: none;
}
@keyframes fwFeedIn {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Phone column — kit-maker-style metallic phone with heavier 3D tilt
   so the side buttons are visible at the extremes of the rotation. */
.flywheel-phone-wrap {
  perspective: 1400px;
  display: flex;
  justify-content: center;
  width: 100%;
}
.flywheel-phone {
  position: relative;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 9 / 19.5;
  background:
    linear-gradient(135deg,
      #d8dadf 0%,
      #f2f3f6 18%,
      #b6bac1 38%,
      #e4e6ea 55%,
      #a4a8b0 72%,
      #c8ccd2 88%,
      #8d9098 100%);
  border-radius: 40px;
  padding: 3px;
  box-shadow:
    0 40px 80px rgba(0, 0, 0, 0.55),
    0 16px 36px rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(28, 20, 12, 0.7),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28);
  transform-style: preserve-3d;
  animation: fwPhoneTilt 9s ease-in-out infinite;
}
@keyframes fwPhoneTilt {
  0%   { transform: rotateY(-18deg) rotateX(2deg)  rotateZ(-0.5deg); }
  25%  { transform: rotateY(-24deg) rotateX(3deg)  rotateZ(-1deg); }
  50%  { transform: rotateY(8deg)   rotateX(-1deg) rotateZ(0.5deg); }
  75%  { transform: rotateY(-12deg) rotateX(2deg)  rotateZ(-0.5deg); }
  100% { transform: rotateY(-18deg) rotateX(2deg)  rotateZ(-0.5deg); }
}
.flywheel-phone:hover { animation-play-state: paused; }

/* Side buttons — silver matching the frame. Stick out slightly so the
   3D tilt catches them at the extremes. */
.flywheel-phone-btn {
  position: absolute;
  background: linear-gradient(180deg, #c8ccd2, #98a0a6);
  box-shadow:
    inset 0 1px 0 rgba(28, 20, 12, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.32),
    0 0 0 0.5px rgba(0, 0, 0, 0.2);
  z-index: 2;
}
.flywheel-phone-btn-mute  { left: -2px; top: 10%; width: 3px; height: 26px; border-radius: 2px 0 0 2px; }
.flywheel-phone-btn-volup { left: -2px; top: 18%; width: 3px; height: 42px; border-radius: 2px 0 0 2px; }
.flywheel-phone-btn-voldn { left: -2px; top: 26%; width: 3px; height: 42px; border-radius: 2px 0 0 2px; }
.flywheel-phone-btn-power { right: -2px; top: 22%; width: 3px; height: 60px; border-radius: 0 2px 2px 0; }

.flywheel-phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 206, 129, 0.06) 0%, transparent 60%),
    #0a0a0a;
  border-radius: 37px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Per-event scenes — each renders inside the phone frame. .fws-screen
   variants share a brand-bar header; standalone scenes (arrive, tap,
   friend, summary) don't show the brand UI because the customer isn't
   "on the brand page" at that moment in the story. */
.fws {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 18px 16px;
  text-align: center;
  animation: fwScreenIn 0.36s cubic-bezier(0.22, 1, 0.36, 1);
  font-family: 'Simplex Sans', sans-serif;
}
@keyframes fwScreenIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fws-cap {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(28, 20, 12, 0.85);
  letter-spacing: 0.01em;
}
.fws-game-hint {
  font-size: 0.7rem;
  color: rgba(28, 20, 12, 0.4);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 4px;
}

/* Brand bar — shows at the top of "the customer is on the brand page" scenes.
   Kept simple — no negative-margin breakout tricks, just a centred header
   inside the scene's normal padding. */
.fws-screen {
  justify-content: flex-start;
  gap: 12px;
  padding: 12px 14px 16px;
}
.fws-brand-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  padding: 6px 12px;
  background: rgba(28, 20, 12, 0.04);
  border: 1px solid rgba(255, 206, 129, 0.25);
  border-radius: 2px;
  margin-bottom: 4px;
}
.fws-brand-your { color: rgba(28, 20, 12, 0.6); }
.fws-brand-grad {
  background: linear-gradient(135deg, #ff7a3c, #ffce81);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.fws-game-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(28, 20, 12, 0.85);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── arrive ── premium package with the card lifting out */
.fws-arrive { justify-content: center; gap: 22px; }
.fws-package {
  position: relative;
  width: 124px;
  height: 90px;
}
.fws-package-glow {
  position: absolute;
  inset: -16px;
  background: radial-gradient(ellipse at 50% 60%, rgba(255, 206, 129, 0.22) 0%, transparent 70%);
  pointer-events: none;
  animation: fwGlow 2.4s ease-in-out infinite;
}
@keyframes fwGlow {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}
.fws-package-body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 70px;
  background: linear-gradient(180deg, #2a2630, #18171c);
  border: 1.5px solid rgba(28, 20, 12, 0.10);
}
.fws-package-flap {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 24px;
  background: linear-gradient(180deg, #1c1a20, #14131a);
  border: 1.5px solid rgba(28, 20, 12, 0.10);
  border-bottom: none;
  transform-origin: bottom center;
  transform: perspective(80px) rotateX(-30deg);
}
.fws-package-card {
  position: absolute;
  left: 50%; bottom: 36px;
  width: 56px; height: 38px;
  background: linear-gradient(135deg, #ff7a3c, #ffce81);
  border-radius: 3px;
  box-shadow: 0 4px 14px rgba(255, 122, 60, 0.5);
  transform: translateX(-50%);
  animation: fwCardLift 2.2s ease-in-out infinite;
}
@keyframes fwCardLift {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-12px); }
}

/* ── tap ── card hovering above a phone with concentric pulse rings */
.fws-tap { justify-content: center; gap: 18px; }
.fws-tap-stage {
  position: relative;
  width: 140px;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fws-tap-card {
  position: absolute;
  top: 8px;
  width: 78px; height: 50px;
  background: linear-gradient(135deg, #ff7a3c, #ffce81);
  border-radius: 4px;
  box-shadow: 0 0 18px rgba(255, 122, 60, 0.55);
  z-index: 2;
  animation: fwTapBob 1.6s ease-in-out infinite;
}
@keyframes fwTapBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.fws-tap-phone {
  position: absolute;
  bottom: 0;
  width: 64px; height: 76px;
  background: linear-gradient(180deg, #1c1a20, #14131a);
  border: 1.5px solid rgba(28, 20, 12, 0.12);
  border-radius: 8px;
}
.fws-tap-rings {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.fws-tap-rings span {
  position: absolute;
  width: 50px; height: 50px;
  border: 2px solid rgba(255, 206, 129, 0.7);
  border-radius: 50%;
  animation: fwTapRing 1.4s ease-out infinite;
}
.fws-tap-rings span:nth-child(2) { animation-delay: 0.47s; }
.fws-tap-rings span:nth-child(3) { animation-delay: 0.93s; }
@keyframes fwTapRing {
  0%   { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* ── spin wheel ── conic-gradient wheel + fixed pointer on top, slowly spinning */
.fws-spin-wrap {
  position: relative;
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
}
.fws-spin-pointer {
  position: absolute;
  top: -6px;
  width: 0; height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 16px solid #ffce81;
  z-index: 3;
  filter: drop-shadow(0 0 6px rgba(255, 206, 129, 0.5));
}
.fws-spin-wheel {
  width: 130px; height: 130px;
  border-radius: 50%;
  background: conic-gradient(
    #ff7a3c 0 45deg,
    #ffce81 45deg 90deg,
    #ff7a3c 90deg 135deg,
    #ffce81 135deg 180deg,
    #ff7a3c 180deg 225deg,
    #ffce81 225deg 270deg,
    #ff7a3c 270deg 315deg,
    #ffce81 315deg 360deg);
  box-shadow: 0 0 22px rgba(255, 206, 129, 0.35);
  animation: fwSpinWheel 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.fws-spin-wheel::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px dashed rgba(28, 20, 12, 0.18);
  pointer-events: none;
}
.fws-spin-hub {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: #0e0e10;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.84rem;
  font-weight: 800;
  background: linear-gradient(135deg, #ff7a3c, #ffce81);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  background-color: #0e0e10;
  z-index: 2;
}
@keyframes fwSpinWheel {
  0%   { transform: rotate(0); }
  60%  { transform: rotate(1080deg); }
  100% { transform: rotate(1080deg); }
}

/* ── memory grid ── 3x2 with two matched cards + four backs */
.fws-mem-grid {
  display: grid;
  grid-template-columns: repeat(3, 44px);
  grid-template-rows: repeat(2, 60px);
  gap: 8px;
  margin: 4px 0;
}
.fws-mem-card {
  position: relative;
  border-radius: 4px;
  transition: transform 0.4s;
  transform-style: preserve-3d;
}
.fws-mem-back {
  background:
    linear-gradient(135deg, #ff7a3c, #ffce81);
  position: relative;
}
.fws-mem-back::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(28, 20, 12, 0.3);
  border-radius: 2px;
}
.fws-mem-matched {
  background: #0e0e10;
  border: 1.5px solid rgba(255, 206, 129, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 12px rgba(255, 206, 129, 0.3);
  animation: fwMemPop 0.4s ease-out;
}
.fws-mem-matched span {
  font-size: 1.2rem;
  background: linear-gradient(135deg, #ff7a3c, #ffce81);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
@keyframes fwMemPop {
  from { transform: scale(0.7); }
  to   { transform: scale(1); }
}

/* ── trivia ── question card + 3 options with the right one highlighted */
.fws-trivia-card {
  width: 100%;
  background: rgba(28, 20, 12, 0.03);
  border: 1px solid rgba(28, 20, 12, 0.08);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fws-trivia-q {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}
.fws-trivia-opts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fws-trivia-opt {
  padding: 7px 10px;
  background: rgba(28, 20, 12, 0.03);
  border: 1px solid rgba(28, 20, 12, 0.08);
  border-radius: 3px;
  font-size: 0.74rem;
  color: rgba(28, 20, 12, 0.78);
  text-align: left;
}
.fws-trivia-opt-right {
  background:
    linear-gradient(rgba(255, 206, 129, 0.12), rgba(255, 206, 129, 0.12)) padding-box,
    linear-gradient(135deg, #ff7a3c, #ffce81) border-box;
  border: 1.5px solid transparent;
  color: var(--text);
  font-weight: 600;
  animation: fwTrivPulse 1.8s ease-in-out infinite;
}
@keyframes fwTrivPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 206, 129, 0); }
  50%      { box-shadow: 0 0 12px rgba(255, 206, 129, 0.3); }
}

/* ── win screens ── large gradient %, label, fake code, redeem CTA */
.fws-win-body {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  padding: 8px 0;
}
.fws-win-burst {
  position: absolute;
  inset: -10%;
  background: radial-gradient(ellipse at 50% 40%, rgba(255, 206, 129, 0.22) 0%, transparent 70%);
  pointer-events: none;
}
.fws-win-lead {
  font-size: 0.78rem;
  color: rgba(28, 20, 12, 0.6);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fws-win-pct {
  font-size: 4.2rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #ff7a3c, #ffce81);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  line-height: 1;
  animation: fwWinPop 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 1;
}
.fws-win-lbl {
  font-size: 0.74rem;
  color: rgba(28, 20, 12, 0.7);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  z-index: 1;
}
.fws-win-code {
  margin-top: 8px;
  padding: 6px 14px;
  background: rgba(28, 20, 12, 0.04);
  border: 1px dashed rgba(255, 206, 129, 0.5);
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent-2);
  font-variant-numeric: tabular-nums;
  z-index: 1;
}
.fws-win-cta {
  margin-top: 6px;
  font-size: 0.72rem;
  color: rgba(28, 20, 12, 0.55);
  z-index: 1;
}
.fws-win-holo .fws-win-burst {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(120, 200, 255, 0.18) 0%, rgba(255, 206, 129, 0.22) 50%, transparent 80%);
  animation: fwHolo 4s ease-in-out infinite;
}
@keyframes fwHolo {
  0%, 100% { filter: hue-rotate(0); }
  50%      { filter: hue-rotate(-15deg); }
}
@keyframes fwWinPop {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* ── cart / checkout — line item + discount + success ── */
.fws-cart {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding-top: 4px;
}
.fws-cart-head {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(28, 20, 12, 0.5);
}
.fws-cart-item {
  display: flex;
  gap: 12px;
  padding: 10px;
  background: rgba(28, 20, 12, 0.03);
  border: 1px solid rgba(28, 20, 12, 0.08);
}
.fws-cart-thumb {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, rgba(255, 122, 60, 0.45), rgba(255, 206, 129, 0.45));
  border: 1px solid rgba(255, 206, 129, 0.35);
  flex-shrink: 0;
}
.fws-cart-row {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}
.fws-cart-line {
  height: 8px;
  background: rgba(28, 20, 12, 0.10);
  border-radius: 1px;
}
.fws-cart-line-short { width: 60%; }
.fws-cart-discount {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background:
    linear-gradient(rgba(255, 206, 129, 0.08), rgba(255, 206, 129, 0.08)) padding-box,
    linear-gradient(135deg, #ff7a3c, #ffce81) border-box;
  border: 1px solid transparent;
  font-size: 0.74rem;
  color: rgba(28, 20, 12, 0.85);
}
.fws-cart-discount-pct {
  font-weight: 700;
  color: var(--accent-2);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.7rem;
}
.fws-cart-cta {
  text-align: center;
  padding: 11px;
  background: linear-gradient(135deg, #ff7a3c, #ffce81);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  animation: fwCartPulse 1.8s ease-in-out infinite;
}
@keyframes fwCartPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 122, 60, 0); }
  50%      { box-shadow: 0 0 16px rgba(255, 122, 60, 0.4); }
}

/* ── tiktok upload ── vertical video frame with REC + figure */
.fws-tiktok-screen { justify-content: space-between; }
.fws-tiktok-frame {
  position: relative;
  width: 120px;
  height: 180px;
  background:
    linear-gradient(180deg, #1c1a20 0%, #0e0e10 100%);
  border: 1px solid rgba(28, 20, 12, 0.10);
  overflow: hidden;
}
.fws-tiktok-rec {
  position: absolute;
  top: 10px; left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  background: rgba(0, 0, 0, 0.65);
  color: #ff5252;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.fws-tiktok-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ff5252;
  animation: fwRecDot 1.4s ease-in-out infinite;
}
@keyframes fwRecDot {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
.fws-tiktok-figure {
  position: absolute;
  bottom: 30px; left: 50%;
  width: 50px; height: 80px;
  background: radial-gradient(ellipse at 50% 30%, rgba(255, 206, 129, 0.4) 0%, transparent 70%);
  transform: translateX(-50%);
  filter: blur(2px);
}
.fws-tiktok-tag {
  position: absolute;
  bottom: 10px; left: 10px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text);
  background: linear-gradient(135deg, #ff7a3c, #ffce81);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ── share ── messaging-style bubble + link */
.fws-share-stage {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 8px;
}
.fws-share-bubble {
  padding: 8px 12px;
  font-size: 0.76rem;
  border-radius: 12px;
  max-width: 80%;
  line-height: 1.35;
  animation: fwBubble 0.5s ease-out backwards;
}
.fws-share-bubble-out {
  background: linear-gradient(135deg, #ff7a3c, #ffce81);
  color: var(--text);
  align-self: flex-end;
  border-bottom-right-radius: 2px;
  animation-delay: 0.1s;
}
.fws-share-bubble-in {
  background: rgba(28, 20, 12, 0.06);
  color: var(--text);
  align-self: flex-start;
  border-bottom-left-radius: 2px;
  animation-delay: 0.4s;
}
@keyframes fwBubble {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fws-share-link {
  align-self: center;
  margin-top: 6px;
  padding: 6px 10px;
  background: rgba(255, 206, 129, 0.08);
  border: 1px dashed rgba(255, 206, 129, 0.4);
  font-size: 0.68rem;
  color: var(--accent-2);
  letter-spacing: 0.02em;
}

/* ── friend ── two mini phones side-by-side, second slides in */
.fws-friend-scene {
  flex-direction: column;
  gap: 14px;
  justify-content: center;
}
.fws-friend-scene { display: flex; }
.fws-friend-scene > .fws-friend-mini-phone,
.fws-friend-scene > .fws-friend-arrow {
  display: inline-block;
}
.fws-friend-mini-phone {
  width: 50px; height: 80px;
  background:
    linear-gradient(rgba(20, 20, 24, 1), rgba(20, 20, 24, 1)) padding-box,
    linear-gradient(135deg, #ff7a3c, #ffce81) border-box;
  border: 1.5px solid transparent;
  border-radius: 7px;
}
.fws-friend-orig { opacity: 0.5; }
.fws-friend-new {
  animation: fwFriendIn 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 0 14px rgba(255, 206, 129, 0.35);
}
.fws-friend-mini-screen {
  margin: 5px;
  height: calc(100% - 10px);
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 206, 129, 0.25) 0%, transparent 70%);
}
.fws-friend-scene {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: 1fr auto;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.fws-friend-scene > .fws-cap {
  grid-column: 1 / -1;
}
.fws-friend-arrow {
  font-size: 1.6rem;
  background: linear-gradient(135deg, #ff7a3c, #ffce81);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: fwArrowSlide 1.6s ease-in-out infinite;
}
@keyframes fwArrowSlide {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(6px); }
}
@keyframes fwFriendIn {
  from { transform: translateX(30px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* ── summary ── final card with branded header + 3 numbers */
.fws-summary {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 14px;
}
.fws-summary-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.22em;
}
.fws-summary-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 206, 129, 0.55), transparent);
}
.fws-summary-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.fws-summary-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 0.84rem;
  color: rgba(28, 20, 12, 0.85);
}
.fws-summary-num {
  font-size: 1.6rem;
  font-weight: 800;
  background: linear-gradient(135deg, #ff7a3c, #ffce81);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.fws-summary-foot {
  text-align: center;
  font-size: 0.66rem;
  color: rgba(28, 20, 12, 0.4);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 6px;
}

.fws-idle .fws-cap { color: rgba(28, 20, 12, 0.35); }

/* Narration card — sits below the dashboard in the same column. Gradient
   orange border + soft glow, flex-grows to fill remaining vertical space
   so the right column matches the phone's height. */
.flywheel-narration-card {
  flex: 1;
  padding: 22px 26px;
  background:
    linear-gradient(rgba(14, 14, 16, 1), rgba(14, 14, 16, 1)) padding-box,
    linear-gradient(135deg, #ff7a3c, #ffce81) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 0 28px rgba(255, 206, 129, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Simplex Sans', sans-serif;
  min-height: 110px;
}
.flywheel-narration-text {
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--text);
  font-weight: 500;
  transition: opacity 0.28s ease;
}

.flywheel-controls {
  max-width: 1240px;
  margin: 42px auto 0;     /* pushed down a touch for breathing room */
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 22px;
}
.flywheel-play {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  background: linear-gradient(135deg, #ff7a3c, #ffce81);
  color: var(--text);
  border: none;
  font-family: 'Simplex Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(255, 122, 60, 0.28);
  transition: filter 0.18s ease, transform 0.12s ease;
  flex-shrink: 0;
}
.flywheel-play:hover { filter: brightness(1.08); transform: translateY(-1px); }
.flywheel-play-icon { font-size: 0.78rem; line-height: 1; }

.flywheel-scrubber {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.flywheel-scrubber input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: rgba(28, 20, 12, 0.10);
  border-radius: 0;
  outline: none;
  cursor: pointer;
}
.flywheel-scrubber input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  background: linear-gradient(135deg, #ff7a3c, #ffce81);
  border: 2px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 14px rgba(255, 206, 129, 0.6);
}
.flywheel-scrubber input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  background: linear-gradient(135deg, #ff7a3c, #ffce81);
  border: 2px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 14px rgba(255, 206, 129, 0.6);
}
.flywheel-ticks {
  display: flex;
  justify-content: space-between;
  font-family: 'Simplex Sans', sans-serif;
  font-size: 0.72rem;
  color: rgba(28, 20, 12, 0.45);
  letter-spacing: 0.04em;
}

/* Day counter — slot-machine effect: new digits flow in from the top,
   push the previous out the bottom. Lives at the end of the controls row. */
.flywheel-day-counter {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 14px;
  background: rgba(28, 20, 12, 0.03);
  border: 1px solid rgba(255, 206, 129, 0.25);
  flex-shrink: 0;
}
.flywheel-day-counter-lbl {
  font-family: 'Simplex Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(28, 20, 12, 0.5);
}
.flywheel-day-counter-num {
  position: relative;
  width: 56px;
  height: 38px;
  overflow: hidden;
}
.flywheel-day-counter-num span {
  position: absolute;
  top: 0; left: 0; right: 0;
  font-family: 'Simplex Sans', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-align: center;
  line-height: 38px;
  background: linear-gradient(135deg, #ff7a3c, #ffce81);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.flywheel-day-counter-num span.fw-day-in {
  animation: fwDayIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.flywheel-day-counter-num span.fw-day-out {
  animation: fwDayOut 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes fwDayIn {
  from { transform: translateY(-100%); opacity: 0.4; }
  to   { transform: translateY(0);     opacity: 1; }
}
@keyframes fwDayOut {
  from { transform: translateY(0);     opacity: 1; }
  to   { transform: translateY(100%);  opacity: 0.4; }
}

.flywheel-foot {
  text-align: center;
  max-width: 540px;
  margin: 48px auto 0;
  padding: 0 24px;
  font-family: 'Simplex Sans', sans-serif;
  font-size: 0.96rem;
  color: rgba(28, 20, 12, 0.6);
  line-height: 1.55;
}
.flywheel-foot strong {
  background: linear-gradient(135deg, #ff7a3c, #ffce81);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font-weight: 800;
}

@media (max-width: 920px) {
  .flywheel-stage { grid-template-columns: 1fr; gap: 24px; }
  .flywheel-phone-wrap { max-width: 320px; margin: 0 auto; }
}
@media (max-width: 580px) {
  .flywheel-section { padding: 64px 0 76px; }
  .flywheel-head { margin-bottom: 38px; }
  .flywheel-pane { padding: 18px; min-height: 0; }
  .flywheel-kpis { grid-template-columns: 1fr 1fr; }
  .flywheel-kpi-num { font-size: 1.3rem; }
  .flywheel-controls { flex-wrap: wrap; gap: 16px; }
  .flywheel-play { flex: 1; justify-content: center; }
  .flywheel-day-counter { order: 3; flex: 1; }
  .flywheel-scrubber { order: 4; width: 100%; }
  .flywheel-phone { max-width: 260px; }
  .flywheel-pane-title { font-size: 1.2rem; }
}