/* POP 8 — Landing page (Bobbin-style layout) */

html:has(body.landing-page) {
  scroll-behavior: auto;
}

.landing-page {
  --announcement-height: 0px;
  --landing-header-height: var(--header-height);
  background: var(--cream);
  color: var(--chocolate-black);
  scroll-padding-top: var(--landing-header-height);
  overflow-x: clip;
}

.landing-page .landing-announcement {
  display: none;
}

.home-page {
  --announcement-height: 42px;
  --landing-header-height: calc(var(--header-height) + var(--announcement-height));
  scroll-padding-top: var(--landing-header-height);
}

.landing-announcement {
  position: relative;
  z-index: 60;
  background: var(--deep-red);
  color: var(--white);
}

.landing-announcement__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: var(--footer-max);
  margin: 0 auto;
  padding: 10px 24px;
  text-align: center;
}

.landing-announcement p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .landing-announcement__inner {
    padding-inline: 64px;
  }

  .landing-announcement p {
    font-size: 15px;
  }
}

.landing-announcement strong {
  font-weight: 500;
}

.landing-announcement__muted {
  color: rgba(255, 255, 255, 0.82);
}

.landing-page .site-header-inner .site-nav,
.landing-page .site-header-inner .nav-toggle,
.home-page .site-header-inner .site-nav,
.home-page .site-header-inner .nav-toggle {
  display: none;
}

.landing-page .site-header-inner .header-cta,
.home-page .site-header-inner .header-cta {
  display: inline-flex;
}

.landing-page .site-header-inner .header-cta {
  animation: landing-cta-in 1.6s ease 0.4s both;
}

@keyframes landing-cta-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-page .site-header-inner .header-cta {
    animation: none;
  }
}

