/* /prueba-1m-usd-b — variante B de la landing: tema cálido ámbar/naranja.
   Se carga DESPUÉS de manifestation.css y prueba-1m-usd.css y los pisa:
   sin rojo, sin Leo Hates School, sin trazo a mano; botones flat 100% redondos. */

:root {
  /* paleta de la app: óxido, negro cálido, tarjetas marrón oscuro, crema y naranja de acción */
  --red: #f2a24f;        /* énfasis (ámbar claro; todas las reglas de var(--red) pasan a este color) */
  --red-dark: #d9823a;
  --cta: #f26b3f;        /* botones */
  --cta-dark: #d95a30;
  --rust: #8f300b;       /* bandas óxido */
  --card: #26130d;       /* tarjetas */
  --card-2: #2e1500;
  --paper: #fcefdf;      /* crema (texto) */
  --ink: #170501;        /* negro cálido */
  --amber-soft: var(--card);
  --ink-10: rgba(252, 239, 223, 0.1);
  --ink-15: rgba(252, 239, 223, 0.16);
}

html,
body { background: var(--ink); }

/* bandas: óxido / marrón oscuro / negro cálido; texto crema siempre */
.s-paper { background: var(--rust); color: var(--paper); }
.s-white { background: var(--card); color: var(--paper); }
.s-ink { background: var(--ink); color: var(--paper); }
.s-white .quote::before { color: var(--red); }

.hero.s-ink { background: #000; }

/* ---------- fuera Leo Hates School ---------- */
.leo,
.font-leo,
.funnel__h .font-leo,
.glitch .leo,
.wish .leo,
.thought .leo,
.q .leo,
.scribble .leo,
.qa-body .wants .leo,
.leo.lg,
.leo.big,
#funnel .funnel__screen[data-key="caution"] .funnel__p.em .leo {
  font-family: inherit;
  font-size: 1em;
  font-weight: 800;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: none; /* el texto va como está escrito en el HTML */
  color: var(--red);
  -webkit-text-stroke: 0;
  vertical-align: baseline;
}

.leo.xl {
  display: block;
  font-size: 2.2em;
  line-height: 1;
  margin: 4px 0 10px;
}

.glitch__c .leo { color: inherit; }
/* en el hero, "different" y "splinter" en blanco como el resto */
.hero .leo { color: inherit; }
.s-red .leo { color: var(--paper); }
.faq .qa:nth-of-type(3n + 2) .leo { color: var(--paper); }

.qa-body .wants__k {
  font-family: var(--sans);
  font-size: 1em;
  line-height: 1.2;
  -webkit-text-stroke: 0;
  text-transform: none;
}

.scribble li,
#funnel .funnel__screen:not(.thankyou) .funnel__tips li,
#funnel .funnel__screen.thankyou .funnel__tips li {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -0.01em;
  -webkit-text-stroke: 0;
  rotate: 0deg;
}

.scribble li { font-size: clamp(21px, 3.6vw, 34px); line-height: 1.15; }
#funnel .funnel__screen:not(.thankyou) .funnel__tips li { font-size: clamp(19px, 2.8vw, 24px); line-height: 1.2; }

/* viñeta: flecha tipográfica ámbar en vez de la dibujada */
.scribble li::before,
#funnel .funnel__screen:not(.thankyou) .funnel__tips li::before {
  content: "\2192";
  width: auto;
  height: auto;
  top: 0.02em;
  background: none;
  color: var(--red);
  font-weight: 800;
  font-size: 0.85em;
}

