/* 5StarEssays ticker + offer popup.
   Styles are copied from the approved HTML. The demo's page-level rules
   (:root, body, *) are scoped to .tk and .ospot so they do not touch the site. */
.tk,.ospot{
  --deep:#233F8C;--bright:#1176CA;
  --grad:linear-gradient(97.75deg,#233F8C 2%,#1176CA 100%);
  --grad-wide:linear-gradient(104deg,#1B3576 0%,#233F8C 34%,#1668B8 72%,#1176CA 100%);
  --abyss:#0E1E47;--star:#FFC83D;--star-dk:#E0A200;
  --green:#059669;--green-lt:#10B981;--red:#DC2626;--grey:#9CA3AF;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-align:left}
.tk,.tk *,.tk *::before,.tk *::after,.ospot,.ospot *,.ospot *::before,.ospot *::after{box-sizing:border-box}
/* neutralise the site's Bootstrap reset so the pieces render as in the HTML */
.tk a,.tk a:hover,.tk a:focus,.ospot a,.ospot a:hover,.ospot a:focus{text-decoration:none}
.ospot p.sp__proof{margin-top:16px}
.ospot .sp{text-align:center}


/* =====================================================================
   THE MARK — your real logo, cut into its four parts so each can move.
   Cap tosses in, the 5 slides across, the star spins and flares, and
   ESSAYS wipes in letter by letter. Hover tilts it; click replays it.
   ===================================================================== */
.mk{--w:calc(340px * var(--s,1));position:relative;width:var(--w);max-width:100%;
  height:calc(var(--w) * 0.2173);cursor:pointer;transform-style:preserve-3d;
  transition:transform .35s cubic-bezier(.2,.8,.3,1)}
.mk__l{position:absolute;inset:0;background-size:100% 100%;background-repeat:no-repeat;
  will-change:transform,opacity,filter}
/* each part carries its own soft shade so the mark sits on the field */
.mk__cap,.mk__five,.mk__essays{filter:drop-shadow(0 calc(5px * var(--s)) calc(12px * var(--s)) rgba(5,14,38,.45))}
/* the wrapper breathes — scale out and back with the glow swelling — while
   the star itself only handles its spin, so the two never fight for transform */
.mk__starwrap{position:absolute;inset:0;z-index:3;pointer-events:none;transform-origin:37.5% 62%;
  animation:mk-breathe 2.6s ease-in-out infinite, mk-neon 5.5s steps(1,end) infinite}
/* the tube behind the glass: a soft bloom that sits under the star itself */
.mk__neon{position:absolute;left:37.5%;top:62%;width:calc(78px * var(--s,1));height:calc(78px * var(--s,1));
  margin:calc(-39px * var(--s,1)) 0 0 calc(-39px * var(--s,1));border-radius:50%;pointer-events:none;z-index:2;
  background:radial-gradient(circle,rgba(255,200,61,.55) 0%,rgba(255,200,61,.18) 42%,transparent 70%);
  opacity:0;animation:mk-bloom 2.6s ease-in-out infinite;animation-delay:1.7s}
.mk:hover .mk__starwrap{animation:mk-breathe 1.1s ease-in-out infinite}
.mk:hover .mk__neon{animation:mk-bloom 1.1s ease-in-out infinite}

.mk__cap{will-change:transform,filter;background-image:url(images/mk-cap.png);
  transform-origin:10.7% 50%;animation:mk-cap 6s linear infinite}
.mk__five{background-image:url(images/mk-five.png);
  animation:mk-five 6s cubic-bezier(.2,.9,.25,1) infinite;animation-delay:1.45s}
.mk__star{filter:none;background-image:url(images/mk-star.png);
  transform-origin:37.5% 62%;animation:mk-star 6s cubic-bezier(.16,1.5,.3,1) infinite;animation-delay:1.70s}
.mk__essays{background-image:url(images/mk-essays.png);
  animation:mk-essays 6s cubic-bezier(.3,.9,.25,1) infinite;animation-delay:1.95s}

/* the air the cap drags round with it — two arcs on its pivot, thrown off
   as it decelerates, gone by the time it stops */
.mk__air{position:absolute;left:10.7%;top:50%;width:calc(132px * var(--s,1));height:calc(132px * var(--s,1));
  margin:calc(-66px * var(--s,1)) 0 0 calc(-66px * var(--s,1));border-radius:50%;pointer-events:none;z-index:1;
  border:calc(3px * var(--s,1)) solid transparent;
  border-top-color:rgba(255,255,255,.62);border-right-color:rgba(255,255,255,.2);
  opacity:0;animation:mk-air 6s linear infinite}
.mk__air--b{width:calc(96px * var(--s,1));height:calc(96px * var(--s,1));
  margin:calc(-48px * var(--s,1)) 0 0 calc(-48px * var(--s,1));
  border-top-color:rgba(255,200,61,.5);border-right-color:transparent;
  border-left-color:rgba(255,255,255,.22);animation:mk-air-b 6s linear infinite}

/* the flare the star throws when it lands */
.mk__flare{position:absolute;left:37.5%;top:62%;width:calc(44px * var(--s));height:calc(44px * var(--s));
  margin:calc(-22px * var(--s)) 0 0 calc(-22px * var(--s));border-radius:50%;pointer-events:none;z-index:5;
  border:calc(2px * var(--s)) solid rgba(255,200,61,.95);opacity:0;
  animation:mk-flare 6s ease-out infinite;animation-delay:1.82s}
/* four sparks off the same point */
.mk__spark{position:absolute;left:37.5%;top:62%;width:calc(3px * var(--s));height:calc(3px * var(--s));
  border-radius:50%;background:#FFE3A0;pointer-events:none;z-index:5;opacity:0;
  box-shadow:0 0 calc(7px * var(--s)) #FFC83D;animation:mk-spark 6s cubic-bezier(.2,.8,.3,1) infinite}
.mk__spark:nth-of-type(1){animation-delay:1.82s;--dx:-34px;--dy:-26px}
.mk__spark:nth-of-type(2){animation-delay:1.86s;--dx:30px;--dy:-30px}
.mk__spark:nth-of-type(3){animation-delay:1.90s;--dx:-26px;--dy:28px}
.mk__spark:nth-of-type(4){animation-delay:1.94s;--dx:36px;--dy:20px}

/* hover: the whole mark lifts, the star takes another turn, light runs again */
.mk:hover .mk__star{animation:mk-spin 1.1s cubic-bezier(.3,.8,.25,1)}
.mk:active{transform:scale(.97)}

/* =====================================================================
   1. TICKER — sits directly under their navbar
   ===================================================================== */
.tk{position:relative;overflow:hidden;height:54px;display:flex;align-items:center;padding:0 0 0 18px;color:#fff;
  background:var(--grad-wide);background-size:200% 100%;animation:tk-drift 20s linear infinite;
  box-shadow:0 3px 12px rgba(14,30,71,.3)}
/* one headlight crossing the bar */
.tk::after{content:"";position:absolute;top:0;bottom:0;left:-28%;width:20%;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.26),rgba(255,255,255,0));
  transform:skewX(-18deg);animation:tk-headlight 6s cubic-bezier(.5,0,.5,1) infinite}
.tk::before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;z-index:0;
  background:linear-gradient(90deg,var(--star),rgba(255,200,61,0))}

.tk__coin{position:relative;z-index:3;display:inline-flex;align-items:baseline;gap:7px;flex-shrink:0;
  padding:7px 14px;border-radius:7px;white-space:nowrap;color:var(--abyss);
  background:linear-gradient(100deg,#FFD873 0%,#FFC83D 48%,#F5B61F 100%);
  box-shadow:0 5px 14px rgba(14,30,71,.45);transform-origin:center;
  animation:tk-beat 6s cubic-bezier(.3,.8,.3,1) infinite}
.tk__coin b{font-size:20px;font-weight:900;letter-spacing:-.5px}
.tk__coin i{font-style:normal;font-size:10.5px;font-weight:900;letter-spacing:1.5px}

.tk__rail{position:relative;z-index:3;flex:1 1 auto;min-width:0;overflow:hidden;margin:0 14px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 92%,transparent)}
.tk__track{display:flex;align-items:center;width:max-content;animation:tk-roll 30s linear infinite}
.tk:hover .tk__track{animation-play-state:paused}
.tk__set{display:flex;align-items:center;gap:22px;padding-right:22px}
.tk__item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-size:14.5px;font-weight:800}
.tk__item svg{flex-shrink:0}
.tk__dot{flex-shrink:0;width:5px;height:5px;border-radius:50%;background:var(--star);opacity:.75}

