/* ============================================================
   Stacking Capital — Partner Program
   Two-step band + chaptered VSL player (Wistia / Vidalytics style)
   Loaded by /index.html and every persona variant.
   ============================================================ */

/* ============================================================
   HERO WITH THE VSL IN IT
   The player lives in the hero's right column, so the left column
   has to give up room: smaller lede, one CTA, stats as a thin strip
   instead of the boxed white side card.
   ============================================================ */
@media (min-width:920px){
  .hero-sec .hero-card{ grid-template-columns:minmax(0,0.88fr) minmax(0,1.12fr); align-items:center;
    gap:clamp(1.5rem,2.8vw,2.3rem); }
}
/* the hero has to hold a 16:9 player now, so it gives back its outer padding */
.hero-sec .forest-card{ padding:clamp(1.4rem,3vw,2.35rem); }
.hero-sec.section{ padding-top:clamp(0.9rem,2.5vw,1.6rem); padding-bottom:clamp(1.4rem,3.2vw,2.3rem); }
/* the eyebrow is a real pill and never wraps: the text is short enough and the
   type scales with the viewport so it holds one line down to 320px */
.hero-sec .hero-card .tag.hero-tag{ display:inline-flex; align-self:flex-start; align-items:center;
  gap:0.45rem; white-space:nowrap; width:auto; margin-bottom:1rem; padding:0.36rem 0.9rem 0.36rem 0.75rem;
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.18); border-radius:999px;
  font-size:clamp(0.56rem,2.45vw,0.7rem); letter-spacing:0.1em; color:#fff; }
.hero-sec .hero-card .tag.hero-tag::before{ width:0.44em; height:0.44em; border:0; border-radius:50%;
  background:var(--accent-bright); }

/* headline: as large as three line heights will carry, tracked tight so the
   lines run close to the full column width instead of ending ragged */
.hero-sec .h-hero{ font-size:clamp(1.5rem,2.45vw,2.15rem); line-height:1.12; letter-spacing:-0.025em; }
.hero-sec .hero-card h1{ margin-bottom:0.85rem; }
.hero-sec .hero-card .lede{ font-size:clamp(0.9rem,1.65vw,1rem); line-height:1.5; max-width:32rem; margin-bottom:1.35rem; }
.hero-sec .hero-card .lede b{ color:#fff; font-weight:800; }
.hero-sec .hero-logo{ margin-bottom:1rem; }

/* thin proof strip under the CTA.
   Every label stays on ONE line at every width: nowrap plus a vw-scaled type
   size, never a max-width that forces a wrap. */
.hero-stats{ margin-top:1.3rem; display:flex; flex-wrap:nowrap; align-items:stretch; gap:0; }
.hero-stats .s{ position:relative; display:flex; flex-direction:column; gap:0.3rem; min-width:0;
  padding-right:clamp(0.6rem,1.7vw,1.4rem); margin-right:clamp(0.6rem,1.7vw,1.4rem); }
.hero-stats .s:last-child{ padding-right:0; margin-right:0; }
.hero-stats .s:not(:last-child)::after{ content:""; position:absolute; right:0; top:8%; bottom:8%;
  width:1px; background:rgba(255,255,255,0.16); }
.hero-stats .v{ font-family:'Poppins',sans-serif; font-weight:900; font-size:clamp(0.92rem,2.1vw,1.28rem);
  line-height:1; letter-spacing:-0.03em; color:var(--accent-bright); white-space:nowrap; }
.hero-stats .l{ font-family:'Inter',sans-serif; font-size:clamp(0.5rem,1.15vw,0.59rem); font-weight:700;
  letter-spacing:0.07em; line-height:1; text-transform:uppercase; color:rgba(255,255,255,0.6);
  white-space:nowrap; }

/* the player card sitting in the hero */
.hero-vsl{ position:relative; min-width:0; display:flex; flex-direction:column; align-items:center; }
/* the label above the video is a real pill: one bar, one line, never wrapping */
.hero-vsl-hd{ width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:0.6rem; flex-wrap:nowrap; margin-bottom:0.6rem;
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.16); border-radius:999px;
  padding:0.34rem 0.9rem 0.34rem 0.4rem; }
