/* DigiDonate v3 — section motion engine ("sx"). Pairs with assets/sx.js, which is linked at the end of
   <body> (defer) on every page after dd-pages.js. This file is linked in <head> after the page's other
   stylesheets; page files (sx-<page>.css) and the kit (sx-kit.css) load after it.

   PUBLIC HOOKS (page and kit CSS style off these; never re-implement observers):
     .sx-in        one-shot: added once to every reveal target when it enters the viewport
                   (built-in selectors + any [data-sx]); added at once under reduced motion,
                   without IntersectionObserver, or by the 2.5 s failsafe.
     .sx-run       loop gate: toggled on every .sx-loop and .dp-hero-visual while it is within
                   200px of the viewport. Infinite animations inside a .sx-loop (incl. ::before /
                   ::after) are paused whenever .sx-run is absent, so loop CSS is written normally.
     --sx-i        static index 0,1,2… on the children of grids/lists ([data-sx-stagger], [data-sx],
                   .dp-grid, .dp-team, .dp-checks, .dp-xlist, .dp-faq, .dp-stack, .dp-trust, …).
                   Use: transition-delay: calc(var(--sx-i) * 90ms).
     --sx-b        batch index set on a target when it is revealed (0 for the first target of its
                   parent revealed in that frame, 1 for the next…), for row-aware stagger.
     --sx-p        0→1 on [data-sx-scrub] while it travels into reading position
                   (0 when its top is at 92% of the viewport, 1 when its centre is at 42%).
                   Default 1 (final state) when the engine is off.
     --mx / --my   pointer position in px inside .dp-card (fine pointers only).
     html.sx-on    the engine is running (motion allowed). html.sx-reduce: reduced motion.
   [data-sx] presets: "up" "fade" "scale" "left" "right" "stagger" (children) "words" (masked word
   rise) "draw" (every svg shape draws on). Any other value: only the .sx-in class is managed.
   data-sx-delay="120" adds 120ms. data-sx-scrub="words" fades a heading's words in with --sx-p.

   Effects owned here: E1 section heads · E2 hero entrance + centred-hero orbits · E3 cards ·
   E4 buttons/links · E5 lists · E6 plans table · E7 FAQ · E8 dark sections · E9 statement scrub ·
   E10 marquee · E11 team · E12 step numbers · E13 header · E14 forms · E15 footer · E16 page changes ·
   E17 parallax.
   Only transform, opacity, stroke-dashoffset, clip-path (one-shot) and custom properties are
   animated (plus a one-shot background-position sweep on the step numerals). All motion lives in
   (prefers-reduced-motion: no-preference); the base rules below are the still, complete state. */

:root {
  --sx-ease: cubic-bezier(.2, .8, .2, 1);
  --sx-loop: cubic-bezier(.65, 0, .35, 1);
  --sx-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- 0. loop gate (contract) ---------- */
html.sx-on .sx-loop:not(.sx-run), html.sx-on .sx-loop:not(.sx-run)::before, html.sx-on .sx-loop:not(.sx-run)::after,
html.sx-on .sx-loop:not(.sx-run) *, html.sx-on .sx-loop:not(.sx-run) *::before, html.sx-on .sx-loop:not(.sx-run) *::after,
html.sx-on .dp-hero-visual:not(.sx-run) *, html.sx-on .dp-hero-visual:not(.sx-run) *::before,
html.sx-on .dp-hero-visual:not(.sx-run) *::after {
  animation-play-state: paused !important;
}

/* ---------- 0b. start (contract) ----------
   Each page's head adds .sx-pre when motion is allowed, so the hero copy and visual stay hidden until
   the engine has set their start states; they are never drawn in place first and then dropped back to
   the start of their entrance. If the engine never runs they show after 2.5 s anyway. While sx.js
   applies the start states it adds .sx-init for one style pass, so they apply without a transition. */
html.sx-pre:not(.sx-on):not(.sx-off) .dp-hero-copy,
html.sx-pre:not(.sx-on):not(.sx-off) .dp-hero-visual { opacity: 0; animation: sx-pre-show .01s linear 2.5s forwards; }
@keyframes sx-pre-show { to { opacity: 1; } }
html.sx-init *, html.sx-init *::before, html.sx-init *::after { transition: none !important; }

/* ---------- 1. structure the effects need (no layout change) ---------- */
.dp-badge, .dp-card, .dp-btn, .dp-step-n, .dp-person, .dp-faq details, .dp-plans-wrap { position: relative; }
.dp-card, .dp-btn, .dp-faq details, .dp-plans-wrap { isolation: isolate; }
html.sx-on .dp-section, html.sx-on .dp-footer { overflow-x: clip; }
.sx-w { display: inline-block; }

/* decorative layers injected by sx.js (all aria-hidden, textless) */
.sx-dark, .sx-orbits, .sx-band, .sx-sheen { pointer-events: none; }

/* E4 sheen holder inside primary buttons: above the fill, under the label */
.sx-sheen { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; }
.sx-sheen::before { content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 46%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.32) 50%, rgba(255,255,255,0));
  transform: translateX(-130%) skewX(-18deg); }
