/* Onwyn marketing site — shared design system.
   Style: "Trust & Authority", minimalist cut — professional navy, a single blue
   CTA color, generous whitespace, few borders, Plus Jakarta Sans.
   Pages add page-scoped <style> but must reuse these tokens.

   Motion: the design language is ported from reactbits.dev ideas (split-text
   reveals, scroll reveals, ambient gradient + grain, sheen/spotlight/magnetic
   micro-interactions, count-ups, gradient borders) but implemented in plain
   CSS + a little vanilla JS. No React, no build step, nothing third-party.

   Accessibility contract for every effect in this file:
     1. Content is authored visible. The `.motion` class on <html> is added by
        an inline script ONLY when JS runs and the user has not asked for
        reduced motion. Reveal start-states are therefore scoped to `.motion`,
        so no-JS and reduced-motion visitors get the final state immediately.
     2. Only `transform`, `opacity`, `filter` and `background-position` animate.
        Nothing here can move layout, so nothing here can add CLS.
     3. Focus rings are never removed by a hover treatment. */

/* ---------- Self-hosted typeface ----------
   Plus Jakarta Sans, variable (wght 200–800), served from our own origin.
   No Google Fonts request is made: for an EU vendor selling data residency,
   fonts.gstatic.com is a live GDPR exposure (LG München I, 3 O 17493/20).
   Two subsets: `latin` covers German/English text; `latin-ext` is only
   fetched if a glyph outside latin is actually used. */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Color — unchanged brand: navy + one CTA blue */
  --navy-950: #020617;
  --navy-900: #0F172A;
  --navy-800: #1E293B;
  --navy-700: #334155;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-200: #E2E8F0;
  --slate-100: #F1F5F9;
  --bg: #F8FAFC;
  --surface: #FFFFFF;
  --cta: #0369A1;
  --cta-hover: #075985;
  --cta-soft: #E0F2FE;
  --cta-lift: #38BDF8;   /* light end of the gradient edge — decorative only */
  --ok: #15803D;
  --ok-soft: #DCFCE7;
  --border: #E2E8F0;
  --line-soft: #ECF1F6;  /* decorative hairline: card + section edges */
  /* Type */
  --font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-md: 18px;
  --fs-lg: 21px; --fs-xl: 26px; --fs-2xl: clamp(27px, 3vw, 34px); --fs-hero: clamp(33px, 4.4vw, 50px);
  /* Space & shape */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;
  --sp-24: 96px; --sp-28: 112px;
  --r-md: 10px; --r-lg: 14px; --r-full: 999px;
  --shadow-sm: 0 1px 2px rgba(2, 6, 23, 0.05);
  --shadow-md: 0 8px 26px rgba(2, 6, 23, 0.07);
  --shadow-lg: 0 20px 50px rgba(2, 6, 23, 0.12);
  --glow-cta: 0 0 0 1px rgba(3, 105, 161, 0.22), 0 10px 34px rgba(3, 105, 161, 0.14);
  /* Motion */
  --dur-1: 140ms;   /* micro: color, tiny lifts */
  --dur-2: 260ms;   /* hover states */
  --dur-3: 520ms;   /* scroll reveals */
  --dur-4: 820ms;   /* sheen sweep */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --stagger: 70ms;      /* section reveals */
  --stagger-word: 34ms; /* split-text, kept short so it cannot delay LCP */
  /* Ambient textures — cheap: two gradients and one inline SVG. No canvas,
     no WebGL, no third-party asset. */
  --grain: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="160" height="160" filter="url(%23n)"/></svg>');
  /* Z-scale */
  --z-nav: 50; --z-toast: 60;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--navy-700);
  font: 400 var(--fs-base)/1.68 var(--font);
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { color: var(--navy-900); margin: 0 0 var(--sp-4); font-weight: 700; letter-spacing: -0.02em; line-height: 1.18; }
h1 { font-size: var(--fs-hero); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
h2 { font-size: var(--fs-2xl); letter-spacing: -0.025em; }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
p { margin: 0 0 var(--sp-4); }
a { color: var(--cta); text-decoration: none; }
a:hover { text-decoration: underline; }
/* A11y: links inside body copy must not rely on color alone (WCAG 1.4.1). */
p a, .lead a, li a { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
svg { flex-shrink: 0; }
:focus-visible { outline: 2px solid var(--cta); outline-offset: 3px; border-radius: 4px; }
.section.dark :focus-visible, .site-footer :focus-visible { outline-color: #7DD3FC; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--sp-6); }
.section { padding: var(--sp-24) 0; }
.section.tight { padding: var(--sp-16) 0; }
.section.alt { background: var(--surface); }
.section.dark { background: var(--navy-900); color: var(--slate-200); }
.section.dark h2, .section.dark h3 { color: #fff; }
.section.dark .card { color: var(--slate-600); }
.section.dark .card h3, .section.dark .card h4 { color: var(--navy-900); }
.section-head { max-width: 660px; margin-bottom: var(--sp-12); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.eyebrow {
  display: inline-block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--cta); margin-bottom: var(--sp-3);
}
.section.dark .eyebrow { color: #7DD3FC; }
.lead { font-size: var(--fs-md); line-height: 1.7; color: var(--slate-600); }
.section.dark .lead { color: var(--slate-200); }
/* A11y: --cta (#0369A1) is only 3:1 on navy-900 — lighten links on dark.
   Light cards nested inside dark sections keep the normal CTA color. */
.section.dark a:not(.btn) { color: #7DD3FC; }
.section.dark .card a:not(.btn) { color: var(--cta); }

.grid { display: grid; gap: var(--sp-6); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .cols-4 { grid-template-columns: repeat(2, 1fr); } .cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .cols-4, .cols-3, .cols-2 { grid-template-columns: 1fr; } }

/* ---------- Ambient background wash (ported: "Aurora"/"Grain", CSS only) ----------
   Both layers sit at z-index:-1 inside the section's own stacking context, so
   they paint above the section background and below all content — no overlay
   of text, no pointer interception, no extra markup. */
.section.alt, .section.dark, .hero { position: relative; isolation: isolate; }

/* Faint dot grid on the white "alt" sections, faded out top and bottom. */
.section.alt::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(100, 116, 139, 0.16) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
/* Aurora wash + grain on dark sections. */
.section.dark::before, .hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(58% 62% at 12% 0%, rgba(56, 189, 248, 0.16), transparent 70%),
    radial-gradient(46% 58% at 92% 18%, rgba(3, 105, 161, 0.24), transparent 72%),
    radial-gradient(70% 50% at 50% 110%, rgba(14, 165, 233, 0.10), transparent 70%);
}
.section.dark::after, .hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grain); background-size: 160px 160px;
  opacity: 0.038; mix-blend-mode: overlay;
}

/* ---------- Nav ---------- */
.site-nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--line-soft);
}
.site-nav .inner { display: flex; align-items: center; gap: var(--sp-6); height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--navy-900); font-weight: 800; font-size: 18px; letter-spacing: -0.02em; }
.brand:hover { text-decoration: none; }
.logo-mark { width: 32px; height: 32px; display: block; flex: none; }
.nav-links { display: flex; gap: var(--sp-6); margin-left: auto; align-items: center; }
.nav-links a { color: var(--navy-700); font-weight: 600; font-size: var(--fs-sm); }
.nav-links a:hover { color: var(--navy-900); text-decoration: none; }
/* Ported micro-interaction: animated underline. Nav links are not body copy,
   so removing the underline here does not breach WCAG 1.4.1 — and it is
   restored, animated, on hover and focus. */
