/* ═══════════════════════════════════════════════════════════════════════════
   Sharpvue Motion Slide — presentation motion engine (stylesheet)

   ONE stylesheet, THREE hosts:
     • index.html      → in-portal presentation viewer
     • admin.html      → presentation editor preview  (add .svuFx--embed)
     • server.js       → public /presentation/:token share page

   Loaded via <link rel="stylesheet" href="/svu-motion-slide.css"> in all three.
   Do NOT copy these rules into a host page — that is exactly the drift that left
   8 earlier slide sub-types rendering blank in the portal but fine on the share
   link. Edit this file only.

   Every selector is namespaced .svuFx* and every declaration lives under a
   .svuFx ancestor, so nothing leaks into index.html / admin.html globals.

   Palette note: this is a *document/presentation* renderer, which the design
   system explicitly exempts from the portal token palette (see
   .claude/rules/design-system.md → "Documented exemptions"). Brand orange
   #FD6600 is canonical; the blue is the OpenEye co-brand accent, permitted for
   partner co-branding. Values are declared once as --fx-* vars below.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Both scrolling hosts wrap each slide in
   .svuPresSection > .svuPresSection__content (max-width:1200px, padding:60px 40px).
   A motion slide is full-bleed and sizes itself, so zero the host's padding for
   these sections only — otherwise every slide is 100vh + 120px and scroll-snap
   lands short of the top. Scoped with :has() so no other slide type is affected. */
.svuPresSection:has(> .svuPresSection__content > .svuFx){padding:0;align-items:stretch;}
.svuPresSection__content:has(> .svuFx){max-width:none;}

.svuFx{
  /* ── brand ── */
  --fx-orange:#FD6600;
  --fx-orange-lo:#ff8c3a;
  --fx-orange-hi:#ffb066;
  --fx-blue:#3b9eff;
  --fx-blue-lo:#7cc4ff;
  --fx-cyan:#22d3ee;
  --fx-green:#22c55e;
  --fx-amber:#fbbf24;
  --fx-red:#ef4444;
  --fx-violet:#a78bfa;

  /* ── dark surface (default) ── */
  --fx-bg:#0a1524;
  --fx-bg2:#112438;
  --fx-ink:#f3f7fb;
  --fx-muted:rgba(243,247,251,.66);
  --fx-faint:rgba(243,247,251,.4);
  --fx-card:rgba(255,255,255,.045);
  --fx-card-hi:rgba(255,255,255,.08);
  --fx-line:rgba(255,255,255,.11);
  --fx-line-hi:rgba(255,255,255,.2);

  /* ── rhythm ── */
  --fx-gap:clamp(10px,1.5vh,22px);
  --fx-r:16px;
  --fx-ease:cubic-bezier(.16,1,.3,1);

  position:relative;
  /* Break out of the host's max-width:1200px content wrapper to true full-bleed. */
  width:100vw;
  margin-left:calc(-50vw + 50%);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:var(--fx-gap);
  padding:clamp(20px,3.4vh,44px) clamp(22px,3.4vw,64px);
  overflow:hidden;
  color:var(--fx-ink);
  background:var(--fx-bg);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  text-shadow:none;
}
.svuFx *{text-shadow:none;}
.svuFx--light{
  --fx-bg:#f7f9fc;
  --fx-bg2:#eef2f7;
  --fx-ink:#0d1b2e;
  --fx-muted:rgba(13,27,46,.7);
  --fx-faint:rgba(13,27,46,.45);
  --fx-card:rgba(13,27,46,.035);
  --fx-card-hi:rgba(13,27,46,.06);
  --fx-line:rgba(13,27,46,.11);
  --fx-line-hi:rgba(13,27,46,.2);
}
/* Direct children sit above the background layer and share one measure. */
.svuFx>*{position:relative;z-index:1;width:100%;max-width:1560px;margin-left:auto;margin-right:auto;}
.svuFx--wide>*{max-width:1760px;}
.svuFx--tight>*{max-width:1180px;}

/* ═══ 1. AMBIENT BACKGROUNDS ═══════════════════════════════════════════════ */

.svuFxBg{position:absolute;inset:0;z-index:0;max-width:none;margin:0;pointer-events:none;overflow:hidden;}
.svuFxBg__img{position:absolute;inset:0;}
.svuFxBg__img img{width:100%;height:100%;object-fit:cover;}
.svuFxBg__wash{position:absolute;inset:0;}

/* aurora — slow drifting colour blobs */
.svuFxBg__blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.4;will-change:transform;}
.svuFxBg__blob--1{width:46vw;height:46vw;left:-10vw;top:-14vw;background:var(--fx-orange);animation:fxDrift1 26s ease-in-out infinite;}
.svuFxBg__blob--2{width:40vw;height:40vw;right:-8vw;top:6vh;background:var(--fx-blue);animation:fxDrift2 32s ease-in-out infinite;}
.svuFxBg__blob--3{width:34vw;height:34vw;left:26vw;bottom:-16vw;background:var(--fx-violet);opacity:.26;animation:fxDrift3 38s ease-in-out infinite;}
@keyframes fxDrift1{0%,100%{transform:translate3d(0,0,0) scale(1);}33%{transform:translate3d(7vw,5vh,0) scale(1.14);}66%{transform:translate3d(2vw,-4vh,0) scale(.92);}}
@keyframes fxDrift2{0%,100%{transform:translate3d(0,0,0) scale(1);}40%{transform:translate3d(-6vw,7vh,0) scale(1.1);}70%{transform:translate3d(-2vw,-5vh,0) scale(.94);}}
@keyframes fxDrift3{0%,100%{transform:translate3d(0,0,0) scale(1);}50%{transform:translate3d(5vw,-7vh,0) scale(1.18);}}

/* grid — perspective floor drifting toward the viewer */
.svuFxBg__grid{position:absolute;inset:-20% -20% -30% -20%;
  background-image:linear-gradient(var(--fx-line-hi) 1px,transparent 1px),linear-gradient(90deg,var(--fx-line-hi) 1px,transparent 1px);
  background-size:64px 64px;
  transform:perspective(700px) rotateX(64deg) scale(1.7);
  transform-origin:50% 100%;
  animation:fxGridDrift 5.5s linear infinite;
  mask-image:linear-gradient(to top,#000 0%,transparent 78%);
  -webkit-mask-image:linear-gradient(to top,#000 0%,transparent 78%);
  opacity:.5;
}
@keyframes fxGridDrift{from{background-position:0 0;}to{background-position:0 64px;}}

/* mesh — static conic wash + slow hue sweep */
.svuFxBg__mesh{position:absolute;inset:0;
  background:
    radial-gradient(60% 50% at 18% 12%,rgba(253,102,0,.3),transparent 60%),
    radial-gradient(55% 55% at 86% 26%,rgba(59,158,255,.28),transparent 62%),
    radial-gradient(70% 60% at 50% 104%,rgba(167,139,250,.2),transparent 60%);
  animation:fxMeshPulse 18s ease-in-out infinite;
}
@keyframes fxMeshPulse{0%,100%{opacity:.85;transform:scale(1);}50%{opacity:1;transform:scale(1.06);}}

/* beams — light shafts sweeping across */
.svuFxBg__beam{position:absolute;top:-40%;width:22vw;height:180%;
  background:linear-gradient(180deg,transparent,rgba(253,102,0,.16),transparent);
  filter:blur(24px);transform:rotate(14deg);animation:fxBeam 14s ease-in-out infinite;}
.svuFxBg__beam--2{left:auto;right:6vw;background:linear-gradient(180deg,transparent,rgba(59,158,255,.16),transparent);animation-duration:19s;animation-delay:-6s;}
@keyframes fxBeam{0%,100%{transform:translateX(-12vw) rotate(14deg);opacity:.5;}50%{transform:translateX(16vw) rotate(14deg);opacity:1;}}

/* scan — horizontal sweep + faint scanlines */
.svuFxBg__scan{position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 4px);}
.svuFxBg__scan::after{content:"";position:absolute;left:0;right:0;height:26vh;
  background:linear-gradient(180deg,transparent,rgba(59,158,255,.16),transparent);
  animation:fxScan 7s cubic-bezier(.4,0,.6,1) infinite;}
@keyframes fxScan{0%{top:-30vh;}100%{top:104vh;}}

/* dots — breathing dot field */
.svuFxBg__dots{position:absolute;inset:0;
  background-image:radial-gradient(var(--fx-line-hi) 1.4px,transparent 1.4px);
  background-size:34px 34px;animation:fxDots 9s ease-in-out infinite;}
@keyframes fxDots{0%,100%{opacity:.5;background-size:34px 34px;}50%{opacity:.85;background-size:36px 36px;}}

/* orbit — concentric rings with travelling nodes (radar / connectivity feel) */
.svuFxBg__orbit{position:absolute;right:-8vw;top:50%;width:74vh;height:74vh;transform:translateY(-50%);opacity:.5;}
.svuFxBg__orbit span{position:absolute;inset:0;margin:auto;border:1px solid var(--fx-line-hi);border-radius:50%;}
.svuFxBg__orbit span:nth-child(1){width:34%;height:34%;animation:fxSpin 26s linear infinite;}
.svuFxBg__orbit span:nth-child(2){width:62%;height:62%;animation:fxSpin 40s linear infinite reverse;}
.svuFxBg__orbit span:nth-child(3){width:92%;height:92%;animation:fxSpin 58s linear infinite;}
.svuFxBg__orbit span::after{content:"";position:absolute;top:-4px;left:50%;width:8px;height:8px;border-radius:50%;
  background:var(--fx-orange);box-shadow:0 0 14px var(--fx-orange);}
.svuFxBg__orbit span:nth-child(2)::after{background:var(--fx-blue);box-shadow:0 0 14px var(--fx-blue);}
.svuFxBg__orbit span:nth-child(3)::after{background:var(--fx-cyan);box-shadow:0 0 14px var(--fx-cyan);}
@keyframes fxSpin{from{transform:rotate(0);}to{transform:rotate(360deg);}}

/* vignette on every background */
.svuFxBg__vig{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 40%,transparent 40%,rgba(0,0,0,.5) 100%);}
.svuFx--light .svuFxBg__vig{background:radial-gradient(120% 90% at 50% 40%,transparent 45%,rgba(13,27,46,.1) 100%);}

/* ═══ 2. REVEAL ════════════════════════════════════════════════════════════
   Reveal reuses the hosts' existing IntersectionObserver, which toggles
   .svuPresVisible on every .svuPresAnim it sees. Elements that only need to
   *trigger* keyframes (not fade themselves) carry .svuFxTrig so they stay
   fully visible while their children animate.
   The admin editor has no observer, so .svuFx--embed forces the end state. */

.svuFxTrig{opacity:1 !important;transform:none !important;transition:none !important;}
.svuFx--embed .svuPresAnim{opacity:1 !important;transform:none !important;}
@media (prefers-reduced-motion:reduce){
  .svuFx *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
  .svuFxBg{opacity:.55;}
}

/* ═══ 3. TYPOGRAPHY ════════════════════════════════════════════════════════ */

.svuFxKicker{display:flex;align-items:center;gap:12px;font-size:clamp(10px,1.4vh,13px);font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fx-orange);}
.svuFxKicker__rule{height:2px;flex:0 0 0;background:linear-gradient(90deg,var(--fx-orange),transparent);border-radius:2px;
  transition:flex-basis 1.1s var(--fx-ease) .1s;}
.svuPresVisible.svuFxKicker .svuFxKicker__rule,.svuFx--embed .svuFxKicker__rule{flex-basis:min(300px,22vw);}
.svuFxKicker--c{justify-content:center;}

.svuFxH1{font-size:clamp(28px,5.4vh,62px);font-weight:900;letter-spacing:-.025em;line-height:1.04;}
.svuFxH1--xl{font-size:clamp(34px,7.4vh,90px);}
.svuFxH1--sm{font-size:clamp(22px,3.9vh,42px);}
.svuFxH1--c{text-align:center;}
.svuFxH1__l{display:block;}
.svuFxH1__w{display:inline-block;opacity:0;transform:translateY(.5em) rotateX(-45deg);transform-origin:50% 100%;}
.svuPresVisible .svuFxH1__w,.svuFx--embed .svuFxH1__w{
  animation:fxWord .8s var(--fx-ease) forwards;animation-delay:calc(var(--i)*.05s);}
@keyframes fxWord{to{opacity:1;transform:none;}}
.svuFxAccent{color:var(--fx-orange);}
.svuFxAccent--b{color:var(--fx-blue);}
/* animated underline that draws under an accent phrase */
.svuFxAccent--u{position:relative;}
.svuFxAccent--u::after{content:"";position:absolute;left:0;right:100%;bottom:-.08em;height:.07em;border-radius:99px;
  background:linear-gradient(90deg,var(--fx-orange),var(--fx-orange-hi));transition:right 1s var(--fx-ease) .55s;}
.svuPresVisible .svuFxAccent--u::after,.svuFx--embed .svuFxAccent--u::after{right:0;}

.svuFxSub{font-size:clamp(13px,2.1vh,23px);font-weight:600;color:var(--fx-muted);max-width:1080px;line-height:1.4;}
.svuFxSub--c{text-align:center;margin-left:auto;margin-right:auto;}
.svuFxLede{font-size:clamp(13px,1.9vh,19px);line-height:1.55;color:var(--fx-muted);max-width:960px;}
.svuFxLede b{color:var(--fx-ink);font-weight:800;}
.svuFxLede--c{text-align:center;margin-left:auto;margin-right:auto;}
.svuFxNote{font-size:clamp(10px,1.35vh,13px);color:var(--fx-faint);font-style:italic;line-height:1.5;}
.svuFxNote--c{text-align:center;}
.svuFxSpacer{flex:0 0 auto;height:clamp(4px,1.4vh,18px);}

/* ═══ 4. LOGO ROW ══════════════════════════════════════════════════════════ */

.svuFxLogos{display:flex;align-items:center;justify-content:center;gap:clamp(12px,1.6vw,26px);}
.svuFxLogos--l{justify-content:flex-start;}
.svuFxLogos img{height:clamp(22px,4vh,44px);width:auto;object-fit:contain;}
.svuFxLogos__x{opacity:.4;font-weight:700;font-size:clamp(13px,1.8vh,20px);}
.svuFxWordmark{font-weight:900;letter-spacing:-.02em;font-size:clamp(17px,2.6vh,28px);}
.svuFxWordmark em{font-style:normal;color:var(--fx-orange);}

/* ═══ 5. KPI TILES ═════════════════════════════════════════════════════════ */

.svuFxKpis{display:grid;gap:clamp(9px,1.1vw,18px);}
.svuFxKpi{position:relative;background:var(--fx-card);border:1px solid var(--fx-line);border-radius:var(--fx-r);
  padding:clamp(12px,2vh,24px) clamp(13px,1.5vw,24px);overflow:hidden;
  transition:transform .45s var(--fx-ease),border-color .45s,box-shadow .45s;}
.svuFxKpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c,var(--fx-orange));
  transform:scaleY(0);transform-origin:50% 0;transition:transform .8s var(--fx-ease) .15s;}
.svuPresVisible.svuFxKpi::before,.svuFx--embed .svuFxKpi::before{transform:scaleY(1);}
.svuFxKpi::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 70% at 0% 0%,color-mix(in srgb,var(--c,var(--fx-orange)) 16%,transparent),transparent 70%);
  opacity:0;transition:opacity .45s;}
.svuFxKpi:hover{transform:translateY(-5px);border-color:var(--fx-line-hi);box-shadow:0 18px 44px rgba(0,0,0,.32);}
.svuFxKpi:hover::after{opacity:1;}
.svuFxKpi__ico{width:clamp(28px,4vh,42px);height:clamp(28px,4vh,42px);border-radius:11px;display:grid;place-items:center;
  margin-bottom:clamp(6px,1vh,12px);background:color-mix(in srgb,var(--c,var(--fx-orange)) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--c,var(--fx-orange)) 34%,transparent);color:var(--c,var(--fx-orange));}
.svuFxKpi__ico svg{width:56%;height:56%;}
.svuFxKpi__v{font-size:clamp(24px,4.8vh,54px);font-weight:900;letter-spacing:-.03em;line-height:1;
  color:var(--c,var(--fx-orange));font-variant-numeric:tabular-nums;}
