/* ==========================================================================
   ICONIC VOICES — 2026 Premium Layer
   Loaded AFTER style.css. Same class names → overrides win at equal specificity.
   Goal: editorial-luxury dark UI (black + gold leaf), Apple-grade spatial
   generosity & motion, but a distinct "private-library" identity.
   Respects prefers-reduced-motion throughout.
   ========================================================================== */

:root {
  /* Layered surfaces (elevation) */
  --iv-elev-0: #0A0A0B;
  --iv-elev-1: #131317;
  --iv-elev-2: #17171c;
  --iv-elev-3: #1e1e24;
  --iv-elev-card: linear-gradient(180deg, #17171c 0%, #121216 100%);

  /* Gold leaf */
  --iv-gold: #C9A84C;
  --iv-gold-2: #E8D48B;
  --iv-gold-deep: #A8862F;
  --iv-gold-ink: #20180A;

  /* Ink */
  --iv-ink: #F6F6F8;
  --iv-ink-2: #B6B6BE;
  --iv-ink-3: #84848C;

  /* Hairlines & glows */
  --iv-line: rgba(201,168,76,0.12);
  --iv-line-soft: rgba(255,255,255,0.06);
  --iv-line-strong: rgba(201,168,76,0.30);
  --iv-glow: rgba(201,168,76,0.16);
  --iv-glow-strong: rgba(201,168,76,0.34);

  /* Shadows */
  --iv-shadow-1: 0 1px 0 rgba(255,255,255,0.03) inset, 0 18px 40px -22px rgba(0,0,0,0.8);
  --iv-shadow-2: 0 1px 0 rgba(255,255,255,0.04) inset, 0 40px 90px -30px rgba(0,0,0,0.9);
  --iv-shadow-gold: 0 18px 50px -18px rgba(201,168,76,0.35);

  /* Motion */
  --iv-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --iv-ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  --iv-d1: 0.22s;
  --iv-d2: 0.45s;
  --iv-d3: 0.8s;

  --iv-radius: 18px;
  --iv-radius-lg: 24px;
}

/* ---------- Canvas: base + fixed aura + film grain (kills banding) -------- */
html { background: var(--iv-elev-0); }
body { background: transparent; color: var(--iv-ink-2); }

body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(201,168,76,0.10) 0%, rgba(201,168,76,0.03) 26%, transparent 55%),
    radial-gradient(90% 60% at 85% 8%, rgba(120,90,200,0.05) 0%, transparent 50%),
    linear-gradient(180deg, #0A0A0B 0%, #0C0C0E 40%, #09090B 100%);
}
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Rhythm: tighter editorial section spacing ---------------------- */
:root { --section-padding: 88px; }
.section-header { margin: 0 auto 44px; }

/* ---------- Type refinements ---------------------------------------------- */
.heading-hero {
  font-size: clamp(2.7rem, 6.4vw, 5rem);
  line-height: 1.03;
  letter-spacing: -0.025em;
  font-weight: 700;
}
.heading-hero em { font-style: italic; color: var(--iv-gold); display: inline-block; }
.heading-section {
  font-size: clamp(2.1rem, 4vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.section-label {
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  color: var(--iv-gold);
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
}
.section-header { max-width: 760px; }
.section-header .text-body, .text-body { color: var(--iv-ink-2); line-height: 1.7; }

/* ---------- Buttons: refined gold (no cheap flat gradient) ---------------- */
.btn-primary {
  background: linear-gradient(180deg, var(--iv-gold-2) 0%, var(--iv-gold) 52%, var(--iv-gold-deep) 100%);
  color: var(--iv-gold-ink);
  font-weight: 650;
  letter-spacing: -0.01em;
  border-radius: 13px;
  padding: 15px 30px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.45) inset, 0 10px 26px -12px rgba(201,168,76,0.6);
  transition: transform var(--iv-d1) var(--iv-ease-spring), box-shadow var(--iv-d2) var(--iv-ease);
  position: relative; overflow: hidden;
}
.btn-primary::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.55) 48%, transparent 62%);
  transform: translateX(-120%); transition: transform 0.7s var(--iv-ease); opacity: 0.8;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 18px 40px -14px rgba(201,168,76,0.7); }
.btn-primary:hover::before { transform: translateX(120%); }
.btn-primary:active { transform: translateY(0) scale(0.99); }

.btn-secondary {
  background: rgba(255,255,255,0.015);
  border: 1px solid var(--iv-line);
  color: var(--iv-gold-2);
  border-radius: 12px;
  font-weight: 550;
  transition: border-color var(--iv-d1) var(--iv-ease), background var(--iv-d1) var(--iv-ease), transform var(--iv-d1) var(--iv-ease-spring), color var(--iv-d1) var(--iv-ease);
}
.btn-secondary:hover { border-color: var(--iv-line-strong); background: rgba(201,168,76,0.07); transform: translateY(-1px); color: var(--iv-gold-2); }

