/* ==========================================================================
   SERVORA SITE MOTION LAYER  (assets/motion.css)

   Two things live here, and only two:

   1. THE WIDGET SHELL (.svw …) — a miniature of the real product playing
      itself inside a device frame, grown out of marketing hub/_ui/ad.css.
      Everything is scoped under .svw so nothing leaks into the page and
      nothing on the page leaks in. The .ds-* classes inside a widget come
      from design.css (the product's real stylesheet); this file only
      scales them down (--ui-scale) and adds the frame, the synthetic
      pointer, the caret, the toast, the sheet — the theatre.

   2. THE AMBIENT CLASSES (.sv-*) — page-level motion any section can wear:
      rise on scroll, unblur on scroll, self-typing text, count-ups,
      tap-anywhere decks. Declarative, no per-page scripting needed.

   Nothing in here declares a colour scheme for a PAGE. Pages keep their own
   aesthetics (that difference is intentional); this layer only carries
   motion and glass.
   ========================================================================== */

:root{
  --sv-ease-spring:cubic-bezier(.16,1,.3,1);
  --sv-ease-out:cubic-bezier(.22,.9,.3,1);
}

/* HARD RULE: nothing on a page that carries this layer may ever poke past
   the screen's edge, on any device. clip (not hidden) so position:sticky
   keeps working; hidden as the fallback for older engines. */
html{overflow-x:clip}
@supports not (overflow: clip){ html{overflow-x:hidden} }

/* ============================================================= 1 · WIDGET */

.svw{
  position:relative;
  --ui-scale:.92;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  user-select:none;-webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.svw *{box-sizing:border-box}
.svw :focus{outline:none!important}

/* ---- device frame ----
   max-width is the SMALLER of the widget's stated size and the container:
   a 380px device may never poke out of a 300px card. */
.svw{max-width:100%}
/* A widget's panes are <section> elements, and several pages run their own
   scroll-reveal that sets every <section> to opacity 0 (.reveal) until it
   intersects. That observer never sees the fresh nodes a scene's loop-reset
   creates, so without this line a replayed widget is a white screen with a
   wandering pointer. Inside a widget the page's reveal must never apply.
   (Safe with the swipe animation: swipe() rewrites a pane's className,
   which strips .reveal before any pane transform runs.) */
.svw .reveal{opacity:1!important;transform:none!important}
.svw .dev{position:relative;width:100%;max-width:min(var(--svw-w,420px),100%);margin:0 auto}
.svw .dev__glow{
  position:absolute;inset:-8% -6% -12%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,var(--svw-glow,rgba(91,140,255,.20)),transparent 72%);
  filter:blur(28px);
}
.svw .dev__body{
  position:relative;z-index:1;border-radius:24px;overflow:hidden;
  background:#0A0E16;border:1px solid rgba(255,255,255,.14);
  box-shadow:
    0 1px 0 rgba(255,255,255,.16) inset,
    0 0 0 1px rgba(0,0,0,.55),
    0 44px 90px -44px rgba(2,6,18,.85),
    0 18px 38px -24px rgba(2,6,18,.7);
}
.svw .dev__body::after{ /* specular sweep across the glass */
  content:"";position:absolute;inset:0;pointer-events:none;z-index:8;
  background:linear-gradient(128deg,rgba(255,255,255,.09),rgba(255,255,255,.015) 24%,transparent 46%);
  mix-blend-mode:screen;
}
.svw .dev__screen{
  position:relative;background:#F5F7FB;overflow:hidden;
  height:var(--svw-h,480px);
}

/* on-page (frameless) variant: a widget that is just a card, no phone bezel */
.svw--flat .dev__body{border-radius:16px;background:#fff;border:1px solid var(--line,#E6EAF0);
  box-shadow:0 30px 60px -34px rgba(16,24,40,.35),0 8px 22px -14px rgba(16,24,40,.25)}
