/* Six-Figure Venue Engine — landing-specific styles, on top of DS tokens. */
@import url('assets/colors_and_type.css');

* { box-sizing: border-box; }
html, body { background: var(--jet-black); color: var(--super-white); }
img { max-width: 100%; display: block; }
button { font-family: var(--font-body); }

/* Page rhythm */
:root {
  --max:    1200px;
  --pad-x:  48px;
  --section: 96px;
}
@media (max-width: 760px) {
  :root { --pad-x: 20px; --section: 64px; }
}
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad-x); }
section { padding-block: var(--section); }

/* Type helpers */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;       /* Oswald already condensed; sentence case for marketing */
  line-height: 1.02;
}
.eyebrow {
  font: 700 12px/1 var(--font-body);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: #7CD7A8;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px;
  background: #2EC27E;
  box-shadow: 0 0 16px rgba(46,194,126,0.7);
}
.lede {
  font: 400 19px/1.55 var(--font-body);
  color: rgba(255,255,255,0.78);
  text-wrap: pretty;
}
.muted { color: var(--cool-grey); }

/* Buttons */
.btn {
  font: 700 15px/1 var(--font-body);
  padding: 16px 22px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 80ms var(--ease-standard), background 200ms, color 200ms, border-color 200ms;
  display: inline-flex; align-items: center; gap: 10px;
  white-space: nowrap;
}
.btn:active { transform: scale(0.98); }
.btn-primary {
  background: #F4FFF8;
  color: var(--emerald-deep);
  border-color: rgba(255,255,255,0.0);
}
.btn-primary:hover { background: #fff; }
.btn-ghost {
  background: transparent;
  color: var(--super-white);
  border: 1px solid rgba(255,255,255,0.22);
}
.btn-ghost:hover { background: rgba(255,255,255,0.06); }
.btn-emerald {
  background: var(--emerald);
  color: var(--super-white);
  border: 1px solid rgba(124,215,168,0.25);
}
.btn-emerald:hover { background: var(--emerald-hover); }
.btn-lg { padding: 20px 28px; font-size: 16px; }

/* Card surfaces */
.card {
  background: var(--charcoal);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-lg);
  padding: 28px;
}
.card-emerald {
  background: var(--emerald-deep);
  border: 1px solid rgba(124,215,168,0.18);
}

/* Header */
header.site {
  position: sticky; top: 0; z-index: 50;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line-dark);
}
header.site .wrap {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 14px;
  gap: 24px;
}
header.site nav { display: flex; gap: 28px; align-items: center; }
header.site nav a {
  font: 500 14px/1 var(--font-body);
  color: rgba(255,255,255,0.75); text-decoration: none; cursor: pointer;
}
header.site nav a:hover { color: #fff; opacity: 1; }
@media (max-width: 760px) {
  header.site nav { display: none; }
}

/* Hero */
.hero {
  position: relative; overflow: hidden;
  padding-top: 96px; padding-bottom: 120px;
  isolation: isolate;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: url('assets/venue-hero.jpg');
  background-size: cover; background-position: center;
  filter: saturate(0.92) brightness(0.65);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(80% 60% at 0% 50%, rgba(7,34,22,0.85) 0%, rgba(0,0,0,0.92) 60%, rgba(0,0,0,0.6) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.8) 100%);
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(44px, 6vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.015em;
  text-transform: none;
  margin: 0;
  max-width: 13ch;
  text-wrap: balance;
}
.hero h1 em {
  color: #7CD7A8;
  font-style: normal;
}
.hero-meta {
  display: flex; gap: 24px; flex-wrap: wrap; align-items: center;
  margin-top: 36px;
}
.hero-trust {
  margin-top: 56px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line-dark);
  padding-top: 28px;
}
.hero-trust > div {
  padding-inline: 24px;
  border-right: 1px solid var(--line-dark);
}
.hero-trust > div:first-child { padding-left: 0; }
.hero-trust > div:last-child { border-right: 0; padding-right: 0; }
.hero-trust .n {
  font-family: var(--font-display); font-weight: 700;
  font-size: 36px; line-height: 1;
  letter-spacing: -0.01em;
  color: #fff;
}
.hero-trust .l {
  font: 500 13px/1.4 var(--font-body);
  color: rgba(255,255,255,0.65);
  margin-top: 8px;
}
@media (max-width: 760px) {
  .hero-trust { grid-template-columns: repeat(2, 1fr); gap: 24px 0; }
  .hero-trust > div:nth-child(2) { border-right: 0; }
}

/* Stat strip / ticker */
.ticker {
  background: var(--emerald-deep);
  border-top: 1px solid rgba(124,215,168,0.15);
  border-bottom: 1px solid rgba(124,215,168,0.15);
  padding: 22px 0;
}
.ticker .row {
  display: flex; gap: 48px; flex-wrap: wrap; align-items: baseline;
  justify-content: center;
  font: 500 16px/1.2 var(--font-body);
}
.ticker .row strong {
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px; color: #fff; letter-spacing: -0.01em;
  margin-right: 8px;
}
.ticker .row span { color: rgba(255,255,255,0.7); }

/* Section labels / titles */
h2.section {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(36px, 4.6vw, 56px); line-height: 1.02;
  letter-spacing: -0.015em; text-transform: none;
  margin: 0; max-width: 18ch; text-wrap: balance;
}
.section-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 56px; }
.section-head .lede { max-width: 64ch; }

