/* ============================================================
   SPARK MARKETING — offer funnel design system
   Ethereal glass on deep black, molten-gold accent.
   ============================================================ */

:root {
  --bg: #050505;
  --bg-raise: #0b0a08;
  --ink: #f7f4ec;
  --muted: rgba(247, 244, 236, 0.6);
  --faint: rgba(247, 244, 236, 0.38);
  --gold: #e8b33c;
  --gold-hi: #f6d27a;
  --ember: #c4841d;
  --danger: #e86a4a;
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.14);
  --glass: rgba(255, 255, 255, 0.032);
  --glass-hi: rgba(255, 255, 255, 0.06);
  --font-display: "Space Grotesk", "Avenir Next", sans-serif;
  --font-body: "Plus Jakarta Sans", "Avenir Next", sans-serif;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --shell-pad: 0.5rem;
  --r-shell: 1.75rem;                       /* outer card */
  --r-core: calc(var(--r-shell) - var(--shell-pad));   /* concentric inner */
  --gold-grad: linear-gradient(118deg, var(--ember) 0%, var(--gold) 42%, var(--gold-hi) 72%, var(--gold) 100%);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100dvh;
}

::selection { background: rgba(232, 179, 60, 0.28); color: var(--ink); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

img, video { max-width: 100%; display: block; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

a { color: inherit; }

/* ---------- ambient background ---------- */

.atmos { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }

.atmos::before {              /* dot grid */
  content: "";
  position: absolute; inset: -1px;
  background-image: radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1.4px);
  background-size: 34px 34px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 8%, #000 0%, transparent 68%);
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 8%, #000 0%, transparent 68%);
}

.atmos .orb { position: absolute; border-radius: 50%; filter: blur(90px); will-change: transform; }

.atmos .orb-a {
  width: 62vw; height: 62vw; max-width: 900px; max-height: 900px;
  left: 50%; top: -34vw;
  background: radial-gradient(circle, rgba(232, 179, 60, 0.17) 0%, rgba(196, 132, 29, 0.07) 45%, transparent 70%);
  animation: drift-a 26s var(--ease) infinite alternate;
}

.atmos .orb-b {
  width: 44vw; height: 44vw; max-width: 640px; max-height: 640px;
  left: -18vw; top: 42vh;
  background: radial-gradient(circle, rgba(196, 106, 29, 0.1) 0%, transparent 66%);
  animation: drift-b 34s var(--ease) infinite alternate;
}

.atmos .orb-c {
  width: 38vw; height: 38vw; max-width: 560px; max-height: 560px;
  right: -16vw; top: 16vh;
  background: radial-gradient(circle, rgba(246, 210, 122, 0.09) 0%, transparent 64%);
  animation: drift-a 40s var(--ease) infinite alternate-reverse;
}

@keyframes drift-a { from { transform: translate3d(-50%, 0, 0) scale(1); } to { transform: translate3d(-44%, 5%, 0) scale(1.08); } }
@keyframes drift-b { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(6vw, -6vh, 0) scale(1.12); } }

.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* ---------- layout primitives ---------- */

.wrap { width: min(1120px, 92vw); margin-inline: auto; }
.wrap-tight { width: min(760px, 92vw); margin-inline: auto; }

.section { padding-block: clamp(4.5rem, 9vw, 7.5rem); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.42rem 0.95rem;
  border-radius: 999px;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-hi);
  background: rgba(232, 179, 60, 0.07);
  box-shadow: inset 0 0 0 1px rgba(232, 179, 60, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.eyebrow .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px 1px rgba(232, 179, 60, 0.8);
  animation: pulse 2.4s var(--ease) infinite;
}

@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.78); } }

.gold-text {
  background: var(--gold-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- entrances ---------- */

/* .boot — CSS-only entrance for above-the-fold (no JS dependency, LCP-safe) */
.boot { animation: boot-in 0.9s var(--ease) both; animation-delay: var(--bd, 0ms); }

@keyframes boot-in {
  from { opacity: 0; transform: translateY(26px); filter: blur(7px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* .rv — JS scroll reveal for below-the-fold */
.rv { opacity: 0; transform: translateY(26px); filter: blur(7px); }

.rv.in {
  opacity: 1; transform: translateY(0); filter: blur(0);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), filter 0.9s var(--ease);
  transition-delay: var(--rv-delay, 0ms);
}

/* ---------- header ---------- */

.top {
  padding-top: clamp(1.2rem, 2.6vw, 1.9rem);
  display: flex; flex-direction: column; align-items: center; gap: 0.8rem;
}

.top .logo { height: clamp(38px, 5vw, 52px); width: auto; filter: drop-shadow(0 4px 22px rgba(232, 179, 60, 0.28)); }

.stars-row { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.8rem; color: var(--muted); font-weight: 600; }

.stars { display: inline-flex; gap: 2px; }

.stars svg { width: 13px; height: 13px; fill: var(--gold); filter: drop-shadow(0 0 4px rgba(232, 179, 60, 0.5)); }

/* ---------- hero ---------- */

.hero { text-align: center; padding-top: clamp(1.3rem, 2.8vw, 2.1rem); }

.hero h1 {
  font-size: clamp(2.35rem, 6vw, 4.35rem);
  margin: 0.95rem auto 0;
  max-width: 21ch;
}

.hero .sub {
  margin: 1.05rem auto 0;
  max-width: 56ch;
  font-size: clamp(1rem, 1.7vw, 1.17rem);
  color: var(--muted);
  font-weight: 500;
}

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

.hero-trust {
  margin-top: 1.5rem;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem 1.5rem;
  font-size: 0.8rem; font-weight: 600; color: var(--faint);
}

.hero-trust span { display: inline-flex; align-items: center; gap: 0.45rem; }

.hero-trust svg { width: 13px; height: 13px; stroke: var(--gold); }

/* ---------- the form card (double bezel) ---------- */

.card-shell {
  margin: clamp(1.7rem, 3.6vw, 2.5rem) auto 0;
  width: min(620px, 100%);
  padding: var(--shell-pad);
  border-radius: var(--r-shell);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018) 30%, rgba(255, 255, 255, 0.028));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 30px 80px -20px rgba(0, 0, 0, 0.8),
    0 0 120px -30px rgba(232, 179, 60, 0.14);
  position: relative;
}

.card-shell::before {          /* top ridge glow */
  content: "";
  position: absolute; top: -1px; left: 18%; right: 18%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(246, 210, 122, 0.55), transparent);
}

.card-core {
  border-radius: var(--r-core);
  background: linear-gradient(180deg, #0d0c09 0%, #080807 100%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05);
  padding: clamp(1.5rem, 3.6vw, 2.3rem);
  overflow: hidden;
  position: relative;
}

/* progress */

.progress { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.7rem; }

.progress .bars { display: flex; gap: 6px; flex: 1; }

.progress .bar { height: 3px; flex: 1; border-radius: 999px; background: rgba(255, 255, 255, 0.09); position: relative; overflow: hidden; }

.progress .bar::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: var(--gold-grad);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.7s var(--ease);
}

.progress .bar.done::after { transform: scaleX(1); }

.progress .count {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em;
  color: var(--faint); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* steps */

.steps { position: relative; }

.step { display: none; }

.step.active { display: block; animation: step-in 0.55s var(--ease) both; }

.step.active.back { animation-name: step-in-back; }

@keyframes step-in { from { opacity: 0; transform: translateX(26px); filter: blur(5px); } to { opacity: 1; transform: translateX(0); filter: blur(0); } }
@keyframes step-in-back { from { opacity: 0; transform: translateX(-26px); filter: blur(5px); } to { opacity: 1; transform: translateX(0); filter: blur(0); } }

.step h2 { font-size: clamp(1.28rem, 2.6vw, 1.62rem); letter-spacing: -0.015em; }

.step .hint { margin-top: 0.4rem; font-size: 0.86rem; color: var(--muted); }

.q-label {
  display: block;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.55rem;
}

/* option pills */

.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-top: 1.35rem; }

.opts.cols-3 { grid-template-columns: 1fr 1fr 1fr; }

/* A yes/no pair gets taller pills than a five-option grid — there is nothing
   else on the step, so the two answers should feel like the whole question. */
.opts-2 .opt { min-height: 62px; font-size: 1.02rem; }

/* Revealed when they say they have one; the step does not advance until we
   know which site is theirs. */
.site-domain { margin-top: 1.15rem; }
.site-domain[hidden] { display: none; }
.site-domain .btn { width: 100%; margin-top: 1rem; }
.site-domain .field { animation: site-domain-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both; }

@keyframes site-domain-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .site-domain .field { animation: none; }
}

.opt {
  --r: 0.95rem;
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 56px;
  padding: 0.85rem 1rem;
  border-radius: var(--r);
  background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--hairline), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  font-weight: 700; font-size: 0.95rem; letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease), transform 0.35s var(--ease), color 0.35s var(--ease);
  text-align: center;
}

.opt:hover { background: var(--glass-hi); box-shadow: inset 0 0 0 1px var(--hairline-strong), inset 0 1px 0 rgba(255, 255, 255, 0.07); transform: translateY(-1px); }

.opt:active { transform: scale(0.96); }

.opt.picked {
  color: #191204;
  background: var(--gold-grad);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 8px 26px -8px rgba(232, 179, 60, 0.55);
}

.opt .tick {
  position: absolute; top: 8px; right: 8px;
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.22);
  display: grid; place-items: center;
  opacity: 0; transform: scale(0.25); filter: blur(4px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), filter 0.3s var(--ease);
}

.opt .tick svg { width: 9px; height: 9px; stroke: #fff; stroke-width: 3; fill: none; }

.opt.picked .tick { opacity: 1; transform: scale(1); filter: blur(0); }

/* inputs */

.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; margin-top: 1.4rem; }

.field { grid-column: span 2; }

.field.half { grid-column: span 1; }

.field label {
  display: block;
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 0.42rem;
}

.field label em { font-style: normal; color: var(--gold); }

.field input {
  width: 100%;
  min-height: 52px;
  padding: 0.8rem 1rem;
  border: 0; outline: 0;
  border-radius: 0.9rem;
  background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--hairline), inset 0 1px 2px rgba(0, 0, 0, 0.35);
  color: var(--ink);
  font: inherit; font-weight: 600; font-size: 0.98rem;
  transition: box-shadow 0.3s var(--ease), background 0.3s var(--ease);
  -webkit-appearance: none; appearance: none;
}

.field input::placeholder { color: rgba(247, 244, 236, 0.26); font-weight: 500; }

.field input:focus {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(232, 179, 60, 0.6), 0 0 0 4px rgba(232, 179, 60, 0.1);
}

.field.error input { box-shadow: inset 0 0 0 1px rgba(232, 106, 74, 0.65), 0 0 0 4px rgba(232, 106, 74, 0.08); }

.field .err {
  display: none;
  margin-top: 0.36rem; font-size: 0.74rem; font-weight: 600; color: var(--danger);
}

.field.error .err { display: block; }

/* CTA buttons (button-in-button) */

.cta-row { display: flex; align-items: center; gap: 0.9rem; margin-top: 1.6rem; }

.btn-back {
  width: 46px; height: 46px; flex: none;
  border-radius: 50%;
  background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--hairline);
  display: grid; place-items: center;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.btn-back:hover { background: var(--glass-hi); box-shadow: inset 0 0 0 1px var(--hairline-strong); }

.btn-back:active { transform: scale(0.96); }

.btn-back svg { width: 15px; height: 15px; stroke: var(--muted); stroke-width: 2.4; fill: none; }

