/* ============================================================
   LAYOUT · COMPONENTS · SECTIONS
   Way Prieto — Masterclass "La Ciencia de Elegir un Alisado"
   ============================================================ */

/* ------------------------------------------------------------
   1. Document shell
   ------------------------------------------------------------ */
body {
  background: var(--ink-900);
  color: var(--fg);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.62;
  letter-spacing: -0.006em;
}

html.is-locked,
html.is-locked body {
  overflow: hidden;
}

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

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

.sec {
  position: relative;
  padding-block: var(--section-y);
}

/* Alternating surfaces keep consecutive sections from reading alike. */
.sec--alt {
  background: var(--ink-800);
}

.sec--night {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(24, 34, 60, 0.5), transparent 62%),
    var(--night-800);
}

.sec--alt::before,
.sec--night::before,
.sec--alt::after,
.sec--night::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong) 22%, var(--line-strong) 78%, transparent);
  opacity: 0.7;
}

.sec--alt::before,
.sec--night::before {
  top: 0;
}

.sec--alt::after,
.sec--night::after {
  bottom: 0;
}

/* ------------------------------------------------------------
   2. Type primitives
   ------------------------------------------------------------ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.85rem;
  color: var(--gold-300);
  font-size: var(--t-over);
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  line-height: 1;
}

.eyebrow .ico {
  width: 0.95em;
  height: 0.95em;
  opacity: 0.85;
}

.h2 {
  font-family: var(--f-display);
  font-size: var(--t-h2);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.014em;
}

.h3 {
  font-size: var(--t-h3);
  font-weight: 620;
  line-height: 1.25;
  letter-spacing: -0.012em;
}

.gold-text {
  background: var(--grad-gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Keeps the glyph edges from looking chalky on dark backgrounds. */
  -webkit-text-fill-color: transparent;
  padding-inline-end: 0.04em;
}

.sec__head {
  margin-bottom: clamp(1.5rem, 1.1rem + 1.6vw, 3rem);
}

.sec__head--center {
  text-align: center;
  max-width: 40rem;
  margin-inline: auto;
}

.sec__head--split {
  display: grid;
  gap: 0.75rem;
}

.sec__lead {
  margin-top: 0.75rem;
  color: var(--fg-mute);
  font-size: var(--t-lead);
  line-height: 1.55;
  max-width: 46ch;
}

.sec__head--center .sec__lead {
  margin-inline: auto;
}

/* ------------------------------------------------------------
   3. Icons
   ------------------------------------------------------------ */
.ico {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ico--lg {
  width: 1.9rem;
  height: 1.9rem;
  stroke-width: 1.35;
}

/* ------------------------------------------------------------
   4. Buttons
   ------------------------------------------------------------ */
.btn {
  --btn-y: 0.78rem;
  --btn-x: 1.35rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 44px;
  padding: var(--btn-y) var(--btn-x);
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: 620;
  letter-spacing: -0.005em;
  line-height: 1.15;
  text-align: center;
  isolation: isolate;
  overflow: hidden;
  transition:
    transform var(--t-fast) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out),
    background-color var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-out),
    color var(--t-base) var(--ease-out);
}

.btn .ico {
  transition: transform var(--t-base) var(--ease-out);
}

.btn--lg {
  --btn-y: 0.95rem;
  --btn-x: 1.6rem;
  font-size: var(--t-body);
}

.btn--xl {
  --btn-y: 1.1rem;
  --btn-x: 1.9rem;
  font-size: var(--t-lead);
  min-height: 56px;
}

.btn--sm {
  --btn-y: 0.55rem;
  --btn-x: 1rem;
  font-size: var(--t-xs);
}

/* Primary: brushed gold with a specular sweep on hover. */
.btn--gold {
  background: var(--grad-gold);
  color: var(--on-gold);
  box-shadow: var(--sh-gold);
}

.btn--gold::after {
  content: '';
  position: absolute;
  inset: -40% -30%;
  z-index: -1;
  background: var(--grad-sheen);
  translate: -120% 0;
  transition: translate var(--t-slow) var(--ease-out);
}

.btn--ghost {
  background: rgba(248, 242, 231, 0.04);
  color: var(--fg);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    transform: translateY(-2px);
  }

  .btn:hover .ico {
    transform: translateX(3px);
  }

  .btn--gold:hover {
    box-shadow: var(--sh-gold-lg);
  }

  .btn--gold:hover::after {
    translate: 120% 0;
  }

  .btn--ghost:hover {
    background: rgba(248, 242, 231, 0.09);
    border-color: var(--gold-400);
  }
}

.btn:active {
  transform: translateY(0) scale(0.985);
  transition-duration: 60ms;
}

/* The chevron in the accordion/rail should not slide. */
.rail__arrow:hover .ico,
.acc summary:hover .ico {
  transform: none;
}

/* ------------------------------------------------------------
   5. Header
   ------------------------------------------------------------ */
.hdr {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  transition:
    background-color var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out),
    backdrop-filter var(--t-base);
  padding-top: env(safe-area-inset-top);
}

.hdr::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
  opacity: 0;
  transition: opacity var(--t-base);
}