/* Two-col split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
@media (max-width: 920px) { .split { grid-template-columns: 1fr; gap: 32px; } }

/* Pipeline mock */
.pipeline {
  background: var(--charcoal);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-lg);
  padding: 20px;
  display: grid; gap: 12px;
  font-family: var(--font-body);
}
.pipe-head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 12px; border-bottom: 1px solid var(--line-dark);
  font-size: 13px; color: var(--cool-grey);
}
.pipe-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pipe-col-h {
  display: flex; align-items: center; justify-content: space-between;
  font: 700 11px/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cool-grey);
  padding: 8px 4px;
}
.pipe-col-h .count {
  background: var(--charcoal-hi); color: #fff;
  padding: 3px 8px; border-radius: 999px;
  font-size: 11px;
}
.pipe-card {
  background: var(--charcoal-hi);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-md);
  padding: 10px;
  font-size: 13px;
  display: flex; flex-direction: column; gap: 4px;
}
.pipe-card .nm { color: #fff; font-weight: 500; }
.pipe-card .mt { color: var(--cool-grey); font-size: 11px; }
.pipe-card.tour { border-color: rgba(124,215,168,0.35); }
.pipe-card.tour .nm::after {
  content: "tour booked";
  font-size: 10px; color: #7CD7A8;
  display: block; width: fit-content; margin: 6px 0 0;
  border: 1px solid rgba(124,215,168,0.35);
  padding: 2px 6px; border-radius: 999px;
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.pipe-card.deposit { border-color: rgba(244,255,248,0.5); background: #1a2722; }
.pipe-card.deposit .nm::after {
  content: "deposit paid";
  font-size: 10px; color: #d8ffe8;
  display: block; width: fit-content; margin: 6px 0 0;
  background: var(--emerald-hover);
  padding: 2px 6px; border-radius: 999px;
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}

/* Numbered card */
.nm-card {
  background: var(--charcoal);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-lg);
  padding: 32px;
  display: flex; flex-direction: column; gap: 16px;
  height: 100%;
}
.nm-card .idx {
  font-family: var(--font-display); font-weight: 700;
  font-size: 18px;
  width: 44px; height: 44px; border-radius: var(--r-md);
  background: var(--emerald-deep);
  color: #7CD7A8;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(124,215,168,0.25);
}
.nm-card h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 24px; line-height: 1.1; text-transform: none;
  letter-spacing: -0.01em; margin: 0;
}
.nm-card p { color: rgba(255,255,255,0.7); font-size: 15px; line-height: 1.55; }

/* Stage gates (LAUNCH→MARKET→CLOSE→SCALE) */
.stages {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--line-dark);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--charcoal);
}
@media (max-width: 920px) { .stages { grid-template-columns: 1fr; } }
.stage {
  padding: 28px 26px 28px;
  border-right: 1px solid var(--line-dark);
  position: relative;
  display: flex; flex-direction: column; gap: 14px;
  min-height: 320px;
}
.stage:last-child { border-right: 0; }
@media (max-width: 920px) {
  .stage { border-right: 0; border-bottom: 1px solid var(--line-dark); }
  .stage:last-child { border-bottom: 0; }
}
.stage .nb {
  display: flex; justify-content: space-between; align-items: center;
  font: 700 11px/1 var(--font-body);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cool-grey);
}
.stage .nb .wk { color: #7CD7A8; }
.stage h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 28px; line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0;
}
.stage ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.stage ul li {
  font: 400 14px/1.5 var(--font-body);
  color: rgba(255,255,255,0.78);
  padding-left: 18px;
  position: relative;
}
.stage ul li::before {
  content: "→"; position: absolute; left: 0; top: 0;
  color: #7CD7A8;
}
.stage.s-launch { background: linear-gradient(180deg, rgba(7,34,22,0.5) 0%, rgba(33,32,32,1) 100%); }
.stage.s-market { background: linear-gradient(180deg, rgba(7,34,22,0.32) 0%, rgba(33,32,32,1) 100%); }
.stage.s-close  { background: linear-gradient(180deg, rgba(7,34,22,0.18) 0%, rgba(33,32,32,1) 100%); }
.stage.s-scale  { background: linear-gradient(180deg, rgba(124,215,168,0.16) 0%, rgba(33,32,32,1) 100%); }

/* Differentiator grid */
.diff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 920px) { .diff-grid { grid-template-columns: 1fr; } }
.diff-card {
  background: var(--charcoal);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-lg);
  padding: 28px;
  display: flex; flex-direction: column; gap: 12px;
}
.diff-card .ico {
  width: 36px; height: 36px; border-radius: var(--r-md);
  background: var(--emerald-deep);
  display: flex; align-items: center; justify-content: center;
  color: #7CD7A8;
}
.diff-card h4 { font: 700 19px/1.2 var(--font-body); margin: 0; }
.diff-card p { color: rgba(255,255,255,0.7); font-size: 14.5px; line-height: 1.55; }

/* Proof gallery */
.proof-section { background: var(--emerald-deep); }
.proof-grid {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px;
}
.proof-card {
  background: #0E1A14;
  border: 1px solid rgba(124,215,168,0.15);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 200ms var(--ease-standard), border-color 200ms;
}
.proof-card:hover { transform: translateY(-2px); border-color: rgba(124,215,168,0.4); }
.proof-card .img-wrap {
  aspect-ratio: 16 / 9;
  background: var(--jet-black);
  overflow: hidden;
}
.proof-card .img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.proof-card .ftr {
  padding: 18px 20px 20px;
  display: flex; flex-direction: column; gap: 4px;
  border-top: 1px solid rgba(124,215,168,0.12);
}
.proof-card .ftr .nm { font-weight: 700; font-size: 15px; }
.proof-card .ftr .ds { font-size: 13px; color: rgba(255,255,255,0.65); }
.proof-card.feature { grid-column: span 7; }
.proof-card.compact { grid-column: span 5; }
.proof-card.half { grid-column: span 6; }
.proof-card.third { grid-column: span 4; }
@media (max-width: 920px) {
  .proof-grid { grid-template-columns: 1fr; }
  .proof-card.feature, .proof-card.compact, .proof-card.half, .proof-card.third { grid-column: span 1; }
}