.hero-vsl-step{ display:inline-flex; align-items:center; gap:0.45rem; min-width:0;
  font-family:'Inter',sans-serif; font-weight:800; font-size:clamp(0.56rem,1.25vw,0.68rem);
  letter-spacing:0.13em; text-transform:uppercase; color:#fff; white-space:nowrap; }
.hero-vsl-step b{ flex:none; background:var(--accent); color:#fff; border-radius:999px;
  padding:0.2rem 0.5rem; font-size:0.94em; letter-spacing:0.04em; }
.hero-vsl-len{ flex:none; font-family:'Inter',sans-serif; font-weight:700;
  font-size:clamp(0.56rem,1.2vw,0.66rem); letter-spacing:0.08em; text-transform:uppercase;
  color:rgba(255,255,255,0.58); white-space:nowrap; }
/* On desktop the grid column already sizes the video, so it fills its block.
   On phones it takes the 90% Fox asked for (it was rendering at ~62% because
   the hero card inherited align-items:center from the desktop grid rule). */
.hero-vsl .vp{ width:100%; box-shadow:0 22px 60px rgba(0,0,0,0.45); }

/* Phones: the video has to come BEFORE the CTA, not after a screen of copy.
   The hero's left column is one wrapper div, so display:contents dissolves it
   and lets the player order itself between the lede and the button. */
@media (max-width:919px){
  /* align-items:center is inherited from the desktop grid rule; on a column flex
     container it shrink-wraps every child, which is what squeezed the video to
     ~62% of the card. */
  .hero-sec .hero-card{ display:flex; flex-direction:column; align-items:stretch; gap:0; }
  .hero-sec .hero-card > div:first-child{ display:contents; }
  .hero-sec .hero-vsl .vp, .hero-sec .hero-vsl-hd{ width:90%; }
  /* Fox: headline in three line heights, as big and as full-width as that allows.
     The card gives back padding here purely to buy the headline column width. */
  .hero-sec .forest-card{ padding:clamp(1rem,3.6vw,1.6rem); }
  .hero-sec .hero-card .tag.hero-tag{ align-self:center; }
  .hero-sec .h-hero{ font-size:clamp(0.95rem,4.25vw,2rem); line-height:1.16; letter-spacing:-0.028em; }
  .hero-sec .hero-card .lede{ font-size:clamp(0.72rem,3.33vw,1.05rem); line-height:1.45; max-width:none; }
  .hero-sec .hero-logo{ order:1; }
  .hero-sec .hero-card .tag{ order:2; }
  .hero-sec .hero-card h1{ order:3; }
  .hero-sec .hero-card .lede{ order:4; margin-bottom:1.25rem; }
  .hero-sec .hero-vsl{ order:5; }
  .hero-sec .hero-cta-row{ order:6; margin-top:1.35rem; }
  .hero-sec .hero-stats{ order:7; }
  .hero-stats{ justify-content:center; }
}
@media (max-width:560px){
  .hero-vsl-step{ font-size:0.56rem; letter-spacing:0.09em; }
  .hero-vsl-len{ font-size:0.56rem; letter-spacing:0.05em; }
  .hero-vsl-hd{ padding:0.3rem 0.7rem 0.3rem 0.32rem; }
  .hero-stats{ gap:0.5rem 0; }
  .hero-stats .s{ padding-right:0.65rem; margin-right:0.65rem; }
  .hero-stats .v{ font-size:0.98rem; }
  .hero-stats .l{ font-size:0.53rem; letter-spacing:0.06em; }
}
/* the pill runs out of room for "· 9 chapters" before it runs out of room for
   the duration, so that half drops first rather than the two labels colliding */
@media (max-width:430px){
  .hvl-x{ display:none; }
}

/* ---------- TWO STEP BAND ---------- */
/* minmax(0,1fr): the CTA button is white-space:nowrap, and an auto-min grid track
   would size to it and push the whole card past the viewport on narrow screens. */
.two-step{ margin-top:clamp(1.75rem,4.5vw,2.75rem); display:grid; grid-template-columns:minmax(0,1fr);
  gap:clamp(1rem,2.6vw,1.5rem); }
.ts-card{ position:relative; min-width:0; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-card); padding:clamp(1.15rem,3vw,1.9rem); }
.ts-card.ts-two{ background:var(--dark); border-color:rgba(255,255,255,0.10); color:#fff; }

.ts-head{ display:flex; align-items:flex-start; gap:clamp(0.85rem,2.2vw,1.25rem); }
.ts-num{ flex:none; width:2.6rem; height:2.6rem; border-radius:10px; display:grid; place-items:center;
  font-family:'Poppins',sans-serif; font-weight:900; font-size:1.05rem; letter-spacing:-0.02em;
  background:var(--accent); color:#fff; border:1px solid var(--ink); }
.ts-two .ts-num{ border-color:rgba(255,255,255,0.22); }
.ts-copy{ min-width:0; }
.ts-kicker{ display:block; font-family:'Inter',sans-serif; font-weight:800; font-size:0.68rem;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:0.35rem; }
.ts-two .ts-kicker{ color:rgba(255,255,255,0.62); }
.ts-title{ font-family:'Poppins',sans-serif; font-weight:800; letter-spacing:-0.022em; line-height:1.14;
  font-size:clamp(1.18rem,2.9vw,1.72rem); color:var(--ink); }
.ts-two .ts-title{ color:#fff; }
.ts-sub{ font-family:'Inter',sans-serif; font-size:clamp(0.95rem,1.9vw,1.05rem); line-height:1.6;
  color:var(--ink-soft); margin:0.5rem 0 0; }
.ts-two .ts-sub{ color:rgba(255,255,255,0.76); }
.ts-body{ margin-top:clamp(1rem,2.6vw,1.4rem); }

/* step 2 layout: Don + CTA */
.ts-don{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(0.9rem,2.4vw,1.4rem);
  margin-top:clamp(1rem,2.6vw,1.4rem); }
.ts-don img{ width:74px; height:74px; border-radius:12px; object-fit:cover; object-position:center top;
  border:1px solid rgba(255,255,255,0.18); flex:none; }
.ts-don .dn{ font-family:'Poppins',sans-serif; font-weight:800; font-size:1.02rem; color:#fff; letter-spacing:-0.01em; }
.ts-don .dr{ font-family:'Inter',sans-serif; font-weight:600; font-size:0.82rem; letter-spacing:0.03em;
  text-transform:uppercase; color:var(--accent-bright); margin-top:0.15rem; }
.ts-don .dq{ font-family:'Inter',sans-serif; font-size:0.95rem; line-height:1.58; color:rgba(255,255,255,0.76);
  margin:0.5rem 0 0; max-width:34rem; }
.ts-cta-row{ display:flex; flex-wrap:wrap; align-items:center; gap:0.85rem; margin-top:clamp(1.05rem,2.6vw,1.4rem); }
.ts-fine{ font-family:'Inter',sans-serif; font-size:0.84rem; line-height:1.55; color:rgba(255,255,255,0.6);
  margin:0.85rem 0 0; }
.ts-lock{ display:inline-flex; align-items:center; gap:0.45rem; font-family:'Inter',sans-serif; font-weight:700;
  font-size:0.74rem; letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,0.55); }
.ts-lock svg{ width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2.2; }

/* the connector arrow between the two steps */
.ts-link{ display:flex; align-items:center; justify-content:center; gap:0.6rem; margin:-0.25rem 0;
  font-family:'Inter',sans-serif; font-weight:700; font-size:0.72rem; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--ink-faint); }
.ts-link svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- PLAYER ---------- */
.vp{ position:relative; width:100%; background:#05090f; border-radius:var(--r-md); overflow:hidden;
  border:1px solid rgba(255,255,255,0.08); box-shadow:0 18px 50px rgba(15,23,42,0.22);
  aspect-ratio:16/9; user-select:none; -webkit-user-select:none; }
.vp video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; background:#05090f; }
.vp video::-webkit-media-controls{ display:none !important; }
.vp *{ box-sizing:border-box; }

/* poster / start screen */
.vp-poster{ position:absolute; inset:0; z-index:6; cursor:pointer; border:0; padding:0; margin:0; width:100%;
  background:#05090f center/cover no-repeat; display:grid; place-items:center; }
.vp-poster::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,9,15,0.42) 0%, rgba(5,9,15,0.14) 38%, rgba(5,9,15,0.70) 100%); }
.vp.playing .vp-poster, .vp.started .vp-poster{ opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s; }

