/* ===== Design tokens ===== */
:root {
  --red: #FF0010;
  --pink: #FF7990;
  --blue: #73DBFF;
  --bg: #1E1E21;
  --footer-bg: #141416;
  --white: #FFFFFF;
  --muted: rgba(255, 255, 255, 0.7);
  --check-green: #2BD96B;
  --gradient-135: linear-gradient(135deg, var(--red) 0%, var(--pink) 50%, var(--blue) 100%);
  --gradient-90: linear-gradient(90deg, var(--red) 0%, var(--pink) 50%, var(--blue) 100%);
  --radius-pill: 999px;
  --radius-card: 28px;
  --page-pad: clamp(20px, 4vw, 56px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  min-height: 100%;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Poppins', Helvetica, sans-serif;
  position: relative;
  overflow-x: hidden;
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--pink); }

img { max-width: 100%; }

@keyframes fcBlink { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes fcBlinkInv { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes fcHalo { 0%, 100% { opacity: 0; } 50% { opacity: .6; } }

/* ===== Background collage layer ===== */
.bg-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}
.bg-collage {
  position: absolute;
  /* big enough that the -15deg rotation still covers every corner, on a
     tall narrow phone page (needs ~3.3x the width) as well as on desktop
     (needs ~1.15x the height + a bit) */
  left: -150%;
  top: -25%;
  width: 400%;
  height: 150%;
  /* grayscale, blur and 20% opacity over --bg are baked into the image:
     a CSS filter on a layer this size exceeds mobile GPU texture limits
     and renders as a solid gray rectangle on phones */
  background-image: url('../assets/fondo-collage.jpg');
  background-size: 560px auto;
  background-repeat: repeat;
  transform: rotate(-15deg);
}

/* ===== Header ===== */
.site-header {
  background: transparent;
  position: sticky;
  top: 0;
  z-index: 10;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
/* same gradient stroke as the footer's top line, shown once the hero has
   scrolled out of view (JS toggles .is-scrolled) */
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--gradient-90);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.site-header.is-scrolled {
  background-color: var(--footer-bg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.site-header.is-scrolled::after { opacity: 1; }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px var(--page-pad);
}
.logo-img {
  height: 44px;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}
.social-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.icon-btn {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--white);
  background: transparent;
  transition: background .2s ease;
}
.icon-btn:hover { background: rgba(255, 255, 255, 0.15); }
.icon-btn img { display: block; }
.icon-btn-sm {
  width: 38px;
  height: 38px;
  border: 1.5px solid var(--muted);
}

/* ===== Hero ===== */
.hero {
  position: relative;
  z-index: 1;
  padding: 0 var(--page-pad);
  /* the models bleed past the screen edges on mobile; clip them here, since
     phones ignore overflow-x on body and would widen the whole page to fit
     them (zoomed-out page with an empty gray strip down one side) */
  overflow-x: clip;
}
@supports not (overflow-x: clip) {
  .hero { overflow: hidden; }
}
.hero-models {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 32px;
  transform: translateX(-40px);
  /* The overlap only holds while each image fills its box. On wide-but-short
     screens the per-image max-height would shrink the visible picture inside
     a still-wide box, and the left model (anchored left) drifts away from the
     group. Capping the grid width by viewport height keeps the boxes no wider
     than their content, so all three scale down together. Center image
     (ratio 0.75, box 125% of a column, max-height 100vh-70px) is the binding
     one: column <= 0.6 * (100vh - 70px), so grid <= 1.8 * that + 2 gaps.
     1696px = where the center's 680px max-width would start binding. */
  max-width: min(1696px, calc(180vh - 62px));
}
.backlight {
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  filter: blur(40px);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}
.backlight-red {
  left: 17%; top: 68%;
  width: 30vw; height: 30vw; max-width: 460px; max-height: 460px;
  background: radial-gradient(circle, rgba(255,0,16,0.95) 0%, rgba(255,0,16,0.55) 30%, rgba(255,0,16,0) 70%);
}
.backlight-pink {
  left: 31%; top: 52%;
  width: 52vw; height: 52vw; max-width: 820px; max-height: 820px;
  background: radial-gradient(circle, rgba(255,121,144,0.95) 0%, rgba(255,121,144,0.5) 30%, rgba(255,121,144,0) 70%);
}
.backlight-blue {
  left: 45%; top: 68%;
  width: 30vw; height: 30vw; max-width: 460px; max-height: 460px;
  background: radial-gradient(circle, rgba(115,219,255,0.95) 0%, rgba(115,219,255,0.5) 30%, rgba(115,219,255,0) 70%);
}
.model {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 90px);
  object-fit: contain;
  object-position: left bottom;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 95%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 95%);
}
.model-left {
  z-index: 1;
  max-width: 560px;
  margin-left: -12%;
  filter: brightness(1.03) contrast(1.02) saturate(0.9) drop-shadow(0 18px 28px rgba(0,0,0,0.55));
}
.model-center {
  z-index: 3;
  width: 125%;
  max-width: 680px;
  margin-left: -80%;
  justify-self: start;
  max-height: calc(100vh - 70px);
  object-position: center bottom;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%);
  filter: brightness(0.96) contrast(1.15) saturate(1.3) drop-shadow(0 18px 28px rgba(0,0,0,0.55));
}
.model-right {
  z-index: 2;
  max-width: 560px;
  margin-left: -130%;
  justify-self: start;
  filter: brightness(0.93) contrast(1.15) saturate(1.18) drop-shadow(0 18px 28px rgba(0,0,0,0.55));
}
.hero-text {
  position: absolute;
  right: var(--page-pad);
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  max-width: 40%;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.hero-title {
  margin: 0;
  font-weight: 900;
  font-size: clamp(32px, 4.6vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--white);
  text-align: left;
  text-wrap: balance;
}
.gradient-text {
  background: var(--gradient-135);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.cta-button {
  cursor: pointer;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  height: 64px;
  padding: 0 40px;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--white);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
  transition: transform .3s ease;
}
.cta-button:hover { transform: scale(1.05); color: var(--white); }
.cta-border-static {
  position: absolute; inset: 0;
  border-radius: var(--radius-pill);
  border: 2px solid var(--white);
  animation: fcBlinkInv 2.4s ease-in-out infinite;
  will-change: opacity;
  pointer-events: none;
}
.cta-border-gradient {
  position: absolute; inset: 0;
  border-radius: var(--radius-pill);
  padding: 2px;
  background: var(--gradient-135);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: fcBlink 2.4s ease-in-out infinite;
  will-change: opacity;
  pointer-events: none;
}
.cta-halo {
  position: absolute; inset: -6px;
  border-radius: var(--radius-pill);
  background: var(--gradient-135);
  filter: blur(18px);
  animation: fcHalo 2.4s ease-in-out infinite;
  will-change: opacity;
  pointer-events: none;
  z-index: -1;
}
.cta-label { position: relative; }

/* ===== Subscriptions ===== */
.subscriptions {
  position: relative;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(30,30,33,0) 0px, var(--bg) 320px);
  margin-top: -200px;
  min-height: 100vh;
  padding: 296px var(--page-pad) 96px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.spotlight {
  position: absolute;
  bottom: 0;
  width: 70vw;
  transform: translateX(-50%);
  filter: blur(30px);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0.4;
}
.spotlight-red {
  left: 17%; height: 80%;
  background: radial-gradient(ellipse 50% 100% at 50% 100%, rgba(255,0,16,0.7) 0%, rgba(255,0,16,0.3) 35%, rgba(255,0,16,0) 75%);
}
.spotlight-pink {
  left: 50%; height: 85%;
  background: radial-gradient(ellipse 50% 100% at 50% 100%, rgba(255,121,144,0.7) 0%, rgba(255,121,144,0.3) 35%, rgba(255,121,144,0) 75%);
}
.spotlight-blue {
  left: 83%; height: 80%;
  background: radial-gradient(ellipse 50% 100% at 50% 100%, rgba(115,219,255,0.7) 0%, rgba(115,219,255,0.3) 35%, rgba(115,219,255,0) 75%);
}
/* two-column layout: video + copy on the left, Subscriptions title + cards
   pushed to the right, with a vertical divider between them */
.subscriptions-layout {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1600px;
  display: flex;
  align-items: center;
  gap: 64px;
}
.subscriptions-intro {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  min-width: 0;
}
.intro-video {
  width: 45%;
  max-width: 300px;
  aspect-ratio: 480 / 912;
  flex-shrink: 0;
  display: block;
  border-radius: 20px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  object-fit: cover;
}
.intro-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.intro-title {
  margin: 0;
  font-weight: 900;
  font-size: clamp(36px, 4vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--white);
}
.intro-text {
  margin: 0;
  font-size: clamp(16px, 1.15vw, 21px);
  line-height: 1.5;
  color: var(--white);
}
.join-now {
  font-weight: 900;
  font-size: clamp(30px, 3vw, 54px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: var(--gradient-135);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));
}
.subscriptions-divider {
  width: 2px;
  align-self: stretch;
  background: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}