/* Value stack */
.stack {
  background: var(--charcoal);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-xl);
  padding: 0;
  overflow: hidden;
}
.stack-section {
  padding-block: 0;
  border-bottom: 1px solid var(--line-dark);
}
.stack-section:last-of-type { border-bottom: 0; }
.stack-section-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 22px 28px 14px;
  background: rgba(7,34,22,0.4);
  border-bottom: 1px solid var(--line-dark);
}
.stack-section-head .ttl {
  font: 700 12px/1 var(--font-body);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #7CD7A8;
}
.stack-section-head .sub {
  font: 400 12px/1 var(--font-body);
  color: var(--cool-grey);
}
.stack-row {
  display: grid; grid-template-columns: 1fr auto;
  gap: 24px;
  padding: 18px 28px;
  border-bottom: 1px solid var(--line-dark);
  align-items: center;
}
.stack-row:last-child { border-bottom: 0; }
.stack-row .name { font-size: 15.5px; color: rgba(255,255,255,0.92); }
.stack-row .name small { display: block; color: var(--cool-grey); font-size: 13px; margin-top: 4px; }
.stack-row .val {
  font-family: var(--font-display); font-weight: 700;
  font-size: 18px;
  color: #fff;
  letter-spacing: -0.01em;
}
.stack-total {
  display: grid; grid-template-columns: 1fr auto;
  gap: 24px;
  padding: 24px 28px;
  background: var(--emerald-deep);
  align-items: baseline;
}
.stack-total .lbl { font: 700 13px/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: #7CD7A8; }
.stack-total .v { font-family: var(--font-display); font-weight: 700; font-size: 36px; letter-spacing: -0.01em; }
.stack-total .v small { color: var(--cool-grey); font: 400 13px/1 var(--font-body); margin-left: 8px; }

/* Bonuses */
.bonus-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 920px) { .bonus-grid { grid-template-columns: 1fr; } }
.bonus {
  background: var(--charcoal);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-lg);
  padding: 28px;
  position: relative;
  overflow: hidden;
}
.bonus .tag {
  position: absolute; top: 16px; right: 16px;
  font: 700 11px/1 var(--font-body);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--emerald-deep);
  background: #7CD7A8;
  padding: 6px 10px; border-radius: 999px;
}
.bonus h4 { font: 700 20px/1.2 var(--font-body); margin: 4px 0 10px; }
.bonus p { color: rgba(255,255,255,0.7); font-size: 15px; line-height: 1.55; }
.bonus .v { font: 700 13px/1 var(--font-body); color: #7CD7A8; margin-top: 14px; letter-spacing: 0.04em; text-transform: uppercase; }

/* Guarantees */
.guard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 920px) { .guard-grid { grid-template-columns: 1fr; } }
.guard {
  border-radius: var(--r-xl);
  padding: 36px;
  display: flex; flex-direction: column; gap: 16px;
  border: 1px solid;
  position: relative;
  overflow: hidden;
}
.guard.a {
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(124,215,168,0.18) 0%, rgba(0,0,0,0) 60%),
    var(--charcoal);
  border-color: rgba(124,215,168,0.3);
}
.guard.b {
  background:
    radial-gradient(120% 80% at 0% 100%, rgba(124,215,168,0.18) 0%, rgba(0,0,0,0) 60%),
    var(--charcoal);
  border-color: rgba(124,215,168,0.3);
}
.guard .badge {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 11px/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase;
  color: #7CD7A8;
  align-self: flex-start;
}
.guard h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 32px; line-height: 1.05;
  letter-spacing: -0.01em; text-transform: none;
  margin: 0; text-wrap: balance;
}
.guard p { color: rgba(255,255,255,0.78); font-size: 15.5px; line-height: 1.55; }
.guard ul { margin: 0; padding-left: 18px; color: rgba(255,255,255,0.78); }
.guard ul li { padding-block: 4px; }
.guard .closer {
  margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line-dark);
  font-size: 14px; color: var(--cool-grey);
}

/* Pricing */
.price-card {
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(124,215,168,0.14) 0%, rgba(0,0,0,0) 60%),
    var(--charcoal);
  border: 1px solid rgba(124,215,168,0.3);
  border-radius: var(--r-xl);
  padding: 44px;
}
.price-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: start; }
@media (max-width: 920px) { .price-grid { grid-template-columns: 1fr; gap: 32px; } }
.price-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-block: 12px;
  border-bottom: 1px dashed var(--line-dark);
}
.price-row:last-child { border-bottom: 0; }
.price-row .l { color: rgba(255,255,255,0.85); }
.price-row .v { font-family: var(--font-display); font-weight: 700; font-size: 20px; }
.price-final {
  margin-top: 16px;
  padding: 22px; background: var(--emerald-deep);
  border: 1px solid rgba(124,215,168,0.35);
  border-radius: var(--r-lg);
  display: flex; flex-direction: column; gap: 8px;
}
.price-final .v {
  font-family: var(--font-display); font-weight: 700;
  font-size: 56px; line-height: 1;
  letter-spacing: -0.02em;
  display: flex; gap: 12px; align-items: baseline;
}
.price-final .v s { color: var(--cool-grey); font-size: 24px; font-weight: 500; }
.price-final .lbl { font: 700 11px/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: #7CD7A8; }
.compare {
  display: grid; gap: 12px;
}
.compare-row {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-md);
  padding: 14px 16px;
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
}
.compare-row .l { font-size: 14px; color: rgba(255,255,255,0.78); }
.compare-row .v { font: 700 14px/1 var(--font-body); color: var(--cool-grey); }
.compare-row.us { background: rgba(7,34,22,0.6); border-color: rgba(124,215,168,0.35); }
.compare-row.us .v { color: #7CD7A8; }

/* CTAs */
.cta-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 920px) { .cta-trio { grid-template-columns: 1fr; } }
.cta-card {
  background: var(--charcoal);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-lg);
  padding: 28px;
  display: flex; flex-direction: column; gap: 16px;
}
.cta-card .tag {
  font: 700 11px/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase;
  color: #7CD7A8;
}
.cta-card h4 { font: 700 22px/1.2 var(--font-body); margin: 0; text-wrap: balance; }
.cta-card p { color: rgba(255,255,255,0.7); font-size: 14.5px; line-height: 1.55; }
.cta-card .btn { margin-top: auto; }

/* Mega CTA */
.megacta {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl);
  padding: 64px 56px;
  background:
    radial-gradient(60% 100% at 0% 50%, rgba(124,215,168,0.3) 0%, rgba(0,0,0,0) 60%),
    var(--emerald-deep);
  border: 1px solid rgba(124,215,168,0.3);
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: center;
}
@media (max-width: 920px) { .megacta { grid-template-columns: 1fr; padding: 36px 24px; } }
.megacta h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(32px, 4vw, 48px); line-height: 1.02; letter-spacing: -0.015em;
  text-transform: none; margin: 0; text-wrap: balance;
}