.landing-page .site-header--hero {
  padding: 0;
  background: transparent;
  pointer-events: none;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

.home-page .site-header--hero {
  padding: 0;
  background: transparent;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

.landing-page .site-header-inner,
.home-page .site-header-inner {
  padding: 0 24px;
}

@media (min-width: 768px) {
  .landing-page .site-header-inner,
  .home-page .site-header-inner {
    padding: 0 64px;
  }
}

.landing-page .site-header--hero.is-scrolled {
  background: transparent;
  box-shadow: none;
}

.home-page .site-header--hero.is-scrolled {
  background: var(--dark-purple);
}

.landing-page .landing-nav {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(720px, calc(100% - 36px));
  height: 46px;
  margin: 14px auto 0;
  padding: 4px 4px 4px 18px;
  border-radius: 999px;
  background: #161616;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  transition: width 0.35s ease, height 0.35s ease, padding 0.35s ease;
}

.landing-page .landing-nav-logo {
  position: relative;
  z-index: 1;
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #fff;
  text-decoration: none;
}

.landing-page .landing-nav-logo span {
  color: #fff;
}

.landing-page .landing-nav-links {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.landing-page .landing-nav-toggle {
  display: none;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 34px;
  margin-left: 2px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.landing-page .landing-nav-chevron {
  display: block;
  width: 14px;
  height: 14px;
  transition: transform 0.25s ease;
}

.landing-page .site-header--hero.is-nav-open .landing-nav-chevron {
  transform: rotate(180deg);
}

.landing-page .landing-nav-toggle:hover,
.landing-page .landing-nav-toggle:focus-visible {
  background: transparent;
  color: var(--yellow);
}

.landing-page .site-header--hero.is-scrolled .landing-nav-toggle {
  display: inline-flex;
}

.landing-page .site-header--hero.is-scrolled:not(.is-nav-open) .landing-nav {
  width: fit-content;
  max-width: calc(100% - 36px);
  height: 42px;
  gap: 10px;
  padding-left: 16px;
}

.landing-page .site-header--hero.is-scrolled:not(.is-nav-open) .landing-nav-links {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.landing-page .site-header--hero.is-scrolled:not(.is-nav-open) .landing-nav-go {
  min-height: 34px;
}

.landing-page .landing-nav-go__icon {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.landing-page .landing-nav-go__icon svg {
  display: block;
  width: 14px;
  height: 14px;
  transition: transform 0.25s ease;
}

.landing-page .site-header--hero.is-scrolled .landing-nav-go {
  gap: 8px;
  padding: 0 14px 0 16px;
  background: #f3e59a;
  color: #161616;
}

.landing-page .site-header--hero.is-scrolled .landing-nav-go__icon {
  display: inline-flex;
}

.landing-page .site-header--hero.is-scrolled .landing-nav-go:hover,
.landing-page .site-header--hero.is-scrolled .landing-nav-go:focus-visible {
  background: #ffe56a;
}

.landing-page .site-header--hero.is-scrolled .landing-nav-go:hover svg,
.landing-page .site-header--hero.is-scrolled .landing-nav-go:focus-visible svg {
  transform: translateX(3px);
}

.landing-page .landing-nav-links a {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
}

.landing-page .landing-nav-links a:hover,
.landing-page .landing-nav-links a:focus-visible {
  color: var(--yellow);
}

.landing-page .landing-nav-go {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  margin-left: auto;
  padding: 0 16px;
  border-radius: 999px;
  background: #f3e59a;
  color: #161616;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
}

.landing-page .landing-nav-go:hover,
.landing-page .landing-nav-go:focus-visible {
  background: #ffe56a;
}

.landing-page .landing-nav a:focus-visible,
.landing-page .landing-nav-toggle:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .landing-page .landing-nav,
  .landing-page .landing-nav-links,
  .landing-page .landing-nav-chevron,
  .landing-page .landing-nav-go__icon svg {
    transition: none;
  }

  .landing-page .site-header--hero.is-scrolled .landing-nav-go:hover svg,
  .landing-page .site-header--hero.is-scrolled .landing-nav-go:focus-visible svg {
    transform: none;
  }
}

@media (max-width: 640px) {
  .landing-page .landing-nav {
    gap: 12px;
    padding-left: 14px;
  }

  .landing-page .landing-nav-logo {
    font-size: 17px;
  }

  .landing-page .landing-nav-links {
    gap: 12px;
  }

  .landing-page .landing-nav-links a {
    font-size: 13px;
  }

  .landing-page .landing-nav-go {
    min-height: 34px;
    padding: 0 12px;
    font-size: 11px;
  }
}

.landing-section {
  padding: clamp(56px, 8vw, 96px) 0;
}

.landing-section-head {
  max-width: 720px;
  margin: 0 auto clamp(32px, 5vw, 56px);
  text-align: center;
}

.landing-section-head--left {
  margin-left: 0;
  text-align: left;
}

.landing-eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mauve);
}

.landing-title {
  font-family: var(--font-title);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--dark-purple);
}

.landing-lead {
  margin-top: 14px;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.6;
  color: rgba(16, 5, 18, 0.72);
}

/* Hero */
.landing-hero {
  position: relative;
  min-height: clamp(520px, 88vh, 760px);
  display: flex;
  align-items: stretch;
  padding: calc(var(--landing-header-height) + 48px) 24px 56px;
  color: var(--white);
  overflow: hidden;
}

.landing-page .landing-hero {
  min-height: 0;
  align-items: center;
  padding-top: calc(var(--header-height) + 100px);
  padding-bottom: 156px;
  background-color: var(--dark-purple);
  background-image: none;
}

.landing-page .landing-hero .brand-banner-bg-grid {
  --grid-op-min: 0.42;
  --grid-op-max: 0.72;
  --grid-vignette: 0.42;
  --grid-vignette-edge: 0.86;
  --grid-filter: saturate(0.82) brightness(0.88);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 96%);
}

@keyframes landing-grid-fade {
  0%, 100% { opacity: var(--grid-op-min); }
  50% { opacity: var(--grid-op-max); }
}

.landing-page .landing-hero.is-quiet,
.landing-page .landing-hero.is-quiet .brand-banner-bg-grid,
.landing-page .landing-hero.is-quiet .brand-banner-bg-grid img,
.landing-page .landing-hero.is-quiet .accent,
.landing-page .landing-hero.is-quiet .explore-flip,
.landing-page .landing-hero.is-quiet .explore-arrow,
.landing-page .landing-hero.is-quiet .pop3d-card__face--built::after {
  animation-play-state: paused;
}

.landing-page .landing-hero .brand-banner-bg-grid::after {
  background:
    linear-gradient(90deg, rgb(17 5 20 / 0.78) 0%, rgb(17 5 20 / 0.34) 38%, transparent 62%),
    radial-gradient(ellipse 70% 65% at 50% 48%, rgb(20 0 24 / var(--grid-vignette)) 0%, rgb(20 0 24 / var(--grid-vignette-edge)) 72%),
    linear-gradient(180deg, rgb(20 0 24 / 0.35) 0%, rgb(20 0 24 / 0.7) 100%);
}

.landing-page .landing-hero .brand-banner-bg-grid img {
  opacity: 0;
  animation: none;
}

.landing-page .landing-hero .brand-banner-bg-grid img.is-in {
  animation:
    landingHeroGridIn 0.4s ease both,
    landing-grid-fade 7s ease-in-out infinite;
  animation-delay: 0s, calc(0.4s + var(--i) * 0.12s);
}

@keyframes landingHeroGridIn {
  from { opacity: 0; }
  to { opacity: var(--grid-op-min); }
}

.landing-hero.pop3d-stage {
  margin-bottom: 0;
  border-radius: 0;
  border-left: none;
  border-right: none;
}

.landing-hero.pop3d-stage::before {
  opacity: 0.06;
}

@media (min-width: 768px) {
  .landing-hero {
    padding-left: 64px;
    padding-right: 64px;
  }
}

.landing-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--footer-max);
  margin: 0 auto;
  display: grid;
  align-items: center;
  gap: 40px;
}

@media (min-width: 960px) {
  .landing-hero-inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
    gap: 48px;
  }
}

.landing-hero-copy {
  max-width: 620px;
}

.landing-hero-kicker {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--yellow);
}