.nav-links a:not(.btn) { position: relative; }
.nav-links a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
}
.nav-links a:not(.btn):hover::after,
.nav-links a:not(.btn):focus-visible::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { color: var(--navy-900); }
.nav-links a[aria-current="page"]::after { transform: scaleX(1); background: var(--cta); }
@media (max-width: 800px) { .nav-links a:not(.btn) { display: none; } }
@media (max-width: 560px) {
  .site-nav .inner { gap: var(--sp-3); }
  .nav-links { gap: var(--sp-2); }
  .nav-links .btn:not(.primary) { display: none; }
  .nav-links .btn { padding: 10px 14px; min-height: 40px; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; min-height: 46px; border-radius: var(--r-md); cursor: pointer;
  font: 700 var(--fs-sm)/1 var(--font); border: 1px solid var(--border);
  background: var(--surface); color: var(--navy-900); white-space: nowrap;
  transition: background var(--dur-2) var(--ease-soft), border-color var(--dur-2) var(--ease-soft),
              color var(--dur-2) var(--ease-soft), box-shadow var(--dur-2) var(--ease-soft),
              transform var(--dur-2) var(--ease-out);
  text-decoration: none;
  /* `translate` is set independently by the magnetic-pointer script so it can
     never fight the hover lift below, which uses `transform`. */
  translate: 0 0;
}
.btn:hover { background: var(--slate-100); text-decoration: none; }
.btn.primary { background: var(--cta); border-color: var(--cta); color: #fff; box-shadow: var(--shadow-sm); }
.btn.primary:hover { background: var(--cta-hover); border-color: var(--cta-hover); }
.btn.on-dark { background: transparent; border-color: var(--navy-700); color: #fff; }
.btn.on-dark:hover { background: var(--navy-800); }
.btn.lg { padding: 15px 28px; min-height: 52px; font-size: var(--fs-base); }
.btn svg { width: 16px; height: 16px; }
/* Ported micro-interaction: lift on hover. Transform only — no reflow. */
@media (prefers-reduced-motion: no-preference) {
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(0); transition-duration: var(--dur-1); }
  .btn.primary:hover { box-shadow: var(--glow-cta); }
}

/* ---------- Cards & badges ---------- */
.card {
  position: relative; isolation: isolate;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); padding: var(--sp-8);
  transition: box-shadow var(--dur-2) var(--ease-soft), border-color var(--dur-2) var(--ease-soft),
              transform var(--dur-2) var(--ease-out);
}
.section.dark .card { border-color: transparent; }
/* Ported micro-interactions on cards:
   ::before = cursor spotlight (position fed by --mx/--my from JS, with a sane
              static default so it still looks right with JS disabled)
   ::after  = sheen sweep on hover
   Both live at z-index:-1 inside the card's stacking context, so they wash the
   card surface but never sit on top of the text. */
.card.hover::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(3, 105, 161, 0.07), transparent 70%);
  opacity: 0; transition: opacity var(--dur-2) var(--ease-soft);
}
.card.hover::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit;
  background-image: linear-gradient(105deg, transparent 42%, rgba(3, 105, 161, 0.10) 50%, transparent 58%);
  background-repeat: no-repeat; background-size: 260% 100%; background-position: 190% 0;
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .card.hover:hover { box-shadow: var(--shadow-md); border-color: var(--slate-200); transform: translateY(-3px); }
  .card.hover:focus-within { box-shadow: var(--shadow-md); }
  .card.hover:hover::before { opacity: 1; }
  .card.hover:hover::after {
    opacity: 1; background-position: -60% 0;
    transition: background-position var(--dur-4) var(--ease-soft), opacity var(--dur-1) linear;
  }
}
/* The featured card's border is a gradient painted into border-box; the hover
   border-color must not repaint it as a flat slate line. */