.hdr.is-stuck {
  background: rgba(6, 5, 3, 0.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.hdr.is-stuck::after {
  opacity: 1;
}

.hdr__in {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0.7rem var(--gutter);
}

.hdr__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-inline-end: auto;
}

.hdr__brand img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
}

.hdr__brand-txt {
  display: grid;
  line-height: 1.1;
}

.hdr__brand-txt b {
  font-size: 0.95rem;
  font-weight: 640;
  letter-spacing: 0.02em;
}

.hdr__brand-txt i {
  font-style: normal;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-400);
}

.hdr__nav {
  display: none;
  gap: 1.6rem;
  font-size: 0.875rem;
  color: var(--fg-mute);
}

.hdr__nav a {
  position: relative;
  padding-block: 0.35rem;
  transition: color var(--t-base);
}

.hdr__nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--gold-400);
  scale: 0 1;
  transform-origin: left;
  transition: scale var(--t-base) var(--ease-out);
}

.hdr__nav a:hover,
.hdr__nav a.is-active {
  color: var(--fg);
}

.hdr__nav a:hover::after,
.hdr__nav a.is-active::after {
  scale: 1 1;
}

.hdr__cta {
  display: none;
}

.hdr__burger {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  color: var(--fg);
  background: rgba(248, 242, 231, 0.04);
}

.hdr__burger .ico {
  width: 1.25rem;
  height: 1.25rem;
  grid-area: 1 / 1;
  transition:
    opacity var(--t-fast),
    rotate var(--t-base) var(--ease-out);
}

.hdr__burger .ico--close {
  opacity: 0;
  rotate: -45deg;
}

.hdr__burger[aria-expanded='true'] .ico--menu {
  opacity: 0;
  rotate: 45deg;
}

.hdr__burger[aria-expanded='true'] .ico--close {
  opacity: 1;
  rotate: 0deg;
}

/* Mobile sheet */
.sheet {
  position: fixed;
  inset: 0;
  z-index: var(--z-sheet);
  display: grid;
  align-content: center;
  gap: 2rem;
  padding: 2rem var(--gutter) calc(2rem + env(safe-area-inset-bottom));
  background: rgba(5, 4, 2, 0.94);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  opacity: 0;
  visibility: hidden;
  translate: 0 -1.5rem;
  transition:
    opacity var(--t-base) var(--ease-out),
    translate var(--t-base) var(--ease-out),
    visibility var(--t-base);
}

.sheet.is-open {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}

.sheet__nav {
  display: grid;
  gap: 0.25rem;
}

.sheet__nav a {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--f-display);
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.sheet__nav span {
  font-family: var(--f-body);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--gold-500);
}

.sheet__cta {
  justify-self: start;
}

/* ------------------------------------------------------------
   6. Hero
   ------------------------------------------------------------ */
.hero {
  position: relative;
  display: grid;
  align-content: stretch;
  min-height: 100svh;
  min-height: var(--vh-fallback, 100svh);
  /* Measured against the actual photograph: on the vertical crop Way's
     head starts at 32% and her chin ends at 49%. The copy blocks are
     sized to sit entirely outside that band. */
  padding-block: 4.75rem clamp(1.5rem, 0.8rem + 3vw, 3rem);
  overflow: clip;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: var(--z-hero-media);
}

/* <picture> is an inline wrapper with no box of its own to inherit a
   height from, so the image is positioned against .hero__media directly. */
.hero__media picture {
  display: block;
}

.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The subject sits left-of-centre in the vertical crop; nudging the
     frame keeps her face clear of the copy block below. */
  object-position: 22% 42%;
  /* Tiny inline placeholder paints instantly, image cross-fades in. */
  background: #0b0a12 url('data:image/webp;base64,UklGRuAAAABXRUJQVlA4INQAAACwBQCdASoSABoAPulgqE0pJaOiMAgBIB0JZgCxDTYgyhf6rGrnwST3Bj1X9HV42W+ysqErygAA/tBLH/a1pE79XFvhU3UxoipPCtqdX5BcA4ZculPqc1uCfNMLimdlWzNCtZi4FE/daunXakcQzV8y8wj6quc/Wt008cxPTUIa0J1J9mgC1ricxIh6X9R8azfi71wqwt85mQbYtG7r0a27r+uxJvHYZ1zj6eYJpW/AyOhCKflMAbDUiDxK+aBs5BA5yx+kSAl4ORuC1mZO0p47gAAAAA==')
    center / cover no-repeat;
  opacity: 0;
  scale: 1.04;
  transition:
    opacity 900ms var(--ease-out),
    scale 1400ms var(--ease-out);
}

.hero.is-loaded .hero__media img {
  opacity: 1;
  scale: 1;
}

