/* =================================================
   NOLONA CLIPS, Editorial / Magazine maximalist
   Display: Fraunces (variable optical sizing)
   Body:    Geist
   Mono:    Geist Mono
   ================================================= */

:root {
  --brand: #ff751f;
  --brand-soft: #ff8a3d;
  --brand-deep: #cc5a14;
  --brand-glow: rgba(255, 117, 31, 0.45);

  --paper: #f5efe6;
  --paper-2: #ebe3d4;
  --ink: #0c0c0d;
  --ink-2: #1a1a1d;
  --ink-3: #28282d;
  --text: #f5efe6;
  --text-2: #a8a39c;
  --text-3: #6e6963;
  --line: rgba(245, 239, 230, 0.10);
  --line-strong: rgba(245, 239, 230, 0.18);

  --r-1: 8px;
  --r-2: 14px;
  --r-3: 22px;
  --r-4: 32px;
  --r-full: 999px;

  --max: 1280px;
  --pad-x: 28px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);

  --font-display: "Fraunces", "Georgia", ui-serif, serif;
  --font-body: "Geist", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
*::selection { background: var(--brand); color: var(--ink); }

/* T-214: overflow-x clip (not hidden) on html. The hero's decorative
   bleed (mesh blobs, scattered clip tiles, ticker) extends the html
   element ~30px past the viewport on phones, and body{overflow-x:hidden}
   alone still let the viewport PAN sideways (measured scrollX 31 at
   390px). `clip` forbids all horizontal scrolling without creating a
   scroll container, so sticky/pinned sections are unaffected. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; overflow-x: clip; }
body {
  font-family: var(--font-body);
  background: var(--ink);
  color: var(--text);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  cursor: none;
  font-feature-settings: "ss01", "ss03";
}
@media (pointer: coarse), (hover: none) { body { cursor: auto; } }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: none; border: none; background: none; color: inherit; }

.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad-x); width: 100%; }

/* =================================================
   CUSTOM CURSOR
   ================================================= */
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 36px; height: 36px;
  border: 1.5px solid var(--brand);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.3s var(--ease), height 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease), opacity 0.3s var(--ease);
  mix-blend-mode: difference;
  opacity: 0;
}
.cursor--dot {
  width: 5px; height: 5px;
  background: var(--brand);
  border: none;
  z-index: 10000;
}
.cursor.is-hover {
  width: 64px; height: 64px;
  background: rgba(255, 117, 31, 0.12);
  border-color: var(--brand);
}
.cursor.is-visible { opacity: 1; }
@media (pointer: coarse), (hover: none) { .cursor { display: none; } }

/* =================================================
   SCROLL PROGRESS + GRAIN + MESH
   ================================================= */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--brand), #ffd60a, var(--brand));
  background-size: 200% 100%;
  z-index: 200;
  transition: width 0.05s linear;
  animation: shimmer-bg 4s linear infinite;
}
@keyframes shimmer-bg { to { background-position: -200% 0; } }

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 150;
  opacity: 0.08;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.mesh { position: fixed; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; }
.mesh__blob {
  position: absolute;
  width: 60vw; height: 60vw;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.55;
  will-change: transform;
}
.mesh__blob--1 { top: -20%; left: -10%; background: radial-gradient(circle, rgba(255, 117, 31, 0.7), transparent 60%); animation: mesh-1 22s var(--ease) infinite alternate; }
.mesh__blob--2 { top: 30%; right: -15%; background: radial-gradient(circle, rgba(255, 59, 59, 0.4), transparent 60%); animation: mesh-2 28s var(--ease) infinite alternate; }
.mesh__blob--3 { bottom: -10%; left: 20%; background: radial-gradient(circle, rgba(168, 85, 247, 0.3), transparent 60%); animation: mesh-3 32s var(--ease) infinite alternate; }
.mesh__blob--4 { bottom: 40%; left: -20%; background: radial-gradient(circle, rgba(59, 130, 246, 0.25), transparent 60%); animation: mesh-4 26s var(--ease) infinite alternate; }

@keyframes mesh-1 { to { transform: translate(20vw, 10vh) scale(1.2); } }
@keyframes mesh-2 { to { transform: translate(-15vw, 20vh) scale(1.1); } }
@keyframes mesh-3 { to { transform: translate(10vw, -15vh) scale(1.3); } }
@keyframes mesh-4 { to { transform: translate(25vw, -10vh) scale(1.15); } }

/* =================================================
   PERFORMANCE , no design changes, only perf hints
   Pattern from AI Creator OS globals.css lines 121-161.
   Goal: faster paint + instant scroll, animations stay.
   ================================================= */

/* iOS rubber-band overscroll causes layout reflow at page edges */
html { overscroll-behavior: none; }

/* Pre-promote anything GSAP/JS animates onto its own GPU
   compositor layer , transforms no longer trigger paints of
   surrounding content. */
[data-tilt],
[data-magnetic],
[data-parallax-y],
[data-reveal],
.word,
.morph-tile,
.morph-app,
.clip-tile,
.clip-chip {
  will-change: transform, opacity;
}

/* Layout containment only (no content-visibility: auto , that was
   causing sections to render at 800px placeholder then "snap" to
   their real height when scrolled near, which the user saw as
   half-rendered cards). `contain: layout style` keeps paint
   isolated to each section without any size virtualization. */
.section,
.tickers,
.stats-bar,
.cta-band,
.footer {
  contain: layout style;
}

/* Mobile: kill backdrop-filter globally. It's the #1 GPU killer
   on mobile , every scroll frame repaints everything behind
   each blurred surface. Compensate with slightly more opaque
   backgrounds so nav + chips stay legible. Design unchanged. */
@media (max-width: 820px) {
  * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* T-215: the four 60vw blur(120px) blobs animate FOREVER behind every
     page; on phones that means four huge blurred compositor layers
     invalidating continuously. Static blobs paint their blur ONCE into a
     cached texture (colors stay, drift stops - imperceptible on a phone).
     The grain is a full-screen fixed mix-blend-mode overlay re-blended
     every scroll frame for a texture that is invisible at 0.08 opacity on
     small screens. A/B measured on-device-throttle: mesh+grain off =
     locked 60fps vs 39-52 baseline. */
  .mesh__blob { animation: none !important; }
  .grain { display: none !important; }
  .nav { background: rgba(12, 12, 13, 0.92) !important; }
  .eyebrow,
  .clip-chip,
  .clip-cover__live,
  .morph-tile__live,
  .morph-tile__metric { background: rgba(12, 12, 13, 0.85) !important; }

  /* MOBILE RULE: every element renders fully on page load. No
     "wait for scroll, then fade in" behavior. Reveal animations
     stay defined for desktop, but on mobile the initial hidden
     state is overridden so content is visible immediately. */
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .word,
  [data-word-stagger] {
    transform: none !important;
    transition: none !important;
  }
  .word-wrap { overflow: visible !important; }
  html { scroll-behavior: auto; }

  /* MOBILE-ONLY video swap for the morph section + hero clip tiles:
     show static WebP poster instead of the autoplaying MP4.
     Hero: saves ~1.4MB + 3 video decoders. Morph: saves ~2.5MB + 6 decoders.
     CSS-keyframe float animation on hero tiles is untouched.
     Desktop is unchanged (videos still play). */
  .morph-tile__media video,
  .clip-tile__media video { display: none !important; }
  .morph-tile__media .morph-tile__poster,
  .clip-tile__media .clip-tile__poster {
    display: block !important;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
  }
}

/* Desktop: hide both posters (videos play instead) */
@media (min-width: 821px) {
  .morph-tile__media .morph-tile__poster,
  .clip-tile__media .clip-tile__poster { display: none !important; }
}

/* =================================================
   TYPOGRAPHY
   ================================================= */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 0.95;
  font-variation-settings: "opsz" 144;
}
h1 em, h2 em, h3 em {
  font-style: italic;
  font-weight: 800;
  font-variation-settings: "opsz" 144;
}
em { font-style: italic; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: rgba(255, 117, 31, 0.04);
  backdrop-filter: blur(8px);
}
.eyebrow__pulse {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 0 var(--brand-glow);
  animation: ring-pulse 2s ease-out infinite;
}
.eyebrow__issue { margin-left: auto; opacity: 0.5; font-size: 10px; padding-left: 10px; border-left: 1px solid var(--line-strong); }

@keyframes ring-pulse {
  0% { box-shadow: 0 0 0 0 var(--brand-glow); }
  70% { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.section__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--brand);
  text-transform: uppercase;
  margin-bottom: 14px;
  font-weight: 500;
}

/* Word stagger reveal, used on every headline.
   Vertical padding gives room for descenders (g, y, p, ?, ,) so
   overflow:hidden doesn't clip the bottom of italic Fraunces glyphs.
   Negative margin negates the padding so layout isn't pushed. */
.word-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.08em 2px 0.22em;
  margin: -0.08em -2px -0.22em;
}
.word {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.9s var(--ease-out);
  will-change: transform;
}
.word.is-in { transform: translateY(0); }
.word-wrap + .word-wrap { margin-left: 0.2em; }

/* Italic Fraunces in section titles (e.g. the "Clips?" line) has descenders
   (?, ,, g/y/p/q tails) that exceed the .word-wrap 0.22em bottom buffer at
   large h2 sizes. Scoped opt-out preserves the slide-up reveal on every
   non-italic .word-wrap while letting the italic tail show through. */
.section__title em .word-wrap { overflow: visible; }