.landing-hero-title {
  font-family: var(--font-title);
  font-size: clamp(36px, 5.5vw, 64px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.landing-page .landing-hero-title {
  max-width: 11ch;
  font-size: clamp(52px, 7vw, 88px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.landing-page .landing-hero-title .accent {
  display: inline-block;
  white-space: nowrap;
  padding-inline: 0.08em;
  margin-inline: -0.08em;
  color: transparent;
  background-image: linear-gradient(
    100deg,
    var(--yellow) 0%,
    var(--yellow) 36%,
    #fff6d4 50%,
    var(--yellow) 64%,
    var(--yellow) 100%
  );
  background-size: 300% 100%;
  background-repeat: no-repeat;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: hero-accent-shimmer 11s ease-in-out infinite;
}

@keyframes hero-accent-shimmer {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: 0% 0;
  }
}

.landing-page .landing-hero-title .hero-power {
  animation: hero-power-fade 3.6s ease-in-out forwards;
}

@keyframes hero-power-fade {
  0% {
    color: var(--white);
  }

  100% {
    color: var(--warm-orange);
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-page .landing-hero-title .accent {
    animation: none;
    color: var(--yellow);
    background: none;
    -webkit-text-fill-color: var(--yellow);
  }

  .landing-page .landing-hero-title .hero-power {
    animation: none;
    color: var(--warm-orange);
  }

  .landing-page .landing-hero-explore .explore-flip,
  .landing-page .landing-hero-explore .explore-arrow {
    animation: none;
  }
}

.landing-hero-text {
  margin-top: 18px;
  max-width: 520px;
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
}

.landing-page .landing-hero-text {
  max-width: 42ch;
  font-size: 17px;
  color: rgba(248, 246, 246, 0.74);
}

.landing-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.landing-hero-actions .btn-ghost-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 24px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-pill);
  font-weight: 600;
  color: var(--white);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.landing-hero-actions .btn-ghost-light:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.55);
}

.landing-hero-ghost {
  font-weight: 600;
  color: var(--white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.landing-hero-ghost:hover {
  color: var(--yellow);
}

.landing-hero-explore {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  font-weight: 600;
  color: var(--white);
}

.landing-hero-explore img {
  transform: rotate(90deg);
}

.landing-hero-explore:hover {
  color: var(--yellow);
}

.landing-page .landing-hero-explore {
  perspective: 280px;
}

.landing-page .landing-hero-explore .explore-arrow {
  display: inline-flex;
  animation: hero-explore-drop 6s ease-in infinite;
}

.landing-page .landing-hero-explore .explore-flip {
  display: inline-grid;
  transform-origin: center center;
  transform-style: preserve-3d;
  animation: hero-explore-flip 6s ease-in-out infinite;
}

.landing-page .landing-hero-explore .explore-face {
  grid-area: 1 / 1;
  backface-visibility: hidden;
  transform: rotateX(0deg);
}

.landing-page .landing-hero-explore .explore-face--back {
  transform: rotateX(180deg);
}

@keyframes hero-explore-flip {
  0% {
    transform: rotateX(0deg);
  }

  20% {
    transform: rotateX(-180deg);
  }

  100% {
    transform: rotateX(-180deg);
  }
}

@keyframes hero-explore-drop {
  0%,
  22.5% {
    transform: translateY(0);
    opacity: 1;
  }

  41.75% {
    transform: translateY(12px);
    opacity: 0;
  }

  42% {
    transform: translateY(-4px);
    opacity: 0;
  }

  50%,
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.landing-hero-card-slot {
  display: flex;
  justify-content: center;
  justify-self: center;
  width: 100%;
  --pop3d-radius: 22px;
  --pop3d-depth: 14px;
  --pop3d-mono: "SF Mono", "Roboto Mono", "Consolas", monospace;
}

.landing-hero-card-slot .pop3d-card__layer,
.landing-hero-card-slot .pop3d-card__face {
  border-radius: var(--pop3d-radius);
}

.landing-hero-card-slot .pop3d-card--ember-edge .pop3d-card__face--front {
  border-color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 32px 80px rgba(0, 0, 0, 0.45);
}

.landing-hero-card-slot .pop3d-item {
  width: 100%;
  display: flex;
  justify-content: center;
}

.landing-hero-card-slot .pop3d-scene--reference {
  --rx: 9deg;
  --ry: -14deg;
  width: min(100%, 340px);
  --pop3d-card-width: 300px;
  --pop3d-card-height: 477px;
  --pop3d-radius: 19px;
}

.landing-hero-card-slot .pop3d-card--ember-edge .pop3d-card__face--built {
  padding: 0;
  background: #140018;
  border-color: transparent;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.45);
}

.landing-hero-card-slot .pop3d-card--ember-edge .pop3d-card__face--built::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--card-shimmer),
    var(--yellow),
    var(--warm-orange),
    var(--cream),
    var(--yellow)
  );
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: landing-card-shimmer 4.5s linear infinite;
}

@property --card-shimmer {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes landing-card-shimmer {
  to { --card-shimmer: 360deg; }
}

.landing-hero-card-slot .pop3d-card__face--built .pop3d-card__hole {
  position: absolute;
  top: 6.86%;
  left: 50%;
  z-index: 2;
  width: 17.7%;
  height: 2%;
  border-radius: 999px;
  background: #07030a;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.85);
  transform: translateX(-50%);
}

.landing-hero-card-slot .pop3d-card__face--built .pop3d-card__meta {
  position: absolute;
  top: 6.1%;
  left: 7.7%;
  right: 9.8%;
  z-index: 2;
  margin: 0;
  align-items: flex-start;
}

.landing-hero-card-slot .pop3d-card__face--built .pop3d-card__meta .pop3d-card__brand,
.landing-hero-card-slot .pop3d-card__face--built .pop3d-card__meta .pop3d-card__index {
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
}

.landing-hero-card-slot .pop3d-card__face--built .pop3d-card__meta .pop3d-card__index {
  font-weight: 700;
  color: var(--yellow);
}

.landing-hero-card-slot .pop3d-card__face--built .pop3d-card__media {
  position: absolute;
  left: 6.36%;
  top: 21%;
  width: 87.27%;
  height: 55.14%;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  background: #2a0000;
}

.landing-hero-card-slot .pop3d-card__face--built .pop3d-card__media img,
.landing-hero-card-slot .pop3d-card__face--built .pop3d-card__media img.is-in {
  opacity: 1;
  object-fit: cover;
}

.landing-hero-card-slot .pop3d-card__face--built .pop3d-card__media img {
  opacity: 0;
  transition: opacity 0.35s ease;
}

.landing-hero-card-slot .pop3d-card__face--built .pop3d-card__footer {
  display: contents;
}

.landing-hero-card-slot .pop3d-card__face--built .pop3d-card__barcode {
  position: absolute;
  left: 6.36%;
  top: 85.57%;
  width: 27.73%;
  height: 7%;
  opacity: 1;
  background: url("../assets/images/hero-card/live-in-the-end-barcode.png") center / 100% 100% no-repeat;
}

.landing-hero-card-slot .pop3d-card__face--built .pop3d-card__serial {
  position: absolute;
  left: 38.6%;
  top: 88.15%;
  margin: 0;
  font-family: var(--font-title);
  font-size: 10px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  line-height: 1;
  color: rgba(248, 246, 246, 0.92);
}

.landing-hero-card-slot .pop3d-card__back-copy .pop3d-card__back-kicker {
  position: absolute;
  left: 8%;
  top: 20.7%;
  margin: 0;
  font-family: var(--font-title);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--warm-orange);
}

