/* =====================================================================
   SUPERHUMAN-STYLE HOMEPAGE REMODEL
   Pure dark void · scroll-reveal hero · floating product · marquee ·
   big-statement features · giant-quote testimonials · closer.
   Namespaced .sh-* so it can't collide with the persona pages.
   Loaded after styles.css; depends on its :root tokens.
   ===================================================================== */

:root {
  --void: #FFFFFF;        /* page background — light, matches the app */
  --void-2: #F6F4FD;      /* soft lavender tint (violet 50) for alternating sections */
  --grad-bright: linear-gradient(104deg, #A878FF 0%, #FF6FDA 100%);  /* gradient text that pops on dark */
}

/* The whole v2 site is light, matching the app. */
body { background: var(--void); color: var(--text); }

/* Dark overrides for the legal + about pages so they match the dark site ----- */
.legal { background: var(--void); }
.legal h1.display, .legal__body h2 { color: var(--text-on-dark); }
.legal__body p, .legal__body li { color: var(--text-on-dark-2); }
.legal__body p strong, .legal__body li strong { color: var(--text-on-dark); }
.legal__meta { color: var(--text-on-dark-3); }
.legal__body a { color: var(--violet-2); }
.legal__body a:hover { color: var(--magenta-ink); }
.legal__draft { background: rgba(102,0,255,0.08); border-color: rgba(102,0,255,0.22); color: var(--text-on-dark-2); }

.founder { background: var(--void); }
.founder__copy h2.display { color: var(--text-on-dark); }
.founder__body p { color: var(--text-on-dark-2); }
.founder__body p strong { color: var(--text-on-dark); }
.founder__sig { color: var(--text-on-dark-3); }
.founder__links a { color: var(--violet-2); }
.founder__photo-frame { background: linear-gradient(160deg, rgba(102,0,255,0.18), rgba(255,0,204,0.10)); border: 1px solid var(--ink-line-2); }
.founder__photo-placeholder { color: var(--text-on-dark-2); }

.about-contact { background: var(--void-2); border-top: 1px solid var(--ink-line); }
.about-contact h2.display { color: var(--text-on-dark); }
.about-contact__card { background: #FFFFFF; border: 1px solid var(--ink-line); }
.about-contact__card h3 { color: var(--text-on-dark-3); }
.about-contact__card a { color: var(--violet-2); }
.about-contact__card a:hover { color: var(--magenta-ink); }

/* Shared atmospheric pieces -------------------------------------------------- */
.sh-orb {
  position: absolute;
  width: 1100px; height: 1100px;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(60px);
  opacity: .5;
}
.sh-orb--violet {
  background: radial-gradient(circle at 50% 50%, rgba(102,0,255,0.20) 0%, rgba(102,0,255,0.05) 40%, transparent 70%);
  top: -28%; left: -22%;
  animation: sh-float-a 24s ease-in-out infinite;
}
.sh-orb--magenta {
  background: radial-gradient(circle at 50% 50%, rgba(255,0,204,0.16) 0%, rgba(255,0,204,0.04) 40%, transparent 70%);
  top: -10%; right: -26%;
  animation: sh-float-b 28s ease-in-out infinite;
}
.sh-orb.sm { width: 720px; height: 720px; filter: blur(28px); }
@keyframes sh-float-a { 0%,100% { transform: translate(0,0); } 50% { transform: translate(50px,70px); } }
@keyframes sh-float-b { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-70px,50px); } }

.sh-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(26,14,35,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,14,35,0.045) 1px, transparent 1px);
  background-size: 92px 92px;
  mask-image: radial-gradient(ellipse 75% 55% at 50% 28%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 75% 55% at 50% 28%, #000 0%, transparent 78%);
  opacity: .5;
}

/* HERO ---------------------------------------------------------------------- */
.sh-hero {
  position: relative;
  background: var(--void);
  color: var(--text-on-dark);
  isolation: isolate;
  overflow: hidden;
  /* Generous top breathing room — headline sits ~22% down like Superhuman.
     Bottom padding is 0: the product peeks up against the hero's edge. */
  padding: clamp(150px, 22vh, 260px) 0 0;
  text-align: center;
}
.sh-hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
/* Flame watermark — faint brand glyph behind the hero, matching the app onboarding */
.sh-hero__bg::after {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  width: clamp(420px, 46vw, 660px);
  aspect-ratio: 380 / 390;
  transform: translate(-50%, -50%);
  background: url('./assets/logo/flame-watermark.svg') no-repeat center / contain;
  opacity: 0.05;
  pointer-events: none;
}
/* Sparkle accents — 4-point violet/magenta twinkles, scattered toward the edges */
.sh-hero__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12 6 18 12 24 12C18 12 12 18 12 24C12 18 6 12 0 12C6 12 12 6 12 0Z' fill='%236600FF'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12 6 18 12 24 12C18 12 12 18 12 24C12 18 6 12 0 12C6 12 12 6 12 0Z' fill='%23FF00CC'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12 6 18 12 24 12C18 12 12 18 12 24C12 18 6 12 0 12C6 12 12 6 12 0Z' fill='%236600FF'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12 6 18 12 24 12C18 12 12 18 12 24C12 18 6 12 0 12C6 12 12 6 12 0Z' fill='%23FF00CC'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 7% 22%, 90% 20%, 87% 64%, 11% 74%;
  background-size: 20px, 13px, 16px, 11px;
  opacity: 0.5;
  animation: sh-twinkle 5.5s ease-in-out infinite;
}
@keyframes sh-twinkle { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.28; } }
@media (prefers-reduced-motion: reduce) { .sh-hero__bg::before { animation: none; } }
.sh-hero__inner {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--pad);
  z-index: 1;
}
.sh-hero__eyebrow {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--magenta-ink);
  margin-bottom: clamp(20px, 2.4vw, 30px);
}
.sh-hero__title {
  font-family: var(--display);
  font-weight: 600;                /* elegant, not heavy (Superhuman uses 400) */
  font-size: clamp(2.625rem, 5vw + 0.5rem, 5rem);  /* 42 → 80px, matches Superhuman */
  line-height: 1.1;                /* let it breathe — was 1.02, far too tight */
  letter-spacing: -0.018em;        /* relaxed — was -0.035em, crushed */
  margin-bottom: clamp(28px, 3vw, 40px);
}
.sh-hero__title .sh-line { display: block; }
.sh-hero__sub {
  font-size: clamp(1.0625rem, 0.6vw + 1rem, 1.375rem);
  line-height: 1.55;
  color: var(--text-on-dark-2);
  max-width: 54ch;
  margin: 0 auto clamp(36px, 4vw, 52px);
}
.sh-hero__ctas {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
  margin-bottom: clamp(24px, 2.5vw, 32px);
}
.sh-hero__meta {
  font-size: 14px;
  color: var(--text-on-dark-2);
}
.sh-hero__meta [data-spark-count] { color: var(--text-on-dark); font-weight: 600; }

/* Floating product ----------------------------------------------------------
   Peeks up from the hero's bottom edge: the top ~78% shows, the rest is
   clipped by the hero's overflow:hidden, inviting the scroll. */
.sh-hero__product {
  position: relative;
  width: 100%;
  max-width: 330px;
  margin: clamp(48px, 6vw, 84px) auto -6%;  /* more of the phone shows before the clip */
  z-index: 1;
}
.sh-product__glow {
  position: absolute;
  inset: -18% -30% -10%;
  z-index: -1;
  background:
    radial-gradient(circle at 40% 38%, rgba(102,0,255,0.32) 0%, transparent 60%),
    radial-gradient(circle at 66% 62%, rgba(255,0,204,0.22) 0%, transparent 62%);
  filter: blur(56px);
  opacity: .5;
}
.sh-product__shot {
  position: relative;
  width: 100%;
  height: auto;
  border-radius: 38px;
  box-shadow:
    0 40px 90px -30px rgba(102,0,255,0.28),
    0 18px 40px -20px rgba(26,14,35,0.18),
    0 0 0 1px var(--ink-line);
}

/* Device mockup (SVG already has the phone frame): drop the bare-screenshot
   rounding/ring/box-shadow and shadow the actual phone silhouette instead. */
.sh-product__shot--device {
  border-radius: 0;
  box-shadow: none;
  filter:
    drop-shadow(0 38px 64px rgba(102,0,255,0.26))
    drop-shadow(0 14px 30px rgba(26,14,35,0.20));
}

/* Hero showcase: the product flanked by the stages Spark runs */
.sh-hero__showcase {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(16px, 3vw, 52px);
  max-width: 1120px;
  margin: clamp(24px, 3.5vw, 48px) auto 0;
  position: relative; z-index: 1;
}
.sh-hero__showcase .sh-hero__product { margin: 0 auto; max-width: 300px; }
.sh-hero__stages { display: flex; flex-direction: column; gap: clamp(22px, 3.4vw, 38px); }
.sh-hero__stages--left { text-align: right; }
.sh-hero__stages--right { text-align: left; }
.sh-stage b { display: block; font-size: clamp(14px, 0.4vw + 0.8rem, 16px); font-weight: 600; color: var(--text-on-dark); letter-spacing: -0.01em; margin-bottom: 3px; }
.sh-stage small { font-size: 12.5px; color: var(--text-on-dark-3); line-height: 1.35; }
@media (max-width: 900px) {
  .sh-hero__showcase { grid-template-columns: 1fr; gap: 16px; max-width: 340px; }
  .sh-hero__showcase .sh-hero__product { order: -1; }
  /* Phone only at this width and below. Below 900px the stages would stack into a
     long single column that just restates the value bento, so on mobile/tablet we
     drop them and let the phone plus the bento carry it. Desktop keeps all eight. */
  .sh-showcase .sh-hero__stages { display: none; }
}