/* =================================================
   BUTTONS (magnetic, with arrow swap on hover)
   ================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: var(--r-full);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: background 0.4s var(--ease), color 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s;
  will-change: transform;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s var(--ease);
  z-index: 0;
}
.btn:hover::before { transform: translateX(100%); }
.btn__label, .btn__icon { position: relative; z-index: 1; display: inline-flex; }
.btn__icon { transition: transform 0.4s var(--ease); }
.btn:hover .btn__icon { transform: translate(3px, -3px) rotate(0deg); }

.btn--primary {
  background: var(--brand);
  color: var(--ink);
  box-shadow: 0 10px 26px -10px var(--brand-glow), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.btn--primary:hover {
  background: var(--brand-soft);
  box-shadow: 0 16px 36px -8px var(--brand-glow), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn--ghost { background: transparent; color: var(--text); border: 1px solid var(--line-strong); }
.btn--ghost:hover { background: rgba(245, 239, 230, 0.04); border-color: rgba(245, 239, 230, 0.3); }
.btn--lg { padding: 15px 26px; font-size: 15px; }
.btn--xl { padding: 19px 34px; font-size: 16px; }

/* =================================================
   NAV
   ================================================= */
.nav {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 10px 12px 10px 22px;
  width: calc(100% - 32px);
  max-width: 1200px;
  background: rgba(12, 12, 13, 0.65);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  transition: top 0.4s var(--ease), background 0.3s var(--ease), border-color 0.3s;
}
.nav.is-scrolled { background: rgba(12, 12, 13, 0.85); border-color: var(--line-strong); }
.nav__logo { flex-shrink: 0; }
.nav__logo img { height: 38px; width: auto; transition: filter 0.3s; }
.nav__links {
  display: flex;
  gap: 6px;
  font-size: 14px;
  color: var(--text-2);
}
.nav__links a {
  white-space: nowrap;
  position: relative;
  padding: 8px 14px;
  border-radius: var(--r-full);
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  height: 36px;
}
.nav__links a span {
  display: inline-block;
  transition: transform 0.4s var(--ease), color 0.3s;
}
.nav__links a::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(100%);
  transition: transform 0.4s var(--ease);
  color: var(--text);
}
.nav__links a:hover span { color: var(--text); }
.nav__cta { padding: 10px 18px; font-size: 13px; white-space: nowrap; }
.nav__ctas { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.nav__cta--ghost { color: var(--brand); }

/* App auth pills — link to app.elnez.com */
.nav__auth {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 999px;
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
  border: 1px solid transparent;
  color: var(--text);
}
.nav__auth--login {
  color: var(--text);
  background: transparent;
}
.nav__auth--login:hover { background: rgba(255,255,255,0.06); }
.nav__auth--signup {
  color: #0b0b0d;
  background: var(--brand);
}
.nav__auth--signup:hover { background: #ff8a3d; }


/* T-261: small phones — the pill must hold logo + auth pills + CTA on one line */
@media (max-width: 480px) {
  .nav { gap: 8px; padding: 8px 8px 8px 14px; }
  .nav__logo img { height: 28px; }
  .nav__auth { padding: 8px 9px; font-size: 12px; }
  .nav__cta { padding: 8px 12px; font-size: 12px; }
}

/* T-259: the nav gained a Blog link; degrade gracefully between full desktop
   and the 820px mobile pill instead of letting labels wrap and the logo crush. */
@media (max-width: 1280px) {
  .nav { gap: 18px; }
  .nav__links { gap: 2px; }
  .nav__links a { padding: 8px 10px; font-size: 13.5px; }
}
@media (max-width: 1020px) {
  .nav__cta--ghost { display: none; }
  .nav__links { gap: 0; }
  .nav__links a { padding: 8px 8px; font-size: 13px; }
}

@media (max-width: 820px) {
  .nav__links { display: none; }
  .nav { padding: 8px 10px 8px 18px; }
  .nav__logo img { height: 32px; }
  /* Two CTAs side-by-side would crowd the small nav, hide the ghost one,
     the user can still reach /fund via the hero CTA or the footer link. */
  .nav__cta--ghost { display: none; }
}

/* =================================================
   HERO
   ================================================= */
.hero {
  position: relative;
  padding: 170px 0 60px;
  min-height: 100vh;
}
.hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 60px;
  align-items: center;
}
.hero__copy { max-width: 640px; }
.hero__title {
  font-size: clamp(46px, 7.2vw, 104px);
  font-weight: 800;
  margin-top: 22px;
  letter-spacing: -0.04em;
  line-height: 0.92;
}
.hero__title-italic {
  display: block;
  background: linear-gradient(100deg, var(--brand) 0%, #ffb066 40%, var(--brand) 80%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer-text 6s linear infinite;
}
@keyframes shimmer-text { to { background-position: -200% 0; } }

.hero__sub {
  font-size: clamp(16px, 1.3vw, 19px);
  color: var(--text-2);
  margin-top: 28px;
  max-width: 540px;
  line-height: 1.55;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

.hero__trust {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.hero__trust-avatars { display: flex; }
.hero__trust-avatar {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  background: var(--c);
  border: 2px solid var(--ink);
  letter-spacing: 0;
}
.hero__trust-avatar + .hero__trust-avatar { margin-left: -10px; }
.hero__trust-stars { color: var(--brand); font-size: 14px; letter-spacing: 2px; }
.hero__trust-text { font-size: 12px; color: var(--text-2); font-family: var(--font-mono); }
.hero__trust-text > div:last-child { margin-top: 2px; }

/* hero scroll cue */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  z-index: 2;
  animation: hint 2s ease-in-out infinite;
}
.hero__scroll-dot { animation: scroll-dot 2.2s ease-in-out infinite; }
@keyframes scroll-dot { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(8px); opacity: 0.4; } }
@keyframes hint { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }

/* =================================================
   HERO 3D clip space
   ================================================= */
.hero__visual { position: relative; width: 100%; aspect-ratio: 1 / 1; max-width: 580px; margin-left: auto; }
.clip-space {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 1400px;
  transform-style: preserve-3d;
}

.clip-cover {
  position: absolute;
  top: 18%;
  left: 8%;
  width: 80%;
  z-index: 2;
  border-radius: var(--r-4);
  overflow: hidden;
  box-shadow:
    0 40px 100px -20px rgba(0, 0, 0, 0.65),
    0 0 0 1px var(--line-strong),
    0 0 80px -10px var(--brand-glow);
  transform: translateZ(40px) rotate(-3deg);
  transition: transform 0.8s var(--ease);
}
.clip-cover img { width: 100%; height: auto; display: block; }
.clip-cover__live {
  position: absolute;
  top: 14px; left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  background: rgba(12, 12, 13, 0.7);
  backdrop-filter: blur(8px);
  color: var(--text);
  border-radius: var(--r-full);
  text-transform: uppercase;
}
.clip-cover__live-dot { width: 6px; height: 6px; background: #ff3b3b; border-radius: 50%; animation: blink 1.4s ease-in-out infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }

/* Floating clip tiles */
.clip-tile {
  position: absolute;
  width: 35%;
  aspect-ratio: 9 / 16;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--c1), var(--c2));
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: var(--font-mono);
  color: #fff;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: transform 0.6s var(--ease);
}
.clip-tile::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 40%, rgba(0, 0, 0, 0.35), transparent 70%);
  pointer-events: none;
}
.clip-tile > * { position: relative; z-index: 1; }
.clip-tile > .clip-tile__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.clip-tile__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  background: #000;
}
.clip-tile--1 { top: 6%; right: -2%; transform: translateZ(60px) rotate(8deg); animation: float-a 7s ease-in-out infinite; }
.clip-tile--2 { top: 32%; right: -16%; transform: translateZ(80px) rotate(6deg); animation: float-b 8s ease-in-out infinite; }
.clip-tile--3 { bottom: 4%; right: 4%; transform: translateZ(40px) rotate(-2deg); animation: float-c 9s ease-in-out infinite; }

@keyframes float-a { 0%, 100% { transform: translateZ(60px) rotate(8deg) translateY(0); } 50% { transform: translateZ(60px) rotate(8deg) translateY(-14px); } }
@keyframes float-b { 0%, 100% { transform: translateZ(80px) rotate(6deg) translateY(0); } 50% { transform: translateZ(80px) rotate(6deg) translateY(12px); } }
@keyframes float-c { 0%, 100% { transform: translateZ(40px) rotate(-2deg) translateY(0); } 50% { transform: translateZ(40px) rotate(-2deg) translateY(-10px); } }

.clip-tile__live {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: var(--r-full);
  align-self: flex-start;
  font-size: 8px;
}
.clip-tile__live-dot { width: 4px; height: 4px; background: #ff3b3b; border-radius: 50%; animation: blink 1.4s ease-in-out infinite; }
.clip-tile__metric {
  position: absolute;
  top: 12px; right: 12px;
  padding: 3px 7px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: var(--r-full);
  font-size: 9px;
  letter-spacing: 0.05em;
}
.clip-tile__play {
  align-self: center;
  width: 36px; height: 36px;
  color: #fff;
  opacity: 0.9;
}
.clip-tile__caption { font-size: 9px; line-height: 1.4; letter-spacing: 0.02em; text-transform: none; font-family: var(--font-body); font-weight: 600; }
.clip-tile__stats { display: flex; justify-content: space-between; font-size: 9px; opacity: 0.7; }

/* floating chips */
.clip-chip {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: rgba(12, 12, 13, 0.9);
  backdrop-filter: blur(20px);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.clip-chip__dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 12px currentColor; }
.clip-chip--reach { bottom: 6%; left: -8%; animation: float-a 6s ease-in-out infinite; }
.clip-chip--views { top: 8%; left: -2%; animation: float-b 7s ease-in-out infinite; }

@media (max-width: 920px) {
  .hero { padding: 140px 0 40px; min-height: auto; }
  .hero__inner { grid-template-columns: 1fr; gap: 50px; }
  .hero__visual { max-width: 460px; margin: 0 auto; }
  .hero__scroll { display: none; }
}

/* =================================================
   TICKERS, dual marquees, one reverse
   ================================================= */
.tickers {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--ink-2);
  overflow: hidden;
}
.ticker {
  overflow: hidden;
  white-space: nowrap;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker:last-child { border-bottom: 0; }
.ticker__rail { display: inline-flex; gap: 36px; animation: tickerL 30s linear infinite; }
.ticker--reverse .ticker__rail { animation: tickerR 32s linear infinite; }
.ticker__group {
  display: inline-flex;
  align-items: center;
  gap: 36px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(22px, 3vw, 36px);
  color: var(--text);
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144;
}
.ticker--brand .ticker__group { color: var(--brand); font-style: normal; font-weight: 800; }
.ticker__sep { font-size: 0.6em; opacity: 0.4; }
@keyframes tickerL { to { transform: translateX(-50%); } }
@keyframes tickerR { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* =================================================
   STATS BAR
   ================================================= */
.stats-bar {
  border-bottom: 1px solid var(--line);
  background: var(--ink);
}
.stats-bar__inner {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 64px;
  padding-bottom: 64px;
}
.stat-big {
  padding: 0 56px;
  border-left: 1px solid var(--line);
  text-align: center;
}
.stat-big:first-child { border-left: 0; }
.stat-big__value { display: inline-flex; align-items: baseline; gap: 2px; }
.stat-big__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(48px, 6vw, 84px);
  color: var(--brand);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-variation-settings: "opsz" 144;
}
.stat-big__value em { font-size: 0.55em; font-style: italic; opacity: 0.7; margin-left: 4px; }
.stat-big__label {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-3);
}
@media (max-width: 820px) {
  .stats-bar__inner { flex-wrap: wrap; gap: 32px 0; }
  .stat-big { padding: 0 24px; flex: 0 1 50%; }
}
@media (max-width: 520px) {
  .stat-big { flex: 0 1 100%; border-left: 0; }
}