.subscriptions-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.section-title {
  position: relative;
  z-index: 2;
  margin: 0;
  text-align: center;
  font-weight: 900;
  font-size: clamp(32px, 4.4vw, 68px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--white);
}
.plans {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 760px;
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px;
}
.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 380px;
  border-radius: var(--radius-card);
  border: 2px solid var(--white);
  overflow: hidden;
  /* clip (not just hide) so focus or scrollIntoView can never scroll the card's glows into view */
  overflow: clip;
  background: transparent;
}
.plan-image {
  display: block;
  width: 100%;
  aspect-ratio: 460 / 200;
  object-fit: cover;
  border-bottom: 2px solid var(--white);
}
.plan-glow {
  position: absolute;
  width: 320px; height: 320px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  filter: blur(30px);
  pointer-events: none;
  z-index: 0;
}
.plan-glow-red {
  left: 0%; top: 100%;
  background: radial-gradient(circle, rgba(255,0,16,0.45) 0%, rgba(255,0,16,0) 70%);
}
.plan-glow-pink {
  left: 55%; top: 108%;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(255,121,144,0.4) 0%, rgba(255,121,144,0) 70%);
}
.plan-glow-blue {
  left: 100%; top: 85%;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(115,219,255,0.4) 0%, rgba(115,219,255,0) 70%);
}
.plan-body {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 28px 28px 32px;
  color: var(--white);
  font-size: 16px;
  line-height: 1.4;
}
.plan-benefits-title {
  font-weight: 800;
  font-size: 24px;
  text-align: center;
}
.plan-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.plan-list-emoji { justify-content: space-evenly; flex: 1; }
.plan-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.li-icon {
  flex: none;
  width: 22px;
  text-align: center;
}
.li-icon.check { color: var(--check-green); font-weight: 900; }
.plan-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}
.price-amount { font-weight: 900; font-size: 40px; letter-spacing: -0.02em; }
.price-period { font-size: 14px; opacity: 0.8; }
.subscribe-button {
  cursor: pointer;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  border-radius: var(--radius-pill);
  color: var(--white);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.08em;
  transition: transform .3s ease;
}
.subscribe-button:hover { transform: scale(1.04); color: var(--white); }
.subscribe-border {
  position: absolute; inset: 0;
  border-radius: var(--radius-pill);
  border: 2px solid var(--white);
  pointer-events: none;
}
.subscribe-label { position: relative; }
.pay-with {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 13px;
  opacity: 0.85;
}
.pay-with img { display: block; }