.btn {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.85rem;
  min-height: 58px;
  padding: 0.55rem 0.55rem 0.55rem 1.6rem;
  border-radius: 999px;
  background: var(--gold-grad);
  background-size: 160% 100%; background-position: 0% 0;
  color: #191204;
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.02rem; letter-spacing: 0.01em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 14px 40px -10px rgba(232, 179, 60, 0.5);
  transition: background-position 0.6s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.btn:hover { background-position: 60% 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 18px 50px -12px rgba(232, 179, 60, 0.62); }

.btn:active { transform: scale(0.96); }

.btn .cap {
  width: 44px; height: 44px; flex: none;
  border-radius: 50%;
  background: rgba(12, 9, 2, 0.82);
  display: grid; place-items: center;
  transition: transform 0.4s var(--ease);
}

.btn:hover .cap { transform: translate(3px, -1px) scale(1.05); }

.btn .cap svg { width: 16px; height: 16px; stroke: var(--gold-hi); stroke-width: 2.4; fill: none; }

.btn[disabled] { opacity: 0.6; pointer-events: none; }

.btn.ghost {
  background: var(--glass);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
}

.btn.ghost .cap { background: rgba(255, 255, 255, 0.08); }

.secure-note {
  margin-top: 1.15rem;
  display: flex; align-items: center; justify-content: center; gap: 0.45rem;
  font-size: 0.74rem; font-weight: 600; color: var(--faint);
}

.secure-note svg { width: 12px; height: 12px; stroke: var(--faint); fill: none; stroke-width: 2; }

/* calendar step */

.cal-frame-wrap {
  margin-top: 1.2rem;
  border-radius: 1rem;
  overflow: hidden;
  /* GHL's widget renders dark — a white backdrop flashes as a bright bar */
  background: #0a0a09;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  min-height: 620px;
}

.cal-frame-wrap iframe { width: 100%; border: 0; min-height: 620px; display: block; }

.cal-fallback { margin-top: 0.9rem; text-align: center; font-size: 0.8rem; color: var(--faint); }

.cal-fallback a { color: var(--gold); font-weight: 700; }

/* ---------- marquee ---------- */

.marquee-band {
  margin-top: clamp(3.6rem, 7vw, 5.5rem);
  padding-block: 1.15rem;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee { display: flex; width: max-content; animation: marquee 46s linear infinite; }

.marquee-band:hover .marquee { animation-play-state: paused; }

.marquee span {
  display: inline-flex; align-items: center; gap: 2.2rem;
  padding-right: 2.2rem;
  font-family: var(--font-display);
  font-size: 0.86rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}

.marquee i { font-style: normal; color: var(--gold); opacity: 0.7; font-size: 0.7rem; }

@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- deliverables strip ---------- */

.deliver-grid {
  margin-top: clamp(2.2rem, 4.5vw, 3rem);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.85rem;
}

.deliver {
  padding: 0.45rem;
  border-radius: 1.35rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px rgba(255, 255, 255, 0.045);
}

.deliver .inner {
  border-radius: 0.9rem;
  background: rgba(8, 8, 7, 0.72);
  padding: 1.35rem 1.25rem;
  height: 100%;
}

.deliver .n {
  font-family: var(--font-display);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em;
  color: var(--gold);
}

.deliver h3 { margin-top: 0.55rem; font-size: 1.02rem; letter-spacing: -0.01em; }

.deliver p { margin-top: 0.45rem; font-size: 0.85rem; color: var(--muted); line-height: 1.55; }

/* ---------- section headers ---------- */

.sec-head { text-align: center; }

.sec-head h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); margin-top: 0.85rem; }

.sec-head .sub { margin: 0.8rem auto 0; max-width: 52ch; color: var(--muted); font-size: clamp(0.95rem, 1.5vw, 1.05rem); }

/* ---------- featured result cards ---------- */

.feat-grid {
  margin-top: clamp(1.8rem, 3.8vw, 2.6rem);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem;
}

.vcard {
  --vr: 1.35rem;
  position: relative;
  border-radius: var(--vr);
  overflow: hidden;
  background: var(--bg-raise);
  outline: 1px solid rgba(255, 255, 255, 0.1);
  outline-offset: -1px;
  box-shadow: 0 18px 50px -18px rgba(0, 0, 0, 0.75);
  cursor: pointer;
  transform: translateZ(0);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
  break-inside: avoid;
}

.vcard:hover { transform: translateY(-4px); box-shadow: 0 26px 64px -20px rgba(0, 0, 0, 0.85), 0 0 60px -18px rgba(232, 179, 60, 0.2); }

.vcard:active { transform: scale(0.98); }

.vcard .media { position: relative; width: 100%; aspect-ratio: var(--ar, 9 / 16); background: #0c0b09; }

.vcard .media img,
.vcard .media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.vcard .shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5, 5, 5, 0) 44%, rgba(5, 5, 5, 0.86) 100%);
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}

.vcard.playing .shade { opacity: 0; }

.vcard .play {
  position: absolute; inset: 0; margin: auto;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: rgba(10, 9, 6, 0.55);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 10px 30px -8px rgba(0, 0, 0, 0.6);
  display: grid; place-items: center;
  transition: transform 0.4s var(--ease), opacity 0.4s var(--ease), filter 0.4s var(--ease);
}

.vcard:hover .play { transform: scale(1.08); }

.vcard.playing .play { opacity: 0; transform: scale(0.25); filter: blur(4px); pointer-events: none; }

.vcard .play svg { width: 19px; height: 19px; fill: var(--gold-hi); margin-left: 3px; }  /* optical center */

.vcard .meta {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0.95rem 1rem;
  pointer-events: none;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

.vcard.playing .meta { opacity: 0; transform: translateY(8px); }

.vcard .meta .stat {
  font-family: var(--font-display);
  font-size: 1.28rem; font-weight: 700; letter-spacing: -0.01em;
  color: var(--gold-hi);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}

.vcard .meta .who { margin-top: 0.15rem; font-size: 0.78rem; font-weight: 700; color: var(--ink); }

.vcard .meta .quote { margin-top: 0.2rem; font-size: 0.74rem; color: var(--muted); line-height: 1.45; }

.vcard .mute-hint {
  position: absolute; top: 10px; right: 10px;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  background: rgba(10, 9, 6, 0.6);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink);
  opacity: 0; transition: opacity 0.3s var(--ease);
  pointer-events: none;
}

.vcard.playing .mute-hint { opacity: 1; }

/* masonry wall */

.wall {
  margin-top: 1.1rem;
  columns: 4 240px;
  column-gap: 0.9rem;
}

.wall .vcard { margin-bottom: 0.9rem; }

.wall-note { margin-top: 1.6rem; text-align: center; font-size: 0.8rem; color: var(--faint); font-weight: 600; }

/* ---------- final cta ---------- */

.final { text-align: center; }

.final .card-shell { width: min(560px, 100%); }

.final .card-core { padding: clamp(2rem, 5vw, 2.8rem); }

.final h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); }

.final p { margin: 0.9rem auto 0; max-width: 40ch; color: var(--muted); font-size: 0.95rem; }

.final .btn { margin-top: 1.5rem; width: 100%; }

/* ---------- sticky mobile cta ---------- */

.sticky-cta {
  position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom));
  transform: translate(-50%, 140%);
  z-index: 40;
  width: min(420px, calc(100vw - 28px));
  transition: transform 0.6s var(--ease);
}

.sticky-cta.show { transform: translate(-50%, 0); }

.sticky-cta .btn { width: 100%; min-height: 54px; box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 16px 44px -8px rgba(0,0,0,.7), 0 10px 34px -10px rgba(232,179,60,.55); }

/* ---------- thank-you page ---------- */

.alert-band {
  background: var(--gold-grad);
  color: #1a1204;
  text-align: center;
  padding: 0.62rem 1rem;
  font-family: var(--font-display);
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
}

.ty-hero { text-align: center; padding-top: clamp(2.4rem, 5vw, 3.6rem); }

.ty-hero h1 { font-size: clamp(2.1rem, 5.2vw, 3.7rem); margin: 1.2rem auto 0; max-width: 22ch; }

.ty-hero .sub { margin: 1.3rem auto 0; max-width: 54ch; font-size: clamp(0.98rem, 1.6vw, 1.12rem); color: var(--muted); font-weight: 500; }

.value-tag {
  display: inline-flex; align-items: center; gap: 0.6rem;
  margin-top: 1.4rem;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
  font-size: 0.82rem; font-weight: 700;
}

.value-tag s { color: var(--faint); }

.value-tag b { color: var(--gold-hi); }

/* roadmap success */

.rm-done { text-align: center; padding: 1rem 0 0.4rem; }

.rm-done .badge-ok {
  width: 64px; height: 64px; margin: 0 auto;
  border-radius: 50%;
  background: var(--gold-grad);
  display: grid; place-items: center;
  box-shadow: 0 14px 44px -10px rgba(232, 179, 60, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  animation: pop-in 0.7s var(--ease) both;
}

.rm-done .badge-ok svg { width: 26px; height: 26px; stroke: #191204; stroke-width: 3; fill: none; }

@keyframes pop-in { from { opacity: 0; transform: scale(0.25); filter: blur(4px); } to { opacity: 1; transform: scale(1); filter: blur(0); } }

.rm-done h3 { margin-top: 1.2rem; font-size: 1.45rem; }

.rm-done p { margin: 0.7rem auto 0; max-width: 44ch; color: var(--muted); font-size: 0.92rem; }

.rm-done p b { color: var(--ink); }

.rm-preview {
  margin: 1.6rem auto 0;
  width: min(360px, 88%);
  border-radius: 1rem;
  overflow: hidden;
  position: relative;
  background: linear-gradient(180deg, #14110a, #0a0906);
  box-shadow: inset 0 0 0 1px var(--hairline-strong), 0 20px 60px -18px rgba(0, 0, 0, 0.8);
  padding: 1.3rem;
  text-align: left;
}

.rm-preview .rm-line { height: 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); margin-bottom: 0.65rem; }

.rm-preview .rm-line.g { background: linear-gradient(90deg, rgba(232, 179, 60, 0.6), rgba(232, 179, 60, 0.15)); }

.rm-preview .blurred { filter: blur(5px); }

.rm-preview .lock-tag {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(5, 5, 5, 0.1), rgba(5, 5, 5, 0.55));
}

.rm-preview .lock-tag span {
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  background: rgba(10, 9, 6, 0.78);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(232, 179, 60, 0.4);
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em;
  color: var(--gold-hi);
  display: inline-flex; align-items: center; gap: 0.45rem;
}

.rm-preview .lock-tag svg { width: 12px; height: 12px; stroke: var(--gold-hi); fill: none; stroke-width: 2.2; }

/* roadmap loading sequence */

.rm-loading { text-align: center; padding: 1.1rem 0 0.5rem; }

.rm-loading h3 { font-size: clamp(1.25rem, 2.6vw, 1.55rem); margin-top: 0.5rem; }

.load-track {
  height: 6px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  overflow: hidden;
  margin: 1.5rem auto 1.7rem;
  max-width: 420px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

.load-fill {
  height: 100%; border-radius: inherit;
  background: var(--gold-grad);
  transform: scaleX(0); transform-origin: left;
  box-shadow: 0 0 14px rgba(232, 179, 60, 0.55);
}

.load-fill.go { animation: load-fill var(--load-ms, 5000ms) cubic-bezier(0.25, 0.6, 0.35, 1) forwards; }

@keyframes load-fill { to { transform: scaleX(1); } }

.load-steps { display: grid; gap: 0.6rem; max-width: 400px; margin: 0 auto; text-align: left; }

.load-step {
  display: flex; align-items: center; gap: 0.7rem;
  font-size: 0.9rem; font-weight: 600;
  color: var(--faint);
  transition: color 0.4s var(--ease);
}

.load-step .ind {
  position: relative; flex: none;
  width: 22px; height: 22px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--hairline-strong);
  display: grid; place-items: center;
  transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.load-step .ind svg { width: 11px; height: 11px; stroke: #191204; stroke-width: 3.2; fill: none; opacity: 0; transform: scale(0.25); filter: blur(4px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), filter 0.3s var(--ease); }

.load-step.active { color: var(--ink); }

.load-step.active .ind { box-shadow: inset 0 0 0 1.5px rgba(232, 179, 60, 0.25); }

.load-step.active .ind::before {
  content: "";
  position: absolute; inset: -1.5px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--gold);
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.load-step.done { color: var(--muted); }

.load-step.done .ind { background: var(--gold-grad); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); }

.load-step.done .ind svg { opacity: 1; transform: scale(1); filter: blur(0); }

/* ---------- book (/book — ad straight to calendar) ---------- */

.bk-wrap { padding-top: clamp(0.9rem, 2vw, 1.6rem); width: min(980px, 92vw); }

.bk-head { text-align: center; }

.bk-head h1 {
  font-size: clamp(2rem, 4.4vw, 3.05rem);
  margin: 0.9rem auto 0;
  max-width: 18ch;
}

.bk-sub {
  margin: 0.9rem auto 0;
  max-width: 58ch;
  color: var(--muted);
  font-size: clamp(0.95rem, 1.5vw, 1.06rem);
}

.bk-sub strong { color: var(--ink); font-weight: 700; }

.bk-card { margin: clamp(1.4rem, 3vw, 2.1rem) auto 0; width: 100%; }

.bk-cal {
  margin-top: 0;
  min-height: 720px;
  position: relative;
  border-radius: calc(var(--r-core) - 0.25rem);
}

.bk-cal iframe { min-height: 720px; }

.bk-loading {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9rem;
  background: #0a0a09;
  color: var(--faint);
  font-size: 0.86rem; font-weight: 600;
  border-radius: inherit;
  z-index: 1;
}

.bk-spinner {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--gold);
  animation: spin 0.8s linear infinite;
}

.bk-assure {
  list-style: none;
  margin: 1.5rem auto 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 1.6rem;
}

.bk-assure li {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.83rem; font-weight: 600; color: var(--muted);
}

.bk-assure svg {
  flex: none; width: 17px; height: 17px; padding: 3.5px;
  border-radius: 50%;
  background: rgba(232, 179, 60, 0.12);
  box-shadow: inset 0 0 0 1px rgba(232, 179, 60, 0.3);
  stroke: var(--gold-hi); stroke-width: 3; fill: none;
}

@media (max-width: 640px) {
  .bk-cal, .bk-cal iframe { min-height: 640px; }
  .bk-assure { gap: 0.5rem 1.1rem; }
}

/* ---------- guide (cold-traffic lead magnet) ---------- */

.gd-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(1.6rem, 3.6vw, 3.2rem);
  align-items: center;
}