.landing-hero-card-slot .pop3d-card--reference.pop3d-card--type-b .pop3d-card__face--built .pop3d-card__meta {
  margin: 0;
}

.landing-hero-card-slot .pop3d-card__back-copy .pop3d-card__back-rule {
  position: absolute;
  left: 8%;
  top: 34.7%;
  width: 73.4%;
  margin: 0;
  padding: 0;
  font-family: var(--font-title);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.22;
  color: #fff;
}

.landing-hero-card-slot .pop3d-card__back-copy .pop3d-card__back-rule strong {
  font-weight: 700;
  color: #fff;
}

.landing-hero-card-slot .pop3d-card__layer--depth-1 {
  background: #2a1224;
}

.landing-hero-card-slot .pop3d-card__layer--depth-2 {
  background: #1a0c16;
}

.landing-hero-card-slot .pop3d-card__layer--depth-3 {
  background: #10060e;
}

.landing-hero-card-slot .pop3d-card__media img {
  opacity: 0;
  transition: opacity 0.35s ease;
}

.landing-hero-card-slot .pop3d-card__media img.is-in {
  opacity: 0.82;
}

.landing-hero-card-slot .pop3d-card__hint--flip {
  margin-top: 14px;
  font-family: var(--pop3d-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(255, 255, 255, 0.38);
}

@media (prefers-reduced-motion: reduce) {
  .landing-hero-card-slot .pop3d-scene:not(.is-active) .pop3d-card {
    animation: none;
  }

  .landing-hero-card-slot .pop3d-card--ember-edge .pop3d-card__face--built::after {
    animation: none;
  }

  .landing-page .landing-hero .brand-banner-bg-grid img {
    opacity: var(--grid-op-min);
    animation: none;
  }

  .landing-hero-card-slot .pop3d-card__media img {
    opacity: 1;
    transition: none;
  }
}

/* Homepage — POP grid below new hero */
.home-page .home-pop-grid {
  padding: 40px 24px 48px;
}

@media (min-width: 768px) {
  .home-page .home-pop-grid {
    padding-left: 64px;
    padding-right: 64px;
  }
}

/* POP grid — matches homepage hero grid */
.landing-pop-grid {
  background: var(--dark-purple);
  padding: 40px 24px 56px;
}

@media (min-width: 768px) {
  .landing-pop-grid {
    padding-left: 64px;
    padding-right: 64px;
  }
}

.landing-pop-grid .hero-flip-wrap {
  margin: 0 auto;
}

.landing-statement {
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--header-height));
  min-height: calc(100dvh - var(--header-height));
  padding: 72px 24px;
  background: var(--dark-purple);
  color: var(--white);
}

.landing-page .landing-statement {
  display: block;
  min-height: 0;
  padding: 120px 24px;
}

.landing-page .landing-statement .landing-hero-inner {
  display: block;
}

.landing-page .landing-statement .landing-statement-words {
  width: 100%;
  max-width: none;
}

.landing-page .landing-statement-word:not(.landing-statement-word--brand):not(.landing-statement-word--accent) {
  color: var(--light-mauve);
}

@media (min-width: 768px) {
  .landing-page .landing-statement {
    padding-left: 64px;
    padding-right: 64px;
  }
}

.landing-wave-block {
  background: var(--dark-purple);
  color: var(--cream);
}

.landing-wave-intro {
  padding: 88px 24px 36px;
  text-align: center;
}

.landing-wave-title {
  margin: 0;
  font-family: "SF Mono", "Roboto Mono", Consolas, monospace;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--yellow);
}

.landing-wave {
  position: relative;
  height: calc(min(72vh, 720px) + 120px);
  min-height: 640px;
  background: var(--dark-purple);
  overflow: hidden;
  touch-action: pan-y;
}

.landing-wave canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: calc(100% - 120px);
  opacity: 0;
  transition: opacity 0.6s ease;
}

.landing-wave.is-ready canvas {
  opacity: 1;
}

.landing-wave-close {
  position: absolute;
  z-index: 3;
  margin: 0;
  padding: 7px 10px;
  border: 1px solid rgb(17 5 20 / 0.14);
  border-radius: 999px;
  background: rgb(248 246 246 / 0.94);
  transform: translate(calc(-100% - 12px), 12px);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
  color: var(--chocolate-black);
  cursor: pointer;
  white-space: nowrap;
}

.landing-wave-close[hidden] {
  display: none;
}

.landing-wave-view {
  position: absolute;
  left: 50%;
  z-index: 2;
  margin: 0;
  transform: translateX(-50%);
  font-family: "SF Mono", "Roboto Mono", Consolas, monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
  color: var(--yellow);
  pointer-events: none;
  white-space: nowrap;
}

.landing-wave-view[hidden] {
  display: none;
}

@media (min-width: 768px) {
  .landing-wave-intro {
    padding-left: 64px;
    padding-right: 64px;
  }
}