/* =================================================
   SECTIONS
   ================================================= */
.section { padding: 130px 0; position: relative; }
.section__head { max-width: 760px; margin-bottom: 72px; }
.section__head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section__head--center .eyebrow,
.section__head--center .section__num { margin-left: auto; margin-right: auto; display: inline-flex; }
.section__title {
  font-size: clamp(38px, 5.5vw, 80px);
  font-weight: 800;
  margin-top: 18px;
  letter-spacing: -0.035em;
  line-height: 0.95;
}
.section__sub { margin-top: 22px; color: var(--text-2); font-size: 17px; max-width: 580px; line-height: 1.55; }
.section__head--center .section__sub { margin-left: auto; margin-right: auto; }

/* =================================================
   SERVICES
   ================================================= */
.services__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (min-width: 1024px) { .services__grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px) { .services__grid { grid-template-columns: 1fr; } }

.svc-card {
  position: relative;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: 30px 26px 28px;
  transition: border-color 0.4s, background 0.4s, transform 0.6s var(--ease);
  overflow: hidden;
  will-change: transform;
  transform-style: preserve-3d;
}
.svc-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 117, 31, 0.16), transparent 60%);
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}
.svc-card:hover { border-color: rgba(255, 117, 31, 0.35); background: var(--ink-3); }
.svc-card:hover::before { opacity: 1; }

.svc-card--featured {
  background: linear-gradient(180deg, rgba(255, 117, 31, 0.1), transparent 50%), var(--ink-2);
  border-color: rgba(255, 117, 31, 0.3);
}
.svc-card__badge {
  position: absolute;
  top: 20px; right: 20px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 9px;
  background: var(--brand);
  color: var(--ink);
  border-radius: var(--r-full);
}
.svc-card__num {
  position: absolute;
  top: 22px;
  right: 22px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--text-3);
  font-weight: 700;
}
.svc-card--featured .svc-card__num { display: none; }
.svc-card__icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: rgba(255, 117, 31, 0.1);
  border: 1px solid rgba(255, 117, 31, 0.25);
  border-radius: 14px;
  color: var(--brand);
  margin-bottom: 26px;
  transition: transform 0.5s var(--ease);
}
.svc-card:hover .svc-card__icon { transform: rotate(-8deg) scale(1.05); }
.svc-card__icon svg { width: 22px; height: 22px; }
.svc-card h3 { font-size: 22px; margin-bottom: 12px; font-family: var(--font-display); font-weight: 700; }
.svc-card p { color: var(--text-2); font-size: 14px; line-height: 1.55; }
.svc-card__list { list-style: none; margin-top: 20px; display: flex; flex-direction: column; gap: 9px; padding-top: 18px; border-top: 1px solid var(--line); }
.svc-card__list li { font-size: 13px; color: var(--text-2); display: flex; align-items: center; gap: 9px; }
.svc-card__list li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--brand); }

/* =================================================
   MORPH: scattered tiles -> unified dashboard
   ================================================= */
.morph {
  position: relative;
  /* tall enough for the scroll-pinned scrub to play out */
  height: 320vh;
  background: var(--ink);
}
.morph__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  padding-top: 90px;
}
.morph__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
  z-index: 5;
  position: relative;
}
.morph__head .eyebrow { margin: 0 auto; }
.morph__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.95;
  margin-top: 18px;
}
.morph__title em {
  background: linear-gradient(100deg, var(--brand) 0%, #ffb066 50%, var(--brand) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer-text 6s linear infinite;
}
/* Plain white variant, no shimmer/italic emphasis */
.morph__title--plain,
.morph__title--plain em { color: #ffffff; }
.morph__title--plain em {
  background: none;
  -webkit-text-fill-color: currentColor;
  animation: none;
  font-style: normal;
}
.morph__sub { color: var(--text-2); margin-top: 18px; font-size: 16px; }

.morph__scene {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 1600px;
  transform-style: preserve-3d;
}

/* Scattered video tiles */
.morph-tile {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220px;
  aspect-ratio: 9 / 16;
  margin: -195px 0 0 -110px;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--c1), var(--c2));
  box-shadow:
    0 40px 90px -20px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: var(--font-mono);
  color: #fff;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.morph-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 38%, rgba(0, 0, 0, 0.32), transparent 70%);
  pointer-events: none;
  z-index: 2;
}
.morph-tile > * { position: relative; z-index: 3; }

/* Video layer, sits behind chips/caption. Inline iframes load at parse time. */
.morph-tile__media {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  border-radius: inherit;
  background: linear-gradient(160deg, var(--c1), var(--c2));
  background-size: cover;
  background-position: center;
}
.morph-tile__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  pointer-events: none;
  background: #000;
}
/* Landscape 16:9 source inside 9:16 tile, scale to cover, crop sides */
.morph-tile--landscape .morph-tile__media iframe {
  width: 316%; /* (16/9) / (9/16) ≈ 3.16 */
  height: 100%;
}
/* Subtle darken so caption + chips stay readable on busy video frames */
.morph-tile__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.35) 0%, transparent 28%, transparent 60%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
  z-index: 2;
}

