/* ==========================================================================
   Revenue Jump — variant C: $1 opt-in page
   Capri (Studio Zash / Shopify Dawn) design system, Heartcore brand.

   From Capri: 1600px width, pill buttons (radius 40), cards at radius 40 with
   1px borders, zero shadows anywhere, flush colour bands, heading scale 140 /
   body 110, blob image masks, marquee band, reveal-on-scroll.

   From the Heartcore brand guide: Navy + Gold + Teal only, F37 Bergman /
   F37 Moon / Work Sans, left-aligned.

   DELIBERATE EXCEPTION: the "AS FEATURED IN" bar is centred, per Shanda's
   art direction (kicker centred, logos evenly spaced, Forbes and Inc
   anchoring the outer positions). Everything else stays left-aligned.
   ========================================================================== */

/* ---------- Fonts ---------- */

@font-face {
  font-family: "F37 Bergman";
  src: url("../fonts/F37Bergman-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "F37 Moon";
  src: url("../fonts/F37Moon-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
  --navy: #003a4a;
  --gold: #fcd271;
  --teal: #afe1da;
  --teal-deep: #0094aa;

  --cream: #f7f2ec;
  --cream-deep: #efe7dd;
  --white: #ffffff;

  --navy-80: rgba(0, 58, 74, 0.8);
  --navy-55: rgba(0, 58, 74, 0.55);
  --navy-15: rgba(0, 58, 74, 0.15);
  --white-72: rgba(255, 255, 255, 0.72);
  --white-24: rgba(255, 255, 255, 0.24);

  --display: "F37 Bergman", Georgia, serif;
  --subhead: "F37 Moon", "Work Sans", system-ui, sans-serif;
  --body: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --maxw: 1600px;
  --readable: 1000px;
  --gutter: clamp(1.25rem, 4vw, 5rem);
  --section: clamp(3.5rem, 6vw, 6.5rem);
  --pill: 999px;
  --card-radius: 40px;
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: var(--body);
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  line-height: 1.6;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--teal-deep);
  outline-offset: 3px;
}

/* ---------- Layout ---------- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--readable {
  max-width: var(--readable);
}

.band {
  padding-block: var(--section);
  scroll-margin-top: 72px;
}

.band--tight {
  padding-block: clamp(2.25rem, 4vw, 3.5rem);
}

.band--cream {
  background: var(--cream);
}

.band--cream-deep {
  background: var(--cream-deep);
}

.band--navy {
  background: var(--navy);
  color: var(--white);
}

.band--navy p {
  color: var(--white-72);
}

.band--gold {
  background: var(--gold);
  color: var(--navy);
}

/* ---------- Typography ---------- */

h1,
h2,
h3 {
  margin: 0;
  font-weight: 400;
  text-wrap: balance;
}

.display-xl,
.display-l,
.display-m {
  font-family: var(--display);
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.display-xl {
  font-size: clamp(2.5rem, 1.5rem + 4.4vw, 5.25rem);
}

.display-l {
  font-size: clamp(2.125rem, 1.45rem + 3vw, 4rem);
}

.display-m {
  font-size: clamp(1.75rem, 1.35rem + 1.9vw, 2.75rem);
}

.subhead {
  font-family: var(--subhead);
  font-weight: 800;
  line-height: 1.3;
  font-size: clamp(1.0625rem, 0.98rem + 0.5vw, 1.375rem);
}

.eyebrow {
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 1.25rem;
  color: var(--teal-deep);
}

.eyebrow--light {
  color: var(--teal);
}

.lead {
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  line-height: 1.5;
}

p {
  margin: 0 0 1.25rem;
  max-width: 68ch;
}

p:last-child {
  margin-bottom: 0;
}

strong {
  font-weight: 600;
}

em {
  font-style: italic;
}

.measure {
  max-width: 68ch;
}

.mt {
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
}

/* ---------- Buttons — Capri pill, 1px border, flat ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 1.25rem 2.75rem;
  border: 1px solid var(--teal);
  border-radius: var(--pill);
  background: var(--teal);
  color: var(--navy);
  font-family: var(--body);
  font-weight: 700;
  font-size: clamp(0.8125rem, 0.78rem + 0.2vw, 0.9375rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease,
    border-color 0.25s ease;
}

.btn:hover {
  background: var(--teal-deep);
  border-color: var(--teal-deep);
  color: var(--white);
}

.btn--outline {
  background: transparent;
  border-color: var(--navy);
  color: var(--navy);
}

.btn--outline:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.btn--sm {
  padding: 0.7rem 1.5rem;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
}

/* The primary offer button is deliberately large — it is the only thing on
   the page being asked for. */
.btn--offer {
  font-size: clamp(0.875rem, 0.8rem + 0.4vw, 1.0625rem);
  padding: 1.4rem 3rem;
}

@media (max-width: 560px) {
  .btn--offer {
    width: 100%;
  }
}

/* The offer button is the whole point of the page, so it gets real breathing
   room rather than sitting hard against the block above and below it. This
   owns the spacing - do not also put .mt on a .cta-block. */
.cta-block {
  margin-block: clamp(2.75rem, 5.5vw, 4.5rem);
}

.cta-note {
  margin: 1.35rem 0 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--navy-80);
}

.band--navy .cta-note {
  color: var(--white-72);
}

.cta-urgency {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: var(--navy-55);
}

.band--navy .cta-urgency {
  color: var(--white-72);
}

/* ---------- Nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--cream);
  border-bottom: 1px solid var(--navy-15);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 68px;
  padding-block: 0.7rem;
}

.nav__brand {
  font-family: var(--subhead);
  font-weight: 800;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--navy);
}

.nav__brand span {
  color: var(--teal-deep);
}

/* ---------- Authority bar ----------
   Centred by explicit art direction. Logos evenly spaced across the full
   width so the outer positions (Forbes, Inc) carry the most weight. */

.authority {
  background: var(--white);
  border-bottom: 1px solid var(--navy-15);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  text-align: center;
}

.authority__kicker {
  margin: 0 0 1.25rem;
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--navy-55);
  max-width: none;
}