/* The vertical crop puts Way's face between 30% and 53% of the frame.
   The scrim is deliberately transparent across that band and dense above
   and below it, where the two copy blocks sit. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(5, 4, 2, 0.9) 0%,
      rgba(5, 4, 2, 0.76) 18%,
      rgba(5, 4, 2, 0.24) 29%,
      rgba(5, 4, 2, 0.1) 40%,
      rgba(5, 4, 2, 0.18) 51%,
      rgba(5, 4, 2, 0.52) 63%,
      rgba(5, 4, 2, 0.88) 74%,
      rgba(5, 4, 2, 0.96) 100%
    ),
    radial-gradient(120% 60% at 50% 108%, rgba(92, 71, 32, 0.26), transparent 62%);
}

/* Fine film grain — the difference between "dark theme" and "premium". */
.hero__grain {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* auto | 1fr | auto — the elastic middle row is the face window. */
.hero__in {
  position: relative;
  z-index: var(--z-content);
  display: grid;
  grid-template-rows: auto minmax(1.5rem, 1fr) auto;
  min-height: 0;
}

.hero__top {
  grid-row: 1;
  min-width: 0;
}

.hero__bottom {
  grid-row: 3;
  min-width: 0;
}

.eyebrow--hero {
  margin-bottom: 0.6rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: rgba(5, 4, 2, 0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hero__h {
  display: grid;
  gap: 0.15em;
  max-width: 17ch;
  font-family: var(--f-display);
  font-size: var(--t-display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.022em;
}

.hero__h-a {
  font-size: 0.44em;
  font-family: var(--f-body);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--fg-soft);
  max-width: 26ch;
}

/* A drop-shadow filter, not text-shadow: with background-clip:text the
   glyph fill is transparent, so a text-shadow would smear behind it. */
.hero__h-b {
  filter: drop-shadow(0 2px 18px rgba(0, 0, 0, 0.55));
}

.hero__sub {
  max-width: 44ch;
  margin-bottom: 1.6rem;
  color: var(--fg-soft);
  font-size: var(--t-lead);
  line-height: 1.55;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-bottom: 1.5rem;
}

.hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1.1rem;
  font-size: var(--t-xs);
  color: var(--fg-mute);
}

.hero__chips li {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

.hero__chips .ico {
  color: var(--gold-400);
}

.hero__cue {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  translate: -50% 0;
  z-index: var(--z-content);
  display: none;
  width: 26px;
  height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
}

.hero__cue span {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 3px;
  height: 7px;
  translate: -50% 0;
  border-radius: 2px;
  background: var(--gold-300);
  animation: cue 1.9s var(--ease-in-out) infinite;
}

@keyframes cue {
  0%,
  100% {
    translate: -50% 0;
    opacity: 0;
  }
  22% {
    opacity: 1;
  }
  70% {
    translate: -50% 16px;
    opacity: 0;
  }
}

/* ------------------------------------------------------------
   7. Video player facade
   ------------------------------------------------------------ */
.player {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--ink-700);
  box-shadow: var(--sh-lg);
  aspect-ratio: 16 / 9;
}

/* width:100% is required — every child is absolutely positioned, so with
   `margin-inline:auto` alone a grid item collapses to its 0 content width. */
/* width:100% is required — every child is absolutely positioned, so with
   `margin-inline:auto` alone a grid item collapses to its 0 content width.
   Capped tight on phones: a 9:16 frame at full width would eat 3/4 of the
   viewport height on its own. */
.player--v {
  aspect-ratio: 9 / 16;
  width: 100%;
  max-width: min(280px, 68vw);
  margin-inline: auto;
  justify-self: center;
}

.player__poster,
.player__v {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.player__v {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--t-base) var(--ease-out),
    visibility var(--t-base);
}

.player.is-playing .player__v {
  opacity: 1;
  visibility: visible;
}

.player.is-playing .player__poster,
.player.is-playing .player__btn,
.player.is-playing .player__cap {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.player__btn {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.9rem;
  color: var(--fg);
  background: linear-gradient(to top, rgba(5, 4, 2, 0.72), rgba(5, 4, 2, 0.12) 55%, rgba(5, 4, 2, 0.4));
  transition:
    opacity var(--t-base),
    visibility var(--t-base);
}

.player__ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--grad-gold);
  color: var(--on-gold);
  box-shadow: var(--sh-gold);
  transition: transform var(--t-base) var(--ease-spring);
}

.player__ring .ico {
  width: 1.6rem;
  height: 1.6rem;
  margin-left: 3px;
}

/* Breathing halo — a single element, GPU-only properties. */
.player__ring::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid var(--gold-400);
  opacity: 0.55;
  animation: halo 2.6s var(--ease-in-out) infinite;
}

@keyframes halo {
  0% {
    scale: 0.92;
    opacity: 0.55;
  }
  70% {
    scale: 1.22;
    opacity: 0;
  }
  100% {
    scale: 1.22;
    opacity: 0;
  }
}

.player__label {
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}

.player__cap {
  position: absolute;
  left: 1rem;
  bottom: 0.85rem;
  font-size: var(--t-xs);
  color: var(--fg-mute);
  transition: opacity var(--t-base);
}

@media (hover: hover) and (pointer: fine) {
  .player__btn:hover .player__ring {
    transform: scale(1.07);
  }
}

/* ------------------------------------------------------------
   8. Problem quotes
   ------------------------------------------------------------ */
.quotes {
  display: grid;
  gap: 0.7rem;
  margin-bottom: 1.5rem;
}

.quotes__i {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 1rem 1.1rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.025);
}

.quotes__i p {
  font-family: var(--f-display);
  font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.5rem);
  font-style: italic;
  line-height: 1.3;
  color: var(--fg-soft);
}

.quotes__mark {
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.15rem;
  color: var(--gold-600);
}