.dp-btn.is-white .sx-sheen::before { background: linear-gradient(90deg, rgba(174,138,234,0), rgba(174,138,234,.34) 50%, rgba(174,138,234,0)); }

/* E1 badge halo ring (fires once on reveal) */
.dp-badge::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  border: 1.5px solid rgba(108,43,217,.42); opacity: 0; }
.is-dark .dp-badge::after { border-color: rgba(174,138,234,.6); }

/* E6 featured column band (positioned by sx.js over the th.is-featured column, else the last; multiply = sits "behind" the text) */
.dp-plans-wrap { isolation: isolate; }
.sx-band { position: absolute; z-index: 1; border-radius: 16px; overflow: hidden; mix-blend-mode: multiply;
  background: linear-gradient(180deg, #E6D9FB 0%, #EFE7FD 22%, #F4EFFD 100%);
  box-shadow: inset 0 0 0 1px rgba(108,43,217,.16); transform-origin: 50% 0; }
.sx-band i { position: absolute; left: 0; right: 0; top: 0; height: 30%; transform: translateY(-110%);
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.9) 50%, rgba(255,255,255,0)); }
.sx-yes { display: inline-block; position: relative; isolation: isolate; }
.sx-yes::before { content: ""; position: absolute; left: 50%; top: 50%; width: 70px; height: 42px; margin: -21px 0 0 -35px;
  z-index: -1; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(108,43,217,.3), rgba(108,43,217,0)); }

/* E7 FAQ: open state icon (still in every mode) */
.dp-faq details[open] summary::after { background-color: #6C2BD9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.dp-faq details.sx-closing summary::after { background-color: #F5F0FC;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C2BD9' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }

/* E9 statement: generous presence (CSS only, on the existing h2) */
.dp-section > .dp-wrap:has(> .dp-head:only-child) > .dp-head > .dp-h2 {
  font-size: clamp(40px, 5.9vw, 84px); max-width: 1100px; line-height: 1.02; letter-spacing: -0.038em; }

/* E10 marquee: wider soft edges, room for lifted chips (net layout unchanged) */
.dp-marquee { padding: 18px 0; margin-top: 30px; margin-bottom: -18px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); }
.dp-chip { position: relative; overflow: hidden; }