.svuFxKpi__v small{font-size:.5em;font-weight:800;letter-spacing:0;}
.svuFxKpi__l{margin-top:.35em;font-size:clamp(11px,1.55vh,15px);font-weight:700;line-height:1.3;}
.svuFxKpi__s{margin-top:.3em;font-size:clamp(9.5px,1.3vh,12.5px);color:var(--fx-faint);line-height:1.4;}
.svuFxKpi__d{display:inline-flex;align-items:center;gap:3px;margin-left:8px;font-size:.34em;font-weight:800;
  vertical-align:middle;color:var(--fx-green);}
.svuFxKpi__d svg{width:1em;height:1em;}
.svuFxKpi__d--dn{color:var(--fx-red);}
/* value → value transition (e.g. $15.5B → $27.5B) */
.svuFxKpi__arrow{display:inline-block;margin:0 .18em;color:var(--fx-faint);
  animation:fxNudge 2.4s ease-in-out infinite;}
@keyframes fxNudge{0%,100%{transform:translateX(0);}50%{transform:translateX(5px);}}

/* ═══ 6. CARDS ═════════════════════════════════════════════════════════════ */

.svuFxCards{display:grid;gap:clamp(10px,1.15vw,20px);}
.svuFxCard{position:relative;background:var(--fx-card);border:1px solid var(--fx-line);border-radius:var(--fx-r);
  padding:clamp(13px,2.1vh,26px);overflow:hidden;
  transition:transform .45s var(--fx-ease),border-color .45s,box-shadow .45s,background .45s;}
.svuFxCard:hover{transform:translateY(-6px);background:var(--fx-card-hi);border-color:color-mix(in srgb,var(--c,var(--fx-orange)) 45%,transparent);
  box-shadow:0 20px 50px rgba(0,0,0,.34);}
.svuFxCard__glow{position:absolute;inset:-40% -40% auto auto;width:60%;height:120%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--c,var(--fx-orange)) 22%,transparent),transparent);
  opacity:0;transition:opacity .5s;}
.svuFxCard:hover .svuFxCard__glow{opacity:1;}
.svuFxCard__ico{width:clamp(32px,4.6vh,50px);height:clamp(32px,4.6vh,50px);border-radius:13px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c,var(--fx-orange)) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--c,var(--fx-orange)) 32%,transparent);
  color:var(--c,var(--fx-orange));margin-bottom:clamp(8px,1.3vh,15px);flex:0 0 auto;}
.svuFxCard__ico svg{width:54%;height:54%;}
.svuFxCard__n{position:absolute;right:clamp(12px,1.6vh,20px);top:clamp(8px,1.2vh,14px);
  font-size:clamp(26px,5vh,58px);font-weight:900;line-height:1;color:var(--c,var(--fx-orange));opacity:.16;letter-spacing:-.04em;}
.svuFxCard__t{font-size:clamp(13px,1.95vh,20px);font-weight:800;line-height:1.25;}
.svuFxCard__x{margin-top:.45em;font-size:clamp(11px,1.5vh,14.5px);color:var(--fx-muted);line-height:1.5;}
.svuFxCard__body{position:relative;z-index:1;min-width:0;}
.svuFxCard__ico{position:relative;z-index:1;}
.svuFxCard__n{z-index:1;}
/* check list inside a card: hairline rule, then ticks that lift in on reveal */
.svuFxCard__rule{position:relative;z-index:1;height:1px;margin:clamp(7px,1.1vh,14px) 0;
  background:linear-gradient(90deg,color-mix(in srgb,var(--c,var(--fx-orange)) 40%,transparent),transparent);}
.svuFxCard__pts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(5px,.85vh,11px);}
.svuFxCard__pts li{display:flex;gap:clamp(7px,.8vw,12px);align-items:flex-start;line-height:1.4;
  font-size:clamp(11.5px,1.5vh,15px);color:var(--fx-muted);
  opacity:0;transform:translateY(7px);
  transition:opacity .5s ease calc(.22s + var(--i,0)*.09s),transform .6s var(--fx-ease) calc(.22s + var(--i,0)*.09s);}
.svuPresVisible .svuFxCard__pts li,.svuFx--embed .svuFxCard__pts li{opacity:1;transform:none;}
.svuFxCard__pts svg{flex:0 0 auto;margin-top:.08em;color:var(--c,var(--fx-orange));
  width:clamp(13px,1.8vh,18px);height:clamp(13px,1.8vh,18px);}
/* ambient art behind the card, tinted by the card's own colour */
/* photo band across the card's bottom edge — negative margins cancel the card's
   own padding so the image bleeds to the border instead of floating inside it.
   The card already clips (overflow:hidden), so the corners stay rounded. */
.svuFxCard__im{position:relative;z-index:1;overflow:hidden;
  height:clamp(66px,12.5vh,146px);
  margin:clamp(10px,1.6vh,20px) calc(-1 * clamp(13px,2.1vh,26px)) calc(-1 * clamp(13px,2.1vh,26px));
  border-top:1px solid var(--fx-line);}
.svuFxCard__im img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;
  transition:transform .6s var(--fx-ease);}
.svuFxCard:hover .svuFxCard__im img{transform:scale(1.05);}
/* imgPos:"top" — a product plate above the label, the way a spec card reads.
   The plate keeps its own light background so white-backed product photography
   sits on it cleanly instead of floating on the dark card. */
.svuFxCard--imgtop{padding-top:0;overflow:hidden;}
.svuFxCard--imgtop>.svuFxCard__im{margin:0 calc(-1 * clamp(13px,2.1vh,26px)) clamp(9px,1.4vh,18px);
  border-top:0;border-bottom:1px solid var(--fx-line);
  height:clamp(78px,14vh,168px);
  /* Not flat white: product photography is mostly white-bodied, and on a white
     plate it loses its edges. A cool gradient gives the silhouette something to
     sit against, with a wash of the card's own accent across the top so each
     plate still reads as part of its card. */
  /* Deliberately not near-white at the top: these products are white-bodied, and
     a white panel on a near-white plate reads as washed out rather than solid.
     Mid-tone slate gives every silhouette an edge. */
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--c,var(--fx-orange)) 10%,transparent),transparent 62%),
    radial-gradient(125% 125% at 50% 4%,#e8eef6 0%,#cdd8e6 48%,#aebccf 100%);}
.svuFxCard--imgtop>.svuFxCard__im img{object-fit:contain;padding:clamp(6px,1vh,14px);
  /* drop-shadow, not box-shadow: it follows the cut-out's alpha silhouette, so a
     white product gets a real contact shadow on a light plate instead of a box.
     Two passes — a soft ambient one and a tight contact one — read as depth. */
  filter:drop-shadow(0 14px 18px rgba(15,32,56,.40)) drop-shadow(0 3px 6px rgba(15,32,56,.30));}

.svuFxCard__art{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;}
/* pulse — broadcast rings out of the lower-left corner */
.svuFxCard__art--pulse{
  background:repeating-radial-gradient(circle at 13% 118%,
    color-mix(in srgb,var(--c,var(--fx-blue)) 36%,transparent) 0 1px,
    transparent 1px clamp(13px,2.3vh,26px));
  mask-image:radial-gradient(circle at 13% 118%,#000,transparent 72%);
  -webkit-mask-image:radial-gradient(circle at 13% 118%,#000,transparent 72%);}
/* orbit — a ring sweeping under the copy, for anything satellite-shaped */
.svuFxCard__art--orbit::before,.svuFxCard__art--orbit::after{content:"";position:absolute;border-radius:50%;}
.svuFxCard__art--orbit::before{right:-16%;bottom:-46%;width:78%;aspect-ratio:1;
  border:1px solid color-mix(in srgb,var(--c,var(--fx-cyan)) 38%,transparent);}
.svuFxCard__art--orbit::after{right:-2%;bottom:-28%;width:50%;aspect-ratio:1;
  border:1px dashed color-mix(in srgb,var(--c,var(--fx-cyan)) 30%,transparent);
  animation:fxSpinSlow 44s linear infinite;}
/* grid — a dot matrix fading up from the base */
.svuFxCard__art--grid{
  background-image:radial-gradient(circle,color-mix(in srgb,var(--c,var(--fx-violet)) 48%,transparent) 1.2px,transparent 1.2px);
  background-size:clamp(9px,1.5vh,14px) clamp(9px,1.5vh,14px);
  mask-image:linear-gradient(to top,#000,transparent 62%);
  -webkit-mask-image:linear-gradient(to top,#000,transparent 62%);}
.svuFxCard--row{display:flex;gap:clamp(11px,1.4vw,20px);align-items:flex-start;}
.svuFxCard--row .svuFxCard__ico{margin-bottom:0;}
.svuFxCard--flat{background:transparent;border-color:transparent;}
.svuFxCard--flat:hover{transform:none;box-shadow:none;background:var(--fx-card);}

/* ═══ 7. ICON LIST ═════════════════════════════════════════════════════════ */

.svuFxList{display:flex;flex-direction:column;gap:clamp(7px,1.15vh,17px);}
.svuFxLi{display:flex;gap:clamp(10px,1.2vw,18px);align-items:flex-start;padding:clamp(7px,1vh,13px) 0;
  border-bottom:1px solid var(--fx-line);}
.svuFxLi:last-child{border-bottom:0;}
.svuFxLi__ico{width:clamp(28px,3.9vh,40px);height:clamp(28px,3.9vh,40px);border-radius:11px;flex:0 0 auto;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c,var(--fx-blue)) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--c,var(--fx-blue)) 30%,transparent);color:var(--c,var(--fx-blue));}
.svuFxLi__ico svg{width:55%;height:55%;}
.svuFxLi__t{font-size:clamp(12.5px,1.8vh,18px);font-weight:800;line-height:1.3;}
.svuFxLi__x{margin-top:.25em;font-size:clamp(11px,1.45vh,14.5px);color:var(--fx-muted);line-height:1.5;}
.svuFxLi__body{min-width:0;}
/* checklist variant: icon pops in */
.svuFxLi--chk .svuFxLi__ico{border-radius:50%;transform:scale(0);transition:transform .55s var(--fx-ease);}
.svuPresVisible.svuFxLi--chk .svuFxLi__ico,.svuFx--embed .svuFxLi--chk .svuFxLi__ico{transform:scale(1);}

/* list size variants — for headers-only slides where the titles carry the slide.
   Scales the row, the icon tile and the gaps together so the rhythm holds. */
/* lg/xl exist for headers-only rows, so the text centres against the icon tile by
   default — a single header pinned to the tile's top reads as misaligned. `align:"top"`
   restores flex-start (use it when the rows still carry subtext). */
.svuFxList--lg .svuFxLi,.svuFxList--xl .svuFxLi,.svuFxList--mid .svuFxLi{align-items:center;}
.svuFxList--top .svuFxLi{align-items:flex-start;}
.svuFxList--lg{gap:clamp(10px,1.9vh,26px);}
.svuFxList--lg .svuFxLi{gap:clamp(13px,1.6vw,24px);padding:clamp(10px,1.5vh,20px) 0;}
.svuFxList--lg .svuFxLi__ico{width:clamp(36px,5.2vh,54px);height:clamp(36px,5.2vh,54px);border-radius:14px;}
.svuFxList--lg .svuFxLi__t{font-size:clamp(16px,max(2.7vh,1.5vw),31px);font-weight:900;line-height:1.22;letter-spacing:-.005em;}
.svuFxList--lg .svuFxLi__x{font-size:clamp(12px,1.7vh,16.5px);}

.svuFxList--xl{gap:clamp(12px,2.4vh,34px);}
.svuFxList--xl .svuFxLi{gap:clamp(15px,1.9vw,28px);padding:clamp(12px,1.9vh,26px) 0;}
.svuFxList--xl .svuFxLi__ico{width:clamp(42px,6.2vh,64px);height:clamp(42px,6.2vh,64px);border-radius:16px;}
.svuFxList--xl .svuFxLi__t{font-size:clamp(18px,max(3.2vh,1.75vw),38px);font-weight:900;line-height:1.18;letter-spacing:-.01em;}
.svuFxList--xl .svuFxLi__x{font-size:clamp(12.5px,1.8vh,18px);}

/* ═══ 8. BARS ══════════════════════════════════════════════════════════════ */

.svuFxBars{display:flex;flex-direction:column;gap:clamp(6px,1vh,14px);}
.svuFxBar{display:grid;grid-template-columns:minmax(120px,22%) 1fr auto;gap:clamp(9px,1.3vw,20px);align-items:center;}
.svuFxBar__l{font-size:clamp(11px,1.55vh,15px);font-weight:700;line-height:1.25;}
.svuFxBar__n{font-size:clamp(9.5px,1.2vh,12px);color:var(--fx-faint);font-weight:600;margin-top:2px;}
.svuFxBar__track{height:clamp(10px,1.7vh,20px);border-radius:99px;background:var(--fx-card-hi);overflow:hidden;position:relative;}
.svuFxBar__fill{height:100%;width:var(--w);border-radius:99px;background:linear-gradient(90deg,var(--c,var(--fx-orange)),color-mix(in srgb,var(--c,var(--fx-orange)) 55%,#fff));
  transform:scaleX(0);transform-origin:0 50%;transition:transform 1.3s var(--fx-ease);position:relative;overflow:hidden;}
.svuPresVisible .svuFxBar__fill,.svuFx--embed .svuFxBar__fill{transform:scaleX(1);}
/* travelling sheen inside the fill */
.svuFxBar__fill::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  transform:translateX(-100%);animation:fxSheen 2.8s ease-in-out infinite 1.1s;}
@keyframes fxSheen{0%{transform:translateX(-100%);}60%,100%{transform:translateX(220%);}}
.svuFxBar__v{font-size:clamp(12px,1.85vh,19px);font-weight:900;font-variant-numeric:tabular-nums;color:var(--c,var(--fx-orange));white-space:nowrap;}

/* ═══ 9. LINE CHART (SVG, draws on reveal) ═════════════════════════════════ */

.svuFxChart{position:relative;width:100%;}
.svuFxChart svg{width:100%;height:auto;display:block;overflow:visible;}
.svuFxChart__grid{stroke:var(--fx-line);stroke-width:1;}
.svuFxChart__axis{stroke:var(--fx-line-hi);stroke-width:1.5;}
.svuFxChart__tick{fill:var(--fx-faint);font-size:11px;font-weight:700;}
.svuFxChart__area{opacity:0;transform:scaleY(0);transform-origin:50% 100%;
  transition:opacity .8s ease 1s,transform 1.3s var(--fx-ease) .75s;}
.svuPresVisible .svuFxChart__area,.svuFx--embed .svuFxChart__area{opacity:1;transform:none;}
.svuFxChart__line{fill:none;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 2.1s var(--fx-ease) .25s;}
.svuPresVisible .svuFxChart__line,.svuFx--embed .svuFxChart__line{stroke-dashoffset:0;}
/* modeled (derived) run: dashed and thinner, fades in rather than drawing on */
.svuFxChart__line--dash{stroke-dasharray:7 6;stroke-dashoffset:0;stroke-width:2.6;opacity:0;
  transition:opacity 1s ease .15s;}
.svuPresVisible .svuFxChart__line--dash,.svuFx--embed .svuFxChart__line--dash{opacity:.85;}
.svuFxChart__split{stroke:var(--fx-line-hi);stroke-width:1;stroke-dasharray:3 4;}
.svuFxChart__splitLab{fill:var(--fx-faint);font-size:11px;font-weight:800;letter-spacing:.06em;}
.svuFxChart__dot{opacity:0;transition:opacity .4s ease;}
.svuPresVisible .svuFxChart__dot,.svuFx--embed .svuFxChart__dot{opacity:1;}
.svuFxChart__end{transform-box:fill-box;transform-origin:50% 50%;animation:fxPing 2.2s ease-out infinite;}
@keyframes fxPing{0%{transform:scale(1);opacity:.85;}70%,100%{transform:scale(3.4);opacity:0;}}
.svuFxChart__lab{fill:var(--fx-ink);font-size:12px;font-weight:800;}
.svuFxChart__legend{display:flex;gap:clamp(11px,1.5vw,22px);flex-wrap:wrap;margin-top:8px;}
.svuFxChart__key{display:flex;align-items:center;gap:7px;font-size:clamp(10.5px,1.4vh,13.5px);font-weight:700;color:var(--fx-muted);}
.svuFxChart__key i{width:16px;height:4px;border-radius:99px;background:var(--k);flex:0 0 auto;}
/* dashed swatch mirrors a dashed (modeled) run on the chart */
.svuFxChart__key--dash i{height:0;border-radius:0;border-top:3px dashed var(--k);background:none;opacity:.85;}

/* ═══ 10. RING GAUGES ══════════════════════════════════════════════════════ */

.svuFxRings{display:grid;gap:clamp(11px,1.5vw,26px);}
.svuFxRing{display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(6px,.9vh,12px);}
.svuFxRing__wrap{position:relative;width:100%;max-width:clamp(110px,20vh,200px);}
.svuFxRing svg{width:100%;height:auto;display:block;transform:rotate(-90deg);}
.svuFxRing__bg{fill:none;stroke:var(--fx-card-hi);stroke-width:9;}
.svuFxRing__v{fill:none;stroke:var(--c,var(--fx-orange));stroke-width:9;stroke-linecap:round;
  stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.6s var(--fx-ease) .2s;
  filter:drop-shadow(0 0 8px color-mix(in srgb,var(--c,var(--fx-orange)) 55%,transparent));}
.svuPresVisible .svuFxRing__v,.svuFx--embed .svuFxRing__v{stroke-dashoffset:var(--off);}
.svuFxRing__mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;}
.svuFxRing__n{font-size:clamp(17px,3.3vh,36px);font-weight:900;letter-spacing:-.03em;color:var(--c,var(--fx-orange));
  font-variant-numeric:tabular-nums;line-height:1;}
.svuFxRing__u{font-size:clamp(8.5px,1.1vh,11px);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--fx-faint);}
.svuFxRing__l{font-size:clamp(11px,1.55vh,15px);font-weight:800;line-height:1.3;}
.svuFxRing__s{font-size:clamp(9.5px,1.3vh,12.5px);color:var(--fx-faint);line-height:1.4;}

/* ═══ 11. STEPS FLOW ═══════════════════════════════════════════════════════ */

.svuFxSteps{display:grid;gap:clamp(9px,1.1vw,18px);position:relative;}
.svuFxStep{position:relative;background:var(--fx-card);border:1px solid var(--fx-line);border-radius:var(--fx-r);
  padding:clamp(12px,1.9vh,24px) clamp(11px,1.2vw,20px);text-align:center;
  transition:transform .45s var(--fx-ease),border-color .45s,box-shadow .45s;}
.svuFxStep:hover{transform:translateY(-5px);border-color:var(--fx-line-hi);box-shadow:0 16px 40px rgba(0,0,0,.3);}
.svuFxStep__n{width:clamp(26px,3.6vh,36px);height:clamp(26px,3.6vh,36px);border-radius:50%;margin:0 auto clamp(7px,1vh,13px);
  display:grid;place-items:center;font-size:clamp(12px,1.7vh,17px);font-weight:900;
  background:var(--c,var(--fx-orange));color:#0a1524;
  box-shadow:0 0 0 0 color-mix(in srgb,var(--c,var(--fx-orange)) 55%,transparent);animation:fxHalo 3s ease-out infinite;}
@keyframes fxHalo{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c,var(--fx-orange)) 50%,transparent);}70%,100%{box-shadow:0 0 0 14px transparent;}}
.svuFxStep__ico{color:var(--c,var(--fx-orange));margin:0 auto clamp(5px,.8vh,10px);width:clamp(20px,2.7vh,28px);height:clamp(20px,2.7vh,28px);}
.svuFxStep__ico svg{width:100%;height:100%;}
.svuFxStep__t{font-size:clamp(12px,1.75vh,17px);font-weight:800;line-height:1.25;}
.svuFxStep__x{margin-top:.4em;font-size:clamp(10.5px,1.4vh,13.5px);color:var(--fx-muted);line-height:1.45;}
/* photo between a step's title and its caption. Negative side margins cancel
   the card's own padding so the shot spans the full card width. */