.morph-tile__live {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 7px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: var(--r-full);
  align-self: flex-start;
  font-size: 9px;
}
.morph-tile__dot { width: 5px; height: 5px; background: #ff3b3b; border-radius: 50%; animation: blink 1.4s ease-in-out infinite; }
.morph-tile__metric {
  position: absolute;
  top: 14px; right: 14px;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: var(--r-full);
  font-size: 10px;
  letter-spacing: 0.04em;
}
.morph-tile__play { align-self: center; width: 44px; height: 44px; color: #fff; opacity: 0.92; }
.morph-tile__caption {
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-transform: none;
  font-family: var(--font-body);
  font-weight: 600;
}
.morph-tile__stats { display: flex; justify-content: space-between; font-size: 10px; opacity: 0.72; }

/* Featured (center) tile is larger */
.morph-tile--featured { width: 280px; margin: -248px 0 0 -140px; }

/* Initial scattered positions, each tile placed via class data-mt + JS transforms.
   These CSS defaults serve as fallbacks if JS is disabled. */
[data-mt="0"] { transform: translate(-340px, -120px) rotate(-12deg); }
[data-mt="1"] { transform: translate(340px, -100px) rotate(10deg); }
[data-mt="2"] { transform: translate(0, 0) rotate(0deg) scale(1.05); z-index: 2; }
[data-mt="3"] { transform: translate(-380px, 140px) rotate(-6deg); }
[data-mt="4"] { transform: translate(380px, 130px) rotate(8deg); }
[data-mt="5"] { transform: translate(-60px, 200px) rotate(-3deg); z-index: 1; }

/* Merged app frame (final state), Campaigns dashboard, Whop-style dark */
.morph-app {
  position: absolute;
  top: 50%; left: 50%;
  width: min(1060px, 94vw);
  background: #0f0f12;
  color: #e7e4dd;
  border-radius: 18px;
  box-shadow:
    0 50px 120px -20px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  overflow: hidden;
  opacity: 0;
  will-change: opacity, transform;
  font-family: var(--font-body);
  padding: 26px 24px 22px;
}

.morph-app__head { margin-bottom: 14px; }
.morph-app__head h3 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  color: #ffffff;
  font-variation-settings: "opsz" 144;
  letter-spacing: -0.025em;
  line-height: 1;
}
.morph-app__head p {
  margin-top: 8px;
  font-size: 13px;
  color: #8b8782;
  letter-spacing: 0;
}

.morph-app__search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-full);
  color: #6e6963;
  font-size: 12px;
  margin-bottom: 16px;
  min-width: 200px;
}
.morph-app__search-icon { color: #6e6963; }

.morph-app__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

/* Campaign card */
.camp {
  background: #16161a;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 10px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
.camp__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.camp__thumb {
  display: block;
  width: 44px; height: 36px;
  border-radius: 6px;
  flex-shrink: 0;
}
.camp__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.camp__status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
}
.camp__status i {
  width: 6px; height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.camp__status--clip { color: var(--brand); }
.camp__status--clip i { background: var(--brand); box-shadow: 0 0 8px var(--brand); }
.camp__status--ugc { color: #3b82f6; }
.camp__status--ugc i { background: #3b82f6; box-shadow: 0 0 8px #3b82f6; }
.camp__time { font-size: 10px; color: #6e6963; }

.camp__title {
  font-size: 12.5px;
  font-weight: 700;
  color: #f0ede5;
  line-height: 1.25;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.camp__brand {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.camp__brand-name {
  font-size: 11px;
  color: #b8b3aa;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.camp__brand-name svg { color: var(--brand); }
.camp__icons { display: inline-flex; gap: 6px; color: #6e6963; }
.camp__icons svg { color: #6e6963; }

.camp__finance { display: flex; flex-direction: column; gap: 3px; }
.camp__finance-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.camp__label {
  font-size: 10px;
  color: #6e6963;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  letter-spacing: 0;
}
.camp__label svg { color: #6e6963; }
.camp__amount { font-size: 11px; color: #8b8782; }
.camp__amount strong { font-size: 14px; color: #ffffff; font-weight: 700; display: inline-block; margin-right: 2px; }
.camp__amount em { font-style: normal; color: #6e6963; font-size: 11px; }
.camp__cpm { text-align: right; font-size: 11px; }
.camp__cpm strong { font-size: 14px; color: #ffffff; font-weight: 700; display: block; line-height: 1; }
.camp__cpm em { font-style: normal; color: #6e6963; font-size: 10px; }

.camp__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.04);
}
.camp__bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--brand), #ffb066);
  border-radius: 0 2px 2px 0;
}

/* Responsive collapse */
@media (max-width: 980px) {
  .morph-app__grid { grid-template-columns: repeat(2, 1fr); }
  .morph-app { width: min(700px, 94vw); padding: 22px 18px 18px; }
}
@media (max-width: 600px) {
  .morph-app__grid { grid-template-columns: 1fr; gap: 8px; }
  .morph-app { width: min(380px, 94vw); padding: 18px 14px 14px; }
  .morph-app__head h3 { font-size: 22px; }
  .morph-app__head p { font-size: 12px; }
  .morph-app__grid .camp:nth-child(n+5) { display: none; } /* show top 4 on mobile to fit viewport */
}

@media (max-width: 720px) {
  /* T-216b FINAL (operator: "exactly the way it looks, just static!"):
     the morph is rendered as a FROZEN composition on mobile. The zoom
     in/out transition itself was the perceived delay, so there is NO
     animation of any kind: the scattered clip collage shows exactly as it
     looks, then the Campaign-examples panel sits statically below it, and
     one continuous native scroll carries through to the next section.
     script.js skips ALL morph GSAP on mobile, so these styles are the
     whole story (no inline styles fighting them). */
  .morph { height: auto; }
  .morph__stage {
    position: relative;
    height: auto;
    display: block;
    overflow: visible;
    padding: 72px 0 8px;
  }
  /* The scatter anchors to a fixed 270px line inside the scene's top zone
     (NOT top:50% - the app below grows the scene, which would drag a
     percentage center down into it), and the in-flow dashboard clears the
     ~565px the scatter occupies via margin-top. */
  /* padding-top (not margin-top on the app) because a first in-flow
     child's top margin COLLAPSES through the scene, dumping the panel at
     the scene's top where the tiles sit - hit exactly that. Absolute tiles
     position against the padding box, so top:270px lands them inside this
     580px band and the in-flow panel starts below it. */
  .morph__scene { position: relative; height: auto; padding-top: 580px; perspective: none; }
  .morph-tile { top: 270px; width: 130px; margin: -116px 0 0 -65px; box-shadow: none; }
  .morph-tile--featured { width: 160px; margin: -142px 0 0 -80px; }
  [data-mt="0"] { transform: translate(-130px, -90px) rotate(-12deg); }
  [data-mt="1"] { transform: translate(130px, -80px) rotate(10deg); }
  [data-mt="3"] { transform: translate(-150px, 110px) rotate(-6deg); }
  [data-mt="4"] { transform: translate(150px, 100px) rotate(8deg); }
  [data-mt="5"] { transform: translate(-40px, 170px) rotate(-3deg); }
  .morph-app {
    position: relative;
    top: auto;
    left: auto;
    margin: 0 auto;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .morph-app__row { grid-template-columns: 44px 1fr auto; gap: 12px; padding: 12px 16px; }
  .morph-app__platform, .morph-app__status { display: none; }
  .morph-app__thumb { width: 44px; height: 28px; }
  .morph-app__title { font-size: 13px; }
  .morph-app__head { padding: 16px 16px 12px; }
  .morph-app__tabs span { padding: 5px 9px; font-size: 10px; }
}

/* =================================================
   HOW IT WORKS, sticky scroll
   ================================================= */
.how__stage {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 60px;
  align-items: start;
}
@media (max-width: 900px) { .how__stage { grid-template-columns: 1fr; gap: 30px; } }

.how__progress { position: sticky; top: 120px; }
.how__progress-line {
  position: relative;
  width: 2px;
  height: 320px;
  background: var(--line);
  margin: 0 auto 24px;
}
.how__progress-fill {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(var(--brand), #ffd60a);
  transition: height 0.4s var(--ease);
}
.how__progress-dots { display: flex; justify-content: center; flex-direction: column; align-items: center; gap: 30px; }
.how__progress-dot {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--text-3);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: grid;
  place-items: center;
  transition: all 0.4s var(--ease);
  background: var(--ink-2);
}
.how__progress-dot.is-active {
  color: var(--ink);
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(255, 117, 31, 0.18);
}
@media (max-width: 900px) { .how__progress { display: none; } }

.how__steps { display: flex; flex-direction: column; gap: 18px; }
.how-step {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: 36px 40px;
  transition: border-color 0.4s, background 0.4s;
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 36px;
  align-items: start;
}
.how-step.is-active { border-color: rgba(255, 117, 31, 0.35); background: var(--ink-3); }
.how-step__num {
  grid-row: 1 / span 3;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 64px;
  font-weight: 800;
  color: var(--brand);
  line-height: 1;
  font-variation-settings: "opsz" 144;
  letter-spacing: -0.04em;
}
.how-step h3 { grid-column: 2; font-size: 28px; margin: 0 0 14px; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; }
.how-step p { grid-column: 2; color: var(--text-2); font-size: 16px; line-height: 1.55; max-width: 780px; margin: 0; }
.how-step__bullets { grid-column: 2; list-style: none; margin: 18px 0 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.how-step__bullets li {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5px 11px;
  border-radius: var(--r-full);
  background: rgba(255, 117, 31, 0.08);
  color: var(--brand);
  border: 1px solid rgba(255, 117, 31, 0.15);
}
@media (max-width: 600px) { .how-step { grid-template-columns: 1fr; padding: 28px 22px; } .how-step__num { font-size: 40px; } }

/* =================================================
   HOW IT WORKS, segmented (For brands / For Creators)  [T-235]
   Sticky lead column + swappable timeline, clipping.net pattern,
   Elnez tokens. Video phones reuse .clip-tile__media so they ride
   the existing desktop-hydration + mobile-poster + force-play paths.
   ================================================= */
.hiw .container { max-width: 1280px; }
.hiw__grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 980px) { .hiw__grid { grid-template-columns: 1fr; gap: 40px; } }

/* ---- left lead column ---- */
.hiw__aside { position: sticky; top: 108px; }
@media (max-width: 980px) { .hiw__aside { position: static; top: auto; } }
.hiw__aside .section__num { margin-bottom: 14px; }
.hiw__aside .eyebrow { margin-bottom: 22px; }

.hiw__toggle {
  position: relative;
  display: inline-flex;
  padding: 5px;
  gap: 4px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  margin-bottom: 28px;
}
.hiw__toggle-thumb {
  position: absolute;
  top: 5px; left: 5px;
  width: calc(50% - 5px);
  height: calc(100% - 10px);
  border-radius: var(--r-full);
  background: var(--brand);
  box-shadow: 0 8px 20px -8px var(--brand-glow);
  transition: transform 0.45s var(--ease);
  z-index: 0;
}
.hiw__toggle[data-active="creators"] .hiw__toggle-thumb { transform: translateX(100%); }
.hiw__toggle-btn {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 9px 22px;
  border-radius: var(--r-full);
  color: var(--text-2);
  transition: color 0.35s var(--ease);
  white-space: nowrap;
}
.hiw__toggle-btn.is-active { color: var(--ink); }
.hiw__toggle-btn:not(.is-active):hover { color: var(--text); }

.hiw__lead[hidden] { display: none; }
.hiw__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(38px, 4.4vw, 60px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 0 0 22px;
}
.hiw__title em { font-style: italic; color: var(--brand); }
.hiw__sub { color: var(--text-2); font-size: 16px; line-height: 1.6; margin: 0 0 28px; max-width: 40ch; }
.hiw__cta { display: inline-flex; }

/* ---- right timeline ---- */
.hiw__panels { min-width: 0; }
.hiw__timeline { position: relative; display: flex; flex-direction: column; gap: 30px; }
.hiw__timeline[hidden] { display: none; }
.hiw__timeline::before {
  content: '';
  position: absolute;
  left: 23px;
  top: 24px; bottom: 24px;
  width: 2px;
  background: linear-gradient(var(--line-strong), var(--line) 60%, transparent);
}
@media (max-width: 560px) { .hiw__timeline::before { left: 19px; } }

.hiw-step {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 26px;
  align-items: start;
}
@media (max-width: 560px) { .hiw-step { grid-template-columns: 40px 1fr; gap: 16px; } }

.hiw-step__rail { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.hiw-step__node {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: grid; place-items: center;
  background: var(--ink-2);
  border: 1px solid var(--line-strong);
  color: var(--brand);
  position: relative;
  z-index: 1;
  transition: border-color 0.4s, background 0.4s, transform 0.4s;
}
@media (max-width: 560px) { .hiw-step__node { width: 40px; height: 40px; border-radius: 12px; } .hiw-step__node svg { width: 17px; height: 17px; } }
.hiw-step.is-in .hiw-step__node { border-color: rgba(255, 117, 31, 0.4); background: var(--ink-3); }
.hiw-step__idx { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--text-3); }

.hiw-step__body { min-width: 0; padding-top: 2px; }
.hiw-step__label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--brand);
  background: rgba(255, 117, 31, 0.09);
  border: 1px solid rgba(255, 117, 31, 0.16);
  padding: 4px 10px;
  border-radius: var(--r-full);
  margin-bottom: 12px;
}
.hiw-step__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2.5vw, 30px); letter-spacing: -0.02em; margin: 0 0 10px; }
.hiw-step__desc { color: var(--text-2); font-size: 15px; line-height: 1.6; margin: 0; max-width: 52ch; }
.hiw-step__visual { margin-top: 20px; }

/* brand feature cards (moved from the platform section), atop the For brands timeline */
.hiw-features {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin-bottom: 10px;
}
.hiw-feature {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: 18px 18px 20px;
  box-shadow: 0 24px 60px -40px rgba(0, 0, 0, 0.7);
}
.hiw-feature--featured {
  border-color: rgba(255, 117, 31, 0.30);
  background: linear-gradient(180deg, rgba(255, 117, 31, 0.09), transparent 60%), var(--ink-2);
}
.hiw-feature__ic {
  width: 38px; height: 38px;
  border-radius: 11px;
  display: grid; place-items: center;
  background: rgba(255, 117, 31, 0.12);
  color: var(--brand);
  margin-bottom: 13px;
}
.hiw-feature__ic svg { width: 20px; height: 20px; }
.hiw-feature__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--brand);
  margin-bottom: 8px;
}
.hiw-feature__title { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; margin: 0 0 9px; }
.hiw-feature__desc { color: var(--text-2); font-size: 12.5px; line-height: 1.55; margin: 0 0 13px; }
.hiw-feature__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.hiw-feature__list li { position: relative; padding-left: 15px; font-size: 12px; color: var(--text-2); line-height: 1.4; }
.hiw-feature__list li::before { content: ''; position: absolute; left: 0; top: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--brand); }

/* ---- mockup cards ---- */
.mk {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: 18px 20px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text);
  box-shadow: 0 24px 60px -34px rgba(0, 0, 0, 0.7);
}
.mk__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.mk__head-title { font-weight: 600; font-size: 14px; letter-spacing: -0.01em; }
.mk__muted { color: var(--text-3); font-size: 12px; font-family: var(--font-mono); letter-spacing: 0.02em; }
.mk__foot { margin-top: 14px; color: var(--text-3); font-size: 12px; line-height: 1.5; }
.mk__foot--center { text-align: center; margin-top: 18px; }

.mk__pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600;
  padding: 5px 11px; border-radius: var(--r-full);
  white-space: nowrap;
}
.mk__pill--ok { color: #37c26a; background: rgba(55, 194, 106, 0.12); }
.mk__pill--pending { color: #e6a017; background: rgba(230, 160, 23, 0.13); }
.mk__pill--add { color: var(--brand); background: rgba(255, 117, 31, 0.1); border: 1px solid rgba(255, 117, 31, 0.22); }
.mk__pill--pay { color: var(--ink); background: var(--brand); }

/* brief / verified rows */
.mk__rows { list-style: none; margin: 0; padding: 0; }
.mk__rows li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.mk__rows li:first-child { border-top: 0; }
.mk__k { display: inline-flex; align-items: center; gap: 9px; color: var(--text-2); }
.mk__check { color: #37c26a; flex: none; }
.mk__v { font-weight: 600; text-align: right; }

/* live campaign clip rows */
.mk__live { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13px; }
.mk__dot { width: 7px; height: 7px; border-radius: 50%; background: #37c26a; box-shadow: 0 0 0 0 rgba(55, 194, 106, 0.5); animation: hiw-pulse 1.8s ease-out infinite; }
@keyframes hiw-pulse { 0% { box-shadow: 0 0 0 0 rgba(55, 194, 106, 0.5); } 100% { box-shadow: 0 0 0 7px rgba(55, 194, 106, 0); } }
.mk__clips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.mk__clips li { display: grid; grid-template-columns: 66px 1fr 44px; align-items: center; gap: 12px; }
.mk__clip-n { color: var(--text-2); font-family: var(--font-mono); font-size: 11.5px; }
.mk__clip-v { text-align: right; font-weight: 700; font-size: 13px; }
.mk__bar { height: 7px; border-radius: var(--r-full); background: var(--ink-3); overflow: hidden; }
.mk__bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand), var(--brand-soft)); }

/* platforms */
.mk--platforms { display: flex; flex-wrap: wrap; gap: 10px; }
.mk__plat { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r-2); background: var(--ink-3); border: 1px solid var(--line); font-weight: 600; font-size: 13px; }
.mk__plat-ico { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--ink); border: 1px solid var(--line-strong); font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0; color: var(--text); }
.mk__plat-ico--tt { background: #111; }
.mk__plat-ico--ig { background: linear-gradient(135deg, #f9ce34, #ee2a7b 55%, #6228d7); border-color: transparent; color: #fff; }
.mk__plat-tag { font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); font-style: normal; }

/* dashboard */
.mk__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.mk__stat { background: var(--ink-3); border: 1px solid var(--line); border-radius: var(--r-2); padding: 12px; }
.mk__stat-n { display: block; font-weight: 800; font-size: 18px; letter-spacing: -0.02em; }
.mk__stat-l { display: block; color: var(--text-3); font-size: 11px; margin-top: 3px; }
.mk__budget { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 8px; }
.mk__budget-l { color: var(--text-3); }
.mk__budget-v { font-weight: 600; font-family: var(--font-mono); }
.mk__budget-bar { display: block; height: 8px; border-radius: var(--r-full); background: var(--ink-3); overflow: hidden; }
.mk__budget-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-soft)); border-radius: inherit; }

/* training lessons */
.mk__lessons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mk__lessons li { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: var(--r-2); background: var(--ink-3); border: 1px solid var(--line); color: var(--text-2); font-weight: 500; }
.mk__lessons li.is-active { border-color: rgba(255, 117, 31, 0.4); background: rgba(255, 117, 31, 0.07); color: var(--text); }
.mk__lesson-n { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--ink); border: 1px solid var(--line-strong); font-family: var(--font-mono); font-size: 12px; font-weight: 700; flex: none; }
.mk__lessons li.is-active .mk__lesson-n { background: var(--brand); color: var(--ink); border-color: var(--brand); }

/* accounts */
.mk__rows--accts li { padding: 12px 0; }
.mk__acct { display: inline-flex; align-items: center; gap: 12px; }
.mk__acct-name { display: flex; flex-direction: column; font-weight: 600; }
.mk__acct-name i { font-style: normal; font-size: 11px; color: var(--text-3); font-weight: 500; }

/* payout method */
.mk__method { display: flex; align-items: center; gap: 13px; padding: 14px; border-radius: var(--r-2); background: var(--ink-3); border: 1px solid var(--line); }
.mk__method-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 117, 31, 0.12); color: var(--brand); flex: none; }
.mk__method-copy { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.mk__method-copy b { font-size: 14px; }
.mk__method-copy i { font-style: normal; font-size: 11.5px; color: var(--text-3); margin-top: 2px; }

/* campaigns */
.mk--campaigns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 420px) { .mk--campaigns { grid-template-columns: 1fr; } }
.mk-camp { border: 1px solid var(--line); border-radius: var(--r-2); overflow: hidden; background: var(--ink-3); }
.mk-camp__cover { position: relative; aspect-ratio: 16 / 8; display: grid; place-items: center; }
.mk-camp__cover--brand { background: radial-gradient(120% 120% at 30% 20%, rgba(255, 117, 31, 0.18), var(--ink) 70%); }
.mk-camp__cover--dark { background: linear-gradient(160deg, #17171a, #0e0e10); }
.mk-camp__logo { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--brand); letter-spacing: -0.02em; }
.mk-camp__logo i { color: var(--text); font-style: normal; }
.mk-camp__logo--sm { font-family: var(--font-body); font-size: 16px; color: var(--text); }
.mk-camp__cpm { position: absolute; top: 8px; right: 8px; font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.06em; color: #ffd60a; background: rgba(0, 0, 0, 0.55); padding: 3px 6px; border-radius: 6px; }
.mk-camp__meta { padding: 12px; display: flex; flex-direction: column; gap: 7px; }
.mk-camp__name { font-weight: 700; font-size: 13px; letter-spacing: -0.01em; }
.mk-camp__plats { display: flex; gap: 5px; }
.mk-camp__plats i { font-style: normal; font-family: var(--font-mono); font-size: 9px; font-weight: 700; padding: 3px 6px; border-radius: 5px; background: var(--ink); border: 1px solid var(--line-strong); color: var(--text-2); }
.mk-camp__paid { color: var(--text-3); font-size: 11.5px; margin-top: 2px; }
.mk-camp__paid b { color: var(--text); }
.mk-camp__bar { height: 5px; border-radius: var(--r-full); background: var(--ink); overflow: hidden; }
.mk-camp__bar i { display: block; height: 100%; background: var(--brand); border-radius: inherit; }

/* real product screenshots (creator steps) */
.hiw-shot {
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  overflow: hidden;
  background: var(--ink-2);
  box-shadow: 0 24px 60px -34px rgba(0, 0, 0, 0.7);
  line-height: 0;
}
.hiw-shot img { display: block; width: 100%; height: auto; }

/* submit clips (video phones) */
.mk--submit { background: transparent; border: 0; box-shadow: none; padding: 0; }
.hiw-clips { display: flex; justify-content: center; gap: 14px; padding: 6px 0; }
.hiw-clip {
  position: relative;
  width: 122px;
  aspect-ratio: 9 / 16;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 50px -22px rgba(0, 0, 0, 0.7);
  flex: none;
}
.hiw-clip--a { transform: rotate(-5deg) translateY(6px); }
.hiw-clip--b { transform: translateY(-8px); z-index: 2; }
.hiw-clip--c { transform: rotate(5deg) translateY(6px); }
.hiw-clip__badge {
  position: absolute; top: 8px; left: 8px; z-index: 3;
  width: 22px; height: 22px; border-radius: 7px;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px);
  font-family: var(--font-mono); font-size: 9px; font-weight: 700; color: #fff;
}
.hiw-clip__track {
  position: absolute; bottom: 8px; left: 8px; right: 8px; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 4px 8px; border-radius: var(--r-full);
  background: rgba(0, 0, 0, 0.58); backdrop-filter: blur(4px);
  font-family: var(--font-mono); font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.1em; color: #fff;
}
.hiw-clip__track i { width: 5px; height: 5px; border-radius: 50%; background: #37c26a; animation: blink 1.4s ease-in-out infinite; }
@media (max-width: 560px) { .hiw-clip { width: 96px; } .hiw-clips { gap: 8px; } }

/* cash out */
.mk--cash { padding: 16px 18px; }
.mk__cash-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.mk__cash-avail { display: flex; flex-direction: column; }
.mk__cash-avail i { font-style: normal; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); }
.mk__cash-avail b { font-size: 24px; font-weight: 800; color: var(--brand); letter-spacing: -0.02em; }
.mk__cash-table { border: 1px solid var(--line); border-radius: var(--r-2); overflow: hidden; }
.mk__cash-row { display: grid; grid-template-columns: 1fr 1fr 1.2fr auto; align-items: center; gap: 8px; padding: 10px 13px; font-size: 12px; }
.mk__cash-row--h { background: var(--ink-3); color: var(--text-3); font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
.mk__cash-row:not(.mk__cash-row--h) { border-top: 1px solid var(--line); font-weight: 600; }
.mk__cash-net { color: var(--brand); font-family: var(--font-mono); }
.mk__cash-row .mk__pill { justify-self: end; }

@media (prefers-reduced-motion: reduce) {
  .hiw__toggle-thumb { transition: none; }
  .mk__dot { animation: none; }
}

/* =================================================
   CALCULATOR
   ================================================= */
.calc__shell {
  background: linear-gradient(180deg, var(--ink-2), var(--ink));
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  padding: 60px;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  column-gap: 80px;
  row-gap: 80px;
  position: relative;
  overflow: hidden;
}
.calc__shell > .calc__cta { grid-column: 1 / -1; justify-self: center; }
.calc__shell::before {
  content: '';
  position: absolute;
  top: -20%; right: -20%;
  width: 60%;
  height: 80%;
  background: radial-gradient(circle, rgba(255, 117, 31, 0.18), transparent 70%);
  pointer-events: none;
}
.calc__head { position: relative; z-index: 1; }
.calc__title {
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 800;
  margin-top: 18px;
  letter-spacing: -0.03em;
  line-height: 0.95;
}
.calc__title em {
  background: linear-gradient(100deg, var(--brand) 0%, #ffb066 50%, var(--brand) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer-text 6s linear infinite;
}
.calc__head p { color: var(--text-2); margin-top: 18px; max-width: 380px; }

.calc__body { position: relative; z-index: 1; }

/* New: multi-slider blocks (creatorxchange-style) */
.calc-slider { margin-bottom: 22px; }
.calc-slider__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
  gap: 12px;
}
.calc-slider__head label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.calc-slider__value {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  padding: 4px 10px;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
}

.calc__slider {
  -webkit-appearance: none; appearance: none;
  width: 100%;
  height: 6px;
  background: var(--ink-3);
  border-radius: var(--r-full);
  outline: none;
}
.calc__slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px;
  background: var(--brand);
  border-radius: 50%;
  cursor: grab;
  box-shadow: 0 0 0 6px rgba(255, 117, 31, 0.2), 0 6px 16px -2px var(--brand-glow);
  border: 3px solid var(--ink);
  transition: transform 0.2s;
}
.calc__slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.1); }
.calc__slider::-moz-range-thumb {
  width: 26px; height: 26px;
  background: var(--brand);
  border-radius: 50%;
  cursor: grab;
  border: 3px solid var(--ink);
}

