/* Fi pane shell (v2): one deal moving through its case. The frame rises out of the hero: a case
   header with the live Sponsor IRR ticker, the stage (680 / 640, unchanged for the tabs), and the
   ledger of three chapters whose track line is the progress bar. Owned by the shell lane. Tabs
   style their own panels ([data-fp-panel=…]); nothing here reaches inside a panel except its box.
   Grid: .wrap (1440 max, 64 / 38 / 22 px gutters; the frame takes 16 px on phone), 4 px rhythm. */

.fp-section{
  --fps-ink:#0e0f12;
  --fps-text:#eeeae0;
  --fps-text-2:#aeb3c0;
  --fps-text-3:#8a90a0;
  --fps-hair:rgba(255,255,255,.085);
  --fps-gain:#7cc8a0;              /* the kit gain, lifted for ink (7.9:1 on the header) */
  --fps-loss:#f0a08c;              /* the kit loss, lifted for ink */
  --fps-ease:cubic-bezier(.16,1,.3,1);
  --fps-rise:120px;                /* how far the frame climbs into the hero */
  position:relative;z-index:2;margin-top:calc(var(--fps-rise) * -1);padding:0 0 112px;border-bottom:1px solid #ffffff18;scroll-margin-top:24px}
/* The hero's horizon dissolves into ink before the frame's sides reach the hero's bottom edge. */
.fp-section::before{content:'';position:absolute;z-index:-1;left:0;right:0;top:-72px;height:calc(var(--fps-rise) + 96px);pointer-events:none;
  background:linear-gradient(180deg,rgba(14,15,18,0),rgba(14,15,18,.78) 46%,var(--fps-ink) 76%)}
/* The hero ends where the deal begins: its height is its copy, a gap, and the stretch the frame climbs
   over, so the frame sits the same distance under the CTAs at every viewport height. */
.direction-one .cinema{min-height:0;padding-bottom:calc(88px + 120px)}
@media (max-width:1100px){.direction-one .cinema{padding-bottom:calc(72px + 80px)}}
@media (max-width:850px){.direction-one .cinema{padding-bottom:calc(64px + 56px)}}
@media (max-width:560px){.direction-one .cinema{padding-bottom:calc(40px + 36px)}}
/* Short laptop screens (720–820 px tall): the headline tightens so the deal still rises into the first
   view. The frame itself is fitted by pane.js (zoom, never below .85). */
@media (min-width:851px) and (max-height:820px){
  .direction-one .cinema-copy{padding-top:40px}
  .direction-one .cinema h1{font-size:clamp(64px,12.4vh,132px)}
  .direction-one .cinema-copy p{margin-top:20px}
  .direction-one .cinema-copy .actions{margin-top:26px}
  .direction-one .cinema{padding-bottom:calc(64px + 120px)}
}
@media (min-width:851px) and (max-width:1100px) and (max-height:820px){.direction-one .cinema{padding-bottom:calc(56px + 80px)}}
.fp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0}

/* ── The frame: night glass ──────────────────────────────────────── */
.fp-section .fp{position:relative;isolation:isolate;border-radius:var(--fp-r-stage,8px);
  background:
    radial-gradient(38% 46% at 3% 96%,rgba(30,71,209,.17),rgba(30,71,209,.05) 52%,transparent 74%),
    linear-gradient(180deg,#12151d 0%,#0e1016 40%,#0c0e13 100%) #0e1016;
  box-shadow:0 -24px 60px -30px rgba(2,6,14,.9),0 48px 100px -50px rgba(0,0,0,.92),0 18px 40px -28px rgba(0,0,0,.7)}
/* Grain sits on the glass, under every surface: never on paper, never on text. */
.fp-section .fp::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  background:url('/welcome/fi-pane/grain.png') 0 0/128px 128px repeat;opacity:.3;mix-blend-mode:overlay}
/* Rim and inner top highlight, above everything so the edge stays crisp. */
.fp-section .fp::after{content:'';position:absolute;inset:0;z-index:6;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.1)}