/* FAQ */
.faq { border-top: 1px solid var(--line-dark); }
.faq-row { border-bottom: 1px solid var(--line-dark); }
.faq-row button {
  width: 100%;
  background: transparent; border: 0;
  padding: 24px 0;
  text-align: left;
  color: #fff;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  cursor: pointer;
}
.faq-row .q {
  font: 700 19px/1.3 var(--font-body);
}
.faq-row .chev {
  width: 28px; height: 28px; border-radius: 999px;
  background: var(--charcoal); border: 1px solid var(--line-dark);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 28px;
  transition: transform 200ms var(--ease-standard), background 200ms;
}
.faq-row.open .chev { background: var(--emerald); transform: rotate(45deg); }
.faq-row .a {
  font: 400 16px/1.6 var(--font-body); color: rgba(255,255,255,0.75);
  padding-bottom: 24px;
  max-width: 80ch;
  text-wrap: pretty;
}

/* Footer */
footer.site {
  background: var(--jet-black);
  border-top: 1px solid var(--line-dark);
  padding: 56px 0 40px;
  color: var(--cool-grey);
}
footer.site .wrap {
  display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap;
  align-items: flex-start;
}
footer.site .end {
  margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line-dark);
  font-size: 13px;
}

/* Big quote */
.big-quote {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.1; letter-spacing: -0.01em; text-transform: none;
  max-width: 22ch; text-wrap: balance;
}
.big-quote em {
  color: #7CD7A8; font-style: normal;
}

/* Misc */
.row-tags { display: flex; gap: 10px; flex-wrap: wrap; }
.tag-chip {
  font: 600 12px/1 var(--font-body);
  padding: 8px 12px; border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line-dark);
  color: rgba(255,255,255,0.8);
}
.divider { border-top: 1px solid var(--line-dark); }

/* Animations */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal { animation: fadeUp 600ms var(--ease-standard) both; }

/* Density tweak */
body.density-comfy section { padding-block: calc(var(--section) + 24px); }
body.density-compact section { padding-block: calc(var(--section) - 24px); }

/* ============================================================
   v2 — Ad-Fueled Booking OS copy/offer additions
   ============================================================ */

/* Accent tweak — make the highlight color actually drive eyebrows + emphasis */
:root { --accent-bright: #7CD7A8; }
.eyebrow { color: var(--accent-bright); }
.eyebrow::before { background: var(--accent-bright); }
.hero h1 em, .big-quote em { color: var(--accent-bright); }

/* Mechanism — napkin flow diagram (Fuel -> Engine -> Tours) */
.flow {
  display: grid;
  grid-template-columns: 1fr auto 1.3fr auto 1fr;
  gap: 14px; align-items: stretch;
}
.flow-node {
  background: var(--charcoal);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-lg);
  padding: 26px 24px;
  display: flex; flex-direction: column; gap: 10px;
}
.flow-node.fuel {
  background: radial-gradient(120% 90% at 0% 0%, rgba(124,215,168,0.16) 0%, rgba(0,0,0,0) 60%), var(--charcoal);
  border-color: rgba(124,215,168,0.28);
}
.flow-node.output {
  background: var(--emerald-deep);
  border-color: rgba(124,215,168,0.4);
}
.fn-label {
  font: 700 11px/1 var(--font-body);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-bright);
}
.fn-big {
  font-family: var(--font-display); font-weight: 700;
  font-size: 52px; line-height: 1; letter-spacing: -0.02em; color: #fff;
}
.fn-big span { font-size: 22px; color: var(--cool-grey); letter-spacing: 0; }
.fn-mid {
  font-family: var(--font-display); font-weight: 700;
  font-size: 21px; line-height: 1.15; letter-spacing: -0.01em; color: #fff;
}
.fn-sub { font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,0.72); }
.flow-node.output .fn-sub { color: rgba(255,255,255,0.82); }
.flow-arrow { display: flex; align-items: center; justify-content: center; color: var(--accent-bright); }
@media (max-width: 920px) {
  .flow { grid-template-columns: 1fr; }
  .flow-arrow { transform: rotate(90deg); padding: 4px 0; }
}

/* Read-this-twice callout */
.warn-callout {
  margin-top: 24px;
  display: flex; gap: 16px; align-items: flex-start;
  padding: 20px 24px;
  background: var(--emerald-deep);
  border: 1px solid rgba(124,215,168,0.3);
  border-radius: var(--r-lg);
  font-size: 15.5px; line-height: 1.55; color: rgba(255,255,255,0.85);
}
.warn-callout .wc-icon {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: var(--r-md);
  background: rgba(124,215,168,0.14); color: var(--accent-bright);
  display: flex; align-items: center; justify-content: center;
}

/* Engine components grid */
.engine-grid {
  margin-top: 24px;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
}
.engine-card {
  background: var(--charcoal); border: 1px solid var(--line-dark);
  border-radius: var(--r-lg); padding: 22px 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.engine-card .ec-dot {
  width: 30px; height: 30px; border-radius: 999px;
  background: var(--emerald-deep); border: 1px solid rgba(124,215,168,0.3);
  color: var(--accent-bright);
  display: flex; align-items: center; justify-content: center;
  font: 700 13px/1 var(--font-body);
}
.engine-card h4 { font: 700 16px/1.2 var(--font-body); margin: 0 0 6px; }
.engine-card p { font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,0.68); margin: 0; }
@media (max-width: 1040px) { .engine-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .engine-grid { grid-template-columns: 1fr; } }

/* Delivery sequence header */
.seq-head { margin: 56px 0 24px; display: flex; flex-direction: column; gap: 10px; }
.seq-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(24px, 3vw, 34px); line-height: 1.05; letter-spacing: -0.01em;
  text-transform: none; margin: 0;
}

/* Differentiators — 5-card balanced layout */
.diff-grid.five { grid-template-columns: repeat(6, 1fr); }
.diff-grid.five .diff-card { grid-column: span 2; }
.diff-grid.five .diff-card:nth-child(4),
.diff-grid.five .diff-card:nth-child(5) { grid-column: span 3; }
@media (max-width: 920px) {
  .diff-grid.five { grid-template-columns: 1fr; }
  .diff-grid.five .diff-card,
  .diff-grid.five .diff-card:nth-child(4),
  .diff-grid.five .diff-card:nth-child(5) { grid-column: auto; }
}