@media (max-width: 800px) {
  .landing-wave-intro {
    padding-top: 64px;
  }

  .landing-wave {
    height: calc(70vh + 120px);
    min-height: 540px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-wave canvas {
    transition: none;
  }
}

.landing-steps {
  overflow: hidden;
  background-color: var(--dark-purple);
  color: var(--cream);
}

.landing-steps-inner {
  padding: 120px 48px 96px;
}

.landing-steps-heading {
  font-family: var(--font-title);
  font-size: clamp(64px, 8.4vw, 120px);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.9;
  text-align: center;
  transform: translateX(70vw);
}

.landing-steps-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 36px 28px;
  max-width: 1120px;
  margin: 72px auto 0;
  list-style: none;
  text-align: center;
}

.landing-steps-item {
  opacity: 0;
  transform: translateY(36px);
}

.landing-steps-num {
  margin-bottom: 18px;
  font-family: var(--font-title);
  font-size: clamp(56px, 6vw, 84px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.9;
}

.landing-steps-title {
  margin-bottom: 10px;
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.landing-steps-text {
  max-width: 230px;
  margin: 0 auto;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  color: rgba(248, 246, 246, 0.72);
}

@media (max-width: 800px) {
  .landing-steps-inner {
    padding: 72px 24px;
  }

  .landing-steps-list {
    grid-template-columns: 1fr 1fr;
    gap: 40px 20px;
    margin-top: 48px;
  }

  .landing-steps-heading {
    font-size: clamp(48px, 12vw, 72px);
  }
}

@media (max-width: 520px) {
  .landing-steps-list {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-steps {
    background-color: var(--cream);
    color: var(--chocolate-black);
  }

  .landing-steps-heading,
  .landing-steps-item {
    opacity: 1;
    transform: none;
  }

  .landing-steps-text {
    color: rgba(16, 5, 18, 0.62);
  }
}

.landing-voices {
  background: var(--royal-purple);
  padding: clamp(72px, 9vw, 112px) 0 80px;
}

.landing-voices-title {
  margin: 0 auto 56px;
  padding: 0 24px;
  font-family: var(--font-title);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.95;
  text-align: center;
  color: var(--cream);
}

.landing-voices-scroller {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 4px max(24px, calc((100% - 1040px) / 2)) 8px;
  -webkit-overflow-scrolling: touch;
}

.landing-voices-scroller::-webkit-scrollbar {
  display: none;
}

.landing-voices-card {
  flex: 0 0 min(340px, 78vw);
  scroll-snap-align: start;
  min-height: 280px;
  padding: 28px 24px 32px;
  border-radius: 22px;
  background: var(--cream);
  border: 1px solid rgba(16, 5, 18, 0.06);
}

.landing-voices-card h3 {
  margin-bottom: 10px;
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.25;
  color: var(--chocolate-black);
}

.landing-voices-card p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--mauve);
}

.landing-statement-words {
  width: min(980px, 100%);
  margin: 0 auto;
  font-family: var(--font-title);
  font-size: clamp(36px, 6vw, 72px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.98;
}

.landing-statement-word {
  color: var(--mauve);
  font-weight: 600;
}

.landing-statement-word--brand {
  color: var(--white);
  font-weight: 800;
}

.landing-statement-word--accent {
  color: var(--yellow);
  font-weight: 800;
}

@media (prefers-reduced-motion: reduce) {
  .landing-statement-word {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    color: var(--cream);
  }

  .landing-statement-word--brand {
    color: var(--white);
  }

  .landing-statement-word--accent {
    color: var(--yellow);
  }

  .landing-page .landing-statement-word:not(.landing-statement-word--brand):not(.landing-statement-word--accent) {
    color: #ebe6ee !important;
  }
}

.landing-pop-detail-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  font-weight: 600;
  color: var(--dark-purple);
}

.landing-pop-detail-link:hover {
  color: var(--warm-orange);
}

/* Three cards */
.landing-cards {
  background: var(--white);
}

.landing-card-grid {
  display: grid;
  gap: 24px;
}

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

.landing-card {
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  background: var(--cream);
  border: 1px solid rgba(16, 5, 18, 0.06);
}

.landing-card-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.landing-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.landing-card:hover .landing-card-media img {
  transform: scale(1.03);
}

.landing-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 22px 22px 24px;
}

.landing-card-body h3 {
  font-family: var(--font-title);
  font-size: 22px;
  font-weight: 800;
  color: var(--dark-purple);
}

.landing-card-body p {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(16, 5, 18, 0.72);
  flex: 1;
}

.landing-card-body .btn {
  align-self: flex-start;
  margin-top: 18px;
  padding: 12px 18px 12px 22px;
  font-size: 14px;
}

/* Four features */
.landing-features-grid {
  display: grid;
  gap: 20px;
}

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

@media (min-width: 1024px) {
  .landing-features-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.landing-feature {
  padding: 24px 22px;
  border-radius: 18px;
  background: var(--white);
  border: 1px solid rgba(16, 5, 18, 0.06);
}

.landing-feature-icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(255, 184, 31, 0.18);
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 800;
  color: var(--dark-purple);
}

.landing-feature h3 {
  margin-top: 16px;
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 700;
  color: var(--dark-purple);
}

.landing-feature p {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(16, 5, 18, 0.68);
}

/* Preview search bar */
.landing-search {
  position: relative;
  background: var(--cream);
  overflow: hidden;
}

.landing-search-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, rgba(255, 184, 31, 0.28) 0%, rgba(255, 184, 31, 0) 62%);
  pointer-events: none;
}