/* E14 focus rings */
.dp-input:focus:not([aria-invalid="true"]), .dd-input:focus:not([aria-invalid="true"]), .dd-area:focus {
  border-color: #6C2BD9; box-shadow: 0 0 0 4px rgba(108,43,217,.12), 0 8px 22px -14px rgba(108,43,217,.6); }

/* E13 header: only if a page makes it sticky/fixed */
.dp-header.sx-scrolled { box-shadow: 0 14px 34px -22px rgba(0,0,0,.9); -webkit-backdrop-filter: saturate(1.2) blur(10px);
  backdrop-filter: saturate(1.2) blur(10px); }

/* ---------- 2. E8 dark section layer ---------- */
.sx-dark { position: absolute; inset: 0; overflow: hidden; }
.sx-dgrid { position: absolute; inset: 0;
  background-image: radial-gradient(circle at 16px 16px, rgba(255,255,255,.085) 1.1px, rgba(255,255,255,0) 1.8px);
  background-size: 32px 32px; background-position: 50% 0;
  -webkit-mask-image: radial-gradient(ellipse 70% 78% at 50% 50%, #000 25%, transparent 100%);
          mask-image: radial-gradient(ellipse 70% 78% at 50% 50%, #000 25%, transparent 100%); }
.sx-cell { position: absolute; width: 32px; height: 32px; border-radius: 4px; opacity: 0;
  background: radial-gradient(circle, rgba(246,241,254,.95) 0, rgba(246,241,254,.95) 1.3px, rgba(174,138,234,.75) 2.2px,
              rgba(108,43,217,.3) 6px, rgba(108,43,217,.1) 11px, rgba(108,43,217,0) 16px), rgba(108,43,217,.07);
  box-shadow: inset 0 0 0 1px rgba(174,138,234,.08); }
.sx-conic { position: absolute; left: 50%; top: 50%; width: 1500px; height: 1500px; margin: -750px 0 0 -750px; border-radius: 50%;
  background: conic-gradient(from 90deg, rgba(108,43,217,0) 0deg, rgba(108,43,217,.24) 40deg, rgba(174,138,234,.1) 66deg,
              rgba(108,43,217,0) 112deg, rgba(108,43,217,0) 196deg, rgba(108,43,217,.17) 246deg, rgba(108,43,217,0) 300deg);
  -webkit-mask-image: radial-gradient(closest-side, transparent 5%, #000 26%, rgba(0,0,0,.55) 56%, transparent 80%);
          mask-image: radial-gradient(closest-side, transparent 5%, #000 26%, rgba(0,0,0,.55) 56%, transparent 80%);
  opacity: .85; }
.sx-mote { position: absolute; top: 100%; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; opacity: 0;
  background: #F1EAFD; box-shadow: 0 0 6px 1px rgba(174,138,234,.8), 0 0 16px 3px rgba(108,43,217,.42); }
.sx-mote.is-s { width: 2px; height: 2px; margin-left: -1px; }

/* ---------- 3. E2 centred-hero orbits ---------- */
.sx-orbits { position: absolute; left: 50%; top: 50%; width: 1120px; height: 1120px; margin: -560px 0 0 -560px;
  -webkit-mask-image: radial-gradient(closest-side, rgba(0,0,0,.26) 0, rgba(0,0,0,.3) 38%, #000 62%, #000 100%);
          mask-image: radial-gradient(closest-side, rgba(0,0,0,.26) 0, rgba(0,0,0,.3) 38%, #000 62%, #000 100%); }
.sx-ob-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sx-ob-glow { position: absolute; left: 50%; top: 50%; width: 600px; height: 600px; margin: -300px 0 0 -300px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(108,43,217,.3), rgba(108,43,217,0)); }
.sx-ob-glow.is-b { width: 380px; height: 380px; margin: -190px 0 0 -190px;
  background: radial-gradient(closest-side, rgba(174,138,234,.16), rgba(174,138,234,0)); }
.sx-ob-ring { transform-origin: 500px 500px; }
.sx-ob-c { fill: none; stroke: rgba(174,138,234,.55); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 0 10; }
.sx-ob-ring.is-2 .sx-ob-c, .sx-ob-ring.is-4 .sx-ob-c { stroke: rgba(174,138,234,.2); stroke-width: 1.2; stroke-dasharray: none; }
.sx-ob-ring.is-5 .sx-ob-c { stroke: rgba(174,138,234,.38); stroke-dasharray: 0 15; }
.sx-ob-core { fill: #EFE6FD; }

/* ---------- 4. links ---------- */
.dp-link { position: relative; }

/* ======================================================================
   MOTION (only when the visitor has not asked for reduced motion)
   ====================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* pre-JS cover for what is on screen at load; a CSS failsafe reveals it if sx.js never runs */
  html.dd-js:not(.sx-on):not(.sx-off) .dp-hero .dp-hero-copy,
  html.dd-js:not(.sx-on):not(.sx-off) .dp-hero .dp-hero-visual,
  html.dd-js:not(.sx-on):not(.sx-off) .dd-card {
    opacity: 0; animation: sx-failsafe .8s ease 2.6s forwards; }

  /* targets revealed after the visitor has already scrolled past them: no transition, just their final state */
  html.sx-on .sx-now, html.sx-on .sx-now * { transition: none !important; }

  /* ---------- generic rise (dp-rise, actions, notes, loose draft rows, h3, marquee) ---------- */
  html.sx-on .sx-r.sx-rise, html.sx-on .sx-r.sx-marquee {
    --sx-dl: calc(var(--sx-b, 0) * 90ms + var(--sx-delay, 0ms) + 60ms);
    transition: opacity .8s ease var(--sx-dl), transform 1s var(--sx-ease) var(--sx-dl); }
  html.sx-on .sx-r.sx-rise:not(.sx-in) { opacity: 0; transform: translate3d(0, 22px, 0); }
  html.sx-on .sx-r.sx-marquee:not(.sx-in) { opacity: 0; transform: translate3d(48px, 0, 0); }

  /* ---------- E1 section heads ---------- */
  html.sx-on .sx-head .dp-badge { transition: opacity .45s ease .05s, transform .95s var(--sx-spring) .05s; }
  html.sx-on .sx-head:not(.sx-in) .dp-badge { opacity: 0; transform: scale(.5) rotate(-12deg); }
  html.sx-on .sx-ds { stroke-dasharray: 1 2; }
  html.sx-on .sx-head .dp-badge .sx-ds { transition: stroke-dashoffset 1.1s var(--sx-ease) calc(.28s + var(--sx-k, 0) * 110ms); }
  html.sx-on .sx-head:not(.sx-in) .dp-badge .sx-ds { stroke-dashoffset: 1.05; }
  html.sx-on .sx-head.sx-in .dp-badge::after { animation: sx-halo 1.6s cubic-bezier(.2,.7,.3,1) .4s both; }

  html.sx-on .sx-head .dp-eyebrow { clip-path: inset(-30% -8% -30% -8%);
    transition: opacity .7s ease .16s, transform 1s var(--sx-ease) .16s, clip-path 1s var(--sx-ease) .16s; }
  html.sx-on .sx-head:not(.sx-in) .dp-eyebrow { opacity: 0; transform: translate3d(-8px, 0, 0); clip-path: inset(0 100% 0 0); }
  html.sx-on .sx-head.is-center:not(.sx-in) .dp-eyebrow,
  html.sx-on .dp-cta .sx-head:not(.sx-in) .dp-eyebrow { transform: none; clip-path: inset(0 50% 0 50%); }

  html.sx-on .sx-mask .sx-w { clip-path: inset(-.32em -.14em -.26em -.14em); }
  html.sx-on .sx-mask .sx-wi { display: inline-block; transform-origin: 0 100%; }
  html.sx-on .sx-head .sx-mask .sx-wi {
    transition: transform 1.05s var(--sx-ease) calc(.2s + var(--sx-wi, 0) * 52ms),
                opacity .7s ease calc(.2s + var(--sx-wi, 0) * 52ms); }
  html.sx-on .sx-head:not(.sx-in) .sx-mask .sx-wi { opacity: 0; transform: translate3d(0, 130%, 0) rotate(5deg); }
  html.sx-on .sx-head.sx-in .sx-hblock { transition: opacity .8s ease .18s, transform 1s var(--sx-ease) .18s; }
  html.sx-on .sx-head:not(.sx-in) .sx-hblock { opacity: 0; transform: translate3d(0, 22px, 0); }

  html.sx-on .sx-head .dp-lead { transition: opacity .9s ease var(--sx-ld), transform 1.1s var(--sx-ease) var(--sx-ld);
    --sx-ld: calc(.42s + var(--sx-wn, 0) * 52ms); }
  html.sx-on .sx-head:not(.sx-in) .dp-lead { opacity: 0; transform: translate3d(0, 16px, 0); }
  html.sx-on .sx-head .dp-draft { transition: opacity .6s ease var(--sx-tl), transform .8s var(--sx-spring) var(--sx-tl);
    --sx-tl: calc(.7s + var(--sx-wn, 0) * 52ms); }
  html.sx-on .sx-head:not(.sx-in) .dp-draft { opacity: 0; transform: translate3d(0, 6px, 0) scale(.86); }

  /* ---------- E9 statement scrub (and data-sx-scrub="words") ---------- */
  html.sx-on .sx-scrubw .sx-wi {
    opacity: clamp(.14, calc((var(--sx-p, 1) * (var(--sx-wn, 1) + 2.5) - var(--sx-wi, 0)) / 2.5), 1);
    transition: opacity .3s linear; }

  /* ---------- E2 hero entrance ---------- */
  html.sx-on .sx-hero .sx-hi {
    transition: opacity .8s ease var(--sx-d, 0ms), transform 1s var(--sx-ease) var(--sx-d, 0ms),
                translate .45s var(--sx-ease), scale .15s ease, background-color .2s ease, border-color .2s ease, color .2s ease; }
  html.sx-on .sx-hero:not(.sx-in) .sx-hi { opacity: 0; transform: translate3d(0, 18px, 0); }
  html.sx-on .sx-hero:not(.sx-in) .dp-pill.sx-hi { transform: translate3d(0, 10px, 0) scale(.94); }
  html.sx-on .sx-hero:not(.sx-in) .dp-actions > .sx-hi { transform: translate3d(0, 16px, 0) scale(.96); }
  html.sx-on .sx-hero:not(.sx-in) .dp-trust > .sx-hi { transform: translate3d(-12px, 0, 0); }
  html.sx-on .sx-hero .dp-trust > li::before { transition: transform .7s var(--sx-spring) calc(var(--sx-d, 0ms) + 160ms); }
  html.sx-on .sx-hero:not(.sx-in) .dp-trust > li::before { transform: scale(0) rotate(-60deg); }
  html.sx-on .sx-hero .dp-pill .sx-ds { transition: stroke-dashoffset 1.2s var(--sx-ease) calc(.25s + var(--sx-k, 0) * 120ms); }
  html.sx-on .sx-hero:not(.sx-in) .dp-pill .sx-ds { stroke-dashoffset: 1.05; }
  html.sx-on .sx-hero .sx-h1 .sx-wi {
    transition: transform 1.1s var(--sx-ease) calc(var(--sx-w0, 80ms) + var(--sx-wi, 0) * 60ms),
                opacity .7s ease calc(var(--sx-w0, 80ms) + var(--sx-wi, 0) * 60ms); }
  html.sx-on .sx-hero:not(.sx-in) .sx-h1 .sx-wi { opacity: 0; transform: translate3d(0, 130%, 0) rotate(5deg); }
  html.sx-on .sx-hero .sx-hv { transition: opacity 1.2s ease .3s, transform 1.4s var(--sx-ease) .3s; }
  html.sx-on .sx-hero:not(.sx-in) .sx-hv { opacity: 0; transform: translate3d(0, 26px, 0) scale(.97); }
  html.sx-on .sx-hero .sx-orbits { transition: opacity 2.2s ease .15s, transform 2.6s var(--sx-ease) .15s; }
  html.sx-on .sx-hero:not(.sx-in) .sx-orbits { opacity: 0; transform: scale(.88); }

  .sx-ob-ring.is-1 { animation: sx-spin 90s linear infinite; }
  .sx-ob-ring.is-2 { animation: sx-spin 38s linear infinite reverse; }
  .sx-ob-ring.is-3 { animation: sx-spin 130s linear infinite; }
  .sx-ob-ring.is-4 { animation: sx-spin 58s linear infinite; }
  .sx-ob-ring.is-5 { animation: sx-spin 170s linear infinite reverse; }
  .sx-ob-glow { animation: sx-drift 17s var(--sx-loop) infinite alternate; }
  .sx-ob-glow.is-b { animation: sx-drift-b 12s var(--sx-loop) infinite alternate; }

  /* ---------- E3 cards (+ FAQ items, plans card, tiers, form cards) ---------- */
  html.sx-on .sx-r.sx-card, html.sx-on .sx-r.sx-plans {
    --sx-dl: calc(var(--sx-b, 0) * 90ms + var(--sx-delay, 0ms));
    transform-origin: 50% 0;
    transition: opacity .8s ease var(--sx-dl), transform 1.15s var(--sx-ease) var(--sx-dl),
                box-shadow .45s ease, border-color .3s ease, background-color .3s ease; }
  html.sx-on .sx-r.sx-card:not(.sx-in), html.sx-on .sx-r.sx-plans:not(.sx-in) {
    opacity: 0; transform: perspective(1200px) translate3d(0, 42px, 0) rotateX(9deg) scale(.97); }
  html.sx-on .sx-r.sx-card.sx-done, html.sx-on .sx-r.sx-plans.sx-done {
    transition: opacity .3s ease, transform .7s var(--sx-ease), box-shadow .45s ease, border-color .3s ease, background-color .3s ease; }

  /* items that cascade inside a revealed card / the footer */
  html.sx-on .sx-r .sx-fi { --sx-fd: calc(var(--sx-fb, 260ms) + var(--sx-b, 0) * 90ms + var(--sx-i, 0) * 70ms);
    transition: opacity .7s ease var(--sx-fd), transform .9s var(--sx-ease) var(--sx-fd); }
  html.sx-on .sx-r:not(.sx-in) .sx-fi { opacity: 0; transform: translate3d(0, 14px, 0); }
  html.sx-on .sx-footer { --sx-fb: 0ms; }
  html.sx-on .sx-r .dd-card .sx-fi, html.sx-on .dd-card.sx-r { --sx-fb: 200ms; }

  /* ---------- E11 team ---------- */
  html.sx-on .sx-r.sx-person { --sx-dl: calc(var(--sx-b, 0) * 85ms);
    transition: opacity .7s ease var(--sx-dl), transform 1s var(--sx-ease) var(--sx-dl); }
  html.sx-on .sx-r.sx-person:not(.sx-in) { opacity: 0; transform: translate3d(0, 26px, 0) scale(.92); }
  html.sx-on .sx-person .dp-avatar { transition: transform 1s var(--sx-spring) calc(var(--sx-dl, 0ms) + 90ms), box-shadow .4s ease; }
  html.sx-on .sx-person:not(.sx-in) .dp-avatar { transform: scale(.62); }
  .dp-photo { transition: transform .7s var(--sx-ease); }

  /* ---------- E5 lists ---------- */
  html.sx-on .sx-list > li { --sx-ld: calc(var(--sx-lb, 0ms) + var(--sx-i, 0) * 110ms + 60ms);
    transition: opacity .6s ease var(--sx-ld), transform .85s var(--sx-ease) var(--sx-ld); }
  html.sx-on .sx-list:not(.sx-in) > li { opacity: 0; transform: translate3d(-14px, 0, 0); }
  html.sx-on .sx-list > li::before { clip-path: inset(-25% -25% -25% -25%);
    transition: clip-path .75s var(--sx-ease) calc(var(--sx-ld) + 140ms), transform .8s var(--sx-spring) calc(var(--sx-ld) + 140ms); }
  html.sx-on .sx-list:not(.sx-in).dp-checks > li::before { clip-path: inset(0 100% 0 0); transform: scale(.55); }
  html.sx-on .sx-list:not(.sx-in).dp-xlist > li::before { clip-path: inset(0 100% 100% 0); transform: scale(.6) rotate(-90deg); }
  html.sx-on .sx-card .sx-list { --sx-lb: calc(var(--sx-b, 0) * 90ms + 300ms); }

  /* ---------- E6 plans table ---------- */
  html.sx-on .sx-plans .dp-plans tr { --sx-rd: calc(240ms + var(--sx-i, 0) * 62ms);
    transition: opacity .6s ease var(--sx-rd), transform .85s var(--sx-ease) var(--sx-rd); }
  html.sx-on .sx-plans:not(.sx-in) .dp-plans tr { opacity: 0; transform: translate3d(0, 14px, 0); }
  html.sx-on .sx-plans .sx-yes { --sx-yd: calc(var(--sx-rd, 0ms) + 150ms + (var(--sx-c, 1) - 1) * 110ms);
    transition: opacity .35s ease var(--sx-yd), transform .75s var(--sx-spring) var(--sx-yd); }
  html.sx-on .sx-plans:not(.sx-in) .sx-yes { opacity: 0; transform: scale(.35); }
  html.sx-on .sx-plans.sx-in .sx-yes::before { animation: sx-glow 1.7s ease-out var(--sx-yd) both; }
  html.sx-on .sx-plans .dp-plans td.is-no { transition: opacity 1.1s ease calc(var(--sx-rd, 0ms) + 260ms); }
  html.sx-on .sx-plans:not(.sx-in) .dp-plans td.is-no { opacity: 0; }
  html.sx-on .sx-plans .sx-band { transition: transform 1.3s var(--sx-ease) .3s, opacity .7s ease .3s; }
  html.sx-on .sx-plans:not(.sx-in) .sx-band { opacity: 0; transform: scaleY(0); }
  html.sx-on .sx-plans.sx-in .sx-band i { animation: sx-band-sheen 7.5s var(--sx-loop) 2.2s infinite; }

  /* ---------- E12 step numbers ---------- */
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    html.sx-on .sx-card .dp-step-n {
      background: linear-gradient(100deg, #C9B2F2 0%, #DFD0F7 28%, #DFD0F7 40%, #8E5BE6 47%, #6C2BD9 50%, #AE8AEA 54%, #DFD0F7 61%, #DFD0F7 100%)
                  100% 0 / 300% 100% no-repeat;
      -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
    html.sx-on .sx-card.sx-in .dp-step-n { animation: sx-num 1.6s var(--sx-ease) calc(var(--sx-b, 0) * 90ms + .45s) both; }
  }
  html.sx-on .dp-step-n::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1.5em; height: 1.5em;
    margin: -.75em 0 0 -.75em; border-radius: 50%; border: 1.5px solid rgba(108,43,217,.42); opacity: 0; pointer-events: none; }
  html.sx-on .sx-card.sx-in .dp-step-n::after { animation: sx-ring 1.5s cubic-bezier(.2,.7,.3,1) calc(var(--sx-b, 0) * 90ms + .6s) both; }

  /* ---------- E7 FAQ ---------- */
  .dp-faq summary::after { transition: transform .6s var(--sx-ease), background-color .3s ease, scale .3s var(--sx-spring); }
  .dp-faq details[open] summary::after { transform: rotate(225deg); }
  .dp-faq details.sx-closing summary::after { transform: none; }
  .dp-faq summary { transition: color .2s ease; }

  /* ---------- E4 buttons ---------- */
  html.sx-on .dp-btn { translate: var(--sx-tx, 0px) var(--sx-ty, 0px);
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease,
                translate .45s var(--sx-ease), scale .15s ease, box-shadow .3s ease; }
  html.sx-on .dp-btn:active { scale: .97; }
  html.sx-on .dp-btn > svg:last-child { transition: transform .45s var(--sx-spring); }
  html.sx-on .sx-sheen::before { animation: sx-sheen 7.5s var(--sx-loop) var(--sx-sd, 2s) infinite; }
  html.sx-on .is-dark .dp-btn:not(.is-ghost):not(.is-ghost-dark):not(.is-white)::before {
    content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit; pointer-events: none;
    box-shadow: 0 0 0 1px rgba(174,138,234,.28), 0 0 38px 6px rgba(108,43,217,.62);
    opacity: .3; animation: sx-breath 3.6s var(--sx-loop) infinite alternate; }

  /* ---------- E8 dark layer motion ---------- */
  html.sx-on .sx-cell { animation: sx-breathe var(--sx-t, 4.6s) var(--sx-loop) var(--sx-d, 0s) infinite; }
  html.sx-on .sx-conic { animation: sx-turn 60s linear infinite; }
  html.sx-on .sx-mote { animation: sx-mote var(--sx-t, 12s) linear var(--sx-d, 0s) infinite; }

  /* ---------- E14 forms ---------- */
  .dp-input, .dd-input, .dd-area { transition: border-color .25s ease, box-shadow .5s var(--sx-ease); }
  html.sx-on .sx-enter > * { animation: sx-up .6s var(--sx-ease) calc(var(--sx-i, 0) * 70ms) both; }
  html.sx-on .sx-enter .sx-tickc { animation: sx-pop .8s var(--sx-spring) .05s both; }
  html.sx-on .sx-enter .sx-tickc::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
    border: 1.5px solid rgba(108,43,217,.4); animation: sx-ring 1.4s cubic-bezier(.2,.7,.3,1) .55s both; }
  html.sx-on .sx-tickc { position: relative; }
  html.sx-on .sx-tick { stroke-dasharray: 1 2; }
  html.sx-on .sx-enter .sx-tick { animation: sx-draw .8s var(--sx-ease) .35s both; }

  /* ---------- [data-sx] presets ---------- */
  html.sx-on [data-sx].sx-x { --sx-dl: calc(var(--sx-delay, 0ms) + var(--sx-b, 0) * 90ms); }
  html.sx-on :is([data-sx="up"], [data-sx="fade"], [data-sx="scale"], [data-sx="left"], [data-sx="right"]).sx-x {
    transition: opacity .8s ease var(--sx-dl), transform 1s var(--sx-ease) var(--sx-dl); }
  html.sx-on [data-sx="up"].sx-x:not(.sx-in) { opacity: 0; transform: translate3d(0, 28px, 0); }
  html.sx-on [data-sx="fade"].sx-x:not(.sx-in) { opacity: 0; }
  html.sx-on [data-sx="scale"].sx-x:not(.sx-in) { opacity: 0; transform: scale(.92); }
  html.sx-on [data-sx="left"].sx-x:not(.sx-in) { opacity: 0; transform: translate3d(-36px, 0, 0); }
  html.sx-on [data-sx="right"].sx-x:not(.sx-in) { opacity: 0; transform: translate3d(36px, 0, 0); }
  html.sx-on [data-sx="stagger"].sx-x > * {
    transition: opacity .7s ease calc(var(--sx-dl) + var(--sx-i, 0) * 90ms), transform .9s var(--sx-ease) calc(var(--sx-dl) + var(--sx-i, 0) * 90ms); }
  html.sx-on [data-sx="stagger"].sx-x:not(.sx-in) > * { opacity: 0; transform: translate3d(0, 20px, 0); }
  html.sx-on [data-sx="words"].sx-x .sx-wi {
    transition: transform 1.05s var(--sx-ease) calc(var(--sx-dl) + var(--sx-wi, 0) * 52ms), opacity .7s ease calc(var(--sx-dl) + var(--sx-wi, 0) * 52ms); }
  html.sx-on [data-sx="words"].sx-x:not(.sx-in) .sx-wi { opacity: 0; transform: translate3d(0, 130%, 0) rotate(5deg); }
  html.sx-on [data-sx="draw"].sx-x .sx-ds { transition: stroke-dashoffset 1.4s var(--sx-ease) calc(var(--sx-dl) + var(--sx-k, 0) * 120ms); }
  html.sx-on [data-sx="draw"].sx-x:not(.sx-in) .sx-ds { stroke-dashoffset: 1.05; }
}

/* ---------- pointer-only polish (fine pointers, motion allowed) ---------- */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* E3 spotlight + border glow (cards and FAQ items) */
  html.sx-on .dp-card::before, html.sx-on .dp-faq details::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
    background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 0%), rgba(174,138,234,.17), rgba(174,138,234,0) 62%);
    transition: opacity .5s ease; }
  html.sx-on .dp-card::after, html.sx-on .dp-faq details::after {
    content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; padding: 1px;
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(108,43,217,.62), rgba(108,43,217,0) 72%);
    -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 exclude, linear-gradient(#000 0 0);
    transition: opacity .5s ease; }
  html.sx-on .dp-card.is-dark::before { background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 0%), rgba(108,43,217,.26), rgba(108,43,217,0) 62%); }
  html.sx-on .dp-card.is-dark::after { background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(174,138,234,.75), rgba(174,138,234,0) 72%); }
  html.sx-on .dp-card.is-tint::before { background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.7), rgba(255,255,255,0) 62%); }
  html.sx-on .sx-hover::before, html.sx-on .sx-hover::after { opacity: 1; }

  /* E3 tilt (≤ 2.5deg, .dp-card only, never the form card) */
  html.sx-on .dp-card.sx-r.sx-done.sx-hover:not(.dp-formcard) {
    transform: perspective(1000px) rotateX(var(--sx-rx, 0deg)) rotateY(var(--sx-ry, 0deg)) translate3d(0, -3px, 0);
    transition: opacity .3s ease, transform .22s ease-out, box-shadow .45s ease, border-color .3s ease, background-color .3s ease; }
  html.sx-on .dp-card.sx-r.sx-done.sx-hover:not(.is-dark):not(.dp-formcard) {
    border-color: #DFD0F7; box-shadow: 0 1px 2px rgba(20,18,25,.04), 0 34px 64px -36px rgba(78,27,165,.38); }

  /* E4 buttons */
  html.sx-on .dp-btn:hover > svg:last-child { transform: translate3d(4px, 0, 0); }
  html.sx-on .dp-btn:hover .sx-sheen::before { animation: sx-sheen-hover 1s var(--sx-ease) both; }
  html.sx-on .dp-link { text-decoration-color: currentColor; transition: color .2s ease, text-decoration-color .3s ease; }
  html.sx-on .dp-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1.5px; border-radius: 2px;
    background: currentColor; transform: scaleX(0); transform-origin: 100% 50%; transition: transform .5s var(--sx-ease); pointer-events: none; }
  html.sx-on .dp-link:hover { text-decoration-color: rgba(255,255,255,0); }
  html.sx-on .dp-link:hover::after { transform: scaleX(1); transform-origin: 0 50%; }

  /* E7 FAQ hover */
  html.sx-on .dp-faq summary:hover { color: #6C2BD9; }
  html.sx-on .dp-faq summary:hover::after { scale: 1.1; }

  /* E10 marquee: hover slows (sx.js eases playbackRate) instead of stopping dead */
  html.sx-on .dp-marquee:hover .dp-marquee-track { animation-play-state: running; }
  html.sx-on .dp-chip { transition: transform .5s var(--sx-ease), box-shadow .5s ease, border-color .3s ease; }
  html.sx-on .dp-chip::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 42%; pointer-events: none;
    background: linear-gradient(90deg, rgba(174,138,234,0), rgba(174,138,234,.3) 50%, rgba(174,138,234,0));
    transform: translateX(-140%) skewX(-18deg); }
  html.sx-on .dp-chip:hover { transform: translate3d(0, -4px, 0); border-color: #DFD0F7;
    box-shadow: 0 16px 30px -18px rgba(78,27,165,.5); }
  html.sx-on .dp-chip:hover::after { transform: translateX(340%) skewX(-18deg); transition: transform 1s var(--sx-ease); }
  html.sx-on .dp-chip i { transition: transform .5s var(--sx-spring), background-color .3s ease; }
  html.sx-on .dp-chip:hover i { transform: rotate(-8deg) scale(1.1); background-color: #EBE1FB; }

  /* E11 team hover: rotating conic ring + photo zoom */
  html.sx-on .dp-person::before { content: ""; position: absolute; left: 50%; top: -7px; width: 118px; height: 118px; margin-left: -59px;
    border-radius: 50%; pointer-events: none; opacity: 0; scale: .9;
    background: conic-gradient(from 0deg, #6C2BD9, #AE8AEA 22%, rgba(174,138,234,0) 52%, rgba(108,43,217,0) 70%, #6C2BD9);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
    transition: opacity .4s ease, scale .6s var(--sx-spring); }
  html.sx-on .dp-person:hover::before { opacity: 1; scale: 1; animation: sx-turn 2.6s linear infinite; }
  html.sx-on .dp-person:hover .dp-photo { transform: scale(1.08); }
  html.sx-on .dp-person:hover .dp-avatar { box-shadow: 0 16px 34px -16px rgba(78,27,165,.55); }

  /* E6 row hover */
  html.sx-on .dp-plans tbody tr { transition: background-color .25s ease; }
  html.sx-on .dp-plans tbody tr:hover { background-color: #FCFAFF; }
}

/* ---------- reduced motion: still, complete frames ---------- */
@media (prefers-reduced-motion: reduce) {
  .sx-mote, .sx-sheen { display: none; }
  .sx-cell:nth-of-type(3n) { opacity: .5; }
  .sx-conic { rotate: 18deg; }
}

/* ---------- phones: lighter decorative layers ---------- */
@media (max-width: 700px) {
  .sx-conic { width: 900px; height: 900px; margin: -450px 0 0 -450px; }
  .sx-orbits { width: 780px; height: 780px; margin: -390px 0 0 -390px; }
  .sx-ob-ring.is-1 { display: none; }
  .sx-ob-glow { width: 420px; height: 420px; margin: -210px 0 0 -210px; }
  .dp-person::before { display: none; }
}

@keyframes sx-failsafe { to { opacity: 1; } }
@keyframes sx-halo { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.75); } }
@keyframes sx-ring { 0% { opacity: .9; transform: scale(.45); } 100% { opacity: 0; transform: scale(1.4); } }
@keyframes sx-spin { to { transform: rotate(360deg); } }
@keyframes sx-turn { to { rotate: 360deg; } }
@keyframes sx-drift { from { transform: translate3d(-90px, -36px, 0); } to { transform: translate3d(84px, 42px, 0); } }
@keyframes sx-drift-b { from { transform: translate3d(120px, 30px, 0); } to { transform: translate3d(-110px, -40px, 0); } }
@keyframes sx-sheen { 0% { transform: translateX(-130%) skewX(-18deg); } 17%, 100% { transform: translateX(330%) skewX(-18deg); } }
@keyframes sx-sheen-hover { from { transform: translateX(-130%) skewX(-18deg); } to { transform: translateX(330%) skewX(-18deg); } }
@keyframes sx-breath { from { opacity: .3; } to { opacity: 1; } }
@keyframes sx-breathe { 0%, 100% { opacity: 0; } 42% { opacity: 1; } 80% { opacity: 0; } }
@keyframes sx-mote { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 12% { opacity: .9; } 72% { opacity: .55; }
  100% { transform: translate3d(var(--sx-x, 0px), calc(var(--sx-h, 600px) * -1), 0); opacity: 0; } }