/* ===== Footer ===== */
.site-footer {
  position: relative;
  z-index: 1;
  background: var(--footer-bg);
  color: var(--white);
}
.footer-line { height: 2px; background: var(--gradient-90); }
.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 40px var(--page-pad);
}
.footer-logo { height: 34px; width: auto; display: block; }
.footer-social { display: flex; gap: 10px; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding: 18px var(--page-pad) 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
  color: var(--muted);
}

/* ===== Subscriptions as a full-screen panel (desktop) ===== */
/* Like the hero, the subscriptions block fills exactly the screen area
   below the sticky header, so "Become a member" lands with everything
   (video, copy, both full cards) visible at once. Card spacing and type
   scale with viewport height so the cards fit on shorter laptop screens. */
@media (min-width: 901px) {
  .subscriptions-layout { min-height: calc(100vh - 88px); }
  .section-title { font-size: clamp(32px, min(4.4vw, 6.5vh), 68px); }
  .plans { margin-top: clamp(14px, 2.6vh, 40px); gap: 24px; }
  .plan-body {
    padding: clamp(12px, 2vh, 24px) 18px clamp(14px, 2.4vh, 28px);
    gap: clamp(7px, 1.5vh, 18px);
    font-size: clamp(13px, 1.7vh, 16px);
    line-height: 1.35;
  }
  .plan-list { gap: clamp(4px, 0.85vh, 10px); }
  .plan-benefits-title { font-size: clamp(17px, 2.5vh, 24px); }
  .price-amount { font-size: clamp(26px, 4vh, 40px); }
  .subscribe-button { height: clamp(40px, 5.4vh, 54px); }
  .intro-video { max-height: calc(100vh - 88px - 80px); }
}

