/* =========================================================================
   SharkPapers "Surface": 50% OFF ticker bar + popup
   Ported 1:1 from the approved prototype ("SharkPapers - Surface.html").
   Every rule below is scoped under .spx, so nothing here can restyle the site
   and the site's global rules (p, h2, a, * {font-family}) cannot restyle it.
   The two logo layers are the real logo file: img/offer-mark-ring.png and
   img/offer-mark-shark.png.
   ========================================================================= */

/* Inter 800/900 are used by the artwork; 300-700 are already in css/fonts.css */
@font-face{font-family:Inter;src:url(../fonts/Inter-ExtraBold.ttf);font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/Inter-Black.ttf);font-weight:900;font-style:normal;font-display:swap}

/* the prototype's <body>/:root settings, applied to the component only */
.spx{
  --abyss:#00132B;--deep:#00264F;--navy:#00387E;--navy-deep:#00327A;
  --cyan:#0CBBE3;--cyan-lt:#6AD6EF;--cyan-dk:#0098C5;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  line-height:1.55;-webkit-font-smoothing:antialiased;text-align:start;color-scheme:light;
  box-sizing:border-box;
}
.spx *,.spx *::before,.spx *::after{box-sizing:border-box;font-family:inherit}
/* browsers give <button> 1px 6px padding; the site resets it to 0, the prototype did not */
.spx button{padding:1px 6px}

/* ----------------------------------------------------------------- prototype rules (scoped) */
.spx .mark{--m:160px;position:relative;width:var(--m);height:var(--m);flex-shrink:0}
.spx .mark__l{position:absolute;inset:0;background-size:contain;background-repeat:no-repeat;
  background-position:center;transform-origin:50% 50%;will-change:transform,opacity}