.calc__results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; margin-bottom: 30px; }
.calc__results--big { grid-template-columns: 1fr; gap: 14px; }
.calc__result {
  padding: 22px 20px;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
}
.calc__result--xl {
  padding: 26px 26px;
  background: linear-gradient(180deg, rgba(255, 117, 31, 0.08), var(--ink));
  border-color: rgba(255, 117, 31, 0.22);
}
.calc__result-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; }
.calc__result-num { font-family: var(--font-display); font-weight: 800; font-size: 30px; color: var(--text); line-height: 1; letter-spacing: -0.025em; font-variation-settings: "opsz" 144; }
.calc__result--xl .calc__result-num { font-size: 44px; color: var(--brand); }
.calc__result-note { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--text-3); margin-top: 10px; }
.calc__result-suffix {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--text-2);
  letter-spacing: 0.01em;
  margin-top: 8px;
}

@media (max-width: 900px) {
  .calc__shell { grid-template-columns: 1fr; gap: 40px; padding: 36px 26px; }
  .calc__results { grid-template-columns: 1fr; }
  .calc__result--xl .calc__result-num { font-size: 36px; }
}

/* =================================================
   WHY US, editorial numbered list
   ================================================= */
.why-list {
  border-top: 1px solid var(--line);
}
.why-item {
  display: grid;
  /* was 140px 1fr 180px; the 140px numeral column is retired with the
     ghost numbers (v7), copy gets the full width again (v8) */
  grid-template-columns: 1fr 180px;
  gap: 48px;
  padding: 40px 28px;
  border-bottom: 1px solid var(--line);
  align-items: center;
  position: relative;
  transition: background 0.5s var(--ease), padding-left 0.5s var(--ease);
}
.why-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--brand);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.5s var(--ease);
}
.why-item:hover {
  background: linear-gradient(90deg, rgba(255, 117, 31, 0.06), transparent 60%);
  padding-left: 44px;
}
.why-item:hover::before { transform: scaleY(1); }