.card.hover.featured:hover, .card.hover.featured:focus-within { border-color: transparent; }
/* Reduced motion / no JS: hover still gives a static affordance, no movement. */
@media (prefers-reduced-motion: reduce) {
  .card.hover:hover { box-shadow: var(--shadow-md); border-color: var(--slate-200); }
}

/* Ported: refined gradient + glow border for the one card we want to win.
   Painted with two backgrounds (padding-box fill, border-box gradient) so the
   border width never changes and nothing reflows. */
.card.featured, .compare-card.featured, .plan-card.featured, .pkg-card.featured {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(140deg, var(--cta), var(--cta-lift) 48%, var(--cta)) border-box;
  box-shadow: var(--glow-cta);
}

.icon-tile {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--cta-soft); color: var(--cta); margin-bottom: var(--sp-5);
  transition: transform var(--dur-2) var(--ease-out);
}
.icon-tile svg { width: 22px; height: 22px; }
@media (prefers-reduced-motion: no-preference) {
  .card.hover:hover .icon-tile { transform: translateY(-2px) scale(1.04); }
}
.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: var(--r-full);
  font-size: var(--fs-sm); font-weight: 600; background: var(--surface);
  border: 1px solid var(--border); color: var(--navy-700); white-space: nowrap;
  transition: border-color var(--dur-2), color var(--dur-2), background var(--dur-2), transform var(--dur-2) var(--ease-out);
}
.pill:hover { border-color: var(--cta); color: var(--cta); text-decoration: none; }
@media (prefers-reduced-motion: no-preference) { a.pill:hover { transform: translateY(-1px); } }
.badge-ok { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 700; background: var(--ok-soft); color: var(--ok); }
.check-list { list-style: none; margin: 0 0 var(--sp-4); padding: 0; }
.check-list li { display: flex; gap: 10px; align-items: flex-start; margin-bottom: var(--sp-3); }
.check-list svg { width: 18px; height: 18px; color: var(--ok); margin-top: 3px; }
.x-list { list-style: none; margin: 0 0 var(--sp-4); padding: 0; }
.x-list li { display: flex; gap: 10px; align-items: flex-start; margin-bottom: var(--sp-3); color: var(--slate-600); }
.x-list svg { width: 18px; height: 18px; color: var(--slate-500); margin-top: 3px; }