/* Play button.
   The old one looked lopsided for a real reason: Material's play glyph
   (M8 5v14l11-7z) has its centroid at x=13.5 in a 24-wide box, and it was then
   nudged another 9% right by a margin. This triangle is drawn with its CENTROID
   at the exact centre of a square viewBox, so it needs no optical nudge at all. */
.vp-play{ position:relative; z-index:2; width:clamp(64px,8.6vw,88px); aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center; isolation:isolate;
  background:linear-gradient(150deg, #3ddb87 0%, var(--accent) 46%, var(--accent-deep) 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.22) inset,
    0 1px 0 rgba(255,255,255,0.45) inset,
    0 14px 34px rgba(0,0,0,0.42),
    0 10px 46px rgba(22,179,100,0.45);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), filter .22s ease; }
.vp-play svg{ width:100%; height:100%; fill:#fff; color:#fff;
  filter:drop-shadow(0 1px 2px rgba(4,32,18,0.35)); }
/* glass highlight across the top half of the disc */
.vp-play::after{ content:""; position:absolute; inset:0; border-radius:50%; z-index:-1;
  background:radial-gradient(120% 90% at 30% 12%, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 66%); }
/* soft ring that breathes outward */
.vp-play::before{ content:""; position:absolute; inset:-11px; border-radius:50%; z-index:-1;
  border:1.5px solid rgba(255,255,255,0.42);
  animation:vpPulse 2.8s cubic-bezier(.22,.61,.36,1) infinite; }