/* MARQUEE ------------------------------------------------------------------- */
.sh-marquee {
  background: linear-gradient(180deg, rgba(102,0,255,0.05), transparent 60%), var(--void);
  padding: clamp(40px, 4.5vw, 60px) 0;
  border-top: 1px solid var(--ink-line-2);
  border-bottom: 1px solid var(--ink-line-2);
  overflow: hidden;
}
.sh-marquee__label {
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-on-dark-3);
  margin-bottom: 36px;
}
.sh-marquee__track {
  position: relative;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.sh-marquee__row {
  display: inline-flex;
  align-items: center;
  gap: clamp(40px, 6vw, 88px);
  white-space: nowrap;
  animation: sh-scroll 190s linear infinite;
  will-change: transform;
}
.sh-marquee__row span {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 38px);
  letter-spacing: -0.02em;
  color: rgba(26,14,35,0.62);
  transition: color .3s ease;
}
.sh-marquee:hover .sh-marquee__row { animation-play-state: paused; }
@keyframes sh-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* BIG STATEMENT ------------------------------------------------------------- */
.sh-statement {
  position: relative;
  background: var(--void);
  text-align: center;
  padding: clamp(76px, 11vw, 150px) 0;
}
/* On home it's the first panel section — rounded top (the rise reveal) + halved top padding.
   It leads straight into the product showcase, so keep the gap between them tight. */
.sh-rise > .sh-statement {
  padding-top: clamp(36px, 5vw, 72px);
  padding-bottom: clamp(20px, 3vw, 40px);
  border-radius: clamp(22px, 3vw, 44px) clamp(22px, 3vw, 44px) 0 0;
  box-shadow: 0 -28px 80px -42px rgba(0,0,0,0.32);
}
/* Product showcase sits right under the statement — pull it up close so the phone
   reads as the answer to the headline, not a separate section. Tight on both ends.
   overflow:hidden clips the phone glow that bled past the viewport on phones
   (clipping locally — a global html/body clip breaks scrollIntoView). */
.sh-showcase { padding-top: clamp(8px, 1.5vw, 24px); padding-bottom: clamp(24px, 3vw, 48px); overflow: hidden; }
.sh-showcase .sh-hero__showcase { margin-top: 0; }
.sh-features { padding-top: clamp(32px, 4vw, 56px); }
.sh-statement::before {
  content: "";
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: min(840px, 92%); height: 460px;
  background: radial-gradient(58% 60% at 50% 42%, rgba(102,0,255,0.11), rgba(255,0,204,0.06) 50%, transparent 75%);
  z-index: 0; pointer-events: none;
}
.sh-statement > .container { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .sh-statement__title .grad-text { animation: sh-spark 3.6s ease-in-out infinite; }
}
@keyframes sh-spark { 0%, 100% { opacity: 1; } 55% { opacity: 0.78; } }
.sh-statement__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 4.2vw + 0.5rem, 4rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--text-on-dark);
  max-width: 20ch;
  margin: 0 auto 28px;
  text-wrap: balance;
}
/* Balanced wrapping on all big headings — kills orphan words at any width. */
.sh-hero__title, .sh-section-title, .sh-closer__title, .sh-quote blockquote,
.sh-feature__copy h3, .sh-statement__body { text-wrap: balance; }
.sh-statement__body--warm { margin-top: clamp(20px, 2.6vw, 34px); }
.sh-statement__body {
  font-size: clamp(1.0625rem, 0.5vw + 1rem, 1.3125rem);
  line-height: 1.6;
  color: var(--text-on-dark-2);
  max-width: 60ch;
  margin: 0 auto;
}
.sh-statement--tight { padding: clamp(72px,9vw,120px) 0; background: var(--void-2); border-top: 1px solid var(--ink-line); }

