/* ============================================================
   CloudFoundation — Workday Master's Program page skin
   Dark creative theme: video hero + orbital constellation,
   green gradient kickers, Bricolage headings, blue→cyan accents.
   ============================================================ */

:root {
  --wm-bg-dark: #060a14;
  --wm-bg-dark2: #080e1a;
  --wm-card-dark: #0d1526;
  --wm-line-dark: rgba(148, 163, 184, .16);
  --wm-ink: #0f172a;
  --wm-ink-2: #475569;
  --wm-green: #3dffab;
  --wm-green2: #65ee22;
  --wm-blue: #1a56db;
  --wm-cyan: #06b6d4;
  --wm-font-num: 'Space Grotesk', sans-serif;
}

/* clip (not hidden) — overflow-x:hidden on the root makes it a scroll
   container and breaks position:sticky for the learning-path rail */
html, body { overflow-x: clip; }

/* ============================================================
   BUTTONS
   ============================================================ */
.wm-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 999px;
  font-family: var(--font);
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s ease, background .35s ease, color .35s ease;
  will-change: transform;
}
.wm-btn i { transition: transform .3s ease; }
.wm-btn:hover i.fa-arrow-right { transform: translateX(4px); }

.wm-btn-solid {
  color: #04121f;
  background: linear-gradient(135deg, var(--wm-green), var(--wm-green2));
  box-shadow: 0 8px 26px rgba(61, 255, 171, .28), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.wm-btn-solid:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(61, 255, 171, .42); }
.wm-btn-solid::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%);
  background-size: 220% 100%;
  background-position: 120% 0;
  transition: background-position .7s ease;
  pointer-events: none;
}
.wm-btn-solid:hover::after { background-position: -120% 0; }

.wm-btn-ghost {
  color: #e2e8f0;
  background: rgba(148, 163, 184, .08);
  border: 1px solid rgba(148, 163, 184, .3);
  backdrop-filter: blur(8px);
}
.wm-btn-ghost:hover { transform: translateY(-3px); border-color: var(--wm-green); color: var(--wm-green); box-shadow: 0 10px 30px rgba(61, 255, 171, .15); }

.wm-btn-block { width: 100%; justify-content: center; }
.wm-btn-sm { padding: 11px 20px; font-size: 14px; }

/* shared boarding-pass CTA: reviewer-proof row (styles normally provided
   by workday-training.css, which this page does not load) */
.wd-enroll-proof { display: flex; align-items: center; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.wd-avs { display: inline-flex; }
.wd-avs img { border-radius: 50%; border: 2px solid #fff; margin-left: -9px; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); }
.wd-avs img:first-child { margin-left: 0; }
.wd-cr-stars { display: inline-flex; gap: 3px; color: #fbbf24; font-size: 13px; }

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.wm-head { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.wm-head-left { text-align: left; margin: 0 0 30px; }

.wm-kicker {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--wm-green), var(--wm-green2));
  color: #071018;
  padding: 8px 16px;
  border-radius: 999px;
  font-family: var(--wm-font-num);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 20px;
  /* same pill recipe as the Video Testimonials kicker (cvtv .sec-kicker):
     persistent green glow + breathing pulse + shine sweep (::after) */
  box-shadow: 0 8px 30px rgba(61, 255, 171, .35);
  animation: wmKickerPulse 2s ease-in-out infinite;
}
@keyframes wmKickerPulse {
  0%, 100% { box-shadow: 0 8px 30px rgba(61, 255, 171, .35); }
  50% { box-shadow: 0 8px 38px rgba(61, 255, 171, .6); }
}
/* sheen that glides across the pill every 3s, like cvtv's .k-shine */
.wm-kicker::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -45%;
  width: 45%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .65), transparent);
  animation: wmKickerShine 3s ease-in-out infinite;
}
@keyframes wmKickerShine {
  0% { left: -45%; }
  55%, 100% { left: 115%; }
}
/* twinkling sparkle stars around the pill — mirrors the cvtv kicker's
   .k-spark stars (they live on the wrapper because the pill itself is
   overflow:hidden for the shine sweep) */
.wm-kick-wrap { position: relative; display: inline-block; }
.wm-spark {
  position: absolute;
  color: #3dffab;
  text-shadow: 0 0 10px rgba(61, 255, 171, .9);
  pointer-events: none;
  animation: wmSparkTwinkle 1.8s ease-in-out infinite;
}
.wm-spark.s1 { top: -12px; right: -16px; font-size: 15px; }
.wm-spark.s2 { bottom: -13px; left: -16px; font-size: 12px; color: #fbbf24; text-shadow: 0 0 10px rgba(251, 191, 36, .9); animation-delay: .6s; }
.wm-spark.s3 { top: 2px; left: -26px; font-size: 10px; color: #22d3ee; text-shadow: 0 0 10px rgba(34, 211, 238, .9); animation-delay: 1.1s; }
@keyframes wmSparkTwinkle {
  0%, 100% { opacity: .15; transform: scale(.55) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.15) rotate(25deg); }
}
.wm-kicker i { animation: wmKickerBounce 2s ease-in-out infinite; }
@keyframes wmKickerBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.wm-head h2 {
  font-family: var(--font-heading);
  font-size: clamp(30px, 4.2vw, 46px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--wm-ink);
  margin-bottom: 14px;
}
.wm-head-dark h2 { color: #eef2ff; }

.wm-grad-text {
  background: linear-gradient(100deg, #3b82f6, #06b6d4, #3b82f6);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: wmGradSlide 6s linear infinite;
}
.wm-grad-text-green {
  /* same festival gradient + 6s shift as the dark-hero ".grad" ("Career Results.") */
  background: linear-gradient(100deg, #3dffab, #ffdb58, #f1bdbd, #65ee22, #af485d);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 30px rgba(61, 255, 171, .1));
  display: inline-block;
  animation: brandGradientShift 6s ease-in-out infinite;
}
@keyframes wmGradSlide { to { background-position: 200% center; } }

.wm-lead { font-size: 17px; color: var(--wm-ink-2); line-height: 1.65; }
.wm-head-dark .wm-lead { color: #94a3b8; }

/* ============================================================
   HERO — two-column: copy left, learner desk right (laptop in
   the middle, ratings left end, awards right end, speech bubble
   below following the playing review).
   ============================================================ */
.wm-hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding: calc(var(--header-height) + 40px) 0 70px;
  overflow: hidden;
  background: var(--wm-bg-dark);
}
.wm-hero-bg { position: absolute; inset: 0; }
.wm-hero-video { width: 100%; height: 100%; object-fit: cover; opacity: .8; }
.wm-hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(3, 7, 18, .68) 0%, rgba(3, 7, 18, .36) 34%, rgba(3, 7, 18, .12) 62%, rgba(3, 7, 18, .04) 100%),
    linear-gradient(180deg, rgba(3, 7, 18, .45) 0%, rgba(3, 7, 18, 0) 32%, rgba(3, 7, 18, 0) 62%, #030712 100%);
}
.wm-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(148, 163, 184, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, .06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(60% 55% at 50% 32%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(60% 55% at 50% 32%, #000 30%, transparent 75%);
  animation: wmGridDrift 26s linear infinite;
}
@keyframes wmGridDrift { to { background-position: 56px 56px, 56px 56px; } }

.wm-hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 0.65fr 1fr;
  gap: 60px;
  align-items: center;
  /* the hero runs a little wider than the 1280px page container so the
     learner desk gets room for a properly sized laptop */
  max-width: 1400px;
}
@media (min-width: 1181px) and (max-width: 1399px) {
  .wm-hero-inner { transform: translateX(40px); }
}
@media (min-width: 1400px) {
  .wm-hero-inner { transform: translateX(56px); }
}

/* ============================================================
   HERO STICKER — rating-only cute die-cut sticker: cream pill
   face, white cut edge, gold stars + Caveat handwriting count,
   orbiting sparkles.
   Layers: .wm-sticker (entrance pop) → .wm-stk-tilt (resting
   tilt + hover straighten) → .wm-stk-face (idle float bob).
   ============================================================ */
.wm-sticker {
  position: relative;
  display: inline-block;
  margin-bottom: 30px;
  opacity: 0;
  animation: wmStickerIn .85s cubic-bezier(.34, 1.56, .64, 1) .2s forwards;
}
@keyframes wmStickerIn {
  0%   { opacity: 0; transform: translateY(30px) scale(.6) rotate(-8deg); }
  55%  { opacity: 1; transform: translateY(-6px) scale(1.07) rotate(1.6deg); }
  78%  { transform: translateY(2px) scale(.97) rotate(-3.4deg); }
  100% { opacity: 1; transform: none; }
}

.wm-stk-tilt {
  position: relative;
  transform: rotate(-2deg);
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1);
}
.wm-sticker:hover .wm-stk-tilt { transform: rotate(0deg) translateY(-4px) scale(1.025); }

.wm-stk-face {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  padding: 10px 22px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06); /* transparent glass — video shows through */
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  color: #ffffff;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, .85),
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 10px 28px rgba(2, 8, 20, .35);
  overflow: hidden;
  animation: wmStkFloat 5.2s ease-in-out 1.2s infinite;
}
@keyframes wmStkFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-4px) rotate(.5deg); }
}
/* sticker gloss — a shine sweeps across every few seconds */
.wm-stk-face::after {
  content: "";
  position: absolute;
  inset: -30% -25%;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .5) 50%, transparent 58%);
  transform: translateX(-140%) skewX(-8deg);
  animation: wmStkShine 5.2s ease-in-out 2.2s infinite;
  pointer-events: none;
}
@keyframes wmStkShine {
  0%        { transform: translateX(-140%) skewX(-8deg); }
  34%, 100% { transform: translateX(140%) skewX(-8deg); }
}