.tk__end{position:relative;z-index:3;display:flex;align-items:center;gap:4px;flex-shrink:0;padding-right:12px}
.tk__cta{position:relative;overflow:hidden;height:38px;padding:0 20px;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,#FFD873,#FFC83D 50%,#F5B61F);
  box-shadow:0 4px 0 var(--star-dk);transition:transform .15s ease,box-shadow .15s ease}
.tk__cta::before{content:"";position:absolute;top:-20%;bottom:-20%;left:-45%;width:32%;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.85),rgba(255,255,255,0));
  transform:skewX(-20deg);animation:tk-shine 2.6s cubic-bezier(.4,0,.28,1) infinite}
.tk__cta > *{position:relative;z-index:2}
.tk__cta:hover{transform:translateY(2px);box-shadow:0 2px 0 var(--star-dk);color:var(--abyss)}
.tk__x{width:34px;height:34px;border:0;background:transparent;color:rgba(255,255,255,.6);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.tk__x:hover{background:rgba(255,255,255,.16);color:#fff}

/* mobile: the claims stack under the coin so neither is squeezed */
.tk--mob{height:62px;padding:0 8px 0 12px;align-items:center}
.tk--mob .tk__stack{display:flex;flex-direction:column;justify-content:center;gap:3px;flex:1 1 auto;min-width:0}
.tk--mob .tk__coin{padding:3px 8px;border-radius:5px;align-self:flex-start}
.tk--mob .tk__coin b{font-size:14px}
.tk--mob .tk__coin i{font-size:9px;letter-spacing:1.1px}
.tk--mob .tk__rail{margin:0;flex:0 0 auto;width:100%;height:17px}
.tk--mob .tk__item{font-size:11.5px}
.tk--mob .tk__cta{height:32px;padding:0 13px;font-size:12.5px;box-shadow:0 3px 0 var(--star-dk)}
.tk--mob .tk__cta svg{display:none}
.tk--mob .tk__x{width:28px;height:28px}


/* =====================================================================
   2. THE SPOT — six seconds, plays once in production
   ===================================================================== */
.sp{--s:1;position:relative;width:860px;max-width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:14px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;
  background:
    radial-gradient(120% 85% at 50% 0%,rgba(17,118,202,.55),transparent 62%),
    radial-gradient(95% 75% at 50% 112%,rgba(35,63,140,.9),transparent 66%),
    linear-gradient(170deg,#16295E 0%,#0E1E47 56%,#08142F 100%);
  box-shadow:0 26px 64px rgba(6,15,38,.6)}
/* a slow field of light drifting behind everything */
.sp::before{content:"";position:absolute;inset:-30%;pointer-events:none;opacity:.5;
  background:
    radial-gradient(38% 30% at 26% 28%,rgba(17,118,202,.45),transparent 62%),
    radial-gradient(34% 28% at 76% 68%,rgba(255,200,61,.14),transparent 62%);
  animation:sp-field 18s ease-in-out infinite}
/* a broad band of light that travels across the whole popup, left to right.
   Wide and soft so it passes over the type without washing it, screen-blended
   so it lifts the field instead of greying it, and eased at both ends so it
   drifts in and out rather than starting and stopping. */
.sp__sheen{position:absolute;top:-30%;bottom:-30%;left:-50%;width:42%;z-index:8;pointer-events:none;
  mix-blend-mode:screen;transform:skewX(-16deg);
  background:linear-gradient(100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.07) 26%,
    rgba(255,245,220,.30) 48%,
    rgba(255,255,255,.07) 72%,
    rgba(255,255,255,0) 100%);
  animation:sp-sheen 5.2s cubic-bezier(.45,0,.55,1) infinite}

/* the sky of stars the mark is struck out of */
.sp__dust{position:absolute;border-radius:50%;background:rgba(255,255,255,.75);pointer-events:none;
  animation:sp-dust 9s linear infinite}
.sp > *{position:relative;z-index:3}

/* Gold is the button's, and only the button's. The tag is cut from the field
   instead: dark glass, a thin red edge, white type. It carries urgency with
   the red blip and its own beat, and it hands the eye on rather than holding it. */
.sp__eyebrow{position:relative;overflow:hidden;display:inline-flex;align-items:center;
  gap:calc(10px * var(--s));
  margin:calc(42px * var(--s)) 0 calc(16px * var(--s));
  padding:calc(9px * var(--s)) calc(20px * var(--s));
  border-radius:999px;
  background:rgba(8,18,44,.66);
  border:1px solid rgba(220,38,38,.65);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 calc(8px * var(--s)) calc(22px * var(--s)) rgba(5,12,32,.5);
  color:#FFE2E2;
  font-size:calc(12.5px * var(--s));font-weight:900;letter-spacing:calc(3.2px * var(--s));
  text-transform:uppercase;
  opacity:0;animation:sp-eyebrow 6s cubic-bezier(.2,1.35,.3,1) infinite;animation-delay:2.7s}
/* a red halo beating off the edge, on its own clock */
.sp__eyebrow::after{content:"";position:absolute;inset:-1px;border-radius:999px;pointer-events:none;
  animation:sp-tagpulse 2.3s cubic-bezier(.2,.7,.3,1) infinite}
.sp__eyebrow em{display:none}
.sp__eyebrow b{position:relative;z-index:2;font-weight:900}
.sp__eyebrow i{position:relative;z-index:2;width:calc(8px * var(--s));height:calc(8px * var(--s));
  border-radius:50%;background:var(--red);box-shadow:0 0 calc(10px * var(--s)) var(--red);
  animation:sp-blip 1.1s ease-in-out infinite}
.sp__off{margin:calc(14px * var(--s)) 0 calc(2px * var(--s));font-size:calc(92px * var(--s));line-height:1;
  font-weight:900;letter-spacing:calc(-4px * var(--s));
  background:linear-gradient(100deg,#FFFFFF 26%,#FFE3A0 44%,#FFFFFF 60%);
  background-size:280% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 calc(34px * var(--s)) rgba(255,200,61,.5));
  animation:sp-off 6s cubic-bezier(.2,1.3,.3,1) infinite, sp-gloss 3.2s linear infinite;animation-delay:2.9s,0s}
.sp__off em{font-style:normal;font-size:calc(58px * var(--s));letter-spacing:calc(-1px * var(--s));
  margin-left:calc(6px * var(--s))}
.sp__on{margin:0 0 calc(20px * var(--s));font-size:calc(14px * var(--s));font-weight:800;
  letter-spacing:calc(2.6px * var(--s));text-transform:uppercase;color:#9EB7D8;
  opacity:0;animation:sp-on 6s ease-out infinite;animation-delay:3.3s}

.sp__proof{display:flex;flex-wrap:wrap;justify-content:center;gap:calc(8px * var(--s));
  margin-bottom:calc(22px * var(--s))}
.sp__proof span{display:inline-flex;align-items:center;gap:calc(6px * var(--s));
  padding:calc(6px * var(--s)) calc(13px * var(--s));border-radius:999px;
  font-size:calc(13px * var(--s));font-weight:800;color:#DCE8F8;
  background:rgba(17,118,202,.2);border:1px solid rgba(17,118,202,.5);
  opacity:0;animation:sp-proof 6s cubic-bezier(.2,.9,.3,1) infinite}
.sp__proof span:nth-child(1){animation-delay:3.5s}
.sp__proof span:nth-child(2){animation-delay:3.6s}
.sp__proof span:nth-child(3){animation-delay:3.7s}
.sp__proof span:nth-child(4){animation-delay:3.8s}
.sp__proof svg{flex-shrink:0}

.sp__cta{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;
  gap:calc(10px * var(--s));height:calc(58px * var(--s));padding:0 calc(34px * var(--s));
  border-radius:999px;color:var(--abyss);font-size:calc(19px * var(--s));font-weight:900;text-decoration:none;
  background:linear-gradient(100deg,#FFD873,#FFC83D 50%,#F5B61F);
  box-shadow:0 calc(6px * var(--s)) 0 var(--star-dk), 0 calc(16px * var(--s)) calc(34px * var(--s)) rgba(255,200,61,.3);
  opacity:0;animation:sp-cta 6s cubic-bezier(.2,1.25,.3,1) infinite;animation-delay:3.95s;
  transition:transform .15s ease}
.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:tk-shine 2.3s cubic-bezier(.4,0,.28,1) infinite}
.sp__cta > *{position:relative;z-index:2}
.sp__cta:hover{color:var(--abyss);transform:translateY(calc(3px * var(--s)))}
.sp__fine{margin:calc(14px * var(--s)) 0 0;font-size:calc(12.5px * var(--s));font-weight:600;color:#7E96B8;
  opacity:0;animation:sp-on 6s ease-out infinite;animation-delay:4.25s}

.sp__x{position:absolute;top:14px;right:14px;z-index:9;width:34px;height:34px;border:0;border-radius:50%;
  background:rgba(255,255,255,.12);color:rgba(255,255,255,.75);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center}
.sp__x:hover{background:rgba(255,255,255,.24);color:#fff}
.sp__skip{position:absolute;bottom:14px;right:16px;z-index:9;font-size:11.5px;font-weight:700;
  color:rgba(255,255,255,.55);background:none;border:0;cursor:pointer;font-family:inherit}
.sp__skip:hover{color:#fff}

/* phone cut of the same film */
.sp--mob{--s:.62;width:300px;aspect-ratio:9/16;border-radius:26px;padding:0 14px;
  border:8px solid #0A1430;box-shadow:0 26px 64px rgba(6,15,38,.6)}
.sp--mob .sp__off{font-size:calc(80px * var(--s))}
.sp--mob .mk{--w:calc(252px * var(--s,1) / .62)}
.sp--mob .sp__proof{flex-direction:column;align-items:center;gap:calc(7px * var(--s))}


/* ---------------- motion ---------------- */
/* the cap is thrown, the way a cap is thrown */
@keyframes mk-cap{
  0%{opacity:0;transform:perspective(620px) rotateY(0deg);
     filter:blur(0) drop-shadow(0 5px 12px rgba(5,14,38,.45))}
  1%{opacity:1}
  /* wind up */
  4%{transform:perspective(620px) rotateY(300deg);
     filter:blur(2.4px) drop-shadow(0 5px 12px rgba(5,14,38,.45))}
  /* flat out: constant speed, one revolution about every tenth of a second */
  8%{transform:perspective(620px) rotateY(1020deg);
     filter:blur(3.8px) drop-shadow(0 5px 12px rgba(5,14,38,.45))}
  12%{transform:perspective(620px) rotateY(1740deg);
      filter:blur(3.8px) drop-shadow(0 5px 12px rgba(5,14,38,.45))}
  16%{transform:perspective(620px) rotateY(2460deg);
      filter:blur(3.8px) drop-shadow(0 5px 12px rgba(5,14,38,.45))}
  20%{transform:perspective(620px) rotateY(3180deg);
      filter:blur(3.8px) drop-shadow(0 5px 12px rgba(5,14,38,.45))}
  24%{transform:perspective(620px) rotateY(3900deg);
      filter:blur(3.8px) drop-shadow(0 5px 12px rgba(5,14,38,.45))}
  /* wind down */
  28%{transform:perspective(620px) rotateY(4500deg);
      filter:blur(2.4px) drop-shadow(0 5px 12px rgba(5,14,38,.45))}
  31%{transform:perspective(620px) rotateY(4830deg);
      filter:blur(1.2px) drop-shadow(0 5px 12px rgba(5,14,38,.45))}
  34%{transform:perspective(620px) rotateY(5006deg);
      filter:blur(.4px) drop-shadow(0 5px 12px rgba(5,14,38,.45))}
  36%{transform:perspective(620px) rotateY(5058deg);
      filter:blur(0) drop-shadow(0 5px 12px rgba(5,14,38,.45))}
  38%{transform:perspective(620px) rotateY(5026deg)}
  40%{transform:perspective(620px) rotateY(5040deg)}
  94%{opacity:1;transform:perspective(620px) rotateY(5040deg);
      filter:blur(0) drop-shadow(0 5px 12px rgba(5,14,38,.45))}
  100%{opacity:0;transform:perspective(620px) rotateY(5040deg)}}
@keyframes mk-air{
  0%,1%{opacity:0;transform:perspective(620px) rotateY(0deg) scale(.66)}
  5%{opacity:.75;transform:perspective(620px) rotateY(640deg) scale(.9)}
  22%{opacity:.5;transform:perspective(620px) rotateY(3600deg) scale(1.06)}
  31%{opacity:.3;transform:perspective(620px) rotateY(4700deg) scale(1.2)}
  37%{opacity:0;transform:perspective(620px) rotateY(5000deg) scale(1.3)}
  100%{opacity:0;transform:perspective(620px) rotateY(5000deg) scale(1.3)}}
@keyframes mk-air-b{
  0%,2%{opacity:0;transform:perspective(620px) rotateY(0deg) rotateX(18deg) scale(.6)}
  7%{opacity:.6;transform:perspective(620px) rotateY(-700deg) rotateX(18deg) scale(.94)}
  24%{opacity:.42;transform:perspective(620px) rotateY(-3400deg) rotateX(18deg) scale(1.14)}
  33%{opacity:.2;transform:perspective(620px) rotateY(-4400deg) rotateX(18deg) scale(1.28)}
  38%{opacity:0;transform:perspective(620px) rotateY(-4700deg) rotateX(18deg) scale(1.38)}
  100%{opacity:0;transform:perspective(620px) rotateY(-4700deg) rotateX(18deg) scale(1.38)}}
@keyframes mk-flare{
  0%,9%{opacity:0;transform:scale(.3)}
  13%{opacity:1;transform:scale(1)}
  24%{opacity:0;transform:scale(2.9)}
  100%{opacity:0;transform:scale(2.9)}}
@keyframes mk-spark{
  0%,9%{opacity:0;transform:translate(0,0) scale(.5)}
  13%{opacity:1;transform:translate(calc(var(--dx) * .45),calc(var(--dy) * .45)) scale(1.3)}
  22%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.4)}
  100%{opacity:0}}
/* three stacked shadows: the tube, the bloom, the room it lights */
@keyframes mk-breathe{
  0%,100%{transform:scale(1);
    filter:drop-shadow(0 0 calc(2px * var(--s,1)) #FFF3CF)
           drop-shadow(0 0 calc(9px * var(--s,1)) rgba(255,200,61,.8))
           drop-shadow(0 0 calc(20px * var(--s,1)) rgba(255,170,20,.35))}
  50%{transform:scale(1.09);
    filter:drop-shadow(0 0 calc(3px * var(--s,1)) #FFFFFF)
           drop-shadow(0 0 calc(20px * var(--s,1)) rgba(255,200,61,1))
           drop-shadow(0 0 calc(46px * var(--s,1)) rgba(255,170,20,.7))}}
/* the flicker a real tube has when it strikes, and once more later */
@keyframes mk-neon{
  0%,28.0%{opacity:1}
  28.6%{opacity:.25}
  29.2%{opacity:1}
  29.8%{opacity:.4}
  30.4%{opacity:1}
  69.0%{opacity:1}
  69.5%{opacity:.35}
  70.0%{opacity:1}
  100%{opacity:1}}
@keyframes mk-bloom{
  0%,100%{opacity:.5;transform:scale(.88)}
  50%{opacity:1;transform:scale(1.18)}}
@keyframes mk-spin{0%{transform:rotate(0) scale(1)}55%{transform:rotate(200deg) scale(1.16)}100%{transform:rotate(360deg) scale(1)}}

@keyframes tk-drift{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes tk-headlight{0%{left:-28%}44%{left:126%}100%{left:126%}}
@keyframes tk-shine{0%{left:-45%}44%{left:124%}100%{left:124%}}
@keyframes tk-roll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes tk-beat{0%,86%{transform:scale(1)}91%{transform:scale(1.09)}96%{transform:scale(1)}100%{transform:scale(1)}}
@keyframes nav-live{0%,100%{opacity:1}50%{opacity:.35}}

@keyframes sp-sheen{
  0%{left:-50%;opacity:0}
  12%{opacity:1}
  78%{opacity:1}
  88%{left:132%;opacity:0}
  100%{left:132%;opacity:0}}
@keyframes sp-field{0%,100%{transform:translate(-3%,-2%) scale(1)}50%{transform:translate(3%,2%) scale(1.07)}}
@keyframes sp-dust{0%{transform:translateY(0) scale(.6);opacity:0}
  12%{opacity:.8}70%{opacity:.4}100%{transform:translateY(-220px) scale(1);opacity:0}}
@keyframes sp-tagpulse{
  0%{box-shadow:0 0 0 0 rgba(220,38,38,.55)}
  70%{box-shadow:0 0 0 calc(18px * var(--s)) rgba(220,38,38,0)}
  100%{box-shadow:0 0 0 0 rgba(220,38,38,0)}}
@keyframes sp-blip{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.78)}}
@keyframes sp-eyebrow{
  0%{opacity:0;transform:scale(.55)}
  4%{opacity:1;transform:scale(1.12)}
  6%{transform:scale(.97)}
  8%{transform:scale(1)}
  92%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1)}}
@keyframes sp-off{
  0%{opacity:0;transform:scale(.62)}
  5%{opacity:1;transform:scale(1.14)}
  8%{transform:scale(.98)}
  11%{transform:scale(1)}
  92%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1)}}