/* Comparison table */
.cmp-wrap { margin-top: 28px; overflow-x: auto; }
.cmp-table {
  width: 100%; border-collapse: collapse; min-width: 620px;
  background: var(--charcoal); border: 1px solid var(--line-dark);
  border-radius: var(--r-lg); overflow: hidden;
}
.cmp-table th, .cmp-table td {
  padding: 16px 18px; text-align: center;
  border-bottom: 1px solid var(--line-dark);
}
.cmp-table tbody tr:last-child td { border-bottom: 0; }
.cmp-table thead th {
  font: 700 13px/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--cool-grey); padding-block: 18px;
}
.cmp-table th.rowlabel, .cmp-table td.rowlabel {
  text-align: left; font-weight: 500; color: rgba(255,255,255,0.9); font-size: 15px;
}
.cmp-table th.us {
  color: var(--accent-bright);
  font-size: 15px; letter-spacing: 0.04em;
}
.cmp-table .us { background: rgba(7,34,22,0.55); }
.cmp-table thead th.us { background: var(--emerald-deep); border-bottom-color: rgba(124,215,168,0.3); }
.mk { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 999px; }
.mk.yes { background: rgba(124,215,168,0.16); color: var(--accent-bright); }
.mk.no { color: #5a5a5a; }
.mk.partial { color: var(--cool-grey); font: 700 18px/1 var(--font-body); }

/* NEEDS ASSET production note */
.needs-asset {
  font: 600 12.5px/1.5 var(--font-mono);
  letter-spacing: 0.01em;
  color: #E6B450;
  background: rgba(230,180,80,0.08);
  border: 1px dashed rgba(230,180,80,0.45);
  border-radius: var(--r-md);
  padding: 12px 16px;
}

/* Value stack — proof aside + your-price reveal */
.offer-layout { display: grid; grid-template-columns: 1.45fr 0.9fr; gap: 28px; align-items: start; }
@media (max-width: 1000px) { .offer-layout { grid-template-columns: 1fr; } }
.offer-proof { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 88px; }
@media (max-width: 1000px) { .offer-proof { position: static; } }
.op-card { background: var(--charcoal); border: 1px solid var(--line-dark); border-radius: var(--r-lg); overflow: hidden; }
.op-img { background: var(--jet-black); }
.op-img img { width: 100%; display: block; }
.op-cap { padding: 16px 18px; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,0.72); }
.your-price {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 28px; background: #F4FFF8; color: var(--emerald-deep);
}
.your-price span { font: 700 12px/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; }
.your-price strong { font-family: var(--font-display); font-weight: 700; font-size: 34px; letter-spacing: -0.01em; }
.your-price strong small { font: 500 14px/1 var(--font-body); margin-left: 6px; opacity: 0.7; }

/* Guarantee — hero card + seal */
.guard.hero {
  grid-column: 1 / -1;
  min-height: 0; padding: 36px;   /* override the .hero (top section) 100dvh min-height + its vertical padding, which leak in via the shared `hero` class */
  flex-direction: row; align-items: center; gap: 40px;
  background:
    radial-gradient(90% 120% at 100% 50%, rgba(124,215,168,0.18) 0%, rgba(0,0,0,0) 60%),
    var(--charcoal);
}
.guard.hero::before, .guard.hero::after { content: none; }   /* drop the .hero venue image + gradient overlay on this card */
.guard-hero-body { flex: 1; }
@media (max-width: 920px) { .guard.hero { flex-direction: column; align-items: flex-start; gap: 28px; } }
.seal {
  flex: 0 0 188px; width: 188px; height: 188px;
  position: relative; display: flex; align-items: center; justify-content: center;
}
.seal-ring { position: absolute; inset: 0; animation: sealspin 28s linear infinite; }
.seal-ring .seal-text { font: 700 12.4px var(--font-body); letter-spacing: 0.14em; fill: var(--accent-bright); text-transform: uppercase; }
.seal-core {
  width: 120px; height: 120px; border-radius: 999px;
  background: var(--emerald-deep); border: 1px solid rgba(124,215,168,0.4);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.seal-core .seal-n { font-family: var(--font-display); font-weight: 700; font-size: 46px; line-height: 1; color: #fff; }
.seal-core .seal-l { font: 700 9.5px/1.3 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-bright); margin-top: 4px; }
@keyframes sealspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .seal-ring { animation: none; } }

/* Pricing — anchors + fuel note */
.anchors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 28px; }
@media (max-width: 760px) { .anchors { grid-template-columns: 1fr; } }
.anchor {
  background: var(--charcoal); border: 1px solid var(--line-dark);
  border-radius: var(--r-lg); padding: 24px;
  display: flex; flex-direction: column; gap: 8px;
}
.anchor .a-n { font-family: var(--font-display); font-weight: 700; font-size: 38px; line-height: 1; letter-spacing: -0.015em; color: #fff; }
.anchor .a-n span { font-size: 18px; color: var(--cool-grey); }
.anchor .a-l { font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.7); }
.fuel-note {
  margin-top: 18px; display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 18px; background: var(--emerald-deep);
  border: 1px solid rgba(124,215,168,0.28); border-radius: var(--r-md);
  font-size: 14px; line-height: 1.55; color: rgba(255,255,255,0.82);
}
.fuel-note .fn-ico {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: var(--r-sm);
  background: rgba(124,215,168,0.14); color: var(--accent-bright);
  display: flex; align-items: center; justify-content: center;
}

/* CTA qualifier line */
.cta-qualifier {
  margin-top: 28px; text-align: center;
  font: 500 15px/1.5 var(--font-body); color: rgba(255,255,255,0.7);
  padding: 16px; border: 1px dashed var(--line-dark); border-radius: var(--r-md);
  max-width: 680px; margin-inline: auto;
}