/* Narrow desktop/tablet-landscape: side-by-side columns get too thin for
   two cards, so the video+copy stacks above and the title+cards become
   their own full-screen panel. */
@media (min-width: 901px) and (max-width: 1150px) {
  .subscriptions-layout { flex-direction: column; min-height: 0; max-width: 900px; gap: 40px; }
  .subscriptions-intro { width: 100%; }
  .intro-video { max-width: 240px; }
  .subscriptions-divider { width: 60%; height: 2px; align-self: center; }
  .subscriptions-main { width: 100%; min-height: calc(100vh - 88px); justify-content: center; }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
}

/* ===== Responsive ===== */
/* Design was desktop-only in the handoff; below stacks models smaller and moves
   the headline/CTA below them, as noted in the README. The overlap ratios on
   .model-left/.model-center/.model-right (margin-left as % of own width) are
   scale-invariant by design — never override them, only the column width they're
   based on, so the "fan" composition never loses its relative position. */
@media (max-width: 900px) {
  /* header scrolls away with the page instead of staying pinned; the
     scroll-top button (below) takes over "get back to the top" duty */
  /* relative (not static) so the ::after stroke stays anchored to the header */
  .site-header { position: relative; }

  .hero {
    /* fills the full screen on load together with the (static) header —
       Subscriptions only comes into view once the user scrolls */
    min-height: calc(100svh - 88px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-top: 24px;
    /* reserved space for the overlaid text + CTA and the collage->solid
       fade below, placed safely after the models so it never paints over
       them — pushes the Subscriptions section further down, which is also
       what buys the models room to render bigger */
    padding-bottom: 210px;
  }
  .hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 210px;
    background: linear-gradient(to bottom, rgba(30,30,33,0) 0%, var(--bg) 100%);
    pointer-events: none;
    z-index: 2;
  }
  .hero-models {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    /* The column width (container/3) is what actually drives each model's
       rendered size — the width:100%/125% rules fill their column, so
       max-width/max-height caps above that never bind. To make the models
       meaningfully bigger we have to grow the column, i.e. bleed the grid
       well past the viewport edges (not just cancel the page padding),
       then pull the visual cluster back to center with translateX. At
       ~1.5x viewport width the cluster renders at ~92% of the screen. */
    /* ...but never wider than what the viewport HEIGHT allows (same idea as
       the desktop max-width: center image is the binding one, column <=
       0.6 * its max-height of 100svh - 292px, grid <= 1.8 * that + 2 gaps).
       Without this, on wide-short screens (landscape phones/tablets) the
       images get height-capped inside oversized boxes and the left model
       drifts away from the group. margin-left keeps the grid centered for
       whichever width wins. */
    --hm-w: min(calc(100% + 2 * var(--page-pad) + 130vw), calc(180svh - 518px));
    width: var(--hm-w);
    max-width: none;
    margin-left: calc((100% - var(--hm-w)) / 2);
    /* the overlap math (-80%/-130% margins) leaves the visual cluster
       anchored off-center within the grid (on desktop that space is filled
       by the hero text sitting beside it) — with no text beside it on
       mobile, shift the cluster right so it's centered in the viewport.
       This % is of the grid's own (now much wider) box, so it stays
       correct regardless of the bleed amount above. */
    transform: translateX(23.7%);
  }
  /* capped to what's actually left after the static header + hero's own
     top/bottom padding, so the models can never push the CTA (or
     Subscriptions) past the first screen — a flat vh value doesn't know
     about that reserved space and will blow past it */
  .model { max-height: calc(100svh - 322px); }
  .model-left { max-width: 740px; }
  .model-center { max-width: 860px; max-height: calc(100svh - 292px); }
  .model-right { max-width: 740px; }

  /* the backlights' left/top % already track the models correctly (both are
     expressed as a fraction of .hero-models' own box, so they stay aligned
     at any bleed amount) — but their SIZE was still in viewport vw units,
     which didn't grow when the models did. Scale by the same ~2.3x the grid
     was bled by (130vw bleed ÷ 100vw ≈ 2.3) so the glow keeps the same
     visual proportion to the models as in the original design. */
  /* sized as % of .hero-models' width (same proportion as the desktop
     30vw/52vw relative to the grid), so the glows track the models at any
     grid width */
  .backlight-red, .backlight-blue { width: 30%; height: auto; aspect-ratio: 1; max-width: none; max-height: none; }
  .backlight-pink { width: 52%; height: auto; aspect-ratio: 1; max-width: none; max-height: none; }

  /* text overlays the models (in front of them), centered, no backdrop
     panel — just a drop-shadow on the glyphs themselves for legibility */
  .hero-text {
    position: absolute;
    left: 50%;
    right: auto;
    top: auto;
    bottom: 70px;
    transform: translateX(-50%);
    width: 92%;
    max-width: 440px;
    align-items: center;
    text-align: center;
    gap: 18px;
    z-index: 5;
  }
  /* the base rule sets align-self:flex-start for desktop's left-aligned
     button — that per-item value overrides the container's align-items
     above, so it has to be reset explicitly or the button stays left-hung
     instead of centering with the rest of .hero-text */
  .cta-button { align-self: center; }
  .hero-title {
    text-align: center;
    text-shadow: 0 2px 14px rgba(0,0,0,0.8), 0 1px 3px rgba(0,0,0,0.7);
  }
  /* text-shadow doesn't composite cleanly with a transparent/gradient-clipped
     fill (it shows through as a ghosted double image) — use drop-shadow
     instead, which follows the actual glyph alpha */
  .hero-title .gradient-text {
    text-shadow: none;
    filter: drop-shadow(0 2px 10px rgba(0,0,0,0.8));
  }

  /* flat solid bg, no overlap with .hero — the fade happens inside .hero's own
     padding-bottom via ::after above, so this can never cover the CTA button
     regardless of how tall the hero content ends up being */
  .subscriptions {
    margin-top: 0;
    min-height: auto;
    padding-top: 40px;
    padding-left: var(--page-pad);
    padding-right: var(--page-pad);
    padding-bottom: 40px;
    background: var(--bg);
  }
  /* side-by-side like desktop (not stacked) and visually tightened — the
     380px card floor, roomy gaps and bigger type are sized for desktop's
     wide single-column cards; stacked + at full size on mobile pushed the
     section well past one screen, so the title and both complete cards
     could never be visible together. This keeps 2 columns at every mobile
     width and shrinks spacing/type to fit everything in one view. */
  .plans { max-width: 480px; margin-top: 28px; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .plan-card { min-height: auto; }
  .plan-body { gap: 10px; padding: 12px 12px 14px; font-size: 12px; }
  .plan-benefits-title { font-size: 15px; }
  .price-amount { font-size: 22px; }
  .price-period { font-size: 11px; }
  .subscribe-button { height: 38px; font-size: 11px; }
  .pay-with { font-size: 10px; gap: 6px; }
  .pay-with img { width: 16px; height: 16px; }
  /* five coins + the label do not fit one row in the half-width cards:
     label on its own line, coins together below it */
  .pay-with > span { flex-basis: 100%; text-align: center; }

  /* the intro block stacks above the title/cards, but video and copy stay
     side by side inside it; divider becomes a horizontal rule */
  .subscriptions-layout { flex-direction: column; max-width: 480px; gap: 28px; }
  .subscriptions-intro { width: 100%; gap: 16px; }
  .intro-video { width: 42%; max-width: 190px; border-radius: 16px; }
  .intro-copy { gap: 10px; }
  .intro-title { font-size: 28px; }
  .intro-text { font-size: 14px; line-height: 1.5; }
  .join-now { font-size: 28px; }
  .subscriptions-divider { width: 70%; height: 2px; align-self: center; }
  /* title + cards are their own full-screen panel, where "Become a member"
     lands (the header isn't sticky here, so it's the full 100svh) */
  .subscriptions-main { width: 100%; min-height: 100svh; justify-content: center; }
  .pay-with { font-size: 12px; gap: 8px 6px; }
}

@media (max-width: 560px) {
  .hero { min-height: calc(100svh - 66px); padding-bottom: 160px; }
  .hero::after { height: 160px; }
  /* header(66) + hero's own top/bottom padding(24+160=184) = 250px of
     chrome reserved outside the models on this tier */
  .model { max-height: calc(100svh - 250px); }
  /* same height-based cap as the 900px tier, for this tier's max-height of
     100svh - 225px on the center image */
  .hero-models { --hm-w: min(calc(100% + 2 * var(--page-pad) + 130vw), calc(180svh - 397px)); }
  .model-center { max-height: calc(100svh - 225px); }
  .hero-text { bottom: 48px; max-width: 320px; width: 95%; }
  .cta-button { padding: 0 28px; font-size: 16px; }
  .header-inner { flex-wrap: nowrap; gap: 10px; padding: 16px var(--page-pad); }
  .logo-img { height: 32px; }
  .social-nav { gap: 6px; flex-wrap: nowrap; }
  .icon-btn { width: 34px; height: 34px; }
  .icon-btn img { width: 15px; height: 15px; }
  .footer-top { justify-content: center; text-align: center; }
  .footer-bottom { justify-content: center; text-align: center; }
}

/* ===== Scroll-to-top button ===== */
/* only relevant on mobile/tablet, where the header is static rather than
   sticky — this takes over as the way back to the top of the page */
.scroll-top-btn {
  display: none;
  position: fixed;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--white);
  /* opaque enough to read over anything; a backdrop blur on a fixed button
     re-renders on every scroll frame and stutters on phones */
  background: rgba(20, 20, 22, 0.82);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 50;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease;
}
.scroll-top-btn:hover { background: rgba(255, 255, 255, 0.15); }
.scroll-top-btn svg { display: block; width: 18px; height: 18px; }
.scroll-top-btn.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* ===== Phones & tablets: no sticky header ===== */
/* On narrow screens and on any touch device (tablets in landscape fall in
   the desktop width range), the header scrolls away with the page and never
   gets the scrolled background/stroke — the scroll-top button replaces it. */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .site-header { position: relative; }
  .site-header.is-scrolled { background-color: transparent; box-shadow: none; }
  .site-header.is-scrolled::after { opacity: 0; }
  .scroll-top-btn { display: flex; }
}
/* touch tablets in the desktop layout: no sticky header to subtract, so the
   subscriptions panel is a full screen */
