/* =========================================================================
   HOMEPAGE HERO — experiment variant modifiers
   =========================================================================
   Layers on top of the .hero-v3 rules in page-homepage.css. Every class here
   is selectable from an experiment variant payload (layout / theme /
   className); nothing here applies unless a variant asks for it, so the
   control render is byte-identical to the pre-experiment hero.

   Classes are whitelisted in partials/hero-experiment.ejs — adding a new
   layout means adding it BOTH here and to that whitelist.
   ========================================================================= */

/* ── Eyebrow ───────────────────────────────────────────────────────────── */
.hero-x-eyebrow {
  margin: 0 0 clamp(0.7rem, 1.4vw, 1rem);
  color: var(--cyan-500, #00d4ff);
  font-family: var(--font-display, inherit);
  font-weight: 600;
  font-size: clamp(0.78rem, 1.1vw, 0.92rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Tick bullets (replace the subhead paragraph) ──────────────────────── */
.hero-x-bullets {
  margin: 0 0 clamp(1.7rem, 3vw, 2.35rem);
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.7rem;
}
.hero-x-bullets li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.7rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(0.98rem, 1.35vw, 1.12rem);
  line-height: 1.5;
}
.hero-x-bullets svg {
  margin-top: 0.28em;
  color: var(--cyan-500, #00d4ff);
  flex: none;
}

/* ── Price chip above the CTA row ──────────────────────────────────────── */
.hero-x-price-chip {
  display: inline-block;
  margin: 0 0 clamp(1rem, 1.8vw, 1.35rem);
  padding: 0.4em 1em;
  border: 1px solid rgba(0, 212, 255, 0.32);
  border-radius: 999px;
  background: rgba(0, 212, 255, 0.09);
  color: #ffffff;
  font-size: clamp(0.84rem, 1.1vw, 0.95rem);
  font-weight: 600;
}

/* ── Secondary (ghost) CTA ─────────────────────────────────────────────── */
/* Carries .btn, so layout, padding, weight and --radius-lg come from there —
   only the outline treatment and the btn-large sizing are added here, keeping
   it the same height as the primary it sits beside. */
.hero-x-cta-secondary {
  padding: 1rem 2rem;
  font-size: 1.125rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  color: #ffffff;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.hero-x-cta-secondary:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.07);
}

/* ── Live-demo CTA ─────────────────────────────────────────────────────── */
/* Present on every arm, so it must read as a genuine second action without
   competing with the primary: cyan outline and cyan label give it more weight
   than the plain ghost secondary, while the transparent fill keeps the trial
   button unambiguously first. Matches the primary's height via the same
   btn-large padding. */
.hero-x-cta-demo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 1rem 1.75rem;
  font-size: 1.06rem;
  border: 1px solid rgba(0, 212, 255, 0.45);
  background: rgba(0, 212, 255, 0.06);
  color: var(--cyan-500, #00d4ff);
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.hero-x-cta-demo:hover,
.hero-x-cta-demo:focus-visible {
  border-color: rgba(0, 212, 255, 0.85);
  background: rgba(0, 212, 255, 0.14);
  color: #ffffff;
}
.hero-x-cta-demo svg { flex: none; }

/* Tertiary: the arm brought its own secondary button, so the demo drops to
   link weight and keeps the action row to two buttons. */
.hero-x-cta-demo--tertiary {
  padding: 1rem 0.4rem;
  border-color: transparent;
  background: transparent;
  text-decoration: underline;
  text-decoration-color: rgba(0, 212, 255, 0.4);
  text-underline-offset: 0.32em;
}
.hero-x-cta-demo--tertiary:hover,
.hero-x-cta-demo--tertiary:focus-visible {
  border-color: transparent;
  background: transparent;
  color: #ffffff;
  text-decoration-color: currentColor;
}

/* Variants that lead with the app download (badgesPrimary + QR) already have a
   crowded action row; the demo is the least important thing in it there, so it
   drops to a quieter weight rather than being removed. */
.hero-x--badges-primary .hero-x-cta-demo {
  padding: 0.8rem 1.3rem;
  font-size: 0.98rem;
  background: transparent;
}

@media (max-width: 560px) {
  .hero-x .hero-x-cta-demo { justify-content: center; }
}

.hero-x .hero-v3-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
}

/* ── Trust chips (replace the single fine-print line) ──────────────────── */
.hero-x-trust-chips {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.6rem;
}
.hero-x-trust-chips li {
  padding: 0.34em 0.85em;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(0.74rem, 1vw, 0.83rem);
  line-height: 1.5;
}

/* ── Numbered "start today" steps ──────────────────────────────────────── */
/* For variants whose argument is that the first job can happen today: the
   list IS the proof, so the numerals are the loudest thing in the block. */
.hero-x-steps {
  counter-reset: hero-step;
  margin: 0 0 clamp(1.6rem, 3vw, 2.2rem);
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.85rem;
}
.hero-x-steps li {
  counter-increment: hero-step;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.85rem;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(0.98rem, 1.35vw, 1.1rem);
  line-height: 1.45;
}
.hero-x-steps li::before {
  content: counter(hero-step);
  display: grid;
  place-items: center;
  width: 1.85em;
  height: 1.85em;
  border: 1px solid rgba(0, 212, 255, 0.45);
  border-radius: 999px;
  background: rgba(0, 212, 255, 0.12);
  color: var(--cyan-500, #00d4ff);
  font-family: var(--font-display, inherit);
  font-weight: 700;
  font-size: 0.9em;
  line-height: 1;
}

/* ── Desktop → phone QR bridge ─────────────────────────────────────────── */
/* A phone cannot scan its own screen, and phone user-agents are served /m,
   so this is desktop-only by design — not a responsive afterthought. */
.hero-x-qr {
  display: none;
  padding: 0.7rem 1.05rem 0.7rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 1rem; /* rounded.xl — DESIGN.md card surface */
  background: rgba(255, 255, 255, 0.04);
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.hero-x-qr:hover {
  border-color: rgba(0, 212, 255, 0.45);
  background: rgba(0, 212, 255, 0.06);
}
.hero-x-qr-code {
  display: block;
  width: 76px;
  height: 76px;
  padding: 5px;
  border-radius: 0.5rem; /* rounded.md */
  background: #ffffff;
  flex: none;
}
.hero-x-qr-code svg { display: block; width: 100%; height: 100%; }
.hero-x-qr-text { display: block; max-width: 15ch; }
.hero-x-qr-text strong {
  display: block;
  color: #ffffff;
  font-family: var(--font-display, inherit);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
}
.hero-x-qr-text span {
  display: block;
  margin-top: 0.2rem;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.78rem;
  line-height: 1.35;
}
@media (min-width: 981px) {
  /* Narrow enough to sit ON the action row beside the primary button rather
     than wrapping under it — below the CTA it lands past the fold on a laptop,
     which defeats the point of a bridge. */
  .hero-x-qr {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
  }
}

/* ── App badges promoted to a primary action ───────────────────────────── */
/* When the pitch is "download it and start today", the store badges are the
   call to action, not a footnote — so they sit under the CTA row, at button
   scale, with the cyan edge that marks an action everywhere else on the site. */
.hero-x-badges-inline {
  margin-top: clamp(0.9rem, 1.8vw, 1.2rem);
  margin-bottom: clamp(1.1rem, 2vw, 1.5rem);
}
.hero-x--badges-primary .hero-x-badges-inline .app-badge {
  padding: 0.7rem 1.15rem;
  border-color: rgba(0, 212, 255, 0.4);
  background: rgba(0, 212, 255, 0.08);
}
.hero-x--badges-primary .hero-x-badges-inline .app-badge:hover {
  border-color: rgba(0, 212, 255, 0.75);
  background: rgba(0, 212, 255, 0.14);
}

/* ── Static screenshot instead of the animated deck ────────────────────── */
.hero-x-static {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1rem; /* rounded.xl — DESIGN.md screenshot-frame */
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 44px 90px -26px rgba(2, 8, 18, 0.78),
    0 0 72px rgba(0, 212, 255, 0.12);
}

/* ── media: phones — the product, as the audience will actually hold it ──── */
/* Three captures fanned around a raised centre. The captions carry the whole
   argument in three words each (quote it / book it / get paid), so the visual
   reads even with the sound off — this is the variant whose entire claim is
   that the business fits on the phone in your pocket. */
.hero-x-phones {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 1.4vw, 1.1rem);
  width: 100%;
  padding: clamp(0.5rem, 1.5vw, 1.25rem) 0;
}
.hero-x-phone {
  margin: 0;
  width: clamp(120px, 15vw, 196px);
  flex: none;
  text-align: center;
}
.hero-x-phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1rem; /* rounded.xl — DESIGN.md screenshot-frame */
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: var(--navy-970, #06111f);
  box-shadow:
    0 32px 60px -22px rgba(2, 8, 18, 0.8),
    0 0 48px rgba(0, 212, 255, 0.1);
}
.hero-x-phone figcaption {
  margin-top: 0.75rem;
  color: var(--cyan-500, #00d4ff);
  font-family: var(--font-display, inherit);
  font-size: clamp(0.7rem, 0.95vw, 0.82rem);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
/* The centre phone leads; the outer two sit back and turn slightly away. */
.hero-x-phone--1 {
  width: clamp(136px, 17vw, 224px);
  z-index: 2;
}
.hero-x-phone--0,
.hero-x-phone--2 { z-index: 1; }
.hero-x-phone--0 img { transform: rotate(-4deg) translateY(1.25rem); }
.hero-x-phone--2 img { transform: rotate(4deg)  translateY(1.25rem); }
.hero-x-phone--0 figcaption { transform: translateY(1.25rem); }
.hero-x-phone--2 figcaption { transform: translateY(1.25rem); }
/* The phone fan is portrait and self-contained, so the visual column no
   longer needs the wider share the landscape deck was given. Scoped to the
   desktop breakpoint — below it every hero collapses to one column, and this
   rule outranks that collapse on specificity if left unscoped. */
@media (min-width: 981px) {
  .hero-x--media-phones .hero-v3-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-x-phone img,
  .hero-x-phone figcaption { transform: none; }
}

/* =========================================================================
   LAYOUTS
   ========================================================================= */

/* split — the control: copy left, visual right. Inherits page-homepage.css. */

/* centered — copy centred above a full-width visual. Reads as a classic
   product launch page; trades the side-by-side density for a bigger headline. */
.hero-x--centered .hero-v3-layout {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  gap: clamp(2.4rem, 4vw, 3.6rem);
}
.hero-x--centered .hero-v3-text { max-width: 780px; }
.hero-x--centered .hero-v3-title { font-size: clamp(2.7rem, 6.6vw, 5rem); }
.hero-x--centered .hero-v3-actions { justify-content: center; }
.hero-x--centered .hero-x-trust-chips,
.hero-x--centered .hero-x-bullets { justify-content: center; }
.hero-x--centered .hero-x-bullets { display: inline-grid; text-align: left; }
.hero-x--centered .hero-v3-visual { width: min(920px, 100%); }
.hero-x--centered .hero-v3-badges { justify-content: center; }

/* media-first — visual leads on desktop (copy moves to the right column).
   Tests whether showing the product before the claim lifts engagement. */
.hero-x--media-first .hero-v3-layout {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
}
.hero-x--media-first .hero-v3-text { order: 2; }
.hero-x--media-first .hero-v3-visual { order: 1; }

/* stacked — copy then visual in a single narrow column, left aligned.
   The most text-forward treatment; useful for long-form headlines. */
.hero-x--stacked .hero-v3-layout {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.2rem, 4vw, 3.2rem);
}
.hero-x--stacked .hero-v3-text { max-width: 760px; }
.hero-x--stacked .hero-v3-visual { width: min(880px, 100%); }

/* media: none — copy-only hero, centred and tall. Strips the product shot
   entirely to isolate how much of the hero's work the words are doing. */
.hero-x--media-none .hero-v3-layout {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}
.hero-x--media-none .hero-v3-text {
  max-width: 820px;
  padding: clamp(1.5rem, 5vw, 4rem) 0;
}
.hero-x--media-none .hero-v3-title { font-size: clamp(3rem, 7.4vw, 5.6rem); }
.hero-x--media-none .hero-v3-actions { justify-content: center; }
.hero-x--media-none .hero-x-trust-chips { justify-content: center; }
.hero-x--media-none .hero-v3-badges { justify-content: center; }

/* =========================================================================
   THEMES
   ========================================================================= */

/* contrast — kills the ambient glow and flattens the background for a
   harder, higher-contrast read. */
.hero-x--contrast .hero-v3-glow { display: none; }
.hero-x--contrast .hero-v3-sub,
.hero-x--contrast .hero-x-bullets li { color: rgba(255, 255, 255, 0.92); }
.hero-x--contrast .hero-v3-trust { color: rgba(255, 255, 255, 0.7); }

/* soft — widens and warms the glow so the visual floats more. */
.hero-x--soft .hero-v3-glow {
  opacity: 0.85;
  filter: blur(30px);
  transform: scale(1.25);
}

/* =========================================================================
   VARIANT-SPECIFIC HOOKS (payload `className`)
   ========================================================================= */

/* v-underline — hand-drawn emphasis under the accent phrase. */
.v-underline .hero-v3-accent {
  position: relative;
  white-space: nowrap;
}
.v-underline .hero-v3-accent::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.12em;
  height: 0.09em;
  border-radius: 999px;
  background: var(--cyan-500, #00d4ff);
  opacity: 0.55;
}

/* v-tight — pulls the subhead in for a denser, punchier block. */
.v-tight .hero-v3-title { margin-bottom: 0.7rem; }
.v-tight .hero-v3-sub { max-width: 46ch; }

@media (max-width: 980px) {
  /* The copy column centres at this breakpoint (page-homepage.css), so the
     left-aligned list components have to centre as a block while keeping
     their own text ranged left — otherwise the numerals drift. */
  .hero-x-steps { justify-content: center; }
  .hero-x-steps li { text-align: left; }
  .hero-x-badges-inline { justify-content: center; }
  .hero-x-phones { flex-wrap: wrap; }

  /* Every layout collapses to a single column on tablet down; the desktop
     ordering tweaks must not survive the collapse or the copy ends up
     below the fold on phones. */
  .hero-x--media-first .hero-v3-layout,
  .hero-x--centered .hero-v3-layout,
  .hero-x--stacked .hero-v3-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero-x--media-first .hero-v3-text { order: 1; }
  .hero-x--media-first .hero-v3-visual { order: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-x--soft .hero-v3-glow { transform: none; }
}