/* Founder close */
.founder { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: center; }
@media (max-width: 920px) { .founder { grid-template-columns: 1fr; gap: 28px; } }
.founder-photo img {
  width: 100%; border-radius: var(--r-xl);
  border: 1px solid var(--line-dark);
}
.founder-body h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px, 3.6vw, 46px); line-height: 1.04; letter-spacing: -0.015em;
  text-transform: none; margin: 0; text-wrap: balance;
}

/* ============================================================
   v3 — teammate comment resolutions
   ============================================================ */

/* Value stack polish (full-width, more premium spacing/type) */
.stack-section-head { padding: 24px 32px 16px; }
.stack-row { padding: 20px 32px; }
.stack-row .name { font-size: 16px; }
.stack-row .name small { font-size: 13.5px; margin-top: 5px; }
.stack-row .val { font-size: 20px; }
.stack-total { padding: 28px 32px; }
.stack-total .v { font-size: 40px; }
.your-price { padding: 24px 32px; }
.your-price strong { font-size: 40px; }

/* Hero VSL placeholder */
.vsl {
  position: relative; margin: 32px 0 4px; max-width: 660px;
  aspect-ratio: 16 / 9; border-radius: var(--r-lg);
  overflow: hidden; border: 1px solid rgba(124,215,168,0.28);
  background: #000; display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.vsl::before {
  content: ""; position: absolute; inset: 0;
  background-image: url('assets/venue-hero.jpg');
  background-size: cover; background-position: center;
  opacity: 0.34; filter: saturate(0.9);
}
.vsl::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(62% 62% at 50% 44%, rgba(0,0,0,0.15), rgba(0,0,0,0.74));
}
.vsl-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.vsl-play {
  width: 74px; height: 74px; border-radius: 999px;
  background: rgba(244,255,248,0.96); color: var(--emerald-deep);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 16px 50px rgba(0,0,0,0.5);
  transition: transform 160ms var(--ease-standard), background 160ms;
}
.vsl:hover .vsl-play { transform: scale(1.06); background: #fff; }
.vsl-label { font: 700 12px/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.94); }
.vsl-sub { font: 500 13px/1.3 var(--font-body); color: rgba(255,255,255,0.6); }
.vsl-tag {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  font: 700 10px/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-bright); background: rgba(7,34,22,0.82);
  border: 1px solid rgba(124,215,168,0.3); padding: 6px 10px; border-radius: 999px;
}