/* ---------- Nav ----------------------------------------------------------- */
.nav { padding: 22px 0; }
.nav.scrolled {
  padding: 11px 0;
  background: rgba(10,10,12,0.72);
  backdrop-filter: saturate(160%) blur(22px);
  -webkit-backdrop-filter: saturate(160%) blur(22px);
  border-bottom: 1px solid var(--iv-line);
}
.nav-logo { letter-spacing: -0.015em; font-size: 1.45rem; }
.nav-links a { color: var(--iv-ink-2); font-weight: 500; }
.nav-links a::after { background: var(--iv-gold); height: 1.5px; }

/* ---------- HERO ---------------------------------------------------------- */
.hero { min-height: 92vh; padding: 150px 0 90px; }
/* flex item must be allowed to shrink below the player's intrinsic width,
   else it overflows narrow viewports and .hero{overflow:hidden} clips the text */
.hero-content { flex: 1 1 auto; min-width: 0; max-width: 920px; }
.hero-content .iv-player, .hero-content .hero-demo-wrap { width: 100%; }
.hero-content .section-label { margin-bottom: 26px; }
.hero-subtitle {
  font-size: 1.16rem; line-height: 1.65; color: var(--iv-ink-2);
  max-width: 600px; margin: 26px auto 34px;
}
.hero-cta-group { gap: 14px; margin-bottom: 40px; }

/* Featured voice strip */
.hero-voice-strip {
  display: flex; justify-content: center; gap: clamp(14px, 3vw, 34px);
  margin: 4px auto 38px; flex-wrap: wrap;
}
.hero-voice { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.hero-voice img {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--iv-line);
  box-shadow: 0 8px 22px -10px rgba(0,0,0,0.8);
  filter: grayscale(0.25) contrast(1.02);
  transition: transform var(--iv-d2) var(--iv-ease-spring), border-color var(--iv-d2) var(--iv-ease), filter var(--iv-d2) var(--iv-ease);
}
.hero-voice:hover img { transform: translateY(-4px) scale(1.05); border-color: var(--iv-line-strong); filter: grayscale(0); }
.hero-voice figcaption { font-size: 0.74rem; letter-spacing: 0.08em; color: var(--iv-ink-3); text-transform: uppercase; }

/* hero demo wrapper (player + early-access capture) */
.hero-demo-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 560px; margin: 0 auto; }
.hero-demo-wrap .hero-waitlist-form { width: 100%; max-width: 440px; }
.hero-demo-wrap .demo-placeholder-small { font-size: 0.78rem; color: var(--iv-ink-3); }

/* ===========================================================================
   AUDIO PLAYER — hero feature player
   =========================================================================== */
.iv-player {
  --pl-accent: var(--iv-gold);
  max-width: 560px; margin: 8px auto 0;
  background: var(--iv-elev-card);
  border: 1px solid var(--iv-line);
  border-radius: var(--iv-radius);
  box-shadow: var(--iv-shadow-2);
  padding: 18px 20px 20px;
  text-align: left;
  position: relative; overflow: hidden;
}
.iv-player::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--iv-line-strong), transparent);
}
.iv-player__top { display: flex; align-items: center; gap: 14px; }
.iv-player__play {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(180deg, var(--iv-gold-2), var(--iv-gold) 55%, var(--iv-gold-deep));
  color: var(--iv-gold-ink);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 12px 28px -10px rgba(201,168,76,0.6);
  transition: transform var(--iv-d1) var(--iv-ease-spring), box-shadow var(--iv-d2) var(--iv-ease);
}
.iv-player__play:hover { transform: scale(1.06); box-shadow: 0 1px 0 rgba(255,255,255,0.45) inset, 0 16px 36px -10px rgba(201,168,76,0.75); }
.iv-player__play:active { transform: scale(0.97); }
.iv-player__play svg { width: 22px; height: 22px; fill: currentColor; }
.iv-player__play .iv-ic-pause { display: none; }
.iv-player.is-playing .iv-ic-play { display: none; }
.iv-player.is-playing .iv-ic-pause { display: block; }
.iv-player__meta { min-width: 0; flex: 1; }
.iv-player__title { color: var(--iv-ink); font-weight: 600; font-size: 0.98rem; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iv-player__sub { color: var(--iv-ink-3); font-size: 0.78rem; margin-top: 2px; display: flex; align-items: center; gap: 7px; }
.iv-player__badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--iv-gold-2); border: 1px solid var(--iv-line); border-radius: 999px; padding: 2px 8px;
}
.iv-player__speed {
  flex: 0 0 auto; background: rgba(255,255,255,0.03); border: 1px solid var(--iv-line);
  color: var(--iv-ink-2); font-size: 0.78rem; font-weight: 600; border-radius: 9px;
  padding: 7px 11px; cursor: pointer; transition: all var(--iv-d1) var(--iv-ease); font-variant-numeric: tabular-nums;
}
.iv-player__speed:hover { border-color: var(--iv-line-strong); color: var(--iv-gold-2); }

