/* Servio — shared theme: responsive, 5px corners, purposeful motion (desktop layout unchanged) */

/* ---- type system: Bricolage Grotesque leads (headings), Familjen Grotesk supports (body) ---- */
@font-face { font-family: 'Bricolage Grotesque'; src: url('fonts/bricolage-grotesque-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; src: url('fonts/bricolage-grotesque-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; src: url('fonts/bricolage-grotesque-latin-800-normal.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
.sv h1, .sv h2, .sv h3, .sv h4 { font-family: 'Bricolage Grotesque', 'Familjen Grotesk', -apple-system, system-ui, sans-serif; }

/* overflow safety */
.sv img, .svh img, .svf img { max-width: 100%; height: auto; }
.sv *, .svh * { min-width: 0; }

/* ---- Screenshots & product previews: fit containers, never crop or stretch ---- */
/* Nav mega-menu preview panels */
.svh .sv-prev {
  padding: 8px 8px 40px !important;
  background: #F4F0FD !important;
}
.svh .sv-prev img {
  position: relative !important;
  inset: auto !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}
/* UI screenshots (blog heroes, cards, product frames) — not hero video */
.sv img:not(video)[style*="object-fit: cover"],
.sv img:not(video)[style*="object-fit:cover"] {
  object-fit: contain !important;
  object-position: center !important;
}
/* Blog article hero shots: drop arbitrary fixed crop heights */
.sv section img[src*="shot-"][style*="height:"] {
  height: auto !important;
}
/* Product / platform app-frame screenshots */
.sv img[src*="shot-"],
.sv img[src*="mock-"] {
  object-fit: contain !important;
  object-position: center !important;
}
/* Platform cards: frame interiors letterbox the screenshot */
.sv #products [style*="max-width:360px"][style*="overflow:hidden"] img,
.sv #products [style*="max-width: 360px"][style*="overflow:hidden"] img,
.sv #products [style*="max-width:360px"][style*="overflow: hidden"] img {
  width: 100% !important;
  height: auto !important;
  max-height: 240px !important;
  object-fit: contain !important;
}
/* Fixed-height thumbnail rails */
.sv [data-cat] img,
.sv div[style*="height:160px"] > img,
.sv div[style*="height: 160px"] > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}
/* Product page feature frames (full-width app chrome) */
.sv section [style*="border-radius:18px"][style*="overflow:hidden"] img[src*="shot-"],
.sv section [style*="border-radius: 18px"][style*="overflow:hidden"] img[src*="shot-"],
.sv section [style*="border-radius:18px"][style*="overflow: hidden"] img[src*="shot-"] {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}
/* Testimonial photo card */
.sv img[onerror][style*="height:230px"],
.sv img[onerror][style*="height: 230px"] {
  height: auto !important;
  max-height: 280px !important;
  object-fit: contain !important;
}

/* uniform 5px corners on every button / container */
.sv [style*="border-radius"], .svh [style*="border-radius"], .svf [style*="border-radius"] { border-radius: 5px !important; }

/* larger header nav + action text */
.sv-desktop-nav, .sv-desktop-nav a, .sv-desktop-nav button { font-size: 16px !important; }
.sv-desktop-actions a { font-size: 16px !important; }

/* base transitions (never hide content) */
.sv a, .sv button, .sv [style*="box-shadow"], .sv [style*="border:1px solid"] {
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s cubic-bezier(.2,.8,.2,1),
              background-color .28s ease, color .22s ease, border-color .28s ease, filter .25s ease !important;
}

/* ---- PRIMARY CTAs: brand purple fades in + gentle lift (the main action) ---- */
.sv a[style*="background: rgb(20, 21, 39)"]:hover,                                              /* dark filled (incl. header Get started) */
.sv a[style*="display: inline-flex"][style*="background: rgb(255, 255, 255)"]:not([style*="solid rgb"]):hover { /* white filled = primary */
  background-color: #6E2BF2 !important;
  color: #fff !important;
  box-shadow: 0 14px 28px -10px rgba(110,43,242,.55) !important;
  transform: translateY(-2px);
}
.sv a[style*="background: rgb(20, 21, 39)"]:hover *,
.sv a[style*="display: inline-flex"][style*="background: rgb(255, 255, 255)"]:not([style*="solid rgb"]):hover * { color: #fff !important; }
/* gradient primary: already purple → deepen + lift */
.sv a[style*="background: linear-gradient"]:hover { filter: brightness(1.06) saturate(1.1); box-shadow: 0 16px 30px -12px rgba(110,43,242,.6) !important; transform: translateY(-2px); }

/* ---- SECONDARY / outlined buttons: quiet lift + border warm (lower priority) ---- */
.sv a[style*="display: inline-flex"][style*="solid rgb(222, 218, 236)"]:hover,
.sv a[style*="display: inline-flex"][style*="solid rgb(228, 224, 240)"]:hover { transform: translateY(-2px); border-color: #C9B6F5 !important; }

/* ---- Arrow means "go": nudge forward, only on arrow icons ---- */
.sv a svg.lucide-arrow-right { transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.sv a:hover svg.lucide-arrow-right { transform: translateX(4px); }

/* ---- Header Sign in (text link) → brand violet ---- */
.sv-desktop-actions a:not([style*="background"]):hover { color: #6E2BF2 !important; }

/* ---- Cards are interactive: lift with a soft violet glow (sections only, not the header bar) ---- */
.sv section [style*="box-shadow"]:hover { transform: translateY(-5px); box-shadow: 0 26px 50px -26px rgba(110,43,242,.42) !important; }
.sv section a[style*="rgb(236, 233, 244)"]:hover { border-color: #C9B6F5 !important; }

/* ---- small segmented controls never lift like cards (their selected state carries a box-shadow) ---- */
.sv [data-bill]:hover, .sv [data-tier]:hover, .sv [data-bill], .sv [data-tier] {
  transform: none !important;
}
.sv [data-bill]:hover, .sv [data-tier]:hover {
  box-shadow: 0 2px 8px -3px rgba(40,20,90,.3) !important;
}

/* ---- Desktop nav: animated underline ---- */
.sv-desktop-nav > a, .sv-desktop-nav > div > button { position: relative; }
.sv-desktop-nav > a::after, .sv-desktop-nav > div > button::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px;
  background: linear-gradient(90deg, #6E2BF2, #C13AD9); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.sv-desktop-nav > a:hover::after, .sv-desktop-nav > div:hover > button::after { transform: scaleX(1); }

/* ---- FAQ +/- morph ---- */
.sv-pm { position: relative; width: 20px; height: 20px; flex: none; display: inline-block; }
.sv-pm::before, .sv-pm::after { content: ""; position: absolute; background: #6E2BF2; border-radius: 2px; transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s ease; }
.sv-pm::before { top: 50%; left: 1px; right: 1px; height: 2.5px; transform: translateY(-50%); }
.sv-pm::after { left: 50%; top: 1px; bottom: 1px; width: 2.5px; transform: translateX(-50%); }
details[open] .sv-pm::before { transform: translateY(-50%) rotate(180deg); }
details[open] .sv-pm::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }
.sv-prev { transition: opacity .25s ease; }

/* burger + mobile menu + responsive table toggles */
.sv-burger { display: none; }

/* ---- Smooth animated mobile menu (fade + slide, never a hard cut) ---- */
.sv-mobile {
  display: block;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-10px);
  transition: opacity .34s cubic-bezier(.2,.8,.2,1), transform .42s cubic-bezier(.2,.8,.2,1), visibility 0s linear .42s;
}
.sv-mobile.sv-open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0);
  transition: opacity .34s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.2,.9,.25,1.02), visibility 0s;
}
/* inner rows stagger in when the sheet opens — TRANSFORM-ONLY, text can never be invisible */
.sv-mobile [style*="padding: 13px 4px"], .sv-mobile [style*="padding:13px 4px"],
.sv-mobile [style*="margin-top: 22px"], .sv-mobile [style*="margin-top: 12px"] {
  transform: translateY(14px);
  transition: transform .5s cubic-bezier(.2,.85,.3,1);
}
.sv-mobile.sv-open [style*="padding: 13px 4px"], .sv-mobile.sv-open [style*="padding:13px 4px"],
.sv-mobile.sv-open [style*="margin-top: 22px"], .sv-mobile.sv-open [style*="margin-top: 12px"] {
  transform: translateY(0);
}
.sv-mobile.sv-open > div:last-child > * { transition-delay: calc(var(--i, 0) * 34ms); }
.sv-burger i { transition: transform .3s cubic-bezier(.2,.8,.2,1); }

/* ---- mobile nav accordions (mirror the desktop dropdowns) ---- */
.sv-acc-caret { transition: transform .25s cubic-bezier(.2,.8,.2,1); }
[data-acc-toggle][aria-expanded="true"] .sv-acc-caret { transform: rotate(180deg); }
[data-acc-panel] > a:active { background: #F6F3FD; }

/* ---- Footer social: inline brand icons, muted greyscale by default, full colour + lift on hover ---- */
.svf [data-social] { transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .25s ease, background-color .25s ease; }
.svf [data-social] svg { filter: grayscale(1); opacity: .8; transition: filter .3s ease, opacity .25s ease; display: block; }
.svf [data-social]:hover { transform: translateY(-3px); border-color: #D8CEF3 !important; background: #FAF8FE; }
.svf [data-social]:hover svg { filter: grayscale(0); opacity: 1; }

/* ---- Whole-page entrance + route transition (smooth on every open) ---- */
/* NOTE: must END on transform:none — a retained transform makes .sv the containing
   block for position:fixed children (mobile menu / demo modal), so they'd scroll with the page. */
@keyframes svpage { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sv { animation: svpage .6s cubic-bezier(.16,1,.3,1) backwards; }
html.sv-leaving .sv { opacity: 0; transition: opacity .22s ease; animation: none; }
html { scroll-behavior: smooth; }

/* ---- Sticky header stays consistent (no condense) ---- */
.svh > div { transition: box-shadow .28s ease; position: relative; }

/* ---- Narrow desktop (tablet landscape): tighter nav, Contact folds into the footer/menu ---- */
@media (min-width: 769px) and (max-width: 1023px) {
  .svh .sv-desktop-nav a, .svh .sv-desktop-nav button { font-size: 14px !important; padding: 8px 8px !important; }
  .sv-desktop-actions a[href="/contact"] { display: none !important; }
}

/* ---- Desktop: nav sits centred in the bar; logo left, actions right ---- */
@media (min-width: 769px) {
  .svh .sv-desktop-nav {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
  }
}

/* ---- Scroll-reveal (JS-applied so content is never hidden without JS) ---- */
.sv-reveal { opacity: 0; transform: translateY(14px); }
.sv-reveal.sv-in { opacity: 1; transform: none; transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }

.sv-mobileonly { display: none; }

@media (max-width: 768px) {
  .sv [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .svf [style*="grid-template-columns"] { grid-template-columns: repeat(3, 1fr) !important; gap: 26px 14px !important; }
  .svf [style*="grid-template-columns"] > div:first-child { grid-column: 1 / -1; }
  .sv-desktop-nav { display: none !important; }
  .sv-desktop-actions { display: none !important; }
  .sv-burger { display: inline-flex !important; width: 38px !important; height: 38px !important; }
  .sv section { padding-left: 16px !important; padding-right: 16px !important; }
  .svh { padding-left: 10px !important; padding-right: 10px !important; top: 6px !important; }
  .svh > div { padding: 5px 8px 5px 12px !important; }
  .svh img { height: 17px !important; }
  .sv-desktoponly { display: none !important; }
  .sv-mobileonly { display: block !important; }

  /* ---- hero fits the device screen (no scroll needed to see it all) ---- */
  .sv section[style*="margin-top: -64px"], .sv section[style*="margin-top:-64px"] {
    min-height: 100vh !important;
    min-height: 100svh !important;
    padding-top: 84px !important;
    padding-bottom: 24px !important;
    margin-top: -56px !important;
  }
  .sv section[style*="margin-top: -64px"] h1,
  .sv section[style*="margin-top:-64px"] h1 { font-size: clamp(38px, 12vw, 60px) !important; }
  .sv section[style*="margin-top: -64px"] [style*="margin-top: 26px"] { margin-top: 12px !important; font-size: 16px !important; }
  .sv section[style*="margin-top: -64px"] [style*="margin-top: 34px"] { margin-top: 18px !important; }
  .sv section[style*="margin-top: -64px"] [style*="margin-top: 40px"] { margin-top: 18px !important; }
  .sv section[style*="margin-top: -64px"] a[style*="padding: 16px 28px"],
  .sv section[style*="margin-top: -64px"] a[style*="padding: 16px 26px"] { padding: 12px 20px !important; font-size: 15px !important; }
  /* video: full-bleed cover, slightly lighter overlay so the demo reads at a glance */
  .sv section[style*="margin-top: -64px"] video,
  .sv section[style*="margin-top:-64px"] video { object-fit: cover !important; object-position: center !important; }
  .sv section[style*="margin-top: -64px"] [data-hero-overlay] { opacity: .78 !important; }
  /* hero foreground on mobile: ink on the light gradient (desktop is white on video) */
  /* scoped to the HOME hero only (the section with the video background),
     never a generic first section like the Contact page's method cards */
  .sv section:has([data-hero-bg]) h1 { color: #141527 !important; }
  .sv section:has([data-hero-bg]) h1 + p { color: #3B3553 !important; }
  .sv section:has([data-hero-bg]) div[style*="gap: 14px 30px"],
  .sv section:has([data-hero-bg]) div[style*="gap:14px 30px"] { color: #141527 !important; }
  .sv section:has([data-hero-bg]) a[href="https://app.servio.uk/demo"] { background: #141527 !important; color: #fff !important; }
  .sv section:has([data-hero-bg]) a[href="https://app.servio.uk/demo"] * { color: #fff !important; }
  .sv section:has([data-hero-bg]) a[href="/pricing"] { background: rgba(255,255,255,.72) !important; border-color: rgba(20,21,39,.22) !important; color: #141527 !important; }
  .sv section:has([data-hero-bg]) [data-demo-open] { color: #141527 !important; }
  .sv section:has([data-hero-bg]) [data-demo-open] > span { background: rgba(20,21,39,.08) !important; border-color: rgba(20,21,39,.28) !important; }
  /* hero artwork on mobile: the 16:9 crop hides the wordmark, so the logo
     joins the content as a lockup above the headline (see sv-mobileonly img)
     and the background keeps just the brand gradient */
  .sv [data-hero-bg] > img { display: none !important; }
  .sv [data-hero-bg] {
    background:
      radial-gradient(130% 90% at 82% 12%, rgba(216, 132, 236, .55), rgba(216, 132, 236, 0) 62%),
      radial-gradient(130% 100% at 12% 88%, rgba(164, 92, 238, .5), rgba(164, 92, 238, 0) 66%),
      linear-gradient(180deg, #FDFBFF, #F2E8FC);
  }
  .sv [data-hero-bg] > div { background: rgba(255, 255, 255, .18) !important; }
}

@media (max-width: 480px) {
  .svf [style*="grid-template-columns"] { grid-template-columns: repeat(2, 1fr) !important; }
  .sv section { padding-left: 13px !important; padding-right: 13px !important; }
}

/* ---- blog filter chips ---- */
.sv [data-filter] { white-space: nowrap; }

/* ---- header expands past the hero: floating pill → full-width integrated bar ---- */
.svh { transition: top .4s cubic-bezier(.16,1,.3,1), padding .4s cubic-bezier(.16,1,.3,1); }
.svh > div {
  transition: box-shadow .28s ease, max-width .45s cubic-bezier(.16,1,.3,1),
              border-radius .45s cubic-bezier(.16,1,.3,1), border-color .28s ease,
              padding .45s cubic-bezier(.16,1,.3,1);
}
.svh.sv-expanded { top: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
.svh.sv-expanded > div {
  max-width: 100vw !important;
  border-radius: 0 !important;
  border-top-color: transparent !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  box-shadow: 0 10px 30px -24px rgba(20, 21, 39, .35) !important;
  padding: 10px 28px !important;
}
@media (max-width: 768px) {
  .svh.sv-expanded { top: 0 !important; }
  .svh.sv-expanded > div { padding: 8px 14px !important; }
}

/* =====================================================================
   Polish layer — typography, focus, motion and micro-interaction detail
   (same identity: ink #141527 · violet #6E2BF2 · Familjen Grotesk · 5px)
   ===================================================================== */

/* ---- typography: balanced headlines, readable measure, aligned digits ---- */
.sv h1, .sv h2, .sv h3 { text-wrap: balance; }
.sv { font-variant-numeric: tabular-nums; }
::selection { background: #6E2BF2; color: #fff; }

/* ---- brand-consistent forms on every page (contact, footer, support) ---- */
.sv input, .sv textarea, .sv select { font-family: inherit; }
.sv input::placeholder, .sv textarea::placeholder { color: #a6a2b6; }
.sv input:focus, .sv textarea:focus, .sv select:focus {
  outline: none; border-color: #6E2BF2 !important;
  box-shadow: 0 0 0 3px rgba(110, 43, 242, .13) !important;
}

/* ---- keyboard focus is always visible, in brand ---- */
.sv a:focus-visible, .sv button:focus-visible, .sv summary:focus-visible,
.svh a:focus-visible, .svh button:focus-visible, .svf a:focus-visible {
  outline: 2px solid #6E2BF2; outline-offset: 3px; border-radius: 5px;
}

/* ---- anchor targets never hide under the sticky header (+ sub-nav) ---- */
.sv [id] { scroll-margin-top: 118px; }

/* ---- expanded header becomes glass: content scrolls beneath it ---- */
.svh.sv-expanded > div {
  background: rgba(255, 255, 255, .82) !important;
  -webkit-backdrop-filter: saturate(1.7) blur(14px);
  backdrop-filter: saturate(1.7) blur(14px);
}

/* ---- dropdown panels enter, they don't pop ---- */
@keyframes svdrop { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.svh [data-panel] > div { animation: svdrop .24s cubic-bezier(.16, 1, .3, 1); }

/* ---- one orchestrated entrance: headline → copy → actions ---- */
@keyframes svrise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.sv section:first-of-type h1 { animation: svrise .7s cubic-bezier(.16, 1, .3, 1) .05s backwards; }
.sv section:first-of-type h1 + p { animation: svrise .7s cubic-bezier(.16, 1, .3, 1) .18s backwards; }
.sv section:first-of-type h1 + p + div { animation: svrise .7s cubic-bezier(.16, 1, .3, 1) .3s backwards; }

/* ---- pressing a button should feel like pressing a button ---- */
.sv a[style*="display: inline-flex"]:active,
.sv a[style*="display:inline-flex"]:active,
.sv button:active { transform: translateY(0) scale(.985); }

/* ---- footer links answer the cursor ---- */
.svf a { transition: color .2s ease; }
.svf a:hover { color: #6E2BF2 !important; }

/* ---- FAQ answers fade open ---- */
@keyframes svfade { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.sv details[open] > *:not(summary) { animation: svfade .35s ease; }

/* ---- marquee rows pause for reading (keyframes here so every page can marquee) ---- */
@keyframes svmarq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.sv [style*="svmarq"]:hover { animation-play-state: paused; }

/* ---- hero artwork: slow ambient drift (scale composes with the JS parallax) ---- */
@keyframes svdrift { from { scale: 1; } to { scale: 1.05; } }
.sv [data-hero-bg] > img { animation: svdrift 26s ease-in-out infinite alternate; will-change: transform; }

/* ---- kinetic headline: block entrance replaced by per-letter rise ---- */
.sv [data-kinetic] { animation: none !important; }
.sv .sv-ltr { display: inline-block; animation: svletter .6s cubic-bezier(.16, 1, .3, 1) backwards; }
@keyframes svletter { from { opacity: 0; transform: translateY(.35em); } to { opacity: 1; transform: none; } }

/* ---- live tickets over the kitchen-display card ---- */
.sv .sv-tick {
  position: absolute; left: 16px; bottom: 18px;
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px;
  background: rgba(255, 255, 255, .97); border: 1px solid #ECE9F4; border-radius: 10px;
  font-size: 12px; font-weight: 700; color: #141527;
  filter: drop-shadow(0 10px 14px rgba(40, 20, 90, .25));
  opacity: 0; pointer-events: none;
}
.sv .sv-tick span { width: 8px; height: 8px; border-radius: 50%; flex: none; }
@keyframes svtickA { 0%, 46%, 100% { opacity: 0; transform: translateY(8px); } 7%, 39% { opacity: 1; transform: none; } }
@keyframes svtickB { 0%, 52%, 96%, 100% { opacity: 0; transform: translateY(8px); } 59%, 90% { opacity: 1; transform: none; } }
.sv .sv-tick-a { animation: svtickA 7.5s ease-in-out 1.2s infinite; }
.sv .sv-tick-b { animation: svtickB 7.5s ease-in-out 1.2s infinite; }

/* ---- demo modal: 4K explainer video with custom controls ---- */
.sv [data-demo-modal] > div { width: 100%; max-width: min(1280px, 96vw); }
.sv [data-demo-player] { position: relative; }
.sv [data-demo-player] video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; background: #000;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
@media (max-width: 768px) {
  .sv [data-demo-modal] { padding: 0 !important; align-items: stretch !important; }
  .sv [data-demo-modal] > div {
    max-width: none !important; min-height: 100%;
    display: flex; flex-direction: column; justify-content: center;
    padding: 52px 8px 12px;
  }
  .sv [data-demo-modal] [data-demo-close] { top: 12px !important; right: 12px !important; }
  .sv [data-demo-player] { border-radius: 0 !important; box-shadow: none !important; }
}
.sv [data-demo-seek] { height: 4px; -webkit-appearance: none; appearance: none; background: rgba(255, 255, 255, .28); border-radius: 999px; }
.sv [data-demo-seek]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 13px; height: 13px; border-radius: 50%; background: #fff; cursor: pointer; }
.sv [data-demo-seek]::-moz-range-thumb { width: 13px; height: 13px; border: 0; border-radius: 50%; background: #fff; cursor: pointer; }

/* ---- blog cards: photographs answer the cursor ---- */
.sv [data-cat] { overflow: hidden; }
.sv [data-cat] img { transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.sv [data-cat]:hover img { transform: scale(1.05); }

@media (max-width: 768px) {
  /* pricing controls fit the phone: billing toggle + tier tabs */
  [data-billing] [data-bill] { padding: 8px 12px !important; font-size: 13px !important; white-space: nowrap; }
  [data-tco-tabs] [data-tier] { padding: 8px 11px !important; font-size: 12.5px !important; white-space: nowrap; }
  [data-tco-pillars] { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  /* platform cards become a swipeable rail */
  #products div[style*="grid-template-columns:repeat(3,1fr)"],
  #products div[style*="grid-template-columns: repeat(3, 1fr)"] {
    display: flex !important; overflow-x: auto; gap: 14px !important;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    padding: 4px 4px 18px; scrollbar-width: none;
  }
  #products div[style*="grid-template-columns:repeat(3,1fr)"]::-webkit-scrollbar,
  #products div[style*="grid-template-columns: repeat(3, 1fr)"]::-webkit-scrollbar { display: none; }
  #products div[style*="grid-template-columns:repeat(3,1fr)"] > a,
  #products div[style*="grid-template-columns: repeat(3, 1fr)"] > a { min-width: 86%; scroll-snap-align: center; }
}

/* ---- motion respects the visitor's preference ---- */
@media (prefers-reduced-motion: reduce) {
  .sv *, .sv, .svh *, .svf *, .sv *::before, .sv *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
  .sv-reveal { opacity: 1; transform: none; }
}