/* ---------- Comparison (Why Onwyn vs the alternatives) ---------- */
.compare-grid { align-items: stretch; }
.compare-card { display: flex; flex-direction: column; }
.compare-card .who { font-size: var(--fs-sm); color: var(--slate-500); margin: calc(-1 * var(--sp-3)) 0 var(--sp-4); }
.compare-card ul { margin-bottom: 0; }
.compare-card.featured { position: relative; }
.compare-card.featured .tag {
  position: absolute; top: -13px; left: var(--sp-8); padding: 4px 12px; border-radius: var(--r-full);
  background: var(--cta); color: #fff; font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}
@media (max-width: 1000px) { .compare-grid.cols-3 { grid-template-columns: 1fr; } }

/* ---------- Stats ---------- */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }
@media (max-width: 800px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }
.stat .num {
  font-size: 34px; font-weight: 800; color: var(--navy-900); letter-spacing: -0.03em; line-height: 1.1;
  font-variant-numeric: tabular-nums; /* count-up cannot jitter the width */
}
.section.dark .stat .num { color: #fff; }
.stat .cap { font-size: var(--fs-sm); color: var(--slate-500); margin-top: 6px; }
.section.dark .stat .cap { color: #94A3B8; }

/* ---------- Forms ---------- */
label.f-label { display: block; font-size: var(--fs-sm); font-weight: 700; color: var(--navy-900); margin-bottom: 6px; }
.input, select.input, textarea.input {
  width: 100%; padding: 11px 14px; border: 1px solid var(--slate-200); border-radius: var(--r-md);
  font: 400 var(--fs-base)/1.4 var(--font); color: var(--navy-900); background: var(--surface);
  transition: border-color var(--dur-2), box-shadow var(--dur-2);
}
.input:focus { outline: none; border-color: var(--cta); box-shadow: 0 0 0 3px var(--cta-soft); }
textarea.input { resize: vertical; min-height: 90px; }
.field { margin-bottom: var(--sp-4); }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-950); color: #94A3B8; padding: var(--sp-16) 0 var(--sp-12); font-size: var(--fs-sm); }
.site-footer a { color: #CBD5E1; }
.site-footer .cols { display: flex; justify-content: space-between; gap: var(--sp-8); flex-wrap: wrap; }
.site-footer .fine { border-top: 1px solid var(--navy-800); margin-top: var(--sp-10); padding-top: var(--sp-6); font-size: var(--fs-xs); color: #94A3B8; /* slate-400: 4.5:1 on the dark footer (a11y) */ }

/* ---------- Toast (shared with quote form feedback) ---------- */
.toast-host { position: fixed; bottom: 24px; right: 24px; z-index: var(--z-toast); display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: var(--navy-900); color: var(--slate-100); padding: 12px 18px; border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); font-size: var(--fs-sm); display: flex; align-items: center; gap: 10px;
  animation: toast-in var(--dur-2) var(--ease-out);
}
.toast svg { width: 16px; height: 16px; color: #4ADE80; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ================================================================
   Ported reveal effects
   ----------------------------------------------------------------
   Everything below is gated behind `.motion` on <html>, which the inline
   head script adds only when JS is running AND prefers-reduced-motion is not
   "reduce". Without that class the start states never apply, so content is
   authored-visible for: JS disabled, JS failed, reduced motion, and crawlers.
   ================================================================ */

/* --- Scroll reveal, staggered by position within its group (ReactBits
       "AnimatedContent" / "BlurText" family, done with IntersectionObserver) --- */
/* No `will-change` here on purpose. There are ~40 .reveal elements per page and
   promoting all of them at once costs a compositor layer each — that makes
   scrolling slower, not faster. opacity/transform are composited anyway. */
.motion .reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.motion .reveal.in { opacity: 1; transform: none; }

/* --- Split-text reveal on headlines (ReactBits "SplitText"): per-word blur +
       rise. Words are wrapped by JS; the source text stays in the HTML. --- */
.split-line { display: block; }
.split-word { display: inline-block; white-space: pre-wrap; }
.motion .split .split-word {
  opacity: 0; transform: translateY(0.42em); filter: blur(7px);
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out), filter 420ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger-word));
}
.motion .split.in .split-word { opacity: 1; transform: none; filter: blur(0); }

/* --- Hero spotlight (ReactBits "Spotlight"): a soft light that tracks the
       cursor. --mx/--my come from JS; the default keeps it centred. --- */
.hero .spotlight {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(520px circle at var(--mx, 62%) var(--my, 28%), rgba(125, 211, 252, 0.10), transparent 68%);
  opacity: 0; transition: opacity 600ms var(--ease-soft);
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .hero:hover .spotlight { opacity: 1; }
}

/* --- Reduced motion: belt and braces. Even if `.motion` were somehow present,
       nothing may stay hidden or transformed. --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
  .reveal, .motion .reveal,
  .split .split-word, .motion .split .split-word {
    opacity: 1 !important; transform: none !important; filter: none !important;
  }
  .card.hover::after, .card.hover::before, .hero .spotlight { display: none !important; }
  .btn { translate: 0 0 !important; }
}

/* Visually hidden, still announced. Used by the comparison table's <caption>
   and by column headers whose meaning is carried by the row headers. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