/* Waveform */
.iv-player__wave {
  margin-top: 16px; height: 46px; width: 100%;
  display: flex; align-items: center; gap: 3px; cursor: pointer;
  touch-action: none;
}
.iv-wave-bar {
  flex: 1 1 0; min-width: 2px; border-radius: 2px;
  background: rgba(255,255,255,0.13);
  transform-origin: center;
  transition: background 0.12s linear, transform 0.18s var(--iv-ease);
}
.iv-wave-bar.is-played { background: linear-gradient(180deg, var(--iv-gold-2), var(--iv-gold)); }
.iv-player.is-playing .iv-wave-bar.is-cursor { transform: scaleY(1.18); }

.iv-player__row { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.iv-player__time { font-size: 0.76rem; color: var(--iv-ink-3); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.iv-player__hint { font-size: 0.74rem; color: var(--iv-ink-3); }
.iv-player__hint a { color: var(--iv-gold-2); }

/* ===========================================================================
   GLOBAL MINI-PLAYER (slides up when a sample plays anywhere)
   =========================================================================== */
.iv-miniplayer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
  transform: translateY(140%); transition: transform var(--iv-d2) var(--iv-ease);
  background: rgba(14,14,17,0.86);
  backdrop-filter: saturate(160%) blur(22px); -webkit-backdrop-filter: saturate(160%) blur(22px);
  border-top: 1px solid var(--iv-line);
  box-shadow: 0 -16px 40px -20px rgba(0,0,0,0.9);
  padding: 10px max(16px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.iv-miniplayer.is-active { transform: translateY(0); }
.iv-miniplayer__inner {
  max-width: var(--content-max-width); margin: 0 auto;
  display: flex; align-items: center; gap: 14px;
}
.iv-miniplayer__play {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(180deg, var(--iv-gold-2), var(--iv-gold) 55%, var(--iv-gold-deep));
  color: var(--iv-gold-ink); display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 8px 20px -10px rgba(201,168,76,0.7); transition: transform var(--iv-d1) var(--iv-ease-spring);
}
.iv-miniplayer__play:hover { transform: scale(1.07); }
.iv-miniplayer__play svg { width: 17px; height: 17px; fill: currentColor; }
.iv-miniplayer__play .iv-ic-pause { display: none; }
.iv-miniplayer.is-playing .iv-ic-play { display: none; }
.iv-miniplayer.is-playing .iv-ic-pause { display: block; }
.iv-miniplayer__meta { min-width: 0; flex: 0 1 240px; }
.iv-miniplayer__title { color: var(--iv-ink); font-size: 0.86rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iv-miniplayer__sub { color: var(--iv-ink-3); font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iv-miniplayer__track { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; }
.iv-miniplayer__time { font-size: 0.72rem; color: var(--iv-ink-3); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.iv-miniplayer__bar { flex: 1 1 auto; height: 5px; border-radius: 999px; background: rgba(255,255,255,0.12); cursor: pointer; position: relative; }
.iv-miniplayer__fill { position: absolute; inset: 0 auto 0 0; width: 0%; border-radius: 999px; background: linear-gradient(90deg, var(--iv-gold), var(--iv-gold-2)); }
.iv-miniplayer__fill::after { content: ""; position: absolute; right: -5px; top: 50%; width: 11px; height: 11px; border-radius: 50%; background: var(--iv-gold-2); transform: translateY(-50%); box-shadow: 0 0 0 3px rgba(201,168,76,0.25); }
.iv-miniplayer__close { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; color: var(--iv-ink-3); display: grid; place-items: center; cursor: pointer; transition: color var(--iv-d1), background var(--iv-d1); }
.iv-miniplayer__close:hover { color: var(--iv-ink); background: rgba(255,255,255,0.05); }
@media (max-width: 640px) {
  .iv-miniplayer__meta { flex-basis: 120px; }
  .iv-miniplayer__time { display: none; }
}

/* ---------- Social proof / founder quote --------------------------------- */
.founder-quote { max-width: 820px; margin: 0 auto; padding-left: 26px; border-left: 2px solid var(--iv-line-strong); }
.founder-quote__text { font-family: var(--font-display); font-style: italic; font-size: clamp(1.25rem, 2.4vw, 1.7rem); line-height: 1.45; color: var(--iv-ink); }
.founder-quote__author { color: var(--iv-gold-2); margin-top: 14px; font-size: 0.9rem; letter-spacing: 0.02em; }
.waitlist-count-badge { display: inline-flex; align-items: baseline; gap: 8px; margin: 0 auto 22px; padding: 8px 16px; border: 1px solid var(--iv-line); border-radius: 999px; background: rgba(201,168,76,0.05); }
.waitlist-count-badge__number { font-family: var(--font-display); font-size: 1.3rem; color: var(--iv-gold-2); font-weight: 700; }
.waitlist-count-badge__label { font-size: 0.82rem; color: var(--iv-ink-3); }

/* ===========================================================================
   AUTHOR GRID — cleaner premium cards
   =========================================================================== */
.iv-v2-author-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.iv-v2-author-card {
  background: var(--iv-elev-card);
  border: 1px solid var(--iv-line);
  border-radius: var(--iv-radius);
  padding: 22px 20px 20px;
  box-shadow: var(--iv-shadow-1);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
  position: relative; overflow: hidden;
  transition: transform var(--iv-d2) var(--iv-ease-spring), border-color var(--iv-d2) var(--iv-ease), box-shadow var(--iv-d2) var(--iv-ease);
}
.iv-v2-author-card::after {
  content: ""; position: absolute; inset: -1px -1px auto -1px; height: 130px;
  background: radial-gradient(80% 100% at 50% 0%, rgba(201,168,76,0.08), transparent 70%);
  opacity: 0; transition: opacity var(--iv-d2) var(--iv-ease); pointer-events: none;
}
.iv-v2-author-card:hover { transform: translateY(-5px); border-color: var(--iv-line-strong); box-shadow: var(--iv-shadow-2); }
.iv-v2-author-card:hover::after { opacity: 1; }
/* Gallery-plate portrait: full-width framed "painting" instead of a social-app
   circle — keeps the studio art (books, light, hands) the circles were cropping away. */
.iv-v2-author-card__portrait {
  width: 100%; height: auto; aspect-ratio: 5 / 6; border-radius: 12px;
  object-fit: cover; object-position: 50% 18%;
  border: 1px solid rgba(201,168,76,0.22);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.6),
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 22px 44px -20px rgba(0,0,0,0.9);
  filter: grayscale(0.22) contrast(1.04) brightness(0.97);
  transition: filter var(--iv-d2) var(--iv-ease), border-color var(--iv-d2) var(--iv-ease), box-shadow var(--iv-d2) var(--iv-ease);
}
.iv-v2-author-card:hover .iv-v2-author-card__portrait {
  filter: grayscale(0) contrast(1.05) brightness(1.02);
  border-color: rgba(201,168,76,0.55);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.6),
    0 0 0 5px rgba(201,168,76,0.07),
    0 0 38px -6px rgba(201,168,76,0.28),
    0 26px 50px -20px rgba(0,0,0,0.95);
}
.iv-v2-author-card__portrait-placeholder {
  width: 100%; aspect-ratio: 5 / 6; border-radius: 12px; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 3rem; color: var(--iv-gold-2);
  background: radial-gradient(circle at 50% 35%, #21212b, #121217); border: 1px solid rgba(201,168,76,0.22);
}
.iv-v2-author-card__name { font-family: var(--font-display); font-size: 1.28rem; color: var(--iv-ink); margin-top: 14px; letter-spacing: -0.01em; }
.iv-v2-author-card__lifespan { font-size: 0.78rem; color: var(--iv-ink-3); font-variant-numeric: tabular-nums; }
.iv-v2-author-card__era {
  font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--iv-gold);
  margin-top: 6px; padding: 3px 10px; border: 1px solid var(--iv-line); border-radius: 999px;
}

/* Sample chip (plays the public-domain demo via global player) */
.iv-author-sample {
  margin-top: 16px; display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.02); border: 1px solid var(--iv-line); border-radius: 999px;
  color: var(--iv-ink-2); padding: 8px 15px; font-size: 0.82rem; font-weight: 550; cursor: pointer;
  white-space: nowrap;
  transition: all var(--iv-d1) var(--iv-ease);
}
@media (max-width: 640px) {
  .iv-author-sample { padding: 7px 11px; font-size: 0.76rem; gap: 6px; }
}
.iv-author-sample:hover { border-color: var(--iv-line-strong); color: var(--iv-gold-2); background: rgba(201,168,76,0.06); }
.iv-author-sample svg { width: 13px; height: 13px; fill: var(--iv-gold-2); }
.iv-author-sample.is-playing svg { fill: var(--iv-gold-2); }

.iv-v2-author-card__cta-primary { margin-top: 16px; width: 100%; }
.iv-v2-author-card__cta-bundle { margin-top: 10px; width: 100%; font-size: 0.8rem; padding: 9px 16px; }

/* Coming-soon variant (authors with no purchasable books → no dead end) */
.iv-v2-author-card--soon .iv-v2-author-card__portrait,
.iv-v2-author-card--soon .iv-v2-author-card__portrait-placeholder { filter: grayscale(0.85) brightness(0.8); }
.iv-v2-author-card__soon-badge {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
  color: var(--iv-ink-2); background: rgba(255,255,255,0.05); border: 1px solid var(--iv-line);
  border-radius: 999px; padding: 4px 9px;
}
.iv-v2-author-card__soon-cta {
  margin-top: 16px; width: 100%; background: transparent; border: 1px dashed var(--iv-line-strong);
  color: var(--iv-gold-2); border-radius: 12px; padding: 11px 16px; font-weight: 550; cursor: pointer;
  transition: all var(--iv-d1) var(--iv-ease);
}
.iv-v2-author-card__soon-cta:hover { background: rgba(201,168,76,0.06); border-style: solid; }

/* ===========================================================================
   BROWSE / CATALOG
   =========================================================================== */
.iv-v2-browse__controls { gap: 18px; margin-bottom: 26px; }
.iv-v2-browse__search {
  background: var(--iv-elev-2); border: 1px solid var(--iv-line); color: var(--iv-ink);
  border-radius: 13px; padding: 14px 18px; font-size: 0.96rem;
  transition: border-color var(--iv-d1) var(--iv-ease), box-shadow var(--iv-d1) var(--iv-ease);
}
.iv-v2-browse__search:focus { border-color: var(--iv-line-strong); box-shadow: 0 0 0 4px rgba(201,168,76,0.12); outline: none; }
.iv-v2-browse__filter-chips { gap: 8px; }
.iv-v2-browse__filter-chip {
  background: rgba(255,255,255,0.02); border: 1px solid var(--iv-line); color: var(--iv-ink-2);
  border-radius: 999px; padding: 8px 15px; font-size: 0.82rem; font-weight: 500;
  transition: all var(--iv-d1) var(--iv-ease);
}
.iv-v2-browse__filter-chip:hover { border-color: var(--iv-line-strong); color: var(--iv-ink); }
.iv-v2-browse__filter-chip--active { background: linear-gradient(180deg, var(--iv-gold-2), var(--iv-gold)); color: var(--iv-gold-ink); border-color: transparent; font-weight: 650; }

.iv-v2-browse__grid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.iv-v2-browse-card {
  background: var(--iv-elev-card); border: 1px solid var(--iv-line); border-radius: var(--iv-radius);
  padding: 14px; box-shadow: var(--iv-shadow-1);
  display: flex; flex-direction: column; gap: 4px;
  transition: transform var(--iv-d2) var(--iv-ease-spring), border-color var(--iv-d2) var(--iv-ease), box-shadow var(--iv-d2) var(--iv-ease);
}
.iv-v2-browse-card:hover { transform: translateY(-5px); border-color: var(--iv-line-strong); box-shadow: var(--iv-shadow-2); }
/* Cover presentation: «showcase backlight» — warm museum-case glow behind the
   plate, lifted brightness so covers read against the library-hall background. */
.iv-v2-browse-card__cover-frame {
  position: relative; aspect-ratio: 2/3; border-radius: 12px; overflow: visible;
  background: none; border: none; margin-bottom: 12px;
}
.iv-v2-browse-card__cover-frame::before {
  content: ""; position: absolute; inset: -14% -18%; z-index: 0; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 42%, rgba(214,164,84,0.34), rgba(214,164,84,0.08) 55%, transparent 75%);
  filter: blur(6px); pointer-events: none;
}
.iv-v2-browse-card__cover-frame img {
  position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover;
  border-radius: 10px; border: 1px solid rgba(214,170,90,0.5);
  filter: brightness(1.22) contrast(1.04) saturate(1.05);
  box-shadow: 0 18px 38px -14px rgba(0,0,0,0.9), 0 0 30px -6px rgba(201,168,76,0.25);
  transition: filter var(--iv-d2) var(--iv-ease), box-shadow var(--iv-d2) var(--iv-ease), transform var(--iv-d2) var(--iv-ease-spring);
}
.iv-v2-browse-card:hover .iv-v2-browse-card__cover-frame img {
  transform: translateY(-3px);
  filter: brightness(1.3) contrast(1.05) saturate(1.08);
  box-shadow: 0 24px 46px -16px rgba(0,0,0,0.95), 0 0 44px -6px rgba(201,168,76,0.4);
}
.iv-v2-browse-card__title { font-family: var(--font-display); font-size: 1.02rem; color: var(--iv-ink); line-height: 1.25; }
.iv-v2-browse-card__author { font-size: 0.82rem; color: var(--iv-ink-3); }
.iv-v2-browse-card { min-width: 0; }
.iv-v2-browse-card__era { font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--iv-gold); margin-top: 4px; align-self: flex-start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iv-v2-browse-card__title, .iv-v2-browse-card__author { min-width: 0; overflow-wrap: anywhere; }
.iv-v2-browse-card__cta { margin-top: 12px; }
/* play-sample affordance over cover */
.iv-browse-sample {
  position: absolute; bottom: 10px; left: 10px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(12,12,14,0.6); border: 1px solid var(--iv-line-strong);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: var(--iv-gold-2); opacity: 0; transform: translateY(6px);
  transition: opacity var(--iv-d2) var(--iv-ease), transform var(--iv-d2) var(--iv-ease-spring), background var(--iv-d1);
}
.iv-v2-browse-card:hover .iv-browse-sample, .iv-browse-sample:focus-visible { opacity: 1; transform: translateY(0); }
.iv-browse-sample:hover { background: rgba(201,168,76,0.2); }
.iv-browse-sample svg { width: 14px; height: 14px; fill: currentColor; }

.iv-v2-browse__page-btn {
  background: rgba(255,255,255,0.02); border: 1px solid var(--iv-line); color: var(--iv-ink-2);
  border-radius: 10px; padding: 9px 14px; transition: all var(--iv-d1) var(--iv-ease);
}
.iv-v2-browse__page-btn:hover:not([disabled]) { border-color: var(--iv-line-strong); color: var(--iv-gold-2); }
.iv-v2-browse__page-status { color: var(--iv-ink-3); }

/* ===========================================================================
   HOW IT WORKS — refined numerals (replaces emoji)
   =========================================================================== */
.steps-grid { gap: 24px; }
/* legacy gold connector line pokes out between the new solid cards — remove */
.steps-grid::before { display: none; }
.step-item {
  background: var(--iv-elev-card); border: 1px solid var(--iv-line); border-radius: var(--iv-radius);
  padding: 30px 26px; box-shadow: var(--iv-shadow-1); position: relative; overflow: hidden;
  transition: transform var(--iv-d2) var(--iv-ease-spring), border-color var(--iv-d2) var(--iv-ease);
}
.step-item:hover { transform: translateY(-4px); border-color: var(--iv-line-strong); }
.step-icon {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 1.4rem;
  background: rgba(201,168,76,0.07); border: 1px solid var(--iv-line); margin-bottom: 18px;
  color: var(--iv-gold-2);
}
.step-number { color: var(--iv-gold); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; }
.step-title { font-family: var(--font-display); font-size: 1.3rem; color: var(--iv-ink); margin: 8px 0 10px; }
.step-text { color: var(--iv-ink-2); line-height: 1.65; }
.how-disclosure {
  margin-top: 36px; padding: 22px 26px; border-radius: var(--iv-radius);
  background: rgba(201,168,76,0.04); border: 1px solid var(--iv-line);
}
.how-disclosure strong { color: var(--iv-ink); }

/* ===========================================================================
   PRICING — premium tier cards
   =========================================================================== */
.iv-v2-pricing-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.iv-v2-tier {
  background: var(--iv-elev-card); border: 1px solid var(--iv-line); border-radius: var(--iv-radius-lg);
  padding: 32px 28px; box-shadow: var(--iv-shadow-1); position: relative; display: flex; flex-direction: column;
  transition: transform var(--iv-d2) var(--iv-ease-spring), border-color var(--iv-d2) var(--iv-ease), box-shadow var(--iv-d2) var(--iv-ease);
}
.iv-v2-tier:hover { transform: translateY(-4px); border-color: var(--iv-line-strong); }
.iv-v2-tier--featured {
  border-color: var(--iv-line-strong);
  box-shadow: var(--iv-shadow-2), 0 0 0 1px rgba(201,168,76,0.18), 0 30px 80px -30px rgba(201,168,76,0.3);
  background: linear-gradient(180deg, #1b1a17 0%, #131216 100%);
}
.iv-v2-tier--featured::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(180deg, rgba(201,168,76,0.5), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.iv-v2-tier__badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(180deg, var(--iv-gold-2), var(--iv-gold)); color: var(--iv-gold-ink);
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700;
  padding: 6px 16px; border-radius: 999px; box-shadow: 0 8px 20px -8px rgba(201,168,76,0.6);
}
.iv-v2-tier__name { font-family: var(--font-display); font-size: 1.3rem; color: var(--iv-ink); }
.iv-v2-tier__price { font-family: var(--font-display); font-size: 2.9rem; color: var(--iv-gold-2); margin: 14px 0 4px; letter-spacing: -0.02em; }
.iv-v2-tier__price-suffix { font-size: 1rem; color: var(--iv-ink-3); font-family: var(--font-body); }
.iv-v2-tier__sub { color: var(--iv-ink-2); line-height: 1.6; flex: 1; }
.iv-v2-tier__cta { margin-top: 22px; width: 100%; }
.iv-v2-pricing-tiers__fine { color: var(--iv-ink-3); margin-top: 22px; }
.iv-v2-pricing-tiers__fine a { color: var(--iv-gold-2); }

/* ---------- Waitlist ------------------------------------------------------ */
.waitlist-section .waitlist-block {
  background: var(--iv-elev-card); border: 1px solid var(--iv-line); border-radius: var(--iv-radius-lg);
  padding: clamp(32px, 5vw, 60px); box-shadow: var(--iv-shadow-2); max-width: 860px; margin: 0 auto; text-align: center;
}
.waitlist-input { background: var(--iv-elev-2); border: 1px solid var(--iv-line); color: var(--iv-ink); border-radius: 12px; }
.waitlist-input:focus { border-color: var(--iv-line-strong); box-shadow: 0 0 0 4px rgba(201,168,76,0.12); }
.hero-waitlist-input { background: var(--iv-elev-2); border: 1px solid var(--iv-line); border-radius: 11px; }
.hero-waitlist-input:focus { border-color: var(--iv-line-strong); }

/* ---------- Footer -------------------------------------------------------- */
.footer { border-top: 1px solid var(--iv-line); margin-top: 40px; padding-top: 60px; }
.footer-brand { font-family: var(--font-display); }
.footer-heading { color: var(--iv-ink-3); letter-spacing: 0.14em; }
.footer-links a { color: var(--iv-ink-2); transition: color var(--iv-d1); }
.footer-links a:hover { color: var(--iv-gold-2); }

/* ---------- Modal --------------------------------------------------------- */
.modal { background: var(--iv-elev-card); border: 1px solid var(--iv-line-strong); border-radius: var(--iv-radius-lg); box-shadow: var(--iv-shadow-2); }
.disclosure-heading { font-family: var(--font-display); color: var(--iv-ink); }

/* ---------- Sticky mobile CTA + back to top ------------------------------- */
.sticky-cta {
  background: linear-gradient(180deg, var(--iv-gold-2), var(--iv-gold) 55%, var(--iv-gold-deep));
  color: var(--iv-gold-ink); box-shadow: 0 14px 34px -12px rgba(201,168,76,0.6); border-radius: 14px;
}
.back-to-top {
  background: rgba(20,20,24,0.8); border: 1px solid var(--iv-line); color: var(--iv-gold-2);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
/* lift the sticky/back-to-top above the mini-player when it's active */
body.iv-mini-active .sticky-cta,
body.iv-mini-active .back-to-top { bottom: 84px; }

/* ===========================================================================
   MOTION — scroll reveal + stagger (premium)
   =========================================================================== */
.reveal, .reveal-stagger > * {
  opacity: 0; transform: translateY(26px); filter: blur(2px);
  transition: opacity var(--iv-d3) var(--iv-ease), transform var(--iv-d3) var(--iv-ease), filter var(--iv-d3) var(--iv-ease);
}
.reveal.visible, .reveal-stagger.visible > * { opacity: 1; transform: none; filter: none; }
.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0.04s; }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.12s; }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.20s; }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.28s; }
.reveal-stagger.visible > *:nth-child(5) { transition-delay: 0.36s; }