/* Quiz-funnel feature (unique mechanism clarity) */
.qf-feature {
  margin-top: 24px;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 36px; align-items: center;
  background: radial-gradient(100% 130% at 0% 0%, rgba(124,215,168,0.16), rgba(0,0,0,0)), var(--charcoal);
  border: 1px solid rgba(124,215,168,0.26); border-radius: var(--r-xl); padding: 40px;
}
@media (max-width: 920px) { .qf-feature { grid-template-columns: 1fr; gap: 26px; padding: 28px; } }
.qf-feature h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(25px,2.7vw,34px); line-height: 1.06; letter-spacing: -0.01em; margin: 10px 0 0; text-transform: none; }
.qf-feature > div > p { color: rgba(255,255,255,0.8); font-size: 15.5px; line-height: 1.6; margin: 14px 0 0; }
.qf-list { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.qf-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,0.84); }
.qf-list li svg { flex: 0 0 18px; color: var(--accent-bright); margin-top: 2px; }
.qf-routing { background: var(--jet-black); border: 1px solid var(--line-dark); border-radius: var(--r-lg); padding: 22px; }
.qf-routing-h { font: 700 11px/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cool-grey); margin-bottom: 14px; }
.qf-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.qf-day { border-radius: var(--r-sm); border: 1px solid var(--line-dark); padding: 10px 4px 12px; text-align: center; min-height: 96px; display: flex; flex-direction: column; align-items: center; gap: 9px; background: rgba(255,255,255,0.02); }
.qf-day .dn { font: 700 11px/1 var(--font-body); color: var(--cool-grey); text-transform: uppercase; letter-spacing: 0.05em; }
.qf-day .pill { font: 700 8.5px/1.25 var(--font-body); border-radius: 6px; padding: 4px 5px; text-transform: uppercase; letter-spacing: 0.03em; }
.qf-day.peak { background: var(--emerald-deep); border-color: rgba(124,215,168,0.45); }
.qf-day.peak .dn { color: #fff; }
.qf-day.peak .pill { background: var(--accent-bright); color: var(--emerald-deep); }
.qf-day.off .pill { background: rgba(255,255,255,0.06); color: var(--cool-grey); }
.qf-legend { display: flex; gap: 18px; margin-top: 16px; font-size: 12px; color: var(--cool-grey); flex-wrap: wrap; }
.qf-legend span { display: inline-flex; align-items: center; gap: 7px; }
.qf-dot { width: 11px; height: 11px; border-radius: 3px; }

/* Pricing — clean deal card */
.deal-card {
  max-width: 760px; margin: 0 auto; text-align: center;
  background: radial-gradient(90% 130% at 50% 0%, rgba(124,215,168,0.2), rgba(0,0,0,0)), var(--charcoal);
  border: 1px solid rgba(124,215,168,0.38); border-radius: var(--r-xl);
  padding: 52px 48px;
}
@media (max-width: 600px) { .deal-card { padding: 34px 22px; } }
.deal-retail { display: inline-flex; align-items: baseline; gap: 10px; padding: 10px 18px; border: 1px dashed var(--line-dark); border-radius: 999px; color: rgba(255,255,255,0.7); font-size: 14px; }
.deal-retail b { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: #fff; }
.deal-mid { margin: 26px 0 8px; font: 700 13px/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-bright); }
.deal-price { font-family: var(--font-display); font-weight: 700; font-size: clamp(62px, 9vw, 92px); line-height: 0.95; letter-spacing: -0.03em; color: #fff; display: inline-flex; align-items: baseline; gap: 18px; }
.deal-price s { font-size: 0.34em; color: var(--cool-grey); font-weight: 500; letter-spacing: 0; }
.deal-cap { margin-top: 12px; font-size: 15px; color: rgba(255,255,255,0.78); }
.deal-credit { margin: 24px auto 0; max-width: 500px; padding: 14px 18px; background: var(--emerald-deep); border: 1px solid rgba(124,215,168,0.3); border-radius: var(--r-md); font-size: 14.5px; color: rgba(255,255,255,0.86); }
.deal-credit strong { color: var(--accent-bright); }
.deal-fuel { margin-top: 16px; font-size: 13px; color: var(--cool-grey); max-width: 520px; margin-inline: auto; }
.deal-cta { margin-top: 28px; display: flex; justify-content: center; }
.deal-foot { margin-top: 16px; font-size: 13px; color: var(--cool-grey); }

/* Inline booking calendar embed (placeholder) */
.book-wrap { max-width: 880px; margin: 0 auto; }
.book-embed {
  background: var(--super-white); color: #14110f; border-radius: var(--r-xl);
  overflow: hidden; border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
  display: grid; grid-template-columns: 1.25fr 1fr;
}
@media (max-width: 720px) { .book-embed { grid-template-columns: 1fr; } }
.book-cal { padding: 30px; border-right: 1px solid rgba(0,0,0,0.08); }
@media (max-width: 720px) { .book-cal { border-right: 0; border-bottom: 1px solid rgba(0,0,0,0.08); } }
.book-cal-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.book-cal-h .m { font: 700 16px/1 var(--font-body); color: #14110f; }
.book-cal-h .nav { display: flex; gap: 10px; color: #9a9a9a; }
.book-dow { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; margin-bottom: 8px; }
.book-dow span { text-align: center; font: 700 10px/1 var(--font-body); color: #9a9a9a; text-transform: uppercase; letter-spacing: 0.04em; }
.book-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; }
.book-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 8px; font: 500 13px/1 var(--font-body); color: #3a3a3a; }
.book-day.muted { color: #cfcfcf; }
.book-day.avail { background: rgba(7,34,22,0.08); color: var(--emerald-deep); font-weight: 700; cursor: pointer; }
.book-day.sel { background: var(--emerald-deep); color: #fff; font-weight: 700; }
.book-slots { padding: 30px; display: flex; flex-direction: column; gap: 10px; }
.book-slots .sh { font: 700 13px/1.3 var(--font-body); color: #14110f; }
.book-slots .sd { font: 500 12px/1 var(--font-body); color: #8a8a8a; margin-bottom: 8px; }
.book-slot { border: 1px solid rgba(0,0,0,0.16); border-radius: 8px; padding: 13px 14px; font: 600 14px/1 var(--font-body); color: #14110f; text-align: center; cursor: pointer; transition: border-color 120ms, background 120ms, color 120ms; }
.book-slot:hover { border-color: var(--emerald-deep); }
.book-slot.primary { background: var(--emerald-deep); color: #fff; border-color: var(--emerald-deep); }
.book-foot { text-align: center; margin-top: 16px; font-size: 12.5px; color: var(--cool-grey); }

/* ============================================================
   v4 — full-bleed, above-the-fold hero (copy left, VSL right)
   ============================================================ */
.hero {
  min-height: calc(100dvh - 60px);   /* fill viewport below the sticky header */
  display: flex; align-items: center;
  padding-top: 0; padding-bottom: 0;
}
.hero-inner {
  width: 100%;
  max-width: 1680px;
  margin-inline: auto;
  padding: 80px var(--pad-x) 56px;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 56px;
  align-items: center;
  position: relative; z-index: 1;
}
.hero-copy { min-width: 0; }
.hero h1 {
  font-size: clamp(38px, 4.2vw, 64px);
  line-height: 1.0;
  max-width: none;
}
.hero .lede { font-size: clamp(16px, 1.2vw, 19px); }
.hero-meta { margin-top: 32px; }
.hero-visual { min-width: 0; display: flex; justify-content: flex-end; }
.hero-visual .vsl { margin: 0; max-width: 640px; width: 100%; }

@media (max-width: 980px) {
  .hero { min-height: 0; }
  .hero-inner {
    grid-template-columns: 1fr; gap: 30px;
    padding-top: 56px; padding-bottom: 56px;
  }
  .hero h1 { max-width: 20ch; }
  .hero-visual { justify-content: flex-start; }
  .hero-visual .vsl { max-width: 560px; }
}

/* ============================================================
   v6 — Receipts coverflow (center-mode peek carousel)
   ============================================================ */
.proof-carousel { max-width: 1120px; margin: 0 auto; }
.pc-coverflow {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 40%;          /* stage height ≈ center card + breathing room */
  overflow: hidden;             /* clips the side peeks at the container edges */
  --cf-shift: 70%;              /* horizontal peek step per card; widened to a sliver on mobile */
}
.cf-card {
  position: absolute;
  top: 50%; left: 50%;
  width: 60%;
  transform-origin: center center;
  transform: translate(-50%, -50%);
  transition: transform 500ms ease-in-out, opacity 500ms ease-in-out;
  will-change: transform, opacity;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid rgba(124,215,168,0.22);
  background: var(--jet-black);
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
}
.cf-card.is-center { border-color: rgba(124,215,168,0.45); box-shadow: 0 26px 70px rgba(0,0,0,0.55); }
.pc-img { aspect-ratio: 16 / 9; background: var(--jet-black); }
.pc-img img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; }
.pc-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 50px; height: 50px; border-radius: 999px;
  background: rgba(7,34,22,0.74); border: 1px solid rgba(124,215,168,0.45);
  color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background 160ms, transform 120ms, border-color 160ms; z-index: 40;
}
.pc-arrow:hover { background: var(--emerald); border-color: rgba(124,215,168,0.85); }
.pc-arrow:active { transform: translateY(-50%) scale(0.93); }
.pc-arrow.prev { left: 18px; }
.pc-arrow.next { right: 18px; }
.pc-tag {
  position: absolute; top: 16px; right: 16px; z-index: 40;
  background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.18);
  color: #fff; font: 700 12px/1 var(--font-mono); letter-spacing: 0.08em;
  padding: 8px 11px; border-radius: 999px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.pc-meta { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 22px; flex-wrap: wrap; }
.pc-cap { animation: pcFade 440ms var(--ease-standard); }
.pc-cap .nm { font: 700 17px/1.3 var(--font-body); color: #fff; }
.pc-cap .ds { font-size: 14.5px; line-height: 1.45; color: rgba(255,255,255,0.72); margin-top: 5px; }
@keyframes pcFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pc-dots { display: flex; gap: 9px; flex-shrink: 0; }
.pc-dot { width: 9px; height: 9px; border-radius: 999px; background: rgba(255,255,255,0.26); border: 0; padding: 0; cursor: pointer; transition: background 160ms, width 160ms; }
.pc-dot.on { background: var(--accent-bright); width: 28px; }
.pc-dot:hover { background: rgba(255,255,255,0.5); }
@media (prefers-reduced-motion: reduce) { .cf-card { transition: none; } .pc-cap { animation: none; } }
@media (max-width: 760px) {
  .pc-coverflow { padding-bottom: 50%; --cf-shift: 80%; }
  .cf-card { width: 78%; }
  .pc-arrow { width: 42px; height: 42px; }
  .pc-arrow.prev { left: 8px; }
  .pc-arrow.next { right: 8px; }
  .pc-meta { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ============================================================
   v6 — value-stack polish + grand-slam comparison
   ============================================================ */
.stack { box-shadow: 0 24px 70px rgba(0,0,0,0.32); }
.stack-row .name { display: flex; gap: 12px; align-items: flex-start; }
.rcheck {
  flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px; border-radius: 999px;
  background: rgba(124,215,168,0.14); color: var(--accent-bright);
  display: flex; align-items: center; justify-content: center;
}
.rtext small { display: block; color: var(--cool-grey); font-size: 13.5px; margin-top: 5px; }
.stack-subtotal {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 32px; background: rgba(255,255,255,0.015);
  border-top: 1px dashed var(--line-dark);
  font: 700 11px/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cool-grey);
}
.stack-subtotal span:last-child { font-family: var(--font-display); font-size: 16px; letter-spacing: 0; color: rgba(255,255,255,0.85); }
.stack-total { align-items: center; }
.stack-total .v { font-size: 44px; }
.stack-total-sub { margin-top: 6px; color: rgba(255,255,255,0.7); font-size: 14px; }

/* Grand-slam comparison */
.vsplit { display: grid; grid-template-columns: 1fr 1.12fr; gap: 24px; align-items: stretch; }
@media (max-width: 900px) { .vsplit { grid-template-columns: 1fr; } }
.vs-left, .vs-right { border-radius: var(--r-xl); padding: 58px 40px 40px; }
.vs-left { background: var(--jet-black); border: 1px solid var(--line-dark); }
.vs-right {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 100% at 100% 0%, rgba(124,215,168,0.22), rgba(0,0,0,0) 55%), var(--emerald-deep);
  border: 1px solid rgba(124,215,168,0.45);
  box-shadow: 0 36px 90px rgba(0,0,0,0.5);
}
@media (max-width: 900px) { .vs-left, .vs-right { padding: 56px 24px 30px; } }
.vs-eyebrow { font: 700 11px/1.3 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--cool-grey); }
.vs-eyebrow.light { color: var(--accent-bright); }
.vs-h { font-family: var(--font-display); font-weight: 700; font-size: 27px; line-height: 1.02; letter-spacing: -0.01em; margin: 9px 0 24px; text-transform: none; color: #fff; }
.vs-lines { display: flex; flex-direction: column; }
.vs-line { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line-dark); font-size: 14.5px; color: rgba(255,255,255,0.8); }
.vs-line span:last-child { font-family: var(--font-display); font-weight: 700; color: #fff; flex-shrink: 0; }
.vs-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--abyss); }
.vs-total > span { font: 700 12px/1.2 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cool-grey); }
.vs-total strong { font-family: var(--font-display); font-weight: 700; font-size: 40px; color: #fff; letter-spacing: -0.01em; }
.vs-note { margin-top: 14px; font-size: 13px; color: var(--cool-grey); font-style: italic; }

.vs-badge {
  position: absolute; top: 22px; right: 22px;
  background: var(--accent-bright); color: var(--emerald-deep);
  font: 700 11px/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase;
  padding: 8px 13px; border-radius: 999px;
}
.vs-price { display: flex; align-items: baseline; gap: 18px; margin-top: 2px; }
.vs-price s { font-family: var(--font-display); font-size: 30px; color: rgba(255,255,255,0.45); font-weight: 500; }
.vs-price .now { font-family: var(--font-display); font-weight: 700; font-size: clamp(60px, 7.5vw, 86px); line-height: 0.9; letter-spacing: -0.03em; color: #fff; }
.vs-pricetag { margin-top: 8px; font: 700 12px/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-bright); }
.vs-credit { display: flex; gap: 12px; align-items: flex-start; margin-top: 24px; padding: 16px 18px; background: rgba(0,0,0,0.34); border: 1px solid rgba(124,215,168,0.3); border-radius: var(--r-md); font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.88); }
.vc-ico { flex: 0 0 34px; width: 34px; height: 34px; border-radius: var(--r-sm); background: rgba(124,215,168,0.16); color: var(--accent-bright); display: flex; align-items: center; justify-content: center; }
.vs-credit strong { color: var(--accent-bright); }
.vs-clock { margin-top: 18px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.vc-label { font: 700 11px/1.3 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.62); }
.vc-digits { display: flex; align-items: center; gap: 8px; }
.vc-unit { background: rgba(0,0,0,0.42); border: 1px solid rgba(124,215,168,0.25); border-radius: var(--r-sm); padding: 8px 12px; text-align: center; min-width: 56px; }
.vc-unit b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 24px; color: #fff; line-height: 1; }
.vc-unit i { font-style: normal; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cool-grey); }
.vc-sep { color: rgba(124,215,168,0.6); font-weight: 700; }
.vs-cta { width: 100%; justify-content: center; margin-top: 24px; }
.vs-fuel { margin-top: 14px; font-size: 12.5px; color: rgba(255,255,255,0.6); text-align: center; }
.vs-spots { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); }
.vs-spots-h { display: flex; justify-content: space-between; font: 700 11px/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cool-grey); margin-bottom: 10px; }
.vs-spots-bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.vs-spots-bar i { height: 6px; border-radius: 999px; background: rgba(255,255,255,0.14); }
.vs-spots-bar i.open { background: var(--accent-bright); }