.spx .mark__disc{position:absolute;inset:2%;border-radius:50%;z-index:0;
  background:radial-gradient(circle at 50% 38%,#FFFFFF 0%,#FDFEFF 46%,#F2FBFE 74%,#E4F7FD 100%);
  box-shadow:0 0 0 1px rgba(12,187,227,.14), 0 12px 34px rgba(0,19,43,.5);
  animation:mk-disc 3.6s cubic-bezier(.21,.72,.22,1) infinite}
.spx .mark__l{z-index:1}
.spx .mark__ring{background-image:url(../img/offer-mark-ring.png);
  animation:mk-ring 3.6s cubic-bezier(.21,.72,.22,1) infinite}
.spx .mark__shark{background-image:url(../img/offer-mark-shark.png);
  animation:mk-shark 3.6s cubic-bezier(.21,.72,.22,1) infinite}
.spx .mark__halo{position:absolute;inset:-26%;border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(circle,rgba(12,187,227,.55) 0%,rgba(12,187,227,.12) 42%,transparent 70%);
  animation:mk-halo 3.6s ease-out infinite}
.spx .mark__snap{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  border:2px solid rgba(106,214,239,.85);opacity:0;animation:mk-snap 3.6s ease-out infinite}
@keyframes mk-ring{
  0%   {opacity:0;filter:blur(5px);transform:translateY(30%) scale(.42) rotate(180deg)}
  6%   {opacity:1}
  34%  {filter:blur(1.4px)}
  44%  {filter:blur(0);transform:translateY(0) scale(1.03) rotate(0deg)}
  50%  {filter:blur(0);transform:translateY(0) scale(1) rotate(0deg)}
  95%  {opacity:1;transform:translateY(0) scale(1) rotate(0deg)}
  100% {opacity:0;transform:translateY(0) scale(1) rotate(0deg)}}
@keyframes mk-shark{
  0%   {opacity:0;filter:blur(5px);transform:translateY(30%) scale(.42) rotate(-180deg)}
  6%   {opacity:1}
  34%  {filter:blur(1.4px)}
  44%  {filter:blur(0);transform:translateY(0) scale(1.03) rotate(0deg)}
  50%  {filter:blur(0);transform:translateY(0) scale(1) rotate(0deg)}
  95%  {opacity:1;transform:translateY(0) scale(1) rotate(0deg)}
  100% {opacity:0;transform:translateY(0) scale(1) rotate(0deg)}}
@keyframes mk-disc{
  0%   {opacity:0;transform:translateY(30%) scale(.42)}
  8%   {opacity:1}
  44%  {transform:translateY(0) scale(1.03)}
  50%  {transform:translateY(0) scale(1)}
  94%  {opacity:1;transform:translateY(0) scale(1)}
  100% {opacity:0;transform:translateY(0) scale(1)}}
@keyframes mk-halo{
  0%,30%{opacity:.15;transform:scale(.55)}
  43%  {opacity:.95;transform:scale(1.04)}
  56%  {opacity:.45;transform:scale(1)}
  100% {opacity:.3;transform:scale(1)}}
@keyframes mk-snap{
  0%,40%{opacity:0;transform:scale(.9)}
  45%  {opacity:.9;transform:scale(1)}
  56%  {opacity:0;transform:scale(1.35)}
  100% {opacity:0;transform:scale(1.35)}}
.spx .fin{position:relative;overflow:hidden;height:58px;display:flex;align-items:center;
  padding:0 0 0 16px;color:#fff;
  background:linear-gradient(176deg,#013C77 0%,#00264F 42%,#00132B 100%);
  border-bottom:1px solid rgba(12,187,227,.5)}
.spx .fin::before{content:"";position:absolute;inset:-60% -30%;pointer-events:none;opacity:.55;
  background:
    radial-gradient(60% 120% at 20% 50%,rgba(12,187,227,.20),transparent 60%),
    radial-gradient(45% 100% at 62% 50%,rgba(106,214,239,.16),transparent 60%),
    radial-gradient(40% 110% at 88% 50%,rgba(12,187,227,.14),transparent 60%);
  animation:fin-caustic 13s ease-in-out infinite}
.spx .fin::after{content:"";position:absolute;top:0;bottom:0;left:-30%;width:22%;pointer-events:none;z-index:1;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(140,226,247,.30),rgba(255,255,255,0));
  transform:skewX(-16deg);animation:fin-sweep 6s cubic-bezier(.45,0,.5,1) infinite}
.spx .fin__bub{position:absolute;bottom:-12px;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.75),rgba(106,214,239,.25) 60%,transparent 72%);
  animation:fin-bub 9s linear infinite}
.spx .fin__mark{position:relative;z-index:3;margin-right:12px}
.spx .fin__mark .mark{--m:40px}
.spx .fin__off{position:relative;z-index:3;display:inline-flex;align-items:baseline;gap:7px;flex-shrink:0;
  padding-right:16px;margin-right:16px;border-right:1px solid rgba(255,255,255,.18)}
.spx .fin__off b{font-size:21px;font-weight:900;letter-spacing:-.5px;color:#fff;
  text-shadow:0 0 22px rgba(12,187,227,.75);animation:fin-beat 3.4s ease-in-out infinite}
.spx .fin__off i{font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:1.6px;color:var(--cyan)}
.spx .fin__slot{position:relative;z-index:3;flex:1 1 auto;height:21px;min-width:0;overflow:hidden}
.spx .fin__slot span{position:absolute;left:0;top:0;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;
  font-size:14.5px;font-weight:800;letter-spacing:.1px;color:#DCEBF8;opacity:0;
  animation:fin-slot 16s cubic-bezier(.4,0,.2,1) infinite}