/* Author/browse card entrance via JS-added .iv-in */
.iv-in { animation: iv-rise var(--iv-d3) var(--iv-ease) both; }
@keyframes iv-rise { from { opacity: 0; transform: translateY(22px) scale(0.985); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; filter: none; }
}

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width: 980px) {
  .iv-v2-pricing-tiers { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .iv-v2-tier--featured { order: -1; }
}
@media (max-width: 768px) {
  .hero { padding: 116px 0 60px; min-height: auto; }
  .steps-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .heading-hero { font-size: clamp(2rem, 8.6vw, 2.9rem); line-height: 1.08; }
  .heading-section { font-size: clamp(1.7rem, 6.6vw, 2.4rem); }
  .section-label { font-size: 0.64rem; letter-spacing: 0.16em; }
  .hero-subtitle { font-size: 1.02rem; }
  .hero-voice img { width: 60px; height: 60px; }
  .iv-v2-author-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
  .iv-v2-author-card { padding: 14px 12px 14px; }
  .iv-v2-author-card__portrait, .iv-v2-author-card__portrait-placeholder { border-radius: 10px; }
  .iv-v2-author-card__name { font-size: 1.08rem; }
  .iv-v2-browse__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .iv-player { padding: 16px; }
  .iv-player__play { width: 50px; height: 50px; }
  .iv-player__wave { height: 40px; }
  .iv-player__row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .iv-player__hint { font-size: 0.72rem; }
  .section { padding: 72px 0; }
}
@media (max-width: 380px) {
  .container { padding: 0 14px; }
  .iv-v2-browse__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* ===========================================================================
   CINEMATIC LIBRARY BACKGROUND — real LOC reading-room photograph (public
   domain, Carol Highsmith) + WebGL 2.5D depth-dolly + dust/god-ray canvas.
   Markup: #iv-bg > #iv-photo (CSS fallback) + #iv-gl + #iv-tint + #iv-grade + #iv-dust
   =========================================================================== */
body::before { background: none !important; }   /* scene replaces the flat aura */

/* section wrappers go transparent so the hall shows through; cards keep their
   own solid surfaces for legibility */
.hero, .pricing-transparency, .steps-section, .social-proof, .waitlist-section { background: transparent !important; }
.section { position: relative; z-index: 2; }
.nav, .footer, .iv-miniplayer, .sticky-cta, .back-to-top { position: relative; z-index: 3; }
.iv-miniplayer, .sticky-cta, .back-to-top { position: fixed; }

/* Stage covers the LARGE viewport (100lvh) so the iOS/Android URL-bar collapse
   never resizes it mid-scroll (kills the background "jump"). */
#iv-bg { position: fixed; inset: 0 0 auto 0; height: 100vh; height: 100lvh; z-index: -3; pointer-events: none; overflow: hidden; background: #07060a; }
#iv-gl { position: absolute; inset: 0 0 auto 0; width: 100%; height: 100%; display: none; }
#iv-photo {
  position: absolute; inset: -8%;
  background-image: url("/assets/images/bg/library-hall-2560.webp");
  background-size: cover; background-position: 50% 42%;
  filter: brightness(0.52) contrast(1.08) saturate(0.9) sepia(0.14) hue-rotate(-6deg);
  transform: scale(1.05);
}
#iv-tint {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; mix-blend-mode: multiply;
  background: radial-gradient(120% 100% at 50% 35%, rgba(120,84,38,0.5), rgba(40,26,14,0.66) 60%, rgba(10,7,12,0.9) 100%);
}
#iv-grade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7,6,10,0.6) 0%, rgba(7,6,10,0.12) 16%, transparent 30%),
    radial-gradient(58% 46% at 50% 33%, rgba(7,6,10,0.52), transparent 72%),
    radial-gradient(150% 130% at 50% 46%, transparent 52%, rgba(5,4,8,0.6) 92%, rgba(3,2,5,0.85) 100%);
}
#iv-dust { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