.svuFxStep--img{padding-left:0;padding-right:0;overflow:hidden;}
.svuFxStep--img>.svuFxStep__n,.svuFxStep--img>.svuFxStep__ico,
.svuFxStep--img>.svuFxStep__t,.svuFxStep--img>.svuFxStep__x{
  padding-left:clamp(11px,1.2vw,20px);padding-right:clamp(11px,1.2vw,20px);}
.svuFxStep__im{margin:clamp(8px,1.2vh,15px) 0 0;height:clamp(70px,13vh,150px);overflow:hidden;
  border-top:1px solid var(--fx-line);border-bottom:1px solid var(--fx-line);}
.svuFxStep__im img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;
  transition:transform .6s var(--fx-ease);}
.svuFxStep:hover .svuFxStep__im img{transform:scale(1.05);}
.svuFxStep--img .svuFxStep__x{margin-top:clamp(8px,1.2vh,15px);}

/* ═══ 11b. SIDE PANEL — a boxed list used as a rail beside the main content ══ */

.svuFxPanel{border:1px solid color-mix(in srgb,var(--c,var(--fx-orange)) 34%,transparent);
  border-radius:var(--fx-r);background:var(--fx-card);
  padding:clamp(11px,1.7vh,22px) clamp(11px,1.2vw,20px);
  display:flex;flex-direction:column;gap:clamp(7px,1vh,13px);min-width:0;}
.svuFxPanel__l{font-size:clamp(8.5px,1.12vh,11px);font-weight:900;letter-spacing:.13em;
  text-transform:uppercase;color:var(--c,var(--fx-orange));}
.svuFxList--sm .svuFxLi__t{font-size:clamp(10.5px,max(1.4vh,.78vw),15px);}
.svuFxList--sm .svuFxLi__x{font-size:clamp(9.5px,max(1.25vh,.7vw),13px);}
.svuFxList--sm .svuFxLi__ico{width:clamp(22px,3vh,32px);height:clamp(22px,3vh,32px);}
.svuFxList--inpanel{gap:clamp(6px,.95vh,12px);}

/* marching connector between steps */
.svuFxStep__link{position:absolute;top:clamp(24px,3.4vh,36px);right:calc(-1*clamp(9px,1.1vw,18px));width:clamp(9px,1.1vw,18px);
  height:2px;background:repeating-linear-gradient(90deg,var(--fx-line-hi) 0 5px,transparent 5px 10px);
  background-size:10px 2px;animation:fxMarch .9s linear infinite;}
@keyframes fxMarch{to{background-position:10px 0;}}

/* ═══ 12. SPECTRUM BAND ════════════════════════════════════════════════════ */

.svuFxSpec{display:flex;align-items:stretch;gap:0;border:1px solid var(--fx-line);border-radius:var(--fx-r);
  overflow:hidden;background:var(--fx-card);}
.svuFxSpec__i{flex:1;padding:clamp(11px,1.8vh,22px) clamp(11px,1.4vw,24px);text-align:center;position:relative;
  display:flex;flex-direction:column;justify-content:center;gap:4px;}
.svuFxSpec__i+.svuFxSpec__i{border-left:1px solid var(--fx-line);}
.svuFxSpec__i--hl{background:linear-gradient(180deg,color-mix(in srgb,var(--fx-orange) 20%,transparent),color-mix(in srgb,var(--fx-orange) 6%,transparent));
  flex:1.25;}
.svuFxSpec__i--hl::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--fx-orange);
  transform:scaleX(0);transition:transform 1s var(--fx-ease) .4s;}
.svuPresVisible .svuFxSpec__i--hl::after,.svuFx--embed .svuFxSpec__i--hl::after{transform:scaleX(1);}
.svuFxSpec__t{font-size:clamp(11.5px,1.75vh,18px);font-weight:900;line-height:1.2;}
.svuFxSpec__i--hl .svuFxSpec__t{color:var(--fx-orange);}
.svuFxSpec__x{font-size:clamp(9.5px,1.25vh,12.5px);color:var(--fx-faint);}
.svuFxSpec__ar{align-self:center;padding:0 clamp(6px,.8vw,14px);color:var(--fx-faint);flex:0 0 auto;
  animation:fxNudge 2.6s ease-in-out infinite;}
.svuFxSpec__ar svg{width:clamp(16px,2.2vh,24px);height:clamp(16px,2.2vh,24px);}

/* ═══ 13. TWO-COLUMN COMPARE ═══════════════════════════════════════════════ */

.svuFxTwo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(11px,1.5vw,26px);align-items:start;}
.svuFxCol{background:var(--fx-card);border:1px solid var(--fx-line);border-radius:var(--fx-r);overflow:hidden;
  transition:transform .45s var(--fx-ease),box-shadow .45s;height:100%;}
.svuFxCol:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(0,0,0,.3);}
.svuFxCol__h{display:flex;align-items:center;gap:clamp(8px,1vw,14px);padding:clamp(10px,1.5vh,19px) clamp(12px,1.4vw,22px);
  border-bottom:1px solid var(--fx-line);background:color-mix(in srgb,var(--c,var(--fx-orange)) 11%,transparent);}
.svuFxCol__ico{width:clamp(28px,3.8vh,40px);height:clamp(28px,3.8vh,40px);border-radius:11px;display:grid;place-items:center;flex:0 0 auto;
  background:color-mix(in srgb,var(--c,var(--fx-orange)) 22%,transparent);color:var(--c,var(--fx-orange));}
.svuFxCol__ico svg{width:55%;height:55%;}
.svuFxCol__t{font-size:clamp(13px,1.95vh,21px);font-weight:900;}
.svuFxCol__s{font-size:clamp(9.5px,1.25vh,12.5px);color:var(--fx-faint);font-weight:700;margin-top:2px;}
.svuFxCol__b{padding:clamp(10px,1.5vh,20px) clamp(12px,1.4vw,22px);display:flex;flex-direction:column;gap:clamp(6px,.95vh,13px);}
.svuFxCol__li{display:flex;gap:10px;align-items:flex-start;font-size:clamp(11px,1.5vh,15px);line-height:1.45;color:var(--fx-muted);}
.svuFxCol__li b{color:var(--fx-ink);font-weight:800;}
.svuFxCol__dot{width:6px;height:6px;border-radius:50%;background:var(--c,var(--fx-orange));flex:0 0 auto;margin-top:.5em;}
.svuFxCol__li svg{width:clamp(14px,1.9vh,18px);height:clamp(14px,1.9vh,18px);flex:0 0 auto;margin-top:.1em;color:var(--c,var(--fx-orange));}

/* ═══ 14. COMPARISON TABLE ═════════════════════════════════════════════════ */

.svuFxTable{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;border-radius:var(--fx-r);
  border:1px solid var(--fx-line);}
.svuFxTable th,.svuFxTable td{padding:clamp(9px,1.5vh,20px) clamp(10px,1.3vw,22px);text-align:left;vertical-align:middle;}
.svuFxTable thead th{background:var(--fx-bg2);font-size:clamp(9.5px,1.3vh,12.5px);font-weight:900;letter-spacing:.11em;
  text-transform:uppercase;color:var(--fx-faint);border-bottom:1px solid var(--fx-line);}
.svuFxTable thead th.hl{color:var(--fx-orange);}
/* product-shot row above the column headings — no bottom rule, so the image and
   its label read as one heading rather than two stacked header rows.
   The shot box is a FIXED height and the img fills it with object-fit:contain,
   which both centres each product over its own column and stops a tall render
   from spilling down over the table body — max-height alone did not, because a
   percentage max on a shrink-to-fit box resolves against the content, not the
   cell. */
.svuFxTable__imgs th{padding:clamp(10px,1.7vh,22px) clamp(10px,1.3vw,22px) 0;
  border-bottom:0;background:var(--fx-bg2);vertical-align:bottom;}
.svuFxTable__imgs th.im{text-align:center;}
.svuFxTable__im{display:block;height:clamp(54px,10vh,118px);overflow:hidden;}
.svuFxTable__im img{height:100%;width:100%;object-fit:contain;object-position:center bottom;
  display:block;filter:drop-shadow(0 10px 22px rgba(0,0,0,.5));}
.svuFxTable tbody tr{transition:background .35s;}
.svuFxTable tbody tr:hover{background:var(--fx-card);}
.svuFxTable tbody td{border-bottom:1px solid var(--fx-line);font-size:clamp(11px,1.5vh,15.5px);color:var(--fx-muted);line-height:1.45;}
.svuFxTable tbody tr:last-child td{border-bottom:0;}
.svuFxTable td.rh{font-weight:900;color:var(--fx-ink);font-size:clamp(11.5px,1.6vh,17px);width:16%;}
.svuFxTable td.hl{color:var(--fx-ink);font-weight:800;background:color-mix(in srgb,var(--fx-orange) 7%,transparent);position:relative;}
.svuFxTable td.hl::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--fx-orange);
  transform:scaleY(0);transform-origin:50% 0;transition:transform .7s var(--fx-ease);}
.svuPresVisible .svuFxTable td.hl::before,.svuFx--embed .svuFxTable td.hl::before{transform:scaleY(1);}
.svuFxTable__wrap{overflow-x:auto;}

/* ═══ 15. QUOTE ════════════════════════════════════════════════════════════ */

.svuFxQuote{position:relative;padding:clamp(14px,2.4vh,34px) clamp(16px,2.4vw,44px);border-radius:var(--fx-r);
  background:var(--fx-card);border:1px solid var(--fx-line);border-left:3px solid var(--fx-orange);}
.svuFxQuote__m{font-size:clamp(14px,2.5vh,29px);font-weight:700;line-height:1.42;font-style:italic;}
.svuFxQuote__m b{color:var(--fx-orange);font-style:normal;}
.svuFxQuote__c{margin-top:clamp(7px,1.1vh,14px);font-size:clamp(10.5px,1.4vh,13.5px);font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:var(--fx-faint);}

/* ═══ 16. PILLS ════════════════════════════════════════════════════════════ */

.svuFxPills{display:flex;flex-wrap:wrap;gap:clamp(7px,.85vw,14px);}
.svuFxPills--c{justify-content:center;}
.svuFxPill{display:inline-flex;align-items:center;gap:8px;padding:clamp(6px,.95vh,11px) clamp(11px,1.15vw,19px);
  border-radius:99px;background:var(--fx-card);border:1px solid var(--fx-line);
  font-size:clamp(10.5px,1.45vh,14px);font-weight:800;
  transition:transform .4s var(--fx-ease),border-color .4s,background .4s;}
.svuFxPill:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--c,var(--fx-orange)) 50%,transparent);background:var(--fx-card-hi);}
.svuFxPill svg{width:clamp(14px,1.85vh,18px);height:clamp(14px,1.85vh,18px);color:var(--c,var(--fx-orange));flex:0 0 auto;}

/* Grid pills — equal-width cells instead of a ragged wrapped row. The pill
   switches to flex so it fills its cell; the icon stays pinned left and the
   label is free to wrap onto a second line. */
.svuFxPills--grid{display:grid;gap:clamp(8px,1vw,16px);}
.svuFxPills--grid .svuFxPill{display:flex;justify-content:flex-start;}

/* Large variant: for pills carrying a real claim rather than a one-word tag. */
.svuFxPills--lg{gap:clamp(9px,1.1vw,18px);}
.svuFxPills--lg .svuFxPill{padding:clamp(10px,1.5vh,18px) clamp(14px,1.5vw,26px);
  gap:clamp(9px,1vw,14px);font-size:clamp(12px,1.8vh,18.5px);font-weight:800;
  line-height:1.3;border-radius:16px;}
.svuFxPills--lg .svuFxPill svg{width:clamp(18px,2.5vh,26px);height:clamp(18px,2.5vh,26px);stroke-width:2.1;}
.svuFxPills--lg .svuFxPill:hover{transform:translateY(-4px);}

/* ═══ 17. IMAGE FRAME ══════════════════════════════════════════════════════ */

.svuFxImg{position:relative;display:flex;flex-direction:column;gap:clamp(6px,.9vh,12px);min-height:0;}
.svuFxImg__st{position:relative;border-radius:var(--fx-r);overflow:hidden;display:grid;place-items:center;min-height:0;}
/* height:auto, not 100% — the stage has no intrinsic height in a grid/flex column,
   so a percentage height can resolve to zero and swallow the image. */
