/* The trump-card story: six chapters on one pinned stage. Chapter = data-ch on .story (0–5). */
/* body must clip, not hide: overflow-x:hidden on body (with html clipped) makes body a scroll box and breaks the sticky pin */
body{overflow-x:clip}
.hero.story{display:block;padding:0;min-height:0;overflow:visible;overflow-x:clip;height:600vh;isolation:isolate}
.lite .hero.story,.story.is-static{height:auto}
.story__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:1fr auto;padding:96px var(--m) 0;gap:0 24px}
.lite .story__pin,.story.is-static .story__pin{position:relative;height:auto;min-height:100svh}
.story__wm{position:absolute;right:-2vw;top:8vh;z-index:-1;font:700 clamp(160px,26vw,420px)/1 var(--sans);color:#e8c97b0a;letter-spacing:-.04em;pointer-events:none;user-select:none}

/* copy: the six chapter texts sit on top of each other; only the current one shows */
.story__copy{position:relative;z-index:3;align-self:center;display:grid}
.story__ch{grid-area:2/1;opacity:0;transform:translateY(26px);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.story[data-ch="0"] .story__ch[data-ch="0"],.story[data-ch="1"] .story__ch[data-ch="1"],.story[data-ch="2"] .story__ch[data-ch="2"],
.story[data-ch="3"] .story__ch[data-ch="3"],.story[data-ch="4"] .story__ch[data-ch="4"],.story[data-ch="5"] .story__ch[data-ch="5"]{opacity:1;transform:none;pointer-events:auto}
.story__eye{letter-spacing:.2em;font-size:13px}
.story__title{font-size:clamp(40px,5.4vw,92px);line-height:1.06;margin:0}
.story__title em{display:inline-block}
.story__sub{font-size:var(--s2);color:var(--muted);max-width:32ch;margin:20px 0 0;line-height:1.5;min-height:3em}
.story__actions{margin-top:28px}

/* stage */
.story .stage{grid-column:2;grid-row:1;position:relative;height:auto;margin:0;perspective:1400px;transform:none!important;opacity:1!important}
.tpos{position:absolute;left:50%;top:48%;width:min(36vw,460px);aspect-ratio:1.586;z-index:3;transform:translate(-50%,-50%) rotate(-6deg);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.tpos .tcard{width:100%}
.full .tpos .tcard{animation:none}
.story[data-ch="1"] .tpos{transform:translate(-38%,-48%) rotate(-3deg)}
.story[data-ch="2"] .tpos{transform:translate(-50%,-50%) rotate(0) scale(1.06)}
.story[data-ch="3"] .tpos{transform:translate(-50%,-50%) rotate(0) scale(.74)}
.story[data-ch="4"] .tpos{transform:translate(-50%,-58%) rotate(0) scale(1.04)}
.story[data-ch="5"] .tpos{transform:translate(-50%,-84%) rotate(-5deg) scale(.72)}

/* card back = the payment record */
.tcard__ledger{background:linear-gradient(170deg,#fbf6e8,#efe2c2)!important;color:#0b2a1e;padding:6% 7%!important;display:flex!important;flex-direction:column;justify-content:space-between;align-items:stretch!important;transform:rotateY(180deg)}
.lg__head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1.5px dashed #0b2a1e40;padding-bottom:4%}
.lg__head b{font:700 clamp(13px,1.3vw,19px)/1 var(--sans)}.lg__head span{font:600 clamp(10px,.9vw,13px)/1 var(--sans);color:#8a6420}
.lg__rows{list-style:none;margin:0;padding:0;display:grid;gap:2%}
.lg__rows li{display:grid;grid-template-columns:1fr auto 1.4em;align-items:center;gap:8px;font:600 clamp(11px,1.05vw,15px)/1.25 var(--sans)}
.lg__rows b{font-family:ui-monospace,"JetBrains Mono",monospace;font-weight:700;color:#0f4a37}
.lg__rows i{font-style:normal;color:#0f4a37;font-weight:700;text-align:right}
.lg__gap{display:block!important;text-align:center;color:#8a6420;line-height:.6!important}
.lg__total{display:flex;justify-content:space-between;align-items:baseline;border-top:2px solid #0b2a1e;padding-top:3%;font:700 clamp(12px,1.1vw,16px)/1 var(--sans)}
.lg__total b{font:700 clamp(22px,2.4vw,36px)/1 ui-monospace,"JetBrains Mono",monospace;color:#0f4a37}

/* balance chip */
.bal{position:absolute;left:50%;top:48%;z-index:5;min-width:150px;padding:12px 18px;border-radius:14px;background:#fbf6e8;color:#0b2a1e;box-shadow:0 18px 40px -18px #000c;
  transform:translate(calc(min(36vw,460px) * .22),calc(min(36vw,460px) * -.52)) rotate(3deg);transition:opacity .4s,transform .8s cubic-bezier(.2,.8,.2,1)}
.bal span{display:block;font:600 12px/1.2 var(--sans);color:#8a6420}
.bal b{font:700 clamp(24px,2.4vw,34px)/1.1 ui-monospace,"JetBrains Mono",monospace;color:#0f4a37}
.story[data-ch="2"] .bal,.story[data-ch="4"] .bal,.story[data-ch="5"] .bal{opacity:0;transform:translate(calc(min(36vw,460px) * .22),calc(min(36vw,460px) * -.7)) rotate(8deg)}
.story[data-ch="3"] .bal{transform:translate(-50%,-50%) rotate(-2deg);z-index:6}

/* banknotes fly into the card (chapter 02, driven by scroll in story.js) */
.note{position:absolute;left:50%;top:48%;width:min(17vw,200px);z-index:4;opacity:0;border-radius:4px;box-shadow:0 14px 30px -14px #000;pointer-events:none}

/* the 52-week ring (chapter 04) */
.ring{position:absolute;left:50%;top:48%;width:0;height:0;z-index:1}
.ring i{position:absolute;left:0;top:0;width:clamp(7px,.75vw,11px);height:clamp(30px,3.2vw,46px);margin:-1.6vw 0 0 -.37vw;border-radius:3px;
  background:linear-gradient(180deg,#f6e2b3,#b98f42);box-shadow:0 4px 10px -4px #000;opacity:0;
  --a:calc(var(--k) * 6.923deg);
  transform:rotate(var(--a)) translateY(calc(min(36vw,460px) * -.66)) scale(.2);transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .4s;transition-delay:calc(var(--k) * 12ms)}
.story[data-ch="3"] .ring i{opacity:1;transform:rotate(var(--a)) translateY(calc(min(36vw,460px) * -.66)) scale(1)}
.story[data-ch="4"] .ring i{opacity:0;transform:rotate(calc(var(--a) + 90deg)) translateY(0) scale(.1);transition-delay:calc(var(--k) * 4ms)}
.ring i.on{background:linear-gradient(180deg,#fff2c4,#e8c97b);box-shadow:0 0 12px #e8c97b88}

/* the play (chapter 05): rays + payout */
.burst{position:absolute;left:50%;top:44%;width:min(70vw,900px);aspect-ratio:1;transform:translate(-50%,-50%) scale(.6);opacity:0;z-index:0;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,#e8c97b2e 0 3deg,#0000 3deg 12deg);-webkit-mask:radial-gradient(circle,#000 10%,#0000 62%);mask:radial-gradient(circle,#000 10%,#0000 62%);transition:opacity .6s,transform 1.2s cubic-bezier(.2,.8,.2,1)}
.story[data-ch="4"] .burst{opacity:1;transform:translate(-50%,-50%) scale(1)}
.full .story[data-ch="4"] .burst{animation:spin 30s linear infinite}
@keyframes spin{to{transform:translate(-50%,-50%) scale(1) rotate(360deg)}}
.payout{position:absolute;left:50%;top:48%;z-index:6;padding:16px 22px 14px;border-radius:16px;background:linear-gradient(160deg,#fff2c4,#e8c97b);color:#0b2a1e;box-shadow:0 26px 60px -20px #000,0 0 0 1px #fff6 inset;
  transform:translate(-50%,calc(min(36vw,460px) * .38)) scale(.6);opacity:0;transition:opacity .4s,transform .8s cubic-bezier(.3,1.5,.5,1);text-align:center;white-space:nowrap}
.payout span{display:block;font:700 13px/1 var(--sans);color:#6a4b16}
.payout b{display:block;font:700 clamp(38px,4.4vw,64px)/1.05 ui-monospace,"JetBrains Mono",monospace}
.payout small{font:600 12px/1 var(--sans);color:#6a4b16}
.story[data-ch="4"] .payout{opacity:1;transform:translate(-50%,calc(min(36vw,460px) * .34)) scale(1)}

/* your move (chapter 06): the hand of five plans rises from the bottom */
.story .stack{position:absolute;left:var(--m);right:var(--m);bottom:84px;height:24vh;z-index:6;transform:translateY(130%);opacity:0;transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .4s;pointer-events:none}
.story[data-ch="5"] .stack{transform:none;opacity:1;pointer-events:auto}

/* chapter tabs */
.story__tabs{grid-column:1/-1;grid-row:2;position:relative;z-index:7;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin:0 calc(var(--m) * -1);border-top:1px solid #e8c97b33;background:#06170fe6;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.story__tab{position:relative;display:flex;align-items:center;gap:10px;min-height:62px;padding:0 18px;border:0;border-right:1px solid #e8c97b1f;background:transparent;color:var(--muted);font:600 15px/1.2 var(--sans);text-align:left;cursor:pointer}
.story__tab span{font:700 12px/1 ui-monospace,"JetBrains Mono",monospace;color:#e8c97b99}
.story__tab i{position:absolute;left:0;top:-1px;height:2px;width:calc(var(--p,0) * 100%);background:var(--gold)}
.story__tab.is-on{color:var(--ink);background:#e8c97b14}
.story__tab.is-done i{width:100%}
.story__tab:focus-visible{outline:2px solid var(--gold);outline-offset:-4px}
.story__note{position:absolute;right:var(--m);bottom:74px;z-index:5;margin:0;max-width:46ch;text-align:right;font-size:12px;color:#8fa596;transition:opacity .3s}
.story[data-ch="5"] .story__actions{opacity:0;pointer-events:none}
.story__actions{transition:opacity .3s}
.story__note{opacity:0}.story[data-ch="4"] .story__note{opacity:1}

/* phones */
@media (max-width:900px){   /* phones and portrait tablets get the stacked story */
  .story__pin{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;padding:84px var(--m) 0}
  .story__copy{align-self:start}
  .story__title{font-size:clamp(34px,9.6vw,56px)}
  .story__sub{font-size:16px;margin-top:12px;min-height:0}
  .story__actions{margin-top:16px}.story__actions .btn{min-height:46px;font-size:15px}
  .story__actions .btn--ghost{display:none}
  .story .stage{grid-column:1;grid-row:2;min-height:0}
  .story__tabs{grid-row:3}
  .tpos{width:min(74vw,360px)}
  .bal{transform:translate(calc(min(74vw,360px) * .02),calc(min(74vw,360px) * -.56)) rotate(3deg);min-width:120px;padding:8px 12px}
  .story[data-ch="3"] .bal{transform:translate(-50%,-50%) rotate(-2deg);z-index:6}
  .story[data-ch="2"] .bal,.story[data-ch="4"] .bal,.story[data-ch="5"] .bal{transform:translate(0,calc(min(74vw,360px) * -.8))}
  .note{width:min(34vw,160px)}
  .ring i{width:5px;height:18px;margin:-9px 0 0 -2.5px;transform:rotate(var(--a)) translateY(calc(min(74vw,360px) * -.52)) scale(.2)}
  .story[data-ch="3"] .ring i{transform:rotate(var(--a)) translateY(calc(min(74vw,360px) * -.52)) scale(1)}
  .payout{transform:translate(-50%,calc(min(74vw,360px) * -.02)) scale(.6);padding:10px 18px 9px}
  .story[data-ch="4"] .payout{transform:translate(-50%,calc(min(74vw,360px) * -.02)) scale(1)}
  .payout b{font-size:40px}
  .story[data-ch="5"] .tpos{transform:translate(-50%,-90%) rotate(-5deg) scale(.66)}
  .story .stack{bottom:70px;height:22vh;left:12px;right:12px}
  .story__tabs{grid-template-columns:repeat(6,minmax(54px,1fr));overflow-x:auto;scrollbar-width:none}
  .story__tabs::-webkit-scrollbar{display:none}
  .story__tab{flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;min-height:56px;padding:0 8px;font-size:11.5px;line-height:1.15}
  .story__note{bottom:64px;font-size:10.5px;left:var(--m);right:var(--m);text-align:left;max-width:none;opacity:0}
  .story[data-ch="4"] .story__note{opacity:1}
  .story[data-ch="5"] .story__actions{opacity:1;pointer-events:auto}
  .story[data-ch="3"] .tpos{transform:translate(-50%,-50%) rotate(0) scale(.6)}
  .story[data-ch="4"] .tpos{transform:translate(-50%,-78%) rotate(0) scale(.86)}
  .story__wm{top:auto;bottom:16vh;font-size:44vw}
}
/* lite: no pin, no transitions; tabs switch chapters instantly */
.lite .story__ch,.lite .tpos,.lite .bal,.lite .ring i,.lite .payout,.lite .burst,.lite .story .stack{transition:none!important}

.story__dl{grid-row:1;justify-self:start}
.story__actions{grid-row:3}
@media(max-width:760px){.story__dl{margin-bottom:8px;font-size:12px}}