.heading-hero, .hero-subtitle, .heading-section,
.iv-v2-tier__name, .iv-v2-author-card__name {
  text-shadow: 0 2px 26px rgba(0,0,0,0.78), 0 1px 4px rgba(0,0,0,0.85);
}
.section::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 80% at 50% 50%, rgba(7,6,10,0.42), rgba(7,6,10,0.1) 72%, transparent 100%);
}
@media (max-width: 760px) {
  #iv-photo { background-image: url("/assets/images/bg/library-hall-1408.webp"); }
}
@media (prefers-reduced-motion: reduce) {
  #iv-gl { display: none !important; }
}

/* ===========================================================================
   AUTHOR CARDS — mirror-aligned rows. Cards in the same row align portrait,
   name, era, sample chip and CTAs at identical heights regardless of text
   length. Subgrid where supported; min-height fallback elsewhere.
   =========================================================================== */
.iv-v2-author-card__name { min-height: 2.5em; display: flex; align-items: center; justify-content: center; }
.iv-v2-author-card__era { min-height: 1.9em; display: inline-flex; align-items: center; }
.iv-v2-author-card__cta-primary { margin-top: auto; }
.iv-v2-author-card .iv-author-sample { margin-top: 14px; margin-bottom: 2px; }
.iv-v2-author-card__cta-bundle { min-height: 2.6em; display: inline-flex; align-items: center; justify-content: center; }

@supports (grid-template-rows: subgrid) {
  /* rows: portrait / name / lifespan / era / sample / primary CTA / bundle-or-soon */
  .iv-v2-author-grid > .iv-v2-author-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 7;
    justify-items: center;
    align-items: start;
  }
  .iv-v2-author-grid {
    grid-auto-rows: auto;
  }
  .iv-v2-author-card__name { min-height: 0; align-items: center; }
  .iv-v2-author-card__era { min-height: 0; }
  .iv-v2-author-card__cta-primary { margin-top: 6px; align-self: end; width: 100%; }
  .iv-v2-author-card__cta-bundle, .iv-v2-author-card__soon-cta { align-self: end; width: 100%; }
  .iv-v2-author-card .iv-author-sample { align-self: center; }
}