/* Short hero for pages without a floating product (about, etc.) */
.sh-hero--short { padding-bottom: clamp(80px, 10vw, 130px); }
/* The chaos — fragmented tools, scattered and tilted */
.sh-chaos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  max-width: 880px;
  margin: clamp(56px, 7vw, 88px) auto 0;
}
.chaos-card {
  width: 200px;
  background: #FFFFFF;
  border: 1px solid var(--ink-line);
  border-radius: 14px;
  padding: 14px 16px;
  text-align: left;
  box-shadow: 0 18px 40px -20px rgba(26,14,35,0.22);
  transition: transform .35s var(--ease);
}
.chaos-card__app { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--text-on-dark-3); margin-bottom: 8px; }
.chaos-card__body { font-size: 13.5px; line-height: 1.45; color: var(--text-on-dark-2); }
.chaos-overdue { color: #e0316a; font-weight: 600; }
.chaos-card--dm { transform: rotate(-4deg); }
.chaos-card--note { transform: rotate(3deg) translateY(-12px); background: #FFFCEC; }
.chaos-card--pdf { transform: rotate(-2deg) translateY(8px); }
.chaos-card--invoice { transform: rotate(4deg); border-color: rgba(224,49,106,0.28); }
.sh-chaos:hover .chaos-card { transform: rotate(0) translateY(0); }
@media (max-width: 720px) {
  .sh-chaos { gap: 12px; }
  .chaos-card { width: calc(50% - 6px); transform: none !important; }
}

/* BEFORE / AFTER COMPARISON ------------------------------------------------- */
.sh-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(24px, 5vw, 72px);
  margin: clamp(40px, 5vw, 64px) auto 0;
}
.sh-compare__label {
  text-align: center;
  font-size: 15px; font-weight: 600;
  color: var(--text-on-dark);
  margin: 0 0 7px;
}
.sh-compare__side--after .sh-compare__label { color: var(--magenta-ink); }
.sh-compare__sub {
  text-align: center; max-width: 34ch;
  margin: 0 auto clamp(18px, 2.4vw, 26px);
  font-size: 13.5px; line-height: 1.45;
  color: var(--text-on-dark-3);
}
.sh-compare__side--after .sh-compare__sub { color: var(--text-on-dark-2); }
.sh-compare__side .sh-chaos { max-width: 460px; margin: 0 auto; }
.sh-compare__arrow {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  max-width: 124px;
}
.sh-compare__bridge {
  font-size: 12px; font-weight: 600; line-height: 1.3;
  color: var(--magenta-ink); text-align: center;
}
.sh-compare__arrow-mark { font-size: 26px; line-height: 1; color: var(--text-on-dark-3); }
.sh-compare__phone { max-width: 248px; margin: 0 auto; }

/* The overwhelm: a long, anxious list of everything a deal asks of you */
.sh-overwhelm {
  text-align: left;
  background: #FFFFFF;
  border: 1px solid var(--ink-line);
  border-radius: 18px;
  padding: clamp(22px, 2.6vw, 30px);
  box-shadow: 0 18px 50px -30px rgba(26,14,35,0.22);
  max-width: 440px; margin: 0 auto;
}
.sh-overwhelm__lead { font-weight: 600; color: var(--text-on-dark); font-size: 15px; margin: 0 0 16px; }
.sh-overwhelm__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.sh-overwhelm__list li {
  position: relative; padding-left: 27px;
  font-size: 14.5px; line-height: 1.35; color: var(--text-on-dark-2);
}
.sh-overwhelm__list li::before {
  content: "?";
  position: absolute; left: 0; top: 0;
  width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700; line-height: 1;
  color: #BE0099; background: rgba(255,0,204,0.10);
}
.sh-overwhelm__foot { margin: 16px 0 0; font-size: 13px; font-style: italic; color: var(--text-on-dark-3); }
/* The spiral bottoms out: the final, worst question lands hardest */
.sh-overwhelm__list li:last-child { color: var(--text-on-dark); font-weight: 600; }
.sh-overwhelm__list li:last-child::before { color: #fff; background: #BE0099; }

/* Payment release: the long wait vs Spark */
.ui-panel--release {
  background: rgba(102,0,255,0.05);
  text-align: center;
  padding: clamp(16px, 2vw, 22px);
  display: flex; flex-direction: column;
}
.ui-release__before, .ui-release__after {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: clamp(18px, 2.2vw, 24px); border-radius: 16px;
}
.ui-release__before { background: rgba(26,14,35,0.035); }
.ui-release__after { background: #fff; box-shadow: 0 16px 44px -26px rgba(102,0,255,0.55); }
.ui-release__cap { font-size: 13px; color: var(--text-on-dark-3); line-height: 1.3; }
.ui-release__after .ui-release__cap { color: var(--text-on-dark-2); }
.ui-release__num {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(26px, 3.2vw, 38px); letter-spacing: -0.02em;
  color: var(--text-on-dark); line-height: 1.05; margin: 4px 0;
}
.ui-release__num--grad {
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.ui-release__star { color: var(--text-on-dark-3); font-size: 0.7em; }
.ui-release__bridge { display: flex; justify-content: center; margin: -12px 0; position: relative; z-index: 2; }
.ui-release__chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600;
  padding: 7px 15px; border-radius: 999px;
  background: #fff; color: var(--text-on-dark);
  border: 1px solid var(--ink-line);
  box-shadow: 0 8px 20px -10px rgba(26,14,35,0.28);
}
.ui-release__chip b { color: var(--magenta-ink); }
.ui-release__chip svg { width: 14px; height: 14px; color: var(--magenta-ink); }

/* Pricing recommendation: brand offer vs what Spark says you could charge */
.ui-panel--rec { text-align: left; }
.ui-rec__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.ui-rec__col { display: flex; flex-direction: column; gap: 3px; }
.ui-rec__col--right { align-items: flex-end; text-align: right; }
.ui-rec__lbl { font-size: 12px; color: var(--text-on-dark-3); }
.ui-rec__offer { font-family: var(--display); font-weight: 700; font-size: 23px; color: var(--text-on-dark); letter-spacing: -0.01em; line-height: 1.1; }
.ui-rec__cur { font-size: 0.55em; font-weight: 600; color: var(--text-on-dark-3); }
.ui-rec__up { font-weight: 700; font-size: 15px; color: #12a36b; line-height: 1.1; }
.ui-rec__card { background: rgba(26,14,35,0.035); border-radius: 16px; padding: 16px 16px 18px; text-align: center; }
.ui-rec__cardlbl { font-size: 12.5px; color: var(--text-on-dark-2); }
.ui-rec__big { display: block; font-family: var(--display); font-weight: 700; font-size: 29px; color: var(--text-on-dark); margin: 3px 0 16px; letter-spacing: -0.02em; }
.ui-rec__sliderlbls, .ui-rec__ends { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-on-dark-3); }
.ui-rec__track { position: relative; height: 6px; border-radius: 999px; background: var(--grad); margin: 7px 0; }
.ui-rec__dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 1px solid var(--ink-line); box-shadow: 0 2px 8px rgba(26,14,35,0.28); }
.ui-rec__note { font-size: 11.5px; line-height: 1.4; color: var(--text-on-dark-3); margin: 13px 0 0; }
.ui-rec__actions { display: flex; gap: 10px; margin-top: 14px; }
.ui-rec__btn { flex: 1; text-align: center; font-size: 13px; font-weight: 600; padding: 11px; border-radius: 999px; background: rgba(26,14,35,0.05); color: var(--text-on-dark-2); }
.ui-rec__btn--yes { background: var(--grad); color: #fff; }

/* Plain-English terms: both sides see exactly the same thing */
.ui-panel--terms { text-align: left; background: rgba(102,0,255,0.05); }
.ui-panel--terms .ui-panel__title { display: block; margin: 0 0 12px; color: var(--text-on-dark-3); font-size: 13px; }
.ui-term2 { display: flex; align-items: flex-start; gap: 11px; padding: 12px 13px; border-radius: 13px; background: #fff; border: 1px solid var(--ink-line); margin-bottom: 8px; }
.ui-term2:last-of-type { margin-bottom: 0; }
.ui-term2__ic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: rgba(102,0,255,0.08); color: var(--violet); }
.ui-term2__ic svg { width: 16px; height: 16px; }
.ui-term2__body { flex: 1; min-width: 0; }
.ui-term2__body b { display: block; font-size: 13.5px; font-weight: 600; color: var(--text-on-dark); margin-bottom: 2px; }
.ui-term2__body small { font-size: 12px; line-height: 1.4; color: var(--text-on-dark-2); }
.ui-term2__edit { flex: 0 0 auto; color: var(--violet); opacity: 0.55; }
.ui-term2__edit svg { width: 14px; height: 14px; }
.ui-terms__foot { text-align: center; font-size: 11.5px; color: var(--text-on-dark-3); margin: 13px 0 0; }

/* End-to-end pipeline: every stage Spark runs for the creator */
.ui-panel--pipeline { text-align: left; }
.ui-panel--pipeline .ui-panel__title { display: block; margin: 0 0 16px; color: var(--text-on-dark-3); font-size: 13px; }
.ui-pipe { list-style: none; margin: 0; padding: 0; }
.ui-pipe__step { display: flex; gap: 13px; align-items: stretch; }
.ui-pipe__rail { flex: 0 0 13px; display: flex; flex-direction: column; align-items: center; }
.ui-pipe__dot { width: 13px; height: 13px; border-radius: 50%; background: var(--grad); flex: 0 0 auto; margin-top: 2px; }
.ui-pipe__line { width: 2px; flex: 1 1 auto; min-height: 12px; background: rgba(102,0,255,0.18); margin: 3px 0; }
.ui-pipe__body { padding-bottom: 15px; }
.ui-pipe__step--last .ui-pipe__body { padding-bottom: 0; }
.ui-pipe__body b { display: block; font-size: 13.5px; font-weight: 600; color: var(--text-on-dark); line-height: 1.2; }
.ui-pipe__body small { font-size: 12px; color: var(--text-on-dark-3); }
.ui-pipe__foot { margin: 15px 0 0; font-size: 12px; font-weight: 600; color: var(--magenta-ink); }

/* Approval states — Spark does the work, presents each step for the creator's tap */
.ui-pipe__body { flex: 1 1 auto; min-width: 0; }
.ui-pipe__tag {
  flex: 0 0 auto; align-self: flex-start; margin: 1px 0 0 8px;
  font-size: 11px; font-weight: 600; padding: 2px 9px;
  border-radius: 999px; white-space: nowrap;
}
.ui-pipe__tag--ok { color: #1a8f5b; background: rgba(31,174,111,0.13); }
.ui-pipe__tag--ok::before { content: '✓ '; }
.ui-pipe__step--active .ui-pipe__dot { box-shadow: 0 0 0 4px rgba(102,0,255,0.15); }
.ui-pipe__actions { display: flex; gap: 7px; margin-top: 9px; }
.ui-pipe__btn {
  font-size: 11.5px; font-weight: 600; padding: 5px 13px;
  border-radius: 999px; border: 1px solid var(--ink-line);
  background: #fff; color: var(--text-on-dark-2);
}
.ui-pipe__btn--ok { color: #fff; background: var(--grad); border: none; }
.ui-pipe__step--next .ui-pipe__dot { background: rgba(102,0,255,0.22); }
.ui-pipe__step--next .ui-pipe__body b { color: var(--text-on-dark-3); }
.ui-pipe__step--next .ui-pipe__body small { color: var(--text-on-dark-3); opacity: 0.7; }

.sh-notif {
  background: #FFFFFF;
  border: 1px solid var(--ink-line);
  border-radius: 22px;
  padding: 16px 18px 18px;
  box-shadow: 0 26px 60px -28px rgba(102,0,255,0.32), 0 10px 30px -18px rgba(26,14,35,0.18);
  text-align: left;
  max-width: 332px;
  margin: 0 auto;
}
.sh-notif__bar { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; }
.sh-notif__icon { width: 28px; height: 28px; border-radius: 8px; background: var(--grad); display: grid; place-items: center; flex: 0 0 auto; }
.sh-notif__icon svg { width: 17px; height: 17px; }
.sh-notif__app { font-weight: 700; font-size: 13px; color: var(--text-on-dark); letter-spacing: -0.01em; }
.sh-notif__time { margin-left: auto; font-size: 12px; color: var(--text-on-dark-3); }
.sh-notif__title { font-family: var(--display); font-weight: 600; font-size: 16.5px; color: var(--text-on-dark); margin-bottom: 5px; letter-spacing: -0.01em; }
.sh-notif__body { font-size: 13.5px; line-height: 1.45; color: var(--text-on-dark-2); margin-bottom: 15px; }
.sh-notif__actions { display: flex; gap: 10px; }
.sh-notif__btn { font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 999px; background: rgba(26,14,35,0.06); color: var(--text-on-dark-2); }
.sh-notif__btn--yes { background: var(--grad); color: #fff; }

@media (max-width: 860px) {
  .sh-compare { grid-template-columns: 1fr; gap: 10px; }
  .sh-compare__arrow { flex-direction: row; max-width: none; gap: 12px; margin: 8px auto; }
  .sh-compare__arrow-mark { transform: rotate(90deg); }
}

/* FEATURE MOMENTS (split layout) -------------------------------------------- */
.sh-features { background: var(--void); padding: clamp(28px,3.5vw,48px) 0 clamp(48px, 6vw, 80px); }
.sh-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
  padding: clamp(56px, 7vw, 104px) 0;
  border-top: 1px solid var(--ink-line);
}
.sh-feature--reverse .sh-feature__copy { order: 2; }
.sh-feature--reverse .sh-feature__visual { order: 1; }
.sh-feature__num {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--magenta-ink);
  margin-bottom: 18px;
}
.sh-feature__copy { max-width: 30ch; }
.sh-feature__copy h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.875rem, 3vw + 0.5rem, 3rem);
  line-height: 1.06;
  letter-spacing: -0.026em;
  color: var(--text-on-dark);
  margin-bottom: 20px;
}
.sh-feature__copy p {
  font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.1875rem);
  line-height: 1.6;
  color: var(--text-on-dark-2);
  max-width: 42ch;
}

/* Product panels (illustrative; swap for real iOS screenshots) --------------- */
.sh-feature__visual { position: relative; }
.sh-feature__visual::before {
  content: "";
  position: absolute;
  inset: -10% -6%;
  z-index: 0;
  background: radial-gradient(circle at 50% 45%, rgba(102,0,255,0.14) 0%, transparent 64%);
  filter: blur(48px);
}
.ui-panel {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  border: 1px solid var(--ink-line);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 24px 60px -24px rgba(26,14,35,0.28), 0 2px 8px -2px rgba(26,14,35,0.08);
  max-width: 440px;
  margin-inline: auto;
  font-family: var(--sans);
}
.ui-panel__head { display: flex; align-items: center; gap: 7px; margin-bottom: 18px; }
.ui-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(26,14,35,0.16); }
.ui-panel__title { font-size: 13px; color: var(--text-on-dark-3); margin-left: 8px; font-weight: 500; letter-spacing: 0.01em; }
.ui-panel--inbox .ui-panel__title { margin-left: auto; }