.gd-visual { display: flex; flex-direction: column; align-items: center; }

.gd-form-col h1 {
  font-size: clamp(1.95rem, 3.1vw, 2.75rem);
  margin-top: 0.85rem;
  max-width: 20ch;
}

.gd-sub {
  margin-top: 0.85rem;
  max-width: 54ch;
  color: var(--muted);
  font-size: clamp(0.94rem, 1.35vw, 1.02rem);
}

.gd-sub strong { color: var(--ink); font-weight: 700; }

/* compact form so headline + form clear the fold together */
.gd-form-col .card-shell { margin-top: 1rem; width: 100%; }
.gd-form-col .card-core { padding: clamp(1.1rem, 1.9vw, 1.45rem); }
.gd-form-col .fields { gap: 0.55rem; margin-top: 0.85rem; }
.gd-form-col .field label { margin-bottom: 0.3rem; }
.gd-form-col .field input { min-height: 46px; padding-block: 0.65rem; }
.gd-form-col .cta-row { margin-top: 0.95rem; }
.gd-form-col .btn { min-height: 52px; }
.gd-form-col .secure-note { margin-top: 0.85rem !important; }

.gd-checks { list-style: none; margin-top: 1.5rem; display: grid; gap: 0.55rem; width: 100%; max-width: 330px; }

.gd-checks li {
  display: flex; align-items: center; gap: 0.7rem;
  font-size: 0.92rem; font-weight: 600; color: var(--muted);
}

.gd-checks svg {
  flex: none; width: 19px; height: 19px; padding: 4px;
  border-radius: 50%;
  background: rgba(232, 179, 60, 0.12);
  box-shadow: inset 0 0 0 1px rgba(232, 179, 60, 0.3);
  stroke: var(--gold-hi); stroke-width: 3; fill: none;
}

.gd-cover {
  position: relative;
  width: min(330px, 100%);
}

.gd-cover::after {          /* ambient gold pool under the book */
  content: "";
  position: absolute; inset: 8% -18% -14% -18%;
  background: radial-gradient(ellipse at 50% 60%, rgba(232, 179, 60, 0.26), transparent 68%);
  filter: blur(34px);
  z-index: -1;
  pointer-events: none;
}

.gd-cover-inner {
  padding: 0.5rem;
  border-radius: 1.5rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 38px 90px -22px rgba(0, 0, 0, 0.9),
    0 0 110px -30px rgba(232, 179, 60, 0.4);
  transform: rotate(-2.2deg);
  transition: transform 0.7s var(--ease), box-shadow 0.7s var(--ease);
}

.gd-cover:hover .gd-cover-inner {
  transform: rotate(0deg) translateY(-6px) scale(1.02);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 46px 110px -24px rgba(0, 0, 0, 0.92),
    0 0 130px -26px rgba(232, 179, 60, 0.5);
}

.gd-cover-inner img {
  width: 100%; height: auto;
  border-radius: 1rem;
  outline: 1px solid rgba(255, 255, 255, 0.1);
  outline-offset: -1px;
}

.gd-cover .pb-badges { margin-top: 1.25rem; }

.gd-form-col { position: relative; }

.gd-form-col::before {   /* cover peeking behind the form on desktop */
  content: "";
  position: absolute; inset: -8% -6% -8% 40%;
  background: radial-gradient(ellipse at center, rgba(232, 179, 60, 0.14), transparent 68%);
  filter: blur(30px);
  pointer-events: none;
}

.gd-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: clamp(2.6rem, 5vw, 4rem) auto 0;
  width: min(1120px, 92vw);
  border-radius: 1.25rem;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.gd-stat {
  background: #08080766;
  backdrop-filter: blur(2px);
  padding: 1.3rem 1.1rem;
  text-align: center;
}

.gd-stat b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.05rem);
  color: var(--gold-hi);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.gd-stat span {
  display: block; margin-top: 0.35rem;
  font-size: 0.74rem; line-height: 1.45; color: var(--muted); font-weight: 600;
}

/* look-inside strip */

.peek-strip {
  margin-top: clamp(1.8rem, 3.6vw, 2.6rem);
  display: flex; gap: 1rem;
  overflow-x: auto;
  padding: 0.6rem 0.2rem 1.2rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(232, 179, 60, 0.4) transparent;
}

.peek-strip::-webkit-scrollbar { height: 6px; }
.peek-strip::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 999px; }
.peek-strip::-webkit-scrollbar-thumb { background: rgba(232, 179, 60, 0.45); border-radius: 999px; }

.peek-strip img {
  flex: none;
  width: clamp(220px, 27vw, 300px);
  height: auto;
  border-radius: 0.85rem;
  scroll-snap-align: center;
  outline: 1px solid rgba(255, 255, 255, 0.1);
  outline-offset: -1px;
  box-shadow: 0 20px 50px -18px rgba(0, 0, 0, 0.8);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.peek-strip img:hover {
  transform: translateY(-5px) scale(1.015);
  box-shadow: 0 28px 64px -20px rgba(0, 0, 0, 0.85), 0 0 60px -22px rgba(232, 179, 60, 0.35);
}

/* what's inside grid */

.gd-grid {
  margin-top: clamp(2rem, 4vw, 2.8rem);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.85rem;
}

.gd-card {
  padding: 0.45rem;
  border-radius: 1.35rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px rgba(255, 255, 255, 0.045);
  transition: transform 0.5s var(--ease);
}

.gd-card:hover { transform: translateY(-3px); }

.gd-card .inner {
  border-radius: 0.9rem;
  background: rgba(8, 8, 7, 0.72);
  padding: 1.4rem 1.3rem;
  height: 100%;
}

.gd-card .n {
  font-family: var(--font-display);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em;
  color: var(--gold);
}

.gd-card h3 { margin-top: 0.5rem; font-size: 1.03rem; letter-spacing: -0.01em; }

.gd-card p { margin-top: 0.45rem; font-size: 0.86rem; color: var(--muted); line-height: 1.55; }

@media (max-width: 980px) {
  /* stack: headline → book → form → checks (book builds desire, form stays high) */
  .gd-hero { display: flex; flex-direction: column; }
  .gd-form-col { display: contents; }
  .gd-form-col > .eyebrow { order: 1; align-self: flex-start; }
  .gd-form-col h1 { order: 2; max-width: none; font-size: clamp(2.05rem, 7.4vw, 2.7rem); }
  .gd-sub { order: 3; }
  .gd-visual { display: contents; }
  .gd-cover { order: 4; width: min(196px, 52%); margin: 1.2rem auto 0; }
  .gd-cover .pb-badges { margin-top: 0.9rem; }
  .gd-form-col .card-shell { order: 5; margin-top: 1.3rem; }
  .gd-checks { order: 6; margin: 1.5rem auto 0; max-width: none; }
  .gd-sub { margin-top: 0.7rem; }
  .gd-form-col::before { display: none; }
  .gd-grid { grid-template-columns: 1fr 1fr; }
  .gd-stats { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .gd-grid { grid-template-columns: 1fr; }
  .peek-strip img { width: 74vw; }
}

/* ---------- playbook (lead magnet) ---------- */

.pb-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.8rem, 4vw, 3.4rem);
  align-items: start;
}

.pb-cover { position: sticky; top: 2rem; }

.pb-cover-inner {
  padding: 0.5rem;
  border-radius: 1.5rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 34px 90px -22px rgba(0, 0, 0, 0.85),
    0 0 110px -28px rgba(232, 179, 60, 0.28);
  transform: rotate(-1.4deg);
  transition: transform 0.7s var(--ease);
}

.pb-cover:hover .pb-cover-inner { transform: rotate(0deg) translateY(-4px); }

.pb-cover-inner img {
  width: 100%; height: auto;
  border-radius: 1rem;
  outline: 1px solid rgba(255, 255, 255, 0.1);
  outline-offset: -1px;
}

.pb-badges { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.1rem; flex-wrap: wrap; }

.pb-badge {
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--hairline);
  font-size: 0.72rem; font-weight: 700; color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.pb-badge b { color: var(--gold-hi); }

.pb-pitch h2 { font-size: clamp(2rem, 4.4vw, 3.1rem); margin-top: 1rem; }

.pb-lead { margin-top: 1rem; color: var(--muted); font-size: clamp(0.98rem, 1.6vw, 1.08rem); }

.pb-list { list-style: none; margin-top: 1.6rem; display: grid; gap: 0.9rem; }

.pb-list li { display: flex; gap: 0.8rem; align-items: flex-start; font-size: 0.94rem; line-height: 1.55; color: var(--muted); }

.pb-list li b { color: var(--ink); font-weight: 700; }

.pb-list svg {
  flex: none; width: 20px; height: 20px; margin-top: 2px;
  padding: 4px;
  border-radius: 50%;
  background: rgba(232, 179, 60, 0.12);
  box-shadow: inset 0 0 0 1px rgba(232, 179, 60, 0.3);
  stroke: var(--gold-hi); stroke-width: 3; fill: none;
}

.pb-math {
  margin-top: 1.8rem;
  padding: 1.35rem 1.5rem;
  border-radius: 1.25rem;
  background: linear-gradient(155deg, rgba(232, 179, 60, 0.11), rgba(232, 179, 60, 0.03));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), inset 0 0 0 1px rgba(232, 179, 60, 0.22);
}

.pb-math-label {
  display: block;
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.9rem;
}

.pb-math-row, .pb-math-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.5rem 0;
  font-size: 0.92rem; color: var(--muted);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-variant-numeric: tabular-nums;
}

.pb-math-row b { color: var(--ink); font-family: var(--font-display); font-weight: 700; }

.pb-math-total {
  border-bottom: 0;
  padding-top: 0.9rem;
  font-size: 1rem; color: var(--ink); font-weight: 700;
}

.pb-math-total b { font-family: var(--font-display); font-size: 1.6rem; color: var(--gold-hi); }

.pb-math-note { margin-top: 0.5rem; font-size: 0.72rem; color: var(--faint); }

