/* ══════════════════════════════════════════════════════════════════════════
   HOMEPAGE — Hero
   ══════════════════════════════════════════════════════════════════════════ */
.home-hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

/* Background image layer */
.home-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center 20%;
  transform: scale(1.04);
  transition: transform 8s ease;
}
.home-hero:hover::before { transform: scale(1); }

/* Dark gradient overlay */
.hero-backdrop {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(15,12,8,.1)  0%,
    rgba(15,12,8,.3)  30%,
    rgba(15,12,8,.75) 65%,
    rgba(15,12,8,.97) 90%,
    var(--bg)        100%
  );
  z-index: 1;
}

/* Film grain texture */
.hero-grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 3;
  padding-bottom: var(--space-9);
  padding-top: var(--space-9);
}

.hero-content {
  max-width: 620px;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-4);
}
.hero-eyebrow svg { width: 14px; height: 14px; }
.hero-eyebrow__icon { color: var(--gold); }

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--text);
  margin-bottom: var(--space-4);
  text-shadow: 0 2px 20px rgba(0,0,0,.5);
}

.hero-author {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: .9rem;
  color: var(--text-2);
  margin-bottom: var(--space-4);
}
.hero-author a { color: var(--gold); transition: color var(--dur) var(--ease); }
.hero-author a:hover { color: var(--gold-light); }
.hero-dot { color: var(--text-4); }

.hero-description {
  font-size: 1rem;
  color: var(--text-2);
  line-height: 1.7;
  margin-bottom: var(--space-6);
  max-width: 480px;
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
}

.hero-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Scroll hint */
.hero-scroll-hint {
  position: absolute;
  bottom: var(--space-5);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}
.hero-scroll-hint span {
  display: block;
  width: 2px;
  height: 40px;
  background: linear-gradient(180deg, transparent, var(--text-4), transparent);
  margin: 0 auto;
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: .3; transform: scaleY(.5) translateY(-10px); }
  50%       { opacity: .8; transform: scaleY(1)  translateY(0); }
}

/* ══════════════════════════════════════════════════════════════════════════
   HOMEPAGE — Genre pills
   ══════════════════════════════════════════════════════════════════════════ */
.genre-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.genre-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 18px;
  border-radius: var(--radius-full);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: .85rem;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease-spring);
}
.genre-pill:hover {
  background: var(--surface-3);
  border-color: var(--gold-dim);
  color: var(--gold);
  transform: translateY(-2px);
}
.genre-pill__count {
  font-size: .72rem;
  color: var(--text-4);
  background: var(--bg);
  padding: 1px 7px;
  border-radius: var(--radius-full);
}

/* ══════════════════════════════════════════════════════════════════════════
   HOMEPAGE — Subscription CTA
   ══════════════════════════════════════════════════════════════════════════ */
.subscribe-cta-section {
  background: radial-gradient(ellipse at 30% 50%, rgba(212,148,58,.06) 0%, transparent 70%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-top: var(--space-8);
}

.subscribe-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-9);
  align-items: center;
}
@media (max-width: 768px) {
  .subscribe-cta { grid-template-columns: 1fr; }
  .subscribe-cta__preview { display: none; }
}

.subscribe-cta__desc {
  font-size: 1rem;
  color: var(--text-2);
  line-height: 1.7;
  max-width: 480px;
  margin: var(--space-4) 0 var(--space-6);
}

.subscribe-cta__plans {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.plan-card {
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  text-align: center;
  min-width: 110px;
  position: relative;
  transition: border-color var(--dur) var(--ease);
}
.plan-card--featured {
  border-color: var(--gold-dim);
  background: linear-gradient(135deg, var(--surface-2), rgba(212,148,58,.08));
}
.plan-card__badge {
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: #0f0c08;
  font-size: .65rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.plan-card__price {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
}
.plan-card__period {
  font-size: .75rem;
  color: var(--text-3);
  margin-top: 4px;
}
.plan-card__saving {
  font-size: .72rem;
  color: var(--green);
  margin-top: 4px;
  font-weight: 600;
}

.subscribe-cta__actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.subscribe-cta__perks {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.subscribe-cta__perks li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: .88rem;
  color: var(--text-2);
}
.subscribe-cta__perks svg { width: 16px; height: 16px; color: var(--green); flex-shrink: 0; }

/* Preview stack */
.preview-stack {
  position: relative;
  width: 220px;
  height: 260px;
  flex-shrink: 0;
}
.preview-stack__card {
  position: absolute;
  width: 160px; height: 160px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 2px solid var(--border);
  background: var(--surface-2);
  box-shadow: var(--shadow-lg);
}
.preview-stack__card:nth-child(1) { top: 0;   left: 0;  transform: rotate(-8deg); z-index: 1; }
.preview-stack__card:nth-child(2) { top: 40px; left: 30px; transform: rotate(2deg); z-index: 2; }
.preview-stack__card:nth-child(3) { top: 80px; left: 55px; transform: rotate(7deg); z-index: 3; }
.preview-stack__card img { width: 100%; height: 100%; object-fit: cover; }
.preview-stack__label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  text-align: center;
  font-size: .78rem;
  color: var(--text-3);
  font-style: italic;
}

/* ══════════════════════════════════════════════════════════════════════════
   GENERIC PAGE (Terms, About, Contact)
   ══════════════════════════════════════════════════════════════════════════ */
.page-body {
  max-width: var(--max-w-text);
  margin: 0 auto;
  padding: var(--space-8) var(--space-5);
}
.page-body h1 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 600;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border);
}
.page-body h2 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  margin: var(--space-6) 0 var(--space-3);
  color: var(--text);
}
.page-body h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: var(--space-5) 0 var(--space-2);
}
.page-body p {
  font-size: .95rem;
  line-height: 1.8;
  color: var(--text-2);
  margin-bottom: var(--space-4);
}
.page-body a { color: var(--gold); }
.page-body a:hover { color: var(--gold-light); text-decoration: underline; }
.page-body ul, .page-body ol {
  padding-left: var(--space-5);
  margin-bottom: var(--space-4);
}
.page-body li {
  font-size: .95rem;
  color: var(--text-2);
  line-height: 1.8;
  margin-bottom: var(--space-2);
}
.page-body ul li { list-style: disc; }
.page-body ol li { list-style: decimal; }