/* Inbox rows */
.ui-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; margin-bottom: 8px; background: rgba(26,14,35,0.035); }
.ui-row--match { border: 1px solid rgba(102,0,255,0.32); background: rgba(102,0,255,0.08); }
.ui-row--filtered { opacity: 0.4; }
.ui-logo { width: 34px; height: 34px; border-radius: 9px; background: #1A0E23; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: #fff; flex-shrink: 0; }
.ui-row__body { flex: 1; min-width: 0; }
.ui-row__body b { display: block; font-size: 14px; color: var(--text-on-dark); font-weight: 600; }
.ui-row__body small { font-size: 12px; color: var(--text-on-dark-3); }
.ui-tag { font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: rgba(26,14,35,0.06); color: var(--text-on-dark-3); white-space: nowrap; }
.ui-tag--good { background: rgba(102,0,255,0.2); color: #6600FF; }

/* Pricing bars */
.ui-panel--price .ui-panel__title { display: block; margin: 0 0 18px; color: var(--text-on-dark-2); font-size: 13px; }
.ui-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ui-bar__lbl { width: 92px; font-size: 12px; color: var(--text-on-dark-3); flex-shrink: 0; }
.ui-bar__track { flex: 1; height: 10px; background: rgba(26,14,35,0.08); border-radius: 999px; overflow: hidden; }
.ui-bar__fill { height: 100%; background: rgba(26,14,35,0.22); border-radius: 999px; }
.ui-bar__fill--grad { background: var(--grad); }
.ui-bar__val { width: 60px; text-align: right; font-size: 13px; font-weight: 600; color: var(--text-on-dark); flex-shrink: 0; }
.ui-bar--rec .ui-bar__lbl { color: var(--magenta-ink); font-weight: 600; }
.ui-price-note { font-size: 11.5px; color: var(--text-on-dark-3); margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ink-line); }

/* Contract terms */
.ui-panel--contract .ui-panel__title { display: block; margin: 0 0 16px; color: var(--text-on-dark-2); font-size: 13px; }
.ui-term { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.ui-check { width: 20px; height: 20px; border-radius: 50%; background: var(--grad); flex-shrink: 0; position: relative; }
.ui-check::after { content: ""; position: absolute; left: 6px; top: 5px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ui-check--lg { width: 24px; height: 24px; }
.ui-check--lg::after { left: 8px; top: 6px; }
.ui-term b { display: block; font-size: 14px; color: var(--text-on-dark); font-weight: 600; }
.ui-term small { font-size: 12px; color: var(--text-on-dark-3); }
.ui-signed { display: flex; gap: 8px; margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--ink-line); }
.ui-signed__pill { font-size: 11.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: rgba(102,0,255,0.16); color: #6600FF; }

/* Payment */
.ui-panel--pay { text-align: left; }
.ui-pay__amount { font-family: var(--display); font-weight: 700; font-size: 38px; letter-spacing: -0.02em; color: var(--text-on-dark); margin-bottom: 6px; }
.ui-pay__status { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: #6600FF; margin-bottom: 20px; }
.ui-pay__track { display: flex; flex-direction: column; gap: 2px; }
.ui-pay__step { position: relative; padding: 10px 0 10px 26px; font-size: 13.5px; color: var(--text-on-dark-3); }
.ui-pay__step::before { content: ""; position: absolute; left: 5px; top: 14px; width: 10px; height: 10px; border-radius: 50%; background: rgba(26,14,35,0.20); }
.ui-pay__step::after { content: ""; position: absolute; left: 9px; top: 24px; bottom: -2px; width: 2px; background: rgba(26,14,35,0.12); }
.ui-pay__step:last-child::after { display: none; }
.ui-pay__step--done { color: var(--text-on-dark-2); }
.ui-pay__step--done::before { background: var(--violet); }
.ui-pay__step--next { color: var(--text-on-dark); font-weight: 600; }
.ui-pay__step--next::before { background: var(--grad); box-shadow: 0 0 0 4px rgba(102,0,255,0.2); }

/* PERSONA PICKER (dark) ----------------------------------------------------- */
.sh-personas {
  position: relative;
  background: var(--void);
  isolation: isolate;
  overflow: hidden;
  padding: clamp(48px, 6vw, 76px) 0;
  border-top: 1px solid var(--ink-line);
}
/* Router band, not a hero: centered headline + one value line, straight into the two cards */
.sh-personas .sh-section-title { text-align: center; margin-left: auto; margin-right: auto; margin-bottom: 14px; }
.sh-personas .sh-section-sub { text-align: center; max-width: 52ch; margin: 0 auto clamp(26px, 3vw, 40px); }

/* Per-persona outcomes: the "why you care" list inside each card */
.persona-preview__points { list-style: none; margin: 14px 0 18px; padding: 0; display: grid; gap: 9px; }
.persona-preview__points li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; line-height: 1.4; color: var(--text-2); }
.persona-preview__points svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 2px; color: var(--violet); }

/* Equal-height cards, CTAs on one line across the pair */
.persona-preview__inner { display: flex; flex-direction: column; height: 100%; }
.persona-preview__inner .persona-preview__cta { margin-top: auto; align-self: flex-start; }
.sh-personas__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.sh-personas__bg .sh-orb--violet { top: -40%; left: 30%; }
.sh-section-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 3.6vw + 0.5rem, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--text-on-dark);
  max-width: 20ch;
  margin-bottom: 16px;
}
.sh-section-sub {
  font-size: var(--type-lede);
  line-height: 1.55;
  color: var(--text-on-dark-2);
  max-width: 52ch;
  margin-bottom: 56px;
}

/* GIANT QUOTES -------------------------------------------------------------- */
.sh-quotes { background: var(--void); padding: clamp(96px, 12vw, 160px) 0; }
.sh-section-eyebrow {
  font-size: 15px;
  font-weight: 500;
  color: var(--magenta-ink);
  margin-bottom: 28px;
}
.sh-quote { margin: 0 0 clamp(64px, 8vw, 110px); }
.sh-quote:last-child { margin-bottom: 0; }
.sh-quote blockquote {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.75rem, 3vw + 0.5rem, 3rem);
  line-height: 1.18;
  letter-spacing: -0.022em;
  color: var(--text-on-dark);
  max-width: 24ch;
  margin: 0 0 28px;
}
.sh-quote figcaption { display: flex; align-items: center; gap: 18px; }
.sh-quote__avatar {
  position: relative;
  width: 68px; height: 68px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--grad);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 8px 26px -8px rgba(102,0,255,0.5);
}
.sh-quote__avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sh-quote__avatar span { font-family: var(--display); font-weight: 700; font-size: 22px; color: #fff; }
.sh-quote__who { display: flex; flex-direction: column; gap: 2px; }
.sh-quote__name { font-weight: 600; font-size: 16px; color: var(--text-on-dark); }
.sh-quote__handle { font-size: 13.5px; color: var(--text-on-dark-3); text-decoration: none; }
.sh-quote__handle:hover { color: var(--magenta-ink); }

/* CLOSER -------------------------------------------------------------------- */
.sh-closer {
  position: relative;
  background: var(--void);
  isolation: isolate;
  overflow: hidden;
  padding: clamp(120px, 16vw, 200px) 0;
  text-align: center;
  border-top: 1px solid var(--ink-line);
}
/* Stark variant: no orbs, tighter bottom so it leads straight into the form */
.sh-closer--stark {
  padding: clamp(110px, 14vw, 180px) 0 clamp(60px, 8vw, 90px);
  background: var(--void);
}
.sh-closer__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.sh-closer__bg .sh-orb--violet { top: auto; bottom: -40%; left: 8%; }
.sh-closer__bg .sh-orb--magenta { top: auto; bottom: -30%; right: 6%; }
.sh-closer__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.5rem, 5vw + 0.5rem, 5rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--text-on-dark);
  margin-bottom: 24px;
}
.sh-closer__sub {
  font-size: 16px;
  color: var(--text-on-dark-2);
  margin-bottom: 40px;
}
.sh-closer__sub [data-spark-count] { color: var(--text-on-dark); font-weight: 600; }

/* REVEAL: product float ----------------------------------------------------- */
.js-reveal .reveal-product {
  opacity: 0;
  transform: translateY(48px) scale(.965);
  transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out);
}
.js-reveal .reveal-product.is-in { opacity: 1; transform: translateY(0) scale(1); }

/* Staggered hero line reveal */
.sh-hero__title .sh-line:nth-child(2) { transition-delay: .07s; }
.sh-hero__sub { transition-delay: .14s; }
.sh-hero__ctas { transition-delay: .2s; }
.sh-hero__meta { transition-delay: .26s; }