.why-item__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(72px, 9vw, 120px);
  color: var(--brand);
  line-height: 0.85;
  letter-spacing: -0.05em;
  font-variation-settings: "opsz" 144;
}

.why-item__copy h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 30px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 14px;
  font-variation-settings: "opsz" 144;
  color: var(--text);
}
.why-item__copy p {
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.55;
  max-width: 680px;
}

.why-item__stat {
  text-align: right;
  border-left: 1px solid var(--line);
  padding-left: 28px;
}
.why-item__stat-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(36px, 4vw, 52px);
  color: var(--text);
  letter-spacing: -0.03em;
  line-height: 0.95;
  font-variation-settings: "opsz" 144;
}
.why-item__stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 8px;
}

@media (max-width: 860px) {
  .why-item {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 16px 24px;
    padding: 28px 16px;
  }
  .why-item:hover { padding-left: 24px; }
  .why-item__num { font-size: 64px; grid-row: 1 / 3; }
  .why-item__copy { grid-column: 2; grid-row: 1; }
  .why-item__stat {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
    border-left: 0;
    padding-left: 0;
    display: flex;
    align-items: baseline;
    gap: 12px;
  }
  .why-item__stat-num { font-size: 28px; }
  .why-item__stat-label { margin-top: 0; }
}

/* =================================================
   CASES
   ================================================= */
.cases__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 980px) { .cases__grid { grid-template-columns: 1fr; } }

/* Single-card variant: center the lone case study and let it grow */
.cases__grid--single {
  grid-template-columns: minmax(0, 760px);
  justify-content: center;
}
.cases__grid--single .case { padding: 44px 40px; }
.cases__grid--single .case__title { font-size: 30px; }
.cases__grid--single .case__body { font-size: 16px; }
.cases__grid--single .case__stats { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 600px) {
  .cases__grid--single .case { padding: 30px 22px; }
  .cases__grid--single .case__title { font-size: 22px; }
  .cases__grid--single .case__stats { grid-template-columns: 1fr; gap: 12px; }
}

.case {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: 34px 30px;
  transition: border-color 0.4s, background 0.4s, transform 0.6s var(--ease);
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  overflow: hidden;
  will-change: transform;
  transform-style: preserve-3d;
}
.case::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 117, 31, 0.13), transparent 60%);
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}
.case:hover { border-color: rgba(255, 117, 31, 0.3); background: var(--ink-3); }
.case:hover::before { opacity: 1; }
.case__meta { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 11px; }
.case__tag { color: var(--brand); text-transform: uppercase; letter-spacing: 0.12em; }
.case__time { color: var(--text-3); letter-spacing: 0.08em; }
.case__title { font-size: 24px; line-height: 1.15; font-family: var(--font-display); font-weight: 700; }
.case__body { color: var(--text-2); font-size: 14px; line-height: 1.55; }
.case__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: auto; padding-top: 22px; border-top: 1px solid var(--line); }
.case__stat-num { font-family: var(--font-display); font-weight: 800; font-size: 26px; color: var(--brand); line-height: 1; letter-spacing: -0.02em; font-variation-settings: "opsz" 144; }
.case__stat-label { font-family: var(--font-mono); font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 6px; }

/* =================================================
   ABOUT
   ================================================= */
.about__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: center; }
@media (max-width: 920px) { .about__grid { grid-template-columns: 1fr; gap: 40px; } }
.about__copy p { font-size: 17px; color: var(--text-2); margin-top: 22px; line-height: 1.6; max-width: 560px; }
.about__cta { margin-top: 36px; }
.about__pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 26px; }
.about__pill {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 7px 13px;
  border-radius: var(--r-full);
  border: 1px solid var(--line-strong);
  color: var(--text-2);
}