.landing-search-inner {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.landing-search-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
  padding: 10px;
  border-radius: var(--radius-pill);
  background: var(--white);
  border: 1px solid rgba(16, 5, 18, 0.08);
  box-shadow: 0 16px 40px rgba(17, 5, 20, 0.08);
}

@media (min-width: 640px) {
  .landing-search-form {
    flex-direction: row;
    align-items: center;
    padding: 8px 8px 8px 24px;
  }
}

.landing-search-form .email-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: 16px;
  color: var(--dark-purple);
}

.landing-search-form .email-input::placeholder {
  color: rgba(16, 5, 18, 0.45);
}

.landing-search-form .email-input:focus {
  outline: none;
}

.landing-search-form .btn {
  justify-content: center;
  width: 100%;
}

@media (min-width: 640px) {
  .landing-search-form .btn {
    width: auto;
  }
}

/* Dark stats bar */
.landing-stats {
  padding: 40px 0;
  background: var(--dark-purple);
  color: var(--white);
}

.landing-stats-grid {
  display: grid;
  gap: 28px;
}

@media (min-width: 768px) {
  .landing-stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
  }
}

.landing-stat {
  text-align: center;
}

.landing-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
  border-radius: 12px;
  background: rgba(255, 184, 31, 0.16);
  color: var(--yellow);
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 800;
}

.landing-stat strong {
  display: block;
  font-family: var(--font-title);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}

.landing-stat span {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
}

/* Testimonials */
.landing-testimonials {
  background: var(--white);
}

.landing-testimonial-track-wrap {
  position: relative;
}

.landing-testimonial-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, calc(33.333% - 16px));
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.landing-testimonial-track::-webkit-scrollbar {
  display: none;
}

.landing-testimonial-card {
  scroll-snap-align: start;
  padding: 28px 24px;
  border-radius: 20px;
  background: var(--cream);
  border: 1px solid rgba(16, 5, 18, 0.06);
}

.landing-testimonial-card blockquote {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(16, 5, 18, 0.82);
}

.landing-testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

.landing-testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--yellow);
}

.landing-testimonial-author strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--dark-purple);
}

.landing-testimonial-author span {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--mauve);
}

.landing-testimonial-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

.landing-testimonial-nav button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(16, 5, 18, 0.12);
  background: var(--white);
  font-size: 20px;
  line-height: 1;
  color: var(--dark-purple);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.landing-testimonial-nav button:hover {
  background: var(--yellow);
  border-color: var(--yellow);
}

/* Comparison table */
.landing-compare {
  background: var(--cream);
}

.landing-compare-table-wrap {
  overflow-x: auto;
  border-radius: 20px;
  border: 1px solid rgba(16, 5, 18, 0.08);
  background: var(--white);
}

.landing-compare-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}

.landing-compare-table th,
.landing-compare-table td {
  padding: 18px 20px;
  text-align: center;
  border-bottom: 1px solid rgba(16, 5, 18, 0.06);
  font-size: 14px;
}

.landing-compare-table th:first-child,
.landing-compare-table td:first-child {
  text-align: left;
  font-weight: 600;
  color: var(--dark-purple);
}

.landing-compare-table thead th {
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: 800;
  background: var(--cream);
}

.landing-compare-table thead th.is-highlight {
  background: var(--yellow);
  color: var(--dark-purple);
}

.landing-compare-table tbody tr:last-child td {
  border-bottom: none;
}

.landing-compare-yes {
  color: var(--cool-green);
  font-weight: 700;
}

.landing-compare-no {
  color: rgba(16, 5, 18, 0.35);
}

.landing-compare-table td.is-highlight {
  background: rgba(255, 184, 31, 0.08);
}

/* Pricing */
.landing-pricing {
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 184, 31, 0.16) 0%, transparent 45%),
    radial-gradient(circle at 80% 100%, rgba(255, 184, 31, 0.12) 0%, transparent 40%),
    var(--cream);
}

.landing-search-form .form-success {
  width: 100%;
  margin: 4px 0 0;
  padding: 0 8px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--cool-green);
}

.landing-waitlist-block {
  max-width: 760px;
  margin: 48px auto 0;
  text-align: center;
}

.landing-waitlist-title {
  font-family: var(--font-title);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 800;
  line-height: 1.15;
  color: var(--dark-purple);
}

.landing-pricing-grid {
  display: grid;
  gap: 20px;
}

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

@media (min-width: 1100px) {
  .landing-pricing-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.landing-price-card {
  display: flex;
  flex-direction: column;
  padding: 26px 22px;
  border-radius: 20px;
  background: var(--white);
  border: 1px solid rgba(16, 5, 18, 0.08);
}

.landing-price-card.is-featured {
  border-color: var(--yellow);
  box-shadow: 0 18px 44px rgba(255, 184, 31, 0.18);
}

.landing-price-card h3 {
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 800;
  color: var(--dark-purple);
}

.landing-price-card .landing-price {
  margin-top: 10px;
  font-family: var(--font-title);
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
  color: var(--dark-purple);
}

.landing-price-card .landing-price small {
  font-size: 14px;
  font-weight: 600;
  color: var(--mauve);
}

.landing-price-list {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.landing-price-list li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(16, 5, 18, 0.75);
}

.landing-price-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--cool-green);
  font-weight: 700;
}

.landing-price-card .btn,
.landing-price-card .landing-card-cta {
  margin-top: 22px;
  width: 100%;
  justify-content: center;
}

.landing-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 22px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  background: var(--yellow);
  color: var(--dark-purple);
}

.landing-card-cta--dark {
  background: var(--dark-purple);
  color: var(--white);
}

/* FAQ on yellow */
.landing-faq {
  background: var(--yellow);
}

.landing-faq .landing-title {
  color: var(--dark-purple);
}