.funnel__kicker,
.thankyou__reply,
.funnel__ack {
  font-family: var(--sans);
  font-weight: 800;
  -webkit-text-stroke: 0;
  rotate: 0deg;
  transform: none;
}
.funnel__kicker { font-size: clamp(22px, 4vw, 32px); text-transform: uppercase; letter-spacing: -0.01em; }
.thankyou__reply { font-size: clamp(26px, 5vw, 38px); letter-spacing: -0.02em; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.funnel__ack { font-size: clamp(64px, 20vw, 160px); letter-spacing: -0.03em; }

/* ---------- sin subrayado: las palabras marcadas quedan solo en negrita ---------- */
.u,
.s-red .u,
.bubble--s .u,
.faq .qa:nth-of-type(3n + 2) .u,
.way--you .u {
  background-image: none;
  padding-bottom: 0;
  font-weight: 800;
}

/* ---------- barra sticky ámbar ---------- */
.timer-bar { border-bottom: 0; background: var(--rust); color: var(--paper); }
/* CTA de la barra: blanco con letras negras, sin borde */
.timer-bar__cta { background: #fff; color: #000; border: 0; }
.timer-bar__cta:hover { background: #f3f3f3; color: #000; }

/* ---------- botones de la landing: flat, píldora ---------- */
.btn,
.s-ink .btn,
.s-red .btn,
.sticky-cta__btn {
  border: 0;
  border-radius: 999px;
  background: var(--cta);
  color: var(--white);
  transition: background 0.2s ease;
}
.btn:hover,
.s-ink .btn:hover,
.sticky-cta__btn:hover { background: var(--cta-dark); color: var(--white); }

.s-red .btn { background: var(--ink); color: var(--white); }
.s-red .btn:hover { background: #000; color: var(--white); }

.sticky-cta { padding-top: 14px; padding-bottom: 14px; }
/* sticky "I WANT MINE": más bajo y fino, más elegante */
.sticky-cta__btn,
.sticky-cta__btn:hover {
  padding: 16px 32px;
  font-size: clamp(14px, 1.9vw, 16px);
  letter-spacing: 0.08em;
  border: 0;
  background: var(--cta);
  box-shadow: none;
}
.sticky-cta__btn:hover { background: var(--cta-dark); }
/* la nota se separa un poco más del botón (sube) */
.sticky-cta__note { margin-bottom: 4px; }
@media (max-width: 620px) {
  .sticky-cta { gap: 14px; }
  .sticky-cta__btn { padding: 16px 24px; }
}

/* todos los botones en mayúscula (en la A, "i want mine" / "i'm curious" iban en minúscula a propósito) */
.btn--lower,
.sticky-cta__btn,
#funnel .funnel__btn--lower { text-transform: uppercase; }

/* ---------- cajas dibujadas a mano → cajas flat ---------- */
.thought,
.warning,
.faq .qa,
.faq .qa[open],
.serif .letter,
.push,
.note-img,
.qa-body .wants li::before {
  rotate: 0deg;
  transform: none;
}
.faq .qa:nth-of-type(odd),
.faq .qa:nth-of-type(even) { rotate: 0deg; }

.wish::before,
.thought::before,
.warning::before,
.faq .qa::before,
.serif .letter::before {
  border: 0;
  box-shadow: none;
  filter: none;
  transform: none;
}

.wish,
.wish:nth-child(even) {
  --r: 22px;
  border: 2px solid var(--ink-15);
  background: var(--card);
  color: var(--paper);
  rotate: 0deg;
}

.thought,
.thought:nth-child(2),
.thought:nth-child(3) {
  --r: 28px;
  background: var(--card);
  color: var(--paper);
  border: 2px solid var(--ink-15);
  transform: none;
}
.thought::after,
.thought:nth-child(2)::after {
  filter: none;
  background:
    radial-gradient(circle at 48px 11px, var(--red) 0 11px, transparent 12px),
    radial-gradient(circle at 24px 27px, var(--red) 0 7px, transparent 8px),
    radial-gradient(circle at 8px 41px, var(--red) 0 4.5px, transparent 5.5px);
}
.thought:nth-child(2)::after {
  background:
    radial-gradient(circle at 22px 11px, var(--red) 0 11px, transparent 12px),
    radial-gradient(circle at 46px 27px, var(--red) 0 7px, transparent 8px),
    radial-gradient(circle at 62px 41px, var(--red) 0 4.5px, transparent 5.5px);
}

/* aviso: tarjeta oscura bruñida con franja de peligro ámbar arriba y texto crema */
.warning {
  --r: 22px;
  overflow: hidden;
  padding-top: clamp(40px, 5.5vh, 52px);
  background: linear-gradient(160deg, #2a1d12 0%, #1f1710 55%, #15100b 100%);
  color: var(--paper);
  border: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 170, 0.18),
    0 18px 40px rgba(31, 23, 16, 0.18);
}
.warning::after {
  top: 0;
  left: 0;
  right: 0;
  height: 16px;
  border-radius: 0;
  background: repeating-linear-gradient(-45deg, var(--red) 0 12px, #15100b 12px 24px);
  /* cinta de peligro que avanza lenta e infinita hacia un costado;
     33.94px = un período horizontal exacto (24px / cos 45°), así el loop no salta */
  animation: warning-tape 2.4s linear infinite;
  will-change: background-position;
}
@keyframes warning-tape {
  from { background-position: 0 0; }
  to { background-position: 33.94px 0; }
}
@media (prefers-reduced-motion: reduce) { .warning::after { animation: none; } }
.warning .line s { opacity: 0.45; }
.warning .u { color: var(--red); }

.faq .qa,
.faq .qa:last-of-type,
.faq .qa:nth-of-type(3n),
.faq .qa:nth-of-type(3n + 1),
.faq .qa:nth-of-type(3n + 2) {
  --r: 20px;
  background: var(--card);
  color: var(--paper);
  border: 2px solid var(--ink-15);
}
.faq .qa:nth-of-type(3n + 2) .leo { color: var(--red); }
.faq-quotes { border-top-color: var(--ink-15); }

.serif .letter {
  --r: 24px;
  background: var(--card);
  color: var(--paper);
  border: 2px solid var(--ink-15);
}

.push { rotate: 0deg; }
.push.reveal { transform: translateY(16px) scale(0.9); }
.push.reveal.in { transform: none; }

.note-img { transform: none; }

.funnel__offer-clock { border-radius: 8px; }
.funnel__delivery-note { background: rgba(242, 162, 79, 0.12); }
#funnel { background: var(--ink); color: var(--paper); }

/* ---------- form: campos, opciones, botones y player flat ---------- */
.funnel__progress {
  height: 6px;
  border-radius: 999px;
  -webkit-mask: none;
  mask: none;
}
.funnel__progress-fill { border-radius: 999px; }

.funnel__input,
.funnel__textarea,
.funnel__option,
.funnel__sk {
  background: var(--card);
  color: var(--paper);
  border: 2px solid var(--ink-15);
  border-radius: 18px;
}
.funnel__input::placeholder,
.funnel__textarea::placeholder { color: rgba(252, 239, 223, 0.45); }
.funnel__input:focus,
.funnel__textarea:focus,
.funnel__option:hover,
.funnel__sk:focus-within {
  background-image: none;
  border-color: var(--red);
}
.funnel__sk .funnel__input,
.funnel__sk .funnel__input:focus { background: transparent; border: 0; }

.funnel__option.selected,
.funnel__option.selected:hover {
  background: var(--cta);
  border-color: var(--cta);
  color: var(--white);
}

.funnel__btn,
.funnel__btn:hover,
.funnel__btn:disabled:hover,
#funnel .funnel__back,
#funnel .funnel__back:hover {
  border: 0;
  border-radius: 999px;
  background: var(--cta);
  color: var(--white);
}
.funnel__btn:hover:not(:disabled) { background: var(--cta-dark); }

#funnel .funnel__back,
#funnel .funnel__back:hover {
  background: var(--ink-10);
  color: var(--paper);
  padding: 0 16px 0 10px;
}
#funnel .funnel__back:hover { background: var(--ink-15); }

.funnel__audio {
  border-radius: 999px;
  padding: 12px 18px 12px 12px;
  background: var(--card);
}
.funnel__audio-play { border-radius: 999px; background: var(--cta); }
.funnel__audio-seek::-webkit-slider-thumb { border-radius: 50%; background: var(--red); }
.funnel__audio-seek::-moz-range-thumb { border-radius: 50%; background: var(--red); }

/* ===================== piezas nuevas del copy B ===================== */

/* reloj de bolsillo tachado */
/* el video ocupa todo el ancho de la pantalla (sangra el padding de la sección),
   sin esquinas redondeadas y más pegado al título y al texto */
.crossed {
  position: relative;
  width: auto;
  max-width: none;
  margin: 0 calc(-1 * clamp(22px, 6vw, 60px)) clamp(12px, 2.2vh, 20px);
}
.crossed .copy-img { margin: 0; width: 100%; height: auto; display: block; border-radius: 0; }
@media (min-width: 820px) {
  .crossed { margin-left: 0; margin-right: 0; width: min(100%, 560px); }
}
/* la X ya viene dentro de la imagen/video Ámbar; sin barras CSS */
.crossed::before,
.crossed::after { content: none; }

/* placeholders de testimonios: flat, ámbar suave */
.placeholder {
  border: 2px dashed var(--red);
  border-radius: 18px;
  opacity: 0.8;
  background: var(--card);
  color: var(--paper);
  margin: clamp(14px, 2.5vh, 22px) 0 clamp(20px, 3.5vh, 32px);
}

/* "three ways": tres tarjetas verticales en pista horizontal; empieza en la 2,
   la del centro crece y las de los lados asoman más chicas */
.ways-wrap {
  margin: 0 calc(-1 * clamp(22px, 6vw, 60px)) 0;
}
.ways {
  --w: min(72%, 440px);
  --side: calc((100% - var(--w)) / 2);
  list-style: none;
  margin: 0;
  /* padding vertical generoso para que el glow/sombra de la tarjeta central no se recorte */
  padding: 64px var(--side) 64px;
  margin-top: -56px;
  margin-bottom: -44px;
  position: relative;
  display: flex;
  gap: clamp(12px, 3vw, 20px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}
.ways:active { cursor: grabbing; }
.ways::-webkit-scrollbar { display: none; }
.way {
  position: relative;
  flex: 0 0 var(--w);
  min-height: clamp(300px, 46vh, 380px);
  box-sizing: border-box;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(20px, 3vh, 28px) clamp(20px, 3.4vw, 28px) clamp(22px, 3vh, 28px);
  border: 2px solid rgba(251, 244, 233, 0.18);
  border-radius: 28px;
  color: var(--paper);
  background: linear-gradient(160deg, #2a1d12 0%, #1f1710 60%, #15100b 100%);
  transform-origin: center;
  transition: transform 0.25s ease, opacity 0.25s ease;
  will-change: transform;
}
.way .line { margin-bottom: 8px; max-width: none; font-size: clamp(19px, 3.1vw, 26px); }
.way .line:last-child { margin-bottom: 0; }
.way .line.light { opacity: 0.7; font-size: clamp(16px, 2.6vw, 21px); }
.way__n {
  position: absolute;
  left: clamp(18px, 3vw, 24px);
  top: clamp(18px, 2.8vh, 24px);
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 17px;
  background: rgba(251, 244, 233, 0.14);
  color: var(--paper);
}
.way--you {
  background: linear-gradient(160deg, #f0a24a 0%, #e07a1f 45%, #c4681a 100%);
  border-color: transparent;
  color: var(--white);
  box-shadow: inset 0 1px 0 rgba(255, 240, 220, 0.5), 0 18px 44px rgba(224, 122, 31, 0.28);
}
.way--you .way__n { background: var(--rust); color: var(--white); }
.way__tag { margin-top: 12px; }
.ways__dots { margin-top: 2px; }
.ways__dots i { cursor: pointer; }
.carousel__dots i { cursor: pointer; }
.carousel__hint { cursor: pointer; }
.carousel__track { cursor: grab; }
.carousel__track:active { cursor: grabbing; }

/* carrusel deslizable (scroll-snap), 2 slides a todo el ancho */
.carousel {
  position: relative;
  width: min(100%, 560px);
  margin: clamp(16px, 3vh, 26px) 0 0;
}
.carousel__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
/* la siguiente tarjeta asoma un poco a la derecha */
.carousel__track { gap: 12px; }
.carousel__slide {
  flex: 0 0 86%;
  scroll-snap-align: start;
  margin: 0;
  min-width: 0;
}
/* el texto va arriba de la imagen */
.carousel__slide { display: flex; flex-direction: column; }
.carousel__slide figcaption { order: -1; margin: 0 4px 14px; max-width: none; text-align: left; }
.carousel__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
}
.carousel__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
.carousel__dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.22;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.carousel__dots i.on { opacity: 1; transform: scale(1.2); background: var(--red); }
.carousel__hint {
  margin: 6px 0 0;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
.carousel--moved .carousel__hint { opacity: 0; }

/* teléfono (chat de Rachel) */
.phone {
  display: flex;
  flex-direction: column;
  min-height: 300px;
  background: var(--white);
  border: 2px solid var(--ink-15);
  border-radius: 24px;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--sans);
}
.phone__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background: #f7f7f7;
}
.phone__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(#b8b8be, #8e8e93);
  color: #fff;
  font-weight: 700;
  font-size: 17px;
}
.phone__name { font-size: 12px; font-weight: 500; color: #000; }
.phone__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 4px;
  padding: 16px 14px 10px;
}
.phone .chat, .phone .bubble { margin-top: 0; }
.phone .bubble { max-width: 82%; }
.phone .bubble p { font-size: clamp(15px, 2.2vw, 18px); }
.phone__status { font-size: 11px; font-weight: 500; color: #8e8e93; margin-right: 6px; }
.phone__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 12px;
  background: #f7f7f7;
}
.phone__input {
  flex: 1;
  min-height: 34px;
  padding: 7px 14px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 999px;
  background: #fff;
  color: #8e8e93;
  font-size: 15px;
  line-height: 1.3;
}
.phone__input--typed { color: #000; }
.phone__caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 1px;
  vertical-align: -0.15em;
  background: #1b8cff;
  animation: phone-caret 1s steps(1, end) infinite;
}
@keyframes phone-caret { 50% { opacity: 0; } }
.phone__send {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.1);
  color: #fff;
  font-weight: 800;
  font-size: 16px;
}
.phone__send--ready { background: #1b8cff; }

/* texto metalizado ámbar: el brillo vive en el centro exacto de un degradado 3x,
   así en los dos extremos del recorrido queda fuera del texto y el ciclo no "corta" */
.metal {
  background: linear-gradient(
    100deg,
    #9a5412 0%,
    #c4681a 30%,
    #e8a35a 46%,
    #fff1d6 50%,
    #e8a35a 54%,
    #c4681a 70%,
    #9a5412 100%
  );
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: metal-shine 5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes metal-shine {
  0% { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .metal { animation: none; background-position: 50% 0; }
}

/* globos metalizados ("so fucking badly"): superficie ámbar bruñida con un brillo que la recorre */
.wishes--metal .wish {
  position: relative;
  overflow: hidden;
  border: 0;
  color: var(--white);
  background:
    linear-gradient(135deg, #f0a24a 0%, #c4681a 38%, #8a4a0e 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 220, 0.55),
    inset 0 -2px 0 rgba(60, 30, 5, 0.35);
}
.wishes--metal .wish .hl { color: #fff3dc; }
.wishes--metal .wish::before { display: none; }
.wishes--metal .wish::after {
  content: "";
  position: absolute;
  top: -100%;
  bottom: -100%;
  left: 0;
  width: 60%;
  background: linear-gradient(100deg, rgba(255, 245, 225, 0) 0%, rgba(255, 245, 225, 0.12) 35%, rgba(255, 245, 225, 0.42) 50%, rgba(255, 245, 225, 0.12) 65%, rgba(255, 245, 225, 0) 100%);
  transform: translateX(-140%) skewX(-18deg);
  animation: wish-shine 5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  pointer-events: none;
  will-change: transform;
}
.wishes--metal .wish:nth-child(2)::after { animation-delay: 0.9s; }
.wishes--metal .wish:nth-child(3)::after { animation-delay: 1.8s; }
.wishes--metal .wish:nth-child(4)::after { animation-delay: 2.7s; }
@keyframes wish-shine {
  0% { transform: translateX(-140%) skewX(-18deg); }
  100% { transform: translateX(260%) skewX(-18deg); }
}
@media (prefers-reduced-motion: reduce) {
  .wishes--metal .wish::after { animation: none; display: none; }
}

/* puntitos de three ways: blancos, flat */
.ways__dots i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(252, 239, 223, 0.28);
  box-shadow: none;
  opacity: 1;
  transition: background 0.3s ease;
}
.ways__dots i.on { background: var(--paper); box-shadow: none; transform: none; }

/* rubber band en los bordes de las pistas horizontales */
[data-drag] > * { translate: var(--ox, 0px) 0; }
[data-drag].is-springing > * { transition: translate 0.55s cubic-bezier(0.2, 0.9, 0.25, 1.25); }
[data-drag].is-overscroll { scroll-snap-type: none; }

/* puntitos de los carruseles de imágenes: flat (los de three ways siguen metalizados) */
.carousel__dots:not(.ways__dots) i {
  width: 8px;
  height: 8px;
  background: rgba(252, 239, 223, 0.28);
  box-shadow: none;
  opacity: 1;
}
.carousel__dots:not(.ways__dots) i.on {
  background: var(--paper);
  box-shadow: none;
  transform: none;
}
.carousel__hint { color: rgba(252, 239, 223, 0.6); }

/* titular del hero: medio metalizado (plata-crema) con un brillo lento;
   las copias del glitch conservan sus colores propios */
.hero .glitch {
  background: linear-gradient(
    100deg,
    #c9c0b3 0%,
    #efe9df 30%,
    #ffffff 48%,
    #fff8ec 50%,
    #ffffff 52%,
    #efe9df 70%,
    #c9c0b3 100%
  );
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: glitch-flicker 5s steps(1, end) infinite, metal-shine 7s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.hero .glitch__c--a { -webkit-text-fill-color: var(--g1); color: var(--g1); }
.hero .glitch__c--b { -webkit-text-fill-color: var(--g2); color: var(--g2); }
@media (prefers-reduced-motion: reduce) {
  .hero .glitch { animation: none; background-position: 50% 0; }
}

/* más aire entre el título y los globos */
.wishes--metal,
.wishes--white { margin-top: clamp(22px, 3.5vh, 34px); }

/* glitch del hero: la copia que era naranja ahora es negra (recorta el texto) */
.hero .glitch { --g1: #000; }

/* paréntesis del globo de Kyle: peso normal */
.wish__soft { font-weight: 400; }

/* "small" a la mitad de tamaño, alineado a la base */
.tiny { font-size: 0.5em; vertical-align: baseline; }

/* ---------- form sobre fondo oscuro: barra superior, cierre, progreso y halo del botón ---------- */
.funnel__bar,
#funnel.funnel--intro .funnel__bar {
  background: var(--ink);
  border-bottom: 1px solid rgba(252, 239, 223, 0.1);
  color: var(--paper);
}
.funnel__brand { color: var(--paper); }
.funnel__close { color: var(--paper); }
.funnel__close:hover { background: rgba(252, 239, 223, 0.1); }
.funnel__progress { background: rgba(252, 239, 223, 0.16); }
.funnel__progress-fill { background: var(--cta); }
/* el halo que tapa el contenido detrás del botón pegajoso ahora es del color del fondo */
.funnel__btn,
.funnel__btn:hover,
.funnel__btn:disabled:hover {
  box-shadow:
    0 0 0 14px #000,
    0 -24px 28px 8px #000;
}
.funnel__textarea { resize: none; }

/* el título de "hypnotized yourself" se pega más al video */
.h-lg:has(+ .crossed) { margin-bottom: clamp(14px, 2.2vh, 22px); }

/* globos blancos ("what other people asked for"): prueba en blanco con tinta oscura */
.wishes--white .wish {
  background: #fff;
  color: #1a0c04;
  border: 0;
  box-shadow: 0 10px 28px rgba(23, 5, 1, 0.22), inset 0 -2px 0 rgba(23, 5, 1, 0.06);
}
.wishes--white .wish .leo,
.wishes--white .wish .hl { color: var(--red-dark); }

/* carta final: fondo negro con una luz ámbar cálida detrás de la carta;
   la carta es papel oscuro cálido con texto crema */
.section.serif {
  background:
    radial-gradient(ellipse 80% 55% at 50% 38%, rgba(224, 122, 31, 0.28) 0%, rgba(143, 48, 11, 0.16) 40%, rgba(0, 0, 0, 0) 72%),
    #000;
  color: var(--paper);
}
.serif .letter {
  background: linear-gradient(165deg, #2e1709 0%, #21100a 55%, #190b05 100%);
  color: #fbe9d2;
  border: 1px solid rgba(242, 162, 79, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 170, 0.14),
    0 30px 70px rgba(0, 0, 0, 0.55),
    0 0 90px rgba(224, 122, 31, 0.14);
}
.serif .letter .soft { color: rgba(251, 233, 210, 0.7); }
.serif .letter .u,
.serif .letter strong { color: var(--red); }
.serif .letter .btn { box-shadow: 0 10px 30px rgba(242, 107, 63, 0.35); }

/* "i'm curious": más ancho y más bajo */
.serif .letter .btn,
.serif .letter .btn:hover {
  display: block;
  width: 100%;
  max-width: 520px;
  padding: 14px 24px;
  text-align: center;
}

.gap--sm { height: clamp(6px, 1.2vh, 14px); }

/* banner del form: la imagen Ámbar (4:3) recortada a la proporción del banner original */
.funnel__banner { aspect-ratio: 1024 / 485; object-fit: cover; object-position: 50% 42%; }

/* form oscuro: etiquetas y texto tipeado en crema */
.funnel__label,
#funnel .funnel__label--name { color: var(--paper); opacity: 1; }
.funnel__input,
.funnel__textarea,
.funnel__sk .funnel__input,
.funnel__sk .funnel__input:focus,
.funnel__option { color: var(--paper); -webkit-text-fill-color: var(--paper); caret-color: var(--red); }
.funnel__input:-webkit-autofill,
.funnel__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--paper);
  -webkit-box-shadow: 0 0 0 1000px var(--card) inset;
  transition: background-color 9999s ease-out 0s;
}
.funnel__hint { color: rgba(252, 239, 223, 0.75); }

/* pantalla de pago: fondo óxido (como "Have you ever hypnotized yourself?") y botón blanco */
#funnel:has(.funnel__screen[data-key="payment"].active),
#funnel:has(.funnel__screen[data-key="payment"].active) .funnel__bar { background: var(--rust); }
#funnel:has(.funnel__screen[data-key="payment"].active) .funnel__bar { border-bottom-color: rgba(252, 239, 223, 0.14); }
#funnel:has(.funnel__screen[data-key="payment"].active) .funnel__btn,
#funnel:has(.funnel__screen[data-key="payment"].active) .funnel__btn:hover,
#funnel:has(.funnel__screen[data-key="payment"].active) .funnel__btn:disabled:hover {
  box-shadow: 0 0 0 14px var(--rust), 0 -24px 28px 8px var(--rust);
}
#funnel .funnel__btn--pay,
#funnel .funnel__btn--pay:hover,
#funnel .funnel__btn--pay:disabled:hover { background: #fff; color: #000; }
#funnel .funnel__btn--pay:hover:not(:disabled) { background: #f3f3f3; color: #000; }
#funnel .funnel__price-now .funnel__hl { color: #fff; }
.funnel__screen[data-key="payment"] .funnel__price-old { color: rgba(252, 239, 223, 0.7); }

/* 100 menos de peso que .line (700 → 600) */
.line.thin { font-weight: 600; }

.wishes--white .wish .wish__soft { font-weight: 400; }

/* imagen Ámbar a toda la carta de "three ways"; el texto va encima, sobre un
   degradado al color de la carta para que se lea */
.way { --wbg: #1f1710; overflow: hidden; }
.way--you { --wbg: #e07a1f; }
.way__img {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
}
.way__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.way__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 38%, var(--wbg) 78%, var(--wbg) 100%);
}
.way--you .way__img::after {
  background: linear-gradient(to bottom, rgba(224, 122, 31, 0) 36%, rgba(224, 122, 31, 0.85) 70%, var(--wbg) 100%);
}
.way > .line,
.way__n { position: relative; z-index: 1; }
.way__n { position: absolute; }
.way .line.light { opacity: 0.85; }

/* "This isn't for me" y demás botones menores del form: crema sobre el fondo oscuro */
#funnel .funnel__minor,
#funnel .funnel__minor:hover {
  color: var(--paper);
  opacity: 0.9;
  text-decoration: underline;
  text-decoration-color: rgba(252, 239, 223, 0.5);
  text-underline-offset: 5px;
  background: none;
  border: 0;
}
#funnel .funnel__minor:hover { opacity: 1; text-decoration-color: var(--red); }



/* "Yes, I'm sure": misma altura que el resto de los botones del form */
#funnel .funnel__btn--big,
#funnel .funnel__btn--big:hover { padding: 16px 28px; font-size: clamp(15px, 2.2vw, 19px); }

/* el botón Next más pegado al campo */
#funnel .funnel__btn:not(.funnel__btn--big):not(.funnel__btn--pay) { margin-top: clamp(10px, 1.6vh, 16px); }

/* texto de las cards arriba (debajo del número), imagen asomando abajo */
.way {
  justify-content: flex-start;
  padding-top: calc(clamp(18px, 2.8vh, 24px) + 36px + 14px);
}
/* la imagen ocupa solo la mitad inferior de la card: el texto queda sobre fondo liso */
.way { min-height: clamp(360px, 54vh, 440px); }
.way__img { top: 42%; }
.way__img img { object-position: 50% 40%; }
.way__img::after {
  background: linear-gradient(to top, rgba(0, 0, 0, 0) 55%, var(--wbg) 100%);
}
.way--you .way__img::after {
  background: linear-gradient(to top, rgba(224, 122, 31, 0) 50%, var(--wbg) 100%);
}

/* FAQ: tarjetas apiladas estilo Apple Wallet. Cada tarjeta tapa el pie de la
   anterior (--ov); recorren toda la paleta (ciclo de 7); la abierta crece y
   empuja el resto. Única zona de la landing B donde vuelve Leo Hates School. */
.faq { --ov: 30px; }
.faq .qa,
.faq .qa:last-of-type,
.faq .qa:nth-of-type(3n),
.faq .qa:nth-of-type(3n + 1),
.faq .qa:nth-of-type(3n + 2) {
  --r: 22px;
  --bg: #fff;
  --fg: var(--ink);
  --ac: var(--cta);
  background: var(--bg);
  color: var(--fg);
  border: 0;
  margin: 0;
  padding-bottom: var(--ov);
  box-shadow: 0 -8px 22px rgba(0, 0, 0, 0.32);
  transition: transform 0.15s ease, opacity 0.7s ease;
}
.faq .qa + .qa { margin-top: calc(-1 * var(--ov)); }
.faq .qa:last-of-type { padding-bottom: 0; }
.faq .qa:nth-of-type(7n + 2) { --bg: var(--red); --fg: var(--ink); --ac: var(--rust); }
.faq .qa:nth-of-type(7n + 3) { --bg: var(--rust); --fg: var(--paper); --ac: var(--red); }
.faq .qa:nth-of-type(7n + 4) { --bg: var(--paper); --fg: var(--ink); --ac: var(--cta); }
.faq .qa:nth-of-type(7n + 5) { --bg: var(--cta); --fg: #fff; --ac: var(--ink); }
.faq .qa:nth-of-type(7n + 6) { --bg: #943101; --fg: var(--paper); --ac: var(--red); }
.faq .qa:nth-of-type(7n + 7) { --bg: var(--card); --fg: var(--paper); --ac: var(--red); }
.faq .qa .leo,
.faq .qa:nth-of-type(3n + 2) .leo,
.faq .qa .qa-body .wants .leo {
  font-family: "Leo Hates School", var(--sans);
  font-size: 1.45em;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--ac);
  -webkit-text-stroke: 0.035em currentColor;
}
.faq .qa .q .leo { line-height: 0.7; }
.faq .qa .leo.lg { font-size: 1.9em; }
.faq .qa .leo.xl { display: block; font-size: 4.2em; line-height: 0.85; margin: 4px 0 10px; }
.faq .qa .u,
.faq .qa:nth-of-type(3n + 2) .u { background-image: none; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--ac); }
.faq .qa:not([open]):active { transform: scale(0.985); }
.faq .q { padding-right: 48px; -webkit-tap-highlight-color: transparent; }
.faq .q::after,
.faq .qa:nth-of-type(3n + 2) .q::after {
  content: "+";
  top: 50%;
  right: 0;
  width: auto;
  height: auto;
  margin-top: -0.55em;
  display: block;
  border: 0;
  background: none;
  color: var(--ac);
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.25s ease;
}
.faq .qa[open] > .q::after { transform: rotate(45deg); }

/* párrafos en Courier Prime (la mono del hero); títulos y Leo quedan como están */
.line,
.way .line,
.carousel figcaption,
.qa-body .a,
.warning .line {
  font-family: "Courier Prime", "Courier New", Courier, ui-monospace, monospace;
  letter-spacing: 0;
}
/* Courier Prime solo tiene 400 y 700: los pesos intermedios se asientan en 400 */
.line.thin,
.wish__soft { font-weight: 400; }

/* form en Courier Prime: párrafos, labels, campos, opciones, tips y notas.
   Los títulos (.funnel__h) y los botones quedan como están. */
#funnel .funnel__p,
#funnel .funnel__label,
#funnel .funnel__kicker,
#funnel .funnel__input,
#funnel .funnel__textarea,
#funnel .funnel__option,
#funnel .funnel__tips,
#funnel .funnel__count,
#funnel .funnel__error,
#funnel .funnel__minor,
#funnel .funnel__legal-note,
#funnel .funnel__price-old,
#funnel .funnel__price-now {
  font-family: "Courier Prime", "Courier New", Courier, ui-monospace, monospace;
  letter-spacing: 0;
}
/* excepción: las etiquetas del paso de contacto (Your name / Email) van en la
   misma fuente que los títulos (.funnel__h), no en Courier */
#funnel .funnel__label--name { font-family: var(--sans); }

/* frases fuertes dentro de cajas (titulares de las cards de "three ways", primera
   línea del aviso y captions de los carruseles) en Helvetica Neue */
.way .line.em,
.warning .line.em:first-child,
.carousel figcaption {
  font-family: var(--sans);
  letter-spacing: -0.015em;
}
/* "(and value myself more)" en la mono */
.wish__soft {
  font-family: "Courier Prime", "Courier New", Courier, ui-monospace, monospace;
  letter-spacing: 0;
}

/* globos de deseos (los 3 primeros) en mono bold; segunda línea del aviso en mono */
.wishes--white .wish,
.warning .line.em:not(:first-child) {
  font-family: "Courier Prime", "Courier New", Courier, ui-monospace, monospace;
  letter-spacing: 0;
  font-weight: 700;
}
.warning .line.em:not(:first-child) { font-weight: 400; }
.warning .line.em:not(:first-child) .u { font-weight: 700; }

/* reloj colgando del borde superior de la sección (video con fondo #8f300b plano) */
.hang {
  width: min(31%, 133px);
  margin: 0 auto calc(-1 * clamp(30px, 5vh, 54px));
  pointer-events: none;
}
/* feedback Juan: el reloj va inline, entre "Not the one where…" y "The one that feels…" */
.hang--inline { margin: clamp(18px, 3vh, 30px) auto calc(-1 * clamp(28px, 4.5vh, 48px)); }
.hang--inline .hang__video { border-radius: 12px; }
.hang--inline + .line { position: relative; z-index: 1; }
.s-hyp .h-lg { position: relative; z-index: 1; line-height: 1.06; }
.hang__video { display: block; width: 100%; height: auto; }

/* sección "Have you ever hypnotized yourself?" un poco más clara que el resto del óxido */
.s-hyp { background: #943101; }

/* "Have you ever hypnotized yourself?" más pegado a "Nah. Not the swinging…" */
.s-hyp .h-lg:has(+ .line) { margin-bottom: clamp(14px, 2.2vh, 22px); }
/* "What do you want to CHANGE…" un poco más separado de "The kind that starts by asking you:" */
.s-hyp .line + .h-lg { margin-top: clamp(26px, 4vh, 40px); }

/* cierre: sin recuadro, directo sobre negro; texto en Courier Prime (el título queda) */
.section.serif { background: #000; }
.serif .letter,
.serif .letter::before {
  background: none;
  border: 0;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
  filter: none;
}
.serif .line {
  font-family: "Courier Prime", "Courier New", Courier, ui-monospace, monospace;
  letter-spacing: 0;
  font-size: clamp(21px, 3.8vw, 36px);
  line-height: 1.14;
  margin: 0 0 clamp(14px, 2.4vh, 26px);
}
.serif .line.soft { font-style: normal; }
/* card 2: "You're still reading." y "This one's YOU." en mono (el titular sigue en Helvetica) */
.way--you .line.em + .line.em {
  font-family: "Courier Prime", "Courier New", Courier, ui-monospace, monospace;
  letter-spacing: 0;
  font-weight: 400;
}
.way--you .line.em + .line.em .u { font-weight: 700; }
/* "But there's no menu": imagen más pegada al título y al bloque siguiente */
.h-lg.tight + .copy-img { margin-top: clamp(10px, 1.6vh, 16px); margin-bottom: clamp(12px, 2vh, 20px); }
/* título del cierre también en mono */
.serif .h-lg {
  font-family: "Courier Prime", "Courier New", Courier, ui-monospace, monospace;
  font-weight: 700;
  letter-spacing: 0;
  font-size: clamp(34px, 5.6vw, 58px);
}
/* nota del sticky en mono */
.sticky-cta__note {
  font-family: "Courier Prime", "Courier New", Courier, ui-monospace, monospace;
  letter-spacing: 0;
  font-size: clamp(21px, 3.8vw, 36px);
  line-height: 1.14;
}
/* placeholder de los campos del form en gris */
#funnel .funnel__input::placeholder,
#funnel .funnel__textarea::placeholder { color: #8a8a8a; -webkit-text-fill-color: #8a8a8a; opacity: 1; }
/* ejemplos del form ("Have the guts to ask for that raise.", etc.) en mono, incluidos los paréntesis */
#funnel .funnel__screen:not(.thankyou) .funnel__tips li,
#funnel .funnel__tips-brand {
  font-family: "Courier Prime", "Courier New", Courier, ui-monospace, monospace;
  font-weight: 700;
  font-size: clamp(17px, 2.4vw, 21px);
  line-height: 1.3;
  letter-spacing: 0;
  -webkit-text-stroke: 0;
  rotate: 0deg;
}
#funnel .funnel__tips-brand { font-weight: 400; font-size: 0.9em; }
/* botones del form (Next, Yes I'm sure…): mono, ámbar #f2a24f, esquinas curvas pero no píldora */
#funnel .funnel__btn:not(.funnel__btn--pay),
#funnel .funnel__btn:not(.funnel__btn--pay):hover,
#funnel .funnel__btn:not(.funnel__btn--pay):disabled:hover {
  font-family: "Courier Prime", "Courier New", Courier, ui-monospace, monospace;
  font-weight: 700;
  letter-spacing: 0;
  border-radius: 14px;
  background: #f2a24f;
  color: var(--ink);
}
#funnel .funnel__btn:not(.funnel__btn--pay):hover:not(:disabled) { background: #e8923a; }
/* "Yes, I'm sure": píldora y el naranja CTA de los demás botones */
#funnel .funnel__btn--big,
#funnel .funnel__btn--big:hover {
  border-radius: 999px;
  background: var(--cta);
  color: var(--white);
}
#funnel .funnel__btn--big:hover:not(:disabled) { background: var(--cta-dark); }
/* "Secure payment powered by Stripe" en Helvetica Neue */
#funnel .funnel__secure-note { font-family: var(--sans); letter-spacing: normal; }
/* pantalla de pago: descripción y precios al tamaño y peso normal de los párrafos del form */
#funnel .funnel__screen[data-key="payment"] .funnel__p.em,
#funnel .funnel__screen[data-key="payment"] .funnel__price-old,
#funnel .funnel__screen[data-key="payment"] .funnel__price-now {
  font-size: clamp(16px, 2.4vw, 20px);
  line-height: 1.4;
  font-weight: 400;
}
#funnel .funnel__screen[data-key="payment"] .funnel__price-now .funnel__hl { font-weight: 700; }
#funnel .funnel__screen[data-key="payment"] .funnel__price-now { font-size: clamp(19px, 2.8vw, 24px); font-weight: 700; }
/* número de la card: centrado y más chico */
.way__n {
  left: 50%;
  translate: -50% 0;
  width: 28px;
  height: 28px;
  font-size: 14px;
}
.way { padding-top: calc(clamp(18px, 2.8vh, 24px) + 28px + 14px); }
/* pantalla Careful: screenshot del testimonio */
#funnel .funnel__proof {
  display: block;
  width: 100%;
  max-width: 600px;
  height: auto;
  border-radius: 0;
  margin: clamp(14px, 2.5vh, 20px) 0;
}
/* pantalla "Full disclosure": tamaño y ritmo de la carta del cierre */
#funnel .funnel__screen[data-key="disclosure"] .funnel__p {
  font-size: clamp(21px, 3.8vw, 36px);
  line-height: 1.14;
  font-weight: 400;
  margin: 0 0 clamp(14px, 2.4vh, 26px);
  max-width: none;
}
#funnel .funnel__screen[data-key="disclosure"] .funnel__p.em { font-weight: 700; }
#funnel .funnel__screen[data-key="disclosure"] .funnel__p.soft { color: rgba(251, 233, 210, 0.7); }
#funnel .funnel__screen[data-key="disclosure"] .funnel__hl { color: var(--red); font-weight: 700; }
#funnel .funnel__screen[data-key="disclosure"] .funnel__gap { height: 14px; }
#funnel .funnel__screen[data-key="disclosure"] .funnel__btn--big { margin-top: clamp(18px, 3vh, 30px); }
/* "really weird." / "three ways." en naranja también sobre fondo negro */
.s-ink .hl.red { color: var(--red); }
/* form: fondo negro 100% en todas las pantallas (también la de pago) y todos
   los botones píldora naranja CTA, como "I WANT MINE" */