.reframe {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem 1.15rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: linear-gradient(120deg, rgba(201, 169, 97, 0.12), rgba(201, 169, 97, 0.03));
  font-size: var(--t-lead);
  line-height: 1.45;
}

.reframe .ico {
  width: 1.35rem;
  height: 1.35rem;
  color: var(--gold-300);
}

.reframe b {
  color: var(--gold-200);
  font-weight: 650;
}

/* ------------------------------------------------------------
   9. Manifesto band
   ------------------------------------------------------------ */
.manifesto {
  position: relative;
  padding-block: clamp(3rem, 2.2rem + 3vw, 5.5rem);
  background:
    radial-gradient(90% 120% at 50% 50%, rgba(201, 169, 97, 0.1), transparent 68%),
    var(--ink-900);
  text-align: center;
  overflow: clip;
}

.manifesto::before,
.manifesto::after {
  content: '';
  position: absolute;
  inset-inline: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-600), transparent);
}

.manifesto::before {
  top: 0;
}

.manifesto::after {
  bottom: 0;
}

.manifesto__q p {
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 1rem + 1.5vw, 2.125rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.manifesto__q em {
  font-style: italic;
  background: var(--grad-gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.manifesto__q footer {
  margin-top: 1.1rem;
}

.manifesto__q cite {
  font-style: normal;
  font-size: var(--t-over);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-400);
}

/* ------------------------------------------------------------
   10. Cards
   ------------------------------------------------------------ */
.card {
  position: relative;
  padding: 1.15rem 1.15rem 1.25rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--fill-card);
  overflow: hidden;
  transition:
    border-color var(--t-base) var(--ease-out),
    transform var(--t-base) var(--ease-out);
}

/* Pointer-tracked edge light. Falls back to nothing on touch. */
.card[data-spotlight]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(28rem 28rem at var(--mx, 50%) var(--my, 0%), rgba(201, 169, 97, 0.14), transparent 62%);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .card:hover {
    border-color: var(--line-strong);
    transform: translateY(-3px);
  }

  .card[data-spotlight]:hover::before {
    opacity: 1;
  }
}

.card__n {
  position: absolute;
  top: 0.9rem;
  right: 1.1rem;
  font-family: var(--f-display);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--gold-700);
  line-height: 1;
}

.card--learn {
  display: grid;
  align-content: start;
  gap: 0.5rem;
}

.card--learn .ico--lg {
  color: var(--gold-300);
  margin-bottom: 0.15rem;
}

.card--learn p {
  color: var(--fg-mute);
  font-size: var(--t-sm);
  line-height: 1.5;
}

/* ------------------------------------------------------------
   11. Snap rail (mobile carousel → desktop grid)
   ------------------------------------------------------------ */
.rail {
  position: relative;
}

.rail__track {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  /* Bleed to the screen edges so cards peek past the gutter. */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  padding-block-end: 0.5rem;
  scrollbar-width: none;
}

.rail__track::-webkit-scrollbar {
  display: none;
}

.rail__item {
  scroll-snap-align: start;
  /* One-and-a-bit cards visible: the peek is the swipe affordance. */
  flex: 0 0 min(76vw, 20rem);
}

.rail__ui {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
}

.rail__dots {
  display: flex;
  gap: 0;
}

/* 24×24 hit area, 8px visible dot: the padding is the target, the
   content box is the graphic. */
.rail__dots button {
  width: 24px;
  height: 24px;
  padding: 8px;
  border-radius: var(--r-pill);
  background: var(--gold-700);
  background-clip: content-box;
  transition:
    width var(--t-base) var(--ease-out),
    background-color var(--t-base);
}

.rail__dots button.is-active {
  width: 34px;
  padding-inline: 5px;
  background: var(--gold-300);
  background-clip: content-box;
}

.rail__arrows {
  display: none;
  gap: 0.5rem;
}

/* Arrows only where there is a pointer to use them. */
@media (hover: hover) and (pointer: fine) {
  .rail__arrows {
    display: flex;
  }
}

.rail__arrow {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--fg);
  transition:
    background-color var(--t-base),
    opacity var(--t-base);
}

.rail__arrow .ico {
  width: 1.1rem;
  height: 1.1rem;
}

[data-rail-prev] .ico {
  rotate: 90deg;
}

[data-rail-next] .ico {
  rotate: -90deg;
}

.rail__arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

.rail__arrow:not(:disabled):hover {
  background: rgba(201, 169, 97, 0.14);
}

/* ------------------------------------------------------------
   12. Demo split
   ------------------------------------------------------------ */
.demo__grid {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
  align-items: center;
}

.ticks {
  display: grid;
  gap: 0.55rem;
  margin-block: 1.25rem 1.6rem;
}

.ticks li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: var(--t-sm);
  color: var(--fg-soft);
  line-height: 1.45;
}

.ticks .ico {
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.28em;
  color: var(--gold-300);
  stroke-width: 2.1;
}

.ticks--no .ico {
  color: var(--fg-dim);
}

.demo__fig {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  box-shadow: var(--sh-lg);
}

.demo__fig picture {
  display: block;
}

.demo__fig img {
  width: 100%;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  object-position: 50% 40%;
  transition: scale var(--t-slow) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .demo__fig:hover img {
    scale: 1.04;
  }
}