.spx .fin__slot span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 10px var(--cyan);flex-shrink:0}
.spx .fin__slot span:nth-child(1){animation-delay:0s}
.spx .fin__slot span:nth-child(2){animation-delay:2s}
.spx .fin__slot span:nth-child(3){animation-delay:4s}
.spx .fin__slot span:nth-child(4){animation-delay:6s}
.spx .fin__slot span:nth-child(5){animation-delay:8s}
.spx .fin__slot span:nth-child(6){animation-delay:10s}
.spx .fin__slot span:nth-child(7){animation-delay:12s}
.spx .fin__slot span:nth-child(8){animation-delay:14s}
.spx .fin__clock{position:relative;z-index:3;display:inline-flex;align-items:center;gap:8px;flex-shrink:0;
  margin-right:12px;padding:6px 12px;border-radius:8px;
  background:rgba(0,19,43,.55);border:1px solid rgba(12,187,227,.4)}
.spx .fin__clock em{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:1.3px;color:#7FB8D8;
  text-transform:uppercase}
.spx .fin__clock b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;font-weight:700;
  letter-spacing:.5px;color:var(--cyan-lt);font-variant-numeric:tabular-nums}
.spx .fin__end{position:relative;z-index:3;display:flex;align-items:center;gap:4px;flex-shrink:0;padding-right:12px}
.spx .fin__cta{position:relative;overflow:hidden;height:38px;padding:0 22px;display:inline-flex;align-items:center;
  gap:8px;border-radius:999px;color:var(--abyss);font-size:14.5px;font-weight:900;
  text-decoration:none;white-space:nowrap;
  background:linear-gradient(100deg,#0CBBE3 0%,#6AD6EF 42%,#0CBBE3 100%);
  background-size:220% 100%;animation:cta-tilt 6s ease-in-out infinite;
  box-shadow:0 6px 20px rgba(12,187,227,.42), inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .14s ease}
.spx .fin__cta::before{content:"";position:absolute;top:-20%;bottom:-20%;left:-45%;width:30%;z-index:1;
  pointer-events:none;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.9),rgba(255,255,255,0));
  transform:skewX(-20deg);animation:cta-shine 1.9s cubic-bezier(.4,0,.28,1) infinite}
.spx .fin__cta > *{position:relative;z-index:2}
.spx .fin__cta::after{content:"";position:absolute;inset:0;border-radius:999px;pointer-events:none;
  animation:fin-ring 2.6s cubic-bezier(.2,.7,.3,1) infinite}
.spx .fin__cta:hover{color:var(--abyss);transform:translateY(-1px)}
.spx .fin__cta svg{animation:fin-nudge 1.8s ease-in-out infinite}
.spx .fin__x{width:32px;height:32px;border:0;background:transparent;color:rgba(255,255,255,.45);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border-radius:50%}
.spx .fin__x:hover{background:rgba(255,255,255,.12);color:#fff}
.spx .fin--mob{height:54px;padding-left:10px}
.spx .fin--mob .fin__mark{margin-right:8px}
.spx .fin--mob .fin__mark .mark{--m:32px}
.spx .fin--mob .fin__off{padding-right:10px;margin-right:10px}
.spx .fin--mob .fin__off b{font-size:17px}
.spx .fin--mob .fin__off i{display:none}
.spx .fin--mob .fin__slot span{font-size:12px}
.spx .fin--mob .fin__clock{padding:4px 8px;margin-right:6px}
.spx .fin--mob .fin__clock em{display:none}
.spx .fin--mob .fin__clock b{font-size:12.5px}
.spx .fin--mob .fin__cta{height:32px;padding:0 13px;font-size:12.5px}
.spx .fin--mob .fin__cta svg{display:none}
.spx .fin--mob .fin__end{padding-right:6px}
.spx .sp{position:relative;width:430px;max-width:100%;overflow:hidden;border-radius:20px;
  padding:34px 32px 28px;text-align:center;color:#fff;
  background:linear-gradient(177deg,#1AA8D6 0%,#0C74B4 9%,#055A9B 20%,#01427E 36%,#002A58 58%,#001838 78%,#000F26 100%);
  box-shadow:0 34px 80px rgba(0,8,20,.75);border:1px solid rgba(12,187,227,.3)}
.spx .sp::before{content:"";position:absolute;inset:-40%;pointer-events:none;opacity:.62;
  background:
    radial-gradient(42% 32% at 24% 20%,rgba(106,214,239,.22),transparent 62%),
    radial-gradient(38% 30% at 74% 32%,rgba(12,187,227,.20),transparent 62%),
    radial-gradient(46% 34% at 50% 78%,rgba(4,85,160,.34),transparent 64%);
  animation:sp-caustic 17s ease-in-out infinite}
.spx .sp::after{content:"";position:absolute;top:-30%;left:10%;width:52%;height:150%;pointer-events:none;
  opacity:.5;transform:rotate(14deg);
  background:linear-gradient(100deg,transparent 40%,rgba(140,226,247,.16) 50%,transparent 60%);
  animation:sp-shaft 11s ease-in-out infinite}
.spx .sp > *{position:relative;z-index:3}
.spx .sp__rays{position:absolute;top:0;left:-25%;right:-25%;height:100%;z-index:1;pointer-events:none;
  filter:blur(1.4px);
  background:repeating-linear-gradient(96deg,
      rgba(255,255,255,0) 0 30px,
      rgba(186,240,255,.16) 30px 40px,
      rgba(255,255,255,0) 40px 58px,
      rgba(186,240,255,.09) 58px 64px,
      rgba(255,255,255,0) 64px 96px);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.62) 26%,rgba(0,0,0,.26) 52%,transparent 76%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.62) 26%,rgba(0,0,0,.26) 52%,transparent 76%);
  animation:sp-rays 11s ease-in-out infinite}