/* Draft panel (creator "drafts in your voice") ------------------------------ */
.ui-panel--draft .ui-panel__title { display:block; margin:0 0 14px; color: var(--text-on-dark-2); font-size: 13px; }
.ui-draft__bubble {
  background: rgba(102,0,255,0.12);
  border: 1px solid rgba(102,0,255,0.28);
  border-radius: 14px 14px 14px 4px;
  padding: 14px 16px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-on-dark);
  margin-bottom: 16px;
}
.ui-draft__bubble b { color: #fff; }
.ui-draft__actions { display: flex; gap: 10px; }
.ui-draft__btn { font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 999px; background: rgba(26,14,35,0.06); color: var(--text-on-dark-2); }
.ui-draft__btn--grad { background: var(--grad); color: #fff; }

/* Agent "delegated access" panel -------------------------------------------- */
.ui-panel--access .ui-panel__title { display:block; margin:0 0 16px; color: var(--text-on-dark-2); font-size: 13px; }
.ui-perm { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--ink-line); font-size: 14px; color: var(--text-on-dark); }
.ui-perm:last-of-type { border-bottom: 0; }
.ui-toggle { width: 38px; height: 22px; border-radius: 999px; background: rgba(26,14,35,0.16); position: relative; flex-shrink: 0; transition: background .2s ease; }
.ui-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s ease; }
.ui-toggle--on { background: var(--grad); }
.ui-toggle--on::after { transform: translateX(16px); }

/* Brand "verified offer in dashboard" panel --------------------------------- */
.ui-panel--offer .ui-panel__title { display:block; margin:0 0 14px; color: var(--text-on-dark-3); font-size: 12px; font-family: var(--mono); letter-spacing: 0.04em; }
.ui-offer { background: rgba(102,0,255,0.08); border: 1px solid rgba(102,0,255,0.3); border-radius: 14px; padding: 16px; }
.ui-offer__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ui-offer__head b { font-size: 15px; color: var(--text-on-dark); display: flex; align-items: center; gap: 8px; }
.ui-offer__head small { font-size: 12px; color: var(--text-on-dark-3); }
.ui-verified { font-size: 11px; font-weight: 600; color: #0f9d58; background: rgba(15,157,88,0.12); padding: 2px 8px; border-radius: 999px; }
.ui-offer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-bottom: 16px; }
.ui-offer__grid small { display:block; font-size: 11px; color: var(--text-on-dark-3); margin-bottom: 2px; }
.ui-offer__grid b { font-size: 14px; color: var(--text-on-dark); font-weight: 600; }
.ui-offer__cta { text-align: center; font-size: 13.5px; font-weight: 600; color: #fff; background: var(--grad); padding: 11px; border-radius: 10px; }

/* Dark lifecycle steps ------------------------------------------------------ */
.sh-lifecycle { background: var(--void-2); border-top: 1px solid var(--ink-line); padding: clamp(96px,12vw,160px) 0; }
.sh-steps {
  list-style: none; margin: 56px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--ink-line); border: 1px solid var(--ink-line); border-radius: var(--r-md); overflow: hidden;
}
.sh-step {
  background: var(--void);
  display: flex; gap: 18px; align-items: flex-start;
  padding: clamp(24px,2.5vw,34px);
}
.sh-step__num { font-family: var(--mono); font-size: 13px; color: var(--violet-2); padding-top: 3px; flex-shrink: 0; }
.sh-step__body h3 { font-family: var(--display); font-weight: 600; font-size: 18px; letter-spacing: -0.012em; color: var(--text-on-dark); margin-bottom: 7px; }
.sh-step__body p { font-size: 14px; line-height: 1.55; color: var(--text-on-dark-3); }
/* If the final step is alone on its row, let it span both columns */
.sh-steps .sh-step:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 720px) { .sh-steps { grid-template-columns: 1fr; } }

/* Coming soon (dark) -------------------------------------------------------- */
.sh-soon { background: var(--void); padding: clamp(80px,10vw,140px) 0; border-top: 1px solid var(--ink-line); }
.sh-soon__grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; margin-top: 48px; }
.sh-soon__card {
  background: #FFFFFF;
  border: 1px solid var(--ink-line);
  border-radius: var(--r-lg);
  padding: 30px 30px 32px;
  transition: border-color .25s ease, background .25s ease;
}
.sh-soon__card:hover { border-color: rgba(102,0,255,0.32); background: rgba(102,0,255,0.06); }
.sh-soon__card h3 { font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: -0.014em; color: var(--text-on-dark); margin-bottom: 12px; }
.sh-soon__card p { font-size: 14.5px; line-height: 1.55; color: var(--text-on-dark-2); }
@media (max-width: 720px) { .sh-soon__grid { grid-template-columns: 1fr; } }

/* Persona card icons -------------------------------------------------------- */
.persona-preview__icon {
  display: inline-flex;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  border-radius: 13px;
  background: rgba(102,0,255,0.12);
  border: 1px solid rgba(102,0,255,0.28);
  color: var(--violet-2);
  margin-bottom: 20px;
}
.persona-preview__icon svg { width: 24px; height: 24px; }

/* INLINE CAPTURE (hero + closer) -------------------------------------------- */
.capture { width: 100%; max-width: 540px; margin: clamp(26px, 3vw, 36px) auto 0; text-align: center; }
.capture__picker { margin-bottom: 14px; }
.capture__select {
  font-family: var(--sans); font-size: 15px; font-weight: 500;
  color: var(--text); background: #fff;
  border: 1px solid var(--ink-line); border-radius: 999px;
  padding: 12px 38px 12px 18px; cursor: pointer; min-height: 44px;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236600FF' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.capture__field {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--ink-line);
  border-radius: 999px; padding: 7px 7px 7px 6px;
  box-shadow: 0 18px 50px -22px rgba(102,0,255,0.30), 0 2px 6px -2px rgba(26,14,35,0.06);
}
.capture__email {
  flex: 1 1 auto; min-width: 0; border: none; outline: none; background: transparent;
  font-family: var(--sans); font-size: 16px; color: var(--text);
  padding: 12px 10px 12px 18px;
}
.capture__email::placeholder { color: var(--text-3); }
.capture__btn { flex: 0 0 auto; white-space: nowrap; }
.capture__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.capture__error { color: #e0316a; font-size: 13.5px; margin-top: 11px; display: none; }
.capture__error.is-visible { display: block; }
.capture__carrot { font-size: 14px; line-height: 1.5; color: var(--text-2); margin: 15px auto 0; max-width: 460px; }
.capture__carrot strong { color: var(--violet); font-weight: 600; }
.capture__spark { color: var(--magenta); margin-right: 5px; font-size: 13px; }

/* Optional @handle pill (hero + closer) — collected so we know which creators signed up */
.capture__handle, .cta__handle {
  display: block; width: 100%; box-sizing: border-box;
  background: #FFFFFF; border: 1px solid var(--ink-line);
  border-radius: 999px; padding: 15px 22px; margin-bottom: 10px;
  font-family: var(--sans); font-size: 16px; color: var(--text);
  box-shadow: 0 10px 30px -22px rgba(102,0,255,0.22);
}
.capture__handle::placeholder, .cta__handle::placeholder { color: var(--text-3); }
/* Human reassurance line directly under the @handle field (hero + closer) */
.capture__hint, .cta__hint {
  margin: -3px 0 13px; padding: 0 22px;
  font-size: 13px; line-height: 1.45; text-align: left;
  color: var(--text-2);
}

/* Two-step hero capture (step 1 handle → step 2 email) --------------------- */
.capture__step[hidden] { display: none; }
.capture__btn--block { width: 100%; justify-content: center; margin-top: 2px; }
.capture__crumb {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 12px; padding: 8px 14px;
  background: #fff; border: 1px solid var(--ink-line); border-radius: 999px;
  font-family: var(--sans); font-size: 14px; color: var(--text); cursor: pointer;
  box-shadow: 0 10px 30px -22px rgba(102,0,255,0.22);
}
.capture__crumb:hover { border-color: var(--violet); }
.capture__crumb-tick { color: #1fae6f; font-weight: 700; }
.capture__crumb-edit { color: var(--violet); font-size: 12.5px; }
.capture__hint--step2 { margin: 11px 0 0; }

/* TRUST BAR (slim credibility band under the hero) -------------------------- */
.trustbar {
  background: var(--void-2);
  border-bottom: 1px solid var(--ink-line);
  padding: 16px 0;
}
.trustbar__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 14px 22px; text-align: center;
}
.trustbar__item {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13.5px; color: var(--text-2); white-space: nowrap;
}
.trustbar__item b { color: var(--text); font-weight: 600; }
.trustbar__ic { width: 17px; height: 17px; color: var(--violet); flex: 0 0 auto; }
.trustbar__sep { width: 1px; height: 18px; background: var(--ink-line-2); }
.trustbar__avatars { display: inline-flex; }
.trustbar__av {
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; font-size: 10px; color: #fff;
  background: var(--grad); border: 2px solid var(--void-2);
}
.trustbar__av + .trustbar__av { margin-left: -9px; }
@media (max-width: 640px) {
  .trustbar { padding: 14px 0; }
  .trustbar__sep { display: none; }
  .trustbar__inner { gap: 10px 18px; }
  .trustbar__item { font-size: 12.5px; }
}

/* FOUNDING PERKS (what you get, at the decision point) ----------------------- */
.perks {
  list-style: none; margin: clamp(8px, 1.5vw, 14px) auto clamp(28px, 3.2vw, 36px);
  padding: 0; max-width: 440px; text-align: left;
}
.perks__item { padding: 15px 0; border-top: 1px solid var(--ink-line); }
.perks__item:first-child { border-top: none; padding-top: 2px; }
.perks__text b { display: block; font-family: var(--display); font-weight: 600; font-size: 15.5px; letter-spacing: -0.01em; color: var(--text); margin-bottom: 3px; }
.perks__text small { display: block; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }

/* ADVISORS ------------------------------------------------------------------ */
.advisors__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(20px, 2.5vw, 28px);
  max-width: 1160px; margin: clamp(36px, 4vw, 52px) auto 0;
}
.advisor {
  background: #FFFFFF;
  border: 1px solid var(--ink-line);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 32px);
  box-shadow: 0 18px 50px -28px rgba(26,14,35,0.22);
  text-align: left;
}
.advisor__head { display: flex; align-items: center; gap: 18px; }
.advisor__photo {
  flex: 0 0 auto; width: 84px; height: 84px; border-radius: 50%;
  object-fit: cover; object-position: center top;
  filter: grayscale(1) contrast(1.02);
  border: 1px solid var(--ink-line);
  transition: filter .35s ease;
}
.advisor:hover .advisor__photo { filter: grayscale(0) contrast(1); }
.advisor__id { min-width: 0; }
.advisor__name { font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: -0.015em; color: var(--text); margin: 0 0 11px; }
.advisor__socials { display: flex; gap: 8px; }
.advisor__social {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 15px 0 12px; border-radius: 999px;
  color: var(--violet);
  background: rgba(102,0,255,0.06);
  border: 1px solid rgba(102,0,255,0.16);
  font-size: 14px; font-weight: 600;
  transition: background .2s ease, border-color .2s ease, transform .15s ease, color .2s ease;
}
.advisor__social:hover { background: rgba(102,0,255,0.12); border-color: var(--violet); transform: translateY(-1px); color: var(--violet); }
.advisor__social svg { width: 18px; height: 18px; flex: 0 0 auto; }
.advisor__handle { white-space: nowrap; }
.advisor__quote {
  margin: clamp(20px, 2.4vw, 26px) 0 0;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.0625rem, 0.5vw + 1rem, 1.25rem);
  line-height: 1.5; letter-spacing: -0.01em;
  color: var(--text); text-wrap: balance;
}
.advisor__photo--ph {
  display: grid; place-items: center;
  background: rgba(102,0,255,0.08);
  color: var(--violet);
  font-family: var(--display); font-weight: 700; font-size: 30px;
  filter: none;
}
.advisor__pending {
  display: inline-flex; align-items: center; height: 38px; padding: 0 14px;
  border-radius: 999px; font-size: 13px; font-weight: 600;
  color: rgba(26,14,35,0.55); background: rgba(26,14,35,0.04);
  border: 1px solid var(--ink-line);
}
.advisor__quote--ph { color: rgba(26,14,35,0.5); font-style: italic; }
@media (max-width: 760px) {
  .advisors__grid { grid-template-columns: 1fr; max-width: 460px; }
}