.svuFxImg__st img{width:100%;height:auto;max-height:56vh;object-fit:contain;display:block;}
.svuFxImg--frame .svuFxImg__st{background:var(--fx-card);border:1px solid var(--fx-line);padding:clamp(8px,1.2vh,16px);}
.svuFxImg--shot .svuFxImg__st{background:var(--fx-bg2);border:1px solid var(--fx-line-hi);box-shadow:0 30px 70px rgba(0,0,0,.45);}
/* aspect-locked picture box — the image fills a stage of fixed ratio so a row of
   cards lines up regardless of the source dimensions */
.svuFxImg--ar .svuFxImg__st{width:100%;}
.svuFxImg--ar .svuFxImg__st img{width:100%;height:100%;max-height:none;object-fit:cover;}
.svuFxImg--ar-contain .svuFxImg__st img{object-fit:contain;padding:clamp(5px,.9vh,12px);}
.svuFxImg--float img{animation:fxFloat 7s ease-in-out infinite;}
@keyframes fxFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}
/* radial halo behind a cut-out product shot */
/* lift: give an alpha cut-out real weight — a silhouette-shaped drop shadow plus a
   soft contact shadow on the ground. Stops a flat product render looking pasted on. */
.svuFxImg--lift .svuFxImg__st{position:relative;}
.svuFxImg--lift .svuFxImg__st::before{content:"";position:absolute;left:14%;right:14%;bottom:3%;
  height:4.5%;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.6),rgba(0,0,0,0) 72%);filter:blur(7px);}
.svuFxImg--lift .svuFxImg__st img{position:relative;z-index:1;
  filter:drop-shadow(0 22px 26px rgba(0,0,0,.5)) drop-shadow(0 3px 8px rgba(0,0,0,.32));}
.svuFxImg--glow::before{content:"";position:absolute;inset:-8%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--fx-orange) 26%,transparent),transparent 72%);
  animation:fxGlowPulse 6s ease-in-out infinite;}
@keyframes fxGlowPulse{0%,100%{opacity:.6;transform:scale(1);}50%{opacity:1;transform:scale(1.08);}}
.svuFxImg__cap{font-size:clamp(9.5px,1.3vh,12.5px);color:var(--fx-faint);text-align:center;font-style:italic;}
/* ── animated solar prominences over a still hero ──────────────────────────
   A photograph can't move, so the eruption is drawn over it. Each filament is a
   thin CURVED sliver anchored on the limb — it grows out of a bright foot, arcs,
   thins to a wisp and dissipates outward. Narrow and unequal on purpose: real
   eruptions are stranded, and a cluster that pulses in unison reads as fake.
   --fa aims the whole eruption away from the star's centre. Decorative only. */

.svuFxFlare{position:absolute;width:34%;aspect-ratio:1;
  transform:translate(-50%,-50%) rotate(var(--fa,-70deg));
  pointer-events:none;z-index:1;mix-blend-mode:screen;}
/* the bright foot of the eruption, sitting on the limb */
.svuFxFlare__base{position:absolute;left:50%;bottom:0;width:30%;aspect-ratio:1;
  transform:translate(-50%,50%);border-radius:50%;
  background:radial-gradient(closest-side,
    rgba(255,246,225,.9),rgba(255,178,84,.42) 40%,rgba(253,102,0,.16) 64%,rgba(253,102,0,0) 80%);
  animation:fxFlareBase 4.1s ease-in-out infinite;}
.svuFxFlare__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.svuFxFlare__f{
  fill:rgba(255,222,170,.9);
  filter:blur(.7px) drop-shadow(0 0 5px rgba(255,150,50,.75));
  transform-box:view-box;transform-origin:100px 180px;
  opacity:0;
  animation-name:fxFlareFil;animation-timing-function:cubic-bezier(.22,.68,.3,1);
  animation-iteration-count:infinite;}
@keyframes fxFlareFil{
  0%{opacity:0;transform:scale(.3) rotate(0deg);}
  14%{opacity:var(--o,.9);}
  55%{opacity:calc(var(--o,.9) * .55);}
  100%{opacity:0;transform:scale(1.42) rotate(-3.5deg) translateY(-16px);}}
@keyframes fxFlareBase{
  0%,100%{transform:translate(-50%,50%) scale(1);opacity:.62;}
  50%{transform:translate(-50%,50%) scale(1.18);opacity:.95;}}
@media (prefers-reduced-motion:reduce){
  .svuFxFlare__base{animation:none;}
  .svuFxFlare__f{animation:none;opacity:calc(var(--o,.9) * .8);transform:scale(1.05);}}

/* beacon pulse pinned on an image */
.svuFxBeacon{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--fx-orange);
  box-shadow:0 0 16px var(--fx-orange);}
.svuFxBeacon::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--fx-orange);
  animation:fxPing 2s ease-out infinite;}

/* ═══ 17b. PHOTO GALLERY ═══════════════════════════════════════════════════
   A grid of captioned shots. Tiles share one aspect ratio and crop to fill, so
   a mix of phone photos and studio renders still reads as a single board. */

.svuFxGal{display:grid;gap:clamp(9px,1.3vw,20px);min-height:0;}
/* fit variant: rows share the leftover vertical space rather than being sized by
   --ar, so a 2-row gallery + captions + brand strip still fits one 16:9 page.
   The shell is a flex column with overflow:hidden, so without this the top of the
   grid gets clipped on a wide screen. */
.svuFxGal--fit{flex:1 1 auto;min-height:0;grid-auto-rows:minmax(0,1fr);}
.svuFxGal--fit .svuFxGal__i{min-height:0;}
.svuFxGal--fit .svuFxGal__st{aspect-ratio:auto;flex:1 1 auto;min-height:0;}
.svuFxGal--fit .svuFxGal__cap{flex:0 0 auto;}
/* contain variant: a cut-out product render, shown whole rather than cropped. */
.svuFxGal__st--contain img{object-fit:contain;padding:clamp(4px,.7vh,10px);}
.svuFxGal__i{margin:0;display:flex;flex-direction:column;gap:clamp(5px,.7vh,9px);min-width:0;}
.svuFxGal__st{position:relative;aspect-ratio:var(--ar,4/3);border-radius:var(--fx-r);overflow:hidden;
  background:var(--fx-bg2);border:1px solid var(--fx-line-hi);
  box-shadow:0 18px 44px rgba(0,0,0,.4);transition:transform .45s var(--fx-ease),box-shadow .45s var(--fx-ease);}
.svuFxGal__st img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--fx-ease);}
.svuFxGal__i:hover .svuFxGal__st{transform:translateY(-5px);box-shadow:0 26px 60px rgba(0,0,0,.55);}
.svuFxGal__i:hover .svuFxGal__st img{transform:scale(1.05);}
/* the accent hairline picks up the tile's own --c when one is set */
.svuFxGal__st::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--c,var(--fx-orange));opacity:.9;}
.svuFxGal__cap{display:flex;flex-direction:column;gap:2px;min-width:0;}
.svuFxGal__tag{font-size:clamp(8.5px,1.12vh,11px);font-weight:900;letter-spacing:.13em;
  text-transform:uppercase;color:var(--c,var(--fx-orange));}
.svuFxGal__cap>span:not(.svuFxGal__tag){font-size:clamp(9.5px,1.3vh,12.5px);color:var(--fx-faint);line-height:1.4;}
.svuFxGal__foot{grid-column:1/-1;margin-top:2px;}

/* ═══ 17c. BRAND WALL ══════════════════════════════════════════════════════
   Partner logos arrive as dark-ink artwork on white. Rather than ask for a
   re-cut of every file, each logo sits on its own light chip. */

.svuFxBrands{display:flex;flex-direction:column;gap:clamp(6px,.9vh,11px);}
.svuFxBrands__l{font-size:clamp(8.5px,1.12vh,11px);font-weight:900;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fx-faint);}
.svuFxBrands__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:clamp(6px,.75vw,12px);}
.svuFxBrands__c{display:grid;place-items:center;padding:clamp(5px,.75vh,10px) clamp(9px,1vw,16px);
  border-radius:10px;background:#fff;border:1px solid rgba(255,255,255,.16);
  box-shadow:0 6px 18px rgba(0,0,0,.3);transition:transform .35s var(--fx-ease);}
.svuFxBrands__c:hover{transform:translateY(-3px);}
.svuFxBrands__c img{max-height:clamp(15px,2.3vh,26px);width:auto;max-width:clamp(78px,9vw,132px);
  object-fit:contain;display:block;}

/* ── flip grid: memory-game logo wall ───────────────────────────────────────
   Each card is a 3D-flip stage; the JS renderer bakes a per-instance
   @keyframes rule (unique name, computed % offsets) and staggers each card's
   animation-delay so exactly one card is face-up at any moment, in a
   shuffled round-robin. Nothing here drives that timing — the stylesheet
   only supplies the two faces and the flip geometry. */
.svuFxFlipGrid{display:grid;grid-template-columns:repeat(var(--fg-cols),1fr);
  gap:clamp(8px,1.15vw,20px);}
.svuFxFlipCard{position:relative;aspect-ratio:1.5/1;perspective:900px;}
.svuFxFlipCard__inner{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform;}
.svuFxFlipCard__face{position:absolute;inset:0;display:grid;place-items:center;
  backface-visibility:hidden;border-radius:calc(var(--fx-r) * .5);
  /* grid's automatic minimum size transfers a replaced child's intrinsic aspect
     ratio into a min-height — for a portrait logo that min can exceed the face's
     own height and win over max-height, stretching the whole card. min-height:0
     here (and on the img below) is what lets object-fit:contain actually cap it. */
  min-width:0;min-height:0;overflow:hidden;}
.svuFxFlipCard__face--front{background:linear-gradient(145deg,var(--fx-card-hi),var(--fx-card));
  border:1px solid var(--fx-line);color:var(--fx-faint);}
.svuFxFlipCard__face--front svg{width:24%;height:24%;opacity:.5;}
.svuFxFlipCard__face--back{background:#fff;border:1px solid rgba(0,0,0,.06);
  box-shadow:0 10px 26px rgba(0,0,0,.28);transform:rotateY(180deg);padding:12%;}
.svuFxFlipCard__face--back img{max-width:100%;max-height:100%;object-fit:contain;display:block;
  min-width:0;min-height:0;}

/* ═══ 18. USE-CASE LAYOUT ══════════════════════════════════════════════════ */

.svuFxUc{display:flex;flex-direction:column;gap:clamp(9px,1.35vh,20px);}
.svuFxUc__pain{display:flex;gap:clamp(9px,1.1vw,16px);align-items:flex-start;padding:clamp(10px,1.6vh,20px) clamp(12px,1.4vw,24px);
  border-radius:var(--fx-r);background:color-mix(in srgb,var(--fx-amber) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--fx-amber) 28%,transparent);}
.svuFxUc__pain svg{width:clamp(17px,2.3vh,24px);height:clamp(17px,2.3vh,24px);color:var(--fx-amber);flex:0 0 auto;margin-top:.05em;}
.svuFxUc__pk{font-size:clamp(9px,1.2vh,11.5px);font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:var(--fx-amber);}
.svuFxUc__px{margin-top:.3em;font-size:clamp(11.5px,1.6vh,16px);line-height:1.45;}
.svuFxUc__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(11px,1.5vw,26px);align-items:start;}
.svuFxUc__win{padding:clamp(12px,1.9vh,24px) clamp(13px,1.5vw,26px);border-radius:var(--fx-r);
  background:linear-gradient(160deg,color-mix(in srgb,var(--fx-orange) 17%,transparent),color-mix(in srgb,var(--fx-orange) 4%,transparent));
  border:1px solid color-mix(in srgb,var(--fx-orange) 34%,transparent);height:100%;}
.svuFxUc__wk{display:flex;align-items:center;gap:9px;font-size:clamp(9px,1.2vh,11.5px);font-weight:900;letter-spacing:.13em;
  text-transform:uppercase;color:var(--fx-orange);}
.svuFxUc__wk svg{width:clamp(17px,2.3vh,22px);height:clamp(17px,2.3vh,22px);}
.svuFxUc__wx{margin-top:.6em;font-size:clamp(11.5px,1.65vh,16.5px);line-height:1.5;font-weight:600;}
.svuFxUc__badge{position:absolute;right:clamp(22px,3.4vw,64px);top:clamp(20px,3.4vh,44px);width:clamp(44px,7vh,84px);height:clamp(44px,7vh,84px);
  border-radius:50%;display:grid;place-items:center;background:var(--fx-card);border:1px solid var(--fx-line);
  color:var(--fx-orange);z-index:2;}
.svuFxUc__badge svg{width:52%;height:52%;}

/* ═══ 19. BANNER ═══════════════════════════════════════════════════════════ */

.svuFxBanner{display:flex;align-items:center;gap:clamp(9px,1.2vw,18px);padding:clamp(9px,1.4vh,18px) clamp(12px,1.5vw,26px);
  border-radius:99px;background:var(--fx-card);border:1px solid var(--fx-line);font-size:clamp(11px,1.55vh,16px);font-weight:700;}
.svuFxBanner--hl{background:linear-gradient(90deg,color-mix(in srgb,var(--fx-orange) 20%,transparent),color-mix(in srgb,var(--fx-orange) 4%,transparent));
  border-color:color-mix(in srgb,var(--fx-orange) 38%,transparent);}
.svuFxBanner svg{width:clamp(18px,2.4vh,26px);height:clamp(18px,2.4vh,26px);color:var(--fx-orange);flex:0 0 auto;}
.svuFxBanner b{color:var(--fx-orange);}

/* ═══ 20. CTA BUTTON ═══════════════════════════════════════════════════════ */

.svuFxCta{display:inline-flex;align-items:center;gap:10px;align-self:center;
  padding:clamp(10px,1.5vh,18px) clamp(18px,2.2vw,38px);border-radius:99px;text-decoration:none;
  background:linear-gradient(135deg,var(--fx-orange),var(--fx-orange-lo));color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.5);
  font-size:clamp(12px,1.7vh,17px);font-weight:900;letter-spacing:.02em;
  box-shadow:0 14px 34px color-mix(in srgb,var(--fx-orange) 34%,transparent),inset 0 0 0 1.5px rgba(0,0,0,.18);
  transition:transform .4s var(--fx-ease),box-shadow .4s;}
.svuFxCta:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 20px 46px color-mix(in srgb,var(--fx-orange) 46%,transparent);}
.svuFxCta svg{width:1.15em;height:1.15em;}

/* ═══ 21. CONNECTIVITY GRAPHIC ═════════════════════════════════════════════ */

.svuFxSig{display:flex;align-items:center;justify-content:center;gap:clamp(14px,2.4vw,48px);padding:clamp(9px,1.6vh,22px) 0;}
.svuFxSig__node{position:relative;display:flex;flex-direction:column;align-items:center;gap:clamp(5px,.8vh,10px);}
.svuFxSig__disc{width:clamp(40px,6.4vh,76px);height:clamp(40px,6.4vh,76px);border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c,var(--fx-blue)) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--c,var(--fx-blue)) 40%,transparent);color:var(--c,var(--fx-blue));position:relative;}
.svuFxSig__disc svg{width:48%;height:48%;}
.svuFxSig__disc::after{content:"";position:absolute;inset:-6px;border-radius:50%;
  border:1.5px solid color-mix(in srgb,var(--c,var(--fx-blue)) 55%,transparent);
  animation:fxPing 2.6s ease-out infinite;animation-delay:var(--d,0s);}
.svuFxSig__l{font-size:clamp(9.5px,1.3vh,13px);font-weight:800;text-align:center;line-height:1.25;}
.svuFxSig__s{font-size:clamp(8.5px,1.1vh,11px);color:var(--fx-faint);text-align:center;}
/* hero cutout dropped into the middle of the chain — the thing the signal path
   serves. Ground rings reuse the hub's ring styling (section 22b) rather than
   growing a second copy of it. */
.svuFxSig--hero{gap:clamp(8px,1.4vw,32px);}
.svuFxSig__hero{position:relative;flex:0 0 auto;display:grid;place-items:center;
  width:clamp(140px,22vw,380px);}
.svuFxSig__hero img{position:relative;z-index:2;width:100%;height:auto;object-fit:contain;display:block;
  max-height:var(--fx-sigh,clamp(105px,26vh,300px));
  filter:drop-shadow(0 20px 40px rgba(0,0,0,.5));}
.svuFxSig__hero::after{content:"";position:absolute;z-index:0;width:82%;aspect-ratio:2.2/1;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--fx-blue) 22%,transparent),transparent 72%);
  animation:fxGlowPulse 7s ease-in-out infinite;}