.spx .sp__caustic{position:absolute;top:0;left:-30%;right:-30%;height:78%;z-index:1;pointer-events:none;
  mix-blend-mode:screen;opacity:.5;filter:blur(2.2px);
  background:
    repeating-linear-gradient(74deg,rgba(190,242,255,0) 0 16px,rgba(190,242,255,.26) 20px,rgba(190,242,255,0) 26px 54px),
    repeating-linear-gradient(-66deg,rgba(150,228,255,0) 0 22px,rgba(150,228,255,.2) 26px,rgba(150,228,255,0) 32px 68px);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 38%,transparent 82%);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 38%,transparent 82%);
  animation:sp-caustic-a 7.5s ease-in-out infinite}
.spx .sp__mote{position:absolute;z-index:1;border-radius:50%;pointer-events:none;background:rgba(200,240,255,.5);
  animation:sp-mote 20s linear infinite}
.spx .sp__bub{position:absolute;bottom:-18px;z-index:2;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.8),rgba(106,214,239,.26) 58%,transparent 72%);
  animation:sp-bub 11s linear infinite}
.spx .sp__x{position:absolute;top:14px;right:14px;z-index:9;width:32px;height:32px;border:0;border-radius:50%;
  background:rgba(255,255,255,.1);color:rgba(255,255,255,.65);display:inline-flex;align-items:center;
  justify-content:center;cursor:pointer}
.spx .sp__x:hover{background:rgba(255,255,255,.22);color:#fff}
.spx .sp__badge{position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:10px 22px;border-radius:999px;margin-bottom:18px;
  background:linear-gradient(100deg,rgba(12,187,227,.34),rgba(106,214,239,.2) 50%,rgba(12,187,227,.34));
  border:1.5px solid rgba(106,214,239,.8);
  box-shadow:0 0 28px rgba(12,187,227,.45), inset 0 1px 0 rgba(255,255,255,.3);
  font-size:13.5px;font-weight:900;letter-spacing:2.6px;text-transform:uppercase;color:#EAFBFF;
  text-shadow:0 0 16px rgba(12,187,227,.9)}
.spx .sp__badge::after{content:"";position:absolute;inset:0;border-radius:999px;overflow:hidden;
  pointer-events:none;
  background:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.45) 50%,transparent 62%);
  background-size:260% 100%;animation:sp-badgeshine 2.4s linear infinite}
