/* ==========================================================================
   Animated explainer: "Premiums vs. Your Out-of-Pocket Maximum"
   A five-scene cartoon drawn as inline SVG and driven by assets/premium-cartoon.js.
   Scoped under .pcPlayer so nothing here can leak into the rest of the site.
   ========================================================================== */

.pcWrap{ margin: 20px 0 0; }

/* --- Player shell ------------------------------------------------------- */

.pcFigure{ margin: 0; }

.pcPlayer{
  position: relative;
  border-radius: var(--radius2);
  overflow: hidden;
  background: #0B1626;
  border: 1px solid rgba(15,28,46,.14);
  box-shadow: var(--shadow);
}

.pcStage{
  position: relative;
  aspect-ratio: 16 / 9;
  background: #F7F4ED;
}
.pcStage__svg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* --- Subtitles ---------------------------------------------------------- */

.pcCaption{
  position: absolute;
  left: 0; right: 0; bottom: 3.2%;
  display: flex;
  justify-content: center;
  padding: 0 4%;
  pointer-events: none;
}
.pcCaption__text{
  background: rgba(11,22,38,.90);
  color: #F4F1EA;
  padding: 9px 16px;
  border-radius: 14px;
  font-weight: 700;
  font-size: clamp(12px, 1.55vw, 17px);
  line-height: 1.42;
  max-width: 62ch;
  text-align: center;
  box-shadow: 0 12px 30px rgba(11,22,38,.30);
  transition: opacity .18s ease;
}
.pcCaption__text:empty{ opacity: 0; }
.pcPlayer.is-ccOff .pcCaption{ display: none; }

/* --- Poster / replay overlays ------------------------------------------- */