/* data flowing along the link */
.svuFxSig__link{flex:1;min-width:clamp(28px,4vw,90px);height:2px;position:relative;
  background:repeating-linear-gradient(90deg,var(--fx-line-hi) 0 6px,transparent 6px 12px);background-size:12px 2px;
  animation:fxMarch2 1.1s linear infinite;}
@keyframes fxMarch2{to{background-position:12px 0;}}
.svuFxSig__link::after{content:"";position:absolute;top:-3px;width:8px;height:8px;border-radius:50%;
  background:var(--fx-cyan);box-shadow:0 0 12px var(--fx-cyan);animation:fxTravel 2.4s cubic-bezier(.5,0,.5,1) infinite;}
@keyframes fxTravel{0%{left:0;opacity:0;}12%{opacity:1;}88%{opacity:1;}100%{left:100%;opacity:0;}}

/* ═══ 22. BATTERY / POWER GRAPHIC ══════════════════════════════════════════ */

.svuFxBatt{display:flex;align-items:center;gap:clamp(11px,1.6vw,28px);padding:clamp(11px,1.8vh,24px) clamp(13px,1.6vw,28px);
  border-radius:var(--fx-r);background:var(--fx-card);border:1px solid var(--fx-line);}
.svuFxBatt__cell{position:relative;flex:1;height:clamp(34px,5.4vh,64px);border-radius:9px;border:2px solid var(--fx-line-hi);
  overflow:hidden;background:var(--fx-bg2);}
.svuFxBatt__cell::after{content:"";position:absolute;right:-7px;top:50%;transform:translateY(-50%);width:5px;height:38%;
  border-radius:0 3px 3px 0;background:var(--fx-line-hi);}
.svuFxBatt__fill{position:absolute;inset:2px;width:calc(var(--p) - 4px);border-radius:7px;
  background:linear-gradient(90deg,var(--fx-green),#86efac);
  transform:scaleX(0);transform-origin:0 50%;transition:transform 1.7s var(--fx-ease) .3s;}
.svuPresVisible .svuFxBatt__fill,.svuFx--embed .svuFxBatt__fill{transform:scaleX(1);}
/* charge pulse travelling across the cell */
.svuFxBatt__cell::before{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);width:36%;
  animation:fxCharge 3.2s ease-in-out infinite;}
@keyframes fxCharge{0%{transform:translateX(-100%);}100%{transform:translateX(320%);}}
.svuFxBatt__seg{position:absolute;inset:0;z-index:3;display:flex;}
.svuFxBatt__seg i{flex:1;border-right:1px solid rgba(10,21,36,.35);}
.svuFxBatt__seg i:last-child{border-right:0;}
.svuFxBatt__meta{flex:0 0 auto;text-align:right;}
.svuFxBatt__n{font-size:clamp(17px,3.2vh,34px);font-weight:900;color:var(--fx-green);line-height:1;letter-spacing:-.03em;}
.svuFxBatt__l{font-size:clamp(9.5px,1.25vh,12.5px);color:var(--fx-faint);font-weight:700;margin-top:3px;}
.svuFxBatt__sun{flex:0 0 auto;color:var(--fx-amber);width:clamp(26px,4vh,46px);height:clamp(26px,4vh,46px);
  animation:fxSpinSlow 22s linear infinite;}
.svuFxBatt__sun svg{width:100%;height:100%;}
@keyframes fxSpinSlow{to{transform:rotate(360deg);}}

/* ═══ 22b. HUB — central product shot with callouts radiating out ══════════ */

.svuFxHub{display:grid;grid-template-columns:1fr 1.05fr 1fr;gap:clamp(10px,1.6vw,34px);align-items:center;}
.svuFxHub__col{display:flex;flex-direction:column;gap:clamp(10px,1.8vh,26px);min-width:0;}

/* centre stage */
.svuFxHub__mid{position:relative;display:grid;place-items:center;min-width:0;}
.svuFxHub__img{position:relative;z-index:2;width:100%;height:auto;max-height:52vh;object-fit:contain;display:block;
  filter:drop-shadow(0 24px 48px rgba(0,0,0,.5));}
/* concentric ground rings, scaled in on reveal then breathing.
   Shared with the signal block's hero cutout (.svuFxSig__rings, section 21). */
.svuFxHub__rings,.svuFxSig__rings{position:absolute;inset:0;z-index:1;display:grid;place-items:center;pointer-events:none;}
.svuFxHub__rings span,.svuFxSig__rings span{position:absolute;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--fx-blue) 42%,transparent);
  transform:scale(.4);opacity:0;transition:transform 1.2s var(--fx-ease),opacity .9s ease;}
.svuFxHub__rings span:nth-child(1),.svuFxSig__rings span:nth-child(1){width:52%;aspect-ratio:2.6/1;transition-delay:.15s;}
.svuFxHub__rings span:nth-child(2),.svuFxSig__rings span:nth-child(2){width:74%;aspect-ratio:2.6/1;transition-delay:.3s;
  border-color:color-mix(in srgb,var(--fx-blue) 26%,transparent);}
.svuFxHub__rings span:nth-child(3),.svuFxSig__rings span:nth-child(3){width:96%;aspect-ratio:2.6/1;transition-delay:.45s;
  border-color:color-mix(in srgb,var(--fx-blue) 15%,transparent);}
.svuPresVisible .svuFxHub__rings span,.svuFx--embed .svuFxHub__rings span,
.svuPresVisible .svuFxSig__rings span,.svuFx--embed .svuFxSig__rings span{transform:scale(1);opacity:1;}
.svuFxHub__mid::after{content:"";position:absolute;z-index:0;width:70%;aspect-ratio:2.2/1;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--fx-blue) 22%,transparent),transparent 72%);
  animation:fxGlowPulse 7s ease-in-out infinite;}

/* callout cell */
.svuFxHubC{position:relative;display:flex;gap:clamp(9px,1.1vw,18px);align-items:flex-start;min-width:0;}
.svuFxHubC__disc{position:relative;flex:0 0 auto;width:clamp(38px,max(5.6vh,3.3vw),68px);height:clamp(38px,max(5.6vh,3.3vw),68px);
  border-radius:50%;display:grid;place-items:center;color:var(--c,var(--fx-orange));
  border:2px solid color-mix(in srgb,var(--c,var(--fx-orange)) 60%,transparent);
  background:color-mix(in srgb,var(--c,var(--fx-orange)) 10%,transparent);
  box-shadow:0 0 22px color-mix(in srgb,var(--c,var(--fx-orange)) 22%,transparent);
  transition:transform .5s var(--fx-ease),box-shadow .5s;}
.svuFxHubC__disc svg{width:52%;height:52%;}
.svuFxHubC:hover .svuFxHubC__disc{transform:scale(1.09);
  box-shadow:0 0 34px color-mix(in srgb,var(--c,var(--fx-orange)) 42%,transparent);}
.svuFxHubC__n{position:absolute;top:-6px;right:-6px;width:1.55em;height:1.55em;border-radius:50%;
  display:grid;place-items:center;font-size:clamp(9.5px,1.3vh,12.5px);font-weight:900;
  background:var(--c,var(--fx-orange));color:#0a1524;}
.svuFxHubC__body{min-width:0;}
.svuFxHubC__t{font-size:clamp(12px,max(1.7vh,1vw),19px);font-weight:900;line-height:1.2;letter-spacing:.01em;
  text-transform:uppercase;color:var(--c,var(--fx-orange));}
.svuFxHubC__lede{margin-top:.35em;font-size:clamp(12px,max(1.6vh,.94vw),17px);font-weight:800;line-height:1.3;}
.svuFxHubC__x{margin-top:.3em;font-size:clamp(11px,max(1.4vh,.82vw),14.5px);color:var(--fx-muted);line-height:1.45;}
/* connector stub toward the hub */
.svuFxHubC__wire{position:absolute;top:clamp(19px,2.8vh,34px);height:1px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--c,var(--fx-orange)) 70%,transparent),transparent);
  width:0;transition:width .9s var(--fx-ease) .35s;}
.svuFxHubC--l .svuFxHubC__wire{left:100%;}
.svuFxHubC--r .svuFxHubC__wire{right:100%;transform:scaleX(-1);}
.svuPresVisible .svuFxHubC__wire,.svuFx--embed .svuFxHubC__wire{width:clamp(10px,1.5vw,32px);}
.svuFxHubC__wire::after{content:"";position:absolute;right:-3px;top:-2.5px;width:6px;height:6px;border-radius:50%;
  background:var(--c,var(--fx-orange));box-shadow:0 0 10px var(--c,var(--fx-orange));}

/* footer strip: benefit chips + closing statement */
.svuFxHub__foot{display:grid;grid-template-columns:1fr auto;gap:clamp(12px,1.8vw,34px);align-items:center;}
.svuFxHub__bar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(8px,1vw,18px);
  padding:clamp(10px,1.5vh,20px) clamp(11px,1.3vw,22px);border-radius:var(--fx-r);
  border:1px solid color-mix(in srgb,var(--fx-orange) 26%,transparent);background:var(--fx-card);}
.svuFxHubB{display:flex;gap:clamp(7px,.85vw,13px);align-items:flex-start;min-width:0;}
.svuFxHubB__ico{flex:0 0 auto;width:clamp(20px,max(2.8vh,1.64vw),32px);height:clamp(20px,max(2.8vh,1.64vw),32px);
  color:var(--c,var(--fx-orange));}
.svuFxHubB__ico svg{width:100%;height:100%;}
.svuFxHubB__t{font-size:clamp(11px,max(1.5vh,.88vw),16px);font-weight:900;line-height:1.2;}
.svuFxHubB__x{margin-top:.25em;font-size:clamp(9.5px,max(1.25vh,.73vw),12.5px);color:var(--fx-faint);line-height:1.35;}
.svuFxHub__closer{text-align:left;font-size:clamp(13px,max(1.9vh,1.12vw),22px);font-weight:900;line-height:1.22;
  padding-left:clamp(12px,1.5vw,28px);border-left:2px solid color-mix(in srgb,var(--fx-orange) 45%,transparent);}

@media (max-width:1100px){
  .svuFxHub{grid-template-columns:1fr;}
  .svuFxHub__mid{order:-1;}
  .svuFxHubC__wire{display:none;}
  .svuFxHubC--r{flex-direction:row;}
  .svuFxHub__foot{grid-template-columns:1fr;}
  .svuFxHub__bar{grid-template-columns:repeat(2,minmax(0,1fr));}
  .svuFxHub__closer{padding-left:0;border-left:0;border-top:2px solid color-mix(in srgb,var(--fx-orange) 45%,transparent);
    padding-top:10px;}
}

/* ═══ 22c. CLOSING STRIP — the line to say out loud, plus tick chips ═══════ */

.svuFxStrip{display:flex;align-items:center;gap:clamp(11px,1.6vw,30px);flex-wrap:wrap;
  padding:clamp(10px,1.5vh,20px) clamp(13px,1.5vw,26px);border-radius:var(--fx-r);
  background:var(--fx-card);border:1px solid color-mix(in srgb,var(--c,var(--fx-orange)) 26%,transparent);}
.svuFxStrip__ico{flex:0 0 auto;display:grid;place-items:center;border-radius:50%;
  width:clamp(26px,max(3.6vh,2.1vw),44px);height:clamp(26px,max(3.6vh,2.1vw),44px);
  color:var(--c,var(--fx-orange));
  border:1.5px solid color-mix(in srgb,var(--c,var(--fx-orange)) 46%,transparent);
  background:color-mix(in srgb,var(--c,var(--fx-orange)) 12%,transparent);}
.svuFxStrip__ico svg{width:56%;height:56%;}
.svuFxStrip__t{font-size:clamp(13px,max(1.9vh,1.1vw),22px);font-weight:900;line-height:1.2;letter-spacing:-.01em;}
.svuFxStrip__chips{display:flex;align-items:center;flex-wrap:wrap;gap:clamp(8px,1.2vw,22px);margin-left:auto;}
.svuFxChip{display:inline-flex;align-items:center;gap:clamp(5px,.6vw,9px);color:var(--fx-muted);
  font-size:clamp(10.5px,max(1.35vh,.8vw),14px);font-weight:700;}
.svuFxChip+.svuFxChip{padding-left:clamp(8px,1.2vw,22px);border-left:1px solid var(--fx-line);}
.svuFxChip svg{flex:0 0 auto;color:var(--c,var(--fx-orange));
  width:clamp(13px,max(1.7vh,1vw),19px);height:clamp(13px,max(1.7vh,1vw),19px);}

/* ═══ 22d. PRODUCT SPEC COLUMNS ════════════════════════════════════════════
   Comparison laid out as columns rather than a table, so each product can name
   its own spec rows. The hairline lives on the column's left edge, so it falls
   between columns and never trails off the outside of the first or last. */

.svuFxSpecs{display:grid;gap:0;min-height:0;}
.svuFxSpecs__col{display:flex;flex-direction:column;gap:clamp(7px,1vh,14px);min-width:0;
  padding:0 clamp(10px,1.4vw,28px);}
.svuFxSpecs__col+.svuFxSpecs__col{border-left:1px solid var(--fx-line);}
.svuFxSpecs__im{height:clamp(111px,22.5vh,267px);display:block;}
.svuFxSpecs__im img{width:100%;height:100%;object-fit:contain;object-position:center bottom;display:block;
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.55));}
.svuFxSpecs__hd{display:flex;align-items:center;gap:clamp(8px,.9vw,15px);min-width:0;}
.svuFxSpecs__ico{flex:0 0 auto;display:grid;place-items:center;border-radius:50%;
  width:clamp(30px,max(4.2vh,2.4vw),52px);height:clamp(30px,max(4.2vh,2.4vw),52px);
  color:var(--c,var(--fx-orange));
  border:1.5px solid color-mix(in srgb,var(--c,var(--fx-orange)) 48%,transparent);
  background:color-mix(in srgb,var(--c,var(--fx-orange)) 11%,transparent);}
.svuFxSpecs__ico svg{width:54%;height:54%;}
.svuFxSpecs__hdt{min-width:0;}
.svuFxSpecs__n{font-size:clamp(11.5px,max(1.7vh,.95vw),19px);font-weight:900;letter-spacing:.06em;
  text-transform:uppercase;color:var(--c,var(--fx-orange));line-height:1.2;}
.svuFxSpecs__tag{margin-top:.25em;font-size:clamp(10.5px,max(1.4vh,.8vw),15px);color:var(--fx-muted);line-height:1.35;}
.svuFxSpecs__rows{display:flex;flex-direction:column;}
.svuFxSpecs__r{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.25fr);
  align-items:center;gap:clamp(7px,.8vw,14px);
  padding:clamp(5px,.85vh,12px) 0;border-bottom:1px solid var(--fx-line);}
.svuFxSpecs__r:last-child{border-bottom:0;}
.svuFxSpecs__ri{display:grid;place-items:center;color:var(--c,var(--fx-orange));}
.svuFxSpecs__ri svg{width:clamp(13px,max(1.8vh,1vw),20px);height:clamp(13px,max(1.8vh,1vw),20px);}
.svuFxSpecs__rl{font-size:clamp(10.5px,max(1.45vh,.82vw),16px);font-weight:800;color:var(--fx-ink);}
.svuFxSpecs__rv{font-size:clamp(10.5px,max(1.45vh,.82vw),16px);color:var(--fx-muted);line-height:1.35;}
.svuFxSpecs__rv.hl{color:var(--fx-orange);font-weight:800;}

/* the strip's optional middle line, between the headline and the chips */
.svuFxStrip__s{font-size:clamp(10.5px,max(1.4vh,.8vw),15px);color:var(--fx-muted);line-height:1.4;
  padding-left:clamp(11px,1.6vw,30px);border-left:1px solid var(--fx-line);}

/* ═══ 22da. PRESENTER CREDITS ══════════════════════════════════════════════ */

.svuFxPeople{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,2vw,38px);}
.svuFxPeople--c{justify-content:center;}
.svuFxPerson{display:flex;align-items:center;gap:clamp(9px,1vw,16px);min-width:0;}
.svuFxPerson__ph{width:clamp(46px,max(7vh,4vw),96px);height:clamp(46px,max(7vh,4vw),96px);
  border-radius:50%;object-fit:cover;object-position:center top;flex:0 0 auto;
  border:2px solid color-mix(in srgb,var(--c,var(--fx-orange)) 55%,transparent);
  box-shadow:0 10px 26px rgba(0,0,0,.45);
  transition:transform .4s var(--fx-ease),border-color .4s;}