.spx .sp__badge i{width:9px;height:9px;border-radius:50%;background:#fff;
  box-shadow:0 0 14px var(--cyan),0 0 4px #fff;animation:sp-blip 1.1s ease-in-out infinite}
.spx .sp__badge{animation:sp-badgein 3.6s cubic-bezier(.16,1.3,.3,1) infinite,
                     sp-badge 2.6s ease-in-out infinite}
.spx .sp__markwrap{display:flex;justify-content:center;margin-bottom:14px}
.spx .sp__markwrap .mark{--m:150px}
.spx .sp__off{margin:0 0 4px;font-size:68px;line-height:1;font-weight:900;letter-spacing:-3.4px;
  background:linear-gradient(100deg,#FFFFFF 28%,#B6EEFF 42%,#FFFFFF 56%);
  background-size:280% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 34px rgba(12,187,227,.6));
  animation:sp-off 3.6s cubic-bezier(.2,1.25,.3,1) infinite, sp-offshine 2.1s linear infinite}
.spx .sp__off em{font-style:normal;font-size:46px;letter-spacing:-1px;color:inherit;
  vertical-align:baseline;margin-left:6px}
.spx .sp__on{margin:0 0 20px;font-size:13px;font-weight:800;letter-spacing:2.4px;text-transform:uppercase;
  color:#86AFD0;animation:sp-on 3.6s ease-out infinite}
.spx .sp__h{margin:0 0 12px;font-size:25px;line-height:1.2;font-weight:900;letter-spacing:-.8px;color:#fff}
.spx .sp__h em{position:relative;font-style:normal;color:var(--cyan-lt);white-space:nowrap}
.spx .sp__h em::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--cyan),var(--cyan-lt));transform-origin:left center;
  transform:scaleX(0);animation:sp-wipe 3.6s cubic-bezier(.3,.9,.25,1) infinite}
.spx .sp__p{margin:0 0 20px;display:flex;flex-wrap:wrap;justify-content:center;gap:7px}
.spx .sw__l .sp__p{justify-content:flex-start}
.spx .sp__p span{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;
  font-size:12.5px;font-weight:800;color:#D3E7F6;
  background:rgba(12,187,227,.10);border:1px solid rgba(12,187,227,.3);
  opacity:0;animation:sp-chip 3.6s cubic-bezier(.2,.9,.3,1) infinite}