/* ══════════════════════════════════════════════════════════════════════════
   PWA INSTALL BANNER
   ══════════════════════════════════════════════════════════════════════════ */
#pvtInstallBanner {
  position: fixed;
  bottom: calc(var(--player-h) + 12px);
  left: var(--space-4);
  right: var(--space-4);
  max-width: 420px;
  margin: 0 auto;
  background: var(--surface-3);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius);
  padding: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  box-shadow: var(--shadow-lg), var(--glow-gold);
  z-index: 1500;
  transform: translateY(20px);
  opacity: 0;
  transition: transform var(--dur-slow) var(--ease-spring),
              opacity var(--dur-slow) var(--ease);
}
#pvtInstallBanner.visible { transform: translateY(0); opacity: 1; }
#pvtInstallBanner p { flex: 1; font-size: .85rem; color: var(--text-2); }
#pvtInstallBanner p strong { color: var(--text); }
#pvtInstallBtn { white-space: nowrap; }
#pvtInstallDismiss {
  background: none;
  border: none;
  color: var(--text-4);
  padding: 4px;
  cursor: pointer;
  display: flex;
}
#pvtInstallDismiss svg { width: 16px; height: 16px; }

/* ── Series grid (homepage) ──────────────────────────────────────────────── */
.series-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-4);
}
.series-grid-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 3/4;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur) var(--ease-spring);
}
.series-grid-card:hover { transform: translateY(-4px) scale(1.02); }
.series-grid-card__cover {
  position: absolute;
  inset: 0;
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.series-grid-card__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.series-grid-card:hover .series-grid-card__cover img { transform: scale(1.08); }
.series-grid-card__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(10,7,4,.88) 100%);
}
.series-grid-card__info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: var(--space-3);
  z-index: 1;
}
.series-grid-card__info h3 {
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 3px;
  line-height: 1.3;
}
.series-grid-card__info span { font-size: .72rem; color: var(--text-3); }

/* ── iOS PWA install banner ───────────────────────────────────────────────── */
#pvtIosBanner {
  position: fixed;
  bottom: calc(var(--player-h) + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 1500;
  width: calc(100% - 32px);
  max-width: 380px;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease),
              transform var(--dur-slow) var(--ease-spring);
  pointer-events: none;
}
#pvtIosBanner.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
#pvtIosBannerInner {
  background: var(--surface-3);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  box-shadow: var(--shadow-lg);
}
.ios-banner__icon {
  font-size: 2rem;
  flex-shrink: 0;
  line-height: 1;
}
.ios-banner__text {
  flex: 1;
  min-width: 0;
}
.ios-banner__text strong {
  display: block;
  font-size: .88rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}
.ios-banner__text span {
  font-size: .78rem;
  color: var(--text-3);
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.ios-banner__text svg {
  color: var(--gold);
  flex-shrink: 0;
}
#pvtIosDismiss {
  background: none;
  border: none;
  color: var(--text-4);
  padding: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border-radius: 50%;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
#pvtIosDismiss:hover { color: var(--text-2); background: var(--border); }
#pvtIosDismiss svg { width: 16px; height: 16px; pointer-events: none; }
/* Arrow pointing down toward Safari's share button */
.ios-banner__arrow {
  width: 0; height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid var(--border-light);
  margin: 0 auto;
  position: relative;
}
.ios-banner__arrow::before {
  content: '';
  position: absolute;
  top: -12px;
  left: -9px;
  width: 0; height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 9px solid var(--surface-3);
}