.authority__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.25rem, 4vw, 3rem);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  max-width: 1100px;
}

.authority__logos li {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}

/* Grayscale, editorial weight — swap these for official logo SVGs. */
.authority__logo {
  font-family: var(--display);
  font-size: clamp(1.25rem, 0.9rem + 1.5vw, 2.125rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: #6f6f6f;
  filter: grayscale(1);
  opacity: 0.85;
}

.authority__trust {
  margin: clamp(1.25rem, 2.5vw, 1.75rem) auto 0;
  max-width: 62ch;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--navy-55);
}

/* ---------- Video section ---------- */

/* Heading and the vertical clip sit side by side on desktop; the video drops
   below the copy on narrow screens, which is the natural DOM order. */
.video-split {
  display: grid;
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
}

@media (min-width: 950px) {
  .video-split {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

.video-head {
  max-width: 20ch;
}

.video-sub {
  margin: 1.5rem 0 0;
  max-width: 46ch;
  color: var(--navy-80);
}

/* Left-aligned like everything else, but capped so the player never gets
   absurdly wide on a 1600px container. */
.video {
  position: relative;
  margin: clamp(2.25rem, 4vw, 3.25rem) 0 0;
  max-width: var(--readable);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--card-radius);
  border: 1px solid var(--navy-15);
  background: var(--navy);
}

/* The West Palm Beach clip is shot vertical, so the player is 9:16 and
   width-capped rather than filling the column. Swap this class for the
   default 16:9 .video if a landscape cut is ever used instead. */
.video--vertical {
  aspect-ratio: 9 / 16;
  width: min(400px, 100%);
  max-width: none;
  margin: 0;
}

.video > iframe,
.video > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  /* contain, not cover: the box is exactly 9:16 so a matching source fills it
     edge to edge anyway, and anything that does not match letterboxes against
     the navy rather than cropping into the speaker. */
  object-fit: contain;
  background: var(--navy);
}

/* Placeholder shown until a real embed replaces it */
.video__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1rem;
  text-align: center;
  color: var(--white);
  background: var(--teal);
}

.video__play {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: var(--navy);
  display: grid;
  place-items: center;
}

.video__play svg {
  width: 26px;
  height: 26px;
  margin-left: 4px;
  fill: var(--teal);
}

.video__label {
  margin: 0;
  max-width: 40ch;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
}

.video-support {
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  max-width: 62ch;
}

.video-micro {
  margin: 1.25rem 0 0;
  max-width: 68ch;
  color: var(--navy-80);
}

/* ---------- Steps ---------- */

.steps {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 900px) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.step {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid var(--navy-15);
  border-radius: var(--card-radius);
}

.band--navy .step {
  border-color: var(--white-24);
}

.step__num {
  display: block;
  margin-bottom: 0.85rem;
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal-deep);
}

.band--navy .step__num {
  color: var(--teal);
}

.step h3 {
  margin: 0 0 0.9rem;
  font-family: var(--subhead);
  font-weight: 800;
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  line-height: 1.25;
}

.step p {
  margin: 0;
  font-size: 0.9875rem;
  line-height: 1.6;
  color: var(--navy-80);
}

.band--navy .step p {
  color: var(--white-72);
}

/* The "PLUS" callout — paired with a blob-masked photo */
.plus {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
}

@media (min-width: 900px) {
  .plus {
    grid-template-columns: 0.85fr 1.15fr;
  }
}

.plus__tag {
  display: inline-block;
  margin: 0 0 1rem;
  padding: 0.4rem 1rem;
  border-radius: var(--pill);
  background: var(--gold);
  color: var(--navy);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ---------- Blob-masked media ---------- */

.blob {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--blob-image, none) center / cover no-repeat var(--teal);
  clip-path: polygon(var(--blob-1));
}