.spx .sp__p span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 8px var(--cyan)}
.spx .sp__p span:nth-child(1){animation-delay:.02s}
.spx .sp__p span:nth-child(2){animation-delay:.07s}
.spx .sp__p span:nth-child(3){animation-delay:.12s}
.spx .sp__p span:nth-child(4){animation-delay:.17s}
.spx .sp__clock{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 22px}
.spx .sp__clock > p{margin:0;font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:#7FA3C4}
.spx .sp__units{display:flex;gap:7px}
.spx .sp__u{min-width:52px;padding:8px 6px 6px;border-radius:10px;background:rgba(0,17,42,.6);
  border:1px solid rgba(12,187,227,.34)}
.spx .sp__u b{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:21px;
  font-weight:700;line-height:1;color:var(--cyan-lt);font-variant-numeric:tabular-nums}
.spx .sp__u--s{animation:sp-tick 1s steps(1,end) infinite}
.spx .sp__u--s b{color:#fff}
.spx .sp__u span{display:block;margin-top:4px;font-size:8.5px;font-weight:800;letter-spacing:1.2px;
  text-transform:uppercase;color:#6C8EAE}
.spx .sp__cta{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;
  gap:10px;width:100%;height:58px;border-radius:999px;color:var(--abyss);
  font-size:17.5px;font-weight:900;text-decoration:none;
  background:linear-gradient(100deg,#0CBBE3 0%,#6AD6EF 42%,#0CBBE3 100%);
  background-size:220% 100%;animation:cta-tilt 6s ease-in-out infinite;
  box-shadow:0 10px 30px rgba(12,187,227,.42), inset 0 1px 0 rgba(255,255,255,.55);
  transition:transform .14s ease,box-shadow .14s ease}
.spx .sp__cta::before{content:"";position:absolute;top:-20%;bottom:-20%;left:-45%;width:30%;z-index:1;
  pointer-events:none;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.9),rgba(255,255,255,0));
  transform:skewX(-20deg);animation:cta-shine 1.9s cubic-bezier(.4,0,.28,1) infinite}
.spx .sp__cta > *{position:relative;z-index:2}
.spx .sp__cta::after{content:"";position:absolute;inset:0;border-radius:999px;pointer-events:none;
  animation:sp-ring 2.6s cubic-bezier(.2,.7,.3,1) infinite}
.spx .sp__cta:hover{color:var(--abyss);transform:translateY(-2px);box-shadow:0 14px 38px rgba(12,187,227,.6), inset 0 1px 0 rgba(255,255,255,.7)}
.spx .sp__cta svg{animation:fin-nudge 1.8s ease-in-out infinite}
.spx .sp__fine{margin:14px 0 0;font-size:12px;font-weight:600;color:#6C8EAE}
.spx .sp__decline{margin:12px 0 0;display:inline-block;font-size:12.5px;font-weight:600;color:#557594;
  background:none;border:0;cursor:pointer;font-family:inherit;text-decoration:underline;text-underline-offset:3px}
.spx .sp__decline:hover{color:#A6C4DE}
.spx .sw{position:relative;width:760px;max-width:100%;overflow:hidden;border-radius:20px;display:flex;
  align-items:center;color:#fff;
  background:linear-gradient(177deg,#1AA8D6 0%,#0C74B4 8%,#055A9B 18%,#01427E 34%,#002A58 56%,#001838 76%,#000F26 100%);
  box-shadow:0 34px 80px rgba(0,8,20,.75);border:1px solid rgba(12,187,227,.3)}
.spx .sw::before{content:"";position:absolute;inset:-40%;pointer-events:none;opacity:.6;
  background:
    radial-gradient(40% 36% at 22% 24%,rgba(106,214,239,.2),transparent 62%),
    radial-gradient(38% 32% at 78% 70%,rgba(12,187,227,.2),transparent 62%);
  animation:sp-caustic 17s ease-in-out infinite}
.spx .sw__l{position:relative;z-index:3;flex:1 1 0;min-width:0;padding:42px 14px 42px 42px;text-align:left}
.spx .sw__r{position:relative;z-index:3;flex:0 0 300px;padding:38px 36px 38px 14px;text-align:center}
.spx .sw .sp__markwrap{margin-bottom:10px}
.spx .sw .sp__markwrap .mark{--m:128px}
.spx .sw .sp__off{font-size:56px;letter-spacing:-2.6px}
.spx .sw .sp__off em{font-size:38px}
.spx .sw .sp__h{font-size:29px}
.spx .sw .sp__clock{justify-content:flex-start}
.spx .sw .sp__cta{max-width:280px}
@media (max-width:820px){
  .spx .sw{flex-direction:column;width:430px}
  .spx .sw__l{flex:1 1 auto;width:100%;padding:34px 30px 0;text-align:center}
  .spx .sw__r{flex:1 1 auto;width:100%;padding:16px 30px 30px}
  .spx .sw .sp__clock{justify-content:center}
  .spx .sw .sp__cta{max-width:none}
}
@media (max-width:620px){
  .spx .sp,
  .spx .sw{width:100%}
  .spx .sp{padding:30px 20px 26px}
  .spx .sp__markwrap .mark{--m:120px}
  .spx .sp__off{font-size:54px;letter-spacing:-2.6px}
  .spx .sp__off em{font-size:36px}
  .spx .sp__h{font-size:21px}
  .spx .sp__u{min-width:46px}
  .spx .sp__u b{font-size:18px}
}
@keyframes fin-caustic{0%,100%{transform:translateX(-4%) scale(1)}50%{transform:translateX(4%) scale(1.06)}}
@keyframes fin-sweep{0%{left:-30%}48%{left:118%}100%{left:118%}}
@keyframes fin-bub{0%{transform:translateY(0) scale(.6);opacity:0}
  12%{opacity:.7}70%{opacity:.5}100%{transform:translateY(-78px) scale(1);opacity:0}}
@keyframes fin-beat{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes fin-slot{
  0%{opacity:0;transform:translateY(9px)}
  2%{opacity:1;transform:translateY(0)}
  10.5%{opacity:1;transform:translateY(0)}
  12.5%{opacity:0;transform:translateY(-9px)}
  100%{opacity:0;transform:translateY(-9px)}}
@keyframes fin-ring{0%{box-shadow:0 0 0 0 rgba(12,187,227,.6)}70%{box-shadow:0 0 0 14px rgba(12,187,227,0)}100%{box-shadow:0 0 0 0 rgba(12,187,227,0)}}
@keyframes fin-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@keyframes sp-caustic{0%,100%{transform:translate(-3%,-2%) scale(1)}50%{transform:translate(3%,2%) scale(1.07)}}
@keyframes sp-shaft{0%,100%{transform:rotate(14deg) translateX(-8%)}50%{transform:rotate(14deg) translateX(8%)}}
@keyframes sp-bub{0%{transform:translateY(0) scale(.5);opacity:0}
  10%{opacity:.75}75%{opacity:.4}100%{transform:translateY(-320px) scale(1.1);opacity:0}}
@keyframes sp-blip{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
@keyframes sp-off{
  0%,40%{opacity:0;transform:scale(.52)}
  47%{opacity:1;transform:scale(1.16)}
  51%{transform:scale(.97)}
  55%{transform:scale(1)}
  94%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1)}}
@keyframes sp-on{
  0%,50%{opacity:0;transform:translateY(7px)}
  57%{opacity:1;transform:translateY(0)}
  94%{opacity:1}100%{opacity:0}}
@keyframes sp-rays{0%,100%{transform:translateX(-30px) skewX(-1deg);opacity:.85}
  50%{transform:translateX(26px) skewX(1deg);opacity:1}}
@keyframes sp-caustic-a{0%,100%{background-position:0 0,0 0;transform:scale(1)}
  50%{background-position:48px 26px,-54px 32px;transform:scale(1.06)}}
@keyframes sp-mote{0%{transform:translate(0,0);opacity:0}
  10%{opacity:.6}60%{opacity:.35}100%{transform:translate(18px,-190px);opacity:0}}
@keyframes cta-shine{0%{left:-45%}42%{left:118%}100%{left:118%}}
@keyframes cta-tilt{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes sp-offshine{0%{background-position:160% 50%}100%{background-position:-60% 50%}}
@keyframes sp-badge{
  0%,100%{box-shadow:0 0 26px rgba(12,187,227,.4), inset 0 1px 0 rgba(255,255,255,.3)}
  50%{box-shadow:0 0 44px rgba(12,187,227,.85), inset 0 1px 0 rgba(255,255,255,.45)}}
@keyframes sp-badgein{
  0%{opacity:0;transform:scale(.5)}
  7%{opacity:1;transform:scale(1.16)}
  12%{transform:scale(.97)}
  16%{transform:scale(1)}
  95%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1)}}
@keyframes sp-badgeshine{0%{background-position:160% 50%}100%{background-position:-60% 50%}}
@keyframes sp-wipe{0%,50%{transform:scaleX(0)}58%{transform:scaleX(1)}94%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes sp-chip{
  0%,52%{opacity:0;transform:translateY(10px) scale(.9)}
  58%{opacity:1;transform:translateY(0) scale(1)}
  94%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:0;transform:translateY(0) scale(1)}}
@keyframes sp-tick{0%{border-color:rgba(12,187,227,.9);background:rgba(12,187,227,.18)}
  30%{border-color:rgba(12,187,227,.34);background:rgba(0,17,42,.6)}
  100%{border-color:rgba(12,187,227,.34);background:rgba(0,17,42,.6)}}
@keyframes sp-ring{0%{box-shadow:0 0 0 0 rgba(12,187,227,.55)}70%{box-shadow:0 0 0 18px rgba(12,187,227,0)}100%{box-shadow:0 0 0 0 rgba(12,187,227,0)}}
@media (prefers-reduced-motion: reduce){
  .spx *,
  .spx *::before,
  .spx *::after{animation:none !important}
  .spx .mark__disc,
  .spx .mark__ring,
  .spx .mark__shark,
  .spx .sp__off,
  .spx .sp__on,
  .spx .sp__p span{opacity:1 !important;transform:none !important}
  .spx .sp__h em::after{transform:scaleX(1) !important}
  .spx .fin__slot span{opacity:0}
  .spx .fin__slot span:first-child{opacity:1}
  .spx .sp__bub,
  .spx .fin__bub,
  .spx .sp__mote,
  .spx .sp__rays,
  .spx .sp__caustic{display:none}
  .spx .sp__badge{opacity:1 !important;transform:none !important}
}

/* =========================================================================
   Site integration. Not part of the prototype artwork.
   ========================================================================= */

/* --- bar: sits in the page flow above the navbar, scrolls away with the page --- */
.spx--bar{position:relative;display:block}
html.offer-bar-closed .spx--bar{display:none}
.spx .spx-bar__mob{display:none}
@media (max-width:767px){
  .spx .spx-bar__desk{display:none}
  .spx .spx-bar__mob{display:block}
}
/* Most pages: the navbar is position:sticky in the page flow, so it simply sits below the bar and docks at the top on scroll.
   Service pages: the navbar is position:fixed, transparent, top:25px over the hero (PHP adds .spx--navfixed when $serviceType),
   so it moves down by the bar height until it docks at the top (.fixed-header sets top:0). */
html:not(.offer-bar-closed) .spx--bar.spx--navfixed ~ header.mpw-navbar:not(.fixed-header){top:calc(25px + 58px)}
@media (max-width:767px){
  html:not(.offer-bar-closed) .spx--bar.spx--navfixed ~ header.mpw-navbar:not(.fixed-header){top:calc(25px + 54px)}
}

/* --- bar content follows the navbar grid: same 1200px container (1170px content, 15px gutters), equal on both sides --- */
.spx .spx-bar__desk .fin{padding-left:max(15px,calc((100% - 1170px) / 2));padding-right:max(15px,calc((100% - 1170px) / 2))}
.spx .spx-bar__desk .fin__end{padding-right:0}
.spx .spx-bar__desk .fin__x{margin-right:-8px} /* the X glyph sits 8px inside its 32px button, so its edge lands on the grid edge */
.spx .spx-bar__mob .fin--mob{padding-left:15px}  /* right side already ends 15px from the edge (6px padding + 9px glyph inset) */
/* the logo mark is 0x0 in the prototype, so its 12px (8px mobile) margin only pushed the text away from the grid edge */
.spx .spx-bar__desk .fin__mark,
.spx .spx-bar__mob .fin__mark{margin-right:0}

/* --- popup: centred modal over a dim backdrop. Wide card on desktop, narrow card below 821px --- */
.spx-pop{position:fixed;inset:0;z-index:100000;display:none;align-items:center;justify-content:center;
  padding:16px;overflow-y:auto;background:rgba(0,10,25,.62);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.spx-pop.is-open{display:flex;animation:spx-pop-in .25s ease both}
.spx-pop .sp,.spx-pop .sw{margin:auto;flex-shrink:0}
@media (min-width:821px){.spx-pop .sp{display:none}}
@media (max-width:820px){.spx-pop .sw{display:none}}
html.offer-pop-open{overflow:hidden}
@keyframes spx-pop-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){.spx-pop.is-open{animation:none !important}}