.pb-later {
  text-align: center;
  padding: clamp(1.8rem, 4vw, 2.6rem);
  border-radius: 1.5rem;
  background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

.pb-later h3 { margin-top: 1rem; font-size: clamp(1.35rem, 2.8vw, 1.8rem); }

.pb-later p { margin: 0.85rem auto 0; max-width: 54ch; color: var(--muted); font-size: 0.94rem; }

.pb-later p b { color: var(--gold-hi); }

.pb-later .btn { margin-top: 1.5rem; display: inline-flex; flex: none; text-decoration: none; }

@media (max-width: 860px) {
  .pb-grid { grid-template-columns: 1fr; }
  .pb-cover { position: static; width: min(340px, 82%); margin-inline: auto; }
  .pb-pitch { text-align: left; }
}

/* thank-you VSL */

.vsl-wrap { margin: 2.2rem auto 0; width: min(900px, 100%); }

.sound-pill {
  position: absolute; inset: 0; margin: auto;
  width: max-content; height: max-content;
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  background: var(--gold-grad);
  color: #191204;
  font-family: var(--font-display);
  font-weight: 700; font-size: 1rem; letter-spacing: 0.01em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 14px 40px -8px rgba(0, 0, 0, 0.6);
  animation: sound-pulse 2.1s var(--ease) infinite;
  pointer-events: none;
  white-space: nowrap;
}

.sound-pill svg { width: 19px; height: 19px; stroke: #191204; stroke-width: 2.2; }

.sound-pill[hidden] { display: none; }

@keyframes sound-pulse {
  0% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 14px 40px -8px rgba(0, 0, 0, 0.6), 0 0 0 0 rgba(232, 179, 60, 0.55); transform: scale(1); }
  55% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 14px 40px -8px rgba(0, 0, 0, 0.6), 0 0 0 26px rgba(232, 179, 60, 0); transform: scale(1.045); }
  100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 14px 40px -8px rgba(0, 0, 0, 0.6), 0 0 0 0 rgba(232, 179, 60, 0); transform: scale(1); }
}

/* muted-autoplay state: video visible, pill pulsing, play button hidden */
.vcard.vsl.muted-auto .play { opacity: 0; transform: scale(0.25); filter: blur(4px); pointer-events: none; }
.vcard.vsl.muted-auto img { opacity: 0; transition: opacity 0.5s var(--ease); }
.vcard.vsl.muted-auto .shade { opacity: 0.55; }

.vcard.vsl {
  border-radius: var(--r-core);
  outline: none;
  box-shadow: none;
}

.vcard.vsl .play { width: 74px; height: 74px; }

.vcard.vsl .play svg { width: 25px; height: 25px; margin-left: 4px; }

.vcard.vsl:hover { transform: none; box-shadow: none; }

.vsl-wrap .card-shell { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 30px 80px -20px rgba(0, 0, 0, 0.8), 0 0 90px -20px rgba(232, 179, 60, 0.22); }

/* thank-you "almost done" progress */

.ty-progress { margin: 1.8rem auto 0; max-width: 520px; width: 100%; }

.ty-progress .row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 0.6rem;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
}
.ty-progress .row .lab { color: var(--gold-hi); transition: color 0.4s var(--ease); }
.ty-progress .row .lab.stalled { color: #FBBF24; }
.ty-progress .row .pct {
  color: var(--gold); font-variant-numeric: tabular-nums;
  font-size: 1.15rem; letter-spacing: 0.01em;
}

/* ── the bar ───────────────────────────────────────────────────────────────
   Reads as a system doing work, then visibly stalling: a deep track, a fill
   with barber-pole stripes marching through it (the one motion everybody on
   earth reads as "loading"), and a bright head at the leading edge that keeps
   pulsing after the fill stops — the universal "still waiting on something"
   signal. What it is waiting on is the visitor. */
.ty-bar {
  position: relative; height: 20px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.ty-bar-fill {
  position: relative; height: 100%; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, #B8860B, var(--gold) 55%, #FFDD8A);
  box-shadow: 0 0 18px rgba(232, 179, 60, 0.5);
  transition: width 2.4s cubic-bezier(0.25, 0.7, 0.3, 1);
}
.ty-bar-stripes {
  position: absolute; inset: 0; border-radius: inherit; opacity: 0.4;
  background-image: repeating-linear-gradient(
    -60deg,
    rgba(255, 255, 255, 0.55) 0 10px,
    transparent 10px 22px
  );
  background-size: 44px 100%;
  animation: ty-march 0.85s linear infinite;
}
@keyframes ty-march { to { background-position: -44px 0; } }

.ty-bar-head {
  position: absolute; top: 50%; right: 0; translate: 50% -50%;
  width: 15px; height: 15px; border-radius: 50%;
  background: #FFF3D0;
  box-shadow: 0 0 0 3px rgba(232, 179, 60, 0.35), 0 0 20px 4px rgba(255, 221, 138, 0.85);
  animation: ty-head 1.5s ease-in-out infinite;
}
@keyframes ty-head {
  0%, 100% { box-shadow: 0 0 0 3px rgba(232, 179, 60, 0.3), 0 0 18px 3px rgba(255, 221, 138, 0.7); }
  50% { box-shadow: 0 0 0 7px rgba(232, 179, 60, 0.14), 0 0 26px 7px rgba(255, 221, 138, 1); }
}

/* ── the three steps, so 85% is not an arbitrary number ────────────────── */
.ty-steps {
  display: flex; justify-content: space-between; gap: 0.5rem; margin-top: 0.75rem;
}
.ty-step {
  display: inline-flex; align-items: center; gap: 0.38rem;
  font-size: 0.72rem; font-weight: 700; color: rgba(255, 255, 255, 0.35);
  transition: color 0.45s var(--ease);
}
.ty-step.last { text-align: right; }
.ty-step i {
  width: 15px; height: 15px; border-radius: 50%; flex: none;
  border: 2px solid rgba(255, 255, 255, 0.22);
  background: transparent;
  transition: background 0.45s var(--ease), border-color 0.45s var(--ease), scale 0.45s var(--ease);
}
.ty-step.on { color: var(--gold-hi); }
.ty-step.on i {
  border-color: var(--gold);
  background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23151006' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat;
  scale: 1.15;
}
/* the one that never ticks — it waits, visibly */
.ty-step.waiting { color: #FBBF24; }
.ty-step.waiting i {
  border-color: #FBBF24; border-style: dashed;
  animation: ty-wait 1.6s ease-in-out infinite;
}
@keyframes ty-wait { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }

@media (max-width: 430px) {
  .ty-steps { font-size: 0.66rem; }
  .ty-step { font-size: 0.66rem; gap: 0.28rem; }
  .ty-step i { width: 13px; height: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .ty-bar-fill { transition: none; }
  .ty-bar-stripes, .ty-bar-head, .ty-step.waiting i { animation: none; }
}

/* price drop reveal */

.price-drop {
  margin: 1.5rem auto 0;
  display: flex; align-items: center; justify-content: center;
  gap: 0.4rem 1.1rem; flex-wrap: wrap;
}

.price-old {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.6vw, 2.1rem);
  color: var(--faint);
  position: relative;
  padding: 0 0.15em;
  font-variant-numeric: tabular-nums;
}

.price-old::after {
  content: "";
  position: absolute; left: -5%; right: -5%; top: 50%;
  height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--ember), var(--gold-hi));
  transform: scaleX(0) rotate(-6deg); transform-origin: left;
  box-shadow: 0 0 10px rgba(232, 179, 60, 0.5);
}

.revealed .price-old::after { animation: strike 0.5s var(--ease) 0.35s forwards; }

@keyframes strike { to { transform: scaleX(1) rotate(-6deg); } }

.price-arrow svg { width: 26px; height: 26px; stroke: var(--gold); stroke-width: 2.2; fill: none; opacity: 0.8; }

.price-free {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.8rem, 8vw, 3.8rem);
  line-height: 1; letter-spacing: -0.02em;
  background: var(--gold-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 6px 26px rgba(232, 179, 60, 0.35));
  opacity: 0; transform: scale(0.6);
}

.revealed .price-free { animation: free-pop 0.65s var(--ease) 0.75s forwards; }

@keyframes free-pop { to { opacity: 1; transform: scale(1); } }

.price-note { margin-top: 0.65rem; font-size: 0.86rem; color: var(--muted); font-weight: 600; }

.price-note b { color: var(--gold-hi); }

/* checklist */

.checklist { margin-top: clamp(2.2rem, 4.5vw, 3rem); display: grid; gap: 0.85rem; }

.check-item {
  display: flex; gap: 1.1rem; align-items: flex-start;
  padding: 0.45rem;
  border-radius: 1.35rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px rgba(255, 255, 255, 0.045);
}

.check-item .inner {
  flex: 1;
  display: flex; gap: 1.1rem; align-items: flex-start;
  border-radius: 0.9rem;
  background: rgba(8, 8, 7, 0.72);
  padding: 1.25rem 1.3rem;
}

.check-item .num {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(232, 179, 60, 0.1);
  box-shadow: inset 0 0 0 1px rgba(232, 179, 60, 0.3);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 700; font-size: 1rem; color: var(--gold-hi);
  font-variant-numeric: tabular-nums;
}

.check-item h3 { font-size: 1.05rem; letter-spacing: -0.01em; }

.check-item p { margin-top: 0.35rem; font-size: 0.88rem; color: var(--muted); }

.check-item p a { color: var(--gold); font-weight: 700; text-decoration: none; }

/* FAQ */

.faq { margin-top: clamp(2.2rem, 4.5vw, 3rem); display: grid; gap: 0.65rem; }

.faq-item {
  border-radius: 1.1rem;
  background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--hairline);
  overflow: hidden;
  transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.faq-item.open { background: rgba(255, 255, 255, 0.045); box-shadow: inset 0 0 0 1px var(--hairline-strong); }

.faq-q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.05rem 1.25rem;
  text-align: left;
  font-weight: 700; font-size: 0.96rem;
  min-height: 44px;
}

.faq-q .chev {
  flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  display: grid; place-items: center;
  transition: transform 0.45s var(--ease), background 0.45s var(--ease);
}

.faq-item.open .chev { transform: rotate(45deg); background: rgba(232, 179, 60, 0.16); }

.faq-q .chev svg { width: 12px; height: 12px; stroke: var(--gold-hi); stroke-width: 2.4; fill: none; }

.faq-a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease);
}

.faq-item.open .faq-a { grid-template-rows: 1fr; }

.faq-a > div { overflow: hidden; }

.faq-a p { padding: 0 1.25rem 1.15rem; font-size: 0.88rem; color: var(--muted); }

/* ---------- footer ---------- */

footer {
  margin-top: clamp(3rem, 7vw, 5rem);
  border-top: 1px solid var(--hairline);
  padding: clamp(2.4rem, 5vw, 3.4rem) 0 2.6rem;
  text-align: center;
}

footer .foot-logo { height: 40px; width: auto; margin: 0 auto 1.3rem; opacity: 0.85; mix-blend-mode: screen; }

footer .links { display: flex; justify-content: center; gap: 1.6rem; font-size: 0.8rem; font-weight: 600; color: var(--muted); }

footer .links a { text-decoration: none; transition: color 0.3s var(--ease); }

footer .links a:hover { color: var(--gold-hi); }

footer .fine {
  margin: 1.6rem auto 0;
  max-width: 74ch;
  font-size: 0.68rem; line-height: 1.7; color: rgba(247, 244, 236, 0.3);
}

footer .fine + .fine { margin-top: 0.8rem; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .feat-grid { grid-template-columns: 1fr 1fr; }
  .deliver-grid { grid-template-columns: 1fr; }
  .wall { columns: 2 170px; column-gap: 0.7rem; }
  .wall .vcard { margin-bottom: 0.7rem; }
}

@media (max-width: 560px) {
  .opts, .opts.cols-3 { grid-template-columns: 1fr 1fr; }
  .fields { grid-template-columns: 1fr; }
  .field.half { grid-column: span 2; }
  .feat-grid { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
  .cta-row { flex-wrap: wrap; }
  .btn { min-height: 56px; }
  .check-item .inner { flex-direction: row; }
  .section { padding-block: 3.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .atmos .orb, .marquee, .eyebrow .dot, .boot, .load-step.active .ind::before { animation: none !important; }
  .rv { opacity: 1; transform: none; filter: none; }
  .rv.in { transition: none; }
  .step.active { animation: none; }
  .revealed .price-old::after { animation: none; transform: scaleX(1) rotate(-6deg); }
  .revealed .price-free { animation: none; opacity: 1; transform: scale(1); }
  .ty-fill { animation: none; transform: scaleX(0.85); }
  .sound-pill { animation: none; }
}

/* ============================================================
   SPARK CALENDAR — native booking UI (split-test variant B)
   Same glass-on-black language as the wizard; two panes on desktop
   (month left, times right), stacked on mobile.
   ============================================================ */

/* The calendar earns more room than a single question does — the card widens
   for this step only. Control (/) never gets the class, so it can't be
   affected. No width transition: it thrashes layout every frame, and the
   step's own slide-in already covers the resize. */
.card-shell.cal-wide { width: min(920px, 100%); }

.spark-cal { margin-top: 1.2rem; }

.cal-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: 0.65rem;
  transition: opacity 0.3s var(--ease);
}

.cal-shell.busy { opacity: 0.55; pointer-events: none; }

.cal-pane {
  border-radius: 1.15rem;
  background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--hairline), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  padding: 1rem 1rem 0.85rem;
  min-width: 0;
}