/* concentric ring graphic */
.about__visual { position: relative; width: 100%; aspect-ratio: 1 / 1; max-width: 460px; margin-left: auto; display: grid; place-items: center; }
.about__rings { position: absolute; inset: 0; }
.about__ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px dashed var(--line-strong);
  animation: spin 60s linear infinite;
}
.about__ring--1 { inset: 0%; animation-duration: 80s; }
.about__ring--2 { inset: 12%; animation-duration: 50s; animation-direction: reverse; border-style: solid; border-color: var(--line); }
.about__ring--3 { inset: 26%; animation-duration: 40s; border-style: dotted; border-width: 2px; border-color: rgba(255, 117, 31, 0.3); }
@keyframes spin { to { transform: rotate(360deg); } }

.about__rings { position: absolute; inset: 0; animation: spin 80s linear infinite; }
.about__dot {
  --r: 200px;
  position: absolute;
  width: 18px; height: 18px;
  border-radius: 50%;
  box-shadow: 0 0 18px currentColor;
  top: 50%; left: 50%;
  margin: -9px 0 0 -9px;
}
@media (max-width: 600px) { .about__dot { --r: 130px; } }
.about__dot--a { background: #ff3b3b; color: #ff3b3b; transform: translate(0, calc(var(--r) * -1)); }
.about__dot--b { background: var(--brand); color: var(--brand); transform: translate(calc(var(--r) * 0.707), calc(var(--r) * -0.707)); }
.about__dot--c { background: #ffd60a; color: #ffd60a; transform: translate(var(--r), 0); }
.about__dot--d { background: #4ade80; color: #4ade80; transform: translate(calc(var(--r) * 0.707), calc(var(--r) * 0.707)); }
.about__dot--e { background: #06b6d4; color: #06b6d4; transform: translate(0, var(--r)); }
.about__dot--f { background: #3b82f6; color: #3b82f6; transform: translate(calc(var(--r) * -0.707), calc(var(--r) * 0.707)); }
.about__dot--g { background: #a855f7; color: #a855f7; transform: translate(calc(var(--r) * -1), 0); }
.about__dot--h { background: #ec4899; color: #ec4899; transform: translate(calc(var(--r) * -0.707), calc(var(--r) * -0.707)); }

.about__icon {
  width: 38%;
  height: auto;
  filter: drop-shadow(0 20px 50px var(--brand-glow));
  animation: float-icon 6s ease-in-out infinite;
  position: relative;
  z-index: 2;
}
@keyframes float-icon { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* =================================================
   CTA BAND
   ================================================= */
.cta-band {
  position: relative;
  padding: 140px 0;
  overflow: hidden;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, var(--ink) 0%, #1a110a 100%);
}
.cta-band__glow { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(255, 117, 31, 0.22) 0%, transparent 50%); pointer-events: none; }
.cta-band__inner { position: relative; text-align: center; max-width: 880px; margin: 0 auto; padding: 0 var(--pad-x); }
.cta-band__inner .eyebrow { margin: 0 auto; }
.cta-band__title { font-size: clamp(40px, 5.5vw, 78px); font-weight: 800; letter-spacing: -0.035em; line-height: 0.95; margin-top: 18px; }
.cta-band__title em {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}
.cta-band p { font-size: 17px; color: var(--text-2); margin-top: 22px; max-width: 580px; margin-left: auto; margin-right: auto; }
.cta-band .btn { margin-top: 40px; }

/* =================================================
   FOOTER
   ================================================= */
.footer { background: var(--ink-2); border-top: 1px solid var(--line); padding: 80px 0 28px; }
.footer__grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 56px; border-bottom: 1px solid var(--line); }
.footer__brand img { height: 46px; width: auto; margin-bottom: 20px; }
.footer__brand p { color: var(--text-2); font-size: 14px; max-width: 380px; }
.footer__col { display: flex; flex-direction: column; gap: 12px; }
.footer__col h4 { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 8px; color: var(--text-3); font-weight: 500; }
.footer__col a { color: var(--text-2); font-size: 14px; transition: color 0.2s; position: relative; overflow: hidden; display: inline-block; }
.footer__col a span { display: inline-block; transition: transform 0.4s var(--ease); }
.footer__col a:hover { color: var(--brand); }
.footer__col a:hover span { transform: translateX(4px); }

.footer__bottom {
  display: flex;
  justify-content: space-between;
  padding-top: 28px;
  font-size: 12px;
  color: var(--text-3);
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
}
.footer__mono { color: var(--brand); opacity: 0.7; }
@media (max-width: 720px) { .footer__grid { grid-template-columns: 1fr; gap: 36px; } .footer__bottom { flex-direction: column; gap: 8px; text-align: center; } }

/* =================================================
   REVEALS
   ================================================= */
:where(html.js) [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
[data-reveal].is-in { opacity: 1; transform: translateY(0); }

/* T-259 failsafe: if the reveal script never runs (JS off, blocked, or errored),
   everything must still be readable. The head bootstrap adds .js immediately and
   .reveal-now after 2.5s; script.js disarms the timer when it runs. */
html:not(.js) [data-reveal], html.reveal-now [data-reveal] { opacity: 1; transform: none; }
html:not(.js) .word, html.reveal-now .word { transform: none; }

/* T-259 failsafe: if the reveal script never runs (JS off, blocked, or errored),
   everything must still be readable. The head bootstrap adds .js immediately and
   .reveal-now after 2.5s; script.js disarms the timer when it runs. */
html:not(.js) [data-reveal], html.reveal-now [data-reveal] { opacity: 1; transform: none; }
html:not(.js) .word, html.reveal-now .word { transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  [data-reveal], .word { opacity: 1; transform: none; }
  .cursor { display: none; }
  body { cursor: auto; }
  button { cursor: pointer; }
}

/* =================================================
   BOOK PAGE
   ================================================= */
.book-hero {
  padding: 150px 0 50px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.book-hero__inner { position: relative; z-index: 1; max-width: 780px; margin: 0 auto; padding: 0 var(--pad-x); }
.book-hero__inner .eyebrow { margin: 0 auto; }
.book-hero__title { font-size: clamp(40px, 5.5vw, 72px); font-weight: 800; letter-spacing: -0.035em; line-height: 0.95; margin-top: 18px; font-family: var(--font-display); }
.book-hero__title em {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}
.book-hero__sub { margin-top: 22px; color: var(--text-2); font-size: 17px; max-width: 580px; margin-left: auto; margin-right: auto; }
.book-hero__bullets { display: flex; justify-content: center; flex-wrap: wrap; gap: 22px; margin-top: 32px; font-size: 14px; color: var(--text-2); font-family: var(--font-mono); }
.book-hero__bullet { display: inline-flex; align-items: center; gap: 8px; }
.book-hero__bullet svg { color: var(--brand); flex-shrink: 0; }

.book-embed { padding: 50px 0 120px; }
.book-embed__inner { max-width: 1100px; margin: 0 auto; padding: 0 var(--pad-x); }
.book-embed__frame {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: 16px;
  min-height: 760px;
  overflow: hidden;
}
#my-cal-inline-nolona-clips-intro-call { width: 100%; min-height: 720px; border-radius: var(--r-2); overflow: hidden; }
@media (max-width: 720px) { .book-embed__frame { padding: 6px; min-height: 820px; } #my-cal-inline-nolona-clips-intro-call { min-height: 800px; } }

/* =================================================
   FUND CAMPAIGN PAGE (/fund) , Plisio crypto checkout
   Editorial dark card. Scoped via .fund-* classes; zero impact on landing.
   ================================================= */

/* Restore the native cursor on /fund , index.html runs a custom-cursor JS
   that needs `cursor: none` globally, but /fund doesn't load that script.
   Without this override the page would have no visible mouse pointer. */
.fund-body, .fund-body * { cursor: auto; }
.fund-body button,
.fund-body a,
.fund-body label,
.fund-body input[type="range"] { cursor: pointer; }
.fund-body input[type="text"],
.fund-body input[type="email"],
.fund-body input[type="number"] { cursor: text; }

.fund-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 40px;
  background: rgba(10, 8, 12, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.fund-nav .nav__logo img { display: block; }
.fund-nav__back {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
  text-decoration: none;
  transition: color 0.2s ease;
}
.fund-nav__back:hover { color: var(--brand); }

/* Test-mode banner , only visible when ?test=1 is in the URL. */
.test-banner {
  position: sticky;
  top: 0;
  z-index: 49;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 12px 22px;
  background: linear-gradient(180deg, rgba(255, 214, 10, 0.16), rgba(255, 214, 10, 0.08));
  border-bottom: 1px solid rgba(255, 214, 10, 0.35);
  color: #ffd60a;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.test-banner[hidden] { display: none; }
.test-banner__tag {
  background: #ffd60a;
  color: #0c0a08;
  padding: 5px 11px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.18em;
  font-size: 10px;
}
.test-banner__msg { color: #f7e58a; text-transform: none; letter-spacing: 0.04em; font-size: 12px; }
.test-banner__msg code {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 214, 10, 0.25);
  padding: 2px 7px;
  border-radius: 4px;
  font-family: var(--font-mono);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.04em;
}

.fund-page { padding: 60px 0 120px; }

/* Onboarding page (/onboarding) — single Typeform embed, centered. The
   Typeform loader rewrites .onboarding-shell into an iframe that sets its
   own height per form step, so we do NOT force a min-height (that produced
   a giant empty rectangle below the welcome card). Instead we use flex to
   center the iframe both axes; it grows naturally as the form progresses. */
.onboarding-page {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 24px 60px;
  min-height: calc(100vh - 96px);
}
.onboarding-shell {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
}
.onboarding-shell iframe { display: block; width: 100% !important; }
@media (max-width: 820px) {
  .onboarding-page { padding: 16px 12px 40px; min-height: calc(100vh - 80px); }
}
.fund-page .calc__shell--fund { row-gap: 0; }

/* ---------- Drop-down checkout panel ---------- */
.fund-panel {
  position: relative;
  margin-top: 32px;
  background: linear-gradient(180deg, var(--ink-2), var(--ink));
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  padding: 56px clamp(28px, 5vw, 72px);
  overflow: hidden;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease-out, ease), transform 0.5s var(--ease-out, ease);
}
.fund-panel[hidden] { display: none; }
.fund-panel.is-in { opacity: 1; transform: translateY(0); }

/* Aurora glow blob behind content , same vocabulary as cta-band__glow */
.fund-panel__aurora {
  position: absolute;
  top: -30%;
  right: -10%;
  width: 60%;
  height: 80%;
  background: radial-gradient(circle, rgba(255, 117, 31, 0.18), transparent 70%);
  pointer-events: none;
  filter: blur(8px);
}
.fund-panel__inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
  display: grid;
  gap: 36px;
}

.fund-panel__head { text-align: center; }
.fund-panel__head .eyebrow { margin: 0 auto 14px; }
.fund-panel__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 4.5vw, 52px);
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: var(--text);
}
.fund-panel__title em {
  font-style: italic;
  color: var(--brand);
  font-variation-settings: "opsz" 144;
}
.fund-panel__sub {
  color: var(--text-2);
  margin: 16px auto 0;
  font-size: 16px;
  line-height: 1.55;
  max-width: 520px;
}

/* ---------- Live summary tile (mirrors the budget + projected reach) ---------- */
.fund-summary {
  background: rgba(255, 117, 31, 0.04);
  border: 1px solid rgba(255, 117, 31, 0.22);
  border-radius: var(--r-3);
  padding: 24px 28px;
  display: grid;
  gap: 14px;
}
.fund-summary__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.fund-summary__rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 117, 31, 0.22), transparent);
}
.fund-summary__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.fund-summary__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 3.4vw, 36px);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text);
  font-variation-settings: "opsz" 144;
}
.fund-summary__num--brand { color: var(--brand); }
.fund-summary__suffix {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  color: var(--text-2);
  letter-spacing: 0;
  margin-left: 6px;
}
.fund-summary__row--minor .fund-summary__label,
.fund-summary__row--minor .fund-summary__num--minor {
  font-size: 13px;
  color: var(--text-2);
}
.fund-summary__num--minor {
  font-family: var(--font-body);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.fund-summary__row--total {
  padding-top: 12px;
  border-top: 1px dashed rgba(255, 117, 31, 0.22);
}
.fund-summary__num--total {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 2.8vw, 30px);
  color: var(--text);
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144;
  font-variant-numeric: tabular-nums;
}

/* ---------- Form ---------- */
.fund-form { display: grid; gap: 22px; }
.fund-form__row { display: flex; flex-direction: column; gap: 10px; }
.fund-form__label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-2);
}
.fund-form__hint {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text-3);
  font-style: italic;
}
.fund-form__input {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 0 18px;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.fund-form__input:focus-within {
  border-color: var(--brand);
  background: rgba(255, 117, 31, 0.05);
  box-shadow: 0 0 0 4px rgba(255, 117, 31, 0.12);
}
.fund-form__adornment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  margin-right: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  color: var(--brand);
  font-variation-settings: "opsz" 144;
}
.fund-form__adornment--icon { color: var(--text-3); }
.fund-form__input:focus-within .fund-form__adornment--icon { color: var(--brand); }
.fund-form__input input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--text);
  padding: 20px 0;
  width: 100%;
  min-width: 0;
}
.fund-form__input input::placeholder { color: var(--text-3); }
.fund-form__input input[type="number"] {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 144;
}
.fund-form__input input[type="number"]::-webkit-outer-spin-button,
.fund-form__input input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fund-form__input input[type="number"] { -moz-appearance: textfield; }