.svuFxPerson:hover .svuFxPerson__ph{transform:translateY(-3px) scale(1.04);
  border-color:var(--c,var(--fx-orange));}
.svuFxPerson__b{min-width:0;}
.svuFxPerson__n{font-size:clamp(12.5px,max(1.75vh,1vw),20px);font-weight:900;line-height:1.2;letter-spacing:-.005em;}
.svuFxPerson__r{margin-top:.18em;font-size:clamp(10.5px,max(1.35vh,.78vw),15px);color:var(--fx-muted);line-height:1.3;}

/* stack — photo above, name/role centred below. Each person's footprint is then
   just the portrait's own width rather than portrait-plus-caption, so several
   large portraits sit in one row instead of wrapping to their own line. */
.svuFxPeople--stack .svuFxPerson{flex-direction:column;text-align:center;gap:clamp(8px,1vh,14px);}
.svuFxPeople--stack .svuFxPerson__b{text-align:center;}

/* lg / xl presenter credits. xl is a true 5x on the base headshot — the name and
   role scale with it, because a 300px portrait beside 14px type reads as a
   mistake rather than as emphasis. */
/* lg is exactly half of xl at every breakpoint, so "half the size" is a real
   halving rather than an eyeballed step down. */
.svuFxPeople--lg{gap:clamp(20px,2.8vw,52px);}
.svuFxPeople--lg .svuFxPerson{gap:clamp(10px,1.1vw,18px);}
.svuFxPeople--lg .svuFxPerson__ph{width:clamp(115px,max(17.5vh,10vw),240px);height:clamp(115px,max(17.5vh,10vw),240px);
  border-width:3px;box-shadow:0 14px 34px rgba(0,0,0,.5);}
.svuFxPeople--lg .svuFxPerson__n{font-size:clamp(20px,max(2.7vh,1.55vw),32px);}
.svuFxPeople--lg .svuFxPerson__r{margin-top:.26em;font-size:clamp(14px,max(1.9vh,1.1vw),22px);}

.svuFxPeople--xl{gap:clamp(26px,3.6vw,68px);}
.svuFxPeople--xl .svuFxPerson{gap:clamp(14px,1.5vw,26px);}
.svuFxPeople--xl .svuFxPerson__ph{width:clamp(230px,max(35vh,20vw),480px);height:clamp(230px,max(35vh,20vw),480px);
  border-width:4px;box-shadow:0 22px 54px rgba(0,0,0,.55);}
/* ── one-page guard ───────────────────────────────────────────────────────
   Portrait sizes are absolute vh/vw clamps, so they sit outside the fit shrink
   pass entirely — there is no flexible child for the deficit to resolve against,
   and two xl portraits stack to ~70vh before the headline is even counted. That
   is what pushed the second presenter off the cover. max-* can only ever shrink,
   so this caps a crowded block without touching a single-portrait slide or any
   block that already fits. Both axes are capped equally, so it stays a circle. */
@media (min-width:820px){
  .svuFx--fit .svuFxPeople:has(.svuFxPerson:nth-child(2)) .svuFxPerson__ph{
    max-width:18vh;max-height:18vh;}
  .svuFx--fit .svuFxPeople:has(.svuFxPerson:nth-child(3)) .svuFxPerson__ph{
    max-width:12vh;max-height:12vh;}
}
.svuFxPeople--xl .svuFxPerson__n{font-size:clamp(26px,max(3.8vh,2.2vw),44px);}
.svuFxPeople--xl .svuFxPerson__r{margin-top:.3em;font-size:clamp(18px,max(2.6vh,1.5vw),30px);}

/* ═══ 22dd. LIVE EMBED ═════════════════════════════════════════════════════ */

.svuFxEmbed{position:relative;width:100%;aspect-ratio:var(--ar,16/9);min-height:0;
  border-radius:var(--fx-r);overflow:hidden;border:1px solid var(--fx-line-hi);
  background:var(--fx-bg2);box-shadow:0 26px 60px rgba(0,0,0,.45);}
.svuFxEmbed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
  pointer-events:none;}
.svuFxEmbed__t{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.svuFxEmbed__t:checked ~ iframe{pointer-events:auto;}
/* The veil only shields the pointer — an embed may well be playing behind it,
   so it stays clear and parks its hint at the bottom instead of masking the view. */
.svuFxEmbed__veil{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;
  justify-content:center;padding-bottom:clamp(10px,1.6vh,22px);
  cursor:pointer;background:transparent;transition:opacity .35s var(--fx-ease);}
.svuFxEmbed__veil span{padding:clamp(6px,.9vh,11px) clamp(11px,1.3vw,22px);border-radius:99px;
  background:var(--fx-card);border:1px solid color-mix(in srgb,var(--fx-orange) 45%,transparent);
  color:var(--fx-ink);font-size:clamp(11px,max(1.5vh,.86vw),16px);font-weight:800;
  letter-spacing:.03em;box-shadow:0 10px 26px rgba(0,0,0,.4);}
.svuFxEmbed__t:checked ~ .svuFxEmbed__veil{opacity:0;pointer-events:none;}
.svuFx--fit .svuFxEmbed{min-height:0;}

/* ═══ 22e. ROW + PANEL — N-column layout and a bordered container ══════════ */

.svuFxRow{display:grid;gap:clamp(9px,1.2vw,22px);align-items:stretch;min-width:0;}
.svuFxRow--top{align-items:start;}
.svuFxRow__c{min-width:0;display:flex;flex-direction:column;gap:clamp(8px,1.1vh,16px);}
.svuFxRow--mid .svuFxRow__c{justify-content:center;}
.svuFxRow__c>.svuFxPanel--blk{height:100%;}
.svuFxRow__ar{display:grid;place-items:center;color:var(--c,var(--fx-orange));}
.svuFxRow__ar svg{width:clamp(16px,max(2.4vh,1.4vw),34px);height:clamp(16px,max(2.4vh,1.4vw),34px);
  animation:fxNudge 2.2s ease-in-out infinite;}
@keyframes fxNudge{0%,100%{transform:translateX(-3px);}50%{transform:translateX(3px);}}

/* panel as a block container (the boxed-list panel is styled in 11b) */
.svuFxPanel--blk{gap:clamp(8px,1.2vh,18px);}
.svuFxPanel__l--c{text-align:center;}

/* centred card variant — icon over text, divided rather than boxed */
.svuFxCards--c .svuFxCard{text-align:center;background:transparent;border:0;padding:clamp(6px,1vh,14px) clamp(8px,.9vw,16px);}
.svuFxCards--c .svuFxCard:hover{transform:none;background:transparent;box-shadow:none;}
.svuFxCards--c .svuFxCard+.svuFxCard{border-left:1px solid var(--fx-line);}
.svuFxCards--c .svuFxCard__ico{margin:0 auto clamp(5px,.8vh,11px);background:transparent;
  width:clamp(24px,3.4vh,40px);height:clamp(24px,3.4vh,40px);}
.svuFxCards--c .svuFxCard__ico svg{width:100%;height:100%;}
.svuFxCards--c .svuFxCard__t{font-size:clamp(11px,max(1.55vh,.85vw),17px);}
.svuFxCards--c .svuFxCard__x{font-size:clamp(9.5px,max(1.3vh,.72vw),14px);}

/* ═══ 22f. DENSE SLIDES ════════════════════════════════════════════════════
   The slide clips (overflow:hidden), so a layout with three stacked bands can
   push its last band off the bottom. `density:"tight"` shrinks the gaps, the
   panel padding and the list rhythm — the levers that actually cost height —
   rather than scaling type down until it can't be read from the back. */

.svuFx--dense{--fx-gap:clamp(7px,1.15vh,17px);
  padding:clamp(13px,2.2vh,30px) clamp(18px,2.7vw,50px);}
.svuFx--dense .svuFxH1--sm{font-size:clamp(20px,max(3.3vh,1.95vw),38px);}
.svuFx--dense .svuFxSub{font-size:clamp(12px,max(1.75vh,1.02vw),19px);}
.svuFx--dense .svuFxRow{gap:clamp(7px,.95vw,17px);}
.svuFx--dense .svuFxPanel{padding:clamp(8px,1.25vh,17px) clamp(9px,1vw,17px);gap:clamp(5px,.8vh,11px);}
.svuFx--dense .svuFxList{gap:0;}
.svuFx--dense .svuFxLi{padding:clamp(4px,.62vh,9px) 0;gap:clamp(8px,.95vw,14px);}
.svuFx--dense .svuFxLi__ico{width:clamp(22px,3vh,32px);height:clamp(22px,3vh,32px);border-radius:9px;}
.svuFx--dense .svuFxCards--c .svuFxCard{padding:clamp(4px,.7vh,10px) clamp(6px,.8vw,14px);}
.svuFx--dense .svuFxCards--c .svuFxCard__ico{width:clamp(20px,2.8vh,32px);height:clamp(20px,2.8vh,32px);
  margin-bottom:clamp(3px,.5vh,7px);}
/* a short list in a stretched panel spreads instead of stranding empty space */
.svuFx--dense .svuFxPanel--blk>.svuFxList{flex:1;justify-content:space-evenly;}

/* ═══ 22g. PANEL / ROW INTERACTION ═════════════════════════════════════════ */

.svuFxPanel--blk{transition:transform .45s var(--fx-ease),border-color .45s,box-shadow .45s,background .45s;}
.svuFxPanel--blk:hover{transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--c,var(--fx-orange)) 60%,transparent);
  box-shadow:0 22px 54px rgba(0,0,0,.4);}
/* rows inside a panel pick out under the pointer, so a presenter can park on one */
.svuFxPanel--blk .svuFxLi{border-radius:9px;padding-left:clamp(5px,.5vw,9px);padding-right:clamp(5px,.5vw,9px);
  transition:background .3s,transform .3s var(--fx-ease);}
.svuFxPanel--blk .svuFxLi:hover{background:color-mix(in srgb,var(--c,var(--fx-blue)) 11%,transparent);
  transform:translateX(3px);}
.svuFxPanel--blk .svuFxLi__ico{transition:transform .35s var(--fx-ease),box-shadow .35s;}
.svuFxPanel--blk .svuFxLi:hover .svuFxLi__ico{transform:scale(1.09);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--c,var(--fx-blue)) 14%,transparent);}
/* the platform mark breathes so the middle panel isn't visually inert */
.svuFxPanel--blk .svuFxLogos img{animation:fxBreathe 5.5s ease-in-out infinite;}
@keyframes fxBreathe{0%,100%{opacity:.86;transform:scale(1);}50%{opacity:1;transform:scale(1.035);}}

/* ═══ 23. SPLIT LAYOUT (recursive) ═════════════════════════════════════════ */

.svuFxSplit{display:grid;gap:clamp(13px,2vw,44px);align-items:center;}
.svuFxSplit>div{display:flex;flex-direction:column;gap:var(--fx-gap);min-width:0;}
.svuFxSplit--top{align-items:start;}

/* ═══ 24. AGENDA GRID ══════════════════════════════════════════════════════ */

.svuFxAgenda{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(7px,1.1vh,16px) clamp(16px,2.4vw,56px);}
.svuFxAg{position:relative;display:flex;align-items:center;gap:clamp(12px,1.4vw,22px);
  padding:clamp(10px,max(1.5vh,.85vw),20px) clamp(10px,1vw,18px);
  border-bottom:1px solid var(--fx-line);border-radius:12px 12px 0 0;overflow:hidden;
  /* reset for the <button> variant so a clickable row looks identical to a static one */
  width:100%;text-align:left;background:transparent;font:inherit;color:inherit;
  transition:transform .45s var(--fx-ease),border-color .45s,background .45s;}
.svuFxAg--go{cursor:pointer;-webkit-appearance:none;appearance:none;border-top:0;border-left:0;border-right:0;}
.svuFxAg:hover,.svuFxAg--go:focus-visible{transform:translateX(9px);border-color:var(--fx-orange);background:var(--fx-card);}
.svuFxAg--go:focus-visible{outline:2px solid var(--fx-orange);outline-offset:2px;}
/* accent rail that draws in under each row on reveal */
.svuFxAg::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--fx-orange);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .9s var(--fx-ease);}
.svuPresVisible.svuFxAg::after,.svuFx--embed .svuFxAg::after{transform:scaleX(.22);}
.svuFxAg:hover::after,.svuFxAg--go:focus-visible::after{transform:scaleX(1);}
/* sheen sweep on hover */
.svuFxAg::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--fx-orange) 13%,transparent),transparent);
  transform:translateX(-100%);transition:transform .85s var(--fx-ease);}
.svuFxAg:hover::before{transform:translateX(100%);}

.svuFxAg__n{font-size:clamp(18px,max(2.6vh,1.52vw),32px);font-weight:900;color:var(--fx-orange);opacity:.42;
  font-variant-numeric:tabular-nums;flex:0 0 auto;min-width:1.9em;line-height:1;
  transition:opacity .4s,transform .5s var(--fx-ease),text-shadow .4s;}
.svuFxAg:hover .svuFxAg__n{opacity:1;transform:scale(1.14);text-shadow:0 0 22px color-mix(in srgb,var(--fx-orange) 65%,transparent);}
.svuFxAg__t{font-size:clamp(14px,max(2vh,1.17vw),23px);font-weight:800;line-height:1.28;min-width:0;
  transition:color .4s;}
.svuFxAg__ico{width:clamp(30px,max(4vh,2.34vw),46px);height:clamp(30px,max(4vh,2.34vw),46px);
  border-radius:12px;flex:0 0 auto;display:grid;place-items:center;
  background:var(--fx-card);border:1px solid var(--fx-line);color:var(--fx-blue);
  transition:transform .5s var(--fx-ease),background .45s,border-color .45s,color .45s,box-shadow .45s;}
.svuFxAg__ico svg{width:56%;height:56%;}
/* size:"lg" / "xl" — an agenda with few stops can carry much larger type. The
   number and icon scale with the label so the row stays in proportion. */
.svuFxAgenda--lg .svuFxAg__t{font-size:clamp(19px,max(2.8vh,1.64vw),32px);}
.svuFxAgenda--lg .svuFxAg__n{font-size:clamp(24px,max(3.5vh,2.05vw),43px);}
.svuFxAgenda--lg .svuFxAg__ico{width:clamp(38px,max(5vh,2.93vw),58px);height:clamp(38px,max(5vh,2.93vw),58px);}
/* xl sits a clear step under .svuFxH1 (max 64px) so the stops read as the
   header's supporting text, not as a second headline. */
.svuFxAgenda--xl .svuFxAg__t{font-size:clamp(21px,max(3.4vh,1.99vw),40px);}
.svuFxAgenda--xl .svuFxAg__n{font-size:clamp(26px,max(4.4vh,2.58vw),54px);}
.svuFxAgenda--xl .svuFxAg__ico{width:clamp(40px,max(6.8vh,3.98vw),78px);height:clamp(40px,max(6.8vh,3.98vw),78px);}
.svuFxAgenda--xl .svuFxAg{gap:clamp(16px,1.9vw,30px);padding-top:clamp(8px,1.2vh,18px);
  padding-bottom:clamp(8px,1.2vh,18px);}
.svuFxAg:hover .svuFxAg__ico{transform:translateY(-3px) rotate(-7deg) scale(1.1);
  background:color-mix(in srgb,var(--fx-orange) 18%,transparent);
  border-color:color-mix(in srgb,var(--fx-orange) 45%,transparent);color:var(--fx-orange);
  box-shadow:0 10px 26px color-mix(in srgb,var(--fx-orange) 26%,transparent);}
/* chevron that slides out on a clickable row */
.svuFxAg__go{margin-left:auto;flex:0 0 auto;width:clamp(16px,max(2.1vh,1.23vw),24px);height:clamp(16px,max(2.1vh,1.23vw),24px);
  color:var(--fx-orange);opacity:0;transform:translateX(-10px);
  transition:opacity .4s,transform .5s var(--fx-ease);}
.svuFxAg__go svg{width:100%;height:100%;}
.svuFxAg:hover .svuFxAg__go,.svuFxAg--go:focus-visible .svuFxAg__go{opacity:1;transform:none;}