@keyframes sp-gloss{0%{background-position:170% 50%}100%{background-position:-70% 50%}}
@keyframes sp-on{
  0%{opacity:0;transform:translateY(8px)}
  5%{opacity:1;transform:translateY(0)}
  92%{opacity:1}100%{opacity:0}}
@keyframes sp-proof{
  0%{opacity:0;transform:translateY(10px) scale(.92)}
  5%{opacity:1;transform:translateY(0) scale(1)}
  92%{opacity:1}100%{opacity:0}}
@keyframes sp-cta{
  0%{opacity:0;transform:translateY(14px) scale(.88)}
  5%{opacity:1;transform:translateY(0) scale(1.06)}
  8%{transform:translateY(0) scale(1)}
  92%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:0}}

@media (prefers-reduced-motion: reduce){
  .tk,.tk *,.tk *::before,.tk *::after,.ospot,.ospot *,.ospot *::before,.ospot *::after{animation:none !important}
  .mk__l,.mk__starwrap,.sp__eyebrow,.sp__off,.sp__on,.sp__proof span,.sp__cta,.sp__fine{
    opacity:1 !important;transform:none !important;clip-path:none !important;filter:none !important}
  .sp__dust,.sp__sheen,.mk__flare,.mk__spark,.mk__air,.mk__neon{display:none}
}