/* --- rating segment ---------------------------------------- */
.wm-stk-rating {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.wm-sticker .wm-stars { display: inline-flex; align-items: center; gap: 3.5px; font-size: 14px; color: #fbbf24; }
.wm-sticker .wm-stars i {
  opacity: 0;
  animation:
    wmStkStarPop .5s cubic-bezier(.34, 1.8, .64, 1) forwards,
    wmStkStarTwinkle 2.6s ease-in-out infinite;
}
.wm-sticker .wm-stars i:nth-child(1) { animation-delay: .95s,  2.35s; }
.wm-sticker .wm-stars i:nth-child(2) { animation-delay: 1.06s, 2.6s;  }
.wm-sticker .wm-stars i:nth-child(3) { animation-delay: 1.17s, 2.85s; }
.wm-sticker .wm-stars i:nth-child(4) { animation-delay: 1.28s, 3.1s;  }
.wm-sticker .wm-stars i:nth-child(5) { animation-delay: 1.39s, 3.35s; }
@keyframes wmStkStarPop {
  from { opacity: 0; transform: scale(0) rotate(-45deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes wmStkStarTwinkle {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50%      { transform: scale(1.28) rotate(12deg); filter: brightness(1.3); }
}
/* Caveat handwriting — script fonts read small, so sizes run larger */
.wm-sticker .wm-rating-count {
  font-family: 'Caveat', cursive;
  font-size: 23px;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  transform: translateY(-1px);
}
.wm-stk-word {
  font-family: 'Caveat', cursive;
  font-size: 19px;
  font-weight: 600;
  line-height: 1;
  color: rgba(255, 255, 255, .92);
}

/* --- orbiting sparkles ------------------------------------- */
.wm-stk-spark {
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--wm-green);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  opacity: 0;
  pointer-events: none;
  animation: wmStkSparkle 2.8s ease-in-out infinite;
}
.wm-stk-spark-1 { top: -16px; left: -22px; animation-delay: 1.6s; }
.wm-stk-spark-2 { bottom: -13px; right: 34px; width: 10px; height: 10px; background: #fbbf24; animation-delay: 2.55s; }
.wm-stk-spark-3 { top: -12px; right: -20px; width: 8px; height: 8px; background: #67e8f9; animation-delay: 3.35s; }
@keyframes wmStkSparkle {
  0%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); }
  50%      { opacity: 1; transform: scale(1) rotate(90deg); }
}

@media (max-width: 640px) {
  .wm-sticker { margin-bottom: 24px; }
  .wm-stk-face { gap: 7px; padding: 9px 18px 11px; }
  .wm-sticker .wm-stars { font-size: 13px; }
  .wm-sticker .wm-rating-count { font-size: 21px; }
  .wm-stk-word { font-size: 17px; }
  .wm-stk-spark-3 { right: -14px; }
}

.wm-h1 {
  font-family: var(--font-heading);
  font-size: clamp(52px, 6.8vw, 108px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.03em;
  color: #f8fafc;
  margin: 0 auto 18px;
}
.wm-h1-line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.wm-h1-w { display: inline-block; transform: translateY(110%); opacity: 0; animation: wmWordUp .9s cubic-bezier(.22, 1, .36, 1) forwards; }
.wm-h1-line:nth-child(1) .wm-h1-w { animation-delay: .15s; }
.wm-h1-line:nth-child(2) .wm-h1-w:nth-child(1) { animation-delay: .3s; }
.wm-h1-line:nth-child(2) .wm-h1-w:nth-child(2) { animation-delay: .42s; }
@keyframes wmWordUp { to { transform: translateY(0); opacity: 1; } }
.wm-h1-grad {
  /* training-page awards shimmer (wd-gx): gold → amber → rose, flowing.
     text-shadow must be off — with a transparent text fill it paints a veil. */
  text-shadow: none;
  background-image: linear-gradient(115deg, #fde68a 0%, #fbbf24 30%, #fb7185 65%, #fde68a 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: wmWordUp .9s cubic-bezier(.22, 1, .36, 1) .3s forwards, wmGxFlow 6s ease-in-out infinite;
}
@keyframes wmGxFlow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.wm-hero-sub {
  font-size: clamp(15.5px, 1.5vw, 17.5px);
  line-height: 1.65;
  color: #cbd5e1;
  max-width: 680px;
  margin: 26px 0 0;
}
.wm-hero-sub b { color: #fff; }
.wm-hero-sub2 {
  font-size: 13.5px;
  line-height: 1.7;
  color: #8ea0bd;
  max-width: 700px;
  margin: 12px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: -webkit-line-clamp .4s ease;
  cursor: pointer;
}
.wm-hero-sub2:hover, .wm-hero-sub2.open { -webkit-line-clamp: unset; }

.wm-hero-ctas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 32px;
}
/* ---- the deal: a cute die-cut price tag — cream paper, punched
   eyelet + green cord, swings gently from its hole. Matches the
   hero rating sticker family (same paper, cut edge, Caveat hand). ---- */
.wm-price-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 54px 12px 40px;
  border-radius: 12px 22px 22px 12px;
  background: linear-gradient(160deg, #fffef8 30%, #fff4dd);
  color: var(--wm-ink);
  box-shadow:
    0 0 0 3.5px #ffffff,
    0 16px 34px rgba(2, 8, 20, .5),
    0 6px 40px rgba(61, 255, 171, .14);
  transform-origin: 22px 55%;
  animation: wmTagSwing 5.5s ease-in-out infinite alternate;
}
/* the tag hangs and swings gently from its eyelet */
@keyframes wmTagSwing {
  from { transform: rotate(-1.4deg); }
  to { transform: rotate(1.6deg); }
}
.wm-pc-eyelet {
  position: absolute;
  left: 17px;
  top: 50%;
  translate: 0 -50%;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #0b1220; /* the dark hero shows through the punched hole */
  box-shadow:
    0 0 0 3.5px #f1e4c4,
    inset 0 1px 2px rgba(0, 0, 0, .6);
}
/* the cord the tag hangs from */
.wm-pc-string {
  position: absolute;
  bottom: calc(100% - 4px);
  left: 8px;
  width: 26px;
  height: 22px;
  border: 2px solid rgba(12, 157, 99, .55);
  border-bottom: none;
  border-right: none;
  border-top-left-radius: 100% 100%;
  pointer-events: none;
}
/* the price in the same handwriting as the rating sticker */
.wm-price-now {
  font-family: 'Caveat', cursive;
  font-size: 34px;
  font-weight: 700;
  line-height: .9;
  color: #089c5c;
}
.wm-pc-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 12px;
  border-left: 1px dashed rgba(15, 23, 42, .18);
}
.wm-price-was {
  font-family: 'Caveat', cursive;
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  color: #b09a6d;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
.wm-pc-cap {
  font-family: 'Caveat', cursive;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: #9b8a64;
  white-space: nowrap;
}
/* the save badge sits on the corner like a tiny pink heart sticker */
.wm-price-save {
  position: absolute;
  top: -13px;
  right: -10px;
  transform: rotate(8deg);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--wm-font-num);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #ffffff;
  background: linear-gradient(135deg, #fb7185, #f43f5e);
  padding: 5px 10px;
  border-radius: 999px;
  box-shadow: 0 0 0 2.5px #ffffff, 0 8px 18px -4px rgba(244, 63, 94, .6);
  animation: wmSaveWiggle 3.2s ease-in-out infinite;
}
.wm-price-save i { font-size: 8.5px; animation: wmPcHeartBeat 1.9s ease-in-out 1.2s infinite; }
@keyframes wmPcHeartBeat {
  0%, 86%, 100% { transform: scale(1); }
  91%           { transform: scale(1.4); }
  96%           { transform: scale(1); }
}
/* a little sparkle keeps the tag in the sticker family */
.wm-pc-spark {
  position: absolute;
  top: -14px;
  left: 36px;
  width: 11px;
  height: 11px;
  background: var(--wm-green);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  opacity: 0;
  pointer-events: none;
  animation: wmStkSparkle 2.8s ease-in-out 2.1s infinite;
}
@keyframes wmSaveWiggle {
  0%, 88%, 100% { transform: rotate(6deg); }
  92% { transform: rotate(2deg); }
  96% { transform: rotate(9deg); }
}
@media (max-width: 1280px) {
  /* the copy column narrows below 1280 — drop the caption so the
     price tag and the enroll button stay on one line */
  .wm-pc-cap { display: none; }
}

/* ---- bundle highlights: one centered pill above the CTAs ---- */
.wm-hero-perks {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
  margin: 26px 0 0; /* left-aligned with the rest of the hero column */
  padding: 7px 8px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .22);
  background: linear-gradient(120deg, rgba(61, 255, 171, .09), rgba(13, 21, 38, .72) 38%, rgba(13, 21, 38, .72) 62%, rgba(240, 171, 252, .09));
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.wm-hero-perks li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 9px;
}
/* soft divider between the perks inside the pill */
.wm-hero-perks li + li { border-left: 1px solid rgba(148, 163, 184, .18); }
.wm-hero-perks li:nth-child(1) { --glow: rgba(61, 255, 171, .4); --badge: linear-gradient(135deg, #3dffab, #65ee22); }
.wm-hero-perks li:nth-child(2) { --glow: rgba(251, 191, 36, .4); --badge: linear-gradient(135deg, #fde047, #f59e0b); }
.wm-hero-perks li:nth-child(3) { --glow: rgba(240, 171, 252, .4); --badge: linear-gradient(135deg, #f0abfc, #e879f9); }
.wm-hero-perks li:hover .wm-perk-ico { transform: rotate(10deg) scale(1.15); }
.wm-perk-ico {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 13px;
  color: #061018;
  background: var(--badge);
  box-shadow: 0 5px 14px -3px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .45);
  transform: rotate(-6deg);
  transition: transform .35s cubic-bezier(.34, 1.8, .5, 1);
}
/* heading with the sub-text stacked to the right of the icon */
.wm-perk-txt { display: flex; flex-direction: column; gap: 1px; }
.wm-perk-num {
  font-family: var(--wm-font-num);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.15;
  background: linear-gradient(100deg, var(--wm-green) 10%, var(--wm-green2) 45%, var(--wm-cyan) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.wm-perk-label {
  font-family: 'Caveat', cursive;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.1;
  color: #9fb1cd;
}

/* ---- gooey bubble enroll button (ported from the training page) ----
   rest: brand green — hover: the blob bursts and turns cyan */
.wm-goo-wrap { position: relative; animation: wmGooIn .8s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes wmGooIn { from { opacity: 0; transform: translateY(24px); } }
.wm-goo-wrap .goo { position: absolute; visibility: hidden; width: 1px; height: 1px; }
.wm-goo-wrap .button {
  -webkit-font-smoothing: antialiased;
  background-color: var(--wm-green);
  border: none;
  border-radius: 999px;
  color: #061018;
  display: inline-block;
  font-family: var(--wm-font-num);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  user-select: none;
  letter-spacing: .2px;
  padding: 14px 28px;
  transition: all .1s ease-out;
}
.wm-goo-wrap .button:hover { background-color: var(--wm-cyan); color: #fff; }
.wm-goo-wrap .button:active { transform: scale(.95); }
.wm-goo-wrap .button--bubble {
  position: relative;
  z-index: 2;
  color: #061018;
  background: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.wm-goo-wrap .button--bubble i { font-size: 13px; line-height: 1; }
.wm-goo-wrap .button--bubble:hover { background: none; color: #fff; }
.wm-goo-wrap .button--bubble:hover + .button--bubble__effect-container .circle { background: var(--wm-cyan); }
.wm-goo-wrap .button--bubble:hover + .button--bubble__effect-container .button { background: var(--wm-cyan); }
.wm-goo-wrap .button--bubble:active + .button--bubble__effect-container { transform: scale(.95); }
.wm-goo-wrap .button--bubble__container { position: relative; display: inline-block; }
.wm-goo-wrap .effect-button {
  position: absolute;
  width: 50%;
  height: 25%;
  top: 50%;
  left: 25%;
  z-index: 1;
  transform: translateY(-50%);
  background: var(--wm-green);
  border-radius: 999px;
  transition: background .1s ease-out;
}
.wm-goo-wrap .button--bubble__effect-container {
  position: absolute;
  display: block;
  width: 200%;
  height: 400%;
  top: -150%;
  left: -50%;
  filter: url("#wmGoo");
  transition: all .1s ease-out;
  pointer-events: none;
}
.wm-goo-wrap .circle {
  position: absolute;
  width: 25px;
  height: 25px;
  border-radius: 15px;
  background: var(--wm-green);
  transition: background .1s ease-out;
}
.wm-goo-wrap .circle.top-left { top: 40%; left: 27%; }
.wm-goo-wrap .circle.bottom-right { bottom: 40%; right: 27%; }
@keyframes wmBurstOut {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  55% { transform: translate(-40px, -34px) scale(1.15); opacity: 1; }
  100% { transform: translate(-50px, -42px) scale(0); opacity: 0; }
}
@keyframes wmBurstIn {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  55% { transform: translate(34px, 30px) scale(1.15); opacity: 1; }
  100% { transform: translate(42px, 36px) scale(0); opacity: 0; }
}
@keyframes wmBlobSquash {
  0% { transform: translateY(-50%) scaleY(1); }
  25% { transform: translateY(-50%) scaleY(1.12); }
  60% { transform: translateY(-50%) scaleY(.97); }
  100% { transform: translateY(-50%) scaleY(1); }
}
.wm-goo-wrap .button--bubble:hover + .button--bubble__effect-container .circle.top-left { animation: wmBurstOut .85s cubic-bezier(.22, 1, .36, 1) forwards; }
.wm-goo-wrap .button--bubble:hover + .button--bubble__effect-container .circle.top-left:nth-child(2) { animation-delay: .07s; }
.wm-goo-wrap .button--bubble:hover + .button--bubble__effect-container .circle.top-left:nth-child(3) { animation-delay: .14s; }
.wm-goo-wrap .button--bubble:hover + .button--bubble__effect-container .circle.bottom-right { animation: wmBurstIn .85s cubic-bezier(.22, 1, .36, 1) forwards; }
.wm-goo-wrap .button--bubble:hover + .button--bubble__effect-container .circle.bottom-right:nth-child(6) { animation-delay: .05s; }
.wm-goo-wrap .button--bubble:hover + .button--bubble__effect-container .circle.bottom-right:nth-child(7) { animation-delay: .1s; }
.wm-goo-wrap .button--bubble:hover + .button--bubble__effect-container .effect-button { animation: wmBlobSquash 1.1s cubic-bezier(.22, 1, .36, 1); }

/* ============================================================
   HERO LEARNER DESK — the laptop plays the learner reviews in
   the middle; ratings on the left end, awards on the right end,
   and a speech bubble below that follows the playing review.
   ============================================================ */
.wm-hero-visual { position: relative; display: flex; justify-content: center; }

.wm-stage {
  position: relative;
  width: min(760px, 100%);
  display: grid;
  grid-template-columns: 212px minmax(0, 1fr) 268px;
  grid-template-areas:
    "ratings laptop awards"
    "bubble  bubble  bubble";
  gap: 10px;
  align-items: center;
}
/* soft glow under the whole desk */
.wm-stage::before {
  content: '';
  position: absolute;
  inset: 6% -4% 0;
  background:
    radial-gradient(46% 42% at 50% 48%, rgba(61, 255, 171, .1), transparent 70%),
    radial-gradient(30% 30% at 10% 16%, rgba(6, 182, 212, .1), transparent 70%);
  filter: blur(14px);
  pointer-events: none;
}

/* ---- side cards (both ends) ---- */
.wm-side {
  background: rgba(13, 22, 40, .78);
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 26px 54px -30px rgba(0, 0, 0, .95);
}
.wm-side-ratings { grid-area: ratings; padding: 12px 12px 10px; overflow: hidden; position: relative; }
.wm-side-awards { grid-area: awards; padding: 12px 12px 10px; overflow: hidden; position: relative; }

/* both side cards wear the workday-training page's "certificate" look:
   glass gradient, tinted border and gold/cyan corner brackets */
.wm-side-ratings {
  background: linear-gradient(165deg, rgba(13, 27, 46, .96), rgba(7, 13, 25, .97));
  border-color: rgba(56, 189, 248, .35);
  box-shadow: inset 0 1px 0 rgba(148, 197, 245, .14), 0 2px 3px rgba(0, 0, 0, .4), 0 28px 56px -20px rgba(0, 0, 0, .75);
}
.wm-side-awards {
  background: linear-gradient(165deg, rgba(35, 28, 14, .96), rgba(16, 12, 6, .97));
  border-color: rgba(251, 191, 36, .38);
  box-shadow: inset 0 1px 0 rgba(253, 230, 138, .14), 0 2px 3px rgba(0, 0, 0, .4), 0 28px 56px -20px rgba(0, 0, 0, .75);
}
.wm-side-ratings::before, .wm-side-awards::before {
  content: ''; position: absolute; top: 6px; left: 6px; width: 13px; height: 13px;
  border-top: 1.5px solid rgba(56, 189, 248, .65); border-left: 1.5px solid rgba(56, 189, 248, .65);
}
.wm-side-ratings::after, .wm-side-awards::after {
  content: ''; position: absolute; bottom: 6px; right: 6px; width: 13px; height: 13px;
  border-bottom: 1.5px solid rgba(56, 189, 248, .65); border-right: 1.5px solid rgba(56, 189, 248, .65);
}
.wm-side-awards::before { border-top-color: rgba(251, 191, 36, .7); border-left-color: rgba(251, 191, 36, .7); }
.wm-side-awards::after { border-bottom-color: rgba(251, 191, 36, .7); border-right-color: rgba(251, 191, 36, .7); }

.wm-side-title {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--wm-font-num);
  font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(186, 215, 245, .6);
  margin-bottom: 8px;
  white-space: nowrap;
}
.wm-side-title i { color: #38bdf8; font-size: 11px; }

/* ratings: six platform rows, logo chip + name + score & stars */
.wm-r-rows { display: flex; flex-direction: column; gap: 5px; }
.wm-r-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 7px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
  border: 1px solid rgba(255, 255, 255, .07);
  text-decoration: none;
  color: inherit;
  transition: border-color .35s ease, background .35s ease;
  animation: wmRowIn .5s cubic-bezier(.22, 1, .36, 1) backwards;
}
.wm-r-row:hover {
  border-color: rgba(56, 189, 248, .45);
  background: linear-gradient(180deg, rgba(56, 189, 248, .12), rgba(56, 189, 248, .04));
}
.wm-r-row:nth-child(1) { animation-delay: .55s; }
.wm-r-row:nth-child(2) { animation-delay: .63s; }
.wm-r-row:nth-child(3) { animation-delay: .71s; }
.wm-r-row:nth-child(4) { animation-delay: .79s; }
.wm-r-row:nth-child(5) { animation-delay: .87s; }
.wm-r-row:nth-child(6) { animation-delay: .95s; }
@keyframes wmRowIn { from { opacity: 0; transform: translateX(-10px); } }
.wm-r-logo {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(255, 255, 255, .25);
}
.wm-r-logo img { width: 13px; height: 13px; object-fit: contain; display: block; }
.wm-r-row b {
  flex: 1;
  min-width: 0;
  font-family: var(--wm-font-num);
  font-size: 11px;
  font-weight: 600;
  color: rgba(240, 246, 255, .95);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wm-r-row small { display: flex; align-items: center; gap: 4px; flex: none; }
.wm-r-row em { font-style: normal; font-family: var(--wm-font-num); font-size: 11px; font-weight: 800; color: #fcd34d; }
.wm-r-stars { font-size: 7px; color: #fde047; letter-spacing: 1px; }

/* ---- middle: the laptop (hinge + keyboard deck + glass sheen) ---- */
.wm-laptop {
  grid-area: laptop;
  position: relative;
  z-index: 2;
  width: min(560px, 100%);
  margin: 56px auto 0;
  cursor: pointer;
  animation: wmDeskIn .9s .15s cubic-bezier(.22, 1, .36, 1) backwards,
             wmLaptopBob 7s 1.3s ease-in-out infinite;
}
.wm-laptop.wm-watching { cursor: default; animation-play-state: paused; }
@keyframes wmDeskIn { from { opacity: 0; transform: translateY(28px) scale(.97); } }
@keyframes wmLaptopBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

.wm-lt-screen {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 8px solid #121b2e;
  outline: 1px solid rgba(255, 255, 255, .1);
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  background: #05080f;
  overflow: hidden;
  box-shadow: 0 34px 74px -30px rgba(0, 0, 0, .95);
}
.wm-lt-screen::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  translate: -50% 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #42547c;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .05);
}
.wm-lt-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .05) 44%, rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, .05) 56%, transparent 70%);
  background-size: 240% 100%;
  animation: wmGlassSheen 8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes wmGlassSheen {
  0%   { background-position: 130% 0; }
  55%  { background-position: -70% 0; }
  100% { background-position: -70% 0; }
}
.wm-lt-base {
  position: relative;
  height: 13px;
  margin: 0 -10px;
  background: linear-gradient(180deg, #46537a 0%, #2a3552 40%, #182036 100%);
  border-radius: 3px 3px 8px 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}
.wm-lt-base::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 3%;
  right: 3%;
  height: 7px;
  background: linear-gradient(180deg, #1c2540, #0c1222);
  border-radius: 0 0 14px 14px;
  box-shadow: 0 18px 36px -16px rgba(0, 0, 0, .9);
}
.wm-lt-notch {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  width: 96px;
  height: 6px;
  background: #101828;
  border-radius: 0 0 9px 9px;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .06);
}
.wm-laptop:hover .wm-lt-screen { border-color: #1d2a44; }

/* floating sparkles around the laptop */
.wm-lt-spark {
  position: absolute;
  z-index: 1;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3dffab;
  box-shadow: 0 0 10px rgba(61, 255, 171, .9);
  animation: wmSparkFloat 5.5s ease-in-out infinite;
  pointer-events: none;
}
.wm-lt-spark-a { top: 6%; left: -20px; }
.wm-lt-spark-b { top: -4%; right: 6%; width: 4px; height: 4px; background: #06b6d4; box-shadow: 0 0 10px rgba(6, 182, 212, .9); animation-delay: 1.2s; animation-duration: 6.5s; }
.wm-lt-spark-c { bottom: 4%; right: -18px; width: 5px; height: 5px; background: #fbbf24; box-shadow: 0 0 10px rgba(251, 191, 36, .9); animation-delay: 2.2s; }
@keyframes wmSparkFloat {
  0%, 100% { transform: translateY(0) scale(1); opacity: .45; }
  50%      { transform: translateY(-14px) scale(1.25); opacity: 1; }
}

/* ---- 3D rating coin on top of the laptop ---- */
.wm-lt-badge {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 7;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -97%);
  transform-style: preserve-3d;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 24%, rgba(61, 255, 171, .2), transparent 55%),
    linear-gradient(160deg, #1c2c4e 0%, #0c1426 58%, #12203a 100%);
  box-shadow:
    inset 0 2px 6px rgba(255, 255, 255, .16),
    inset 0 -7px 14px rgba(0, 0, 0, .55),
    0 18px 38px -12px rgba(0, 0, 0, .85),
    0 0 30px -6px rgba(61, 255, 171, .35);
  animation: wmCoin3d 7s ease-in-out infinite;
}
.wm-lt-badge::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 2.5px;
  background: conic-gradient(from 200deg, #3dffab, #06b6d4 42%, #16223c 68%, #3dffab);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
}
.wm-lt-badge::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(115deg, transparent 36%, rgba(255, 255, 255, .15) 50%, transparent 64%);
  background-size: 240% 100%;
  animation: wmGlassSheen 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes wmCoin3d {
  0%, 100% { transform: translate(-50%, -97%) rotateX(18deg) rotateY(-14deg); }
  25%      { transform: translate(-50%, -106%) rotateX(6deg) rotateY(10deg); }
  50%      { transform: translate(-50%, -112%) rotateX(22deg) rotateY(0deg); }
  75%      { transform: translate(-50%, -104%) rotateX(9deg) rotateY(13deg); }
}
.wm-lt-badge-num { font-family: var(--wm-font-num); font-size: 23px; font-weight: 700; line-height: 1; color: #fff; }
.wm-lt-badge-stars { display: inline-flex; gap: 1.5px; color: #fbbf24; font-size: 8px; }
.wm-lt-badge-cap {
  font-family: var(--wm-font-num);
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8ea0bd;
}

/* video chrome */
.wm-v-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* the reviews are portrait phone clips — bias the crop to the top so
     faces stay fully in frame on the taller screen */
  object-position: 50% 20%;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1), filter .5s cubic-bezier(.22, 1, .36, 1);
}
.wm-v-wipe {
  position: absolute;
  inset: -12% -24%;
  z-index: 3;
  background: linear-gradient(100deg, transparent 32%, rgba(255, 255, 255, .25) 50%, transparent 68%);
  transform: translateX(-140%) skewX(-16deg);
  pointer-events: none;
  opacity: 0;
}
.wm-laptop.wm-swapping .wm-v-wipe { animation: wmSwoosh .6s cubic-bezier(.22, 1, .36, 1); }
.wm-laptop.wm-swapping .wm-v-video { transform: translateX(-14px) scale(1.04); filter: blur(2px) brightness(1.1); }
@keyframes wmSwoosh {
  from { transform: translateX(-140%) skewX(-16deg); opacity: 1; }
  to   { transform: translateX(140%) skewX(-16deg); opacity: 1; }
}
.wm-v-play {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  z-index: 4;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding-left: 4px;
  background: rgba(255, 255, 255, .92);
  color: #0b1526;
  font-size: 14px;
  pointer-events: none;
  transition: transform .25s ease;
}
.wm-v-play i { animation: wmPlayPulse 2.4s ease-out infinite; }
@keyframes wmPlayPulse {
  0%  { box-shadow: 0 0 0 0 rgba(255, 255, 255, .35); }
  70% { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
.wm-laptop:hover .wm-v-play { transform: scale(1.07); }
.wm-v-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 22px 10px 8px;
  background: linear-gradient(180deg, rgba(5, 8, 15, 0), rgba(5, 8, 15, .88) 72%);
}
.wm-v-name {
  font-family: var(--wm-font-num);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wm-v-tag { flex: none; font-size: 9.5px; color: #a9bad6; letter-spacing: .04em; }

/* ---- watching: full review with sound on the laptop screen ---- */
.wm-laptop.wm-watching .wm-lt-screen { border-color: #1d2a44; }
.wm-laptop.wm-watching .wm-v-video { object-fit: contain; object-position: center; background: #000; }
.wm-laptop.wm-watching .wm-v-cap,
.wm-laptop.wm-watching .wm-v-play { display: none; }
.wm-v-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 6;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(10, 16, 28, .72);
  color: #fff;
  font-size: 10px;
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, background .25s ease;
}
.wm-laptop.wm-watching .wm-v-close { opacity: 1; visibility: visible; }
.wm-v-close:hover { background: rgba(30, 43, 70, .9); }
.wm-v-ctrls {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 9px;
  background: rgba(7, 12, 22, .85);
  border: 1px solid rgba(255, 255, 255, .08);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease;
}
.wm-laptop.wm-watching .wm-v-ctrls { opacity: 1; visibility: visible; }
.wm-v-btn {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-size: 9.5px;
  display: grid;
  place-items: center;
  transition: background .2s ease;
}
.wm-v-btn:hover { background: rgba(255, 255, 255, .2); }
.wm-v-prog {
  position: relative;
  flex: 1;
  height: 16px;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
}
.wm-v-prog::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .2);
}
.wm-v-fill {
  position: absolute;
  left: 0;
  top: 50%;
  width: 0%;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 99px;
  background: #3dffab;
}
.wm-v-knob {
  position: absolute;
  right: -4px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  translate: 0 -50%;
  background: #fff;
}

/* ---- speech bubble: follows the review playing on the laptop ----
   3D glass: gradient ring border, layered depth shadow, perspective tilt */
.wm-bubble {
  grid-area: bubble;
  position: relative;
  z-index: 3;
  width: min(540px, 100%);
  margin: 0 auto;
  border: 1px solid transparent;
  border-radius: 20px;
  padding: 15px 20px 14px;
  background:
    linear-gradient(165deg, rgba(18, 30, 56, .94), rgba(7, 13, 27, .97)) padding-box,
    linear-gradient(135deg, rgba(61, 255, 171, .55), rgba(101, 238, 34, .4) 45%, rgba(6, 182, 212, .35) 90%) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 4px 14px rgba(0, 0, 0, .45),
    0 36px 70px -26px rgba(0, 0, 0, .95);
  animation: wmBubbleIn .8s .55s cubic-bezier(.22, 1, .36, 1) backwards,
             wmBubble3D 7s 1.7s ease-in-out infinite;
}
/* glossy light sweep, clipped inside the card */
.wm-bubble::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .09) 50%, transparent 58%);
  background-size: 240% 100%;
  animation: wmGlassSheen 8s 2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes wmBubble3D {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes wmBubbleIn { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.wm-b-tail {
  position: absolute;
  top: -8px;
  left: 50%;
  translate: -50% 0;
  width: 15px;
  height: 15px;
  background: #0c1730;
  border-left: 1px solid rgba(61, 255, 171, .45);
  border-top: 1px solid rgba(61, 255, 171, .45);
  border-top-left-radius: 3px;
  transform: rotate(45deg);
}
.wm-q-stage { position: relative; z-index: 2; }
.wm-q-slide { display: none; }
.wm-q-slide.is-on { display: block; animation: wmQSlide .5s cubic-bezier(.22, 1, .36, 1); }
@keyframes wmQSlide { from { opacity: 0; transform: translateY(10px); } }
.wm-q-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.wm-q-plat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #16223c, #101a30);
  border: 1px solid rgba(61, 255, 171, .3);
  color: #cfe0ff;
  font-family: var(--wm-font-num);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 0 14px -4px rgba(61, 255, 171, .45);
}
.wm-q-plat i { color: var(--wm-green); }
.wm-q-stars { display: inline-flex; gap: 2px; color: #fbbf24; font-size: 9.5px; }
.wm-q-stars i { filter: drop-shadow(0 0 4px rgba(251, 191, 36, .45)); }
.wm-q-slide.is-on .wm-q-stars i {
  animation: wmStarPop .5s cubic-bezier(.34, 1.56, .64, 1) backwards,
             wmStarTwinkle 2.6s ease-in-out infinite;
  animation-delay: .1s, .8s;
}
.wm-q-slide.is-on .wm-q-stars i:nth-child(2) { animation-delay: .17s, .95s; }
.wm-q-slide.is-on .wm-q-stars i:nth-child(3) { animation-delay: .24s, 1.1s; }
.wm-q-slide.is-on .wm-q-stars i:nth-child(4) { animation-delay: .31s, 1.25s; }
.wm-q-slide.is-on .wm-q-stars i:nth-child(5) { animation-delay: .38s, 1.4s; }
@keyframes wmStarPop { from { transform: scale(0) rotate(-40deg); } to { transform: scale(1) rotate(0deg); } }
@keyframes wmStarTwinkle { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.wm-q-text {
  font-family: 'Caveat', cursive;
  font-size: 21px;
  line-height: 1.4;
  color: #dbe6f8;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wm-q-slide.is-on .wm-q-text { animation: wmQTextIn .5s .08s cubic-bezier(.22, 1, .36, 1) backwards; }
.wm-q-slide.is-on .wm-q-who { animation: wmQTextIn .5s .16s cubic-bezier(.22, 1, .36, 1) backwards; }
@keyframes wmQTextIn { from { opacity: 0; transform: translateY(8px); } }
.wm-q-who { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.wm-q-who img {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  border: 2px solid transparent;
  background: linear-gradient(#0c1730, #0c1730) padding-box,
              linear-gradient(135deg, var(--wm-green) 10%, var(--wm-green2) 45%, var(--wm-cyan) 90%) border-box;
  animation: wmAvatarPulse 3s ease-in-out infinite;
}
@keyframes wmAvatarPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(61, 255, 171, .3); }
  50% { box-shadow: 0 0 0 4px rgba(61, 255, 171, .12); }
}
.wm-q-who b { display: block; font-size: 14px; color: #eef4ff; }
.wm-q-who small { display: block; font-size: 12px; color: #9fb1cd; }

/* ---- awards ---- */
.wm-aw-heading {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--wm-font-num);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(253, 230, 138, .72);
  margin-bottom: 8px;
}
.wm-aw-heading i { color: #f59e0b; font-size: 11px; }
.wm-aw-list { display: flex; flex-direction: column; gap: 5px; }
.wm-aw-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
  border: 1px solid rgba(255, 255, 255, .10);
  text-decoration: none;
  transition: border-color .4s ease, background .4s ease, transform .4s ease;
  animation: wmRowIn .5s cubic-bezier(.22, 1, .36, 1) backwards;
}
.wm-aw-item:nth-child(1) { animation-delay: .65s; }
.wm-aw-item:nth-child(2) { animation-delay: .75s; }
.wm-aw-item:nth-child(3) { animation-delay: .85s; }
.wm-aw-item:nth-child(4) { animation-delay: .95s; }
.wm-aw-item:hover {
  border-color: rgba(251, 191, 36, .6);
  background: linear-gradient(180deg, rgba(251, 191, 36, .14), rgba(251, 191, 36, .05));
  transform: translateX(3px);
}
.wm-aw-item img {
  flex: none; width: 34px; height: 34px; object-fit: contain;
  filter: drop-shadow(0 3px 12px rgba(245, 158, 11, .55));
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.wm-aw-item:hover img { transform: scale(1.12) rotate(-4deg); }
.wm-aw-item span { min-width: 0; display: block; }
.wm-aw-item b {
  display: block;
  font-family: var(--wm-font-num);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #fff;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wm-aw-item small {
  display: block;
  font-size: 11px;
  color: rgba(226, 236, 252, .72);
  line-height: 1.35;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.wm-scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 3;
  opacity: .75;
  transition: opacity .3s ease;
}
.wm-scroll-hint:hover { opacity: 1; }
.wm-scroll-mouse {
  display: block;
  width: 24px;
  height: 38px;
  border: 2px solid rgba(226, 232, 240, .55);
  border-radius: 14px;
  position: relative;
}
.wm-scroll-mouse span {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 4px;
  background: var(--wm-green);
  animation: wmScrollDot 1.8s ease-in-out infinite;
}
@keyframes wmScrollDot {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(12px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

/* ============================================================
   BENTO — bundle cards
   ============================================================ */
.wm-bento-sec { padding-top: 90px; padding-bottom: 90px; }
.wm-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.wm-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius-lg);
  padding: 30px 28px 34px;
  box-shadow: var(--shadow-sm);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s ease, border-color .45s ease;
}
.wm-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow-xl);
  border-color: transparent;
}
.wm-card h3 {
  font-family: var(--font-heading);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin-bottom: 10px;
  color: var(--wm-ink);
}
.wm-card p { color: var(--wm-ink-2); font-size: 15px; line-height: 1.65; }
.wm-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  font-size: 20px;
  margin-bottom: 20px;
  color: #fff;
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1);
}
.wm-card:hover .wm-card-icon { transform: scale(1.12) rotate(-6deg); }
.wm-ic-green { background: linear-gradient(135deg, #10b981, #34d399); box-shadow: 0 10px 24px rgba(16, 185, 129, .32); }
.wm-ic-blue { background: linear-gradient(135deg, #1a56db, #3b82f6); box-shadow: 0 10px 24px rgba(26, 86, 219, .32); }
.wm-ic-cyan { background: linear-gradient(135deg, #0891b2, #22d3ee); box-shadow: 0 10px 24px rgba(8, 145, 178, .32); }
.wm-ic-violet { background: linear-gradient(135deg, #7c3aed, #a78bfa); box-shadow: 0 10px 24px rgba(124, 58, 237, .32); }
.wm-ic-amber { background: linear-gradient(135deg, #d97706, #fbbf24); box-shadow: 0 10px 24px rgba(217, 119, 6, .32); }
.wm-ic-rose { background: linear-gradient(135deg, #e11d48, #fb7185); box-shadow: 0 10px 24px rgba(225, 29, 72, .32); }

.wm-card-ghost {
  position: absolute;
  right: 14px;
  bottom: -12px;
  font-family: 'Unbounded', var(--wm-font-num);
  font-size: 78px;
  font-weight: 900;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.3px rgba(15, 23, 42, .07);
  pointer-events: none;
  user-select: none;
  transition: -webkit-text-stroke-color .4s ease;
}
.wm-card:hover .wm-card-ghost { -webkit-text-stroke-color: rgba(26, 86, 219, .18); }

.wm-card-wide { grid-row: span 2; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(165deg, #0b1322, #101d33 70%); border-color: #16233c; }
.wm-card-wide h3 { color: #f1f5ff; font-size: 26px; }
.wm-card-wide p { color: #9db1d3; font-size: 16px; }
.wm-card-wide .wm-card-ghost { -webkit-text-stroke-color: rgba(148, 163, 184, .14); font-size: 150px; right: 4px; bottom: -22px; }
.wm-card-wide::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 55% at 80% 0%, rgba(6, 182, 212, .16), transparent 60%);
  pointer-events: none;
}

.wm-price-card {
  background: linear-gradient(150deg, #071018, #0c1a2b);
  border: 1px solid rgba(61, 255, 171, .35);
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}
.wm-price-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--angle), transparent 12%, var(--wm-green) 22%, transparent 32%, var(--wm-cyan) 55%, transparent 68%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: wmBorderSpin 5s linear infinite;
  pointer-events: none;
}
@keyframes wmBorderSpin { to { --angle: 360deg; } }
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.wm-price-card-kicker {
  font-family: var(--wm-font-num);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--wm-green);
  display: inline-flex;
  gap: 7px;
  align-items: center;
}
.wm-price-card-amount { display: flex; align-items: baseline; gap: 12px; }
.wm-price-card-now {
  font-family: var(--wm-font-num);
  font-size: 54px;
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(100deg, var(--wm-green), var(--wm-green2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.wm-price-card-was { font-family: var(--wm-font-num); font-size: 20px; color: #64748b; text-decoration: line-through; }
.wm-price-card-note { color: #94a3b8; font-size: 13.5px; margin-bottom: 14px; }

/* ============================================================
   ABOUT — dark section + receipt
   ============================================================ */
.wm-about {
  position: relative;
  background:
    radial-gradient(52% 40% at 82% 12%, rgba(6, 182, 212, .12), transparent 62%),
    radial-gradient(44% 40% at 8% 82%, rgba(26, 86, 219, .14), transparent 62%),
    var(--wm-bg-dark);
  color: #dbe6f8;
  padding: 100px 0;
  overflow: hidden;
}
.wm-about-glow {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(61, 255, 171, .07), transparent 65%);
  top: -140px;
  right: -120px;
  pointer-events: none;
}
.wm-about-grid {
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 64px;
  align-items: center;
}
.wm-about-p { color: #9db1d3; font-size: 17px; line-height: 1.7; max-width: 560px; }

.wm-expect { margin-top: 30px; }
.wm-expect-q { font-size: 16.5px; font-weight: 700; color: #eef2ff; margin-bottom: 18px; max-width: 540px; }
.wm-expect-list { list-style: none; padding: 0; display: grid; gap: 12px; }
.wm-expect-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(13, 21, 38, .7);
  border: 1px solid var(--wm-line-dark);
  border-radius: 14px;
  padding: 15px 18px;
  font-size: 15px;
  color: #cbd5e1;
  transition: border-color .3s ease, transform .3s ease;
}
.wm-expect-list li:hover { border-color: rgba(61, 255, 171, .4); transform: translateX(5px); }
.wm-expect-list i {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 13px;
  color: var(--wm-green);
  background: rgba(61, 255, 171, .1);
  border: 1px solid rgba(61, 255, 171, .25);
}

.wm-deal {
  margin-top: 34px;
  position: relative;
  background: linear-gradient(140deg, rgba(61, 255, 171, .1), rgba(6, 182, 212, .08));
  border: 1px solid rgba(61, 255, 171, .32);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  max-width: 560px;
}
.wm-deal-badge {
  position: absolute;
  top: -18px;
  left: 24px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #071018;
  background: linear-gradient(135deg, var(--wm-green), var(--wm-green2));
  box-shadow: 0 8px 22px rgba(61, 255, 171, .4);
  animation: wmKickerBounce 2.4s ease-in-out infinite;
}
.wm-deal p { font-size: 15.5px; line-height: 1.7; color: #cbd5e1; margin-bottom: 18px; }
.wm-deal b { color: #fff; }
.wm-deal-price {
  font-family: var(--wm-font-num);
  font-size: 26px;
  color: var(--wm-green) !important;
  padding: 0 4px;
}
.wm-deal s { color: #7c8db0; }
.wm-deal .wm-btn { margin-top: 2px; }

/* ---- Value receipt ---- */
.wm-receipt-wrap { position: relative; }
.wm-receipt {
  position: relative;
  background: #f6f8fc;
  color: var(--wm-ink);
  border-radius: 6px 6px 18px 18px;
  padding: 26px 26px 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
  transform: rotate(1.2deg);
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.wm-receipt:hover { transform: rotate(0deg) translateY(-6px); }
.wm-receipt::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 0;
  right: 0;
  height: 14px;
  background: linear-gradient(135deg, transparent 33.33%, #f6f8fc 33.33%, #f6f8fc 66.66%, transparent 66.66%),
    linear-gradient(45deg, transparent 33.33%, #f6f8fc 33.33%, #f6f8fc 66.66%, transparent 66.66%);
  background-size: 14px 14px;
  background-position: 0 0, 7px 0;
}
.wm-receipt-head { text-align: center; border-bottom: 2px dashed #cdd7e6; padding-bottom: 14px; margin-bottom: 14px; }
.wm-receipt-brand img { width: 110px; height: auto; filter: brightness(0); opacity: .85; }
.wm-receipt-title { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 17px; margin-top: 6px; }
.wm-receipt-sub { font-family: var(--wm-font-num); font-size: 10px; letter-spacing: .22em; color: #7c8db0; }

.wm-receipt-rows { list-style: none; margin: 0; padding: 0; max-height: 380px; overflow-y: auto; scrollbar-width: thin; }
.wm-receipt-rows li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 4px 12px;
  align-items: baseline;
  padding: 6.5px 0;
  border-bottom: 1px dashed #e2e8f0;
  font-size: 12.8px;
  opacity: 0;
  transform: translateX(16px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--i) * 45ms);
}
.wm-receipt.visible .wm-receipt-rows li { opacity: 1; transform: translateX(0); }
.wm-rr-name { font-weight: 600; color: #1e293b; padding-right: 8px; }
.wm-rr-hours { font-family: var(--wm-font-num); font-size: 11px; color: #7c8db0; white-space: nowrap; }
.wm-rr-val { font-family: var(--wm-font-num); font-weight: 700; color: #0f172a; white-space: nowrap; }

.wm-receipt-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 0 4px;
  border-top: 2px dashed #cdd7e6;
  margin-top: 8px;
}
.wm-receipt-total span { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #7c8db0; }
.wm-receipt-total-num { font-family: var(--wm-font-num); font-size: 24px; color: #334155; }

.wm-receipt-pay {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #071018, #0c1a2b);
  color: #f1f5ff;
  border-radius: 12px;
  padding: 14px 18px;
  margin-top: 12px;
}
.wm-receipt-pay span:first-child { font-family: var(--wm-font-num); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #8ea0bd; }
.wm-receipt-pay b { font-family: var(--wm-font-num); font-size: 30px; color: var(--wm-green); margin-left: auto; line-height: 1; }
.wm-receipt-stamp {
  position: absolute;
  top: 20px;
  right: 18px;
  transform: rotate(-12deg) scale(0);
  border: 2.5px solid #e11d48;
  color: #e11d48;
  border-radius: 8px;
  font-family: var(--wm-font-num);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  padding: 5px 10px;
  opacity: .85;
  background: #fff;
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.wm-receipt.visible .wm-receipt-stamp { transform: rotate(-12deg) scale(1); transition-delay: 1.3s; }

.wm-receipt-tear {
  position: absolute;
  bottom: -7px;
  left: 0;
  right: 0;
  height: 14px;
  background: linear-gradient(-45deg, transparent 33.33%, #f6f8fc 33.33%, #f6f8fc 66.66%, transparent 66.66%),
    linear-gradient(45deg, transparent 33.33%, #f6f8fc 33.33%, #f6f8fc 66.66%, transparent 66.66%);
  background-size: 14px 14px;
  background-position: 0 0, 7px 0;
}
.wm-receipt-shadow {
  position: absolute;
  inset: 14px -8px -10px 10px;
  background: rgba(2, 6, 17, .5);
  border-radius: 20px;
  filter: blur(22px);
  z-index: -1;
}

/* ============================================================
   OBJECTIVES — "Notebook Arch": mint notebook accordion +
   arch-window scene with orbiting paper plane. Every rule is
   scoped under .wm-obj-sec so nothing leaks in or out.
   ============================================================ */
.wm-obj-sec{
  --nb-ink:#152a24; --nb-sub:#5f7a71;
  --nb-mint:#10b981; --nb-deep:#059669; --nb-teal:#14b8a6;
  --nb-rose:#fb7185; --nb-amber:#f59e0b; --nb-sky:#0ea5e9;
  --nb-shadow:rgba(5,150,105,.24);
  position:relative;overflow:hidden;
  padding:104px 0 110px;
  color:var(--nb-ink);
  background:
    radial-gradient(rgba(16,185,129,.075) 1px, transparent 1.4px) 0 0/26px 26px,
    radial-gradient(700px circle at 92% 92%, rgba(20,184,166,.06), transparent 60%),
    radial-gradient(640px circle at 4% 6%, rgba(251,113,133,.05), transparent 60%),
    #fbfdf9;
}
.wm-obj-sec .container{position:relative;z-index:2}

/* floating blobs */
.wm-obj-sec .obj-blob{position:absolute;border-radius:58% 42% 55% 45%/48% 55% 45% 52%;pointer-events:none;z-index:0}
.wm-obj-sec .obj-blob-1{width:390px;height:390px;top:-100px;left:-120px;background:linear-gradient(135deg,rgba(16,185,129,.14),rgba(20,184,166,.10));animation:nboBlob 14s ease-in-out infinite}
.wm-obj-sec .obj-blob-2{width:330px;height:330px;bottom:-80px;right:-100px;background:linear-gradient(135deg,rgba(251,113,133,.10),rgba(245,158,11,.09));animation:nboBlob 17s ease-in-out infinite reverse}
@keyframes nboBlob{
  0%,100%{border-radius:58% 42% 55% 45%/48% 55% 45% 52%;transform:rotate(0deg)}
  50%{border-radius:42% 58% 45% 55%/55% 45% 52% 48%;transform:rotate(10deg)}
}

/* header (notebook-flavoured overrides of the shared section header) */
.wm-obj-sec .section-label{ position:relative;overflow:hidden; animation:nboLabelPulse 2.4s ease-in-out infinite !important; }
.wm-obj-sec .section-label i{font-size:13px;animation:nboLabelIcon 2.4s ease-in-out infinite !important}
.wm-obj-sec .section-label.reveal.visible{animation:nboLabelPulse 2.4s ease-in-out infinite !important}
.wm-obj-sec .section-label::after{ /* shine sweep across the pill */
  content:'';position:absolute;top:0;bottom:0;left:-45%;width:45%;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(16,185,129,.28),transparent);
  animation:nboLabelShine 3.2s ease-in-out infinite}
@keyframes nboLabelPulse{0%,100%{box-shadow:0 10px 30px rgba(5,150,105,.16)}50%{box-shadow:0 12px 38px rgba(5,150,105,.34)}}
@keyframes nboLabelIcon{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-3px) rotate(8deg)}}
@keyframes nboLabelShine{0%{left:-45%}55%,100%{left:115%}}
.wm-obj-sec .section-title{font-size:clamp(2rem,4.6vw,3rem);font-weight:800;line-height:1.18;letter-spacing:-.02em;color:var(--nb-ink);margin-bottom:16px}
.wm-obj-sec .section-title .highlight{ position:relative;white-space:nowrap;
    background:linear-gradient(135deg,#6d28d9 0%,#db2777 50%,#f97316 100%);
    background-size:200% 200%;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
    animation:vs-gradshift 8s ease infinite;}
.wm-obj-sec .section-title .highlight::after{ /* highlighter swipe */
  content:'';position:absolute;left:-2%;right:-2%;bottom:6%;height:26%;z-index:-1;
  background:linear-gradient(90deg,rgba(253,230,138,.0),rgba(253,230,138,.85) 12%,rgba(167,243,208,.9) 55%,rgba(253,230,138,.0));
  border-radius:6px;transform:rotate(-1.2deg);
}
.wm-obj-sec .section-desc{font-size:1.0625rem;color:var(--nb-sub);max-width:620px;line-height:1.7;margin:0 auto}

/* split wrap */
.wm-obj-sec .obj-wrap{display:grid;grid-template-columns:1fr;gap:52px;align-items:center;max-width:1080px;margin:56px auto 0;position:relative;z-index:1}
@media(min-width:992px){.wm-obj-sec .obj-wrap{grid-template-columns:5fr 7fr;gap:60px}}

/* ── the arch-window scene ── */
.wm-obj-sec .obj-scene{position:relative;max-width:420px;margin:0 auto;padding:20px 10px 34px}
@media(min-width:992px){.wm-obj-sec .obj-scene{margin:0 auto}}
.wm-obj-sec .sc-mark{
  position:absolute;top:-8px;right:-12px;font-size:110px;line-height:1;color:rgba(16,185,129,.11);z-index:0;
  pointer-events:none;animation:nboMark 9s ease-in-out infinite;
}
@keyframes nboMark{0%,100%{transform:translate(0,0) rotate(-8deg)}50%{transform:translate(-8px,-10px) rotate(-2deg)}}

.wm-obj-sec .orbit{
  position:absolute;top:50%;left:50%;width:118%;aspect-ratio:1;transform:translate(-50%,-50%);
  border:2px dashed rgba(16,185,129,.28);border-radius:50%;z-index:0;
  animation:nboOrbit 26s linear infinite;
}
@keyframes nboOrbit{to{transform:translate(-50%,-50%) rotate(360deg)}}
.wm-obj-sec .orbit .plane{
  position:absolute;top:-17px;left:50%;font-size:19px;color:var(--nb-deep);
  animation:nboOrbitC 26s linear infinite;
  filter:drop-shadow(0 6px 10px rgba(5,150,105,.3));
}
@keyframes nboOrbitC{to{transform:rotate(-360deg)}}

.wm-obj-sec .arch{
  position:relative;z-index:2;border-radius:190px 190px 30px 30px;overflow:hidden;
  border:5px solid rgba(255,255,255,.96);background:linear-gradient(160deg,#d1fae5,#ccfbf1);
  box-shadow:0 36px 74px -32px var(--nb-shadow);
  animation:nboFloat 7s ease-in-out infinite;
}
@keyframes nboFloat{0%,100%{transform:translateY(0) rotate(-.3deg)}50%{transform:translateY(-10px) rotate(.3deg)}}
.wm-obj-sec .arch img{display:block;width:100%;height:auto}
.wm-obj-sec .arch .window-line{position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7), inset 0 -40px 60px -30px rgba(5,150,105,.25)}
/* washi tape keeping the notebook DNA on the arch */
.wm-obj-sec .arch-tape{
  position:absolute;z-index:4;top:-14px;left:50%;transform:translateX(-58%) rotate(-5deg);
  width:120px;height:30px;border-radius:3px;
  background:repeating-linear-gradient(45deg,rgba(16,185,129,.34) 0 8px,rgba(16,185,129,.22) 8px 16px);
  box-shadow:0 4px 12px -6px var(--nb-shadow);
}
/* drifting clouds */
.wm-obj-sec .cloud{position:absolute;z-index:1;background:#fff;border-radius:999px;opacity:.95;animation:nboCloud 16s ease-in-out infinite}
.wm-obj-sec .cloud::before{content:'';position:absolute;background:#fff;border-radius:50%}
.wm-obj-sec .cloud.cl1{width:84px;height:26px;top:6%;left:-6%}
.wm-obj-sec .cloud.cl1::before{width:38px;height:38px;top:-16px;left:18px}
.wm-obj-sec .cloud.cl2{width:64px;height:20px;bottom:16%;right:-5%;animation-delay:-8s;animation-duration:19s}
.wm-obj-sec .cloud.cl2::before{width:28px;height:28px;top:-12px;left:14px}
@keyframes nboCloud{0%,100%{translate:0 0}50%{translate:14px -6px}}

/* floating chips */
.wm-obj-sec .chip{
  position:absolute;z-index:3;display:flex;align-items:center;gap:8px;
  background:#fff;border-radius:16px;padding:10px 15px;font-size:12.5px;font-weight:600;color:#3f5a51;
  border:1px solid rgba(16,185,129,.16);
  box-shadow:0 18px 40px -18px var(--nb-shadow);white-space:nowrap;
  animation:nboChip 6s ease-in-out infinite;
}
.wm-obj-sec .chip i{font-size:13px}
.wm-obj-sec .chip b{font-family:'Caveat',cursive;font-weight:700;font-size:20px;color:var(--nb-deep);line-height:1}
.wm-obj-sec .chip-1{top:9%;left:-5%;animation-duration:6.4s}
.wm-obj-sec .chip-1 i{color:var(--nb-teal)}
.wm-obj-sec .chip-2{bottom:12%;right:-4%;animation-duration:5.2s;animation-delay:-2s}
.wm-obj-sec .chip-2 i{color:var(--nb-amber)}
@keyframes nboChip{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-9px) rotate(1.2deg)}}
.wm-obj-sec .dot{position:absolute;width:10px;height:10px;border-radius:50%;z-index:3;animation:nboDot 3.4s ease-in-out infinite}
.wm-obj-sec .dot.d1{background:var(--nb-rose);top:36%;left:0}
.wm-obj-sec .dot.d2{background:var(--nb-amber);bottom:30%;left:-5%;animation-delay:-1.2s;animation-duration:4.2s}
.wm-obj-sec .dot.d3{background:var(--nb-mint);top:0;right:20%;animation-delay:-2.1s;animation-duration:3.8s}
@keyframes nboDot{0%,100%{opacity:.3;transform:scale(.7)}50%{opacity:1;transform:scale(1.2)}}

/* ── the notebook accordion ── */
.wm-obj-sec .notebook{
  position:relative;background:#fff;border:1px solid rgba(21,42,36,.07);border-radius:20px;
  padding:10px 0;box-shadow:0 24px 54px -30px var(--nb-shadow);overflow:hidden;
}
.wm-obj-sec .notebook::before{ /* red margin line */
  content:'';position:absolute;top:0;bottom:0;left:58px;width:2px;
  background:linear-gradient(180deg,rgba(251,113,133,.55),rgba(251,113,133,.25));
  z-index:1;
}
.wm-obj-sec .notebook::after{ /* punched holes */
  content:'';position:absolute;top:0;bottom:0;left:22px;width:14px;
  background-image:radial-gradient(circle at 7px 50%,rgba(21,42,36,.10) 5px,transparent 6px);
  background-size:14px 84px;background-repeat:repeat-y;z-index:1;
}
.wm-obj-sec .obj-item{position:relative;z-index:2}
.wm-obj-sec .obj-item + .obj-item{border-top:1px dashed rgba(21,42,36,.10)}
/* per-item accent */
.wm-obj-sec .obj-item:nth-child(1){--ac:var(--nb-mint)}
.wm-obj-sec .obj-item:nth-child(2){--ac:var(--nb-sky)}
.wm-obj-sec .obj-item:nth-child(3){--ac:var(--nb-rose)}
.wm-obj-sec .obj-item:nth-child(4){--ac:var(--nb-amber)}

.wm-obj-sec .obj-question{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:18px 20px 18px 78px;background:none;border:none;cursor:pointer;text-align:left;
  font-family:'Bricolage Grotesque',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:1rem;font-weight:600;color:var(--nb-ink);transition:color .3s ease;
}
.wm-obj-sec .obj-question:hover{color:var(--ac)}
.wm-obj-sec .obj-num{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  font-family:'Caveat',cursive;font-size:1.15rem;font-weight:700;color:var(--ac);
  border:2px dashed color-mix(in srgb,var(--ac) 55%,transparent);background:#fff;
  transition:all .35s cubic-bezier(.34,1.56,.64,1);
}
.wm-obj-sec .obj-item.active .obj-num{background:var(--ac);color:#fff;border-style:solid;border-color:var(--ac);transform:translateY(-50%) rotate(-8deg) scale(1.1)}
.wm-obj-sec .obj-title-wrap{position:relative;display:inline-block}
.wm-obj-sec .obj-item.active .obj-title-wrap::after{ /* highlighter on active */
  content:'';position:absolute;left:-4px;right:-8px;bottom:2px;height:42%;z-index:-1;
  background:linear-gradient(90deg,color-mix(in srgb,var(--ac) 30%,transparent),color-mix(in srgb,var(--ac) 14%,transparent));
  border-radius:4px;transform:rotate(-.8deg);
}
.wm-obj-sec .obj-question .toggle{
  flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  font-size:.72rem;color:var(--ac);background:color-mix(in srgb,var(--ac) 12%,#fff);
  border:1.5px solid color-mix(in srgb,var(--ac) 30%,transparent);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),color .3s ease,background .3s ease;
}
.wm-obj-sec .obj-item.active .obj-question .toggle{transform:rotate(45deg);color:#fff;background:var(--ac);border-color:var(--ac)}

.wm-obj-sec .obj-answer{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.4,0,.2,1)}
.wm-obj-sec .obj-answer-inner{padding:2px 24px 22px 78px;font-size:.9375rem;color:var(--nb-sub);line-height:1.75}

/* answer lists & extras (same content, styled) */
.wm-obj-sec .obj-answer-inner ul{list-style:none;margin:2px 0 6px;display:grid;gap:9px}
.wm-obj-sec .obj-answer-inner ul li{position:relative;padding-left:24px}
.wm-obj-sec .obj-answer-inner ul li::before{
  content:'\f0da';font-family:'Font Awesome 6 Free';font-weight:900;
  position:absolute;left:2px;top:1px;font-size:.8rem;color:var(--ac);
}
.wm-obj-sec .obj-pill{
  display:inline-flex;align-items:center;gap:8px;margin-top:10px;
  padding:8px 15px;border-radius:10px 14px 10px 14px;font-size:.8rem;font-weight:700;color:#166534;
  background:#ecfccb;border:1.5px solid rgba(16,185,129,.4);transform:rotate(-.5deg);
}
.wm-obj-sec .obj-pill i{font-size:.8rem}
.wm-obj-sec .obj-roles-label{margin:14px 0 9px;font-family:'Caveat',cursive;font-size:22px;font-weight:700;color:var(--nb-ink)}
.wm-obj-sec .role-chips{display:flex;flex-wrap:wrap;gap:8px}
.wm-obj-sec .role-chip{
  padding:6px 13px;border-radius:4px 12px 4px 12px;font-size:.78rem;font-weight:700;color:var(--ac);
  background:color-mix(in srgb,var(--ac) 8%,#fff);border:1.5px solid color-mix(in srgb,var(--ac) 35%,transparent);
  transition:transform .25s ease,background .25s ease,color .25s ease;
}
.wm-obj-sec .role-chip:hover{transform:translateY(-3px) rotate(-1deg);background:var(--ac);color:#fff}

@media(max-width:991px){.wm-obj-sec .obj-scene{max-width:400px}}
@media(max-width:768px){
  .wm-obj-sec{padding:84px 0 92px}
}
@media(max-width:640px){
  .wm-obj-sec{padding:78px 0 84px}
  .wm-obj-sec .chip{font-size:11px;padding:8px 11px}
  .wm-obj-sec .chip-2{right:0}
  .wm-obj-sec .arch{border-radius:120px 120px 22px 22px}
}
@media(max-width:480px){
  .wm-obj-sec .obj-question{padding-left:64px}
  .wm-obj-sec .obj-answer-inner{padding-left:64px}
  .wm-obj-sec .notebook::before{left:48px}
}

/* Ambient motion in this section intentionally always runs - requested
   so the notebook scene (orbiting plane, clouds, chips, label shine)
   is never static (same policy as the awards / about sections). */

/* ============================================================
   LEARNING PATH
   ============================================================ */
.wm-path {
  position: relative;
  background: #0B101C;
  color: #dbe6f8;
  padding: 100px 0 130px;
  overflow: clip;
}
.wm-path .container { position: relative; z-index: 2; }

/* ---------- animated night-city backdrop ----------
   The sky layers live in a viewport-sized sticky box, NOT stretched across
   the full 8,000px+ section: scrolling then never re-rasterizes giant layers
   and the whole backdrop can be paused when the section is off-screen. */
.wm-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.wm-sky-view { position: sticky; top: 0; height: 100vh; }
.wm-sky-glow, .wm-sky-stars, .wm-sky-streaks, .wm-city-skyline, .wm-city-motes {
  position: absolute;
  pointer-events: none;
}
.wm-sky-glow { inset: 0; z-index: 0; }
/* gradient falloff instead of filter:blur — same look, no per-frame filter cost */
.wm-sky-glow i { position: absolute; border-radius: 50%; opacity: .32; }
.wm-sky-glow i:nth-child(1) { width: 900px; height: 900px; top: -280px; left: -240px; background: radial-gradient(closest-side, rgba(76, 201, 240, .5), transparent 70%); animation: wmGlowA 26s ease-in-out infinite; }
.wm-sky-glow i:nth-child(2) { width: 820px; height: 820px; top: 30%; right: -280px; background: radial-gradient(closest-side, rgba(139, 92, 246, .5), transparent 70%); animation: wmGlowB 32s ease-in-out infinite; }
.wm-sky-glow i:nth-child(3) { width: 780px; height: 780px; bottom: -300px; left: 22%; background: radial-gradient(closest-side, rgba(61, 220, 151, .34), transparent 70%); animation: wmGlowA 38s ease-in-out infinite reverse; }
@keyframes wmGlowA { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(90px, 60px) scale(1.14); } }
@keyframes wmGlowB { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-80px, -50px) scale(.9); } }

.wm-sky-stars {
  inset: 0; z-index: 0;
  /* tiled star field (same technique as the cvtv Video Testimonials sky):
     dots at px positions repeat every 400x290px, so the whole viewport
     fills with stars instead of a dozen one-off specks */
  background-image:
    radial-gradient(1.6px 1.6px at 42px 61px, #fff 60%, transparent),
    radial-gradient(1.1px 1.1px at 121px 84px, #CFE0FF 60%, transparent),
    radial-gradient(1.9px 1.9px at 234px 158px, #fff 60%, transparent),
    radial-gradient(1.1px 1.1px at 310px 40px, #B9C8FF 60%, transparent),
    radial-gradient(1.5px 1.5px at 62px 210px, #E4ECFF 60%, transparent),
    radial-gradient(1.1px 1.1px at 260px 250px, #fff 60%, transparent),
    radial-gradient(1.4px 1.4px at 155px 26px, #fff 60%, transparent),
    radial-gradient(1.2px 1.2px at 350px 190px, #C9D8FF 60%, transparent),
    radial-gradient(1.7px 1.7px at 196px 118px, #fff 60%, transparent),
    radial-gradient(1px 1px at 80px 150px, #D7E2FF 60%, transparent);
  background-size: 400px 290px;
  animation: wmTwinkle 5s ease-in-out infinite, wmStarDrift 90s linear infinite;
}
@keyframes wmTwinkle { 0%, 100% { opacity: .9; } 50% { opacity: .35; } }
@keyframes wmStarDrift { to { background-position: 400px 290px; } }

.wm-sky-streaks { inset: 0; z-index: 0; overflow: hidden; }
.wm-sky-streaks i {
  position: absolute; top: 8%; left: -10%; width: 180px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8), transparent);
  transform: rotate(16deg); opacity: 0;
  animation: wmStreak 13s ease-in infinite;
}
.wm-sky-streaks i:nth-child(2) { top: 22%; width: 120px; animation-delay: 6.5s; animation-duration: 17s; }
.wm-sky-streaks i:nth-child(3) { top: 4%; left: auto; right: -10%; transform: rotate(-14deg); animation-name: wmStreakR; animation-delay: 10s; animation-duration: 15s; }
@keyframes wmStreak { 0% { transform: translateX(-12vw) rotate(16deg); opacity: 0; } 3% { opacity: .9; } 10% { transform: translateX(112vw) rotate(16deg); opacity: 0; } 100% { opacity: 0; } }
@keyframes wmStreakR { 0% { transform: translateX(12vw) rotate(-14deg); opacity: 0; } 3% { opacity: .8; } 10% { transform: translateX(-112vw) rotate(-14deg); opacity: 0; } 100% { opacity: 0; } }

.wm-city-skyline { left: 0; right: 0; bottom: 0; height: 300px; z-index: 1; }
.wm-city-skyline svg { position: absolute; bottom: -2px; left: -5%; width: 110%; display: block; }
.wm-skyline-far { height: 230px; opacity: .8; animation: wmSkyDriftA 80s ease-in-out infinite alternate; }
.wm-skyline-near { height: 200px; animation: wmSkyDriftB 50s ease-in-out infinite alternate; }
@keyframes wmSkyDriftA { to { transform: translateX(-44px); } }
@keyframes wmSkyDriftB { to { transform: translateX(44px); } }
.wm-city-skyline .win { opacity: 0; animation: wmWinFlicker 5s ease-in-out infinite; }
@keyframes wmWinFlicker { 0%, 100% { opacity: .04; } 40% { opacity: .9; } 55% { opacity: .3; } 70% { opacity: .75; } }

.wm-city-motes { inset: 0; z-index: 1; }
.wm-city-motes i {
  position: absolute; bottom: -10px; border-radius: 50%;
  background: #7FD8FF; box-shadow: 0 0 10px 2px rgba(127, 216, 255, .5);
  opacity: 0; animation: wmMote var(--d, 14s) linear infinite; animation-delay: var(--dl, 0s);
}
@keyframes wmMote { 0% { transform: translateY(0); opacity: 0; } 8% { opacity: .8; } 85% { opacity: .25; } 100% { transform: translateY(-72vh); opacity: 0; } }

/* free the GPU when the section is nowhere near the viewport */
.wm-path.wm-idle .wm-sky-glow i, .wm-path.wm-idle .wm-sky-stars,
.wm-path.wm-idle .wm-sky-streaks i, .wm-path.wm-idle .wm-city-skyline svg,
.wm-path.wm-idle .wm-city-skyline .win, .wm-path.wm-idle .wm-city-motes i {
  animation-play-state: paused !important;
}

/* ---------- the transit line + train (scroll-driven) ---------- */
.wm-path-grid { position: relative; z-index: 2; }
.wm-path-track { position: relative; display: grid; gap: 30px; padding-left: 96px; }
.wm-line { position: absolute; left: 24px; top: 0; bottom: 0; width: 4px; z-index: 1; }
.wm-line svg { width: 100%; height: 100%; }
.wm-line .rail { stroke: rgba(148, 163, 200, .16); }
.wm-line .glow-rail { stroke: url(#wmLineGrad); stroke-dasharray: 10 14; }
.wm-train {
  position: absolute; left: 16px; top: 2%; z-index: 2;
  width: 20px; height: 20px; border-radius: 7px;
  background: linear-gradient(135deg, #4CC9F0, #3DDC97);
  box-shadow: 0 0 18px rgba(76, 201, 240, .65);
  display: grid; place-items: center; color: #06251B; font-size: 9px;
  animation: wmRide 15s cubic-bezier(.45, .05, .55, .95) infinite;
}
/* JS drives the train with a composited translateY — no layout, no paint */
.wm-train.js-drive { animation: none; top: 0; transition: transform .25s linear; will-change: transform; }
@keyframes wmRide { 0% { top: 1%; opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { top: 97%; opacity: 0; } }

/* ---------- station cards ---------- */
.wm-course { --line: #4CC9F0; --line-soft: rgba(76, 201, 240, .12); --line-mid: rgba(76, 201, 240, .35); --line-dim: rgba(76, 201, 240, .22); position: relative; }
.wm-course:nth-child(4n+2) { --line: #3DDC97; --line-soft: rgba(61, 220, 151, .11); --line-mid: rgba(61, 220, 151, .35); --line-dim: rgba(61, 220, 151, .22); }
.wm-course:nth-child(4n+3) { --line: #F4D35E; --line-soft: rgba(244, 211, 94, .10); --line-mid: rgba(244, 211, 94, .35); --line-dim: rgba(244, 211, 94, .20); }
.wm-course:nth-child(4n)   { --line: #B892FF; --line-soft: rgba(184, 146, 255, .12); --line-mid: rgba(184, 146, 255, .35); --line-dim: rgba(184, 146, 255, .22); }

.wm-course::before { /* platform roundel docked on the line */
  content: attr(data-num);
  position: absolute; left: -96px; top: 36px; z-index: 3;
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center;
  font-family: var(--wm-font-num); font-weight: 700; font-size: 15px; color: #0B101C;
  background: var(--line);
  box-shadow: 0 0 0 5px #0B101C, 0 0 26px rgba(255, 255, 255, .12);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.wm-course:hover::before { transform: rotate(-6deg) scale(1.07); }
.wm-course.is-active::before { animation: wmRoundelPulse 2.4s ease-out infinite; }
@keyframes wmRoundelPulse {
  0% { box-shadow: 0 0 0 5px #0B101C, 0 0 26px rgba(255, 255, 255, .12), 0 0 0 0 var(--line-dim); }
  70% { box-shadow: 0 0 0 5px #0B101C, 0 0 26px rgba(255, 255, 255, .12), 0 0 0 16px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 5px #0B101C, 0 0 26px rgba(255, 255, 255, .12), 0 0 0 0 rgba(255, 255, 255, 0); }
}

.wm-course-card {
  position: relative;
  background: linear-gradient(165deg, #141B2E 0%, #10162A 100%);
  border-radius: 20px;
  padding: 32px 36px 28px;
  box-shadow: 0 22px 54px rgba(2, 5, 14, .55);
  transition: box-shadow .4s ease, transform .4s cubic-bezier(.22, 1, .36, 1);
  overflow: hidden;
  /* skip rendering of off-screen stations entirely — with 16 cards the
     browser then paints only the 2-3 near the viewport */
  content-visibility: auto;
  contain-intrinsic-size: auto 300px;
}
.wm-course-card::before { /* platform edge */
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 7px;
  background: repeating-linear-gradient(180deg, var(--line) 0 14px, transparent 14px 24px);
  opacity: .75;
}
.wm-course-card::after { /* status LED */
  content: ""; position: absolute; top: 22px; right: 24px; width: 9px; height: 9px; border-radius: 50%;
  background: rgba(148, 163, 200, .35); transition: all .3s ease;
}
.wm-course:hover .wm-course-card { transform: translateY(-3px); }
.wm-course:hover .wm-course-card::after { background: #3DDC97; box-shadow: 0 0 12px #3DDC97; animation: wmBlink 1.1s steps(2, start) infinite; }
.wm-course.is-active .wm-course-card {
  box-shadow: 0 26px 60px rgba(2, 5, 14, .6), 0 0 0 1.5px var(--line-mid), 0 0 34px var(--line-dim);
}
@keyframes wmBlink { 50% { opacity: .25; } }

/* ---------- tag / title / links ---------- */
.wm-course-top {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 16px 24px; margin-bottom: 14px;
}
.wm-course-tag {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--wm-font-num); font-size: 10.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: #AEBBD9;
}
.wm-course-tag .pill {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--line); background: var(--line-soft);
  border: 1px solid var(--line-mid);
  padding: 6px 12px; border-radius: 8px;
}
.wm-course-tag .pill::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--line); }
.wm-course-id h3 {
  font-family: var(--font-heading);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 800; letter-spacing: -.015em; color: #f4f8ff; margin-top: 12px;
}
.wm-course-links { display: flex; gap: 12px; flex-wrap: wrap; }
.wm-chip-link {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--wm-font-num); font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
  text-decoration: none; color: #CBD6EC;
  background: rgba(148, 163, 200, .06);
  border: 1.5px solid rgba(148, 163, 200, .22);
  border-radius: 12px; padding: 11px 16px;
  transition: all .3s ease;
}
.wm-chip-link i { color: var(--line); }
.wm-chip-link .arr { font-size: 10px; color: #66739B; transition: transform .3s ease, color .3s ease; }
.wm-chip-link:hover { border-color: var(--line); color: #fff; background: var(--line-soft); }
.wm-chip-link:hover .arr { transform: translateX(5px); color: var(--line); }
.wm-chip-link.wm-chip-ghost { border-style: dashed; }
.wm-course-desc { color: #8D9ABD; font-size: 15px; line-height: 1.7; max-width: 860px; }

/* panel chip rows (Studio IDE tools etc.) as platform tiles */
.wm-chip-row { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 12px 0; }
.wm-chip-row-top { margin-top: 16px; }
.wm-chip-row li {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--wm-font-num); font-size: 12px; font-weight: 600; color: #3B4A63;
  background: #fff; border: 1px solid rgba(46, 56, 73, .12);
  padding: 7px 12px; border-radius: 8px;
  transition: all .22s ease;
}
.wm-chip-row li::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--line); opacity: .8; }
.wm-chip-row li:hover { border-color: var(--line); transform: translateY(-2px); }

/* ---------- accordion · departures board ---------- */
.wm-acc-btn {
  display: flex; align-items: center; gap: 14px;
  width: 100%; margin-top: 24px; text-align: left; cursor: pointer;
  font-family: var(--wm-font-num); font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #C4CFE6;
  background: #0C1222;
  border: 1.5px solid rgba(148, 163, 200, .2);
  border-radius: 14px; padding: 14px 18px;
  /* colors snap instantly - transitioned border/glow can freeze mid-flight
     on throttled renderers and leave the button looking unlit */
  transition: transform .15s ease;
}
.wm-acc-btn .sign { flex: 1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wm-acc-btn .sign i { color: var(--line); font-size: 14px; }
.wm-acc-btn .code {
  font-size: 10px; color: var(--line); background: var(--line-soft);
  border-radius: 6px; padding: 4px 8px; letter-spacing: .12em;
}
.wm-acc-caret {
  flex: none; width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center; font-size: 11px; color: #8794B5;
  border: 1.5px solid rgba(148, 163, 200, .25);
  transition: all .45s cubic-bezier(.34, 1.56, .64, 1);
}
.wm-acc-btn:hover {
  border-color: var(--line);
  background: linear-gradient(180deg, var(--line-mid), var(--line-soft) 60%, transparent), #10182E;
  color: #fff;
  box-shadow: 0 0 0 1px var(--line-dim), 0 8px 24px rgba(3, 8, 20, .45);
}
.wm-acc-btn:hover .sign i { text-shadow: 0 0 14px var(--line-mid); }
.wm-acc-btn:hover .code { background: var(--line-mid); }
.wm-acc-btn:hover .wm-acc-caret { color: #fff; border-color: var(--line-mid); background: var(--line-dim); }
.wm-acc-btn:active { transform: translateY(1px); }
.wm-acc-btn[aria-expanded="true"] {
  border-color: var(--line);
  background: linear-gradient(180deg, var(--line-mid), var(--line-soft) 70%, rgba(12, 18, 34, .4));
  color: #fff;
  box-shadow: 0 0 0 1px var(--line-dim), 0 0 30px var(--line-mid);
}
.wm-acc-btn[aria-expanded="true"] .sign i { text-shadow: 0 0 14px var(--line-mid); }
.wm-acc-btn[aria-expanded="true"] .code { background: var(--line); color: #0B101C; }
.wm-acc-btn[aria-expanded="true"] .wm-acc-caret {
  background: var(--line); color: #0B101C; border-color: var(--line); transform: rotate(-180deg);
}

/* ---------- panel · light ticket hall ---------- */
.wm-acc-panel { overflow: hidden; }
.wm-acc-inner {
  margin-top: 16px; position: relative;
  background: linear-gradient(180deg, #F7F8FA, #EFF2F6);
  color: #2E3849;
  border-radius: 18px;
  padding: 28px 30px 26px;
  box-shadow: 0 24px 50px rgba(2, 5, 14, .5);
}
.wm-acc-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1.5px solid rgba(46, 56, 73, .12);
}
.wm-acc-note {
  font-family: var(--wm-font-num); font-size: 11px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: #5B6B87; margin: 0;
}
.wm-acc-head .wm-acc-note i { color: #3B82C4; margin-right: 2px; }
.wm-acc-count {
  font-family: var(--wm-font-num); font-size: 11px; font-weight: 700; color: #33415C;
  background: #fff; border: 1.5px solid rgba(46, 56, 73, .14);
  padding: 6px 13px; border-radius: 8px;
}

/* route line + stops */
.wm-chapters { list-style: none; display: grid; gap: 0; position: relative; padding-left: 40px; margin: 0; }
.wm-chapters::before {
  content: ""; position: absolute; left: 14px; top: 14px; bottom: 14px; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, #4CC9F0, #3DDC97, #F4D35E, #B892FF); opacity: .8;
}
.wm-chapter { position: relative; padding: 9px 0; }
.wm-chapter::before {
  content: ""; position: absolute; left: -32px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; border-radius: 5px;
  background: #fff; border: 3.5px solid var(--line);
  box-shadow: 0 0 0 3px #EFF2F6;
  transition: transform .3s ease;
}
.wm-chapter:hover::before { transform: translateY(-50%) scale(1.25) rotate(45deg); border-radius: 4px; }
.wm-chapter h4 { font-size: 15px; font-weight: 600; color: #26334D; line-height: 1.4; margin: 0; }
.wm-chapter ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 9px 0 4px; padding: 0; }
.wm-chapter ul li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 13px; color: #4C5B75; line-height: 1.45;
  background: #fff; border: 1px solid rgba(46, 56, 73, .1);
  border-radius: 9px; padding: 7px 11px;
  transition: all .22s ease;
}
.wm-chapter ul li::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--line); opacity: .75; flex: none; margin-top: 6px; }
.wm-chapter ul li:hover { border-color: var(--line); transform: translateX(3px); }

/* flat lists · platform tiles */
.wm-flat-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 0; margin: 0; }
.wm-flat-list li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 13px; color: #3B4A63; line-height: 1.45;
  background: #fff; border: 1px solid rgba(46, 56, 73, .1);
  border-radius: 9px; padding: 9px 12px;
  transition: all .22s ease;
}
.wm-flat-list li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 2.5px; background: var(--line); opacity: .8; margin-top: 5px; }
.wm-flat-list li:hover { border-color: var(--line); transform: translateY(-2px); box-shadow: 0 6px 14px rgba(46, 56, 73, .1); }

/* staggered arrival of stops & tiles */
.wm-acc-panel .wm-chapter, .wm-acc-panel .wm-flat-list li, .wm-acc-panel .wm-chip-row li { opacity: 0; }
.wm-acc-panel.is-open .wm-chapter { animation: wmStopIn .45s ease forwards; animation-delay: calc(var(--i, 0) * 60ms + 80ms); }
.wm-acc-panel.is-open .wm-flat-list li, .wm-acc-panel.is-open .wm-chip-row li { animation: wmTileIn .4s ease forwards; animation-delay: calc(var(--i, 0) * 22ms + 80ms); }
@keyframes wmStopIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes wmTileIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  /* The night-city backdrop (glows, stars, streaks, skyline, windows, motes)
     stays animated — this environment reports prefers-reduced-motion: reduce
     and the owner explicitly wants the page animated (see the REDUCED MOTION
     note above the ss-sec block). Only guard the accordion content so it can
     never stay stuck at opacity:0 if its entrance animation doesn't run. */
  .wm-acc-panel .wm-chapter, .wm-acc-panel .wm-flat-list li, .wm-acc-panel .wm-chip-row li { opacity: 1; }
}

/* ============================================================
   END LEARNING PATH
   ============================================================ */

/* ============================================================
   KIT
   ============================================================ */
.wm-kit { padding-top: 90px; padding-bottom: 90px; }
.wm-kit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.wm-kit-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--light-border);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s ease, border-color .45s ease;
}
.wm-kit-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); border-color: rgba(26, 86, 219, .3); }
.wm-kit-icon {
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 23px;
  color: #fff;
  background: linear-gradient(135deg, #1a56db, #06b6d4);
  box-shadow: 0 12px 28px rgba(26, 86, 219, .3);
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1);
}
.wm-kit-card:nth-child(2) .wm-kit-icon { background: linear-gradient(135deg, #7c3aed, #a78bfa); box-shadow: 0 12px 28px rgba(124, 58, 237, .3); }
.wm-kit-card:nth-child(3) .wm-kit-icon { background: linear-gradient(135deg, #059669, #34d399); box-shadow: 0 12px 28px rgba(5, 150, 105, .3); }
.wm-kit-card:nth-child(4) .wm-kit-icon { background: linear-gradient(135deg, #d97706, #fbbf24); box-shadow: 0 12px 28px rgba(217, 119, 6, .3); }
.wm-kit-card:hover .wm-kit-icon { transform: scale(1.12) rotate(6deg); }
.wm-kit-card h3 { font-family: var(--font-heading); font-size: 18px; font-weight: 700; color: var(--wm-ink); margin-bottom: 8px; }
.wm-kit-card p { font-size: 13.8px; color: var(--wm-ink-2); line-height: 1.6; }
.wm-kit-shine {
  position: absolute;
  top: 0;
  left: -80%;
  width: 55%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg);
  transition: left .7s ease;
  pointer-events: none;
}
.wm-kit-card:hover .wm-kit-shine { left: 130%; }

/* ============================================================
   CERTIFICATE
   ============================================================ */
.wm-cert {
  position: relative;
  background:
    radial-gradient(48% 44% at 16% 30%, rgba(26, 86, 219, .10), transparent 62%),
    #f4f7fe;
  color: var(--wm-ink-2);
  padding: 100px 0;
  overflow: hidden;
}
.wm-cert .wm-head-dark h2 { color: var(--wm-ink); }
.wm-cert .wm-grad-text-green {
  background: linear-gradient(100deg, var(--wm-blue), var(--wm-cyan), var(--wm-blue));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
}
.wm-cert-glow {
  position: absolute;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16, 185, 129, .12), transparent 65%);
  bottom: -140px;
  left: 30%;
  pointer-events: none;
}
.wm-cert-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: center; }
.wm-cert-points { list-style: none; padding: 0; display: grid; gap: 14px; }
.wm-cert-points li { display: flex; gap: 12px; align-items: flex-start; color: var(--wm-ink-2); font-size: 15.5px; line-height: 1.6; }
.wm-cert-points i { color: #059669; margin-top: 4px; }

.wm-cert-stage { position: relative; perspective: 1200px; }
.wm-cert-frame {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .55);
  box-shadow: 0 34px 80px rgba(15, 23, 42, .18), 0 0 50px rgba(26, 86, 219, .10);
  transform: rotateY(-7deg) rotateX(2deg);
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.wm-cert-stage:hover .wm-cert-frame { transform: rotateY(0deg) rotateX(0deg) translateY(-8px); }
.wm-cert-frame img { display: block; width: 100%; height: auto; }
.wm-cert-shine {
  position: absolute;
  top: 0;
  left: -90%;
  width: 60%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-16deg);
  animation: wmCertShine 5.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes wmCertShine {
  0%, 55% { left: -90%; }
  75%, 100% { left: 160%; }
}
.wm-cert-seal {
  position: absolute;
  right: -26px;
  bottom: -26px;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-align: center;
  background: linear-gradient(140deg, #0c1a2b, #071018);
  border: 1.5px solid var(--wm-green);
  box-shadow: 0 16px 40px rgba(15, 23, 42, .28), 0 0 30px rgba(61, 255, 171, .35);
  color: var(--wm-green);
  font-family: var(--wm-font-num);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .18em;
  animation: wmSealPulse 3s ease-in-out infinite;
}
.wm-cert-seal i { font-size: 24px; }
@keyframes wmSealPulse {
  0%, 100% { box-shadow: 0 16px 40px rgba(15, 23, 42, .28), 0 0 22px rgba(61, 255, 171, .3); }
  50% { box-shadow: 0 16px 40px rgba(15, 23, 42, .28), 0 0 44px rgba(61, 255, 171, .5); }
}
.wm-cert-reflection {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -34px;
  height: 40px;
  background: radial-gradient(50% 100% at 50% 0%, rgba(26, 86, 219, .20), transparent 75%);
  filter: blur(12px);
  z-index: -1;
}

/* ============================================================
   ENQUIRY — dark showcase
   ============================================================ */
.wm-enquiry {
  position: relative;
  padding-top: 100px;
  padding-bottom: 100px;
  background:
    radial-gradient(52% 42% at 12% 8%, rgba(6, 182, 212, .12), transparent 62%),
    radial-gradient(46% 40% at 92% 88%, rgba(61, 255, 171, .1), transparent 62%),
    var(--wm-bg-dark2);
  color: #dbe6f8;
  overflow: clip;
  border-top: 1px solid rgba(61, 255, 171, .14);
  border-bottom: 1px solid rgba(61, 255, 171, .14);
}
.wm-enq-bg { position: absolute; inset: 0; pointer-events: none; }
.wm-enq-orb {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .5;
}
.wm-enq-orb-a {
  background: radial-gradient(circle, rgba(6, 182, 212, .4), transparent 65%);
  top: -140px;
  left: -100px;
  animation: wmOrbDrift 14s ease-in-out infinite;
}
.wm-enq-orb-b {
  background: radial-gradient(circle, rgba(61, 255, 171, .28), transparent 65%);
  bottom: -160px;
  right: -80px;
  animation: wmOrbDrift 18s ease-in-out infinite reverse;
}
@keyframes wmOrbDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(60px, 40px) scale(1.12); }
}
.wm-enq-ring {
  position: absolute;
  border: 1px dashed rgba(148, 163, 184, .18);
  border-radius: 50%;
  width: 560px;
  height: 560px;
  right: -160px;
  top: -180px;
  animation: wmSpinFlat 60s linear infinite;
}
.wm-enq-ring-2 {
  width: 320px;
  height: 320px;
  right: auto;
  left: -120px;
  top: auto;
  bottom: -120px;
  animation-direction: reverse;
}
@keyframes wmSpinFlat { to { transform: rotate(360deg); } }
.wm-enq-spark {
  position: absolute;
  color: var(--wm-green);
  font-size: 13px;
  left: 6%;
  top: 38%;
  animation: wmSparkTwinkle 3.4s ease-in-out infinite;
}
.wm-enq-spark-2 { left: 46%; top: 12%; color: var(--wm-cyan); animation-delay: 1.1s; }
.wm-enq-spark-3 { left: auto; top: auto; right: 8%; bottom: 18%; font-size: 10px; animation-delay: 2.2s; }
@keyframes wmSparkTwinkle {
  0%, 100% { opacity: .15; transform: scale(.8); }
  50% { opacity: .9; transform: scale(1.15); }
}

.wm-enq-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 60px; align-items: center; position: relative; z-index: 2; }
.wm-enq-sub { color: #9db1d3; font-size: 16px; line-height: 1.7; margin-bottom: 26px; max-width: 460px; }
.wm-enq-phone {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  background: linear-gradient(135deg, #0c1626, #101d33);
  border: 1px solid rgba(61, 255, 171, .3);
  color: #f1f5ff;
  border-radius: 18px;
  padding: 18px 24px;
  box-shadow: 0 18px 44px rgba(3, 7, 18, .5), 0 0 34px rgba(61, 255, 171, .12);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s ease;
}
.wm-enq-phone:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 24px 54px rgba(3, 7, 18, .6), 0 0 46px rgba(61, 255, 171, .25);
}
.wm-enq-phone-ic {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 19px;
  color: #071018;
  background: linear-gradient(135deg, var(--wm-green), var(--wm-green2));
  box-shadow: 0 0 24px rgba(61, 255, 171, .45);
  animation: wmRingPhone 2.6s ease-in-out infinite;
}
@keyframes wmRingPhone {
  0%, 82%, 100% { transform: rotate(0); }
  86% { transform: rotate(-12deg); }
  90% { transform: rotate(10deg); }
  94% { transform: rotate(-8deg); }
  98% { transform: rotate(6deg); }
}
.wm-enq-phone small { display: block; font-family: var(--wm-font-num); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: #8ea0bd; }
.wm-enq-phone b { font-family: var(--wm-font-num); font-size: 21px; color: #fff; }
.wm-enq-perks { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; }
.wm-enq-perks li { display: flex; align-items: center; gap: 10px; color: #cbd5e1; font-size: 14.5px; font-weight: 600; }
.wm-enq-perks i { color: var(--wm-green); }
.wm-enq-trust {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px dashed rgba(148, 163, 184, .22);
  font-size: 13.5px;
  color: #9db1d3;
}
.wm-enq-trust b { font-family: var(--wm-font-num); color: var(--wm-green); }
.wm-enq-trust .wm-stars i { font-size: 11px; }
.wm-enq-trust-sep { width: 1px; height: 16px; background: rgba(148, 163, 184, .3); }

.wm-enq-card {
  position: relative;
  background: linear-gradient(165deg, rgba(17, 28, 50, .92), rgba(9, 15, 29, .94));
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 22px;
  padding: 30px;
  box-shadow: 0 40px 90px rgba(2, 6, 17, .6), 0 0 60px rgba(6, 182, 212, .08);
  backdrop-filter: blur(14px);
}
.wm-enq-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--angle), transparent 10%, var(--wm-green) 24%, transparent 38%, var(--wm-cyan) 62%, transparent 76%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: wmBorderSpin 6s linear infinite;
  pointer-events: none;
}
.wm-tabs {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: rgba(148, 163, 184, .1);
  border-radius: 14px;
  padding: 5px;
  margin-bottom: 26px;
}
.wm-tab-indicator {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  width: calc(50% - 5px);
  background: linear-gradient(135deg, var(--wm-green), var(--wm-green2));
  border-radius: 10px;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
  box-shadow: 0 8px 22px rgba(61, 255, 171, .3);
}
.wm-tabs.business .wm-tab-indicator { transform: translateX(100%); }
.wm-tab {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  background: transparent;
  padding: 12px 10px;
  border-radius: 10px;
  font-family: var(--font);
  font-weight: 700;
  font-size: 14.5px;
  color: #9db1d3;
  cursor: pointer;
  transition: color .35s ease;
}
.wm-tab.active { color: #071018; }

.wm-enq-form .wm-fields { display: grid; gap: 6px; }
.wm-enq-form .wm-fields[hidden] { display: none; }
.wm-fields-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.wm-field { position: relative; display: block; }
.wm-field input, .wm-field select {
  width: 100%;
  background: rgba(148, 163, 184, .08);
  border: 1.5px solid rgba(148, 163, 184, .22);
  border-radius: 13px;
  padding: 24px 16px 10px 46px;
  font-family: var(--font);
  font-size: 15px;
  color: #eef2ff;
  outline: none;
  transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
  appearance: none;
}
.wm-field select { cursor: pointer; }
.wm-field select option { color: #0f172a; background: #fff; }
.wm-field input:hover, .wm-field select:hover { border-color: rgba(148, 163, 184, .4); }
.wm-field input:focus, .wm-field select:focus {
  border-color: var(--wm-green);
  background: rgba(61, 255, 171, .05);
  box-shadow: 0 0 0 4px rgba(61, 255, 171, .12);
}
.wm-field input:-webkit-autofill,
.wm-field input:-webkit-autofill:hover,
.wm-field input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #101b31 inset;
  -webkit-text-fill-color: #eef2ff;
  caret-color: #eef2ff;
}
.wm-field-label {
  position: absolute;
  left: 46px;
  top: 50%;
  transform: translateY(-50%);
  color: #8ea0bd;
  font-size: 14.5px;
  pointer-events: none;
  transition: all .25s cubic-bezier(.22, 1, .36, 1);
}
.wm-field input:focus ~ .wm-field-label,
.wm-field input:not(:placeholder-shown) ~ .wm-field-label,
.wm-field select:focus ~ .wm-field-label,
.wm-field select.filled ~ .wm-field-label {
  top: 13px;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wm-green);
}
.wm-field-ic {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #7c8db0;
  font-size: 14px;
  transition: color .3s ease;
  pointer-events: none;
}
.wm-field input:focus ~ .wm-field-ic, .wm-field select:focus ~ .wm-field-ic { color: var(--wm-green); }
.wm-field select + .wm-field-ic { pointer-events: none; }
.wm-field:nth-child(1) { margin-bottom: 14px; }
.wm-fields-row .wm-field { margin-bottom: 14px; }
.wm-enq-form .wm-btn { margin-top: 10px; }
.wm-enq-privacy {
  margin-top: 16px;
  text-align: center;
  font-size: 12.5px;
  color: #7c8db0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex-wrap: wrap;
}
.wm-enq-privacy a { color: var(--wm-green); font-weight: 600; }

/* ============================================================
   STICKY ENROLL BAR
   ============================================================ */
.wm-sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  background: rgba(7, 16, 24, .88);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(61, 255, 171, .25);
  transform: translateY(110%);
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
  padding: 10px 0;
}
.wm-sticky-bar.show { transform: translateY(0); }
.wm-sticky-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.wm-sticky-title { display: inline-flex; align-items: center; gap: 12px; color: #e2e8f0; font-weight: 700; font-size: 14.5px; }
.wm-sticky-price { font-family: var(--wm-font-num); font-size: 21px; font-weight: 700; color: var(--wm-green); margin-left: auto; }
.wm-sticky-price s { font-size: 13px; color: #7c8db0; font-weight: 400; margin-left: 6px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1450px) {
  /* container is capped at 1280px, so desktop geometry holds through this range */
}

@media (max-width: 1180px) {
  .wm-hero { padding-bottom: 90px; }
  .wm-hero-inner { grid-template-columns: 1fr; gap: 44px; }
  .wm-hero-visual { max-width: 620px; margin: 0 auto; }
  .wm-stage {
    grid-template-columns: 212px minmax(0, 1fr);
    grid-template-areas:
      "laptop  laptop"
      "ratings awards"
      "bubble  bubble";
  }
  .wm-about-grid { grid-template-columns: 1fr 420px; gap: 44px; }
  .wm-path-track { padding-left: 76px; gap: 24px; }
  .wm-course::before { left: -76px; width: 48px; height: 48px; }
  .wm-line { left: 18px; }
  .wm-train { left: 10px; }
}

@media (max-width: 1024px) {
  .wm-hero-inner { gap: 36px; }
  .wm-hero-visual { max-width: 640px; }
  .wm-bento { grid-template-columns: repeat(2, 1fr); }
  .wm-card-wide { grid-row: auto; }
  .wm-about-grid { grid-template-columns: 1fr; }
  .wm-receipt-wrap { max-width: 520px; margin: 0 auto; }
  .wm-cert-grid, .wm-enq-grid { grid-template-columns: 1fr; gap: 44px; }
  .wm-kit-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .wm-hero { min-height: 0; padding-bottom: 90px; }
  .wm-hero-sub2 { -webkit-line-clamp: 4; }
  .wm-stage { gap: 10px; }
  .wm-laptop { margin-top: 38px; }
  .wm-lt-badge { width: 86px; height: 86px; }
  .wm-lt-badge-num { font-size: 20px; }
  .wm-v-play { width: 38px; height: 38px; font-size: 12px; }
  .wm-line, .wm-train, .wm-city-motes, .wm-sky-streaks { display: none; }
  .wm-path-track { padding-left: 0; gap: 18px; }
  .wm-course::before { position: static; margin-bottom: 14px; }
  .wm-course-card { padding: 26px 22px; }
  .wm-chapter ul, .wm-flat-list { grid-template-columns: 1fr; }
  .wm-city-skyline { height: 170px; }
  .wm-sticky-inner { gap: 10px; }
  .wm-sticky-title span { display: none; }
}

@media (max-width: 640px) {
  .wm-bento { grid-template-columns: 1fr; }
  .wm-price-save { right: -4px; top: -11px; }
  .wm-hero-perks {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 16px;
    border-radius: 22px;
  }
  .wm-hero-perks li { width: 100%; padding: 8px 2px; }
  .wm-hero-perks li + li { border-left: 0; border-top: 1px dashed rgba(148, 163, 184, .18); }
  .wm-perk-ico { width: 30px; height: 30px; font-size: 12px; border-radius: 10px; }
  .wm-perk-num { font-size: 15px; }
  .wm-perk-label { font-size: 14px; }
  .wm-kit-grid { grid-template-columns: 1fr; }
  .wm-stage {
    grid-template-columns: 1fr;
    grid-template-areas:
      "laptop"
      "ratings"
      "awards"
      "bubble";
  }
  .wm-bubble { width: 100%; }
  .wm-laptop { margin-top: 40px; }
  .wm-lt-badge { width: 88px; height: 88px; }
  .wm-fields-row { grid-template-columns: 1fr; gap: 0; }
  .wm-sticky-bar .wm-btn { padding: 10px 16px; font-size: 13px; }
  .wm-sticky-price { font-size: 17px; }
  .wm-receipt { transform: none; padding: 22px 18px 16px; }
  .wm-receipt-stamp { display: none; }
  .wm-cert-seal { right: 8px; bottom: -18px; width: 84px; height: 84px; }
}

@media (max-width: 480px) {
  .wm-stage { grid-template-columns: 1fr; grid-template-areas: "laptop" "ratings" "awards" "bubble"; }
  .wm-lt-badge { width: 80px; height: 80px; }
  .wm-lt-badge-num { font-size: 18px; }
}

/* ============================================================
   REDUCED MOTION
   NOTE: intentionally NOT freezing this page's animations. The
   environment (Windows Server / RDP) reports prefers-reduced-motion:
   reduce, which killed every ambient animation — the owner explicitly
   wants the page animated (same call as style.css's awards section).
   ============================================================ */

/* ============================================================
   BUNDLE — SOFT SPLIT (ported from bundle-redesigns/c02)
   Dark editorial band: sticky left rail with the pitch + price
   ticket, right column of six stacked rows. Uses the site's own
   fonts (--font-heading / --font) plus the already-loaded Space
   Grotesk and Caveat. All classes namespaced ss- to avoid
   collisions with site-wide styles.
   ============================================================ */
.ss-sec{
  --ss-bg:#070b16; --ss-bg2:#0b1120;
  --ss-ink:#eef1fb; --ss-dim:#94a0c0;
  --ss-lav:#b9a8ff; --ss-peach:#ffc4a3; --ss-mint:#8fe8c8;
  --ss-line:rgba(185,168,255,.15);
  --ss-card:rgba(255,255,255,.04);
  position:relative;
  color:var(--ss-ink);
  font-family:var(--font);
  background:
    radial-gradient(900px 520px at 110% 0%, rgba(185,168,255,.11), transparent 58%),
    radial-gradient(760px 560px at -12% 88%, rgba(255,196,163,.07), transparent 60%),
    linear-gradient(180deg,var(--ss-bg),var(--ss-bg2) 60%,var(--ss-bg));
  overflow-x:clip;
}
.ss-sec ::selection{background:rgba(185,168,255,.35);color:#fff}

.ss-bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:brightness(1.18) saturate(1.08)}
.ss-bg-scrim{position:absolute;inset:0;z-index:0;background:linear-gradient(180deg, rgb(7 11 22 / 90%), rgb(7 11 22 / 67%) 45%, rgb(7 11 22 / 96%))}
.ss-sec .container{position:relative;z-index:1}
.ss-split{display:grid;grid-template-columns:5.5fr 6.5fr;gap:64px;align-items:start}

/* ---------- left rail ---------- */
.ss-rail{position:sticky;top:110px}
.ss-kicker{ /* video-testimonials shine treatment: green gradient pill,
  sweeping highlight, pulsing glow, bouncing icon */
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:9px;
  font-size:11.5px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:#0a0e1a;padding:9px 20px;border-radius:999px;
  background:linear-gradient(135deg,#3dffab,#65ee22);
  box-shadow:0 8px 30px rgba(61,255,171,.35);
  margin-bottom:24px;
  animation:ssKickerPulse 2s ease-in-out infinite;
}
.ss-kicker i{animation:ssKickerIconBounce 2s ease-in-out infinite}
.ss-kicker .k-shine{
  position:absolute;top:0;bottom:0;left:-45%;width:45%;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.65),transparent);
  animation:ssKShine 3s ease-in-out infinite;
}
@keyframes ssKShine{0%{left:-45%}55%,100%{left:115%}}
@keyframes ssKickerPulse{0%,100%{box-shadow:0 8px 30px rgba(61,255,171,.35)}50%{box-shadow:0 8px 38px rgba(61,255,171,.6)}}
@keyframes ssKickerIconBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
/* wobbling save-sticker pinned on the ticket corner (8-point burst) */
.ss-save{
  position:absolute;top:-30px;right:-14px;z-index:3;width:92px;height:92px;
  display:grid;place-items:center;transform:rotate(9deg);
  transform-origin:50% -14px; /* hangs from a point above: pendulum swing */
  filter:drop-shadow(0 10px 18px rgba(251,113,133,.35));
  animation:ssSaveWob 2.8s ease-in-out infinite, ssSaveGlow 2.8s ease-in-out infinite;
}
.ss-save::before,.ss-save::after{content:'';position:absolute;inset:12px;border-radius:12px;background:linear-gradient(135deg,#fde68a,#fbbf24 55%,#fb7185)}
.ss-save::after{transform:rotate(45deg)}
.ss-save>span{position:relative;z-index:1;display:grid;justify-items:center;line-height:1;font-family:var(--wm-font-num);color:#33102b;font-size:10px;font-weight:700;letter-spacing:.14em}
.ss-save b{font-size:23px;font-weight:700;letter-spacing:0;margin-top:2px}
@keyframes ssSaveWob{0%,100%{transform:rotate(-8deg) scale(1)}50%{transform:rotate(14deg) scale(1.1)}}
@keyframes ssSaveGlow{0%,100%{filter:drop-shadow(0 10px 18px rgba(251,113,133,.35))}50%{filter:drop-shadow(0 12px 28px rgba(251,191,36,.65))}}

/* twinkling star sparks around the kicker (video-testimonials treatment) */
.ss-k-wrap{position:relative;display:inline-block}
.ss-k-spark{
  position:absolute;color:#3dffab;text-shadow:0 0 10px rgba(61,255,171,.9);
  pointer-events:none;animation:ssSparkTwinkle 1.8s ease-in-out infinite;
}
.ss-k-spark.s1{top:-12px;right:-16px;font-size:15px}
.ss-k-spark.s2{bottom:-13px;left:-16px;font-size:12px;color:#fbbf24;text-shadow:0 0 10px rgba(251,191,36,.9);animation-delay:.6s}
.ss-k-spark.s3{top:2px;left:-26px;font-size:10px;color:#22d3ee;text-shadow:0 0 10px rgba(34,211,238,.9);animation-delay:1.1s}
@keyframes ssSparkTwinkle{0%,100%{opacity:.15;transform:scale(.55) rotate(0deg)}50%{opacity:1;transform:scale(1.15) rotate(25deg)}}
/* entrance rise and the pulse must coexist: combine both animations once
   the reveal fires (beats the generic .ss-sec .reveal.visible shorthand) */
.ss-sec .ss-kicker.reveal.visible{
  animation:ssRise .65s cubic-bezier(.22,1,.36,1) var(--ssd,0s) backwards,
            ssKickerPulse 2s ease-in-out 1s infinite;
}
.ss-rail h2{
  font-family:var(--font-heading);
  font-size:clamp(38px,4.8vw,64px);
  font-weight:800;line-height:1.1;letter-spacing:-.02em;
}
.ss-grad{ /* hero shimmer, same recipe as .wm-h1-grad:
  gold → amber → rose, flowing across via background-position */
  display:block;
  text-shadow:none; /* with a transparent text fill a shadow paints a veil */
  background-image:linear-gradient(115deg,#fde68a 0%,#fbbf24 30%,#fb7185 65%,#fde68a 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:#fbbf24;-webkit-text-fill-color:transparent; /* fallback if text-clip unsupported */
  animation:ssGradFlow 6s ease-in-out infinite;
}
@keyframes ssGradFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes ssGradSlide{to{background-position:200% center}}
.ss-lead{margin:20px 0 0;font-size:16px;font-weight:500;line-height:1.75;color:var(--ss-dim);max-width:420px}

/* self-master promo banner — elevated offer strip under the bundle lead */
.ss-promo{margin:18px 0 0;position:relative;display:flex;align-items:center;gap:13px;flex-wrap:wrap;
  padding:13px 16px;border-radius:16px;max-width:420px;
  background:linear-gradient(120deg,rgba(61,255,171,.12),rgba(255,212,126,.08) 55%,rgba(110,231,245,.09));
  border:1px solid rgba(61,255,171,.4);
  box-shadow:0 16px 44px -24px rgba(61,255,171,.55), inset 0 1px 0 rgba(255,255,255,.08)}
.ss-promo .ss-promo-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:999px;flex:none;
  background:linear-gradient(135deg,#3dffab,#65ee22);color:#071019;
  font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  box-shadow:0 10px 26px -10px rgba(61,255,171,.8)}
.ss-promo p{margin:0;font-size:15.5px;font-weight:600;line-height:1.6;color:#eef1fc;flex:1 1 220px}
.ss-promo p b{color:#ffd47e}

/* price ticket */
.ss-ticket{
  margin-top:40px;position:relative;max-width:430px;
  border:2px solid transparent;border-radius:26px;padding:28px 28px 26px;
  background:
    linear-gradient(165deg,#141b2f,#0d1324) padding-box,
    linear-gradient(120deg,#3dffab,#fbbf24 30%,#fb7185 55%,#b9a8ff 80%,#3dffab) border-box;
  background-size:auto,320% 320%;
  background-position:0% 50%,0% 50%;
  box-shadow:0 30px 70px -26px rgba(0,0,0,.75), 0 0 46px -14px rgba(61,255,171,.28);
  animation:ssTicketFloat 5.5s ease-in-out 1.3s infinite, ssBorderFlow 7s linear infinite;
}
@keyframes ssTicketFloat{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes ssBorderFlow{0%{background-position:0% 50%,0% 50%}100%{background-position:0% 50%,320% 50%}}
.ss-ticket::before,.ss-ticket::after{ /* punch holes seated on the perforation */
  content:'';position:absolute;width:26px;height:26px;border-radius:50%;
  background:var(--ss-bg2);border:1px solid var(--ss-line);top:auto;bottom:90px;transform:none;
}
.ss-ticket::before{left:-14px}
.ss-ticket::after{right:-14px}
.ss-tk-kicker{font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:#fbbf24;display:flex;align-items:center;gap:8px}
.ss-live-dot{width:8px;height:8px;border-radius:50%;background:#3dffab;flex:none;animation:ssPing 1.8s ease-out infinite}
@keyframes ssPing{0%{box-shadow:0 0 0 0 rgba(61,255,171,.55)}70%,100%{box-shadow:0 0 0 8px rgba(61,255,171,0)}}
.ss-tk-amount{display:flex;align-items:baseline;gap:14px;margin:14px 0 6px}
.ss-tk-now{
  font-family:var(--wm-font-num);font-size:60px;font-weight:700;line-height:1;
  background-image:linear-gradient(115deg,#fde68a 0%,#fbbf24 30%,#fff 48%,#fb7185 70%,#fde68a 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:#fbbf24;-webkit-text-fill-color:transparent;
  animation:ssGradFlow 6s ease-in-out infinite;
}
.ss-tk-was{font-family:var(--wm-font-num);font-size:19px;font-weight:500;color:#5d6a8f;text-decoration:line-through}
.ss-tk-note{font-size:13px;font-weight:500;color:var(--ss-dim);margin-bottom:0}
.ss-tk-note b{color:var(--ss-mint);font-weight:700}
.ss-tk-cta{margin-top:24px;padding-top:24px;border-top:1px dashed rgba(255,255,255,.2)}
/* pvcta-style drawer CTA (ported from the popular-section button) */
.ss-pvcta{
  --pvc-color:#d8ff7c;
  --pvc-corner:rgba(255,255,255,.28);
  --pvc-dist:12px; --pvc-mult:1.3;
  --pvc-timing:cubic-bezier(0,0,0,2.5); --pvc-dur:250ms;
  position:relative;display:flex;align-items:center;justify-content:center;margin:2px 4px 0;
}
.ss-btn{
  position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;
  min-width:215px;min-height:48px;border-radius:16px;border:none;padding:.3em 1.6em;
  text-decoration:none;
  background:linear-gradient(#fff2,#0001),var(--pvc-color);
  box-shadow:1px 1px 2px -1px #fff inset,0 2px 1px #00000010,0 4px 2px #00000010,0 8px 4px #00000010,0 16px 8px #00000010,0 32px 16px #00000010;
  transition:transform var(--pvc-dur) var(--pvc-timing),filter var(--pvc-dur) var(--pvc-timing);
  cursor:pointer;
}
.ss-btn:focus-visible{outline:2px solid var(--pvc-color);outline-offset:3px}
.ss-btn-text{
  display:inline-block;font-family:var(--wm-font-num);font-size:17px;font-weight:700;letter-spacing:.01em;
  color:transparent;background-image:linear-gradient(#444,#000a);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 #fff6) drop-shadow(0 -1px 0 #0006);
  transition:transform var(--pvc-dur) var(--pvc-timing),filter var(--pvc-dur) var(--pvc-timing),color var(--pvc-dur) var(--pvc-timing);
}
.ss-drawer{
  position:absolute;display:flex;justify-content:center;align-items:center;
  min-height:32px;padding:.35em 1em;border:none;
  font-family:var(--wm-font-num);font-size:12.5px;font-weight:700;letter-spacing:.08em;
  color:rgba(0,0,0,.62);white-space:nowrap;
  background:linear-gradient(#fff2,#0001),#fbff13;
  opacity:0;filter:blur(2px);pointer-events:none;
  transition:transform calc(.5*var(--pvc-dur)) ease,filter var(--pvc-dur) var(--pvc-timing),opacity calc(.5*var(--pvc-dur)) ease;
}
.ss-dt{top:0;left:24px;border-radius:12px 12px 12px 0;align-items:start}
.ss-db{bottom:0;right:24px;border-radius:12px 12px 0 12px;align-items:end}
.ss-corner{position:absolute;width:30px;fill:none;stroke:var(--pvc-corner);stroke-width:1;pointer-events:none;transition:transform var(--pvc-dur) var(--pvc-timing),filter var(--pvc-dur) var(--pvc-timing)}
.ss-corner:nth-of-type(1){top:0;left:0;transform:translate(calc(-1*var(--pvc-dist)),calc(-1*var(--pvc-dist))) rotate(90deg)}
.ss-corner:nth-of-type(2){top:0;right:0;transform:translate(var(--pvc-dist),calc(-1*var(--pvc-dist))) rotate(180deg)}
.ss-corner:nth-of-type(3){bottom:0;right:0;transform:translate(var(--pvc-dist),var(--pvc-dist)) rotate(-90deg)}
.ss-corner:nth-of-type(4){bottom:0;left:0;transform:translate(calc(-1*var(--pvc-dist)),var(--pvc-dist)) rotate(0deg)}
.ss-pvcta:hover .ss-btn,.ss-pvcta:focus-within .ss-btn{transform:scale(1.05);filter:drop-shadow(0 16px 16px rgba(0,0,0,.35))}
.ss-pvcta:hover .ss-dt,.ss-pvcta:focus-within .ss-dt{transform:translateY(-26px) rotateZ(4deg);filter:blur(0);animation:pvHueSpin 3s infinite linear;opacity:1}
.ss-pvcta:hover .ss-db,.ss-pvcta:focus-within .ss-db{transform:translateY(26px) rotateZ(4deg);filter:blur(0);animation:pvHueSpin 3s infinite linear;opacity:1}
.ss-pvcta:hover .ss-btn-text,.ss-pvcta:focus-within .ss-btn-text{filter:drop-shadow(0 1px 0 #fff6) drop-shadow(0 -1px 0 #0006) drop-shadow(0 6px 2px rgba(0,0,0,.2));transform:scale(1.05);color:rgba(0,0,0,.55)}
.ss-pvcta:hover,.ss-pvcta:focus-within{--pvc-corner:rgba(255,255,255,.5)}
.ss-pvcta:hover .ss-corner:nth-of-type(1),.ss-pvcta:focus-within .ss-corner:nth-of-type(1){transform:translate(calc(-1.5*var(--pvc-dist)),calc(-1.5*var(--pvc-dist))) rotate(90deg)}
.ss-pvcta:hover .ss-corner:nth-of-type(2),.ss-pvcta:focus-within .ss-corner:nth-of-type(2){transform:translate(calc(1.5*var(--pvc-dist)),calc(-1.5*var(--pvc-dist))) rotate(180deg)}
.ss-pvcta:hover .ss-corner:nth-of-type(3),.ss-pvcta:focus-within .ss-corner:nth-of-type(3){transform:translate(calc(1.5*var(--pvc-dist)),calc(1.5*var(--pvc-dist))) rotate(-90deg)}
.ss-pvcta:hover .ss-corner:nth-of-type(4),.ss-pvcta:focus-within .ss-corner:nth-of-type(4){transform:translate(calc(-1.5*var(--pvc-dist)),calc(1.5*var(--pvc-dist))) rotate(0deg)}
.ss-tk-hand{
  position:absolute;top:-38px;left:2px;right:auto;font-family:'Caveat',cursive;font-size:21px;
  color:#fbbf24;transform:rotate(-4deg);animation:ssTkBob 2.8s ease-in-out infinite;
}
.ss-tk-hand i{font-size:13px}
@keyframes ssTkBob{0%,100%{transform:rotate(4deg) translateY(0)}50%{transform:rotate(4deg) translateY(5px)}}

/* ---------- right stack ---------- */
.ss-stack{display:flex;flex-direction:column;gap:16px}
.ss-stack-head{
  font-family:'Caveat',cursive;font-size:24px;color:var(--ss-lav);margin-bottom:4px;transform:rotate(-1deg);
}
.ss-row{
  position:relative;display:flex;align-items:center;gap:18px;
  border:1px solid color-mix(in srgb, var(--rc,var(--ss-lav)) 22%, transparent);
  border-radius:24px;padding:20px 22px;overflow:hidden;
  background:
    radial-gradient(140px 100px at 0% 50%, color-mix(in srgb, var(--rc,var(--ss-lav)) 13%, transparent), transparent 72%),
    linear-gradient(100deg, color-mix(in srgb, var(--rc,var(--ss-lav)) 8%, transparent), rgba(255,255,255,.02) 46%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 18px 44px -30px rgba(0,0,0,.85);
  transition:transform .3s, border-color .3s, box-shadow .3s;
}
.ss-row::before{ /* left color ribbon on hover */
  content:'';position:absolute;left:0;top:14%;bottom:14%;width:4px;border-radius:0 6px 6px 0;
  background:var(--rc,var(--ss-lav));opacity:0;transition:opacity .3s;
}
.ss-row:hover{transform:translateX(8px);border-color:color-mix(in srgb, var(--rc,var(--ss-lav)) 60%, transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 12px 36px -12px color-mix(in srgb, var(--rc,var(--ss-lav)) 45%, transparent)}
.ss-row:hover::before{opacity:1}
.ss-num{
  position:absolute;top:-8px;left:-9px;min-width:23px;height:23px;padding:0 6px;
  border-radius:999px;display:grid;place-items:center;
  font-family:var(--wm-font-num);font-size:11px;font-weight:700;letter-spacing:.05em;
  color:#0a0e1a;background:linear-gradient(135deg,var(--rc,var(--ss-lav)),#fff);
  box-shadow:0 4px 12px -3px color-mix(in srgb, var(--rc,var(--ss-lav)) 65%, transparent);
}
.ss-ic{
  position:relative;width:56px;height:56px;flex:none;border-radius:18px;display:grid;place-items:center;font-size:20px;
  color:var(--rc,var(--ss-lav));
  background:linear-gradient(145deg, color-mix(in srgb, var(--rc,var(--ss-lav)) 26%, transparent), color-mix(in srgb, var(--rc,var(--ss-lav)) 9%, transparent));
  border:1px solid color-mix(in srgb, var(--rc,var(--ss-lav)) 38%, transparent);
  box-shadow:inset 0 0 18px color-mix(in srgb, var(--rc,var(--ss-lav)) 14%, transparent);
  transition:transform .35s cubic-bezier(.34,1.4,.64,1), box-shadow .35s;
}
.ss-row:hover .ss-ic{
  transform:translateY(-2px) scale(1.07);
  box-shadow:0 10px 24px -8px color-mix(in srgb, var(--rc,var(--ss-lav)) 55%, transparent),
    inset 0 0 18px color-mix(in srgb, var(--rc,var(--ss-lav)) 14%, transparent);
}
.ss-copy h3{
  width:fit-content; /* gradient spans the words, not the empty block */
  font-family:var(--font-heading);font-size:25px;font-weight:800;letter-spacing:-.01em;
  background:linear-gradient(95deg,#fff 15%,var(--rc,var(--ss-lav)) 85%);
  -webkit-background-clip:text;background-clip:text;
  color:#fff;-webkit-text-fill-color:transparent;
}
.ss-copy p{font-size:14px;font-weight:500;color:var(--ss-dim);line-height:1.6;margin-top:5px;max-width:480px}
.ss-tag{
  margin-left:auto;flex:none;font-family:var(--wm-font-num);font-size:10.5px;font-weight:700;
  letter-spacing:.18em;color:var(--rc,var(--ss-lav));
  padding:7px 13px;border-radius:999px;
  background:color-mix(in srgb, var(--rc,var(--ss-lav)) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--rc,var(--ss-lav)) 40%, transparent);
  transition:background .3s;
}
.ss-row:hover .ss-tag{background:color-mix(in srgb, var(--rc,var(--ss-lav)) 26%, transparent)}

.ss-row.r1{--rc:#ffc4a3}.ss-row.r2{--rc:#8fe8c8}.ss-row.r3{--rc:#b9a8ff}
.ss-row.r4{--rc:#8fc7ff}.ss-row.r5{--rc:#ffd48f}.ss-row.r6{--rc:#ff9fb8}

/* ---------- entrance choreography ----------
   Built on the site's .reveal/.visible system (main.js adds .visible;
   .no-js fail-open comes from style.css). Keyframes carry the motion and
   use backwards fill only, so content can never get stuck hidden. */
.ss-sec .reveal.visible{animation:ssRise .65s cubic-bezier(.22,1,.36,1) var(--ssd,0s) backwards}
.ss-sec .ss-ticket.reveal.visible{
  animation:ssTicketIn .8s cubic-bezier(.22,1,.36,1) var(--ssd,0s) backwards,
            ssTicketFloat 5.5s ease-in-out 1.4s infinite,
            ssBorderFlow 7s linear infinite;
}
.ss-sec .ss-row.reveal.visible{animation-name:ssRowIn;animation-duration:.7s}
.ss-rail .ss-kicker{--ssd:0s}
.ss-rail h2{--ssd:.08s}
.ss-rail .ss-lead{--ssd:.16s}
.ss-rail .ss-ticket{--ssd:.28s}
.ss-stack .ss-stack-head{--ssd:0s}
.ss-stack .ss-row:nth-of-type(1){--ssd:.06s}
.ss-stack .ss-row:nth-of-type(2){--ssd:.12s}
.ss-stack .ss-row:nth-of-type(3){--ssd:.18s}
.ss-stack .ss-row:nth-of-type(4){--ssd:.24s}
.ss-stack .ss-row:nth-of-type(5){--ssd:.30s}
.ss-stack .ss-row:nth-of-type(6){--ssd:.36s}
@keyframes ssRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes ssTicketIn{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}
@keyframes ssRowIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}

/* Reduced motion: only the big one-shot entrances are flattened into a
   quick fade and the floating note is stilled. The small decorative loops —
   shine sweep, star twinkle, glow pulse, gradient slide, icon bounce —
   deliberately keep running so the section stays alive for users whose OS
   disables animations. */
@media (prefers-reduced-motion:reduce){
  .ss-sec .reveal.visible{animation-name:ssFade!important}
  .ss-sec .ss-ticket.reveal.visible,
  .ss-sec .ss-row.reveal.visible{animation-name:ssFade!important;animation-duration:.4s!important}
  .ss-sec .ss-kicker.reveal.visible{animation:ssFade .4s ease var(--ssd,0s) backwards, ssKickerPulse 2s ease-in-out infinite!important}
  .ss-tk-hand{animation:none!important}
  .ss-sec .ss-ticket{animation:none!important}
  .ss-sec .ss-live-dot{animation:none!important}
  .ss-sec .ss-dt,.ss-sec .ss-db{animation:none!important}
}
@keyframes ssFade{from{opacity:0}to{opacity:1}}

@media (max-width:960px){
  .ss-split{grid-template-columns:1fr;gap:48px}
  .ss-rail{position:static}
  .ss-lead{max-width:none}
  .ss-tag{display:none}
}
@media (max-width:560px){
  .ss-row{padding:18px;gap:14px}
  .ss-ic{width:46px;height:46px}
  .ss-ticket::before,.ss-ticket::after{display:none}
}

/* ============================================================
   FINAL CTA TICKET (masters variant)
   The longer "Become A Workday Master" headline wraps to three
   lines at the shared ticket's 52px cap, bloating the pass to
   ~600px and leaving a dead gap in the stub. Compact it back to
   boarding-pass proportions on this page only.
   ============================================================ */
.final-cta .cta-ticket-main { padding: 38px 42px; }
.final-cta .cta-ticket-header { margin-bottom: 14px; }
.final-cta .cta-pill { margin-bottom: 13px; }
.final-cta .cta-ticket h2 { font-size: clamp(27px, 3.1vw, 40px); }
.final-cta .cta-ticket p { margin-bottom: 22px; }
.final-cta .wd-enroll-proof { margin-top: 18px; font-size: 13px; }
.final-cta .cta-btn { padding: 12px 22px; }
/* spread seal / features / route instead of one large hole above the route */
.final-cta .cta-ticket-stub { justify-content: space-between; }
.final-cta .cta-route { margin-top: 0; }

@media (max-width:720px){
  .final-cta .cta-ticket-main { padding: 30px 22px; }
  .final-cta .wd-enroll-proof { margin-top: 14px; }
}

/* ============================================================
   CERTIFICATE SECTION - Special Delivery redesign (light theme)
   Certified-mail concept: the certificate rises out of a kraft
   airmail envelope with a wax seal, postmark and stamp.
   All classes are sd- prefixed and scoped under .sd-cert.
   ============================================================ */
.sd-cert{
  position:relative;
  background:
    radial-gradient(rgba(74,58,40,.05) 1.2px, transparent 1.3px) 0 0/24px 24px,
    linear-gradient(180deg,#FFFBF4,#F9F1E3);
  color:#4A3A28;
  padding:100px 0;
  overflow:hidden;
}
.sd-cert .sd-doodle{position:absolute;color:#CBB08A;opacity:.75;pointer-events:none}
.sd-cert .sd-d1{top:9%;left:4%;font-size:1.5rem;transform:rotate(-10deg)}
.sd-cert .sd-d2{top:22%;left:46%;font-size:1.2rem;transform:rotate(8deg)}
.sd-cert .sd-d3{top:62%;left:2.5%;font-size:1.4rem;transform:rotate(7deg)}
.sd-cert .sd-d4{top:11%;right:5%;font-size:1.6rem;transform:rotate(12deg)}
.sd-cert .sd-d5{top:52%;right:3%;font-size:1.25rem;transform:rotate(-9deg)}

.sd-cert .sd-head{max-width:660px;margin-bottom:54px}
.sd-cert .sd-kicker{
  display:inline-flex;align-items:center;gap:9px;
  border:2px dashed #D64545;border-radius:6px;padding:8px 18px;
  background:#FFF;color:#C23B3B;transform:rotate(-1.2deg);
  font-weight:800;font-size:.78rem;letter-spacing:2.2px;text-transform:uppercase;
  box-shadow:3px 4px 0 rgba(214,69,69,.16);
  margin:0;
  animation:sdBadgePulse 2.4s ease-in-out 1.2s infinite;
}
@keyframes sdKickIn{from{opacity:0;transform:translateY(22px) rotate(1.2deg)}}
@keyframes sdBadgePulse{
  0%,100%{transform:rotate(-1.2deg) scale(1);box-shadow:3px 4px 0 rgba(214,69,69,.16)}
  50%{transform:rotate(-1.2deg) scale(1.06);box-shadow:3px 4px 0 rgba(214,69,69,.16),0 0 18px rgba(214,69,69,.35)}
}
.sd-cert .sd-head h2{
  font-family:'DM Sans',sans-serif;
  font-weight:800;font-size:clamp(2.1rem,4.3vw,3.1rem);line-height:1.15;
  margin:22px 0 0;color:#3E3122;letter-spacing:-.5px;
}
.sd-cert .sd-squig{
  position:relative;white-space:nowrap;display:inline-block;
  /* certified-mail palette — red → blue, the same tones as the airmail
     stripes, wax seal and postmark around it (the imported dark-hero
     neon gradient washed out on this cream background) */
  background:linear-gradient(100deg,#D64545,#C23B3B 35%,#3A63C4 75%,#5B7BB4);
  background-size:400% 400%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:brandGradientShift 6s ease-in-out infinite;
}
.sd-cert .sd-squig::after{
  content:'';position:absolute;left:0;right:0;bottom:-8px;height:8px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='8'%3E%3Cpath d='M0 4 Q 5 0 10 4 T 20 4 T 30 4 T 40 4' fill='none' stroke='%23af485d' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x;
  background-size:40px 8px;
  transform-origin:left;
}
@keyframes sdSwipe{from{transform:scaleX(0)}}
@keyframes sdRise{from{opacity:0;transform:translateY(22px)}}

.sd-cert .sd-grid{display:grid;grid-template-columns:1fr 1.12fr;gap:56px;align-items:center}
.sd-cert .sd-labels{display:grid;gap:16px;position:relative}
.sd-cert .sd-note{
  position:absolute;top:-58px;right:8px;
  font-family:'Caveat',cursive;font-size:1.5rem;font-weight:700;color:#C23B3B;
  transform:rotate(-4deg);
}
.sd-cert .sd-label{
  display:flex;gap:16px;align-items:center;
  background:#FFF;border-radius:12px;padding:17px 22px;
  border:2px solid #EADFCC;border-left:none;
  box-shadow:0 10px 24px rgba(74,58,40,.09);
  font-size:1.02rem;font-weight:600;color:#6B5942;line-height:1.5;
  position:relative;font-family:'DM Sans',sans-serif;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.sd-cert .sd-label::before{
  content:'';position:absolute;left:-2px;top:8px;bottom:8px;width:12px;
  border-left:2.5px dashed #E3CDA8;border-radius:2px;
}
.sd-cert .sd-label:hover{transform:translateY(-4px)}
.sd-cert .sd-chip{
  flex-shrink:0;width:42px;height:42px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-size:1rem;color:#fff;
  box-shadow:0 6px 12px rgba(74,58,40,.16), inset 0 2px 0 rgba(255,255,255,.4);
}
.sd-cert .sd-label:nth-child(2) .sd-chip{background:linear-gradient(140deg,#E78A5E,#D6603A)}
.sd-cert .sd-label:nth-child(3) .sd-chip{background:linear-gradient(140deg,#5B8DE8,#3A63C4)}
.sd-cert .sd-label:nth-child(4) .sd-chip{background:linear-gradient(140deg,#57B3A0,#2F8A78)}
.sd-cert .sd-tag-no{
  margin-left:auto;flex-shrink:0;
  font-family:'Space Grotesk',monospace;font-weight:700;font-size:.72rem;letter-spacing:1px;
  color:#B49A75;background:#FBF4E6;border:1.5px solid #EADFCC;border-radius:6px;padding:4px 8px;
}

.sd-cert .sd-scene{position:relative;display:flex;justify-content:center;padding:20px 0 30px}
.sd-cert .sd-drop{position:relative;width:min(560px,90vw);height:545px}

.sd-cert .sd-flap{
  position:absolute;left:4%;right:4%;bottom:196px;height:150px;z-index:1;
  background:linear-gradient(180deg,#D9BE97,#CFAF83);
  clip-path:polygon(0 100%,50% 0,100% 100%);
  border-radius:12px 12px 0 0;
}
.sd-cert .sd-env-back{
  position:absolute;left:0;right:0;bottom:0;height:250px;z-index:2;
  padding:9px;border-radius:14px;
  background:repeating-linear-gradient(45deg,#D64545 0 14px,#FFF8EC 14px 26px,#3A63C4 26px 40px,#FFF8EC 40px 52px);
  box-shadow:0 24px 44px rgba(74,58,40,.16);
}
.sd-cert .sd-env-in{width:100%;height:100%;border-radius:8px;background:linear-gradient(180deg,#EAD5B4,#E2C9A2)}

.sd-cert .sd-letter{
  position:absolute;left:7%;right:7%;bottom:132px;z-index:3;
  background:#FFF;border-radius:10px;padding:12px;
  border:1px solid #EADFCC;
  box-shadow:0 26px 54px rgba(74,58,40,.2);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);
}
.sd-cert .sd-scene:hover .sd-letter{transform:translateY(-10px) rotate(-.5deg)}
@keyframes sdLetterRise{
  0%{opacity:0;transform:translateY(190px)}
  60%{opacity:1}
  82%{transform:translateY(-10px)}
  100%{transform:translateY(0)}
}
.sd-cert .sd-letter img{display:block;width:100%;height:auto;border-radius:6px}
.sd-cert .sd-stamp{
  position:absolute;top:-16px;right:-14px;transform:rotate(6deg);
  background:#FFF;border:2.5px dashed #E3A5A5;border-radius:8px;
  width:74px;height:88px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  color:#C23B3B;font-weight:800;font-size:.6rem;letter-spacing:1.4px;
  box-shadow:0 8px 18px rgba(74,58,40,.15);
}
.sd-cert .sd-stamp i{font-size:1.5rem}
@keyframes sdStampIn{from{transform:scale(1.7) rotate(14deg);opacity:0}}

.sd-cert .sd-env-front{
  position:absolute;left:0;right:0;bottom:0;height:190px;z-index:4;
  background:linear-gradient(180deg,#F0DDBE,#E6CFA9);
  clip-path:polygon(0 0,50% 46%,100% 0,100% 100%,0 100%);
  border-radius:0 0 14px 14px;
}
.sd-cert .sd-env-front::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 49.6%,rgba(74,58,40,.07) 49.6%,rgba(74,58,40,.07) 50.4%,transparent 50.4%),
             linear-gradient(65deg,transparent 49.6%,rgba(74,58,40,.07) 49.6%,rgba(74,58,40,.07) 50.4%,transparent 50.4%);
}

.sd-cert .sd-seal{
  position:absolute;left:50%;bottom:112px;transform:translateX(-50%);z-index:5;
  width:100px;height:100px;
  background:radial-gradient(circle at 34% 30%, #E86060, #C23B3B 62%, #A92F2F);
  border-radius:46% 54% 50% 50% / 52% 48% 52% 48%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 26px rgba(169,47,47,.42), inset 0 3px 6px rgba(255,255,255,.3), inset 0 -4px 8px rgba(0,0,0,.18);
}
@keyframes sdSealStamp{0%{transform:translateX(-50%) scale(2.1);opacity:0}60%{transform:translateX(-50%) scale(.94);opacity:1}}
.sd-cert .sd-seal-ring{
  width:78px;height:78px;border-radius:50%;
  border:2px dashed rgba(255,244,230,.75);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:#FFEFE0;text-shadow:0 2px 3px rgba(0,0,0,.3);
}
.sd-cert .sd-seal-ring i{font-size:1rem}
.sd-cert .sd-seal-txt{font-size:.46rem;font-weight:800;letter-spacing:1.3px;line-height:1.35;text-align:center}

.sd-cert .sd-postmark{
  position:absolute;top:-6px;left:-4px;z-index:6;width:118px;height:118px;
  transform:rotate(-12deg);
}
@keyframes sdMarkIn{from{opacity:0;transform:rotate(-30deg) scale(1.4)}}
.sd-cert .sd-postmark svg{width:100%;height:100%;color:#5B7BB4}
.sd-cert .sd-postmark text{font-family:'Space Grotesk',monospace;font-weight:700;letter-spacing:2.5px;fill:#5B7BB4}

.sd-cert .sd-ground{
  position:absolute;left:8%;right:8%;bottom:-6px;height:34px;
  background:radial-gradient(50% 100% at 50% 0%, rgba(74,58,40,.15), rgba(74,58,40,.04) 55%, transparent 78%);
}

/* --- entrance motion, gated on the site's .reveal/.visible system ---
   main.js adds .visible when the section scrolls into view (with a 4s
   safety net), so content can never be stuck hidden by a stalled CSS
   animation clock. Keyframes use backwards fill and end in the element's
   natural state, so hover transitions keep working afterwards. */
.sd-cert .reveal.visible{animation:sdRise .65s cubic-bezier(.22,1,.36,1) backwards}
.sd-cert .sd-head.reveal.visible .sd-kicker{animation:sdKickIn .6s ease backwards, sdBadgePulse 2.4s ease-in-out 1.2s infinite}
.sd-cert .sd-head.reveal.visible h2{animation:sdRise .65s ease .1s backwards}
.sd-cert .sd-head.reveal.visible .sd-squig::after{animation:sdSwipe .7s ease .55s backwards}
.sd-cert .sd-note.reveal.visible{animation-delay:.45s}
.sd-cert .sd-label.reveal.visible:nth-child(2){animation-delay:.12s}
.sd-cert .sd-label.reveal.visible:nth-child(3){animation-delay:.24s}
.sd-cert .sd-label.reveal.visible:nth-child(4){animation-delay:.36s}
.sd-cert .sd-letter.reveal.visible{animation-name:sdLetterRise;animation-duration:1.1s;animation-delay:.15s}
.sd-cert .sd-letter.reveal.visible .sd-stamp{animation:sdStampIn .5s cubic-bezier(.34,1.8,.64,1) 1.15s backwards}
.sd-cert .sd-seal.reveal.visible{animation-name:sdSealStamp;animation-duration:.55s;animation-delay:1.3s;animation-timing-function:cubic-bezier(.34,1.8,.64,1)}
.sd-cert .sd-postmark.reveal.visible{animation-name:sdMarkIn;animation-duration:.6s;animation-delay:1.55s}

@media (max-width:960px){
  .sd-cert .sd-grid{grid-template-columns:1fr;gap:52px}
  .sd-cert .sd-head{max-width:none}
  .sd-cert .sd-note{position:static;display:inline-block;margin-bottom:8px}
  .sd-cert .sd-squig{white-space:normal}
  .sd-cert .sd-squig::after{display:none}
}
/* Reduced motion: flatten only the one-shot entrances into a quick fade.
   Do NOT nuke every duration to .001s — the ambient loops (kicker badge
   pulse, heading gradient shift) keep their `infinite` count, and .001s ×
   infinite just flickers at a random phase every frame. This environment
   (Windows Server / RDP) reports reduce while the owner wants the page
   animated — see the REDUCED MOTION note above the ss-sec block. */
@keyframes sdFade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){
  .sd-cert .reveal.visible,
  .sd-cert .sd-head.reveal.visible h2{
    animation-name:sdFade!important;animation-duration:.4s!important;
    animation-delay:0s!important;animation-timing-function:ease!important;
  }
  .sd-cert .sd-head.reveal.visible .sd-kicker{
    animation:sdFade .4s ease backwards, sdBadgePulse 2.4s ease-in-out 1.2s infinite;
  }
  /* transform-only one-shots have no reduced-motion value; just show them */
  .sd-cert .sd-head.reveal.visible .sd-squig::after,
  .sd-cert .sd-letter.reveal.visible .sd-stamp{animation:none!important}
}

/* home-page flanks inside the masters testimonials section: the vs
   section resets margin/padding for every child, so restore the orbit /
   loop geometry, and leave a side gutter so the flanks can show. */
@media (min-width: 1360px) {
  #verified-stories.vs3 .vs-shell { max-width: 1020px; }
}
#verified-stories .vts-agents {
  width: min(300px, calc((100vw - 1020px) / 2));
  padding: 14px 0;
}
#verified-stories .vts-orbit { margin-top: -300px; }
#verified-stories .vts-sat { margin-left: -23px; }
#verified-stories .vts-sat.br,
#verified-stories .vts-sat.bl,
#verified-stories .vts-sat.tr,
#verified-stories .vts-sat.tl { margin-top: -23px; }
#verified-stories .vts-pkt.pk1,
#verified-stories .vts-pkt.pk2 { margin-left: -4.5px; }
#verified-stories .vts-pkt.pk3 { margin-top: -4.5px; }