@keyframes sx-glow { 0% { opacity: 0; transform: scale(.5); } 28% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes sx-band-sheen { 0% { transform: translateY(-110%); } 42%, 100% { transform: translateY(360%); } }
@keyframes sx-num { from { background-position: 100% 0; } to { background-position: 0% 0; } }
@keyframes sx-up { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
@keyframes sx-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes sx-draw { from { stroke-dashoffset: 1.05; } to { stroke-dashoffset: 0; } }

/* ---------- E16 page changes ----------
   Moving between v3 pages, the browser fades the old page out and the new one in instead of flashing
   white (cross-document view transitions: Chrome, Edge and Safari; other browsers just load the page).
   The header is its own layer, so it stays still while the content changes. Every page's head also has
   speculation rules that prerender a page when a link to it is hovered or pressed (Chrome and Edge),
   so the new page is usually ready before the click lands. */
@view-transition { navigation: auto; }
.dp-header { view-transition-name: dd-header; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: sx-vt-out .2s cubic-bezier(.4, 0, 1, 1) both; }
  ::view-transition-new(root) { animation: sx-vt-in .42s cubic-bezier(.2, .8, .2, 1) .06s both; }
  ::view-transition-group(dd-header) { animation-duration: 0s; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
@keyframes sx-vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes sx-vt-in { from { opacity: 0; transform: translateY(16px); } }

/* ---------- E17 parallax: the full-width photo bands (.dp-photoband) ----------
   The photo is 30% taller than its band and sx.js moves it with --sx-par (-0.5 as the band comes in
   at the bottom of the screen, 0.5 as it leaves at the top), so it drifts down inside the band while
   the band scrolls up: the photo moves slower than the page. Transform only; still under reduced
   motion and without the engine. */
@media (prefers-reduced-motion: no-preference) {
  html.sx-on .dp-photoband { position: relative; }
  html.sx-on .dp-photoband img { position: absolute; left: 0; top: -15%; height: 130%; will-change: transform;
    transform: translate3d(0, calc(var(--sx-par, 0) * 20%), 0); }
}