.landing-faq-grid {
  display: grid;
  gap: 32px;
}

@media (min-width: 960px) {
  .landing-faq-grid {
    grid-template-columns: 0.85fr 1.15fr;
    align-items: start;
  }
}

.landing-faq .faq-item {
  border-bottom: 1px solid rgba(17, 5, 20, 0.12);
}

.landing-faq .faq-trigger {
  padding: 18px 0;
}

.landing-faq .faq-question {
  color: var(--dark-purple);
}

.landing-faq .accordion-panel-inner p {
  color: rgba(17, 5, 20, 0.78);
}

/* About split */
.landing-about-grid {
  display: grid;
  gap: 32px;
  align-items: center;
}

@media (min-width: 960px) {
  .landing-about-grid {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }
}

.landing-about-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 16px;
  background: rgba(255, 184, 31, 0.22);
  font-family: var(--font-title);
  font-size: 20px;
  font-weight: 800;
  color: var(--dark-purple);
}

.landing-about-copy p {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(16, 5, 18, 0.76);
}

.landing-about-copy p:first-of-type {
  margin-top: 0;
}

.landing-about-image {
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 5 / 4;
  background: var(--dark-purple);
}

.landing-about-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Quiz in the final band — yellow ground, same quiz as the main site */
.landing-page .pop-quiz--on-yellow {
  background: var(--yellow);
  padding: clamp(72px, 10vw, 120px) 0;
  --pq-title: var(--dark-purple);
  --pq-title-accent: var(--dark-purple);
}

/* Final CTA */
.landing-final-cta {
  position: relative;
  padding: clamp(72px, 10vw, 120px) 0;
  overflow: hidden;
  background: var(--yellow);
  text-align: center;
}

.landing-final-cta-blob {
  position: absolute;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.22);
  pointer-events: none;
}

.landing-final-cta-blob--1 {
  width: 280px;
  height: 120px;
  top: 12%;
  left: 8%;
  transform: rotate(-12deg);
}

.landing-final-cta-blob--2 {
  width: 220px;
  height: 90px;
  bottom: 16%;
  right: 10%;
  transform: rotate(18deg);
}

.landing-final-cta-blob--3 {
  width: 160px;
  height: 70px;
  top: 42%;
  right: 28%;
  transform: rotate(-8deg);
}

.landing-final-cta-inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
}

.landing-final-cta .landing-title {
  font-size: clamp(32px, 5vw, 52px);
}

.landing-final-cta .landing-lead {
  color: rgba(17, 5, 20, 0.72);
}

.landing-final-cta .btn-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
  min-height: 56px;
  padding: 16px 28px;
  border-radius: var(--radius-pill);
  background: var(--dark-purple);
  color: var(--white);
  font-weight: 700;
  font-size: 16px;
}

.landing-final-cta .btn-dark:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

/* Situation hub — after the statement, before the book pages */
.landing-quote {
  padding: 104px 28px 112px;
  background: #1c0c22;
  color: var(--cream);
  text-align: center;
}

.landing-quote-stage {
  position: relative;
}

.landing-quote-slide:not(.is-on) {
  display: none;
}

.landing-quote.is-cycling .landing-quote-slide {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  filter: blur(14px);
  pointer-events: none;
  transition: opacity 1.4s ease, filter 1.4s ease;
}

.landing-quote.is-cycling .landing-quote-slide.is-on {
  opacity: 1;
  filter: blur(0px);
}

.landing-quote-slide.is-measure {
  display: block !important;
  position: relative !important;
  visibility: hidden;
}

.landing-quote-eyebrow {
  margin-bottom: 32px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--yellow);
}

.landing-quote-mark {
  color: var(--warm-orange);
}

.landing-quote blockquote p {
  max-width: 1080px;
  margin: 0 auto;
  font-family: var(--font-title);
  font-size: clamp(46px, 7.6vw, 96px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.88;
  text-transform: uppercase;
  color: var(--cream);
}

.landing-quote .landing-quote-follow {
  max-width: 560px;
  margin: 40px auto 0;
  font-family: var(--font-body);
  font-size: clamp(17px, 1.7vw, 22px);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.45;
  text-transform: none;
  color: rgba(248, 246, 246, 0.9);
}

@media (max-width: 640px) {
  .landing-quote br {
    display: none;
  }
}

.landing-hub {
  background: var(--purple-rich);
  color: var(--cream);
  padding: 96px 24px 0;
}

.landing-page .landing-hub .ql-title {
  max-width: 18em;
  font-size: clamp(32px, 5vw, 64px);
}

.landing-hub-mark {
  color: var(--yellow);
}

.landing-hub-you {
  color: var(--warm-orange);
}

.landing-hub.quiz-looks .ql {
  max-width: 1120px;
  margin: 12px auto 0;
  padding: 8px 0 88px;
  background: transparent;
}

@media (min-width: 768px) {
  .landing-hub {
    padding-left: 64px;
    padding-right: 64px;
  }
}

/* FAQ — version E, with J’s large yellow badge as the title. */
.landing-page .faq.faq-ask {
  --faq-line: rgba(255, 255, 255, 0.2);
  background: var(--purple-rich);
  color: var(--cream);
  padding: 96px 24px 88px;
}

.landing-page .faq-ask-split {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 48px 64px;
  align-items: start;
  max-width: 1120px;
  margin: 0 auto;
}

.landing-page .faq-ask-title {
  margin: 0;
}

.landing-page .faq-ask-badge {
  position: relative;
  display: grid;
  place-items: center;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: transparent;
  color: var(--cream);
  font-family: var(--font-title);
  font-size: 46px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  animation: faq-badge-float 5.5s ease-in-out infinite;
}

.landing-page .faq-ask-badge::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--card-shimmer),
    var(--yellow),
    var(--warm-orange),
    var(--cream),
    var(--yellow)
  );
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: landing-card-shimmer 4.5s linear infinite;
}