#funnel,
#funnel:has(.funnel__screen[data-key="payment"].active),
.funnel__bar,
#funnel.funnel--intro .funnel__bar,
#funnel:has(.funnel__screen[data-key="payment"].active) .funnel__bar { background: #000; }
#funnel:has(.funnel__screen[data-key="payment"].active) .funnel__btn,
#funnel:has(.funnel__screen[data-key="payment"].active) .funnel__btn:hover,
#funnel:has(.funnel__screen[data-key="payment"].active) .funnel__btn:disabled:hover {
  box-shadow: 0 0 0 14px #000, 0 -24px 28px 8px #000;
}
#funnel .funnel__btn,
#funnel .funnel__btn:hover,
#funnel .funnel__btn:disabled:hover,
#funnel .funnel__btn:not(.funnel__btn--pay),
#funnel .funnel__btn--pay,
#funnel .funnel__btn--big {
  border-radius: 999px;
  background: var(--cta);
  color: var(--white);
}
#funnel .funnel__btn:hover:not(:disabled),
#funnel .funnel__btn:not(.funnel__btn--pay):hover:not(:disabled),
#funnel .funnel__btn--pay:hover:not(:disabled),
#funnel .funnel__btn--big:hover:not(:disabled) { background: var(--cta-dark); color: var(--white); }
#funnel .funnel__price-now .funnel__hl { color: var(--red); }
/* card 2 ("You opened this page.") en óxido #8f300b plano */
.way--you {
  --wbg: #8f300b;
  background: #8f300b;
  box-shadow: inset 0 1px 0 rgba(255, 240, 220, 0.18), 0 18px 44px rgba(143, 48, 11, 0.35);
}
.way--you .way__img::after {
  background: linear-gradient(to top, rgba(143, 48, 11, 0) 50%, var(--wbg) 100%);
}
/* el badge "2" ya no se distingue sobre el mismo óxido: pasa a ámbar */
.way--you .way__n { background: var(--red); color: var(--ink); }
/* caption del primer teléfono alineada al borde derecho de la card */
.carousel__slide:first-child figcaption { text-align: right; margin-left: auto; }