/* ---------- month header ---------- */

.cal-topbar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }

.cal-month {
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.02rem; letter-spacing: -0.01em;
  white-space: nowrap;
}

.cal-nav {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--glass-hi);
  box-shadow: inset 0 0 0 1px var(--hairline);
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease), opacity 0.3s var(--ease);
}

.cal-nav svg { width: 15px; height: 15px; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.cal-nav:hover:not(:disabled) { background: rgba(232, 179, 60, 0.16); box-shadow: inset 0 0 0 1px rgba(232, 179, 60, 0.35); }

.cal-nav:disabled { opacity: 0.22; cursor: default; }

/* ---------- month grid ---------- */

.cal-dow {
  display: grid; grid-template-columns: repeat(7, 1fr);
  margin-top: 0.9rem; padding-bottom: 0.4rem;
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.1em;
  color: var(--faint); text-align: center; text-transform: uppercase;
}

.cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }

.cal-day {
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 38px;
  display: grid; place-items: center;
  border-radius: 0.7rem;
  font-size: 0.88rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}

.cal-day.blank { pointer-events: none; }

.cal-day.closed { color: rgba(247, 244, 236, 0.2); cursor: default; }

.cal-day.open {
  color: var(--ink);
  background: rgba(232, 179, 60, 0.09);
  box-shadow: inset 0 0 0 1px rgba(232, 179, 60, 0.24);
}

/* availability dot — reads instantly without colour alone carrying it */
.cal-day.open i {
  position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--gold);
  transition: opacity 0.25s var(--ease);
}

.cal-day.open:hover { background: rgba(232, 179, 60, 0.2); transform: translateY(-1px); }

.cal-day.today { box-shadow: inset 0 0 0 1px var(--hairline-strong); }

.cal-day.open.today { box-shadow: inset 0 0 0 1px rgba(232, 179, 60, 0.45); }

.cal-day.sel {
  background: var(--gold-grad);
  color: #191204;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 8px 22px -8px rgba(232, 179, 60, 0.6);
}

.cal-day.sel i { background: #191204; opacity: 0.5; }

.cal-day.skel, .cal-slot.skel {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: none; pointer-events: none;
  animation: calpulse 1.4s var(--ease) infinite;
}

.cal-slot.skel { display: block; width: 100%; height: 46px; border-radius: 0.75rem; margin-bottom: 8px; }

@keyframes calpulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.9; } }

/* ---------- mobile date rail (replaces the grid under 860px) ---------- */

.cal-rail { display: none; }

/* ---------- timezone ---------- */

.cal-tz {
  display: flex; align-items: center; gap: 0.4rem;
  margin-top: 0.9rem; padding-top: 0.8rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.76rem; color: var(--muted);
}

.cal-tz svg { width: 13px; height: 13px; flex: none; fill: none; stroke: var(--faint); stroke-width: 1.7; }

.cal-tz select {
  flex: 1; min-width: 0;
  appearance: none; -webkit-appearance: none;
  background: transparent; border: 0; outline: none;
  color: var(--ink); font: inherit; font-weight: 700;
  cursor: pointer; padding: 0.15rem 0;
}

.cal-tz select option { background: #12110e; color: var(--ink); }

/* ---------- times pane ---------- */

.cal-when {
  font-family: var(--font-display);
  font-weight: 700; font-size: 0.98rem;
  display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--hairline);
}

.cal-zone {
  font-family: var(--font-body);
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em;
  color: var(--gold);
  padding: 0.12rem 0.42rem;
  border-radius: 999px;
  background: rgba(232, 179, 60, 0.12);
}

.cal-scroll {
  margin-top: 0.75rem;
  max-height: 420px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(232, 179, 60, 0.35) transparent;
  padding-right: 0.3rem;
}

/* fade the cut-off edge so a clipped list reads as "scroll for more" rather
   than as a broken box — toggled from JS, never shown when it all fits */
.cal-pane-time { position: relative; }

.cal-pane-time::after {
  content: "";
  position: absolute; left: 1px; right: 1px; bottom: 1px; height: 46px;
  border-radius: 0 0 1.15rem 1.15rem;
  background: linear-gradient(180deg, transparent, #0e0d0b 88%);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s var(--ease);
}

.cal-pane-time.more::after { opacity: 1; }

.cal-scroll::-webkit-scrollbar { width: 5px; }
.cal-scroll::-webkit-scrollbar-thumb { background: rgba(232, 179, 60, 0.32); border-radius: 999px; }

.cal-bucket + .cal-bucket { margin-top: 0.9rem; }

.cal-bucket-label {
  display: block; margin-bottom: 0.45rem;
  font-size: 0.64rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--faint);
}

.cal-slots { display: grid; gap: 8px; }

/* pick → the row splits and Confirm slides in beside it (two taps, no scroll) */
.cal-slot-row { display: grid; grid-template-columns: 1fr 0fr; gap: 0; transition: grid-template-columns 0.4s var(--ease), gap 0.4s var(--ease); }

.cal-slot-row.picked { grid-template-columns: 1fr 1fr; gap: 8px; }

.cal-slot {
  min-height: 48px; width: 100%;
  display: grid; place-items: center;
  border-radius: 0.8rem;
  background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
  font-weight: 700; font-size: 0.94rem;
  font-variant-numeric: tabular-nums;
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease), color 0.3s var(--ease);
}

.cal-slot:hover { background: var(--glass-hi); box-shadow: inset 0 0 0 1px rgba(232, 179, 60, 0.4); }

.cal-slot-row.picked .cal-slot {
  background: rgba(232, 179, 60, 0.14);
  box-shadow: inset 0 0 0 1px rgba(232, 179, 60, 0.5);
  color: var(--gold-hi);
}

.cal-go {
  min-height: 48px; min-width: 0; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  border-radius: 0.8rem;
  background: var(--gold-grad);
  background-size: 160% 100%;
  color: #191204;
  font-family: var(--font-display); font-weight: 700; font-size: 0.92rem;
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 10px 26px -10px rgba(232, 179, 60, 0.6);
  transition: opacity 0.3s var(--ease), background-position 0.6s var(--ease);
}

.cal-slot-row.picked .cal-go { opacity: 1; pointer-events: auto; }

.cal-go:hover { background-position: 60% 0; }

.cal-go svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

.cal-go.loading { color: transparent; position: relative; }
.cal-go.loading svg { opacity: 0; }
.cal-go.loading::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 17px; height: 17px; border-radius: 50%;
  border: 2.2px solid rgba(25, 18, 4, 0.3); border-top-color: #191204;
  animation: calspin 0.7s linear infinite;
}

@keyframes calspin { to { transform: rotate(360deg); } }

.cal-empty { font-size: 0.85rem; color: var(--faint); padding: 1.4rem 0; text-align: center; }

/* ---------- status line ---------- */

.cal-status:empty { display: none; }

.cal-status {
  margin-top: 0.85rem; padding: 0.7rem 0.9rem;
  border-radius: 0.8rem;
  font-size: 0.82rem; font-weight: 600; text-align: center;
}

.cal-status.warn { background: rgba(232, 179, 60, 0.12); box-shadow: inset 0 0 0 1px rgba(232, 179, 60, 0.3); color: var(--gold-hi); }

.cal-status.err { background: rgba(232, 106, 74, 0.1); box-shadow: inset 0 0 0 1px rgba(232, 106, 74, 0.3); color: #f0a48c; }

.cal-status a, .cal-status [data-retry] { color: var(--gold); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- booked ---------- */

.cal-done { text-align: center; padding: 2.6rem 1.2rem 2.2rem; }

.cal-check {
  width: 68px; height: 68px; margin: 0 auto 1.2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--gold-grad);
  box-shadow: 0 18px 46px -12px rgba(232, 179, 60, 0.65);
  animation: calpop 0.6s var(--ease) both;
}

.cal-check svg { width: 30px; height: 30px; fill: none; stroke: #191204; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 32; animation: caldraw 0.5s var(--ease) 0.25s both; }

@keyframes calpop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes caldraw { from { stroke-dashoffset: 32; } to { stroke-dashoffset: 0; } }

.cal-done h3 { font-size: clamp(1.4rem, 3.6vw, 1.85rem); }

.cal-when-final {
  margin-top: 0.6rem;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1rem, 2.4vw, 1.18rem);
  color: var(--gold-hi);
}

.cal-done-note { margin-top: 0.7rem; font-size: 0.85rem; color: var(--muted); }

.cal-bar { margin: 1.5rem auto 0; width: min(240px, 70%); height: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.09); overflow: hidden; }

.cal-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--gold-grad); animation: calfill 1.5s var(--ease) forwards; }

@keyframes calfill { to { width: 100%; } }

/* ---------- mobile ---------- */

@media (max-width: 860px) {
  .cal-shell { grid-template-columns: 1fr; }
  .cal-scroll { max-height: none; overflow: visible; padding-right: 0; }
  .cal-pane { padding: 0.9rem 0.8rem 0.75rem; }
  /* on a phone the row is wide enough to keep Confirm generous */
  .cal-slot-row.picked { grid-template-columns: 0.85fr 1fr; }
  /* the fade only makes sense over an internal scroll — the list is full height here */
  .cal-pane-time::after { display: none; }

  /* month grid out, date rail in */
  .cal-topbar, .cal-dow, .cal-days { display: none; }

  .cal-rail {
    display: flex; gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    margin-inline: -0.2rem;
    padding-inline: 0.2rem;
  }

  .cal-rail::-webkit-scrollbar { display: none; }

  .cal-railday {
    flex: 0 0 auto;
    scroll-snap-align: center;
    width: 78px;
    display: grid; gap: 1px;
    padding: 0.7rem 0.4rem 0.6rem;
    border-radius: 0.9rem;
    background: rgba(232, 179, 60, 0.09);
    box-shadow: inset 0 0 0 1px rgba(232, 179, 60, 0.24);
    text-align: center;
    transition: background 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
  }

  .cal-railday .rd-dow { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.1em; color: var(--faint); }
  .cal-railday .rd-num { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
  .cal-railday .rd-mo { font-size: 0.68rem; font-weight: 700; color: var(--muted); }
  .cal-railday .rd-n { margin-top: 0.25rem; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold); }

  .cal-railday.sel {
    background: var(--gold-grad);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 10px 26px -10px rgba(232, 179, 60, 0.6);
    color: #191204;
    transform: translateY(-1px);
  }

  .cal-railday.sel .rd-dow, .cal-railday.sel .rd-mo { color: rgba(25, 18, 4, 0.65); }
  .cal-railday.sel .rd-n { color: rgba(25, 18, 4, 0.8); }
}

@media (prefers-reduced-motion: reduce) {
  .cal-check, .cal-check svg, .cal-bar i, .cal-day.skel, .cal-slot.skel { animation: none; }
  .cal-bar i { width: 100%; }
}

/* ============================================================
   EXIT INTENT — last-chance capture when they move to leave.
   Same glass-on-black language as the wizard card; concentric
   radii (shell → core), staggered enter, soft exit.
   ============================================================ */

.exit-veil {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: 1.1rem;
  background: rgba(3, 3, 3, 0.72);
  -webkit-backdrop-filter: blur(7px) saturate(120%);
  backdrop-filter: blur(7px) saturate(120%);
  opacity: 0;
  transition-property: opacity;
  transition-duration: 0.32s;
  transition-timing-function: var(--ease);
  overflow-y: auto;
}

.exit-veil[hidden] { display: none; }

/* Scoped guard: several children carry display:grid/inline-flex from their own
   classes, which silently beats the `hidden` attribute (the sound-pill trap).
   Inside this dialog, hidden always means hidden. */
#exit-modal [hidden] { display: none !important; }

.exit-veil.in { opacity: 1; }