@media (min-width: 1151px) and (hover: none) and (pointer: coarse) {
  .subscriptions-layout { min-height: 100svh; }
}
@media (min-width: 901px) and (max-width: 1150px) and (hover: none) and (pointer: coarse) {
  .subscriptions-main { min-height: 100svh; }
}

/* ===== Checkout dialog (Discord -> date of birth -> crypto checkout) ===== */
.checkout-dialog {
  width: min(400px, calc(100% - 32px));
  padding: 32px 28px 28px;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-radius: 24px;
  background: var(--footer-bg);
  color: var(--white);
  font-family: 'Poppins', Helvetica, sans-serif;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
.checkout-dialog::backdrop {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.checkout-dialog::before {
  content: "";
  position: absolute;
  /* full width along the top edge; its ends fade out so the line
     dissolves into the rounded corners instead of cutting across them */
  left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--gradient-90);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
.dialog-close {
  position: absolute;
  top: 10px; right: 12px;
  width: 36px; height: 36px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.dialog-close:hover { color: var(--white); }
.dialog-title { margin: 0 0 10px; font-size: 24px; font-weight: 900; }
.dialog-text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.dialog-text:empty { display: none; }
.dialog-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 50px;
  margin-top: 22px;
  border: 2px solid var(--white);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--white);
  font: 700 14px 'Poppins', Helvetica, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .3s ease;
}
.dialog-button:hover { transform: scale(1.03); }
a.dialog-button { text-decoration: none; }
.dialog-button[hidden], .age-form[hidden], .dialog-spinner[hidden] { display: none; }
.discord-button { background: #5865F2; border-color: #5865F2; }
.age-form { display: flex; flex-direction: column; align-items: stretch; margin-top: 20px; text-align: left; }
.age-label { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.age-input {
  height: 48px;
  padding: 0 14px;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--white);
  font: 500 15px 'Poppins', Helvetica, sans-serif;
  color-scheme: dark;
}
.age-input:focus { outline: none; border-color: var(--blue); }
.dialog-spinner {
  width: 34px; height: 34px;
  margin: 22px auto 0;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--pink);
  border-radius: 50%;
  animation: fcSpin 0.8s linear infinite;
}
@keyframes fcSpin { to { transform: rotate(360deg); } }

/* coin choice: Bitcoin / Litecoin side by side, "Other" below with stacked logos */
.coin-picker { margin-top: 22px; }
.coin-picker[hidden] { display: none; }
.coin-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.coin-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--white);
  font: 600 14px 'Poppins', Helvetica, sans-serif;
  cursor: pointer;
  transition: border-color .2s ease, transform .2s ease;
}
.coin-option:hover { border-color: var(--pink); transform: translateY(-2px); }
.coin-option > img { width: 30px; height: 30px; }
.coin-other {
  flex-direction: row;
  gap: 16px;
  width: 100%;
  margin-top: 12px;
  padding: 12px;
}
.coin-stack { display: flex; }
.coin-stack img {
  width: 34px;
  height: 34px;
  padding: 7px;
  border-radius: 50%;
  background: #2A2A2F;
  border: 2px solid var(--footer-bg);
}
.coin-stack img + img { margin-left: -10px; }