/* ═══ 24b. WIDTH-AWARE TYPE SCALE ══════════════════════════════════════════
   The scale above is expressed in vh, which is right for a 16:9 slide but wrong
   for a wide, short browser window: at ~570px of viewport height every clamp()
   pins to its minimum and the whole deck renders at caption size regardless of
   how much horizontal room there is.

   Fix: drive type off whichever axis has more room — max(Xvh, Yvw). On a 16:9
   viewport the vh term still wins, so a projected slide is unchanged; in a short
   wide window the vw term takes over and text stays readable. Declared here as a
   later override so the original rules stay legible as the base scale. */

.svuFx{--fx-h:max(1vh,.58vw);}   /* one "scale unit" — the taller of the two axes */

.svuFxKicker{font-size:clamp(11px,max(1.4vh,.82vw),15px);}
.svuFxH1{font-size:clamp(30px,max(5.4vh,3.15vw),64px);}
.svuFxH1--xl{font-size:clamp(36px,max(7.4vh,4.3vw),92px);}
.svuFxH1--sm{font-size:clamp(23px,max(3.9vh,2.28vw),44px);}
.svuFxSub{font-size:clamp(14px,max(2.1vh,1.22vw),24px);}
.svuFxLede{font-size:clamp(14px,max(1.9vh,1.1vw),20px);}
.svuFxNote{font-size:clamp(11px,max(1.35vh,.79vw),13.5px);}
.svuFxKpi__v{font-size:clamp(26px,max(4.8vh,2.8vw),56px);}
.svuFxKpi__l{font-size:clamp(12px,max(1.55vh,.9vw),16px);}
.svuFxKpi__s{font-size:clamp(10.5px,max(1.3vh,.76vw),13px);}
.svuFxCard__t{font-size:clamp(14px,max(1.95vh,1.14vw),21px);}
.svuFxCard__x{font-size:clamp(12px,max(1.5vh,.88vw),15px);}
.svuFxCard__pts li{font-size:clamp(12px,max(1.5vh,.88vw),15.5px);}
.svuFxSig__l{font-size:clamp(10px,max(1.3vh,.76vw),14px);}
.svuFxSig__s{font-size:clamp(9px,max(1.1vh,.65vw),12px);}
.svuFxLi__t{font-size:clamp(13.5px,max(1.8vh,1.05vw),19px);}
.svuFxLi__x{font-size:clamp(12px,max(1.45vh,.85vw),15px);}
.svuFxStep__t{font-size:clamp(13px,max(1.75vh,1.02vw),18px);}
.svuFxStep__x{font-size:clamp(11.5px,max(1.4vh,.82vw),14px);}
.svuFxCol__t{font-size:clamp(14px,max(1.95vh,1.14vw),22px);}
.svuFxCol__li{font-size:clamp(12.5px,max(1.5vh,.88vw),16px);}
.svuFxRing__n{font-size:clamp(19px,max(3.3vh,1.93vw),38px);}
.svuFxRing__l{font-size:clamp(12px,max(1.55vh,.9vw),16px);}
.svuFxRing__s{font-size:clamp(10.5px,max(1.3vh,.76vw),13px);}
.svuFxQuote__m{font-size:clamp(16px,max(2.5vh,1.46vw),30px);}
.svuFxBar__l{font-size:clamp(12px,max(1.55vh,.9vw),16px);}
.svuFxBar__v{font-size:clamp(13px,max(1.85vh,1.08vw),20px);}
.svuFxTable tbody td{font-size:clamp(12px,max(1.5vh,.88vw),16px);}
.svuFxTable td.rh{font-size:clamp(12.5px,max(1.6vh,.94vw),18px);}
.svuFxBanner{font-size:clamp(12px,max(1.55vh,.9vw),17px);}
.svuFxUc__px{font-size:clamp(12.5px,max(1.6vh,.94vw),17px);}
.svuFxUc__wx{font-size:clamp(12.5px,max(1.65vh,.96vw),17.5px);}
.svuFxPill{font-size:clamp(11.5px,max(1.45vh,.85vw),15px);}
.svuFxPills--lg .svuFxPill{font-size:clamp(13px,max(1.8vh,1.05vw),19.5px);}

/* ═══ 25. SLIDE FOOTER ═════════════════════════════════════════════════════ */

.svuFxFoot{position:absolute;left:0;right:0;bottom:0;max-width:none;margin:0;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:clamp(9px,1.2vh,16px) clamp(22px,3.4vw,64px);
  /* No text-transform: the footer carries the brand name, and "Sharpvue" must not
     be shouted into "SHARPVUE" by CSS. Tracking alone carries the label look. */
  font-size:clamp(9px,1.2vh,12px);font-weight:700;letter-spacing:.09em;
  color:var(--fx-faint);z-index:3;pointer-events:none;}
.svuFxFoot__r{display:flex;align-items:center;gap:12px;}
.svuFxFoot img{height:clamp(13px,1.9vh,20px);width:auto;opacity:.75;}

/* ═══ 26. GRID COLUMN HELPERS ══════════════════════════════════════════════ */

.svuFx--c1{grid-template-columns:1fr;}
.svuFx--c2{grid-template-columns:repeat(2,minmax(0,1fr));}
.svuFx--c3{grid-template-columns:repeat(3,minmax(0,1fr));}
.svuFx--c4{grid-template-columns:repeat(4,minmax(0,1fr));}
.svuFx--c5{grid-template-columns:repeat(5,minmax(0,1fr));}
.svuFx--c6{grid-template-columns:repeat(6,minmax(0,1fr));}

/* ═══ 27. RESPONSIVE ═══════════════════════════════════════════════════════ */

@media (max-width:900px){
  .svuFx{padding:clamp(18px,3vh,32px) 18px;}
  .svuFx--c3,.svuFx--c4,.svuFx--c5,.svuFx--c6{grid-template-columns:repeat(2,minmax(0,1fr));}
  .svuFxSplit{grid-template-columns:1fr !important;}
  .svuFxTwo{grid-template-columns:1fr;}
  .svuFxAgenda{grid-template-columns:1fr;}
  .svuFxUc__grid{grid-template-columns:1fr;}
  .svuFxStep__link{display:none;}
  .svuFxSpec{flex-direction:column;}
  .svuFxSpec__i+.svuFxSpec__i{border-left:0;border-top:1px solid var(--fx-line);}
  .svuFxSpec__ar{transform:rotate(90deg);padding:4px 0;}
  .svuFxBar{grid-template-columns:1fr;gap:4px;}
  .svuFxSig{flex-wrap:wrap;}
  .svuFxSig__hero{order:-1;width:min(100%,300px);margin:0 auto;}
  .svuFxSig--hero .svuFxSig__link{display:none;}
  .svuFxStrip__chips{margin-left:0;}
  .svuFxUc__badge{display:none;}
  /* Blocks added since this section was written set grid-template-columns as an
     inline style, so a plain rule here loses to it — these need !important to
     stack at all. Without this the whole deck stayed multi-column on a phone. */
  .svuFxRow{grid-template-columns:1fr !important;gap:clamp(10px,2.4vh,20px);}
  .svuFxRow__ar{display:none;}
  .svuFxRow--mid .svuFxRow__c{justify-content:flex-start;}
  .svuFxSpecs__col+.svuFxSpecs__col{border-left:0;border-top:1px solid var(--fx-line);
    padding-top:clamp(10px,1.8vh,18px);}
  .svuFxCards--c .svuFxCard+.svuFxCard{border-left:0;border-top:1px solid var(--fx-line);}
  .svuFxEmbed{aspect-ratio:4/3;}
  .svuFxPeople{gap:clamp(12px,3vw,22px);}
  .svuFxPeople--xl .svuFxPerson__ph,.svuFxPeople--lg .svuFxPerson__ph{
    width:clamp(72px,20vw,120px);height:clamp(72px,20vw,120px);}
  .svuFxPeople--xl .svuFxPerson__n,.svuFxPeople--lg .svuFxPerson__n{font-size:clamp(15px,4.2vw,20px);}
  .svuFxPeople--xl .svuFxPerson__r,.svuFxPeople--lg .svuFxPerson__r{font-size:clamp(12px,3.3vw,15px);}
  .svuFxFlare{display:none;}                 /* decorative, and costly on a phone */
  .svuFxVs__art{display:none;}
  .svuFxPanel{padding:clamp(10px,1.8vh,16px) clamp(11px,3.2vw,16px);}
}
@media (max-width:560px){
  .svuFx--c2,.svuFx--c3,.svuFx--c4,.svuFx--c5,.svuFx--c6{grid-template-columns:1fr;}
  .svuFxTable__imgs{display:none;}           /* the table already scrolls; drop the shots */
  .svuFxAgenda--xl .svuFxAg__t{font-size:clamp(16px,4.6vw,22px);}
  .svuFxAgenda--xl .svuFxAg__ico{width:clamp(34px,9vw,44px);height:clamp(34px,9vw,44px);}
  .svuFxEmbed{aspect-ratio:3/4;}
  .svuFxRings{grid-template-columns:repeat(2,minmax(0,1fr));}
  .svuFxFoot{display:none;}
}

/* ═══ 28. EMBED MODE (admin editor preview) ════════════════════════════════
   The editor renders into a small box, not a viewport-sized section — drop the
   100vw break-out and the min-height so the preview fits its card. */

.svuFx--embed{width:100%;margin-left:0;min-height:0;border-radius:12px;
  padding:22px 20px;gap:12px;}
.svuFx--embed>*{max-width:none;}
.svuFx--embed .svuFxFoot{position:static;padding:8px 0 0;}
.svuFx--embed .svuFxBg__orbit{display:none;}

/* ═══ 29. PRINT / PDF EXPORT ═══════════════════════════════════════════════ */

/* ═══ usmap — US choropleth block ═════════════════════════════════════════
   Geometry from /js/svu-usmap.js (Albers, lower 48). States wipe in on a short
   stagger so the tiers read in sequence rather than all at once. */
.svuFxMap{display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.4vh,16px);width:100%;}
.svuFxMap__leg{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(10px,1.6vw,26px);}
.svuFxMap__key{display:inline-flex;align-items:center;gap:8px;font-weight:800;
  font-size:clamp(11px,max(1.55vh,1.05vw),20px);letter-spacing:.01em;color:var(--fx-ink);white-space:nowrap;}
.svuFxMap__key i{width:clamp(14px,1.5vw,22px);height:clamp(9px,1vw,14px);border-radius:3px;flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(0,0,0,.18),0 1px 3px rgba(0,0,0,.25);}
.svuFxMap__svg{display:block;width:100%;height:auto;max-height:62vh;overflow:visible;}
.svuFxMap__st{stroke:var(--fx-bg,#0d1b2e);stroke-width:1.6;stroke-linejoin:round;vector-effect:non-scaling-stroke;
  opacity:0;transform-origin:center;transform:scale(.965);}
.svuFxMap__lbl{fill:#fff;font-family:inherit;font-weight:800;font-size:19px;text-anchor:middle;
  paint-order:stroke;stroke:rgba(0,0,0,.42);stroke-width:3.4px;stroke-linejoin:round;
  opacity:0;pointer-events:none;}
.svuFxMap__lbl--out{text-anchor:start;stroke-width:0;fill:var(--fx-ink);}
.svuFxMap__lead{stroke:var(--fx-line-hi,rgba(255,255,255,.34));stroke-width:1.4;vector-effect:non-scaling-stroke;opacity:0;}
.svuFxMap__note{max-width:74ch;text-align:center;color:var(--fx-dim);line-height:1.5;
  font-size:clamp(10px,max(1.35vh,.85vw),15px);}
/* light tone: dark outlines + dark labels read better on a pale ground */
.svuFx--light .svuFxMap__st{stroke:#fff;}
.svuFx--light .svuFxMap__lbl{fill:#fff;stroke:rgba(0,0,0,.3);}
.svuFx--light .svuFxMap__lbl--out{fill:#12233d;}
/* fallback when the geometry asset is absent */
.svuFxMap__fbWrap{display:flex;flex-direction:column;gap:10px;width:100%;max-width:70ch;}
.svuFxMap__fb{display:flex;flex-direction:column;gap:3px;padding:10px 14px;border-radius:10px;
  background:var(--fx-card);border:1px solid var(--fx-line);}
.svuFxMap__fb b{font-size:clamp(11px,1.5vh,15px);letter-spacing:.04em;text-transform:uppercase;}
.svuFxMap__fb span{font-size:clamp(11px,1.5vh,15px);color:var(--fx-dim);line-height:1.5;}

.svuPresVisible .svuFxMap__st,.svuFx--embed .svuFxMap__st{
  animation:svuFxMapIn .5s cubic-bezier(.22,1,.36,1) forwards;animation-delay:calc(.1s + var(--i,0) * .022s);}
.svuPresVisible .svuFxMap__lbl,.svuFx--embed .svuFxMap__lbl{
  animation:svuFxFadeIn .45s ease forwards;animation-delay:1.05s;}
.svuPresVisible .svuFxMap__lead,.svuFx--embed .svuFxMap__lead{
  animation:svuFxLeadIn .45s ease forwards;animation-delay:1.05s;}
@keyframes svuFxMapIn{to{opacity:1;transform:scale(1);}}
@keyframes svuFxFadeIn{to{opacity:1;}}
@keyframes svuFxLeadIn{to{opacity:.7;}}
@media (prefers-reduced-motion:reduce){
  .svuFxMap__st,.svuFxMap__lbl,.svuFxMap__lead{animation:none !important;opacity:1 !important;transform:none !important;}
  .svuFxMap__lead{opacity:.7 !important;}
}
@media (max-width:640px){
  .svuFxMap__lbl{font-size:26px;}
  .svuFxMap__svg{max-height:none;}
}

/* ═══ scene — full use-case slide ══════════════════════════════════════════
   headline column | hero photo with pinned callouts | why-we-win rail,
   then a fixed-vs-mobile coverage comparison, then a closing band. */
.svuFxSc{display:flex;flex-direction:column;gap:clamp(8px,1.2vh,18px);min-height:0;flex:1 1 auto;}
.svuFxSc__top{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.6fr) minmax(0,.82fr);
  gap:clamp(8px,1.1vw,20px);align-items:stretch;min-height:0;flex:1 1 auto;}
.svuFxSc__lead{display:flex;flex-direction:column;justify-content:center;gap:clamp(5px,.8vh,12px);min-width:0;}
.svuFxSc__lead .svuFxSub{max-width:34ch;}

/* hero + pins */
.svuFxSc__hero{position:relative;border-radius:var(--fx-r);overflow:hidden;min-height:0;
  border:1px solid color-mix(in srgb,var(--fx-blue) 34%,transparent);
  box-shadow:0 22px 50px rgba(0,0,0,.5);background:var(--fx-bg2);}
.svuFxSc__hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
/* anchor owns the offset; the pin itself is the animated node */
/* --tx/--ty are solved per pin from its x/y in scPins() so a callout never opens
   into a near edge. The fallbacks reproduce the old fixed anchoring. */
.svuFxSc__pinAt{position:absolute;transform:translate(var(--tx,-100%),var(--ty,-50%));z-index:2;max-width:46%;}
.svuFxSc__pinAt--r{transform:translate(var(--tx,0),var(--ty,-50%));}
.svuFxSc__pin{display:flex;align-items:flex-start;gap:clamp(5px,.55vw,9px);
  max-width:clamp(169px,19vw,312px);padding:clamp(5px,.7vh,9px) clamp(6px,.65vw,11px);
  border-radius:9px;background:rgba(8,16,28,.86);backdrop-filter:blur(3px);
  border:1px solid color-mix(in srgb,var(--c,var(--fx-blue)) 42%,transparent);
  box-shadow:0 6px 18px rgba(0,0,0,.5);}
.svuFxSc__pinIco{flex:0 0 auto;display:grid;place-items:center;
  width:clamp(22.5px,3.03vh,37.3px);height:clamp(22.5px,3.03vh,37.3px);border-radius:6px;
  background:color-mix(in srgb,var(--c,var(--fx-blue)) 20%,transparent);color:var(--c,var(--fx-blue));}
.svuFxSc__pinIco svg{width:62%;height:62%;}
.svuFxSc__pinBody{display:flex;flex-direction:column;gap:1px;min-width:0;}
.svuFxSc__pinBody b{font-size:clamp(11.7px,max(1.61vh,0.88vw),17.55px);font-weight:900;letter-spacing:.05em;
  text-transform:uppercase;line-height:1.2;}
.svuFxSc__pinBody span{font-size:clamp(11.05px,max(1.51vh,0.83vw),16.25px);color:var(--fx-muted);line-height:1.3;}
/* a callout on a plain hero image is a headline label, not scene annotation —
   it carries no supporting line, so it has to read on its own from the back */
.svuFxImg .svuFxSc__pinBody b{font-size:clamp(15px,max(2.2vh,1.25vw),26px);letter-spacing:.06em;}
.svuFxImg .svuFxSc__pin{padding:clamp(9px,1.4vh,17px) clamp(12px,1.3vw,22px);}
.svuFxImg .svuFxSc__pinIco{width:clamp(30px,max(4vh,2.3vw),46px);height:clamp(30px,max(4vh,2.3vw),46px);}

/* why-we-win rail */
.svuFxSc__wins{display:flex;flex-direction:column;gap:clamp(5px,.8vh,12px);min-width:0;min-height:0;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--fx-orange) 34%,transparent);border-radius:var(--fx-r);
  padding:clamp(8px,1.15vh,16px) clamp(8px,.9vw,15px);background:var(--fx-card);}
.svuFxSc__winsH{display:flex;align-items:center;gap:8px;padding-bottom:clamp(5px,.8vh,11px);
  border-bottom:1px solid var(--fx-line);}
.svuFxSc__winsH span{display:grid;place-items:center;width:clamp(17px,2.3vh,27px);height:clamp(17px,2.3vh,27px);
  color:var(--fx-orange);}
.svuFxSc__winsH span svg{width:100%;height:100%;}
.svuFxSc__winsH b{font-size:clamp(16.9px,max(2.47vh,1.38vw),29.9px);font-weight:900;letter-spacing:-.01em;}
.svuFxSc__win{display:flex;align-items:flex-start;gap:clamp(6px,.7vw,12px);min-width:0;}
.svuFxSc__win+.svuFxSc__win{padding-top:clamp(5px,.8vh,11px);border-top:1px solid var(--fx-line);}
.svuFxSc__winIco{flex:0 0 auto;display:grid;place-items:center;
  width:clamp(27.7px,3.81vh,46.8px);height:clamp(27.7px,3.81vh,46.8px);border-radius:50%;
  background:color-mix(in srgb,var(--c,var(--fx-orange)) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--c,var(--fx-orange)) 40%,transparent);color:var(--c,var(--fx-orange));}