.exit-shell {
  width: min(500px, 100%);
  margin: auto;
  padding: var(--shell-pad);
  border-radius: var(--r-shell);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02) 32%, rgba(255, 255, 255, 0.035));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 40px 90px -24px rgba(0, 0, 0, 0.9),
    0 0 140px -34px rgba(232, 179, 60, 0.3);
  /* exits are softer than enters — small offset, no scale bounce */
  transform: translateY(10px) scale(0.985);
  opacity: 0;
  transition-property: transform, opacity;
  transition-duration: 0.42s;
  transition-timing-function: var(--ease);
  will-change: transform;
}

.exit-veil.in .exit-shell { transform: none; opacity: 1; }

.exit-core {
  position: relative;
  padding: 1.7rem 1.5rem 1.35rem;
  border-radius: var(--r-core);          /* concentric with the shell */
  background: linear-gradient(180deg, rgba(14, 13, 11, 0.96), rgba(9, 9, 8, 0.98));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.055);
  text-align: center;
}

/* close: 30px visible, 44px real hit area */
.exit-x {
  position: absolute; top: 0.75rem; right: 0.75rem;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--faint);
  background: rgba(255, 255, 255, 0.05);
  transition-property: color, background-color, scale;
  transition-duration: 0.22s;
  transition-timing-function: var(--ease);
}
.exit-x::after { content: ""; position: absolute; inset: -7px; }
.exit-x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.exit-x:hover { color: var(--ink); background: rgba(255, 255, 255, 0.1); }
.exit-x:active { scale: 0.96; }

.exit-badge {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.34rem 0.8rem;
  border-radius: 999px;
  background: rgba(232, 179, 60, 0.1);
  box-shadow: inset 0 0 0 1px rgba(232, 179, 60, 0.3);
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gold-hi);
  font-variant-numeric: tabular-nums;
}

.exit-badge .dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 0 rgba(232, 179, 60, 0.55);
  animation: exitPulse 2s var(--ease) infinite;
}

@keyframes exitPulse {
  0% { box-shadow: 0 0 0 0 rgba(232, 179, 60, 0.5); }
  70% { box-shadow: 0 0 0 6px rgba(232, 179, 60, 0); }
  100% { box-shadow: 0 0 0 0 rgba(232, 179, 60, 0); }
}

.exit-core h2 {
  margin-top: 0.9rem;
  font-size: clamp(1.32rem, 4.4vw, 1.72rem);
  line-height: 1.1;
  text-wrap: balance;
}

.exit-sub {
  margin-top: 0.6rem;
  font-size: 0.88rem; line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}

.exit-fields {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem;
  margin-top: 1.15rem;
  text-align: left;
}

.exit-fields .field { grid-column: span 2; }
.exit-fields .field.half { grid-column: span 1; }

.exit-core .btn { width: 100%; margin-top: 0.9rem; }

.exit-no {
  display: block; width: 100%;
  margin-top: 0.7rem; padding: 0.5rem;
  font-size: 0.78rem; font-weight: 600;
  color: var(--faint);
  transition-property: color;
  transition-duration: 0.22s;
}
.exit-no:hover { color: var(--muted); }

.exit-fine {
  margin-top: 0.85rem;
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  font-size: 0.68rem; font-weight: 600; color: var(--faint);
}
.exit-fine svg { width: 11px; height: 11px; flex: none; fill: none; stroke: var(--faint); stroke-width: 2; }

/* ---- captured state ---- */

.exit-done { padding: 0.9rem 0 0.4rem; }
.exit-done[hidden] { display: none; }

.exit-check {
  width: 58px; height: 58px; margin: 0 auto 1.05rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--gold-grad);
  box-shadow: 0 16px 40px -12px rgba(232, 179, 60, 0.65);
  animation: exitPop 0.5s var(--ease) both;
}
.exit-check svg {
  width: 26px; height: 26px; fill: none; stroke: #191204;
  stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 32;
  animation: exitDraw 0.45s var(--ease) 0.2s both;
}