.demo__fig figcaption {
  position: absolute;
  inset-inline: 0.75rem;
  bottom: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  width: fit-content;
  padding: 0.5rem 0.85rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: rgba(5, 4, 2, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: var(--t-xs);
  color: var(--fg-soft);
}

.demo__fig figcaption .ico {
  color: var(--gold-300);
}

/* ------------------------------------------------------------
   13. Includes grid + bonus
   ------------------------------------------------------------ */
.grid-inc {
  display: grid;
  /* Two compact columns on the phone — the client's explicit ask. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.inc {
  display: grid;
  gap: 0.15rem;
  padding: 0.95rem 0.85rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--fill-card);
  transition:
    border-color var(--t-base),
    background-color var(--t-base);
}

.inc .ico {
  width: 1.35rem;
  height: 1.35rem;
  margin-bottom: 0.35rem;
  color: var(--gold-300);
}

.inc b {
  font-size: var(--t-sm);
  font-weight: 620;
  line-height: 1.25;
}

.inc span {
  font-size: var(--t-xs);
  color: var(--fg-mute);
  line-height: 1.35;
}

.inc:hover {
  border-color: var(--line-strong);
}

.bonus {
  position: relative;
  display: grid;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding: 1.25rem 1.15rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-strong);
  background:
    radial-gradient(80% 140% at 100% 0%, rgba(201, 169, 97, 0.16), transparent 62%),
    var(--ink-700);
  overflow: hidden;
}

.bonus__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  width: fit-content;
  padding: 0.35rem 0.8rem;
  border-radius: var(--r-pill);
  background: var(--grad-gold);
  color: var(--on-gold);
  font-size: var(--t-over);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.bonus__body p {
  margin-top: 0.4rem;
  color: var(--fg-mute);
  font-size: var(--t-sm);
}

.bonus__doc {
  position: absolute;
  right: -0.75rem;
  bottom: -1rem;
  width: 7rem;
  height: 7rem;
  color: var(--gold-400);
  opacity: 0.12;
  stroke-width: 1;
  pointer-events: none;
}

/* ------------------------------------------------------------
   14. Tabs
   ------------------------------------------------------------ */
.tabs__bar {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* No gap: it lets the indicator travel by exactly its own width. */
  gap: 0;
  padding: 0.3rem;
  margin-bottom: 1.25rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  isolation: isolate;
}

.tabs__t {
  position: relative;
  z-index: 1;
  min-height: 44px;
  padding: 0.6rem 0.75rem;
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--fg-mute);
  transition: color var(--t-base);
}

.tabs__t[aria-selected='true'] {
  color: var(--on-gold);
}

.tabs__ink {
  position: absolute;
  z-index: 0;
  top: 0.3rem;
  bottom: 0.3rem;
  left: 0.3rem;
  width: calc(50% - 0.3rem);
  border-radius: var(--r-pill);
  background: var(--grad-gold);
  box-shadow: var(--sh-gold);
  /* left and width are written by app.js from the selected tab's measured
     geometry; these are only the pre-JS resting values. */
  transition:
    left var(--t-base) var(--ease-spring),
    width var(--t-base) var(--ease-spring);
}

.tabs__p {
  animation: fadeUp var(--t-base) var(--ease-out) both;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    translate: 0 8px;
  }
}

.tabs__note {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.025);
  font-size: var(--t-sm);
  color: var(--fg-mute);
}

.tabs__note b {
  color: var(--gold-200);
}

.ticks--yes li,
.ticks--no li {
  padding: 0.7rem 0.9rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.02);
  font-size: var(--t-body);
}

/* ------------------------------------------------------------
   15. Testimonials
   ------------------------------------------------------------ */
.tst__grid {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
  align-items: center;
}

.names {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 1.25rem;
}

/* Wraps rather than scrolls: a sideways-scrolling strip here read as the
   page itself sliding, so the names simply flow onto a second line. */
.names--rail {
  flex-wrap: wrap;
  justify-content: center;
}

.names li {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.45rem 0.8rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  font-size: var(--t-xs);
  font-weight: 600;
}

.names span {
  color: var(--gold-400);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
}

/* ------------------------------------------------------------
   16. About
   ------------------------------------------------------------ */
.about__card {
  position: relative;
  padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.75rem);
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background: var(--fill-card);
  overflow: hidden;
  text-align: center;
}

.about__portrait {
  width: clamp(96px, 22vw, 128px);
  height: clamp(96px, 22vw, 128px);
  margin: 0 auto 1rem;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line-strong);
  box-shadow:
    0 0 0 6px rgba(201, 169, 97, 0.06),
    var(--sh-md);
}

.about__role {
  margin-top: 0.4rem;
  color: var(--gold-300);
  font-size: var(--t-sm);
}

.about__bio {
  max-width: 54ch;
  margin: 1rem auto 0;
  color: var(--fg-mute);
  font-size: var(--t-body);
  line-height: 1.65;
}

.about__bio b {
  color: var(--fg-soft);
  font-weight: 600;
}

/* ------------------------------------------------------------
   17. Pricing — the climax
   ------------------------------------------------------------ */