.svw--flat .dev__body::after{display:none}
.svw--flat .dev__screen{background:#F5F7FB}

/* ---- the real software, scaled (port of ad.css, scoped) ---- */
.svw .ui{
  position:absolute;inset:0;background:#F5F7FB;
  font-size:calc(15px * var(--ui-scale));
  display:flex;flex-direction:column;
}
.svw .ui .ds-card{padding:calc(16px * var(--ui-scale));border-radius:calc(14px * var(--ui-scale))}
.svw .ui .ds-btn{min-height:calc(38px * var(--ui-scale));padding:0 calc(16px * var(--ui-scale));font-size:calc(13.5px * var(--ui-scale));border-radius:calc(10px * var(--ui-scale))}
.svw .ui .ds-btn--sm{min-height:calc(30px * var(--ui-scale));font-size:calc(12px * var(--ui-scale));padding:0 calc(11px * var(--ui-scale))}
.svw .ui .ds-input,.svw .ui .ds-select,.svw .ui .ds-textarea{min-height:calc(38px * var(--ui-scale));font-size:calc(13.5px * var(--ui-scale));border-radius:calc(10px * var(--ui-scale));padding:0 calc(11px * var(--ui-scale))}
.svw .ui .ds-label{font-size:calc(12px * var(--ui-scale));margin-bottom:calc(5px * var(--ui-scale))}
.svw .ui .ds-chip{font-size:calc(10.5px * var(--ui-scale));padding:calc(4px * var(--ui-scale)) calc(8px * var(--ui-scale))}
.svw .ui .ds-field{margin-bottom:calc(11px * var(--ui-scale))}
.svw .ui .ds-cards{display:grid;gap:calc(9px * var(--ui-scale));grid-template-columns:repeat(3,1fr)}
.svw .ui .ds-cards .ds-card{padding:calc(11px * var(--ui-scale))}
.svw .ui .ds-cards .ds-card b{font-size:calc(21px * var(--ui-scale));display:block}
.svw .ui .ds-cards .ds-card span{font-size:calc(9px * var(--ui-scale))}
.svw .ui h1{font-size:calc(19px * var(--ui-scale));margin:0}
.svw .ui h2{font-size:calc(16px * var(--ui-scale));margin:0}
.svw .ui h3{font-size:calc(14px * var(--ui-scale));margin:0}
.svw .ui p{font-size:calc(13px * var(--ui-scale));margin:0}

/* app chrome */
.svw .ui__bar{
  display:flex;align-items:center;gap:calc(9px * var(--ui-scale));flex:none;
  padding:calc(10px * var(--ui-scale)) calc(13px * var(--ui-scale));
  background:rgba(255,255,255,.9);border-bottom:1px solid #E6EAF0;
  backdrop-filter:saturate(1.6) blur(12px);
}
.svw .ui__mark{
  width:calc(26px * var(--ui-scale));height:calc(26px * var(--ui-scale));border-radius:calc(7px * var(--ui-scale));
  background:linear-gradient(180deg,#2E6BF0,#1D4ED8);color:#fff;display:grid;place-items:center;
  font-weight:800;font-size:calc(12px * var(--ui-scale));flex:none;box-shadow:0 5px 14px -5px rgba(29,78,216,.5);
}
.svw .ui__name{font-weight:700;font-size:calc(13.5px * var(--ui-scale));letter-spacing:-.01em;color:#101828;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svw .ui__who{
  margin-left:auto;flex:none;font-size:calc(9.5px * var(--ui-scale));font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#5A6474;background:#EEF2F8;border-radius:999px;padding:calc(4px * var(--ui-scale)) calc(9px * var(--ui-scale));
}
.svw .ui__body{flex:1;overflow:hidden;padding:calc(13px * var(--ui-scale));display:flex;flex-direction:column;gap:calc(10px * var(--ui-scale))}
.svw .ui__title{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none}
.svw .ui__crumb{font-size:calc(10px * var(--ui-scale));font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#98A2B3}
.svw .ui__tabs{flex:none;display:flex;border-top:1px solid #E6EAF0;background:rgba(255,255,255,.94)}
.svw .ui__tabs div{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:calc(7px * var(--ui-scale)) 0;font-size:calc(9.5px * var(--ui-scale));font-weight:600;color:#98A2B3;
  border-top:2px solid transparent;
}
.svw .ui__tabs div svg{width:calc(17px * var(--ui-scale));height:calc(17px * var(--ui-scale));stroke:currentColor;fill:none;stroke-width:1.9}
.svw .ui__tabs div.on{color:#1D4ED8;border-top-color:#1D4ED8}

/* panes (portal-to-portal swipes) */
.svw .pane{position:absolute;inset:0;display:flex;flex-direction:column;background:#F5F7FB;will-change:transform}
.svw .pane[hidden]{display:none}
.svw .pane--enterR{animation:svPaneInR .48s var(--sv-ease-spring) both}
.svw .pane--enterL{animation:svPaneInL .48s var(--sv-ease-spring) both}
.svw .pane--exitL{animation:svPaneOutL .48s var(--sv-ease-spring) both}
.svw .pane--exitR{animation:svPaneOutR .48s var(--sv-ease-spring) both}
@keyframes svPaneInR{from{transform:translateX(100%)}to{transform:none}}
@keyframes svPaneInL{from{transform:translateX(-100%)}to{transform:none}}
@keyframes svPaneOutL{from{transform:none}to{transform:translateX(-32%)}}
@keyframes svPaneOutR{from{transform:none}to{transform:translateX(32%)}}

/* rows, checklists, fields — the product's shapes, scaled */
.svw .lrow{display:flex;align-items:center;gap:calc(10px * var(--ui-scale));padding:calc(10px * var(--ui-scale));
  border:1px solid #E6EAF0;border-radius:calc(10px * var(--ui-scale));background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.05)}
.svw .lrow__ic{width:calc(28px * var(--ui-scale));height:calc(28px * var(--ui-scale));border-radius:calc(7px * var(--ui-scale));
  background:#EAF1FE;display:grid;place-items:center;flex:none}
.svw .lrow__ic svg{width:calc(14px * var(--ui-scale));height:calc(14px * var(--ui-scale));stroke:#1D4ED8;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.svw .lrow__t{flex:1;min-width:0}
.svw .lrow__t b{display:block;font-size:calc(12.5px * var(--ui-scale));font-weight:650;color:#101828;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svw .lrow__t span{display:block;font-size:calc(10.5px * var(--ui-scale));color:#667085;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.svw .ckrow{display:flex;align-items:center;gap:calc(9px * var(--ui-scale));padding:calc(9px * var(--ui-scale)) 0;border-bottom:1px solid #EEF1F6}
.svw .ckrow:last-child{border-bottom:none}
.svw .ckrow .lbl{font-size:calc(12.5px * var(--ui-scale));color:#1D2939;transition:.25s;flex:1;min-width:0}
.svw .ckrow .meta{font-size:calc(9.5px * var(--ui-scale));color:#98A2B3;flex:none}

.svw .tick{width:calc(18px * var(--ui-scale));height:calc(18px * var(--ui-scale));border-radius:calc(5px * var(--ui-scale));
  border:1.6px solid #D0D5DD;background:#fff;flex:none;display:grid;place-items:center;transition:.24s var(--sv-ease-out)}
.svw .tick svg{width:70%;height:70%;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:22;stroke-dashoffset:22}
.svw .tick.on{background:#12A150;border-color:#12A150}
.svw .tick.on svg{stroke-dashoffset:0;transition:stroke-dashoffset .3s var(--sv-ease-out) .04s}

.svw .fld{
  width:100%;min-height:calc(38px * var(--ui-scale));display:flex;align-items:center;
  padding:0 calc(11px * var(--ui-scale));font-size:calc(13.5px * var(--ui-scale));color:#101828;
  background:#fff;border:1px solid #E6EAF0;border-radius:calc(10px * var(--ui-scale));
  transition:border-color .15s,box-shadow .15s;overflow:hidden;white-space:nowrap;
}
.svw .fld--area{min-height:calc(58px * var(--ui-scale));align-items:flex-start;padding-top:calc(9px * var(--ui-scale));white-space:normal;line-height:1.45}
.svw .fld:empty::before{content:attr(data-ph);color:#98A2B3}

/* sheet (in-device modal) */
.svw .sheetbg{
  position:absolute;inset:0;z-index:30;background:rgba(16,24,40,.42);
  backdrop-filter:blur(3px);display:flex;align-items:flex-end;opacity:0;transition:opacity .26s var(--sv-ease-out);
}
.svw .sheetbg.in{opacity:1}
.svw .sheetbg[hidden]{display:none}
.svw .sheet{
  width:100%;background:#fff;border-radius:calc(20px * var(--ui-scale)) calc(20px * var(--ui-scale)) 0 0;
  padding:calc(16px * var(--ui-scale));max-height:92%;overflow:hidden;
  transform:translateY(100%);transition:transform .4s var(--sv-ease-spring);
  box-shadow:0 -18px 40px -20px rgba(16,24,40,.4);
}
.svw .sheetbg.in .sheet{transform:none}
.svw .sheet__grip{width:34px;height:4px;border-radius:99px;background:#E6EAF0;margin:0 auto calc(12px * var(--ui-scale))}
.svw .sheet__h{font-weight:700;font-size:calc(15px * var(--ui-scale));color:#101828;margin:0 0 calc(12px * var(--ui-scale));letter-spacing:-.015em}

/* theatre: pointer, ring, press, caret, toast, landing, signature */
.svw .cur{
  position:absolute;z-index:40;left:0;top:0;width:22px;height:22px;pointer-events:none;
  opacity:0;transform:translate(-50%,-50%) scale(.9);transition:opacity .2s;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.35));
}
.svw .cur.on{opacity:1}
.svw .cur svg{width:100%;height:100%;display:block}
.svw .ring{
  position:absolute;z-index:39;width:16px;height:16px;border-radius:50%;pointer-events:none;
  border:2px solid rgba(29,78,216,.85);transform:translate(-50%,-50%) scale(.3);opacity:0;
}
.svw .ring.go{animation:svRing .5s var(--sv-ease-out) forwards}
@keyframes svRing{0%{transform:translate(-50%,-50%) scale(.3);opacity:.95}100%{transform:translate(-50%,-50%) scale(3.4);opacity:0}}
.svw .pressed{transform:scale(.965)!important;transition:transform .1s var(--sv-ease-out)!important;filter:brightness(.97)}

.svw .caret,.caret{
  display:inline-block;width:1.5px;height:1em;margin-left:1px;vertical-align:-.14em;
  background:#1D4ED8;animation:svBlink 1.05s steps(1,end) infinite;
}
@keyframes svBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
.svw .typing{border-color:#1D4ED8!important;box-shadow:0 0 0 3px rgba(29,78,216,.16)!important}

.svw .tst{
  position:absolute;left:50%;bottom:calc(14px * var(--ui-scale));z-index:35;
  transform:translate(-50%,14px);opacity:0;
  padding:calc(9px * var(--ui-scale)) calc(15px * var(--ui-scale));border-radius:999px;
  font-size:calc(12.5px * var(--ui-scale));font-weight:600;color:#fff;background:#101828;
  box-shadow:0 12px 30px -12px rgba(0,0,0,.5);white-space:nowrap;max-width:88%;
}
.svw .tst--ok{background:#12A150}
.svw .tst.in{opacity:1;transform:translate(-50%,0);transition:opacity .28s var(--sv-ease-out),transform .4s var(--sv-ease-spring)}

.svw .landed{animation:svLanded 1s var(--sv-ease-out)}
@keyframes svLanded{0%{background:rgba(29,78,216,.14)}100%{background:transparent}}

.svw .sig{width:100%;height:calc(72px * var(--ui-scale));border:1.6px dashed #E6EAF0;border-radius:calc(10px * var(--ui-scale));
  background:repeating-linear-gradient(-45deg,#fff,#fff 9px,#FAFBFD 9px,#FAFBFD 18px);display:block}
.svw .sig path{stroke:#101828;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600)}
.svw .sig.go path{stroke-dashoffset:0;transition:stroke-dashoffset 1.2s cubic-bezier(.5,.05,.3,1)}

/* rise/pop inside widgets (driven by the scene player, not the observer) */
.svw .rise{opacity:0;transform:translateY(12px)}
.svw .rise.in{opacity:1;transform:none;transition:opacity .38s var(--sv-ease-spring),transform .46s var(--sv-ease-spring)}
.svw .pop{opacity:0;transform:scale(.94)}
.svw .pop.in{opacity:1;transform:none;transition:opacity .28s var(--sv-ease-out),transform .4s var(--sv-ease-spring)}
.svw .num{font-variant-numeric:tabular-nums}

/* an in-widget caption the scene can type into */
.svw__say{
  min-height:1.4em;font-size:13px;font-weight:600;letter-spacing:-.01em;
  opacity:0;transition:opacity .3s;
}
.svw__say.in{opacity:1}

/* compact phone: the whole widget must fit one phone screen with room to
   spare. The px line is the fallback for browsers without svh; the svh
   line refines it where supported. */
@media(max-width:560px){
  .svw{--ui-scale:.8}
  .svw .dev{max-width:min(var(--svw-w,420px),100%)}
  .svw .dev__screen{height:min(var(--svw-h,480px),420px);height:min(var(--svw-h,480px),52svh)}
  .svw .dev__body{border-radius:18px}
}

/* HARD RULE: a widget inside a card stays inside the card. The soft glow
   halo intentionally bleeds outside the device frame, but on a phone that
   bleed reads as the widget breaking its container, so it is off there.
   And every rounded funnel card clips its children at its own corner, so
   nothing inside can poke a square edge past the curved border line.
   (Mobile only: at desktop widths the funnel rail draws its numbered
   medallions OUTSIDE the node via ::before, which clipping would cut.) */
@media(max-width:760px){
  .svw:not(.svw--banner) .dev__glow{display:none}
  .fn__node{overflow:hidden}

  /* ---- EVERY display is round-cornered on a phone ----
     The frame, the glass inside it and the scaled product screen are three
     stacked boxes. Rounding only the outer one leaves the inner square
     corners painting over the curve, which is the "sharp corners poking
     out of the border" the owner reported. All three get the radius, and
     each one clips, so a square child can never reach a rounded parent's
     corner. Every value is one step smaller as it nests, which is what
     keeps the curves concentric instead of pinched. */
  .svw .dev{border-radius:22px}
  .svw .dev__body{border-radius:22px;overflow:hidden}
  .svw .dev__screen{border-radius:21px;overflow:hidden}
  .svw .ui{border-radius:21px;overflow:hidden}
  .svw .pane{border-radius:21px;overflow:hidden}
  /* the flat (window) variant sits on white, so it keeps a visible hairline */
  .svw--flat .dev__body{border-radius:18px}
  .svw--flat .dev__screen,.svw--flat .ui,.svw--flat .pane{border-radius:17px}
}

/* ---- banner variant on a phone ----
   Was edge to edge with square corners, which read as the media breaking
   out of the page. It is now an inset card: real side padding, the same
   rounded corners every other surface has, a soft glow behind it and a
   feathered outer edge so it sits INTO the page instead of on top of it.
   Doubled class + !important because several pages size their hero widget
   with their own later-in-cascade rules. ---- */
@media(max-width:760px){
  .svw.svw--banner{width:auto!important;max-width:100%!important;
    margin-left:auto!important;margin-right:auto!important;padding:0 4px}
  .svw.svw--banner .dev{max-width:100%!important;width:100%}
  .svw.svw--banner .dev__glow{display:block;inset:-6% -4% -10%;filter:blur(30px);opacity:.85}
  .svw.svw--banner .dev__body{
    border-radius:22px;
    border:1px solid rgba(255,255,255,.16);
    box-shadow:
      0 1px 0 rgba(255,255,255,.14) inset,
      0 26px 54px -26px rgba(2,6,18,.62),
      0 10px 26px -16px rgba(2,6,18,.5);
    /* feathers the last few pixels of every edge so the panel blends out
       into the band behind it rather than ending on a hard line */
    -webkit-mask-image:radial-gradient(126% 122% at 50% 48%,#000 88%,rgba(0,0,0,.55) 97%,transparent 100%);
            mask-image:radial-gradient(126% 122% at 50% 48%,#000 88%,rgba(0,0,0,.55) 97%,transparent 100%);
  }
}

/* ========================================================== 2 · AMBIENT */

/* rise on scroll */
.sv-reveal{opacity:0;transform:translateY(18px)}
.sv-reveal.in{opacity:1;transform:none;transition:opacity .55s var(--sv-ease-spring),transform .65s var(--sv-ease-spring)}
/* optional per-element delay: style="--sv-d:.12s" */
.sv-reveal.in{transition-delay:var(--sv-d,0s)}

/* staggered parents: children rise one by one (data-sv-stagger on parent) */
[data-sv-stagger] > *{opacity:0;transform:translateY(14px)}
[data-sv-stagger] > .in{opacity:1;transform:none;transition:opacity .5s var(--sv-ease-spring),transform .6s var(--sv-ease-spring)}

/* unblur on scroll — price reveals and the like */
.sv-unblur{filter:blur(14px);opacity:.35;transform:scale(.985)}
.sv-unblur.in{filter:blur(0);opacity:1;transform:none;
  transition:filter .8s var(--sv-ease-out),opacity .7s var(--sv-ease-out),transform .8s var(--sv-ease-spring)}

/* self-typing text: keeps layout height while empty */
[data-sv-type]{min-height:1.3em}
.sv-pretype{opacity:1}

/* words that rise one by one (the ad engine's headline move) */
[data-sv-words] .sv-w{display:inline-block;opacity:0;transform:translateY(.35em) rotate(1.2deg);will-change:transform}
[data-sv-words] .sv-w.in{opacity:1;transform:none;transition:opacity .5s var(--sv-ease-spring),transform .6s var(--sv-ease-spring)}
@media (prefers-reduced-motion: reduce){
  [data-sv-words] .sv-w{opacity:1;transform:none}
}

/* ============================================================ 3 · DECKS */
/* tap-anywhere card decks: the slider replacement.
   EVERY visual rule is scoped to a `.sv-deck` ANCESTOR on purpose. The
   `.sv-deck--m` variant carries the same card class but must only be a
   deck on the phone: an unscoped `.sv-deck__card{opacity:0}` was hiding
   desktop layouts wholesale (the how-it-works rail, the software page's
   panel grids) because those cards live under `--m`, not `.sv-deck`. */
.sv-deck{position:relative;cursor:pointer}
.sv-deck .sv-deck__card{
  opacity:0;transform:translateX(26px) scale(.99);pointer-events:none;
  transition:opacity .34s var(--sv-ease-out),transform .42s var(--sv-ease-spring);
}
.sv-deck .sv-deck__card.on{opacity:1;transform:none;pointer-events:auto;position:relative}
.sv-deck .sv-deck__card:not(.on){position:absolute;inset:0}
.sv-deck .sv-deck__card.was{opacity:0;transform:translateX(-18px) scale(.99)}
.sv-deck__hint{
  position:absolute;right:14px;bottom:12px;z-index:5;pointer-events:none;
  display:inline-flex;align-items:center;gap:7px;
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--sv-hint-ink,#5A6474);opacity:.92;transition:opacity .4s;
}
.sv-deck__hint::before{
  content:"";width:8px;height:8px;border-radius:50%;
  background:var(--sv-hint-dot,#1D4ED8);
  box-shadow:0 0 0 0 rgba(29,78,216,.45);
  animation:svHintPulse 2s var(--sv-ease-out) infinite;
}
.sv-deck__hint.off{opacity:0}
@keyframes svHintPulse{
  0%{box-shadow:0 0 0 0 rgba(29,78,216,.45)}
  70%{box-shadow:0 0 0 9px rgba(29,78,216,0)}
  100%{box-shadow:0 0 0 0 rgba(29,78,216,0)}
}
.sv-deck__dots{display:flex;gap:5px;justify-content:center;margin-top:12px}
.sv-deck__dots i{width:6px;height:6px;border-radius:50%;background:var(--sv-dot,#D0D5DD);transition:.3s}
.sv-deck__dots i.on{background:var(--sv-dot-on,#1D4ED8);transform:scale(1.25)}

/* .sv-deck--m: a deck on the phone, an ordinary laid-out set on desktop.
   Used where a desktop breakpoint already lays all the cards out at once
   and only the phone needs the one-at-a-time tap-through. */
@media(max-width:760px){
  .sv-deck--m{position:relative;cursor:pointer}
  .sv-deck--m .sv-deck__card{
    opacity:0;transform:translateX(26px) scale(.99);pointer-events:none;
    transition:opacity .34s var(--sv-ease-out),transform .42s var(--sv-ease-spring);
  }
  .sv-deck--m .sv-deck__card.on{opacity:1;transform:none;pointer-events:auto;position:relative}
  .sv-deck--m .sv-deck__card:not(.on){position:absolute;inset:0}
  .sv-deck--m .sv-deck__card.was{opacity:0;transform:translateX(-18px) scale(.99)}
}
@media(min-width:761px){
  .sv-deck--m .sv-deck__hint,.sv-deck--m .sv-deck__dots{display:none}
}

/* ====================================================== reduced motion */
@media (prefers-reduced-motion: reduce){
  .sv-reveal,.sv-unblur,[data-sv-stagger] > *{opacity:1;transform:none;filter:none}
  .svw .rise,.svw .pop{opacity:1;transform:none}
  .sv-deck__hint::before{animation:none}
}