.pcOverlay{
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  text-align: center;
  padding: 24px;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(122,201,183,.30), transparent 62%),
    radial-gradient(120% 120% at 80% 90%, rgba(229,183,90,.28), transparent 60%),
    rgba(11,22,38,.62);
  transition: opacity .28s ease, visibility .28s ease;
}
.pcOverlay[hidden]{
  /* Keep the fade instead of letting [hidden] snap it away. */
  display: grid;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.pcOverlay__eyebrow{
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: clamp(10px, 1.1vw, 12px);
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(229,183,90,.95);
}
.pcOverlay__title{
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: clamp(19px, 3vw, 34px);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.12;
  color: #F7F4ED;
  margin: 0;
  max-width: 26ch;
}
.pcOverlay__meta{
  font-size: clamp(11px, 1.2vw, 14px);
  font-weight: 700;
  color: rgba(247,244,237,.80);
}
.pcBigPlay{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, #E5B75A, #D9A63F);
  color: #0B1626;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(13px, 1.4vw, 16px);
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(11,22,38,.34);
  transition: transform .14s ease, box-shadow .14s ease;
}
.pcBigPlay:hover{ transform: translateY(-2px); box-shadow: 0 18px 40px rgba(11,22,38,.40); }
.pcBigPlay:active{ transform: translateY(0); }
.pcBigPlay svg{ width: 15px; height: 15px; fill: currentColor; }

/* --- Control bar -------------------------------------------------------- */

.pcControls{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  background: rgba(244,241,234,.97);
  border-top: 1px solid rgba(15,28,46,.10);
}
.pcBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 0 0 auto;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(15,28,46,.16);
  background: rgba(255,255,255,.90);
  color: var(--text);
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 800;
  font-size: 12.5px;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.pcBtn:hover{ transform: translateY(-1px); border-color: rgba(15,28,46,.30); }
.pcBtn svg{ width: 13px; height: 13px; fill: currentColor; }
.pcBtn--play{
  background: linear-gradient(135deg, #0F1C2E, #1B3049);
  border-color: #0F1C2E;
  color: #F4F1EA;
}
.pcBtn[aria-pressed="false"]{ opacity: .62; }
.pcBtn:focus-visible,
.pcBigPlay:focus-visible,
.pcChapter:focus-visible{
  outline: 2px solid rgba(229,183,90,.95);
  outline-offset: 2px;
}

.pcScrub{
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 5px;
}
.pcTrack{
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: rgba(15,28,46,.13);
}
.pcTrack__fill{
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), rgba(122,201,183,.98));
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}
.pcTrack__tick{
  position: absolute;
  top: -2px;
  width: 2px;
  height: 12px;
  border-radius: 2px;
  background: rgba(15,28,46,.26);
}
.pcTime{
  font-size: 11.5px;
  font-weight: 800;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

/* --- Chapters ----------------------------------------------------------- */

.pcChapters{
  display: flex;
  gap: 8px;
  padding: 0 14px 13px;
  background: rgba(244,241,234,.97);
  flex-wrap: wrap;
}
.pcChapter{
  flex: 1 1 150px;
  text-align: left;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid rgba(15,28,46,.12);
  background: rgba(255,255,255,.72);
  color: var(--muted);
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 800;
  font-size: 12px;
  line-height: 1.3;
  cursor: pointer;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.pcChapter:hover{ background: rgba(122,201,183,.20); color: var(--text); }
.pcChapter[aria-current="true"]{
  background: rgba(122,201,183,.30);
  border-color: rgba(15,28,46,.24);
  color: var(--text);
}
.pcChapter span{
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(15,28,46,.50);
  margin-bottom: 2px;
}

/* --- Transcript + notes ------------------------------------------------- */

.pcMeta{
  display: flex;
  gap: 14px;
  align-items: baseline;
  flex-wrap: wrap;
  margin: 12px 0 0;
}
.pcTranscript{
  margin: 12px 0 0;
  border-radius: var(--radius);
  border: 1px solid rgba(15,28,46,.12);
  background: rgba(255,255,255,.72);
  padding: 12px 16px;
}
.pcTranscript > summary{
  cursor: pointer;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: var(--text);
}
.pcTranscript ol{
  margin: 12px 0 0;
  padding-left: 20px;
  color: var(--muted);
}
.pcTranscript li{ margin: 7px 0; }
.pcTranscript li b{
  font-family: "Montserrat", system-ui, sans-serif;
  color: var(--text);
}

@media (max-width: 620px){
  .pcControls{ flex-wrap: wrap; }
  .pcScrub{ flex: 1 1 100%; order: 3; }
  .pcTime{ order: 2; }
  .pcChapter{ flex: 1 1 100%; }
  .pcBtn__label{ display: none; }
  .pcBtn{ padding: 0 11px; }
}

/* ==========================================================================
   The cartoon itself
   ========================================================================== */

.pcScene{ opacity: 0; visibility: hidden; }
.pcScene.is-on{
  opacity: 1;
  visibility: visible;
  animation: pcSceneIn .45s ease both;
}

/* Text inside the stage. SVG text does not inherit the page font stack. */
.pcStage__svg text{
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 800;
}
.pcT--display{ font-weight: 900; letter-spacing: -.025em; }
.pcT--serif{
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0;
}
.pcT--eyebrow{ font-size: 15px; font-weight: 800; letter-spacing: .22em; }
.pcT--label{ font-size: 17px; letter-spacing: .06em; }
.pcT--small{ font-size: 15px; font-weight: 700; }

/* Ink line weight shared by every prop and character. */
.pcInk{
  fill: none;
  stroke: #0F1C2E;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pcInk--thin{ stroke-width: 2.4; }

/* -- Scene 1: title card ------------------------------------------------- */

.pcScene.is-on .pcS1__eyebrow{ animation: pcRise .6s .05s ease-out both; }
.pcScene.is-on .pcS1__h1{ animation: pcRise .7s .18s cubic-bezier(.2,.85,.25,1) both; }
.pcScene.is-on .pcS1__h2{ animation: pcRise .7s .34s cubic-bezier(.2,.85,.25,1) both; }
.pcScene.is-on .pcS1__h3{ animation: pcRise .7s .50s cubic-bezier(.2,.85,.25,1) both; }
.pcScene.is-on .pcS1__rule{ animation: pcWipe .7s .48s cubic-bezier(.3,.9,.3,1) both; }
.pcScene.is-on .pcS1__hero{ animation: pcPopIn .6s .30s cubic-bezier(.2,1.3,.4,1) both, pcBob 3.6s .9s ease-in-out infinite; }
.pcScene.is-on .pcS1__wave{ animation: pcWave 1.15s .75s ease-in-out 3 both; }
.pcScene.is-on .pcS1__orb1{ animation: pcDrift 5.2s .2s ease-in-out infinite; }
.pcScene.is-on .pcS1__orb2{ animation: pcDrift 6.4s .9s ease-in-out infinite reverse; }
.pcScene.is-on .pcS1__orb3{ animation: pcDrift 4.6s 1.5s ease-in-out infinite; }

/* -- Scene 2: the monthly premium --------------------------------------- */

.pcScene.is-on .pcS2__member{ animation: pcSlideL .6s .05s cubic-bezier(.2,.9,.3,1) both, pcBob 4s .8s ease-in-out infinite; }
.pcScene.is-on .pcS2__cal{ animation: pcPopIn .55s .30s cubic-bezier(.2,1.25,.4,1) both; }
.pcScene.is-on .pcS2__card{ animation: pcSlideR .6s .45s cubic-bezier(.2,.9,.3,1) both; }
.pcScene.is-on .pcS2__coin1{ animation: pcCoinFly 2.3s 1.10s ease-in-out both; }
.pcScene.is-on .pcS2__coin2{ animation: pcCoinFly 2.3s 3.45s ease-in-out both; }
.pcScene.is-on .pcS2__coin3{ animation: pcCoinFly 2.3s 5.80s ease-in-out both; }
.pcScene.is-on .pcS2__month1{ animation: pcTick .5s 3.10s ease-out both; }
.pcScene.is-on .pcS2__month2{ animation: pcTick .5s 5.45s ease-out both; }
.pcScene.is-on .pcS2__month3{ animation: pcTick .5s 7.80s ease-out both; }
.pcScene.is-on .pcS2__off{ animation: pcFadeOut .35s 3.05s ease both; }
.pcScene.is-on .pcS2__on{ animation: pcStamp .55s 3.20s cubic-bezier(.2,1.35,.4,1) both; }
.pcScene.is-on .pcS2__glow{ animation: pcPulse 2.1s 3.6s ease-in-out infinite; }

/* -- Scene 3: two separate buckets -------------------------------------- */

.pcScene.is-on .pcS3__jarL{ animation: pcSlideL .55s .05s cubic-bezier(.2,.9,.3,1) both; }
.pcScene.is-on .pcS3__jarR{ animation: pcSlideR .55s .18s cubic-bezier(.2,.9,.3,1) both; }
.pcScene.is-on .pcS3__wall{ animation: pcGrow .5s .55s cubic-bezier(.2,1.2,.4,1) both; }
.pcScene.is-on .pcS3__hop{ animation: pcHopBack 3.4s 1.25s ease-in-out 2 both; }
.pcScene.is-on .pcS3__shake{ animation: pcShake .45s 2.85s ease-out 1 both; }
.pcScene.is-on .pcS3__spark{ animation: pcSpark .55s 2.85s ease-out both; }
.pcScene.is-on .pcS3__deny{ animation: pcStamp .6s 3.55s cubic-bezier(.2,1.4,.4,1) both; }

/* -- Scene 4: what does count ------------------------------------------- */

.pcScene.is-on .pcS4__jar{ animation: pcPopIn .55s .05s cubic-bezier(.2,1.25,.4,1) both; }
.pcScene.is-on .pcS4__liquid{ animation: pcFill 8.6s .50s cubic-bezier(.3,.9,.3,1) both; }
.pcScene.is-on .pcS4__tok1{ animation: pcDropIn 2.2s .95s cubic-bezier(.4,.05,.6,1) both; }
.pcScene.is-on .pcS4__tok2{ animation: pcDropIn 2.2s 3.35s cubic-bezier(.4,.05,.6,1) both; }
.pcScene.is-on .pcS4__tok3{ animation: pcDropIn 2.2s 5.75s cubic-bezier(.4,.05,.6,1) both; }
.pcScene.is-on .pcS4__chk1{ animation: pcTick .5s 2.35s ease-out both; }
.pcScene.is-on .pcS4__chk2{ animation: pcTick .5s 4.75s ease-out both; }
.pcScene.is-on .pcS4__chk3{ animation: pcTick .5s 7.15s ease-out both; }
.pcScene.is-on .pcS4__max{ animation: pcWipe .6s .35s ease-out both; }
.pcScene.is-on .pcS4__excl{ animation: pcRise .55s .90s ease-out both; }
.pcScene.is-on .pcS4__total{ animation: pcRise .6s 8.30s ease-out both; }
.pcScene.is-on .pcS4__ripple{ animation: pcRipple 2.4s 2.60s ease-out 3; }

/* -- Scene 5: recap ------------------------------------------------------ */

.pcScene.is-on .pcS5__panelA{ animation: pcSlideL .6s .10s cubic-bezier(.2,.9,.3,1) both; }
.pcScene.is-on .pcS5__panelB{ animation: pcSlideR .6s .26s cubic-bezier(.2,.9,.3,1) both; }
.pcScene.is-on .pcS5__vs{ animation: pcPopIn .5s .55s cubic-bezier(.2,1.4,.4,1) both; }
.pcScene.is-on .pcS5__host{ animation: pcPopIn .55s .70s cubic-bezier(.2,1.3,.4,1) both, pcBob 3.8s 1.3s ease-in-out infinite; }
.pcScene.is-on .pcS5__thumb{ animation: pcThumb .9s 1.05s ease-out 2 both; }
.pcScene.is-on .pcS5__strip{ animation: pcRise .6s 1.30s ease-out both; }

/* -- Keyframes ----------------------------------------------------------- */

@keyframes pcSceneIn{ from{ opacity: 0 } to{ opacity: 1 } }
@keyframes pcRise{
  from{ opacity: 0; transform: translateY(16px) }
  to{ opacity: 1; transform: translateY(0) }
}
@keyframes pcFadeOut{ from{ opacity: 1 } to{ opacity: 0 } }
@keyframes pcWipe{
  from{ opacity: 0; transform: scaleX(0) }
  to{ opacity: 1; transform: scaleX(1) }
}
@keyframes pcGrow{
  from{ opacity: 0; transform: scaleY(.2) }
  to{ opacity: 1; transform: scaleY(1) }
}
@keyframes pcPopIn{
  from{ opacity: 0; transform: scale(.86) }
  to{ opacity: 1; transform: scale(1) }
}
@keyframes pcSlideL{
  from{ opacity: 0; transform: translateX(-42px) }
  to{ opacity: 1; transform: translateX(0) }
}
@keyframes pcSlideR{
  from{ opacity: 0; transform: translateX(42px) }
  to{ opacity: 1; transform: translateX(0) }
}
@keyframes pcBob{
  0%, 100%{ transform: translateY(0) }
  50%{ transform: translateY(-9px) }
}
@keyframes pcWave{
  0%, 100%{ transform: rotate(0deg) }
  30%{ transform: rotate(-21deg) }
  65%{ transform: rotate(13deg) }
}
@keyframes pcDrift{
  0%, 100%{ transform: translate(0, 0) }
  50%{ transform: translate(11px, -22px) }
}
@keyframes pcTick{
  from{ opacity: 0; transform: scale(.5) }
  60%{ opacity: 1; transform: scale(1.16) }
  to{ opacity: 1; transform: scale(1) }
}
@keyframes pcStamp{
  0%{ opacity: 0; transform: scale(1.5) rotate(-9deg) }
  55%{ opacity: 1; transform: scale(.94) rotate(2deg) }
  to{ opacity: 1; transform: scale(1) rotate(0deg) }
}
@keyframes pcPulse{
  0%, 100%{ opacity: .28; transform: scale(1) }
  50%{ opacity: .68; transform: scale(1.05) }
}

/* Coin leaves the member's hand and lands on the plan card. */
@keyframes pcCoinFly{
  0%{ opacity: 0; transform: translate(0, 0) scale(.55) rotate(0deg) }
  14%{ opacity: 1; transform: translate(40px, -70px) scale(1) rotate(-13deg) }
  56%{ opacity: 1; transform: translate(240px, -160px) scale(1.02) rotate(9deg) }
  92%{ opacity: 1; transform: translate(406px, -36px) scale(.88) rotate(-4deg) }
  100%{ opacity: 0; transform: translate(413px, -30px) scale(.78) rotate(0deg) }
}

/* Coin tries to jump the divider, hits it, and falls back. */
@keyframes pcHopBack{
  0%{ opacity: 0; transform: translate(0, 0) rotate(0deg) }
  6%{ opacity: 1; transform: translate(12px, -18px) rotate(20deg) }
  34%{ transform: translate(96px, -104px) rotate(150deg) }
  47%{ transform: translate(136px, -72px) rotate(210deg) }
  56%{ transform: translate(100px, -108px) rotate(250deg) }
  78%{ transform: translate(28px, -32px) rotate(340deg) }
  92%, 100%{ opacity: 1; transform: translate(0, 0) rotate(366deg) }
}
@keyframes pcShake{
  0%, 100%{ transform: translateX(0) }
  20%{ transform: translateX(7px) }
  45%{ transform: translateX(-5px) }
  70%{ transform: translateX(3px) }
}
@keyframes pcSpark{
  0%{ opacity: 0; transform: scale(.35) }
  35%{ opacity: 1; transform: scale(1.15) }
  100%{ opacity: 0; transform: scale(1.5) }
}

/* Cost-sharing tokens drop into the out-of-pocket jar. */
@keyframes pcDropIn{
  0%{ opacity: 0; transform: translate(300px, -54px) rotate(16deg) }
  16%{ opacity: 1; transform: translate(232px, -46px) rotate(11deg) }
  58%{ opacity: 1; transform: translate(34px, -8px) rotate(-5deg) }
  80%{ opacity: 1; transform: translate(0, 54px) rotate(1deg) }
  90%{ opacity: .6; transform: translate(0, 44px) rotate(0deg) }
  100%{ opacity: 0; transform: translate(0, 58px) rotate(0deg) }
}
@keyframes pcFill{
  0%, 10%{ transform: translateY(0) }
  22%, 38%{ transform: translateY(-46px) }
  50%, 66%{ transform: translateY(-94px) }
  78%, 100%{ transform: translateY(-142px) }
}
@keyframes pcRipple{
  0%{ opacity: .85; transform: scale(.4) }
  100%{ opacity: 0; transform: scale(1.6) }
}
@keyframes pcThumb{
  0%, 100%{ transform: translateY(0) rotate(0deg) }
  40%{ transform: translateY(-10px) rotate(-8deg) }
}

/* -- Reduced motion ------------------------------------------------------
   Scenes and subtitles still advance so the explainer remains watchable,
   but nothing slides, bounces, or loops. */
@media (prefers-reduced-motion: reduce){
  .pcScene.is-on,
  .pcScene.is-on *{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .pcScene.is-on .pcS2__off,
  .pcScene.is-on .pcS3__hop,
  .pcScene.is-on .pcS3__spark,
  .pcScene.is-on .pcS4__tok1,
  .pcScene.is-on .pcS4__tok2,
  .pcScene.is-on .pcS4__tok3,
  .pcScene.is-on .pcS2__coin1,
  .pcScene.is-on .pcS2__coin2,
  .pcScene.is-on .pcS2__coin3{ opacity: 0 !important; }
  .pcScene.is-on .pcS4__liquid{ transform: translateY(-142px) !important; }
  .pcBtn:hover, .pcBigPlay:hover{ transform: none; }
}

/* ==========================================================================
   Transform plumbing + paused state
   ========================================================================== */

/* SVG elements default to transform-box: view-box, which would rotate and
   scale everything around the middle of the 960x540 canvas. Every animated
   part is anchored to its own box instead. */
.pcStage__svg [class*="pcS1__"],
.pcStage__svg [class*="pcS2__"],
.pcStage__svg [class*="pcS3__"],
.pcStage__svg [class*="pcS4__"],
.pcStage__svg [class*="pcS5__"]{
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.pcS1__rule,
.pcS4__max{ transform-origin: 0% 50%; }
.pcS1__wave{ transform-origin: 0% 100%; }
.pcS1__hero,
.pcS3__wall,
.pcS5__thumb{ transform-origin: 50% 100%; }

/* Filled cartoon shapes share one ink outline. */
.pcSh{
  stroke: #0F1C2E;
  stroke-width: 3.4;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.pcSh--thin{ stroke-width: 2.4; }

/* Outlined limbs: a wide ink stroke with a narrower skin stroke on top. */
.pcLimb{ fill: none; stroke: #0F1C2E; stroke-width: 17; stroke-linecap: round; }
.pcLimb--in{ fill: none; stroke: #E4B892; stroke-width: 11; stroke-linecap: round; }

/* Pausing the clock pauses the drawing. */
.pcPlayer.is-paused .pcScene.is-on,
.pcPlayer.is-paused .pcScene.is-on *{ animation-play-state: paused; }