.price {
  background:
    radial-gradient(100% 60% at 50% 0%, rgba(201, 169, 97, 0.13), transparent 60%),
    var(--ink-900);
}

/* Sits directly under the video block, so it needs its own edge. */
.price::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong) 25%, var(--line-strong) 75%, transparent);
}

.price__card {
  position: relative;
  display: grid;
  gap: 0;
  max-width: 62rem;
  margin-inline: auto;
  border-radius: var(--r-xl);
  border: 1px solid var(--line-strong);
  background: var(--ink-700);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}

/* Slow gold aurora behind the card — pure transform/opacity. */
.price__glow {
  position: absolute;
  inset: -30%;
  background: radial-gradient(38% 38% at 30% 25%, rgba(201, 169, 97, 0.22), transparent 70%);
  animation: drift 14s var(--ease-in-out) infinite alternate;
  pointer-events: none;
}

@keyframes drift {
  to {
    translate: 22% 12%;
  }
}

.price__main {
  position: relative;
  padding: clamp(1.5rem, 1.1rem + 2vw, 2.75rem);
  text-align: center;
}

.price__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.4rem 0.9rem;
  margin-bottom: 1rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: rgba(201, 169, 97, 0.1);
  color: var(--gold-200);
  font-size: var(--t-over);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.price__amount {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.12em;
  line-height: 0.92;
  font-family: var(--f-display);
  font-weight: 600;
  letter-spacing: -0.03em;
}

.price__cur {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  color: var(--gold-400);
  translate: 0 -0.35em;
}

.price__num {
  font-size: clamp(3.5rem, 2.4rem + 5vw, 6.5rem);
  background: var(--grad-gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.price__ccy {
  font-family: var(--f-body);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--fg-mute);
  translate: 0 -0.9em;
}

.price__inst {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 0.65rem;
  padding: 0.45rem 0.95rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  font-size: var(--t-sm);
  color: var(--fg-soft);
}

.price__inst .ico {
  color: var(--gold-400);
}

.price__cta {
  width: 100%;
  max-width: 26rem;
  margin: 1.5rem auto 0;
}

.price__risk {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  margin-top: 0.9rem;
  font-size: var(--t-sm);
  color: var(--fg-mute);
  text-wrap: balance;
}

.price__risk .ico {
  color: var(--ok);
}

.price__risk b {
  color: var(--fg-soft);
}

.price__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.1rem;
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line-soft);
  font-size: var(--t-xs);
  color: var(--fg-mute);
}

.price__trust li {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

.price__trust .ico {
  color: var(--gold-500);
}

.price__side {
  position: relative;
  padding: clamp(1.25rem, 1rem + 1.4vw, 2rem);
  border-top: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.28);
}

.price__side-h {
  margin-bottom: 0.8rem;
  font-size: var(--t-over);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-300);
}

.price__list {
  display: grid;
  gap: 0.6rem;
}

.price__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: var(--t-sm);
  color: var(--fg-soft);
  line-height: 1.45;
}

.price__list .ico {
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.25em;
  color: var(--gold-300);
  stroke-width: 2;
}

.price__list .is-bonus {
  padding: 0.6rem 0.75rem;
  margin-block: 0.1rem;
  border-radius: var(--r-sm);
  border: 1px dashed var(--line-strong);
  background: rgba(201, 169, 97, 0.07);
}

.price__list .is-bonus b {
  color: var(--gold-200);
}

/* Optional discount layer — off by default.
   Set data-offer="on" on .price__card when there are REAL numbers. */
.price__was,
.price__save {
  display: none;
}

.price__card[data-offer='on'] .price__was,
.price__card[data-offer='on'] .price__save {
  display: inline-flex;
}

.price__was {
  align-items: center;
  gap: 0.4em;
  margin-bottom: 0.35rem;
  font-size: var(--t-sm);
  color: var(--fg-dim);
  text-decoration: line-through;
  text-decoration-color: var(--gold-600);
}

.price__save {
  align-items: center;
  gap: 0.4em;
  margin-top: 0.6rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--r-pill);
  background: var(--ok-dim);
  border: 1px solid rgba(125, 219, 166, 0.34);
  color: var(--ok);
  font-size: var(--t-xs);
  font-weight: 650;
}

/* ------------------------------------------------------------
   18. FAQ accordion
   ------------------------------------------------------------ */
.acc {
  display: grid;
  gap: 0.6rem;
}

.acc details {
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.025);
  transition:
    border-color var(--t-base),
    background-color var(--t-base);
}

.acc details.is-open {
  border-color: var(--line-strong);
  background: rgba(201, 169, 97, 0.05);
}

.acc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 56px;
  padding: 0.95rem 1.1rem;
  cursor: pointer;
  font-size: var(--t-body);
  font-weight: 600;
  line-height: 1.35;
  list-style: none;
}

.acc summary::-webkit-details-marker {
  display: none;
}

.acc summary .ico {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--gold-400);
  transition: rotate var(--t-base) var(--ease-out);
}

.acc details.is-open summary .ico {
  rotate: 180deg;
}

.acc [data-accordion-body] {
  height: 0;
  overflow: hidden;
  transition: height var(--t-base) var(--ease-out);
}

