/* Dottpace landing — page motion. One easing family, from Dottpace-Identity 05-Motion (Motion Rulebook v1.1):
   ARRIVE (.16,1,.3,1) enters from hidden · MOVE (.65,0,.35,1) visible A to B and hover-out · LAND (.3,1.2,.5,1) the tap release ·
   LINEAR fades (450 ms). Hover and tap stay under 300 ms. Only transform and opacity move; nothing changes layout.
   Content is visible by default. The hidden pre-state (.m-pre) exists only under html.js-motion, which motion.js sets when motion is
   allowed and IntersectionObserver works, and only on blocks that start below the fold; a timeout and beforeprint clear it. */
:root{
  --m-arrive:cubic-bezier(.16,1,.3,1);
  --m-move:cubic-bezier(.65,0,.35,1);
  --m-land:cubic-bezier(.3,1.2,.5,1);
  --m-rise:10px;           /* a few px: blocks rise this far as they enter */
  --m-dur:600ms;           /* the rise, on ARRIVE */
  --m-fade:450ms;          /* the fade, LINEAR */
  --m-in:290ms;            /* hover-in, ARRIVE */
  --m-out:200ms;           /* hover-out, MOVE (~70% of hover-in) */
  --m-glow:color-mix(in srgb,var(--ring) 42%,var(--line-strong));
  --m-halo:color-mix(in srgb,var(--ring) 10%,transparent);
  --m-cast:color-mix(in srgb,var(--ring) 38%,transparent)
}
@media (max-width:640px){:root{--m-rise:8px}}

/* ---------- anchors: smooth, landing just under the sticky header (motion.js measures it into --m-head) ---------- */
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--m-head,64px) + 8px)}
section[id]{scroll-margin-top:0}
section.sec[id]{scroll-margin-top:calc(48px - var(--sec-y,48px))}   /* the heading, not the section's top padding, lands under the header */
#faq{scroll-margin-top:24px}

/* ---------- section reveal ---------- */
html.js-motion .m-pre{opacity:0;translate:0 var(--m-rise)}
html.js-motion .m-in{animation:m-fade var(--m-fade) linear var(--m-d,0ms) backwards,m-rise var(--m-dur) var(--m-arrive) var(--m-d,0ms) backwards}
@keyframes m-fade{from{opacity:0}}
@keyframes m-rise{from{translate:0 var(--m-rise)}}

/* ---------- count-up: the real number stays in the DOM (and for screen readers); a drawn copy counts over it, so nothing reflows ---------- */
.m-counting{position:relative;color:transparent!important}
.m-counting::after{content:attr(data-mv);content:attr(data-mv) / "";position:absolute;inset:0 0 auto 0;color:var(--m-c);white-space:nowrap;text-align:inherit;font-variant-numeric:tabular-nums;pointer-events:none}

/* ---------- hover: lift + a blue edge glow (cards, buttons). Hover-in ARRIVE, hover-out MOVE ---------- */
.btn,.pill{transition:background-color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out),scale var(--dur-1) var(--m-move),translate var(--m-out) var(--m-move),box-shadow var(--m-out) var(--m-move)}
.plan,.pc,.ig-tile,.card,[data-m-card]{transition:translate var(--m-out) var(--m-move),box-shadow var(--m-out) var(--m-move),background-color var(--dur-1) var(--ease-out)}
.btn:active,.pill:active{transition-duration:120ms;transition-timing-function:var(--m-move)}
@media (hover:hover) and (pointer:fine){
  .btn:hover,.pill:hover{translate:0 -1px;transition:background-color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out),scale 250ms var(--m-land),translate var(--m-in) var(--m-arrive),box-shadow var(--m-in) var(--m-arrive)}
  .btn-pri:hover,.pill:hover{box-shadow:0 0 0 3px var(--m-halo),0 8px 20px -10px var(--m-cast)}
  .btn-sec:hover{box-shadow:inset 0 0 0 1px var(--m-glow),0 0 0 3px var(--m-halo),0 8px 20px -12px var(--m-cast)}
  .btn:active,.pill:active{translate:0 0}
  :where([class*="field"]) .btn:hover{translate:0 0;box-shadow:none}   /* a button set inside an input stays put */
  .plan:hover,.pc:hover,.card:hover,[data-m-card]:hover{translate:0 -3px}
  a.ig-tile:hover{translate:0 -2px}
  .plan:hover,.pc:hover,.ig-tile:hover,.card:hover,[data-m-card]:hover{transition:translate var(--m-in) var(--m-arrive),box-shadow var(--m-in) var(--m-arrive),background-color var(--dur-1) var(--ease-out);
    box-shadow:inset 0 0 0 1px var(--m-glow),0 0 0 3px var(--m-halo),0 16px 36px -20px var(--m-cast)}
}
/* keyboard: the same edge glow on a card whose control has focus (no lift) */
.plan:has(:focus-visible),.pc:has(:focus-visible),.card:has(:focus-visible),[data-m-card]:has(:focus-visible){box-shadow:inset 0 0 0 1px var(--m-glow),0 0 0 3px var(--m-halo)}

/* ---------- reduced motion: no transforms at all; everything at rest ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js-motion .m-pre,html.js-motion .m-in{opacity:1;translate:none;animation:none}
  .btn:hover,.pill:hover,.plan:hover,.pc:hover,.card:hover,[data-m-card]:hover,.ig-tile:hover,.btn:active,.pill:active{translate:none}
  .m-counting{color:inherit!important}.m-counting::after{content:none}
}
@media print{html.js-motion .m-pre{opacity:1;translate:none}}