/* titulares de las cards de "three ways" un poco más grandes */
.way .line.em { font-size: clamp(22px, 3.6vw, 30px); }


/* cards "three ways" más separadas del título */
.s-ink .h-lg + .ways-wrap { margin-top: clamp(26px, 4.5vh, 44px); }
/* "ONE second" 30% más grande */
.u.big, .leo.big { font-size: 1.3em; }
/* "It's called… HYPNOSIS." más separado de la línea anterior */
.s-white .line + .h-lg.tight { margin-top: clamp(26px, 4.5vh, 44px); }
/* "It's called… HYPNOSIS." → un poco de aire antes de la primera línea */
.s-white .h-lg.tight + .line { margin-top: clamp(14px, 2.2vh, 22px); }
/* la foto del menú más separada de "But there's no menu:" */
.s-paper .h-lg.tight + .copy-img { margin-top: clamp(22px, 3.6vh, 36px); }
/* "And it worked for them?": más aire con la imagen de arriba y con "Yes. But we got complaints…" */
.s-paper .copy-img + .gap--sm + .h-lg.tight { margin-top: clamp(16px, 2.6vh, 28px); }
.s-paper .h-lg.tight + .line.em { margin-top: clamp(14px, 2.2vh, 22px); }
/* botones dentro de las FAQ (I'M READY / I WANT MINE): blancos y más bajos */
.faq .qa-body .btn,
.faq .qa-body .btn:hover {
  background: #fff;
  color: var(--ink);
  padding: 14px 28px;
  font-size: clamp(15px, 2vw, 18px);
}
.faq .qa-body .btn:hover { background: var(--paper); }
/* ANSWER / ASK 50% más grandes */
.line .xl { font-size: 1.5em; line-height: 1; }
/* captura de testimonio (Iván): bordes redondeados y sombra suave */
.copy-img.proof { border-radius: 0; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); }
/* "VERY weird questions." en naranja */
#funnel .funnel__screen[data-key="caution"] .funnel__hl { color: var(--red); }
/* "Are you sure you want to continue?" más grande y centrado */
#funnel .funnel__screen[data-key="caution"] .funnel__p.em {
  text-align: center;
  font-size: clamp(22px, 3.4vw, 28px);
  font-weight: 700;
}
/* "I CAN HANDLE IT." / "I'M IN.": más alto y en Helvetica Neue */
#funnel .funnel__btn.funnel__btn--big,
#funnel .funnel__btn.funnel__btn--big:hover,
#funnel .funnel__btn.funnel__btn--big:disabled:hover {
  font-family: var(--sans);
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 22px 28px;
}
/* disclosure: nota entre paréntesis más chica; "BUT… if you go for it…" más grande */
#funnel .funnel__screen[data-key="disclosure"] .funnel__p.small { font-size: clamp(16px, 2.6vw, 22px); }
#funnel .funnel__screen[data-key="disclosure"] .funnel__p.em.lg { font-size: clamp(26px, 4.6vw, 44px); }
/* hover: mantener la píldora (la regla mono de arriba la bajaba a 14px al pasar el mouse) */
#funnel .funnel__btn:not(.funnel__btn--pay):hover,
#funnel .funnel__btn:not(.funnel__btn--pay):hover:not(:disabled),
#funnel .funnel__btn:not(.funnel__btn--pay):disabled:hover { border-radius: 999px; }
/* preguntas del form un poco más grandes (la de "Careful…" tiene su propio tamaño) */
#funnel .funnel__screen:not([data-key="caution"]) .funnel__h { font-size: clamp(30px, 5.8vw, 50px); }
/* todos los botones del form en Helvetica Neue (nada de mono), píldora siempre */
#funnel .funnel__btn,
#funnel .funnel__btn:hover,
#funnel .funnel__btn:disabled:hover,
#funnel .funnel__btn:not(.funnel__btn--pay),
#funnel .funnel__btn:not(.funnel__btn--pay):hover,
#funnel .funnel__btn:not(.funnel__btn--pay):disabled:hover {
  font-family: var(--sans);
  font-weight: 800;
  letter-spacing: 0.03em;
  border-radius: 999px;
}
/* pantalla de pago: fondo del color de la sección "How would you SLEEP tonight?" (--rust) */
#funnel:has(.funnel__screen[data-key="payment"].active),
#funnel:has(.funnel__screen[data-key="payment"].active) .funnel__bar { background: var(--rust); }
#funnel:has(.funnel__screen[data-key="payment"].active) .funnel__btn,
#funnel:has(.funnel__screen[data-key="payment"].active) .funnel__btn:hover,
#funnel:has(.funnel__screen[data-key="payment"].active) .funnel__btn:disabled:hover {
  box-shadow: 0 0 0 14px var(--rust), 0 -24px 28px 8px var(--rust);
}
/* "Price TODAY: $19 USD." más grande */
#funnel .funnel__screen[data-key="payment"] .funnel__price-now { font-size: clamp(23px, 3.6vw, 30px); }
/* pago: título y "Designed to…" 15% más grandes */
#funnel .funnel__screen[data-key="payment"] .funnel__h { font-size: clamp(34.5px, 6.67vw, 57.5px); }
#funnel .funnel__screen[data-key="payment"] .funnel__p.em { font-size: clamp(18.4px, 2.76vw, 23px); }
/* "who you want to be." en naranja (vale en cualquier sección) */
.line .hl.red { color: var(--red); }
/* iOS Safari 26 tiñe la barra de estado con el background-color del primer
   elemento sticky/fixed de ancho completo (ya no usa theme-color). La barra
   "mmmanifest / I WANT MINE" es sticky y óxido: dejamos su background-color en
   negro (lo que samplea Safari) y pintamos el óxido con un gradiente encima. */