.acc [data-accordion-body] p {
  padding: 0 1.1rem 1.1rem;
  color: var(--fg-mute);
  font-size: var(--t-sm);
  line-height: 1.6;
}

/* No-JS: native <details> still opens, so make sure the body is visible. */
html:not(.js-ready) .acc [data-accordion-body] {
  height: auto;
}

/* ------------------------------------------------------------
   19. Final CTA
   ------------------------------------------------------------ */
.final {
  position: relative;
  padding-block: clamp(3.25rem, 2.4rem + 3.4vw, 6rem);
  text-align: center;
  background:
    radial-gradient(90% 130% at 50% 100%, rgba(201, 169, 97, 0.16), transparent 62%),
    var(--ink-850);
  border-top: 1px solid var(--line);
  overflow: clip;
}

.final__h {
  display: grid;
  gap: 0.1em;
  max-width: 20ch;
  margin: 0 auto 1.6rem;
  font-family: var(--f-display);
  font-size: var(--t-h1);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.final__note {
  margin-top: 1rem;
  font-size: var(--t-xs);
  color: var(--fg-mute);
}

/* ------------------------------------------------------------
   20. Footer
   ------------------------------------------------------------ */
.ft {
  padding-block: 2.5rem calc(2.5rem + env(safe-area-inset-bottom));
  background: var(--ink-900);
  border-top: 1px solid var(--line-soft);
}

.ft__in {
  display: grid;
  gap: 1.25rem;
}

.ft__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ft__brand img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--line);
}

.ft__brand div {
  display: grid;
  line-height: 1.25;
}

.ft__brand b {
  font-size: 1.0625rem;
  font-weight: 640;
}

.ft__brand span {
  font-size: var(--t-xs);
  color: var(--gold-400);
  letter-spacing: 0.08em;
}

/* Small type never uses --fg-dim: at 3.4:1 it would fail AA. */
.ft__legal,
.ft__copy {
  font-size: var(--t-xs);
  color: var(--fg-mute);
  line-height: 1.6;
  max-width: 68ch;
}

/* ------------------------------------------------------------
   21. Sticky mobile CTA
   ------------------------------------------------------------ */
.sticky {
  position: fixed;
  z-index: var(--z-sticky);
  inset-inline: 0.6rem;
  bottom: calc(0.6rem + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.6rem 0.6rem 1rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: rgba(9, 7, 4, 0.86);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: var(--sh-lg);
  translate: 0 140%;
  opacity: 0;
  visibility: hidden;
  transition:
    translate var(--t-slow) var(--ease-spring),
    opacity var(--t-base),
    visibility var(--t-base);
}

.sticky.is-visible {
  translate: 0 0;
  opacity: 1;
  visibility: visible;
}

.sticky__info {
  display: grid;
  margin-inline-end: auto;
  line-height: 1.2;
}

.sticky__info b {
  font-size: 1.1875rem;
  font-weight: 680;
  color: var(--gold-200);
}

.sticky__info b span {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--fg-mute);
}

.sticky__info > span {
  font-size: 0.8125rem;
  color: var(--fg-mute);
}

.sticky .btn {
  --btn-y: 0.65rem;
  --btn-x: 1.15rem;
  font-size: var(--t-sm);
}

/* ------------------------------------------------------------
   22. Scroll reveal
   ------------------------------------------------------------ */
html.js-ready [data-reveal] {
  opacity: 0;
  translate: 0 18px;
  transition:
    opacity 620ms var(--ease-out),
    translate 620ms var(--ease-out);
  transition-delay: calc(var(--reveal-i, 0) * 70ms);
  will-change: opacity, translate;
}