.blob--3 {
  clip-path: polygon(var(--blob-3));
}

.blob--5 {
  clip-path: polygon(var(--blob-5));
}

.ph {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0.45rem 0.9rem;
  border-radius: var(--pill);
  background: var(--gold);
  color: var(--navy);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- Marquee ---------- */

.marquee {
  overflow: hidden;
  padding-block: clamp(0.9rem, 1.6vw, 1.35rem);
  border-block: 1px solid var(--navy-15);
  background: var(--gold);
  color: var(--navy);
}

.marquee--navy {
  background: var(--navy);
  color: var(--white);
  border-color: var(--white-24);
}

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

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

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-inline: clamp(0.75rem, 1.5vw, 1.5rem);
  font-family: var(--subhead);
  font-weight: 800;
  font-size: clamp(0.875rem, 0.8rem + 0.45vw, 1.25rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.marquee__item::after {
  content: "\25C6";
  font-size: 0.6em;
  opacity: 0.6;
}

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

/* ---------- "As heard on" strip ---------- */

.heard {
  background: var(--cream-deep);
  border-block: 1px solid var(--navy-15);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
}

.heard__kicker {
  margin: 0 0 0.9rem;
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--teal-deep);
  max-width: none;
}

.heard__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: clamp(0.875rem, 0.84rem + 0.2vw, 1rem);
  color: var(--navy-80);
}

.heard__list li {
  display: inline-flex;
  align-items: center;
  gap: 1.25rem;
}

.heard__list li:not(:last-child)::after {
  content: "\2022";
  color: var(--navy-15);
}

/* ---------- Testimonials — heavy grid, tightly stacked ---------- */

.quotes {
  display: grid;
  gap: clamp(1rem, 1.8vw, 1.35rem);
  margin: clamp(2.25rem, 4vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 680px) {
  .quotes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1150px) {
  .quotes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.quote {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: clamp(1.4rem, 2.2vw, 1.9rem);
  border: 1px solid var(--white-24);
  border-radius: var(--card-radius);
}

.quote__text {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--white);
}

.quote__who {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: auto;
}

.quote__avatar {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--navy);
  display: grid;
  place-items: center;
  font-family: var(--subhead);
  font-weight: 800;
  font-size: 0.875rem;
  background-size: cover;
  background-position: center;
}

.quote__name {
  margin: 0;
  font-family: var(--subhead);
  font-weight: 800;
  font-size: 0.9375rem;
  line-height: 1.2;
  color: var(--white);
}

.quote__role {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--white-72);
}

/* Placeholder treatment — must be obvious so it cannot ship by accident */
.quote--placeholder {
  border-style: dashed;
}

.quote__flag {
  align-self: flex-start;
  padding: 0.25rem 0.7rem;
  border-radius: var(--pill);
  background: var(--gold);
  color: var(--navy);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.quote--empty {
  align-items: flex-start;
  justify-content: center;
  min-height: 190px;
  color: var(--white-72);
  font-style: italic;
}

/* ---------- Live purchase proof widget ----------
   Hidden until real purchase data is supplied — see js/main.js. */

.proof {
  position: fixed;
  left: clamp(0.75rem, 2vw, 1.5rem);
  bottom: clamp(0.75rem, 2vw, 1.5rem);
  z-index: 70;
  width: min(340px, calc(100vw - 1.5rem));
  padding: 1rem 1.1rem;
  border: 1px solid var(--navy-15);
  border-radius: 24px;
  background: var(--white);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}

.proof[data-shown="true"] {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.proof[hidden] {
  display: none;
}

.proof__head {
  margin: 0 0 0.5rem;
  padding-right: 1.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-deep);
  max-width: none;
}

.proof__row {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  font-size: 0.875rem;
  line-height: 1.4;
}

.proof__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal-deep);
  transform: translateY(-1px);
}

.proof__text {
  margin: 0;
  max-width: none;
}

.proof__time {
  display: block;
  font-size: 0.75rem;
  color: var(--navy-55);
}

.proof__close {
  position: absolute;
  top: 0.5rem;
  right: 0.55rem;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--navy-55);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.proof__close:hover {
  color: var(--navy);
}

/* ---------- Footer ---------- */

.footer {
  background: var(--navy);
  color: var(--white-72);
  border-top: 1px solid var(--white-24);
  padding-block: 2.5rem;
  font-size: 0.8125rem;
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
}

.footer a {
  color: var(--teal);
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}

.footer p {
  margin: 0;
  max-width: none;
}

/* ---------- Reveal on scroll ----------
   Visible by default; only hidden once JS confirms it can reveal it again. */

.js-anim .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.js-anim .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- Utilities ---------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.85rem 1.25rem;
  background: var(--teal);
  color: var(--navy);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js-anim .reveal {
    opacity: 1;
    transform: none;
  }
}