@keyframes exitPop { from { transform: scale(0.45); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes exitDraw { from { stroke-dashoffset: 32; } to { stroke-dashoffset: 0; } }

/* ---- staggered enter: each chunk on its own delay ---- */

.exit-veil.in .xs { animation: exitRise 0.5s var(--ease) both; animation-delay: var(--xd, 0ms); }

@keyframes exitRise {
  from { opacity: 0; transform: translateY(9px); filter: blur(3px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

@media (max-width: 460px) {
  .exit-core { padding: 1.5rem 1.1rem 1.15rem; }
  .exit-fields { grid-template-columns: 1fr; }
  .exit-fields .field.half { grid-column: span 2; }
}

@media (prefers-reduced-motion: reduce) {
  .exit-veil, .exit-shell { transition-duration: 0.01ms; }
  .exit-veil.in .xs, .exit-check, .exit-check svg, .exit-badge .dot { animation: none; }
  .exit-shell { transform: none; }
}

/* ============================================================
   /roi — value-first calculator page
   ============================================================ */

/* This page's job is to get a thumb onto a slider. Every pixel the hero spends
   is a pixel the calculator starts further down, so the type ramps down harder
   here than on the pages whose hero IS the pitch. */
.roi-hero h1 { text-wrap: balance; }

@media (max-width: 980px) {
  .roi-hero { padding-top: 1.1rem; }
  .roi-hero h1 { font-size: clamp(1.85rem, 8.2vw, 2.45rem); line-height: 1.06; margin-bottom: 0.7rem; }
  .roi-hero .sub { font-size: 0.92rem; line-height: 1.5; margin-bottom: 1.1rem; }
  .roi-hero .card-shell { margin-top: 0.2rem; }
}

.roi-stage[hidden] { display: none; }

/* ---------- progress pips ---------- */

.roi-progress { display: flex; gap: 6px; margin-bottom: 1.2rem; }

.rp {
  height: 3px; flex: 1;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  transition-property: background-color;
  transition-duration: 0.45s;
  transition-timing-function: var(--ease);
}

.rp.done { background: var(--gold-grad); }

/* ---------- questions ---------- */

.roi-q { display: none; }
.roi-q.active { display: block; animation: step-in 0.5s var(--ease) both; }
.roi-q.active.back { animation-name: step-in-back; }

.roi-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-top: 1.1rem; }
.roi-opts .opt:nth-child(odd):last-child { grid-column: span 2; }

/* ---------- live estimator ----------
   A two-pane calculator needs real room: at the standard 620px card each pane
   was ~280px, which crushed the sliders and forced the funnel chain to wrap.
   The estimator page widens the shell and the hero to match. */

.roi-hero { max-width: none; }
.roi-hero h1 { max-width: 17ch; }
.roi-hero .sub { max-width: 60ch; }

#roi-card { width: min(1060px, 100%); }

.est { display: grid; grid-template-columns: 1fr 1.06fr; gap: 0.75rem; }

.est-inputs, .est-out {
  padding: 1.7rem 1.6rem;
  border-radius: 1.2rem;
  background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--hairline), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.est-out {
  text-align: center; display: grid; align-content: start;
  background: linear-gradient(180deg, rgba(232, 179, 60, 0.055), rgba(255, 255, 255, 0.02) 42%);
  box-shadow: inset 0 0 0 1px rgba(232, 179, 60, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Grid, not block: the toggle is inline-flex and the kicker is a span, so a
   block parent would flow them onto the same line. */
.est-headline { display: grid; align-content: start; }

.est-inputs { display: grid; align-content: start; }

.est-field + .est-field { margin-top: 1.55rem; }

.est-field label { display: block; font-size: 0.78rem; font-weight: 700; color: var(--muted); margin-bottom: 0.6rem; }

.est-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.55rem; }
.est-row label { margin: 0; }

.est-val {
  display: inline-flex; align-items: center; gap: 1px;
  padding: 0.3rem 0.6rem;
  border-radius: 0.6rem;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
  transition-property: box-shadow, background-color;
  transition-duration: 0.2s;
}
.est-val:focus-within { background: rgba(232, 179, 60, 0.08); box-shadow: inset 0 0 0 1px rgba(232, 179, 60, 0.5); }
.est-val i { font-style: normal; font-size: 0.82rem; font-weight: 700; color: var(--faint); }
.est-val input {
  width: 6em; padding: 0; border: 0; outline: none; background: transparent;
  color: var(--ink); font: inherit; font-size: 0.95rem; font-weight: 700;
  font-variant-numeric: tabular-nums; text-align: right;
}
.est-val input::-webkit-outer-spin-button, .est-val input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* ---------- trade picker ---------- */

.tp { position: relative; }
.tp-native { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }

.tp-trigger {
  width: 100%;
  display: flex; align-items: center; gap: 0.6rem;
  min-height: 52px;
  padding: 0.75rem 0.9rem;
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
  font-size: 0.98rem; font-weight: 700; text-align: left;
  transition-property: box-shadow, background-color, scale;
  transition-duration: 0.2s;
  transition-timing-function: var(--ease);
}
.tp-trigger:hover { background: rgba(255, 255, 255, 0.075); }
.tp-trigger:active { scale: 0.99; }
.tp.open .tp-trigger { background: rgba(232, 179, 60, 0.09); box-shadow: inset 0 0 0 1px rgba(232, 179, 60, 0.5); }
.tp-trigger:focus-visible { outline: none; box-shadow: inset 0 0 0 1px rgba(232, 179, 60, 0.6), 0 0 0 3px rgba(232, 179, 60, 0.2); }

.tp-current { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tp-chev {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: var(--faint); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round;
  transition-property: transform, stroke;
  transition-duration: 0.25s;
  transition-timing-function: var(--ease);
}
.tp.open .tp-chev { transform: rotate(180deg); stroke: var(--gold); }

/* ---------- panel ---------- */

.tp-panel {
  position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; right: 0;
  padding: 0.45rem;
  border-radius: 1.1rem;                       /* concentric with the 0.7rem inner rows */
  background: linear-gradient(180deg, #16150f, #100f0c);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.09),
    0 26px 60px -18px rgba(0, 0, 0, 0.92);
  opacity: 0;
  transform: translateY(-6px) scale(0.985);
  transform-origin: top center;
  transition-property: opacity, transform;
  transition-duration: 0.18s;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}
.tp-panel[hidden] { display: none; }
.tp.open .tp-panel { opacity: 1; transform: none; }

.tp-search {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.6rem 0.7rem;
  margin-bottom: 0.35rem;
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px var(--hairline);
  transition-property: box-shadow;
  transition-duration: 0.2s;
}
.tp-search:focus-within { box-shadow: inset 0 0 0 1px rgba(232, 179, 60, 0.45); }
.tp-search svg { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--faint); stroke-width: 2.1; stroke-linecap: round; }
.tp-search input {
  flex: 1; min-width: 0;
  border: 0; outline: none; background: transparent;
  color: var(--ink); font: inherit; font-size: 0.9rem; font-weight: 600;
}
.tp-search input::placeholder { color: var(--faint); font-weight: 500; }

.tp-list {
  max-height: 302px; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(232, 179, 60, 0.35) transparent;
}
.tp-list::-webkit-scrollbar { width: 5px; }
.tp-list::-webkit-scrollbar-thumb { background: rgba(232, 179, 60, 0.3); border-radius: 999px; }

.tp-group + .tp-group { margin-top: 0.35rem; }

.tp-group-label {
  display: block;
  padding: 0.5rem 0.6rem 0.32rem;
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase;
  color: rgba(232, 179, 60, 0.72);
}

.tp-opt {
  width: 100%;
  display: flex; align-items: center; gap: 0.6rem;
  min-height: 42px;                            /* comfortable thumb target */
  padding: 0.5rem 0.6rem;
  border-radius: 0.7rem;
  text-align: left;
  transition-property: background-color, color;
  transition-duration: 0.14s;
}
.tp-opt:hover, .tp-opt.cursor { background: rgba(255, 255, 255, 0.07); }
.tp-opt.on { background: rgba(232, 179, 60, 0.12); }

.tp-opt-name { flex: 1; min-width: 0; font-size: 0.9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-opt.on .tp-opt-name { color: var(--gold-hi); font-weight: 700; }

.tp-opt-meta {
  flex: none; font-size: 0.72rem; color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.tp-opt-tick {
  width: 15px; height: 15px; flex: none;
  fill: none; stroke: var(--gold); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0; scale: 0.25;
  transition-property: opacity, scale;
  transition-duration: 0.18s;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}
.tp-opt.on .tp-opt-tick { opacity: 1; scale: 1; }

.tp-empty { padding: 1.1rem 0.7rem; text-align: center; font-size: 0.82rem; color: var(--faint); }
.tp-empty[hidden] { display: none; }

@media (max-width: 560px) {
  .tp-list { max-height: 46vh; }
  .tp-opt-meta { display: none; }              /* the name matters more than the hint */
}

@media (prefers-reduced-motion: reduce) {
  .tp-panel, .tp-chev, .tp-opt-tick { transition-duration: 0.01ms; }
}

/* ---------- sliders ---------- */

/* --fill (0–100) is written by roi.js on every input, so the travelled part of
   the track is gold and the rest is grey. Without it the control reads as a
   thin grey line with a dot on it and nobody knows it moves. */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 30px; background: transparent; cursor: grab;
  --fill: 0%;
}
input[type="range"]:active { cursor: grabbing; }

input[type="range"]::-webkit-slider-runnable-track {
  height: 7px; border-radius: 999px;
  background:
    linear-gradient(90deg, #c4841d, #f6d27a) 0 / var(--fill) 100% no-repeat,
    rgba(255, 255, 255, 0.11);
}
input[type="range"]::-moz-range-track {
  height: 7px; border-radius: 999px;
  background:
    linear-gradient(90deg, #c4841d, #f6d27a) 0 / var(--fill) 100% no-repeat,
    rgba(255, 255, 255, 0.11);
}

/* The grip lines are the affordance: a plain circle reads as a dot, three
   ruled lines read as something you hold. */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 30px; height: 30px; margin-top: -11.5px;
  border-radius: 50%;
  background:
    repeating-linear-gradient(90deg, rgba(60, 34, 0, 0.55) 0 1.5px, transparent 1.5px 5px)
      50% 50% / 13px 11px no-repeat,
    var(--gold-grad);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 2px 5px -1px rgba(0, 0, 0, 0.5),
    0 6px 18px -3px rgba(232, 179, 60, 0.6);
  transition-property: scale, box-shadow;
  transition-duration: 0.18s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
input[type="range"]::-moz-range-thumb {
  width: 30px; height: 30px; border: 0; border-radius: 50%;
  background:
    repeating-linear-gradient(90deg, rgba(60, 34, 0, 0.55) 0 1.5px, transparent 1.5px 5px)
      50% 50% / 13px 11px no-repeat,
    linear-gradient(118deg, #c4841d, #e8b33c 42%, #f6d27a 72%, #e8b33c);
  box-shadow: 0 2px 5px -1px rgba(0, 0, 0, 0.5), 0 6px 18px -3px rgba(232, 179, 60, 0.6);
}
input[type="range"]:hover::-webkit-slider-thumb { scale: 1.09; }
input[type="range"]:active::-webkit-slider-thumb { scale: 1.14; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 0 0 7px rgba(232, 179, 60, 0.14), 0 6px 18px -3px rgba(232, 179, 60, 0.6); }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(232, 179, 60, 0.35); }

/* ---------- "this moves" nudge ---------- */

.est-nudge {
  display: flex; align-items: center; justify-content: center; gap: 0.34rem;
  margin-top: 0.15rem;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em;
  color: rgba(232, 179, 60, 0.72);
  animation: nudge-breathe 2.1s ease-in-out infinite;
  transition-property: opacity, transform;
  transition-duration: 0.32s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
.est-nudge svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.est-nudge.gone { opacity: 0; transform: translateY(-4px); pointer-events: none; }

@keyframes nudge-breathe {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .est-nudge { animation: none; opacity: 0.85; }
}

/* ---------- output ---------- */

.est-toggle {
  display: inline-flex; gap: 3px; margin: 0 auto 1rem;
  padding: 3px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.est-tab {
  padding: 0.36rem 0.85rem; border-radius: 999px;
  font-size: 0.74rem; font-weight: 700; color: var(--faint);
  transition-property: background-color, color, scale;
  transition-duration: 0.2s;
}
.est-tab:active { scale: 0.96; }
.est-tab.on { background: rgba(232, 179, 60, 0.16); color: var(--gold-hi); }

.est-kicker { font-size: 0.64rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--faint); }

.est-big {
  display: flex; align-items: flex-start; justify-content: center; gap: 0.08em;
  margin-top: 0.25rem;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.6rem, 6.4vw, 4.1rem); line-height: 1; letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  background: var(--gold-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.est-cur { font-size: 0.46em; margin-top: 0.2em; }

.est-roas { margin-top: 0.5rem; font-size: 0.86rem; color: var(--muted); }
.est-roas b { color: var(--gold-hi); font-size: 1.12rem; font-variant-numeric: tabular-nums; }

.est-chain {
  display: flex; align-items: center; justify-content: center; gap: 0.9rem;
  margin: 1.5rem 0 1.15rem;
  padding: 1rem 0.6rem;
  border-radius: 0.9rem;
  background: rgba(0, 0, 0, 0.24);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.est-step { display: grid; gap: 2px; min-width: 4.4rem; }
.est-step-n { font-family: var(--font-display); font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.est-step-l { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); }
.est-arrow { color: rgba(255, 255, 255, 0.22); font-size: 0.9rem; }

.est-net {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  font-size: 0.84rem; color: var(--muted);
  padding: 0.75rem 0.95rem;
  border-radius: 0.75rem;
  background: rgba(0, 0, 0, 0.2);
}
.est-net b { font-variant-numeric: tabular-nums; color: var(--ink); }
.est-net-gain b { color: #7ee0a8; }

.est-out .btn { width: 100%; margin-top: 1.25rem; }

.est-assure { margin-top: 0.6rem; font-size: 0.72rem; font-weight: 600; color: var(--muted); }

.est-disc-wrap { margin-top: 0.85rem; text-align: center; }
.est-disc-wrap summary {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.3rem 0.1rem;
  font-size: 0.63rem; font-weight: 600; letter-spacing: 0.01em;
  color: var(--faint); cursor: pointer; list-style: none;
  text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.18);
  text-underline-offset: 3px;
}
.est-disc-wrap summary::-webkit-details-marker { display: none; }
.est-disc-wrap summary:hover { color: var(--muted); }
.est-disc { margin-top: 0.55rem; font-size: 0.62rem; line-height: 1.55; color: var(--faint); text-wrap: pretty; }

@media (max-width: 980px) {
  .est { grid-template-columns: 1fr; }

  /* Phone reading order: the number hooks, the controls are immediately under
     the thumb, the payoff and the button close it. Before this, .est-out was a
     single block above .est-inputs and pushed every slider ~420px below the
     fold, so the page said "drag your budget" with nothing draggable in sight. */
  .est-out { display: contents; }
  .est-headline { order: -2; }
  .est-inputs   { order: -1; }
  .est-detail   { order: 0; }

  .est-headline, .est-detail {
    border-radius: 1.2rem;
    background: linear-gradient(180deg, rgba(232, 179, 60, 0.055), rgba(255, 255, 255, 0.02) 42%);
    box-shadow: inset 0 0 0 1px rgba(232, 179, 60, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    text-align: center;
  }
  .est-headline { padding: 0.95rem 1.15rem 1.05rem; display: grid; }
  .est-detail   { padding: 1.3rem 1.15rem; }
  .est-inputs   { padding: 1.3rem 1.15rem; }
  .est-field + .est-field { margin-top: 1.25rem; }

  /* Grid items default to min-width:auto, so the widest thing inside them sets
     the column width. The leads → booked → jobs chain min-contents at ~317px
     and was pushing the whole column past the right edge of a 375px phone,
     clipping the budget and job-value fields. */
  .est-headline, .est-inputs, .est-detail { min-width: 0; }
  .est-chain { gap: 0.45rem; padding: 0.9rem 0.35rem; }
  .est-step { min-width: 0; }
  .est-step-n { font-size: 1.28rem; }
  .est-step-l { font-size: 0.58rem; letter-spacing: 0.02em; }

  /* The value pill was 6em of mostly empty space, which squeezed "Monthly ad
     budget" onto two lines while its two siblings stayed on one. */
  .est-val { padding: 0.3rem 0.5rem; }
  .est-val input { width: 4.4em; }
  .est-row label { white-space: nowrap; }

  /* The button carries a live number, so its width is not ours to predict.
     Two lines is fine, three starts to look broken. */
  .est-out .btn { font-size: 0.94rem; padding-left: 1.15rem; gap: 0.6rem; }

  /* The number is the hook, so it goes first and the horizon switch follows it.
     Above the number, the switch was 52px of chrome standing between the
     visitor and the only thing on this page they came to see. */
  .est-headline .est-kicker { order: 1; }
  .est-headline .est-big    { order: 2; }
  .est-headline .est-roas   { order: 3; }
  .est-headline .est-toggle { order: 4; margin: 0.85rem auto 0; }
}

/* ---------- soft landing ---------- */

.roi-soft-mark {
  width: 54px; height: 54px; margin: 0 auto 1.1rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(232, 179, 60, 0.12);
  box-shadow: inset 0 0 0 1px rgba(232, 179, 60, 0.35);
}
.roi-soft-mark svg { width: 24px; height: 24px; fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

#roi-soft { text-align: center; }
#roi-soft .btn { width: 100%; margin-top: 1.2rem; text-decoration: none; }

/* ---------- result enter: split + staggered, never one big fade ---------- */

/* Driven by a class the JS adds AFTER the stage is visible. Relying on
   fill-mode alone leaves these pinned at opacity 0, because the animation
   never starts while the parent is still display:none. */
.roi-stage.in .rs { animation: roiRise 0.55s var(--ease) both; animation-delay: var(--rd, 0ms); }

/* opacity + transform only. A `filter` here — even blur(0) at the end —
   promotes each element to its own layer and the gradient `background-clip:
   text` number inside stops painting entirely. Cost me a blank card. */
@keyframes roiRise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

#roi-result { text-align: center; }
#roi-result .btn { width: 100%; margin-top: 1.3rem; }

#roi-cal-mount { margin-top: 0.4rem; }

@media (max-width: 460px) {
  .roi-opts { grid-template-columns: 1fr; }
  .roi-opts .opt:nth-child(odd):last-child { grid-column: span 1; }
  .roi-bar-row { grid-template-columns: 66px 1fr auto; gap: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .rs, .roi-q.active { animation: none; }
  .roi-bar i { transition-duration: 0.01ms; }
}

/* ============================================================
   /b — booking-only page
   ============================================================ */

.bk-hero h1 { max-width: 22ch; text-wrap: balance; }
#bk-card { width: min(900px, 100%); }

/* Greeting sits above the headline instead of inside it — the headline itself
   is split tested at the edge, so nothing on the client may rewrite it. */
.bk-greet {
  margin: 0.9rem 0 -0.35rem;
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.2vw, 1.18rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--gold);
}
.bk-greet[hidden] { display: none; }

/* ---------- "we know who you are" confirmation ---------- */

.bk-known { margin-bottom: 1.1rem; }
.bk-known[hidden] { display: none; }

.bk-known-row {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.85rem 0.95rem;
  border-radius: 0.95rem;
  background: rgba(232, 179, 60, 0.07);
  box-shadow: inset 0 0 0 1px rgba(232, 179, 60, 0.22);
  text-align: left;
}

.bk-avatar {
  flex: none;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--gold-grad);
  color: #191204;
  font-family: var(--font-display);
  font-size: 0.85rem; font-weight: 800; letter-spacing: 0.02em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.bk-known-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.bk-known-text b { font-size: 0.95rem; font-weight: 700; }
.bk-known-text em {
  font-style: normal; font-size: 0.76rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.bk-edit {
  flex: none; position: relative;
  padding: 0.4rem 0.6rem;
  font-size: 0.76rem; font-weight: 700;
  color: var(--faint);
  border-radius: 0.5rem;
  transition-property: color, background-color;
  transition-duration: 0.2s;
}
.bk-edit::after { content: ""; position: absolute; inset: -6px; }   /* 40px hit area */
.bk-edit:hover { color: var(--gold-hi); background: rgba(255, 255, 255, 0.06); }

/* ---------- fallback detail form ---------- */

.bk-details { margin-bottom: 1.2rem; }
.bk-details[hidden] { display: none; }
.bk-details-head { margin-bottom: 0.75rem; }

#bk-cal { margin-top: 0.2rem; }

@media (max-width: 560px) {
  .bk-known-text em { font-size: 0.72rem; }
}

/* ═══════════════ HOTLINE — the number is part of the offer (Aug 21) ═══════════
   A visitor who would rather talk than fill a form is a lead we were losing.
   The pill sits in the header before anything else loads, repeats under the
   contact button, and rides next to the sticky CTA on phones — one tap to call
   everywhere. */
.hotline {
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.5rem 1.05rem 0.5rem 0.55rem;
  border: 1px solid rgba(232, 179, 60, 0.38); border-radius: 999px;
  background: linear-gradient(180deg, rgba(232, 179, 60, 0.10), rgba(232, 179, 60, 0.04));
  box-shadow: 0 0 0 1px rgba(232, 179, 60, 0.06), 0 10px 30px -18px rgba(232, 179, 60, 0.55);
  text-decoration: none; cursor: pointer;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.hotline:hover {
  border-color: rgba(232, 179, 60, 0.7);
  box-shadow: 0 0 0 1px rgba(232, 179, 60, 0.14), 0 14px 38px -16px rgba(232, 179, 60, 0.75);
  transform: translateY(-1px);
}
.hotline:active { transform: scale(0.96); }
.hotline-ring {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(232, 179, 60, 0.5), rgba(232, 179, 60, 0.14));
  position: relative;
}
.hotline-ring::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 1px solid rgba(232, 179, 60, 0.55);
  animation: hotline-pulse 2.4s var(--ease) infinite;
}
@keyframes hotline-pulse {
  0% { transform: scale(0.82); opacity: 0.9; }
  70%, 100% { transform: scale(1.28); opacity: 0; }
}
.hotline-ring svg { width: 15px; height: 15px; fill: none; stroke: #ffe9b0; stroke-width: 2; }
.hotline-copy { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.hotline-copy em {
  font-style: normal; font-size: 0.6rem; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.hotline-copy strong {
  font-size: 1.02rem; font-weight: 800; color: var(--gold);
  font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
}

/* the quiet echo under the contact button */
.form-hotline {
  display: block; margin-top: 0.85rem; text-align: center;
  font-size: 0.82rem; color: var(--muted); text-decoration: none;
}
.form-hotline strong { color: var(--gold); font-weight: 800; font-variant-numeric: tabular-nums; }
.form-hotline:hover strong { text-decoration: underline; text-underline-offset: 3px; }

/* round call button in the mobile sticky bar */
.sticky-cta .call-round {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(232, 179, 60, 0.5);
  background: linear-gradient(180deg, rgba(232, 179, 60, 0.16), rgba(232, 179, 60, 0.05));
}
.sticky-cta .call-round svg { width: 20px; height: 20px; fill: none; stroke: var(--gold); stroke-width: 2; }
.sticky-cta .call-round:active { transform: scale(0.96); }

/* ═══════════════ TYPEWRITER HEADLINE (the Sales Momenta treatment) ═══════════
   The gold phrase erases and retypes itself. The caret only exists while the
   text is moving — parked mid-sentence forever it reads like a rendering bug. */
.type-caret {
  display: inline-block; width: 3px; height: 0.82em;
  margin-left: 4px; vertical-align: -0.06em;
  background: var(--gold); border-radius: 2px;
  opacity: 0; transition: opacity 0.3s var(--ease);
}
.type-caret.on { opacity: 1; animation: caret-blink 1.1s steps(1) infinite; }
@keyframes caret-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .hotline-ring::after, .type-caret.on { animation: none; }
}

/* ═══════════════ SIDE TESTIMONIAL RAILS (desktop ≥1240px) ═══════════════════
   Real results flanking the form, floating gently. They live inside the
   card-shell so they track the form wherever the page puts it, and they only
   appear when the viewport genuinely has the room — never over content. */
.side-rail { display: none; }
@media (min-width: 1240px) {
  .side-rail {
    display: flex; flex-direction: column; gap: 1.1rem;
    position: absolute; top: 8px; width: 182px;
  }
  .rail-l { right: calc(100% + 26px); }
  .rail-r { left: calc(100% + 26px); }
  .rail-l .rail-card { transform: rotate(-2.4deg); }
  .rail-r .rail-card { transform: rotate(2.2deg); }
}
.rail-card {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 5;
  border: 1px solid rgba(232, 179, 60, 0.22); border-radius: 16px;
  overflow: hidden; padding: 0; background: #131313; cursor: pointer;
  box-shadow: 0 18px 44px -22px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.03);
  animation: rail-float 5.6s ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.rail-card:hover {
  transform: rotate(0deg) translateY(-5px) scale(1.03);
  border-color: rgba(232, 179, 60, 0.55);
  box-shadow: 0 24px 54px -20px rgba(232, 179, 60, 0.35), 0 0 0 1px rgba(232, 179, 60, 0.15);
}
.rail-card:active { transform: scale(0.96); }
@keyframes rail-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -7px; }
}
.rail-card img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.92;
}
.rail-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 34%, rgba(0, 0, 0, 0.88));
}
.rail-play {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(232, 179, 60, 0.5);
  backdrop-filter: blur(4px);
}
.rail-play svg { width: 13px; height: 13px; fill: var(--gold); margin-left: 1px; }
.rail-meta {
  position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 2;
  display: flex; flex-direction: column; gap: 2px; text-align: left;
}
.rail-meta strong { font-size: 0.86rem; font-weight: 800; color: var(--gold); line-height: 1.15; }
.rail-meta em { font-style: normal; font-size: 0.66rem; font-weight: 600; color: rgba(255, 255, 255, 0.72); }

/* the wall card you were sent to lights up so you can't lose it */
.vcard.flash {
  outline: 2px solid rgba(232, 179, 60, 0.85); outline-offset: 3px;
  animation: flash-pulse 1s var(--ease) 3;
}
@keyframes flash-pulse {
  0%, 100% { outline-color: rgba(232, 179, 60, 0.85); }
  50% { outline-color: rgba(232, 179, 60, 0.15); }
}

/* ═══════════════ MOBILE PROOF PEEK (top of page, <900px) ═══════════════════ */
/* every viewport — since Aug 22 this pill IS the trust line, the only place
   the contractor count lives on the page */
.proof-peek {
  display: inline-flex; align-items: center; gap: 0.5rem;
  max-width: 96vw;
  margin-top: 0.15rem; padding: 0.4rem 0.75rem 0.4rem 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px;
  background: rgba(255, 255, 255, 0.04); cursor: pointer;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.proof-peek:hover { border-color: rgba(232, 179, 60, 0.4); background: rgba(255, 255, 255, 0.06); }
.proof-peek:active { transform: scale(0.96); }
.peek-faces { display: inline-flex; }
.peek-faces img {
  width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
  border: 2px solid #0d0d0d; margin-right: -8px;
}
.peek-faces img:last-child { margin-right: 0; }
.peek-copy { font-size: 0.74rem; color: var(--muted); font-weight: 600; white-space: nowrap; }
.peek-copy strong { color: var(--gold); font-weight: 800; }
.peek-arrow { width: 13px; height: 13px; fill: none; stroke: var(--gold); stroke-width: 2.4; }
@media (max-width: 899px) { .peek-copy { font-size: 0.7rem; } }

@media (prefers-reduced-motion: reduce) {
  .rail-card, .vcard.flash { animation: none; }
}

/* ═══════════════ MOBILE DIET (Cesar, Aug 22: "cleaner, less text") ══════════
   One trust element instead of two, one line of reassurance instead of three,
   and the air between blocks tightened so the form arrives a full screen
   sooner. Desktop is untouched. */
@media (max-width: 899px) {
  /* the proof peek IS the trust line on phones — showing both said the same
     thing twice in a row */
  .stars-row { display: none; }
  .top { gap: 0.7rem; padding-top: 1.9rem; }   /* logo sits a touch lower… */
  .top .logo { height: 48px; }                 /* …and a touch bigger */

  .hotline { padding: 0.42rem 0.95rem 0.42rem 0.48rem; }
  .hotline-ring { width: 30px; height: 30px; }
  .hotline-copy strong { font-size: 0.95rem; }

  .hero { padding-top: 0.9rem; }
  .hero h1 { font-size: clamp(2.05rem, 8.6vw, 2.6rem); }
  .hero .sub, .hero > .sub { font-size: 0.92rem; line-height: 1.55; margin-top: 0.8rem; }

  /* the q-label already says how quick it is — the hint under the heading was
     a third line saying it again */
  .step[data-step="3"] > .hint { display: none; }
  .card-shell { margin-top: 1.15rem; }

  .secure-note { font-size: 0.7rem; }
}

/* the typed phrase owns a full line that never collapses — even in the empty
   instant between erasing one phrase and typing the next */
.hero h1 .type-line { display: block; min-height: 1.12em; }

/* ═══════════════ CONVERSION PASS (Aug 22) ═══════════════════════════════════
   One quiet line under the CTA that answers "what am I agreeing to", and one
   quiet line of real results at the moment they're deciding whether to book. */
/* No nowrap: the root page's note fits one line, but a per-ad page can carry
   longer copy ("We only take on a few contractors per market") and nowrap
   clipped it mid-word off the side of the card. Wrap, balanced, centred. */
.cta-note {
  margin-top: 0.7rem; text-align: center;
  font-size: 0.74rem; font-weight: 600; color: var(--muted);
  letter-spacing: 0.01em; line-height: 1.45; text-wrap: balance;
}
@media (max-width: 380px) { .cta-note { font-size: 0.68rem; } }

/* three real results sharing one line above the calendar — a pure-CSS cycle,
   identical for every visitor, no randomness anywhere */
.cal-proof {
  position: relative; height: 1.4em; margin: 0.35rem 0 0.75rem;
  text-align: center; font-size: 0.8rem; color: var(--muted);
}
.cal-proof span {
  position: absolute; inset: 0; opacity: 0;
  animation: cal-proof-cycle 12s infinite;
}
.cal-proof span strong { color: var(--gold); font-weight: 800; }
.cal-proof span:nth-child(2) { animation-delay: 4s; }
.cal-proof span:nth-child(3) { animation-delay: 8s; }
@keyframes cal-proof-cycle {
  0%, 2.5% { opacity: 0; transform: translateY(4px); }
  6%, 27% { opacity: 1; transform: translateY(0); }
  33%, 100% { opacity: 0; transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .cal-proof span { animation: none; }
  .cal-proof span:first-child { opacity: 1; }
}

/* ═══════════════ FOLLOW-CESAR CARD (thank-you page) ═════════════════════════
   The one place the palette breaks gold on purpose: the Instagram gradient is
   the recognition cue, so the ring and button wear it while the card itself
   stays in the site's dark language. */
.ig-card {
  display: flex; align-items: center; gap: 1.1rem;
  max-width: 560px; margin: 0 auto; padding: 1.05rem 1.25rem;
  border-radius: 20px; text-decoration: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 22px 60px -24px rgba(0, 0, 0, 0.8);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.ig-card:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 26px 70px -22px rgba(0, 0, 0, 0.85), 0 0 90px -30px rgba(214, 41, 118, 0.5);
}
.ig-card:active { transform: scale(0.96); }
.ig-ring {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 72px; height: 72px; border-radius: 50%; padding: 3px;
  background: conic-gradient(from 210deg, #F58529, #DD2A7B, #8134AF, #515BD4, #F58529);
}
.ig-ring img {
  width: 100%; height: 100%; border-radius: 50%;
  background: #fff; object-fit: cover;
  border: 3px solid #0d0d0d;
}
.ig-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ig-copy em {
  font-style: normal; font-size: 0.64rem; font-weight: 800;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted);
}
.ig-copy strong { font-size: 1.05rem; font-weight: 800; color: #fff; text-wrap: balance; }
.ig-handle { font-size: 0.8rem; font-weight: 600; color: var(--gold); }
.ig-btn {
  flex: 0 0 auto; margin-left: auto;
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.6rem 1.05rem; border-radius: 999px;
  font-size: 0.85rem; font-weight: 800; color: #fff;
  background: linear-gradient(45deg, #F58529, #DD2A7B 45%, #8134AF 80%);
  box-shadow: 0 10px 26px -12px rgba(221, 42, 123, 0.65);
}
.ig-btn svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 1.9; }
@media (max-width: 560px) {
  .ig-card { gap: 0.85rem; padding: 0.95rem 1rem; }
  .ig-ring { width: 60px; height: 60px; }
  .ig-copy strong { font-size: 0.95rem; }
  .ig-btn { padding: 0.55rem 0.9rem; font-size: 0.8rem; }
}