.svuFxSc__winIco svg{width:56%;height:56%;}
.svuFxSc__winBody{display:flex;flex-direction:column;gap:1px;min-width:0;}
.svuFxSc__winBody b{font-size:clamp(14.95px,max(2.08vh,1.17vw),23.4px);font-weight:900;line-height:1.22;}
.svuFxSc__winBody span{font-size:clamp(13px,max(1.82vh,1.03vw),20.15px);color:var(--fx-muted);line-height:1.3;}

/* fixed-vs-mobile comparison */
.svuFxSc__cmp{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(8px,1vw,18px);border:1px solid var(--fx-line);border-radius:var(--fx-r);
  padding:clamp(7px,1vh,15px);background:var(--fx-card);flex:0 0 auto;}
.svuFxSc__vs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  display:grid;place-items:center;width:clamp(32px,4.6vh,55px);height:clamp(32px,4.6vh,55px);border-radius:50%;
  background:var(--fx-bg);border:2px solid color-mix(in srgb,var(--fx-blue) 60%,transparent);
  color:var(--fx-blue);font-size:clamp(12.1px,1.65vh,18.2px);font-weight:900;letter-spacing:.02em;}
.svuFxSc__cs{display:flex;flex-direction:column;gap:clamp(5px,.7vh,10px);min-width:0;}
.svuFxSc__csT{font-size:clamp(13.65px,max(1.92vh,1.07vw),21.45px);font-weight:900;letter-spacing:.1em;
  text-transform:uppercase;text-align:center;}
.svuFxSc__cs--bad .svuFxSc__csT{color:var(--fx-muted);}
.svuFxSc__cs--good .svuFxSc__csT{color:var(--fx-blue);}
.svuFxSc__csBody{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
  gap:clamp(7px,.8vw,14px);align-items:center;min-width:0;}
.svuFxSc__csImg{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;
  border:1px solid var(--fx-line);background:var(--fx-bg2);}
.svuFxSc__csImg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.svuFxSc__ov{position:absolute;inset:0;width:100%;height:100%;}
.svuFxSc__csList{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  gap:clamp(3px,.5vh,8px);min-width:0;}
.svuFxSc__csList li{display:flex;align-items:flex-start;gap:clamp(7px,.7vw,13px);
  font-size:clamp(13px,max(1.85vh,1.04vw),20.8px);line-height:1.28;}
.svuFxSc__csList svg{flex:0 0 auto;width:clamp(15.6px,2.17vh,24.3px);height:clamp(15.6px,2.17vh,24.3px);margin-top:.1em;}
.svuFxSc__cs--bad .svuFxSc__csList svg{color:var(--fx-red);}
.svuFxSc__cs--bad .svuFxSc__csList li{color:var(--fx-muted);}
.svuFxSc__cs--good .svuFxSc__csList svg{color:var(--fx-blue);}

/* closing band */
.svuFxSc__band{display:flex;align-items:center;gap:clamp(9px,1.1vw,20px);flex:0 0 auto;
  border:1px solid color-mix(in srgb,var(--fx-orange) 46%,transparent);border-radius:var(--fx-r);
  padding:clamp(7px,1.1vh,16px) clamp(11px,1.3vw,24px);
  background:linear-gradient(100deg,color-mix(in srgb,var(--fx-orange) 12%,transparent),transparent 70%);}
.svuFxSc__bandIco{flex:0 0 auto;display:grid;place-items:center;
  width:clamp(24px,3.4vh,44px);height:clamp(24px,3.4vh,44px);border-radius:50%;
  background:color-mix(in srgb,var(--fx-orange) 16%,transparent);
  border:1.5px solid var(--fx-orange);color:var(--fx-orange);}
.svuFxSc__bandIco svg{width:56%;height:56%;}
.svuFxSc__bandT{display:flex;flex-wrap:wrap;gap:.15em .5em;align-items:baseline;min-width:0;}
.svuFxSc__bandT b{font-size:clamp(18.2px,max(3.06vh,1.66vw),39px);font-weight:900;letter-spacing:-.015em;}
.svuFxSc__bandHl{color:var(--fx-orange);}

@media (max-width:1000px){
  .svuFxSc__top{grid-template-columns:minmax(0,1fr);}
  .svuFxSc__hero{aspect-ratio:16/9;}
  .svuFxSc__pin{display:none;}
  .svuFxSc__cmp{grid-template-columns:minmax(0,1fr);}
  .svuFxSc__vs{display:none;}
  .svuFxSc__csBody{grid-template-columns:minmax(0,1fr);}
}

/* ═══ versus — head-to-head comparison ════════════════════════════════════
   Two exactly-equal halves so the header band lines up with the body; a shared
   label-column width keeps the categories in a straight line down both sides. */
.svuFxVs{position:relative;display:flex;flex-direction:column;gap:clamp(10px,1.5vh,20px);min-height:0;}
.svuFxVs--pad{padding-top:clamp(10px,2vh,28px);}

/* Trailer art bleeding off the top corners (decorative). Bound by HEIGHT, not
   width: the art hangs above the table (bottom:100%) so its height is what has
   to fit the header band, and a portrait product cut-out at a width-based size
   is roughly twice as tall as the landscape art this was written for — which
   ran it off the top of the slide. */
.svuFxVs__art{position:absolute;bottom:100%;margin-bottom:clamp(4px,.8vh,12px);
  height:clamp(84px,16vh,220px);width:auto;
  max-width:clamp(120px,15vw,290px);object-fit:contain;
  pointer-events:none;filter:drop-shadow(0 16px 22px rgba(0,0,0,.5));}
.svuFxVs__art--l{left:0;}
.svuFxVs__art--r{right:0;opacity:.85;}

/* ── table ── */
.svuFxVs__tbl{--vsLab:clamp(74px,9vw,168px);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  border:1px solid var(--fx-line);border-radius:var(--fx-r);overflow:hidden;
  background:var(--fx-card);}
.svuFxVs__hd{position:relative;display:flex;align-items:center;justify-content:center;
  padding:clamp(8px,1.35vh,17px) clamp(10px,1.2vw,20px);
  font-size:clamp(11px,max(1.6vh,.92vw),19px);font-weight:900;letter-spacing:.1em;
  text-transform:uppercase;white-space:nowrap;}
.svuFxVs__hd--ours{color:#fff;
  background:linear-gradient(100deg,color-mix(in srgb,var(--fx-orange) 46%,transparent),
                                    color-mix(in srgb,var(--fx-orange) 20%,transparent));}
.svuFxVs__hd--theirs{color:var(--fx-muted);background:rgba(255,255,255,.035);}
.svuFxVs__badge{position:absolute;right:0;top:50%;transform:translate(50%,-50%);z-index:3;
  display:grid;place-items:center;width:clamp(30px,4.4vh,52px);height:clamp(30px,4.4vh,52px);
  border-radius:50%;background:var(--fx-orange);color:#fff;letter-spacing:.02em;
  font-size:clamp(9px,1.25vh,14px);font-weight:900;
  box-shadow:0 4px 16px rgba(0,0,0,.45),0 0 0 4px var(--fx-bg);}

.svuFxVs__side{display:grid;grid-template-columns:auto var(--vsLab) minmax(0,1fr);
  align-items:center;gap:clamp(7px,.9vw,15px);
  padding:clamp(7px,1.15vh,15px) clamp(10px,1.2vw,20px);
  border-top:1px solid var(--fx-line);min-width:0;}
.svuFxVs__side--ours{border-right:1px solid var(--fx-line);
  background:linear-gradient(100deg,color-mix(in srgb,var(--fx-orange) 7%,transparent),transparent 70%);}
.svuFxVs__lab{font-size:clamp(9.5px,max(1.35vh,.78vw),15px);font-weight:900;letter-spacing:.075em;
  text-transform:uppercase;line-height:1.2;}
.svuFxVs__side--theirs .svuFxVs__lab{color:var(--fx-muted);}
.svuFxVs__txt{font-size:clamp(10px,max(1.42vh,.82vw),16px);line-height:1.35;min-width:0;}
.svuFxVs__side--theirs .svuFxVs__txt{color:var(--fx-muted);}
.svuFxVs__tick,.svuFxVs__ico{flex:0 0 auto;display:grid;place-items:center;
  width:clamp(19px,2.7vh,32px);height:clamp(19px,2.7vh,32px);border-radius:50%;}
.svuFxVs__tick{background:color-mix(in srgb,var(--fx-orange) 18%,transparent);
  border:1.5px solid var(--fx-orange);color:var(--fx-orange);}
.svuFxVs__ico{background:color-mix(in srgb,var(--fx-blue) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--fx-blue) 30%,transparent);color:var(--fx-blue);}
.svuFxVs__tick svg,.svuFxVs__ico svg{width:58%;height:58%;}

/* ── takeaway chips ── */
.svuFxVs__chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(clamp(120px,15vw,220px),1fr));
  gap:clamp(6px,.9vw,14px);border:1px solid var(--fx-line);border-radius:var(--fx-r);
  padding:clamp(8px,1.3vh,17px) clamp(9px,1.1vw,18px);background:var(--fx-card);}
.svuFxVs__chip{display:flex;align-items:flex-start;gap:clamp(7px,.8vw,13px);min-width:0;}
.svuFxVs__chip+.svuFxVs__chip{border-left:1px solid var(--fx-line);padding-left:clamp(7px,.9vw,15px);}
.svuFxVs__chipIco{flex:0 0 auto;display:grid;place-items:center;
  width:clamp(21px,3vh,36px);height:clamp(21px,3vh,36px);border-radius:9px;
  background:color-mix(in srgb,var(--c,var(--fx-orange)) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--c,var(--fx-orange)) 32%,transparent);color:var(--c,var(--fx-orange));}
.svuFxVs__chipIco svg{width:56%;height:56%;}
.svuFxVs__chipBody{display:flex;flex-direction:column;gap:1px;min-width:0;}
.svuFxVs__chipBody b{font-size:clamp(9.5px,max(1.35vh,.78vw),15px);font-weight:900;line-height:1.2;}
.svuFxVs__chipBody span{font-size:clamp(9px,max(1.22vh,.7vw),13.5px);color:var(--fx-muted);line-height:1.32;}

@media (max-width:820px){
  .svuFxVs__art{display:none;}
  .svuFxVs__tbl{grid-template-columns:minmax(0,1fr);}
  .svuFxVs__badge{display:none;}
  .svuFxVs__side--ours{border-right:0;}
  .svuFxVs__chip+.svuFxVs__chip{border-left:0;padding-left:0;}
}

/* ring — large circular outlined icon above the card title (cover-hero style).
   Deliberately transparent-centred: on a light slide a filled tile reads as a
   button, while a ring reads as a mark. */
.svuFxCards--ring .svuFxCard{background:transparent;border-color:transparent;box-shadow:none;padding-top:0;}
.svuFxCards--ring .svuFxCard:hover{transform:none;box-shadow:none;background:transparent;}
.svuFxCards--ring .svuFxCard__ico{width:clamp(46px,7vh,84px);height:clamp(46px,7vh,84px);border-radius:50%;
  background:color-mix(in srgb,var(--c,var(--fx-orange)) 10%,transparent);
  border:2.5px solid color-mix(in srgb,var(--c,var(--fx-orange)) 62%,transparent);
  color:var(--c,var(--fx-orange));margin-bottom:clamp(6px,1vh,13px);}
.svuFxCards--ring .svuFxCard__ico svg{width:50%;height:50%;}
.svuFxCards--ring .svuFxCard__t{font-size:clamp(14px,max(2vh,1.15vw),24px);font-weight:900;}
.svuFxCards--ring .svuFxCard+.svuFxCard{border-left:1px solid var(--fx-line);padding-left:clamp(11px,1.4vw,26px);}

/* h1 accent rule — short bar under a cover headline */
.svuFxH1__rule{display:block;width:clamp(46px,6vw,104px);height:4px;border-radius:3px;
  margin-top:clamp(9px,1.4vh,20px);background:var(--fx-orange);}
.svuFxH1--c .svuFxH1__rule{margin-left:auto;margin-right:auto;}
/* ═══ fit — pin a slide to exactly one page ════════════════════════════════
   The shell is min-height:100vh, which grows with its content, so a child that
   sets flex-shrink never actually shrinks: there is no deficit to resolve. Capping
   the height creates that deficit, and the flex algorithm then takes the space out
   of whichever children can give it. Text blocks keep their min-height:auto floor
   and hold their size; a gallery with .svuFxGal--fit (min-height:0) absorbs it.
   Not applied to the admin preview (already boxed) or to print. */
@media (min-width:820px){
  .svuFx--fit:not(.svuFx--embed){max-height:100vh;}
}
/* Rows and panels are shrink candidates too, so a banded slide gives up space
   from its panels rather than pushing its last band below the fold. Splits and
   lists join the shrink set — without min-height:0 a flex/grid child refuses to
   go below its content size and the deficit has nowhere to resolve, which is
   what leaves one column visibly over-stretched past the page. */
.svuFx--fit .svuFxRow{min-height:0;}
.svuFx--fit .svuFxRow__c{min-height:0;}
.svuFx--fit .svuFxPanel--blk{min-height:0;overflow:hidden;}
.svuFx--fit .svuFxSplit{min-height:0;}
.svuFx--fit .svuFxSplit>div{min-height:0;}
.svuFx--fit .svuFxList{min-height:0;}
/* Captions must not be able to grow the grid back past the cap. */
.svuFx--fit .svuFxGal__cap>span:not(.svuFxGal__tag){
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
@media print{ .svuFx--fit{max-height:none;} }

@media print{
  .svuFx{min-height:auto;page-break-after:always;color:#0d1b2e;background:#fff;}
  .svuFxBg{display:none;}
  .svuFx *{animation:none !important;transition:none !important;opacity:1 !important;transform:none !important;}
}