/* plays once and stays. It must not loop with the film, or the page behind
   snaps back into focus for a frame at the top of every cycle. */
@keyframes veil-in{
  0%{opacity:0;-webkit-backdrop-filter:blur(0) saturate(1);backdrop-filter:blur(0) saturate(1)}
  100%{opacity:1;-webkit-backdrop-filter:blur(9px) saturate(.82);backdrop-filter:blur(9px) saturate(.82)}}


/* =====================================================================
   3. IN PLACE — the popup over a blurred page
   ===================================================================== */
.ospot.page__veil{position:fixed;inset:0;z-index:2147483000;
  background:radial-gradient(70% 70% at 50% 45%,rgba(8,18,44,.52),rgba(6,13,32,.8));
  -webkit-backdrop-filter:blur(9px) saturate(.82);backdrop-filter:blur(9px) saturate(.82);
  display:flex;align-items:center;justify-content:center;padding:20px;
  animation:veil-in .85s cubic-bezier(.3,.8,.3,1) both}
.ospot.page__veil[hidden]{display:none}
/* full size from the HTML (860px, scale 1) so the offer holds the visitor's focus.
   Height follows the content plus room above the logo and below the fine print. */
.page__veil .sp:not(.sp--mob){--s:1;width:min(860px,100%);box-shadow:0 34px 90px rgba(3,9,26,.75),
  0 0 0 1px rgba(255,255,255,.07);
  aspect-ratio:auto;padding:calc(50px * var(--s)) 24px calc(46px * var(--s))}