/* Brand selected in the dropdown: plain waitlist, hide the founding mechanics. */
.is-waitlist-brand .js-cohort,
.is-waitlist-brand .capture__carrot,
.is-waitlist-brand .perks { display: none; }

/* FOUNDING COHORT METER ----------------------------------------------------- */
.cohort { width: 100%; max-width: 440px; margin: clamp(18px, 2.2vw, 24px) auto 0; }
.cohort__track {
  height: 8px; border-radius: 999px; overflow: hidden;
  background: rgba(102, 0, 255, 0.10);
}
.cohort__fill {
  height: 100%; width: 0; border-radius: 999px;
  background: var(--grad);
  transition: width 1.1s cubic-bezier(.22, 1, .36, 1);
}
.cohort__caption { font-size: 13.5px; color: var(--text-2); margin-top: 11px; text-align: center; }
.cohort__caption strong { color: var(--violet); font-weight: 600; }
.cohort__dot { opacity: .4; margin: 0 7px; }
.cohort__live { display: inline-flex; align-items: center; gap: 6px; }
.cohort__pulse {
  width: 7px; height: 7px; border-radius: 50%; background: #1fb568;
  box-shadow: 0 0 0 0 rgba(31,181,104,0.55); animation: cohort-pulse 2.2s ease-out infinite;
}
@keyframes cohort-pulse {
  0% { box-shadow: 0 0 0 0 rgba(31,181,104,0.5); }
  70% { box-shadow: 0 0 0 6px rgba(31,181,104,0); }
  100% { box-shadow: 0 0 0 0 rgba(31,181,104,0); }
}
.cohort__urgent {
  display: none; margin-left: 7px;
  font-size: 12.5px; font-weight: 600;
  color: var(--magenta-ink);
}
.cohort.is-nearly-full .cohort__fill { background: linear-gradient(120deg, var(--magenta) 0%, var(--violet) 100%); }
.cohort.is-nearly-full .cohort__caption strong { color: var(--magenta-ink); }
.cohort.is-nearly-full .cohort__urgent { display: inline; }
.cohort__full { display: none; }
.cohort.is-full .cohort__full { display: inline; color: var(--magenta-ink); font-weight: 600; }
.cohort.is-full .cohort__remaining, .cohort.is-full .cohort__urgent { display: none; }
@media (prefers-reduced-motion: reduce) { .cohort__pulse { animation: none; } }

/* Hero variants of the above sit on the light hero; closer reuses same classes. */
.sh-hero__meta a { display: inline-block; padding: 10px 6px; color: var(--text-on-dark-3); text-decoration: none; transition: color .2s ease; }
.sh-hero__meta a:hover { color: var(--violet); }

@media (max-width: 560px) {
  .capture__field {
    flex-direction: column; gap: 10px; padding: 0;
    background: transparent; border: none; box-shadow: none; border-radius: 0;
  }
  .capture__email {
    width: 100%; background: #fff; border: 1px solid var(--ink-line);
    border-radius: 14px; padding: 15px 18px;
    box-shadow: 0 10px 30px -18px rgba(102,0,255,0.25);
  }
  .capture__btn { width: 100%; justify-content: center; }
}