.vp-poster:hover .vp-play{ transform:scale(1.07); filter:brightness(1.06);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.3) inset,
    0 1px 0 rgba(255,255,255,0.55) inset,
    0 18px 40px rgba(0,0,0,0.46),
    0 14px 60px rgba(22,179,100,0.62); }
.vp-poster:active .vp-play{ transform:scale(0.97); }
@keyframes vpPulse{ 0%{ transform:scale(0.94); opacity:0.75; } 68%{ transform:scale(1.28); opacity:0; } 100%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){ .vp-play::before{ animation:none; opacity:0.35; } }

.vp-poster-meta{ position:absolute; z-index:2; left:clamp(0.9rem,2.4vw,1.4rem); right:clamp(0.9rem,2.4vw,1.4rem);
  bottom:clamp(0.9rem,2.4vw,1.4rem); display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; text-align:left; }
.vp-poster-ttl{ font-family:'Poppins',sans-serif; font-weight:800; letter-spacing:-0.02em; line-height:1.18;
  font-size:clamp(0.98rem,2.3vw,1.35rem); color:#fff; text-shadow:0 2px 14px rgba(0,0,0,0.6); max-width:44rem; }
.vp-poster-sub{ display:block; font-family:'Inter',sans-serif; font-weight:600; font-size:clamp(0.72rem,1.5vw,0.82rem);
  letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.72); margin-bottom:0.4rem; }
.vp-dur{ flex:none; font-family:'Inter',sans-serif; font-weight:800; font-size:0.78rem; letter-spacing:0.04em;
  color:#fff; background:rgba(5,9,15,0.62); border:1px solid rgba(255,255,255,0.18); border-radius:999px;
  padding:0.34rem 0.7rem; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }

/* centre state icon (tap feedback / paused) */
.vp-center{ position:absolute; inset:0; z-index:4; display:grid; place-items:center; pointer-events:none; opacity:0; }
.vp-center i{ width:76px; height:76px; border-radius:50%; background:rgba(5,9,15,0.55); display:grid; place-items:center;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.vp-center svg{ width:30px; height:30px; fill:#fff; }
.vp-center.flash{ animation:vpFlash .58s var(--ease) forwards; }
@keyframes vpFlash{ 0%{ opacity:1; transform:scale(0.86);} 100%{ opacity:0; transform:scale(1.25);} }

/* chapter toast, top-left */
.vp-toast{ position:absolute; z-index:5; top:clamp(0.7rem,2vw,1.05rem); left:clamp(0.7rem,2vw,1.05rem);
  display:inline-flex; align-items:center; gap:0.55rem; max-width:min(78%,32rem);
  background:rgba(5,9,15,0.68); border:1px solid rgba(255,255,255,0.14); border-radius:999px;
  padding:0.4rem 0.85rem 0.4rem 0.5rem; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; transform:translateY(-6px); transition:opacity .25s var(--ease), transform .25s var(--ease); pointer-events:none; }
.vp-toast.show{ opacity:1; transform:none; }
.vp-toast b{ flex:none; font-family:'Inter',sans-serif; font-weight:800; font-size:0.66rem; letter-spacing:0.1em;
  color:#05090f; background:var(--accent-bright); border-radius:999px; padding:0.2rem 0.48rem; }
.vp-toast span{ font-family:'Inter',sans-serif; font-weight:600; font-size:0.82rem; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---------- CONTROL BAR ---------- */
.vp-ctl{ position:absolute; z-index:7; left:0; right:0; bottom:0; padding:2.6rem 0.7rem 0.55rem;
  background:linear-gradient(180deg, rgba(5,9,15,0) 0%, rgba(5,9,15,0.55) 45%, rgba(5,9,15,0.88) 100%);
  opacity:0; transform:translateY(8px); transition:opacity .22s var(--ease), transform .22s var(--ease); }
.vp.show-ctl .vp-ctl, .vp:focus-within .vp-ctl{ opacity:1; transform:none; }
.vp:not(.started) .vp-ctl{ opacity:0 !important; pointer-events:none; }

/* scrub track — segmented by chapter, Wistia style */
.vp-track{ position:relative; height:20px; display:flex; align-items:center; cursor:pointer; touch-action:none; }
.vp-segs{ position:relative; display:flex; align-items:center; gap:3px; width:100%; height:5px;
  transition:height .14s var(--ease); }
.vp-track:hover .vp-segs, .vp.scrubbing .vp-segs{ height:9px; }
.vp-seg{ position:relative; height:100%; border-radius:3px; overflow:hidden; background:rgba(255,255,255,0.26);
  transition:background .14s ease; }
.vp-seg .buf{ position:absolute; inset:0 auto 0 0; width:0; background:rgba(255,255,255,0.34); }
.vp-seg .fil{ position:absolute; inset:0 auto 0 0; width:0; background:var(--accent-bright); }
.vp-track:hover .vp-seg{ background:rgba(255,255,255,0.34); }
.vp-thumb{ position:absolute; top:50%; left:0; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%;
  background:#fff; box-shadow:0 2px 8px rgba(0,0,0,0.5); transform:scale(0); transition:transform .14s var(--ease); pointer-events:none; }
.vp-track:hover .vp-thumb, .vp.scrubbing .vp-thumb{ transform:scale(1); }

/* hover tooltip on the track */
.vp-tip{ position:absolute; bottom:26px; transform:translateX(-50%); z-index:3; pointer-events:none;
  background:rgba(5,9,15,0.94); border:1px solid rgba(255,255,255,0.16); border-radius:8px;
  padding:0.42rem 0.62rem; min-width:5.5rem; max-width:16rem; opacity:0; transition:opacity .12s ease; }
.vp-track:hover .vp-tip, .vp.scrubbing .vp-tip{ opacity:1; }
.vp-tip .tt{ display:block; font-family:'Inter',sans-serif; font-weight:700; font-size:0.76rem; color:#fff;
  line-height:1.3; white-space:normal; }
.vp-tip .tm{ display:block; font-family:'Inter',sans-serif; font-weight:700; font-size:0.72rem;
  color:var(--accent-bright); margin-top:0.15rem; font-variant-numeric:tabular-nums; }

/* buttons row */
.vp-row{ display:flex; align-items:center; gap:0.15rem; padding:0.1rem 0.15rem 0; }
.vp-btn{ appearance:none; border:0; background:none; padding:0.42rem; margin:0; cursor:pointer; border-radius:8px;
  display:inline-grid; place-items:center; color:#fff; line-height:0; transition:background .15s ease, opacity .15s ease; }
.vp-btn:hover{ background:rgba(255,255,255,0.14); }
.vp-btn:focus-visible{ outline:2px solid var(--accent-bright); outline-offset:1px; }
.vp-btn svg{ width:20px; height:20px; fill:currentColor; }
.vp-btn.ico-stroke svg{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.vp-time{ font-family:'Inter',sans-serif; font-weight:700; font-size:0.78rem; color:#fff; letter-spacing:0.02em;
  font-variant-numeric:tabular-nums; padding:0 0.5rem; white-space:nowrap; }
.vp-time i{ font-style:normal; color:rgba(255,255,255,0.55); }
.vp-spacer{ flex:1 1 auto; min-width:0.5rem; }
.vp-txtbtn{ appearance:none; border:1px solid rgba(255,255,255,0.2); background:rgba(255,255,255,0.06); color:#fff;
  font-family:'Inter',sans-serif; font-weight:800; font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase;
  border-radius:8px; padding:0.4rem 0.6rem; cursor:pointer; transition:background .15s ease; white-space:nowrap; }
.vp-txtbtn:hover{ background:rgba(255,255,255,0.18); }
#vslRate{ text-transform:none; font-weight:800; min-width:2.4rem; }
.vp-txtbtn[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); }
.vp-chapbtn{ display:inline-flex; align-items:center; gap:0.42rem; max-width:min(44%,20rem); }
.vp-chapbtn svg{ width:15px; height:15px; flex:none; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }
.vp-chapbtn .lbl{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-transform:none; letter-spacing:0.01em;
  font-weight:700; font-size:0.76rem; }

/* volume */
.vp-vol{ display:flex; align-items:center; gap:0.3rem; }
.vp-vol input{ appearance:none; -webkit-appearance:none; width:0; opacity:0; height:4px; border-radius:2px; margin:0;
  background:rgba(255,255,255,0.3); cursor:pointer; transition:width .18s var(--ease), opacity .18s ease; }
.vp-vol:hover input, .vp-vol input:focus-visible{ width:66px; opacity:1; }
.vp-vol input::-webkit-slider-thumb{ -webkit-appearance:none; width:12px; height:12px; border-radius:50%; background:#fff; }
.vp-vol input::-moz-range-thumb{ width:12px; height:12px; border:0; border-radius:50%; background:#fff; }

/* ---------- CHAPTER PANEL ---------- */
.vp-panel{ position:absolute; z-index:8; right:0.7rem; bottom:3.6rem; width:min(26rem,72%); max-height:min(62%,20rem);
  background:#080e16; border:1px solid rgba(255,255,255,0.16); border-radius:12px; overflow:hidden;
  display:flex; flex-direction:column; box-shadow:0 12px 40px rgba(0,0,0,0.55);
  opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s; }
.vp-panel.open{ opacity:1; visibility:visible; transform:none; }
.vp-panel-hd{ display:flex; align-items:center; justify-content:space-between; gap:0.75rem;
  padding:0.7rem 0.85rem; border-bottom:1px solid rgba(255,255,255,0.1); flex:none; }
.vp-panel-hd h4{ margin:0; font-family:'Inter',sans-serif; font-weight:800; font-size:0.7rem; letter-spacing:0.16em;
  text-transform:uppercase; color:rgba(255,255,255,0.66); }
.vp-panel-list{ overflow-y:auto; overscroll-behavior:contain; padding:0.35rem; }
.vp-chap{ display:flex; align-items:flex-start; gap:0.7rem; width:100%; text-align:left; appearance:none; border:0;
  background:none; color:#fff; padding:0.55rem 0.6rem; border-radius:8px; cursor:pointer; transition:background .13s ease; }
.vp-chap:hover{ background:rgba(255,255,255,0.09); }
.vp-chap .ct{ flex:none; font-family:'Inter',sans-serif; font-weight:800; font-size:0.72rem; letter-spacing:0.02em;
  color:var(--accent-bright); font-variant-numeric:tabular-nums; padding-top:0.08rem; min-width:2.7rem; }
.vp-chap .cn{ font-family:'Inter',sans-serif; font-weight:600; font-size:0.86rem; line-height:1.4;
  color:rgba(255,255,255,0.86); }
.vp-chap[aria-current="true"]{ background:rgba(22,179,100,0.18); }
.vp-chap[aria-current="true"] .cn{ color:#fff; font-weight:700; }

/* ---------- CHAPTER LIST UNDER THE PLAYER (always visible, skimmable) ---------- */
.vp-index{ margin-top:clamp(0.85rem,2.2vw,1.15rem); border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--soft); overflow:hidden; }
.vp-index-hd{ display:flex; align-items:center; justify-content:space-between; gap:0.75rem; width:100%;
  appearance:none; border:0; background:none; cursor:pointer; padding:0.75rem clamp(0.8rem,2vw,1.05rem);
  font-family:'Inter',sans-serif; font-weight:800; font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--ink-soft); }
.vp-index-hd .chev{ transition:transform .2s var(--ease); }
.vp-index-hd .chev svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; display:block; }
.vp-index.open .vp-index-hd .chev{ transform:rotate(180deg); }
.vp-index-body{ max-height:0; overflow:hidden; transition:max-height .3s var(--ease); }
.vp-index.open .vp-index-body{ max-height:none; }
.vp-index-grid{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--line);
  border-top:1px solid var(--line); }
.vp-jump{ display:flex; align-items:flex-start; gap:0.75rem; text-align:left; appearance:none; border:0;
  background:var(--paper); cursor:pointer; padding:0.7rem clamp(0.8rem,2vw,1.05rem); transition:background .13s ease; }
.vp-jump:hover{ background:var(--accent-soft); }
.vp-jump .jt{ flex:none; font-family:'Inter',sans-serif; font-weight:800; font-size:0.78rem;
  color:var(--accent-deep); font-variant-numeric:tabular-nums; min-width:3rem; padding-top:0.05rem; }
.vp-jump .jn{ font-family:'Inter',sans-serif; font-weight:600; font-size:0.92rem; line-height:1.45; color:var(--ink); }
.vp-jump[aria-current="true"]{ background:var(--accent-soft); }
.vp-jump[aria-current="true"] .jn{ font-weight:700; }

@media (min-width:820px){
  .vp-index-grid{ grid-template-columns:1fr 1fr; }
  /* an odd chapter count would leave a bare grid cell showing the rule colour */
  .vp-index-grid .vp-jump:nth-child(odd):last-child{ grid-column:1 / -1; }
}

/* very narrow phones: the forward skip is the first thing to go */
@media (max-width:420px){
  #vslFwd{ display:none; }
  .vp-time{ font-size:0.7rem; padding:0 0.22rem; }
}

/* ---------- FULLSCREEN ----------
   Three separate rule blocks on purpose: :fullscreen and :-webkit-full-screen
   cannot share a selector list (one browser not understanding the other's
   pseudo-class invalidates the whole rule), and .vp-fs is the pseudo-fullscreen
   fallback for iPhone Safari, which has no element fullscreen at all and would
   otherwise hand the viewer the native player with none of our chapters.
   The .vp-fs class is added alongside real fullscreen too, so every size-up
   below only has to be written once. */
.vp:fullscreen{ aspect-ratio:auto; width:100%; height:100%; border-radius:0; border:0; }
.vp:-webkit-full-screen{ aspect-ratio:auto; width:100%; height:100%; border-radius:0; border:0; }
.vp:fullscreen video{ object-fit:contain; }
.vp:-webkit-full-screen video{ object-fit:contain; }
.vp::backdrop{ background:#05090f; }

/* pseudo-fullscreen (iOS Safari, and any browser that refuses the request) */
.vp.vp-pseudo{ position:fixed; inset:0; z-index:2147483000; width:100vw; height:100vh; height:100dvh;
  aspect-ratio:auto; border-radius:0; border:0; background:#05090f; }
.vp.vp-pseudo video{ object-fit:contain; }

/* everything scales up once we own the whole screen */
.vp.vp-fs .vp-ctl{ padding:3.4rem clamp(0.9rem,2.5vw,1.6rem) clamp(0.7rem,1.6vw,1.1rem); }
.vp.vp-fs .vp-segs{ height:6px; }
.vp.vp-fs .vp-track{ height:26px; }
.vp.vp-fs .vp-track:hover .vp-segs{ height:11px; }
.vp.vp-fs .vp-thumb{ width:16px; height:16px; margin:-8px 0 0 -8px; }
.vp.vp-fs .vp-btn{ padding:0.55rem; }
.vp.vp-fs .vp-btn svg{ width:24px; height:24px; }
.vp.vp-fs .vp-time{ font-size:0.92rem; padding:0 0.7rem; }
.vp.vp-fs .vp-txtbtn{ font-size:0.78rem; padding:0.5rem 0.72rem; }
.vp.vp-fs .vp-chapbtn .lbl{ display:block; font-size:0.84rem; }
.vp.vp-fs .vp-chapbtn{ max-width:min(40%,26rem); }
.vp.vp-fs #vslRate{ min-width:2.9rem; }
.vp.vp-fs .vp-vol{ display:flex; }
.vp.vp-fs .vp-panel{ right:clamp(0.9rem,2.5vw,1.6rem); left:auto; bottom:5.2rem;
  width:min(32rem,52%); max-height:58%; }
.vp.vp-fs .vp-chap .cn{ font-size:0.95rem; }
.vp.vp-fs .vp-chap .ct{ font-size:0.8rem; min-width:3.1rem; }
.vp.vp-fs .vp-toast{ top:1.4rem; left:1.4rem; }
.vp.vp-fs video::cue{ font-size:1.2em; }
/* In portrait full screen the video ELEMENT is the whole tall viewport, so the
   browser derives a cue font from that height and the line overruns the screen.
   Scale it back down on narrow screens. */
@media (max-width:640px){
  .vp.vp-fs video::cue{ font-size:0.62em; }
}
/* the forward skip is hidden on narrow phones, but a fullscreen phone has room */
.vp.vp-fs #vslFwd{ display:inline-grid; }

/* ---------- FULL SCREEN ESCAPE HATCHES ----------
   The control bar's own full-screen toggle is the LAST item in the row, so on a
   narrow phone it was being pushed past the edge and clipped — there was no way
   out. These two are always reachable and never live in that row. */
.vp-close{ position:absolute; z-index:12; display:none; place-items:center;
  top:clamp(0.7rem,2.4vw,1.15rem); left:clamp(0.7rem,2.4vw,1.15rem);
  width:44px; height:44px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:linear-gradient(150deg, #3ddb87 0%, var(--accent) 48%, var(--accent-deep) 100%);
  color:#fff; box-shadow:0 0 0 1px rgba(255,255,255,0.24) inset, 0 8px 24px rgba(0,0,0,0.5),
    0 6px 26px rgba(22,179,100,0.45);
  transition:transform .16s var(--ease), filter .16s ease; }
.vp.vp-fs .vp-close{ display:grid; }
.vp-close svg{ width:21px; height:21px; display:block; }
.vp-close:hover{ filter:brightness(1.07); }
.vp-close:active{ transform:scale(0.93); }
.vp-close:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

/* grab handle: the universal "you can pull this down" affordance */
.vp-grabber{ position:absolute; z-index:11; display:none; top:9px; left:50%; transform:translateX(-50%);
  width:44px; height:4px; border-radius:999px; background:rgba(255,255,255,0.5);
  box-shadow:0 1px 3px rgba(0,0,0,0.4); pointer-events:none; }
.vp.vp-fs .vp-grabber{ display:block; }

/* the toast shares the top-left corner with the close button */
.vp.vp-fs .vp-toast{ top:1.5rem; left:calc(clamp(0.7rem,2.4vw,1.15rem) + 54px); }

/* swipe-to-dismiss: springs back unless the drag passes the threshold */
.vp.vp-pseudo{ transition:transform .24s var(--ease), opacity .24s var(--ease); }
.vp.vp-swiping{ transition:none; }

/* ---------- FULL SCREEN ON A PHONE ----------
   Undoes the size-up above so every control, INCLUDING the exit button, fits a
   375px row. Must come after the .vp.vp-fs block: #vslFwd is an id selector, so
   only an equally specific, later rule can put it back. */
@media (max-width:640px){
  .vp.vp-fs #vslFwd{ display:none; }
  .vp.vp-fs .vp-vol{ display:none; }
  .vp.vp-fs .vp-chapbtn .lbl{ display:none; }
  .vp.vp-fs .vp-chapbtn{ max-width:none; }
  .vp.vp-fs .vp-btn{ padding:0.4rem; }
  .vp.vp-fs .vp-btn svg{ width:20px; height:20px; }
  .vp.vp-fs .vp-time{ font-size:0.76rem; padding:0 0.35rem; }
  .vp.vp-fs .vp-txtbtn{ font-size:0.68rem; padding:0.4rem 0.5rem; }
  .vp.vp-fs #vslRate{ min-width:2.1rem; }
  .vp.vp-fs .vp-ctl{ padding:2.6rem 0.55rem 0.6rem; }
  .vp.vp-fs .vp-panel{ right:0.55rem; left:0.55rem; width:auto; bottom:4.4rem; max-height:52%; }
  .vp-close{ width:40px; height:40px; }
  .vp-close svg{ width:19px; height:19px; }
}

/* ---------- CAPTIONS ---------- */
.vp video::cue{ background:rgba(5,9,15,0.78); color:#fff; font-family:'Inter',sans-serif; font-size:0.9em; line-height:1.4; }

/* ---------- MOBILE ---------- */
@media (max-width:640px){
  .vp-panel{ right:0.5rem; left:0.5rem; width:auto; max-height:58%; }
  .vp-chapbtn{ max-width:38%; }
  .vp-chapbtn .lbl{ display:none; }
  .vp-time{ font-size:0.72rem; padding:0 0.3rem; }
  .vp-btn{ padding:0.36rem; }
  .vp-btn svg{ width:18px; height:18px; }
  .vp-vol{ display:none; }
  .vp-ctl{ padding:2.2rem 0.4rem 0.35rem; }
  .vp-txtbtn{ padding:0.32rem 0.44rem; font-size:0.68rem; }
  #vslRate{ min-width:2.1rem; }
  .vp-row{ gap:0.05rem; }
  .ts-don img{ width:60px; height:60px; }
  .ts-cta-row .btn{ width:100%; white-space:normal; text-align:center; line-height:1.3; }
}

/* ---------- PHONE-SIZED POSTER + PLAY BUTTON ----------
   Kept at the end of the file on purpose: these override .vp-poster-* and
   .vp-play, which are defined above at the same specificity, so source order
   is what decides. Moving this block earlier silently disables it. */
@media (max-width:560px){
  /* a ~150px-tall poster cannot hold a kicker, a full title and a play button */
  .vp-poster-sub{ display:none; }
  .vp-poster-ttl{ font-size:0.82rem; line-height:1.24; display:-webkit-box;
    -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .vp-poster-meta{ bottom:0.6rem; left:0.6rem; right:0.6rem; gap:0.6rem; }
  .vp-play{ width:56px; }
  .vp-dur{ font-size:0.68rem; padding:0.26rem 0.55rem; }
}