.fund-form__submit {
  margin-top: 6px;
  justify-self: stretch;
  width: 100%;
}
.fund-form__submit.is-loading { opacity: 0.7; pointer-events: none; }

.fund-form__status {
  min-height: 1.3em;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--text-2);
  margin: 0;
}
.fund-form__status[data-kind="error"]   { color: #ff7676; }
.fund-form__status[data-kind="success"] { color: #4ade80; }
.fund-form__status[data-kind="pending"] { color: var(--brand); }

/* ---------- Trust strip ---------- */
.fund-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding-top: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.fund-trust__sep {
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--line);
}
.fund-trust__coins { letter-spacing: 0.10em; color: var(--text-2); }

/* ---------- Dual payment options ---------- */
.pay-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 36px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.pay-options[hidden] { display: none; }
.pay-options.is-in { opacity: 1; transform: translateY(0); }
/* When the test-campaign card is hidden (UK visitors), the remaining crypto
   card spans the full width instead of being stranded in a half-column. */
.pay-options--single {
  grid-template-columns: 1fr;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.pay-option {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 38px 32px;
  background: linear-gradient(180deg, var(--ink-2), var(--ink));
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  text-align: left;
  font: inherit;
  color: var(--text);
  appearance: none;
  overflow: hidden;
  transition: border-color 0.28s ease, transform 0.28s ease, box-shadow 0.28s ease;
}
.pay-option::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 92% -8%, rgba(255, 117, 31, 0.18), transparent 55%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.pay-option:hover {
  border-color: rgba(255, 117, 31, 0.55);
  transform: translateY(-3px);
  box-shadow: 0 18px 50px rgba(255, 117, 31, 0.10);
}
.pay-option:hover::before { opacity: 1; }
.pay-option:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.pay-option > * { position: relative; z-index: 1; }
.pay-option__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
}
.pay-option__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 2.8vw, 34px);
  letter-spacing: -0.025em;
  line-height: 1.02;
  color: var(--text);
  margin: 6px 0 4px;
  font-variation-settings: "opsz" 144;
}
.pay-option__title em {
  font-style: italic;
  color: var(--brand);
}
.pay-option__sub {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.55;
  margin: 0 0 4px;
}
.pay-option__amount {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.pay-option__amount-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.pay-option__amount-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.025em;
  color: var(--brand);
  font-variation-settings: "opsz" 144;
  line-height: 1;
}
.pay-option__breakdown {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 8px;
}
.pay-option__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.pay-option__row-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.pay-option__row-value {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.pay-option__row--total {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}
.pay-option__row--total .pay-option__row-label { color: var(--text-2); }

.pay-options__regional-note {
  grid-column: 1 / -1;
  margin-top: -8px;
  padding: 14px 18px;
  background: rgba(255, 117, 31, 0.06);
  border: 1px solid rgba(255, 117, 31, 0.2);
  border-radius: var(--r-2);
  color: var(--text-2);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}
.pay-options__regional-note[hidden] { display: none; }
.pay-option__cta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
  margin-top: 8px;
  align-self: flex-start;
}
.pay-option:hover .pay-option__cta {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* ---------- Test-campaign embedded checkout frame ---------- */
.test-frame {
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: 10px;
  overflow: hidden;
}
.test-frame > div { width: 100%; }
#test-checkout { min-height: 260px; }
.test-frame__pay {
  display: flex;
  width: 100%;
  margin: 18px auto 0;
  justify-content: center;
}
.test-frame__pay[disabled] { opacity: 0.55; cursor: not-allowed; }
.test-frame__pay.is-loading { pointer-events: none; }

/* Button spinner + state icons.
   The submit/test-pay buttons hold three glyphs (arrow, check, spinner) and
   we swap which is visible per state. Default = arrow. Loading = spinner.
   Success (is-done) = check. */
.btn .btn__icon-check,
.btn .btn__spinner { display: none; }
.btn.is-loading .btn__icon-arrow,
.btn.is-loading .btn__icon-check { display: none; }
.btn.is-loading .btn__spinner { display: inline-block; }
.btn.is-done .btn__icon-arrow,
.btn.is-done .btn__spinner { display: none; }
.btn.is-done .btn__icon-check { display: inline-block; }
.btn__spinner {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
.test-frame__tos {
  text-align: center;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-3);
  margin: 10px 0 0;
}
.test-frame__fallback {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin: 18px 0 4px;
}
.test-frame__fallback a {
  color: var(--brand);
  text-decoration: none;
  margin-left: 6px;
}
.test-frame__fallback a:hover { text-decoration: underline; }

/* ---------- Plisio iframe drop-in ---------- */
.fund-invoice { margin-top: 8px; }
.fund-invoice[hidden] { display: none; }
.fund-invoice__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}
.fund-invoice__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.fund-invoice__newtab {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--brand);
  text-decoration: none;
}
.fund-invoice__newtab:hover { text-decoration: underline; }
.fund-invoice__frame {
  width: 100%;
  height: 720px;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: #fff;
}

@media (max-width: 820px) {
  .fund-nav { padding: 16px 20px; }
  .fund-page { padding: 28px 0 80px; }
  .fund-panel { padding: 36px 22px; margin-top: 22px; }
  .fund-panel__inner { gap: 28px; }
  .fund-summary { padding: 20px 22px; }
  .fund-summary__row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .fund-trust { flex-wrap: wrap; gap: 8px; }
  .fund-invoice__frame { height: 640px; }
  .pay-options { grid-template-columns: 1fr; gap: 14px; margin-top: 24px; }
  .pay-option { padding: 28px 22px; }
}


/* Operator request (T-016): the section index numbers are retired. */
.section__num { display: none !important; }

/* Operator request (T-017): all decorative ghost numerals retired. */
.svc-card__num, .how-step__num, .why-item__num, .eyebrow__issue { display: none !important; }

/* T-153: below 540px the four remaining nav pills (logo, Sign in,
   Sign up, Book a call) squashed and the Sign in label wrapped to two
   lines. Tighter pills, no wrapping, CTA arrow icon dropped. */
@media (max-width: 540px) {
  .nav { padding: 6px 8px 6px 12px; }
  .nav__logo img { height: 26px; }
  .nav__ctas { gap: 6px; }
  .nav__auth, .nav__cta { white-space: nowrap; padding: 8px 12px; font-size: 12px; }
  .nav__cta .btn__icon { display: none; }
}