/* ── Case header: the deal, and its number ───────────────────────── */
.fp-case{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:16px;height:48px;padding:0 20px 0 22px;
  border-radius:var(--fp-r-stage,8px) var(--fp-r-stage,8px) 0 0;background:rgba(255,255,255,.022);box-shadow:inset 0 -1px 0 var(--fps-hair)}
.fp-case-id{display:flex;align-items:center;min-width:0;gap:0}
.fp-case-mark{display:inline-flex;align-items:baseline;gap:2px;flex:none;font:700 16px/1 Manrope,ui-sans-serif,system-ui,sans-serif;letter-spacing:-.7px;color:var(--fps-text)}
.fp-case-mark i{width:4px;height:4px;border-radius:50%;background:var(--fp-blue,#5f82ff);align-self:center;margin:0 1px}
.fp-case-mark em{font:italic 400 19px/1 'Instrument Serif',Instrument,Georgia,serif;letter-spacing:-.02em;color:var(--fp-blue,#5f82ff)}
.fp-case-name{display:flex;align-items:baseline;min-width:0;margin-left:14px;padding-left:14px;box-shadow:inset 1px 0 0 rgba(255,255,255,.12);
  font-size:13px;line-height:20px;white-space:nowrap;color:var(--fps-text-2)}
.fp-case-name b{font-weight:600;color:var(--fps-text)}
.fp-case-sep{margin:0 7px;color:var(--fps-text-3)}
.fp-case-case{overflow:hidden;text-overflow:ellipsis}

.fp-ticker{display:flex;align-items:center;flex:none;gap:10px}
.fp-ticker .fp-fi{margin-right:2px}
.fp-ticker-label{font-size:12px;font-weight:600;line-height:20px;color:var(--fps-text-3)}
/* The value changes by a vertical slide through this mask; the old value leaves, the new arrives. */
.fp-ticker-val{position:relative;display:inline-grid;height:22px;overflow:hidden;font-size:16px;line-height:22px;color:var(--fps-text);letter-spacing:-.02em}
.fp-ticker-val>span{grid-area:1/1;display:block}
.fp-ticker-delta{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:5px;font-size:11.5px;line-height:1;color:var(--fps-gain);
  box-shadow:inset 0 0 0 1px rgba(124,200,160,.32);background:rgba(79,174,133,.08)}
/* No empty slot while the case is unpriced: when the chip lands, the label and value glide aside (FLIP,
   transform only) instead of jumping. */
.fp-ticker-delta[hidden]{display:none}
.fp-ticker-delta[data-tone=loss]{color:var(--fps-loss);box-shadow:inset 0 0 0 1px rgba(240,160,140,.34);background:rgba(214,108,86,.1)}

/* ── Reels: the tour row under the section title ───────────────────
   Unmistakably the pane's navigation (product-tour tab bar): three full-third blocks, names large.
   The chosen reel is a raised surface in the pane's own material (stage-2 fill, kit rim, 10 px radius)
   with a 2 px cobalt→blue line along its bottom edge that fills across the reel's three chapters on
   the ledger's clock (pane.js paint()) and passes to the next tab on hand-off. The others sit at 55%,
   rise to 85% and lift 2 px on hover; pointer and focus ring. Static HTML = The Agent chosen (no-JS too). */
.direction-one .fp-section .fp-title{margin-bottom:28px}
.fp-reels{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 16px}
.fp-reels .fp-reel{position:relative;display:grid;align-content:start;row-gap:6px;min-width:0;margin:0;padding:22px 24px;border:0;border-radius:var(--fp-r-stage);
  background:none;cursor:pointer;text-align:left;font:inherit;color:var(--fp-on-stage);overflow:hidden;-webkit-tap-highlight-color:transparent;
  transition:background-color var(--fp-t-state) var(--fp-ease-std),box-shadow var(--fp-t-state) var(--fp-ease-std)}
.fp-reel-t,.fp-reel-s{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:opacity var(--fp-t-state) var(--fp-ease-std),transform var(--fp-t-state) var(--fp-ease-std)}
.fp-reel-t{font:600 var(--fp-fs-tab)/1.2 var(--fp-sans);letter-spacing:-.02em;color:var(--fp-on-stage)}
.fp-reel-s{font-size:var(--fp-fs-tab-s);line-height:1.45;color:var(--fp-on-stage-2)}
.fp-reel:not([aria-selected=true]) .fp-reel-t{opacity:.55}
.fp-reel:not([aria-selected=true]) .fp-reel-s{color:var(--fp-on-stage-3)}
.fp-reels .fp-reel[aria-selected=true]{background:var(--fp-stage-2);box-shadow:inset 0 0 0 1px var(--fp-stage-rim-2),0 18px 40px -26px rgba(0,0,0,.8)}
.fp-reel:not([aria-selected=true]):hover .fp-reel-t{opacity:.85}
.fp-reel:not([aria-selected=true]):hover .fp-reel-s{color:var(--fp-on-stage-2)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .fp-reel:not([aria-selected=true]):hover .fp-reel-t,.fp-reel:not([aria-selected=true]):hover .fp-reel-s{transform:translateY(-2px)}
}
.fp-reels .fp-reel:focus-visible{outline:2px solid var(--fp-blue);outline-offset:2px}
/* The line: 2 px along the bottom edge of the raised surface (clipped by its radius), shown while the
   reel's chapters play; at rest the surface alone marks the chosen reel. */
.fp-reel-progress{position:absolute;left:0;right:0;bottom:0;height:2px;opacity:0;pointer-events:none;
  background:linear-gradient(90deg,var(--fp-cobalt),var(--fp-blue));transform:scaleX(0);transform-origin:0 50%;will-change:transform}
.fp-reel[aria-selected=true][data-run] .fp-reel-progress{opacity:1}
@media (max-width:900px){
  .fp-reels .fp-reel{padding-inline:16px}
  .fp-reel-s{font-size:var(--fp-fs-body)}
}
/* Laptops (> 1075 px wide): the title, the row and the whole pane fit one screen together (pane.js
   fit() counts all three; the pane's zoom floor stays .85). Narrower screens keep base behaviour. The title, the gaps and the tabs' padding follow the
   viewport height; under 880 px tall the stage takes its 640 px layout and the chapter ledger drops
   its second line; under 820 px each tab's line sits beside its name; under 760 px the title, the
   case header and the ledger tighten a little more. */
@media (min-width:768px){
  .direction-one .fp-section .fp-title{font-size:clamp(34px,min(4.5vw,6.2vh),72px);margin-bottom:clamp(12px,calc(8.9vh - 52px),28px)}
  .fp-reels{margin-bottom:clamp(10px,calc(3.33vh - 14px),16px)}
  .fp-reels .fp-reel{padding-block:clamp(10px,calc(6.667vh - 38px),22px)}
}
@media (min-width:1076px) and (max-height:880px){
  .fp-section .fp-stage{height:640px}
  /* The Agent's two chapters pick their 640 px tuning by width; on a 640 stage they get the same
     values from here (their own numbers, copied from ask.css / run-src/run.css ≤ 999 px). */
  .fp-section .fp-stage .fa{height:640px;--fa-ch:620px;--fa-row:28px}
  .fp-section .fp-stage .fa-head{height:40px}
  .fp-section .fp-stage .rk{--H:640px;--sh:272px;--lk:16px}
  .fp-section .fp .fp-tab{padding-top:12px;padding-bottom:20px}
  .fp-section .fp-tab-s{display:none}
}
@media (min-width:1076px) and (max-height:820px){
  .fp-reels .fp-reel{grid-auto-flow:column;justify-content:start;align-items:baseline;column-gap:12px}
}
@media (min-width:1076px) and (max-height:760px){
  .direction-one .fp-section .fp-title{font-size:clamp(34px,min(4.5vw,5.4vh),72px);margin-bottom:10px}
  .fp-section .fp-case{height:40px}
  .fp-section .fp .fp-tab{padding-top:10px;padding-bottom:18px}
}
@media (max-width:640px){
  /* Phones: three equal name-only segments; the chosen one keeps the surface and the line (the line under
     each name stays its accessible description). */
  .fp-reels{gap:4px;margin-bottom:12px}
  .fp-reels .fp-reel{padding:12px 10px 13px;border-radius:var(--fp-r-3)}
  .fp-reel-s{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
}
@media (max-width:359px){
  /* The smallest phones: whole names, no ellipsis (The Agent / The model need ~76 px at 16 px). */
  .fp-reels{--fp-fs-tab:16px}
  .fp-reels .fp-reel{padding-inline:6px}
}
@media (max-width:560px){.fp-section .fp-reels{margin-inline:-6px}.direction-one .fp-section .fp-title{margin-bottom:20px}}
/* Rolling texts (case name, ticker label and "of" line): one cell, the text slides through its mask. */
.fp-roll{display:inline-grid;overflow:hidden}
.fp-roll>span{grid-area:1/1;display:block;min-width:0;overflow:hidden;text-overflow:ellipsis}
.fp-roll>.fp-roll-ghost{visibility:hidden}
.fp-ticker-of{font-size:12px;font-weight:600;line-height:20px;color:var(--fps-text-3);margin-left:-4px}
.fp-ticker-of[hidden]{display:none}
.fp-tabs[hidden]{display:none}

/* ── Stage: the tabs' 680 / 640 px, exactly as before ─────────────── */
.fp-stage{position:relative;z-index:1;container-type:inline-size;display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);height:680px;overflow:hidden}
.fp-stage>.fp-panel{grid-area:1/1;position:relative;z-index:1;min-width:0;min-height:0;height:100%;outline:0}
.fp-stage>.fp-panel[hidden]{display:none}
.fp-stage>.fp-panel:focus-visible{box-shadow:inset 0 0 0 2px var(--fp-blue,#5f82ff)}
@media (max-width:1075px){.fp-stage{height:640px}}

/* ── The ledger: three chapters on one track ─────────────────────── */
.fp-ledger{position:relative;z-index:1;display:flex;align-items:center;gap:16px;padding:0 16px 0 22px;
  border-radius:0 0 var(--fp-r-stage,8px) var(--fp-r-stage,8px);background:rgba(255,255,255,.022);box-shadow:inset 0 1px 0 var(--fps-hair)}
.fp-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.fp-tabs::-webkit-scrollbar{display:none}
.fp .fp-tab{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-content:start;column-gap:10px;row-gap:3px;min-width:0;margin:0;
  padding:17px 20px 25px 0;border:0;background:none;cursor:pointer;text-align:left;
  font:600 14px/20px Manrope,ui-sans-serif,system-ui,sans-serif;letter-spacing:-.005em;color:var(--fps-text-3)}
.fp-tab-n{grid-row:1;font:400 11px/20px Mono,'Geist Mono',ui-monospace,monospace;letter-spacing:.04em;color:var(--fps-text-3);transition:color 240ms}
.fp-tab-t{grid-row:1;white-space:nowrap;transition:color 240ms cubic-bezier(.22,1,.36,1)}
.fp-tab-s{grid-column:2;font-size:12px;font-weight:400;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--fps-text-3)}
.fp .fp-tab:hover .fp-tab-t{color:var(--fps-text-2)}
.fp .fp-tab[aria-selected=true] .fp-tab-t{color:var(--fps-text)}
.fp .fp-tab[aria-selected=true] .fp-tab-n{color:#8fa8f0}
.fp .fp-tab[aria-selected=true] .fp-tab-s{color:var(--fps-text-2);opacity:1}
.fp .fp-tab:focus-visible{outline:2px solid var(--fp-blue,#5f82ff);outline-offset:-2px;border-radius:4px}
/* The track: one rule along the bottom of the ledger, a tick where each chapter begins. */
.fp-tab::after{content:'';position:absolute;left:0;right:0;bottom:14px;height:1px;background:rgba(255,255,255,.1);transition:background-color 240ms}
.fp-tab+.fp-tab::before{content:'';position:absolute;left:0;bottom:14px;width:1px;height:6px;background:rgba(255,255,255,.18)}
.fp-tab[data-visited]::after{background:rgba(238,234,224,.3)}
.fp-tab[aria-selected=true]::after{background:rgba(238,234,224,.62)}
.fp-tab[aria-selected=true][data-run]::after{background:rgba(255,255,255,.1)}
/* Progress: the active chapter's stretch of track fills, linear with the tab's own clock. */
.fp-tab-progress{position:absolute;left:0;right:0;bottom:14px;height:1px;opacity:0;pointer-events:none;
  background:linear-gradient(90deg,var(--fp-cobalt,#1e47d1),var(--fp-blue,#5f82ff));transform:scaleX(0);transform-origin:0 50%;will-change:transform}
.fp-tab[aria-selected=true][data-run] .fp-tab-progress{opacity:1}

/* Pause / Play / Replay: a small glass icon button at the end of the track. The label stays for
   assistive tech; the icon is drawn from data-mode. */
.fp .fp-toggle{position:relative;flex:none;display:grid;place-items:center;width:32px;height:32px;margin:0 0 6px;padding:0;border:0;border-radius:50%;cursor:pointer;
  color:var(--fps-text-2);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.08),0 6px 16px -8px rgba(0,0,0,.6);
  transition:color 160ms,box-shadow 160ms}
.fp .fp-toggle:hover{color:var(--fps-text);box-shadow:inset 0 0 0 1px rgba(255,255,255,.17),inset 0 1px 0 rgba(255,255,255,.1),0 6px 16px -8px rgba(0,0,0,.6)}
.fp .fp-toggle:focus-visible{outline:2px solid var(--fp-blue,#5f82ff);outline-offset:3px}
.fp-toggle[hidden]{display:none}
/* Before the visitor starts, the play control keeps its place (invisible), so the ledger has the same
   widths it will have while playing, for every reel, and nothing shifts when it appears. */
.fp.fp-waiting .fp-toggle[hidden]{display:grid;visibility:hidden}
.fp-toggle [data-fp-toggle-label]{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.fp-toggle::before{content:'';width:12px;height:12px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='2' y='1.5' width='2.6' height='9' rx='.8'/%3E%3Crect x='7.4' y='1.5' width='2.6' height='9' rx='.8'/%3E%3C/svg%3E") center/12px 12px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='2' y='1.5' width='2.6' height='9' rx='.8'/%3E%3Crect x='7.4' y='1.5' width='2.6' height='9' rx='.8'/%3E%3C/svg%3E") center/12px 12px no-repeat}
.fp-toggle[data-mode=play]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.2 1.9v8.2c0 .6.6.9 1.1.6l6.4-4.1c.5-.3.5-.9 0-1.2L4.3 1.3c-.5-.3-1.1 0-1.1.6z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.2 1.9v8.2c0 .6.6.9 1.1.6l6.4-4.1c.5-.3.5-.9 0-1.2L4.3 1.3c-.5-.3-1.1 0-1.1.6z'/%3E%3C/svg%3E")}
.fp-toggle[data-mode=replay]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' d='M2.4 6.6A3.7 3.7 0 1 0 3.6 3.2'/%3E%3Cpath d='M1.6 1.3v3.6h3.6z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' d='M2.4 6.6A3.7 3.7 0 1 0 3.6 3.2'/%3E%3Cpath d='M1.6 1.3v3.6h3.6z'/%3E%3C/svg%3E")}

/* ── Under the frame ─────────────────────────────────────────────── */
.fp-foot{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;margin-top:20px;flex-wrap:wrap}
.fp-note{font-size:12px;line-height:1.6;color:var(--fps-text-3)}
.fp-access{display:inline-flex;align-items:center;gap:8px;padding:6px 0;border:0;background:none;cursor:pointer;
  font:600 12px/1.6 Manrope,ui-sans-serif,system-ui,sans-serif;color:#b9c8ec;transition:color 160ms}
.fp-access span{display:inline-block;transition:transform 220ms cubic-bezier(.22,1,.36,1)}
.fp-access:hover{color:#fff}
.fp-access:hover span{transform:translate(2px,-2px)}

/* ── Control strip: the four promises, one calm row ──────────────── */
.fp-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:56px}
.fp-strip article{min-width:0;padding:4px 32px 4px;box-shadow:inset 1px 0 0 var(--fps-hair)}
.fp-strip article:first-child{padding-left:0;box-shadow:none}
.fp-strip span{display:block;font:11px/1.5 Mono,'Geist Mono',ui-monospace,monospace;letter-spacing:.08em;color:#8fa2dc}
.fp-strip h3{margin:16px 0 8px;font-size:17px;line-height:1.35;letter-spacing:-.025em;color:var(--fps-text)}
.fp-strip p{max-width:280px;text-wrap:pretty;font-size:13px;line-height:1.75;color:#a0a7b7}

@media (max-width:1100px){
  .fp-section{--fps-rise:80px;padding-bottom:96px}
  .fp-strip article{padding-inline:24px}
}
@media (max-width:850px){
  .fp-section{--fps-rise:56px;padding-bottom:80px}
  .fp-strip{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:48px;row-gap:28px}
  .fp-strip article{padding:4px 24px}
  .fp-strip article:nth-child(odd){padding-left:0;box-shadow:none}
  .fp .fp-tab{padding-right:14px}
  .fp-tab-s{display:none}
}
@media (max-width:560px){
  .fp-section{--fps-rise:36px;padding-bottom:64px}
  .fp-section .fp{margin-inline:-6px;border-radius:6px}
  .fp-case{height:52px;padding:0 12px 0 14px;border-radius:6px 6px 0 0}
  .fp-case-mark{display:none}
  .fp-case-name{flex-direction:column;align-items:flex-start;margin:0;padding:0;box-shadow:none;font-size:12px;line-height:16px}
  .fp-case-sep{display:none}
  .fp-case-case{font-size:11px;color:var(--fps-text-3)}
  .fp-ticker{display:grid;grid-template-columns:auto auto;grid-template-rows:16px 18px;column-gap:6px;row-gap:0;align-items:center;justify-items:end}
  .fp-ticker .fp-fi{display:none}
  .fp-ticker-label{grid-column:1/-1;font-size:11px;line-height:16px;justify-self:end}
  .fp-ticker-val{grid-row:2;grid-column:1;height:18px;font-size:15px;line-height:18px}
  .fp-ticker-delta{grid-row:2;grid-column:2;height:18px;padding:0 6px;font-size:11px}
  .fp-ticker-of{grid-row:2;grid-column:2;font-size:11px;line-height:18px;margin-left:0}
  .fp-ledger{padding:0 10px 0 14px;gap:8px;border-radius:0 0 6px 6px}
  .fp-tabs{grid-template-columns:repeat(3,minmax(88px,1fr))}
  .fp .fp-tab{grid-template-columns:minmax(0,1fr);row-gap:0;padding:12px 10px 23px 0;font-size:13px;line-height:18px}
  .fp-tab-n{grid-row:1;line-height:16px}
  .fp-tab-t{grid-row:2}
  /* Every reel's chapter row on a phone: the chapter on stage shows its title in full (ellipsis only as
     a last resort), the others their number, so nothing overlaps and the three reels read alike. The
     hidden titles stay as the tabs' accessible names. */
  .fp-tabs:not([hidden]){display:flex}
  .fp-tabs .fp-tab{flex:0 0 auto;min-width:44px;padding-right:14px}
  .fp-tabs .fp-tab[aria-selected=true]{flex:1 1 auto;min-width:0}
  .fp-tabs .fp-tab-t{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .fp-tabs .fp-tab:not([aria-selected=true]) .fp-tab-t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .fp-tabs[data-more]{-webkit-mask:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
  .fp .fp-toggle{width:30px;height:30px;margin-bottom:4px}
  .fp-foot{margin-top:16px;align-items:flex-start;flex-direction:column;gap:4px}
  .fp-strip{grid-template-columns:minmax(0,1fr);margin-top:40px;row-gap:24px}
  .fp-strip article,.fp-strip article:nth-child(n){padding:0;box-shadow:none}
  .fp-strip h3{margin-top:12px;font-size:16px}
}

/* Without JS the chapters are a static picture of the first; the play control has nothing to drive. */
html:not(.js) .fp-toggle{display:none}

/* ── Arrival: the frame climbs out of the hero (JS only, motion allowed) ──
   It lands after the hero copy, rises 16 px on the long tail, and its rim brightens once. The foot
   line and the strip cells follow, 70 ms apart. */
@media (prefers-reduced-motion:no-preference){
  html.js .fp-section .fp,
  html.js .fp-section .fp-foot,
  html.js .fp-section .fp-strip article{transition:opacity 700ms var(--fps-ease),transform 1100ms var(--fps-ease)}
  html.js .fp-section:not(.fp-in) .fp{opacity:0;transform:translateY(24px)}
  html.js .fp-section .fp-reels{transition:opacity 700ms var(--fps-ease),transform 1100ms var(--fps-ease)}
  html.js .fp-section:not(.fp-in) .fp-reels{opacity:0;transform:translateY(16px)}
  html.js .fp-section.fp-in .fp-reels{transition-delay:370ms}
  html.js .fp-section:not(.fp-in) .fp-foot,
  html.js .fp-section:not(.fp-in) .fp-strip article{opacity:0;transform:translateY(16px)}
  html.js .fp-section.fp-in .fp{transition-delay:420ms}
  html.js .fp-section.fp-in .fp-foot{transition-delay:760ms}
  html.js .fp-section.fp-in .fp-strip article:nth-child(1){transition-delay:0ms}
  html.js .fp-section.fp-in .fp-strip article:nth-child(2){transition-delay:70ms}
  html.js .fp-section.fp-in .fp-strip article:nth-child(3){transition-delay:140ms}
  html.js .fp-section.fp-in .fp-strip article:nth-child(4){transition-delay:210ms}
  html.js .fp-section.fp-in .fp::after{animation:fp-rim 1400ms 900ms cubic-bezier(.22,1,.36,1) both}
}
@keyframes fp-rim{
  0%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.1)}
  30%{box-shadow:inset 0 0 0 1px rgba(170,190,255,.26),inset 0 1px 0 rgba(255,255,255,.22)}
  100%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.1)}
}



/* Section heading arrives after the four points, before the frame. */
html.js .fp-section .fp-title{transition:opacity 600ms var(--fps-ease)}
html.js .fp-section:not(.fp-in) .fp-title{opacity:0}
html.js .fp-section.fp-in .fp-title{transition-delay:320ms}

/* The start: chapter 1 waits on its opening frame behind one button. */
.fp .fp-start-veil{position:absolute;inset:0;z-index:8;display:grid;place-items:center;background:rgba(11,13,18,.3)}
.fp .fp-start{position:relative;display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 20px 0 13px;border:0;border-radius:4px;cursor:pointer;white-space:nowrap;
  font:600 15px/1 var(--fp-sans,Manrope,sans-serif);color:#fff;background:linear-gradient(180deg,#2c57e6,#1e47d1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 1px #1a3db5,0 12px 32px -10px rgba(30,71,209,.65);transition:background var(--fp-t-micro,140ms),transform var(--fp-t-micro,140ms)}
.fp .fp-start:hover{background:linear-gradient(180deg,#3360f0,#2149d8)}
.fp .fp-start:active{transform:translateY(1px)}
.fp .fp-start:focus-visible{outline:2px solid #fff;outline-offset:3px}
.fp .fp-start .fp-fi{--s:24px}
.fp .fp-start>svg{flex:none;opacity:.9;margin-left:2px}
@media(max-width:560px){.fp .fp-start{height:44px;font-size:14px;padding:0 16px 0 11px}}