/* MOBILE -------------------------------------------------------------------- */
@media (max-width: 720px) {
  .sh-hero { padding-top: clamp(110px, 16vh, 150px); }
  .sh-hero__bg::after { width: 340px; top: 50%; opacity: 0.04; }
  .sh-hero__bg::before { background-size: 18px, 11px, 14px, 9px; background-position: 8% 24%, 90% 20%, 84% 60%, 14% 70%; }
  .sh-hero__ctas { flex-direction: column; gap: 10px; }
  .sh-hero__ctas .btn { width: 100%; justify-content: center; }
  .sh-hero__product { max-width: 280px; }
  .sh-feature { grid-template-columns: 1fr; gap: clamp(28px,6vw,40px); padding: clamp(48px,10vw,64px) 0; }
  .sh-feature--reverse .sh-feature__copy { order: 1; }
  .sh-feature--reverse .sh-feature__visual { order: 2; }
  .sh-feature__copy { max-width: none; }
  .ui-panel { max-width: 100%; }
  .sh-marquee__row span { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .sh-orb { animation: none; }
  .sh-marquee__row { animation: none; }
}

/* ===== /creators: single solution statement under the pain ===== */
.sh-solution {
  margin: clamp(36px, 5vw, 56px) auto 0; max-width: 780px;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(24px, 3.4vw, 38px); line-height: 1.15;
  letter-spacing: -0.01em; color: var(--text); text-align: center;
}

/* ===== /creators: lived deal journey — hover reveals the specialised AI agent ===== */
.sh-journey .sh-section-sub { max-width: 760px; }
.journey {
  list-style: none; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
}
.journey__stage {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--ink-line); border-radius: 18px;
  padding: 22px 20px; min-height: 210px;
  box-shadow: 0 18px 50px -36px rgba(102,0,255,0.28);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.journey__num {
  display: inline-block; font-family: var(--mono); font-size: 12px;
  color: var(--violet); margin-bottom: 16px;
}
.journey__head h3 { font-size: 16.5px; line-height: 1.2; margin: 0 0 9px; color: var(--text); }
.journey__head p { font-size: 13px; line-height: 1.5; color: var(--text-2); margin: 0; }
.journey__reveal {
  position: absolute; inset: 0; padding: 22px 20px;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(155deg, #6600FF, #BE0099);
  transform: translateY(101%); transition: transform .32s cubic-bezier(.4,0,.2,1);
}
.journey__agent {
  align-self: flex-start; font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: #fff;
  padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,0.18);
  margin-bottom: 11px;
}
.journey__reveal p { font-size: 13px; line-height: 1.5; margin: 0; color: #fff; }
@media (hover: hover) {
  .journey__stage:hover { transform: translateY(-4px); border-color: transparent;
    box-shadow: 0 30px 60px -28px rgba(102,0,255,0.45); }
  .journey__stage:hover .journey__reveal { transform: translateY(0); }
}
@media (hover: none) {
  .journey__stage { min-height: 0; }
  .journey__reveal { position: static; transform: none; margin-top: 16px;
    border-radius: 12px; padding: 16px; }
}
@media (max-width: 1000px) { .journey { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .journey { grid-template-columns: 1fr; } }

/* ===== Home hero — cinematic image background (Option 1) ===== */
.sh-hero--image {
  background: #0b0810;
  position: sticky; top: 0; z-index: 0;       /* pins behind while the panel rises over it */
  height: 100vh; min-height: 600px;
  display: flex; align-items: center;
  padding: clamp(96px, 13vh, 150px) 0 clamp(56px, 7vh, 84px);
  color: #fff;
}
/* The rest of the page rises over the pinned hero with a rounded top (Novu first-scroll reveal) */
.sh-rise { position: relative; z-index: 1; background: var(--void); }
.sh-hero--image .sh-hero__bg {
  z-index: 0;
  background: url('./assets/hero/creator-studio.png') center / cover no-repeat;
  filter: brightness(0.5) saturate(1.12) contrast(1.02);
}
/* kill the sparkle + flame layers on the image hero */
.sh-hero--image .sh-hero__bg::before,
.sh-hero--image .sh-hero__bg::after { display: none; }
/* cinematic grade: vignette + top/bottom darken + violet tint */
.sh-hero--image::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 46%, rgba(0,0,0,0) 34%, rgba(8,5,16,0.60) 100%),
    linear-gradient(180deg, rgba(8,5,16,0.55) 0%, rgba(8,5,16,0.08) 40%, rgba(8,5,16,0.60) 100%),
    linear-gradient(0deg, rgba(102,0,255,0.18), rgba(102,0,255,0.18));
}
.sh-hero--image .sh-hero__inner { z-index: 2; width: 100%; }
.sh-hero--image .sh-hero__eyebrow { color: #fff; opacity: 0.9; }
.sh-hero--image .sh-hero__title { color: #fff; }
.sh-hero--image .sh-hero__sub { color: rgba(255,255,255,0.9); max-width: 600px; }
.sh-hero--image .grad-text {
  background: var(--grad-bright); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.sh-hero__cta { margin-top: clamp(30px, 3.4vw, 44px); }

/* ===== Floating pill nav (Novu-inspired) ===== */
.nav { background: transparent; border-bottom-color: transparent; justify-content: center; }
.nav.is-scrolled { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; }
body.is-home .nav { position: fixed; left: 0; right: 0; }   /* float over the image hero */
.nav__brand { position: absolute; left: var(--pad); top: 50%; transform: translateY(-50%); }
.nav__pill {
  display: flex; align-items: center; gap: 2px; padding: 6px 6px 6px 8px;
  border-radius: 999px;
  /* Apple "material": vibrancy (blur + big saturation), specular top edge, fine rim, float */
  background: linear-gradient(180deg, rgba(44,36,60,0.40), rgba(18,14,26,0.46));
  backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%);
  box-shadow:
    inset 0 1px 0.5px rgba(255,255,255,0.45),
    inset 0 -0.5px 0.5px rgba(255,255,255,0.07),
    inset 0 0 0 0.6px rgba(255,255,255,0.10),
    0 14px 40px -14px rgba(0,0,0,0.55);
}
.nav__pill .nav__links { display: flex; gap: 2px; }
.nav__pill .nav__links a { color: rgba(255,255,255,0.85); font-weight: 500; font-size: 14.5px; padding: 9px 16px; border-radius: 999px; }
.nav__pill .nav__links a:hover, .nav__pill .nav__links a.is-active { color: #fff; background: rgba(255,255,255,0.14); }
.nav__pill .nav__cta { margin-left: 4px; min-height: 0; padding: 9px 18px; box-shadow: 0 6px 18px -8px rgba(102,0,255,0.55); }
/* Download App button — solid black + Apple mark, Novu-style */
.nav__pill .nav__cta--app { gap: 8px; background: #0b0b0e; color: #fff;
  box-shadow: 0 6px 18px -8px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08); }
.nav__pill .nav__cta--app:hover { background: #1a1a1f; }
.nav__cta-apple { width: 14px; height: 16px; flex: 0 0 auto; margin-top: -2px; }
/* logo: white only while the dark image hero is behind the nav, dark otherwise */
.nav__brand .nav__lockup { transition: filter .2s ease; }
.nav.nav--on-dark .nav__brand .nav__lockup { filter: brightness(0) invert(1); }
/* Hamburger + dropdown menu — hidden on desktop (inline links handle it there) */
.nav__burger, .nav__menu { display: none; }

/* Mobile (<=880px): logo hard-left, then "Get early access" + a hamburger that
   reveals Creators / Brands (so they stay reachable now the inline links drop).
   Brand and CTA on opposite edges makes the old logo-over-links overlap
   structurally impossible. */
@media (max-width: 880px) {
  .nav { justify-content: space-between; gap: 12px; }
  .nav__brand { position: static; transform: none; flex: 0 0 auto; }
  .nav__pill {
    background: none; border: none; padding: 0; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .nav__pill .nav__links { display: none; }
  .nav__pill .nav__cta { margin-left: 0; }

  .nav__burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 38px; height: 38px; padding: 0 8px; margin-left: 8px;
    background: none; border: none; cursor: pointer; flex: 0 0 auto;
  }
  .nav__burger span { display: block; height: 2px; width: 100%; background: var(--text); border-radius: 2px; transition: transform .25s ease, opacity .15s ease; }
  .nav.nav--on-dark .nav__burger span { background: #fff; }
  .nav.nav--open .nav__burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav.nav--open .nav__burger span:nth-child(2) { opacity: 0; }
  .nav.nav--open .nav__burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .nav__menu {
    display: block; position: absolute; top: calc(100% + 6px); left: var(--pad); right: var(--pad);
    background: #fff; border: 1px solid var(--ink-line); border-radius: 16px; padding: 7px;
    box-shadow: 0 22px 50px -18px rgba(26,14,35,0.30);
    max-height: 0; opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none;
    transition: max-height .26s ease, opacity .18s ease, transform .22s ease;
  }
  .nav.nav--open .nav__menu { max-height: 200px; opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
  .nav__menu a { display: block; padding: 13px 14px; font-size: 16px; font-weight: 600; color: var(--text); text-decoration: none; border-radius: 11px; }
  .nav__menu a:hover, .nav__menu a:active { background: var(--void-2); color: var(--violet); }
}

/* ===== Mobile scroll diet — far less to scroll through on phones ===== */
@media (max-width: 720px) {
  .section { padding: 40px 0 !important; }
  .sh-value { padding: 32px 0 38px; }
  .sh-showcase { padding-bottom: 16px; }
  .sh-statement { padding-top: 32px; padding-bottom: 32px; }
}
@media (max-width: 600px) {
  .section { padding: 32px 0 !important; }
}

/* ===== /support page footer block ===== */
.support-foot { text-align: center; }
.support-foot__inner { max-width: 640px; margin: 0 auto; }
.support-foot__links { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; font-size: 15px; margin: 0 0 12px; }
.support-foot__links a { color: var(--text-2); text-decoration: none; }
.support-foot__links a:hover { color: var(--violet); }
.support-foot__legal { font-size: 13.5px; color: var(--text-3); margin: 0; line-height: 1.5; }

/* ===== Value bento — what Spark is + the outcomes, glanceable (Apple/Linear pattern) =====
   Lavender panel so it breaks cleanly from the white statement/showcase above. */
.sh-value { background: var(--void-2); border-top: 1px solid var(--ink-line); padding: clamp(48px, 6vw, 80px) 0 clamp(56px, 7vw, 96px); }
.sh-value__head { max-width: 720px; margin: 0 auto clamp(34px, 4vw, 56px); text-align: center; }
.sh-value__eyebrow { font-size: 14px; font-weight: 600; color: var(--magenta-ink); margin: 0 0 14px; }
.sh-value__head h2 { font-family: var(--display); font-weight: 600; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.08; letter-spacing: -0.02em; color: var(--text); margin: 0 0 16px; }
.sh-value__sub { font-size: clamp(15px, 1.05vw, 18px); line-height: 1.55; color: var(--text-2); margin: 0 auto; max-width: 60ch; }

.bento {
  max-width: 1080px; margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(150px, auto);
  gap: clamp(12px, 1.1vw, 18px);
  grid-template-areas:
    "paid paid price price"
    "paid paid vet   terms"
    "ctrl ctrl ctrl  ctrl";
}
.bento__cell {
  position: relative; overflow: hidden;
  background: #fff;
  border: 1px solid var(--ink-line);
  border-radius: clamp(18px, 1.6vw, 24px);
  padding: clamp(22px, 2vw, 30px);
  display: flex; flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.bento__cell:hover { transform: translateY(-3px); box-shadow: 0 26px 54px -30px rgba(102,0,255,0.24); border-color: rgba(102,0,255,0.28); }
.bento__cell--paid    { grid-area: paid;  justify-content: space-between; background: linear-gradient(162deg, #fff 35%, #F4EEFF); }
.bento__cell--price   { grid-area: price; }
.bento__cell--vet     { grid-area: vet; }
.bento__cell--terms   { grid-area: terms; }
.bento__cell--control { grid-area: ctrl; flex-direction: row; align-items: center; justify-content: space-between; gap: clamp(16px, 3vw, 40px); background: linear-gradient(110deg, #fff 55%, #F4EEFF); }

.bento__kicker { font-size: 13px; font-weight: 600; color: var(--magenta-ink); }
.bento__h { font-family: var(--display); font-weight: 600; font-size: clamp(17px, 1.4vw, 22px); line-height: 1.14; letter-spacing: -0.015em; color: var(--text); margin: 12px 0 8px; }
.bento__cell--paid .bento__h { font-size: clamp(22px, 2.2vw, 31px); margin-top: 10px; }
.bento__cell--control .bento__h { margin-top: 0; font-size: clamp(20px, 2vw, 28px); }
.bento__p { font-size: 13.5px; line-height: 1.5; color: var(--text-3); margin: 0; }
.bento__cell--paid .bento__p, .bento__cell--control .bento__p { font-size: clamp(13.5px, 1vw, 15px); max-width: 42ch; }
.bento__lead { flex: 0 0 auto; }

/* focal: 53 days -> <24 hrs */
.bento__cell--paid .bento__viz { margin-top: 22px; }
.paidviz { display: flex; flex-direction: column; gap: 10px; }
.paidviz__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-radius: 14px; background: #F7F5FC; border: 1px solid var(--ink-line); }
.paidviz__row--new { background: linear-gradient(100deg, rgba(102,0,255,.12), rgba(255,0,204,.09)); border-color: transparent; }
.paidviz__lbl { font-size: 13px; color: var(--text-3); }
.paidviz__num { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 2.3vw, 32px); letter-spacing: -0.02em; line-height: 1; }
.paidviz__num--old { color: #B4ADBE; text-decoration: line-through; }
.paidviz__num--new { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* pricing mini */
.bento__cell--price .bento__viz { margin-bottom: 18px; }
.priceviz { display: flex; flex-direction: column; gap: 8px; }
.priceviz__row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--text-3); padding: 9px 13px; border-radius: 11px; background: #F7F5FC; }
.priceviz__row b { font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--text); }
.priceviz__row--rec { background: linear-gradient(100deg, rgba(102,0,255,.12), rgba(255,0,204,.09)); }
.priceviz__row--rec b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* vet + terms icon */
.bento__icon { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(102,0,255,.13), rgba(255,0,204,.10)); margin-bottom: 16px; }
.bento__icon svg { width: 24px; height: 24px; color: var(--violet); }

/* control banner: the buttons live on a concrete decision card, not in space */
.bento__decision {
  display: flex; align-items: center; gap: clamp(14px, 2vw, 24px); flex: 0 0 auto;
  background: #fff; border: 1px solid var(--ink-line); border-radius: 16px;
  padding: 13px 16px;
  box-shadow: 0 10px 30px -18px rgba(26,14,35,0.18);
}
.bento__decision-txt b { display: block; font-size: 14px; color: var(--text); line-height: 1.25; }
.bento__decision-txt small { font-size: 12px; color: var(--text-3); }
.bento__actions { display: flex; gap: 10px; flex: 0 0 auto; }
.ctrlbtn { padding: 11px 22px; border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.ctrlbtn--pass { border: 1px solid var(--ink-line); color: var(--text-3); }
.ctrlbtn--ok { background: var(--grad); color: #fff; }

@media (max-width: 760px) {
  .bento { grid-template-columns: 1fr; grid-auto-rows: auto; grid-template-areas: "paid" "price" "vet" "terms" "ctrl"; }
  .bento__cell--control { flex-direction: column; align-items: flex-start; }
  .bento__decision { width: 100%; flex-wrap: wrap; justify-content: space-between; }
}

/* Four-cell variant for the persona pages: one focal outcome + three supporting */
.bento--four {
  grid-template-areas:
    "focal focal price price"
    "focal focal a     b";
}
.bento__cell--focal { grid-area: focal; justify-content: space-between; background: linear-gradient(162deg, #fff 35%, #F4EEFF); }
.bento__cell--focal .bento__h { font-size: clamp(22px, 2.2vw, 31px); margin-top: 10px; }
.bento__cell--focal .bento__p { font-size: clamp(13.5px, 1vw, 15px); max-width: 42ch; }
.bento__cell--focal .bento__viz { margin-top: 22px; }
.bento__cell--a { grid-area: a; }
.bento__cell--b { grid-area: b; }
@media (max-width: 760px) {
  .bento--four { grid-template-areas: "focal" "price" "a" "b"; }
}

/* When the first 100 is full (app.js sets the body class from the live count):
   the founding perks and the 0% carrot come down; data-full-text swaps the copy. */
body.is-cohort-full .perks,
body.is-cohort-full .capture__carrot { display: none; }

/* ===== CTA offer card — perks, meter, and form in one designed unit ===== */
.cta__card {
  scroll-margin-top: clamp(70px, 10vh, 100px); /* CTA anchors land the card just under the nav */
  max-width: 560px; margin: clamp(28px, 3.5vw, 44px) auto 0;
  background: #fff; border: 1px solid var(--ink-line);
  border-radius: 24px; padding: clamp(22px, 2.6vw, 32px);
  text-align: left;
  box-shadow: 0 30px 80px -40px rgba(60,12,90,0.35);
}
.cta__card .perks { max-width: none; margin: 0 0 4px; }
.cta__card .perks__item { display: flex; gap: 11px; align-items: flex-start; padding: 9px 0; border-top: none; }
.perks__ck {
  width: 22px; height: 22px; flex: 0 0 auto; margin-top: 1px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: linear-gradient(135deg, rgba(102,0,255,.13), rgba(255,0,204,.10));
}
.perks__ck svg { width: 12px; height: 12px; color: var(--violet); }
.cta__card .cohort { max-width: none; margin: 14px 0 0; }
.cta__card .cohort__caption { text-align: left; }
/* De-blob: the form becomes plain stacked fields inside the card */
.cta__card .cta__form {
  margin: 18px 0 0; padding: 0; display: block; max-width: none;
  background: transparent; border: none; border-radius: 0; box-shadow: none;
}
.cta__card .cta__persona-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cta__card .cta__handle, .cta__card .capture__email {
  width: 100%; background: #F7F5FC; border: 1px solid var(--ink-line);
  border-radius: 13px; padding: 13px 15px; font-size: 15px; color: var(--text);
}
.cta__card .cta__hint { margin: 8px 2px 12px; }
.cta__card .cta__inline { display: flex; gap: 8px; }
.cta__card .capture__email { flex: 1; }
.cta__card .cta__submit { flex: 0 0 auto; }
@media (max-width: 560px) {
  .cta__card .cta__inline { flex-direction: column; }
  .cta__card .cta__submit { width: 100%; justify-content: center; }
}

/* ===== Reassurance strip — lavender band of three promises right before the ask ===== */
.tstrip { background: var(--void-2); border-top: 1px solid var(--ink-line); padding: clamp(36px, 4.5vw, 56px) 0; }
.tstrip__inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px); max-width: 1020px; }
.tstrip__item { text-align: center; }
.tstrip__ic {
  width: 46px; height: 46px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(102,0,255,.13), rgba(255,0,204,.10));
}
.tstrip__ic svg { width: 24px; height: 24px; color: var(--violet); }
.tstrip__item b { display: block; font-size: clamp(14.5px, 1.1vw, 16.5px); font-weight: 600; color: var(--text); letter-spacing: -0.01em; margin-bottom: 4px; }
.tstrip__item small { font-size: 13.5px; line-height: 1.45; color: var(--text-3); }
@media (max-width: 720px) {
  .tstrip__inner { grid-template-columns: 1fr; gap: 22px; }
}

/* ===== FAQ — objections handled right before the final CTA ===== */
.sh-faq { background: var(--void); padding: clamp(48px, 6vw, 80px) 0; }
.sh-faq__inner { max-width: 720px; }
.sh-faq__title {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(26px, 3.2vw, 40px); line-height: 1.08; letter-spacing: -0.02em;
  color: var(--text); text-align: center; margin: 0 0 clamp(26px, 3vw, 40px);
}
.sh-faq__list { border-top: 1px solid var(--ink-line); }
.sh-faq__item { border-bottom: 1px solid var(--ink-line); }
.sh-faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  list-style: none; cursor: pointer;
  padding: 18px 2px;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(15.5px, 1.15vw, 18px); letter-spacing: -0.01em; color: var(--text);
  transition: color .2s ease;
}
.sh-faq__item summary::-webkit-details-marker { display: none; }
.sh-faq__item summary:hover { color: var(--violet); }
.sh-faq__chev { position: relative; width: 18px; height: 18px; flex: 0 0 auto; transition: transform .25s ease; }
.sh-faq__chev::before, .sh-faq__chev::after {
  content: ""; position: absolute; background: var(--text-3); border-radius: 1px;
}
.sh-faq__chev::before { left: 0; right: 0; top: 8px; height: 2px; }
.sh-faq__chev::after { top: 0; bottom: 0; left: 8px; width: 2px; }
.sh-faq__item[open] .sh-faq__chev { transform: rotate(45deg); }
.sh-faq__item p {
  margin: 0; padding: 0 2px 20px;
  font-size: clamp(14.5px, 1.05vw, 16px); line-height: 1.6; color: var(--text-2);
  max-width: 60ch;
}