/* PayPal mark + wordmark under "Pay with" */
.paypal-brand { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.paypal-word { font-size: 16px; font-weight: 800; font-style: italic; letter-spacing: -0.01em; color: var(--white); }
@media (max-width: 900px) {
  .paypal-word { font-size: 13px; }
}

/* crypto options shown greyed out until the BTCPay store is live */
.coming-soon-badge {
  display: inline-block;
  margin-bottom: 14px;
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  background: var(--gradient-90);
  color: var(--white);
  font: 700 11px 'Poppins', Helvetica, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.coin-option:disabled,
.coin-option:disabled:hover {
  filter: grayscale(1);
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  border-color: rgba(255, 255, 255, 0.25);
}

/* payment choice: PayPal on top, crypto (coming soon) below a divider */
.payment-picker { margin-top: 22px; }
.payment-picker[hidden] { display: none; }
.payment-picker .coin-picker { margin-top: 0; }
.paypal-button {
  margin-top: 0;
  background: #0070BA;
  border-color: #0070BA;
  text-transform: none;
  letter-spacing: 0;
}
.paypal-button .paypal-word { font-size: 18px; }
.payment-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 14px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.payment-divider::before,
.payment-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
}

/* ===== Legal pages (terms, privacy, refunds, DMCA) ===== */
.legal-page .site-header { background-color: var(--footer-bg); }
.legal-page .site-header::after { opacity: 1; }
.legal-back { color: var(--white); font-size: 14px; font-weight: 600; }
.legal-back:hover { color: var(--pink); }
.legal {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto;
  padding: 48px var(--page-pad) 80px;
  color: rgba(255, 255, 255, 0.85);
  font-family: 'Poppins', Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.75;
}
.legal h1 { margin: 0 0 6px; color: var(--white); font-size: clamp(32px, 5vw, 48px); font-weight: 900; line-height: 1.15; }
.legal h2 { margin: 36px 0 10px; color: var(--white); font-size: 20px; font-weight: 700; }
.legal-updated { margin: 0 0 28px; color: var(--muted); font-size: 13px; }
.legal ul, .legal ol { padding-left: 22px; }
.legal li { margin: 6px 0; }
.legal strong { color: var(--white); }
.legal-summary {
  padding: 16px 20px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
}
.footer-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
.footer-legal a { color: var(--muted); }
.footer-legal a:hover { color: var(--white); }

/* consent notes under the dialog's Discord and PayPal buttons */
.dialog-legal { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.dialog-legal[hidden] { display: none; }
.dialog-legal a { color: var(--blue); }

/* final-sale notice at the end of the payment window */
.final-sale {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 18px 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(255, 77, 90, 0.45);
  border-radius: 12px;
  background: rgba(255, 0, 16, 0.08);
  color: rgba(255, 255, 255, 0.8);
  font-size: 12.5px;
  line-height: 1.5;
  text-align: left;
}
.final-sale a { color: var(--blue); }

/* adults-only notice on entry: a darker, blurrier backdrop than the checkout dialog */
.age-gate::backdrop {
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
html:has(.age-gate[open]) { overflow: hidden; }
.age-gate-logo { display: block; width: 150px; height: auto; margin: 0 auto 20px; }
.age-gate-enter { border-color: transparent; background: var(--gradient-90); }
.age-gate-leave { display: inline-block; margin-top: 14px; color: var(--muted); font-size: 13px; }
.age-gate-leave:hover { color: var(--white); }