.timer-bar {
  background-color: #000;
  background-image: linear-gradient(var(--rust), var(--rust));
}
/* "Careful…" más grande y notorio */
#funnel .funnel__screen[data-key="caution"] .funnel__h { font-size: clamp(44px, 11vw, 76px); letter-spacing: -0.03em; }
/* Card 2: "You're still reading." y "This one's YOU." al tamaño de las líneas light */
.way--you .line.em + .line.em,
.way--you .way__tag { font-size: clamp(16px, 2.6vw, 21px); }
/* captions del carrusel centrados */
.carousel__slide figcaption,
.carousel__slide:first-child figcaption { text-align: center; margin-left: auto; margin-right: auto; }
/* Disclosure: "Let's be honest…" en Helvetica como "Careful…"; "There's a payment screen…" en blanco */
#funnel .funnel__screen[data-key="disclosure"] .funnel__p.em { font-family: var(--sans); font-weight: 800; letter-spacing: -0.02em; }
#funnel .funnel__screen[data-key="disclosure"] .funnel__p.soft { color: #fff; }

/* Link personal (?r=): desplegable con las respuestas del lead sobre el copy de pago */
#funnel .funnel__answers { margin: 0 0 22px; border: 1.5px solid rgba(255, 255, 255, 0.35); border-radius: 14px; background: rgba(0, 0, 0, 0.14); color: #fff; }
#funnel .funnel__answers[hidden] { display: none; }
#funnel .funnel__answers summary { list-style: none; cursor: pointer; padding: 12px 16px; font-family: var(--sans); font-weight: 800; font-size: 15px; letter-spacing: 0.02em; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; }
#funnel .funnel__answers summary::-webkit-details-marker { display: none; }
#funnel .funnel__answers-caret { transition: transform 0.2s; }
#funnel .funnel__answers[open] .funnel__answers-caret { transform: rotate(180deg); }
#funnel .funnel__answers-body { padding: 0 16px 14px; }
#funnel .funnel__answers-q { margin: 10px 0 4px; font-size: 13px; font-weight: 800; color: var(--red); text-transform: uppercase; letter-spacing: 0.03em; }
#funnel .funnel__answers-a { margin: 0; font-size: 15px; line-height: 1.45; white-space: pre-wrap; }

/* Desktop: los dos carruseles salen del ancho del wrap hasta el borde del
   viewport, así las tarjetas laterales asoman enteras en vez de cortarse. */
@media (min-width: 900px) {
  .ways-wrap { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
  .carousel { width: 100%; }
  .carousel__track {
    margin-right: calc(50% - 50vw);
    /* la última tarjeta puede alinearse al inicio (dots correctos) */
    padding-right: calc(50vw - 50% + 278px);
  }
  .carousel__slide { flex: 0 0 482px; }
  /* dots y "swipe" siguen centrados bajo la primera tarjeta */
  .carousel__dots, .carousel__hint { width: 482px; }
}