@keyframes faq-badge-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.landing-page .faq-pop,
.landing-page .faq-pop span {
  font-weight: 700;
}

.landing-page .faq-pop span {
  color: var(--yellow);
}

.landing-page .faq-ask-row {
  display: grid;
  grid-template-columns: minmax(180px, 0.85fr) minmax(0, 1.15fr);
  gap: 28px 40px;
  padding: 22px 0 24px;
  border-bottom: 1px solid var(--faq-line);
}

.landing-page .faq-ask-row h3 {
  margin: 0;
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.25;
  color: var(--cream);
}

.landing-page .faq-ask-row button {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cream);
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}

.landing-page .faq-ask-row button:hover,
.landing-page .faq-ask-row button:focus-visible {
  color: var(--yellow);
}

.landing-page .faq-ask-row.is-on button {
  color: var(--yellow);
}

.landing-page .faq-ask-row button:hover .faq-pop,
.landing-page .faq-ask-row button:focus-visible .faq-pop,
.landing-page .faq-ask-row.is-on .faq-pop {
  color: var(--cream);
}

.landing-page .faq-ask-row p {
  margin: 0;
  overflow: hidden;
  transform-origin: top left;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--cream);
}

.landing-page .faq-ask-row p[hidden] {
  display: none;
}

@media (min-width: 768px) {
  .landing-page .faq.faq-ask {
    padding-left: 64px;
    padding-right: 64px;
  }
}

@media (max-width: 800px) {
  .landing-page .faq.faq-ask {
    padding: 64px 20px 56px;
  }

  .landing-page .faq-ask-split,
  .landing-page .faq-ask-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .landing-page .faq-ask-badge {
    width: 180px;
    height: 180px;
    font-size: 38px;
  }
}

/* Author — quote on the section ground. */
.landing-page .about-author.about-motion {
  position: relative;
  display: grid;
  place-items: center;
  padding: 96px 28px;
  background: var(--purple-rich);
}

.landing-page .about-motion-card {
  width: min(760px, 100%);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cream);
  text-align: center;
}

.landing-page .about-motion-card .about-label {
  margin: 0 0 22px;
}

.landing-page .about-motion-quote {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.35;
}

.landing-page .about-motion-card footer {
  margin-top: 28px;
}

.landing-page .about-motion-card cite {
  display: block;
  font-family: var(--font-title);
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--yellow);
}

@media (max-width: 800px) {
  .landing-page .about-author.about-motion {
    padding: 64px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-page .landing-hero .brand-banner-bg-grid,
  .landing-page .landing-hero .brand-banner-bg-grid img,
  .landing-page .faq-ask-badge,
  .landing-page .faq-ask-badge::before,
  .sample-float {
    animation: none;
  }
}

/* Floating sample — stays at the small circle */
.sample-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 50;
  display: grid;
  place-items: center;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--dark-purple);
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.05;
  text-align: center;
  text-decoration: none;
  animation: sample-float-drift 12s ease-in-out infinite;
}

.sample-float:hover {
  transform: scale(1.04);
}

.sample-float:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 4px;
}

@keyframes sample-float-drift {
  0%,
  100% { translate: 0 0; }
  25% { translate: -28px -18px; }
  50% { translate: -8px -40px; }
  75% { translate: 10px -12px; }
}

.landing-page .yb-motion {
  background: var(--dark-purple);
  color: var(--cream);
}

.landing-page .yb-motion .yb-eyebrow {
  color: var(--warm-orange);
}

.landing-page .yb-motion .yb-title {
  color: var(--cream);
}

.landing-page .yb-motion .yb-title span {
  color: var(--warm-orange);
}

.landing-page .yb-motion .yb-editions-head .yb-title {
  margin-bottom: 0;
}

.landing-page .yb-motion .yb-edition-title {
  margin-top: 34px;
}

.landing-page .yb-motion .yb-edition--digital {
  position: relative;
  z-index: 1;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: none;
  color: var(--cream);
}

.landing-page .yb-motion .yb-edition--digital .yb-edition-tag {
  background: var(--yellow);
  color: var(--dark-purple);
}

.landing-page .yb-motion .yb-edition--digital .yb-edition-title,
.landing-page .yb-motion .yb-edition--digital .yb-price-currency,
.landing-page .yb-motion .yb-edition--digital .yb-price-amount,
.landing-page .yb-motion .yb-edition--digital .yb-price-decimal {
  color: var(--cream);
}

.landing-page .yb-motion .yb-edition--digital .yb-price-currency,
.landing-page .yb-motion .yb-edition--digital .yb-price-amount,
.landing-page .yb-motion .yb-edition--digital .yb-price-decimal {
  color: var(--yellow);
}

.landing-page .yb-motion .yb-edition--digital .yb-edition-lead {
  color: rgba(248, 246, 246, 0.82);
}

.landing-page .yb-motion .yb-edition--digital .yb-edition-features {
  color: var(--cream);
}

.landing-page .yb-motion .yb-edition-features li::before {
  background: var(--warm-orange);
}

.landing-page .yb-motion .yb-edition--digital .yb-note {
  color: rgba(248, 246, 246, 0.58);
}

.landing-page .yb-motion .yb-edition--digital .yb-note img {
  filter: brightness(0) invert(1);
  opacity: 0.65;
}

.landing-page .yb-motion .yb-edition--digital .btn-dark {
  background: var(--cream);
  color: var(--dark-purple);
}