html.js-ready [data-reveal].is-revealed {
  opacity: 1;
  translate: 0 0;
  will-change: auto;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* --- Phones & small tablets: the hero belongs to the photograph -------
   The eyebrow chip and the trust chips are dropped here so the headline
   can sit high, the CTAs can sit low, and the widest possible band of
   the frame is left to Way herself. Both are kept on desktop, where the
   copy has its own panel and space is not being taken from the image. */
@media (max-width: 899px) {
  .eyebrow--hero,
  .hero__chips {
    display: none;
  }

  .hero__h {
    gap: 0.22em;
    max-width: 15ch;
  }

  .hero__h-a {
    font-size: 0.46em;
    max-width: 24ch;
  }

  .hero__sub {
    max-width: 34ch;
    margin-bottom: 1.35rem;
    font-size: var(--t-body);
  }

  .hero__cta .btn {
    width: 100%;
  }
}

/* --- Small phones: pull the type and rhythm in a notch further --- */
@media (max-width: 359px) {
  .grid-inc {
    grid-template-columns: 1fr;
  }

  .hero__cta .btn {
    width: 100%;
  }
}

/* --- Landscape phones: a 100svh hero would swallow the screen --- */
@media (orientation: landscape) and (max-height: 560px) and (max-width: 899px) {
  .hero {
    min-height: 0;
    padding-block: 6rem 2.5rem;
  }

  .hero__h {
    max-width: 24ch;
  }

  .hero__media img {
    object-position: 50% 30%;
  }

  .player--v {
    max-width: 220px;
  }

  .sticky {
    inset-inline: auto 0.6rem;
    width: max-content;
  }
}

/* --- ≥ 560px: includes grid gets a third column --- */
@media (min-width: 560px) {
  .grid-inc {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .bonus {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 1.25rem;
  }

  .bonus__tag {
    grid-row: span 2;
  }
}

/* --- ≥ 700px: quotes become a row, tabs widen --- */
@media (min-width: 700px) {
  .quotes {
    grid-template-columns: repeat(3, 1fr);
  }

  .quotes__i {
    flex-direction: column;
    gap: 0.6rem;
  }

  .reframe {
    justify-content: center;
    text-align: center;
  }
}

/* --- ≥ 820px: desktop switch --- */
@media (min-width: 820px) {
  .hdr__nav,
  .hdr__cta {
    display: flex;
  }

  .hdr__burger,
  .sheet {
    display: none;
  }

  .sec__head--split {
    grid-template-columns: 1.35fr 1fr;
    align-items: end;
    gap: 2rem;
  }

  .sec__head--split .sec__lead {
    margin-top: 0;
    padding-bottom: 0.35rem;
  }

  /* Rail becomes a static grid — no horizontal scroll on desktop.
     display MUST be reset: the mobile track is a flex row, and leaving
     it flex here would push 7 fixed-width cards past the viewport. */
  .rail__track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
    overflow: visible;
    scroll-snap-type: none;
    margin-inline: 0;
    padding-inline: 0;
  }

  .rail__item {
    flex: initial;
    inline-size: auto;
  }

  .rail__ui {
    display: none;
  }

  .demo__grid,
  .tst__grid {
    grid-template-columns: 1fr 1fr;
  }

  .demo .demo__fig {
    order: 2;
  }

  .tst__grid .player--v {
    max-width: 320px;
    justify-self: center;
  }

  .names--rail {
    justify-content: flex-start;
  }

  .price__card {
    grid-template-columns: 1.15fr 0.85fr;
  }

  .price__main {
    padding-block: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  }

  .price__side {
    border-top: 0;
    border-left: 1px solid var(--line);
  }

  .ft__in {
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 1rem 2.5rem;
  }

  .ft__brand {
    grid-row: span 2;
  }
}

/* --- Wide screens: the hero becomes a split composition -------------
   The photograph has no empty space to the left of Way, so rather than
   darkening her out of her own hero we anchor the picture to the right
   and give the copy its own panel, feathered into the studio wall.
   Result: text and buttons never sit over her or over the equipment.

   Gated on a landscape-ish viewport as well as width: on a tall window
   (an iPad Pro held upright, say) a 62%-wide frame would crop the photo
   so hard that Way would slide back under the copy. Those viewports get
   the portrait photograph and the stacked treatment instead. */
@media (min-width: 900px) and (min-aspect-ratio: 1 / 1) {
  .hero {
    align-content: center;
    padding-block: 8rem 4rem;
    background: var(--ink-900);
  }

  .hero__media {
    inset: 0 0 0 auto;
    width: 62%;
  }

  /* Lower X keeps more of the left-hand wall in frame, which pushes Way
     rightward and buys clearance from the copy at every window shape. */
  .hero__media img {
    object-position: 38% 32%;
  }

  .hero__scrim {
    background:
      linear-gradient(
        90deg,
        var(--ink-900) 0%,
        rgba(5, 4, 2, 0.95) 8%,
        rgba(5, 4, 2, 0.62) 20%,
        rgba(5, 4, 2, 0.22) 33%,
        rgba(5, 4, 2, 0.06) 45%,
        transparent 57%
      ),
      linear-gradient(to top, rgba(5, 4, 2, 0.74) 0%, rgba(5, 4, 2, 0.2) 26%, transparent 48%),
      radial-gradient(58% 68% at 6% 62%, rgba(92, 71, 32, 0.18), transparent 70%);
  }

  .hero__in {
    grid-template-rows: auto;
    align-content: center;
    gap: 1.75rem;
  }

  /* Hard ceiling on the copy column: it must never reach the subject,
     whose left edge lands at ~51% of the viewport at every width. */
  .hero__top,
  .hero__bottom {
    grid-row: auto;
    max-width: min(30rem, 38vw);
  }

  .hero__sub {
    max-width: none;
    margin-bottom: 1.75rem;
  }

  .hero__cue {
    display: block;
  }

  .sticky {
    display: none;
  }
}

/* --- ≥ 1040px: seven learn cards read better as 4 + 3 --- */
@media (min-width: 1040px) {
  .rail__track {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .card--learn {
    padding: 1.35rem 1.35rem 1.5rem;
  }
}

/* --- Very large screens: cap the measure, grow the frame --- */
@media (min-width: 1600px) {
  :root {
    --maxw: 1360px;
  }
}

@media (min-width: 2200px) {
  :root {
    --maxw: 1560px;
  }

  .hero {
    min-height: min(100svh, 62rem);
  }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .hero__media img,
  html.js-ready [data-reveal] {
    opacity: 1;
    translate: none;
    scale: 1;
  }

  .hero__cue span,
  .player__ring::before,
  .price__glow {
    animation: none;
  }

  .btn--gold::after {
    display: none;
  }
}

/* --- Print --- */
@media print {
  .hdr,
  .sticky,
  .hero__cue,
  .player__btn,
  .rail__ui {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}