/* if the screen is short, let the overlay scroll instead of cutting the popup off */
.ospot.page__veil{overflow-y:auto}
.page__veil > .sp{margin:auto;flex-shrink:0}
/* While the popup is open the bar is dimmed and blurred like the rest of the page,
   except the Claim button, which stays bright and clickable above the overlay. */
.tk-holder.tk-holder--over{z-index:2147483001 !important}
/* the dim layer covers the whole bar; only the Claim button itself sits above it */
.tk-holder--over::after{content:"";position:absolute;inset:0;z-index:4;
  background:rgba(7,15,36,.74);
  -webkit-backdrop-filter:blur(9px) saturate(.82);backdrop-filter:blur(9px) saturate(.82);
  animation:veil-in .85s cubic-bezier(.3,.8,.3,1) both}
.tk-holder--over .tk__end{z-index:auto}
.tk-holder--over .tk__cta{z-index:5}
@media (max-width:960px){
  .page__veil .sp:not(.sp--mob){--s:.82}
}
/* short laptop screens: keep the whole popup in view */
@media (min-width:961px) and (max-height:620px){
  .page__veil .sp:not(.sp--mob){--s:.8;width:min(720px,100%)}
}
@media (max-width:760px){
  .page__veil .sp:not(.sp--mob){--s:.6}
}
/* desktop film on wide screens, the phone cut on phones */
.page__veil .sp--mob{display:none}
@media (max-width:620px){
  .page__veil .sp:not(.sp--mob){display:none}
  .page__veil .sp--mob{display:flex}
  .sp--mob{--s:.46;width:100%;max-width:290px}
}
/* ticker: desktop bar, or the stacked mobile bar on small screens */
.tk-holder{position:fixed;left:0;right:0;top:0;z-index:98}
.tk-holder[hidden],.tk-spacer[hidden]{display:none}
.tk-holder .tk--mob{display:none}
@media (max-width:767px){
  .tk-holder .tk:not(.tk--mob){display:none}
  .tk-holder .tk--mob{display:flex}
}