/* Antz Onboarding: tokens taken from the Figma "Antz Modules" file (MD3_Antz) */
:root {
  --green: #37BD69;
  --green-strong: #2A9D55;
  --green-tint: #E8F6EE;
  --teal: #1F515B;
  --teal-deep: #173E46;
  --mint: #DDEBE9;
  --outline: #C3CEC7;
  --line: #E4EAE7;
  --ink: #0E1715;
  --text: #2B3833;
  --muted: #44544A;
  --muted-2: #7A8684;
  --surface: #FFFFFF;
  --surface-soft: #F5F8F7;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(14, 23, 21, .06), 0 1px 3px rgba(14, 23, 21, .06);
  --shadow: 0 10px 30px -12px rgba(14, 23, 21, .25);
  --shadow-lg: 0 30px 60px -20px rgba(14, 23, 21, .35);

  --container: 1200px;
  --gutter: 24px;
  --header-h: 72px;
  --ease: cubic-bezier(.2, 0, 0, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  /* Inter for Latin, Greek and Cyrillic; the Noto family for the chosen language covers other scripts (loaded by i18n.js) */
  font-family: "Inter", "Noto Sans Arabic", "Noto Sans Devanagari", "Noto Sans SC", "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { color: var(--ink); line-height: 1.15; margin: 0; font-weight: 600; letter-spacing: -.01em; }
p { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
@media (max-width: 640px) { :root { --gutter: 16px; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 22px; border-radius: var(--radius-sm); border: 1px solid transparent;
  font-size: 15px; font-weight: 500; letter-spacing: .02em; text-decoration: none; cursor: pointer;
  transition: background .14s var(--ease), color .14s var(--ease), border-color .14s var(--ease), transform .14s var(--ease);
}
.btn-sm { height: 38px; padding: 0 16px; font-size: 14px; }
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-strong); }
.btn-ghost { background: transparent; border-color: var(--outline); color: var(--ink); }
.btn-ghost:hover { border-color: var(--teal); }
.btn-light { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.4); backdrop-filter: blur(6px); }
.btn-light:hover { background: rgba(255,255,255,.24); }
.btn:active { transform: translateY(1px); }
/* Primary buttons rise off the page on hover, overshoot slightly and settle */
.btn-primary { box-shadow: 0 0 0 rgba(14,40,34,0); transition: background .14s var(--ease), color .14s var(--ease), transform .45s cubic-bezier(.4,0,.2,1), box-shadow .45s cubic-bezier(.4,0,.2,1); }
.btn-primary:hover {
  transform: translateY(-3px); box-shadow: 0 12px 22px -10px rgba(39,134,75,.55), 0 3px 6px rgba(14,40,34,.08);
  transition: background .14s var(--ease), color .14s var(--ease), transform .55s cubic-bezier(.34,1.56,.64,1), box-shadow .55s cubic-bezier(.22,.8,.24,1);
}
.btn-primary:active { transform: translateY(-1px); transition-duration: .12s; }
@media (prefers-reduced-motion: reduce) { .btn-primary, .btn-primary:hover { transition: none; transform: none; } }
.link-arrow { color: var(--green-strong); font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.link-arrow:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Header ---------- */
/* The header floats over the page (negative margin) and starts clear.
   app.js sets .scrolled once the page moves and .on-dark while it sits over the hero photo. */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; height: var(--header-h);
  margin-bottom: calc(-1 * var(--header-h));
  background: rgba(255,255,255,0); border-bottom: 1px solid transparent;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease);
}
.site-header.scrolled {
  background: rgba(255,255,255,.62); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px);
  border-bottom-color: rgba(14,23,21,.08);
}
.site-header.on-dark { background: rgba(255,255,255,0); border-bottom-color: transparent; }
.site-header.menu-open { background: #fff; }
.site-header.on-dark.scrolled {
  background: rgba(10,30,26,.22); backdrop-filter: saturate(1.3) blur(18px); -webkit-backdrop-filter: saturate(1.3) blur(18px);
  border-bottom-color: rgba(255,255,255,.12);
}
.header-row { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 16px; transition: padding-top .3s var(--ease); }
/* Extra top breathing room while the header is clear; it tucks back up once the glass bar appears */
.site-header.scrolled .header-row { padding-top: 0; }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.brand-logo { position: relative; display: block; }
.brand img { height: 42px; width: auto; transition: opacity .3s var(--ease); }
.brand .logo-light { position: absolute; top: 0; left: 0; opacity: 0; }
.on-dark .brand .logo-light { opacity: 1; }
.on-dark .brand .logo-dark { opacity: 0; }
.brand-guide {
  display: flex; align-items: center; gap: 9px; min-width: 0; padding-inline-start: 14px; border-inline-start: 1px solid var(--outline);
  color: var(--ink); transition: color .3s var(--ease), border-color .3s var(--ease);
}
/* The guide's mark: a rounded square with an open doorway cut out of it, the door ajar (negative space), in one colour */
.brand-door { flex: none; width: 28px; height: 28px; }
.on-dark .brand-guide { color: #fff; border-inline-start-color: rgba(255,255,255,.45); }
.brand-label { font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); transition: color .3s var(--ease); }
/* Over the dark hero photo: the Medical & Treatment page gradient (mint to blush) fills the letters */
.on-dark .brand-label {
  background: linear-gradient(100deg, #DDF0EC 0%, #DDF0EC 25%, #FCE8E1 100%) 0 0 / 100% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.primary-nav { display: flex; align-items: center; gap: 30px; }
.primary-nav a:not(.btn) { text-decoration: none; font-size: 15px; font-weight: 500; color: var(--ink); transition: color .2s var(--ease); }
/* Menu items never wrap; on smaller laptops they sit closer so longer translations still fit */
.primary-nav a:not(.btn) { white-space: nowrap; }
@media (min-width: 901px) and (max-width: 1200px) { .primary-nav { gap: 18px; } .primary-nav a:not(.btn) { font-size: 14px; } .brand-label { font-size: 17px; } }
.primary-nav a:not(.btn):hover { color: var(--green-strong); }
.nav-toggle { display: none; background: none; border: 0; width: 44px; height: 44px; padding: 10px; cursor: pointer; }
/* Search icon in the menu bar (after the links on desktop, before the menu button on phones) */
.brand { margin-inline-end: auto; min-width: 0; }
/* Long translations of the label shorten with an ellipsis; the logo and the buttons never shrink */
.brand-logo, .nav-toggle { flex: none; }
.brand-guide { flex: 0 1 auto; }
.brand-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Language switcher: globe and code, opening a list of languages in their own names */
.nav-lang { position: relative; flex: none; }
.nav-lang-btn {
  display: inline-flex; align-items: center; gap: 5px; height: 38px; padding: 0 10px; border-radius: 999px; border: 0; cursor: pointer;
  background: transparent; color: var(--ink); font: 600 12.5px Inter, sans-serif; letter-spacing: .04em; transition: background .2s, color .3s var(--ease);
}
.nav-lang-btn:hover, .nav-lang.open .nav-lang-btn { background: rgba(14,23,21,.06); }
.on-dark .nav-lang-btn { color: #fff; }
.on-dark .nav-lang-btn:hover, .on-dark .nav-lang.open .nav-lang-btn { background: rgba(255,255,255,.16); }
.nav-lang-menu {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 70; width: 250px; max-height: min(70vh, 560px); overflow-y: auto;
  padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg);
  /* Radial blow-up: a circle grows out of the globe button to reveal the menu, and shrinks back into it on close.
     The circle ends wider than the menu so its shadow is not clipped. */
  clip-path: circle(0px at var(--ox, 85%) var(--oy, -20px));
  transition: clip-path .5s cubic-bezier(.22,.8,.24,1);
}
.nav-lang.open .nav-lang-menu { clip-path: circle(var(--or, 150%) at var(--ox, 85%) var(--oy, -20px)); }
.nav-lang:not(.open) .nav-lang-menu { transition-duration: .3s; transition-timing-function: cubic-bezier(.5,0,.75,0); }
@media (prefers-reduced-motion: reduce) { .nav-lang-menu { transition: none; } }
.nav-lang-menu button {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 9px 12px; border: 0; border-radius: 9px;
  background: none; cursor: pointer; font-size: 14.5px; color: var(--text); text-align: start;
}
.nav-lang-menu button small { font: 600 11px Inter, sans-serif; letter-spacing: .06em; color: var(--muted-2); }
.nav-lang-menu button:hover, .nav-lang-menu button:focus-visible { background: var(--surface-soft); color: var(--ink); outline: none; }
.nav-lang-menu button[aria-checked="true"] { background: var(--green-tint); color: var(--ink); font-weight: 600; }
.nav-lang-note { margin: 6px 6px 2px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.45; color: var(--muted); }
/* Review note for machine translations */
.lang-toast {
  position: fixed; inset-inline-start: 16px; bottom: 16px; z-index: 65; display: flex; align-items: center; gap: 10px; max-width: min(460px, calc(100vw - 32px));
  padding: 10px 10px 10px 16px; border-radius: 14px; background: var(--teal-deep); color: #fff; box-shadow: var(--shadow-lg);
  font-size: 13px; line-height: 1.45; animation: pinMenu .3s var(--ease);
}
.lang-toast p { margin: 0; flex: 1; color: rgba(255,255,255,.9); }
.lang-toast { transition: opacity .35s ease, transform .35s var(--ease); }
.lang-toast.away { opacity: 0; transform: translateY(12px); pointer-events: none; }
.lang-toast-en { flex: none; border: 1px solid rgba(255,255,255,.4); background: transparent; color: #fff; border-radius: 999px; padding: 5px 11px; font: 600 12px Inter, sans-serif; cursor: pointer; }
.lang-toast-en:hover { background: rgba(255,255,255,.14); }
.lang-toast-x { flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: rgba(255,255,255,.8); display: grid; place-items: center; cursor: pointer; }
.lang-toast-x svg { width: 16px; height: 16px; }
/* A translated module page names the module as it appears in the app */
.mpanel-inapp { margin: -4px 0 12px; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--tint-ink); }
.nav-search {
  flex: none; width: 42px; height: 42px; margin-left: -6px; border-radius: 50%; border: 0; background: transparent; cursor: pointer;
  display: grid; place-items: center; color: var(--ink); transition: background .2s, color .3s var(--ease);
}
.nav-search:hover { background: rgba(14,23,21,.06); }
.on-dark .nav-search { color: #fff; }
.on-dark .nav-search:hover { background: rgba(255,255,255,.16); }
.nav-toggle span { display: block; height: 2px; background: var(--ink); margin: 5px 0; border-radius: 2px; transition: transform .2s var(--ease), opacity .2s, background-color .3s var(--ease); }
.on-dark .nav-toggle span { background: #fff; }
@media (min-width: 901px) {
  .on-dark .primary-nav a:not(.btn) { color: rgba(255,255,255,.92); text-shadow: 0 1px 10px rgba(0,0,0,.3); }
  .on-dark .primary-nav a:not(.btn):hover { color: #8FE3AE; }
}
@media (max-width: 900px) {
  .nav-toggle { display: block; order: 3; margin-inline-start: 2px; }
  .nav-search { order: 2; margin-inline-start: 0; }
  .nav-lang { order: 1; }
  .nav-lang-btn { padding: 0 8px; }
  .primary-nav {
    position: absolute; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
    padding: 8px var(--gutter) 20px; display: none;
  }
  .primary-nav.open { display: flex; }
  .primary-nav a:not(.btn) { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .primary-nav .btn { margin-top: 16px; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .brand-label { font-size: 16px; white-space: nowrap; }
  .brand img { height: 36px; }
}

/* ---------- Sections ---------- */
.section { padding: 96px 0; }
.section-soft { background: var(--surface-soft); }
.section-head { max-width: 720px; margin-bottom: 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.eyebrow { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #FA6140; margin-bottom: 12px; } /* Antz orange section labels */
.section-title { font-size: clamp(28px, 3.6vw, 40px); }
.section-lede { font-size: 18px; color: var(--muted); margin-top: 14px; }
/* The app's green quick-action button, inline in a sentence: as tall as a capital, its drop shadow hanging below */
.inline-fab { display: inline-block; width: auto; height: 2em; margin: -.5em -.05em -.84em; vertical-align: baseline; }
@media (max-width: 640px) { .section { padding: 64px 0; } .section-head { margin-bottom: 32px; } .section-lede { font-size: 16px; } }

/* ---------- Hero ---------- */
.hero { position: relative; z-index: 2; color: #fff; isolation: isolate; }
.hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--teal-deep); }
.hero-slides { position: absolute; inset: 0; will-change: transform; }
/* A 40% black veil from the top of the banner, fading gradually away below the menu */
.hero-media::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 300px; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.400) 0px,
    rgba(0,0,0,0.343) 30px,
    rgba(0,0,0,0.287) 60px,
    rgba(0,0,0,0.231) 90px,
    rgba(0,0,0,0.179) 120px,
    rgba(0,0,0,0.130) 150px,
    rgba(0,0,0,0.087) 180px,
    rgba(0,0,0,0.051) 210px,
    rgba(0,0,0,0.024) 240px,
    rgba(0,0,0,0.006) 270px,
    rgba(0,0,0,0.000) 300px);
}
.hero-bg { position: absolute; inset: 0; background: var(--teal-deep) var(--x, 70%) var(--y, 30%) / cover no-repeat; }
/* Banner change: the new photo fades in on top, easing out of a slight zoom; the old one fades out a moment later */
.hero-bg.enter { animation: bannerIn 2.8s cubic-bezier(.45,0,.25,1) both; }
.hero-bg.leave { animation: bannerOut 2.4s cubic-bezier(.45,0,.55,1) .6s both; }
@keyframes bannerIn { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
@keyframes bannerOut { from { opacity: 1; } to { opacity: 0; } }
/* Banner turn, in three overlapping movements (3.6 s):
   1. the current photo softens into a blur, and a wash of the next photo's key colour rises over it;
   2. the next photo fades in beneath the wash, just as blurred, from a slight zoom;
   3. it sharpens and settles while the wash clears. */
.hero-bg.blur-out { animation: bannerBlur 1.4s cubic-bezier(.45,0,.55,1) both; }
.hero-bg.morph { animation: bannerMorph 3.6s both; }
.hero-wash { position: absolute; inset: 0; background: var(--wash); pointer-events: none; animation: bannerWash 3.6s both; }
@keyframes bannerBlur { from { filter: blur(0); transform: none; } to { filter: blur(18px); transform: scale(1.05); } }
@keyframes bannerMorph {
  0%, 30% { opacity: 0; filter: blur(18px); transform: scale(1.07); animation-timing-function: cubic-bezier(.45,0,.55,1); }
  52%     { opacity: 1; filter: blur(18px); transform: scale(1.06); animation-timing-function: cubic-bezier(.3,0,.2,1); }
  100%    { opacity: 1; filter: blur(0); transform: none; }
}
@keyframes bannerWash {
  0%   { opacity: 0; animation-timing-function: cubic-bezier(.45,0,.55,1); }
  36%  { opacity: .62; }
  54%  { opacity: .55; animation-timing-function: cubic-bezier(.4,0,.2,1); }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg.enter, .hero-bg.morph { animation: bannerOut 1.2s ease reverse both; }
  .hero-bg.leave, .hero-bg.blur-out { animation: none; }
  .hero-wash { display: none; }
}
.hero-inner { will-change: opacity, transform; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,30,26,.62) 0%, rgba(10,30,26,.5) 45%, rgba(10,30,26,.78) 100%);
}
.hero-inner { padding-top: calc(120px + var(--header-h)); padding-bottom: 88px; text-align: center; }
.hero h1 { color: #fff; font-size: clamp(34px, 5.6vw, 60px); font-weight: 600; letter-spacing: -.02em; max-width: 820px; margin: 0 auto; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
/* Banner titles in the LSET Foundation style: Google Sans Flex at 900, capitals with 5.5% tracking, and the
   holographic sheen (four pastel hues with white passes, on a 115deg axis) drifting one period every 9s.
   The sheen is a background clipped to the text, so no text-shadow: it would show through the clear letters. */
.hero h1.holo {
  font-family: "Google Sans Flex", "Inter", "Noto Sans Arabic", "Noto Sans Devanagari", "Noto Sans SC", "Noto Sans JP", system-ui, sans-serif; font-weight: 900; font-size: clamp(30px, 4.4vw, 62px);
  line-height: 1.12; letter-spacing: .055em; text-transform: uppercase; text-wrap: balance; max-width: 1180px; text-shadow: none;
  background: repeating-linear-gradient(115deg, #ffffff 0px, #bff3ff 60px, #ffffff 120px, #ffc8dc 180px, #ffffff 240px, #ffd9c2 300px, #ffffff 360px, #c8ffe4 420px, #ffffff 480px);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  /* The banner rise, then the sheen: both are animations, so they share one list */
  animation: heroRise 1s cubic-bezier(.33,0,.2,1) var(--rise-delay, 0ms) backwards, titleIridescence 9s linear infinite;
}
/* One period along the gradient's own axis: 480 / sin(115deg) */
@keyframes titleIridescence { to { background-position: 529.62px 0; } }
/* Scripts outside Latin, Greek and Cyrillic: no capitals or wide tracking (they have neither) */
:lang(ar) .hero h1.holo, :lang(hi) .hero h1.holo, :lang(zh) .hero h1.holo, :lang(ja) .hero h1.holo { letter-spacing: 0; line-height: 1.3; }
.wave { display: contents; }
.wave-word { display: inline-block; }
/* The letters move with top, not transform: a transformed letter leaves the clipped sheen and turns invisible */
.wave-ch { position: relative; top: 0; }
@media (prefers-reduced-motion: no-preference) {
  /* After the title has risen into place, a gentle rise and fall runs along it, 24ms a letter */
  .wave-ch { animation: textWave 820ms cubic-bezier(.37,0,.63,1) calc(1000ms + var(--i, 0) * 24ms) both; }
}
@keyframes textWave { 0% { top: 0; } 50% { top: -.05em; } 100% { top: 0; } }
/* Safari: any positioned letter drops out of the clipped sheen and the title disappears, so the letters stay
   unpositioned there and the ripple is skipped; the sheen still runs (-webkit-hyphens matches WebKit only) */
@supports (-webkit-hyphens: none) { .wave-ch { position: static; animation: none; } }
@media (prefers-reduced-motion: reduce) { .hero h1.holo { animation: none; } }
@media (max-width: 374px) { .hero h1.holo { font-size: 25px; } }
.hero-sub { font-size: clamp(17px, 1.8vw, 20px); margin: 20px auto 0; max-width: 640px; color: rgba(255,255,255,.92); text-shadow: 0 1px 12px rgba(0,0,0,.4); }
.hero-search { position: relative; max-width: 760px; margin: 40px auto 0; text-align: left; }
.search-field {
  display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 20px 0 22px;
  background: #fff; border-radius: 999px; box-shadow: var(--shadow-lg);
}
.search-field svg { width: 24px; height: 24px; color: var(--muted); flex: none; }
.search-field input { flex: 1; border: 0; outline: 0; font: inherit; font-size: 17px; color: var(--ink); background: transparent; min-width: 0; }
.search-field input::placeholder { color: var(--muted-2); }
/* Only the guide's own clear button, not the browser's */
.search-field input::-webkit-search-cancel-button, .search-field input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.search-field { position: relative; }
.ph {
  position: absolute; left: 58px; right: 64px; top: 50%; transform: translateY(-50%);
  height: 28px; line-height: 28px; overflow: hidden; pointer-events: none; white-space: nowrap;
  font-size: 17px; color: var(--muted-2); transition: opacity .14s var(--ease);
}
.ph-rot {
  display: inline-block; max-width: calc(100% - 64px); overflow: hidden; text-overflow: ellipsis; vertical-align: top;
  color: var(--muted); font-weight: 500;
  transition: transform .26s var(--ease), opacity .26s var(--ease);
}
.ph-rot.out { transform: translateY(-100%); opacity: 0; }
.ph-rot.enter { transform: translateY(100%); opacity: 0; transition: none; }
.search-field.ph-hidden .ph { opacity: 0; }
.search-clear { border: 0; background: none; cursor: pointer; padding: 6px; color: var(--muted); display: none; }
.search-clear.show { display: block; }
.search-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 20;
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden;
  color: var(--text); display: none; max-height: 420px; overflow-y: auto;
}
.search-results.show { display: block; }
.search-results .sr-head { padding: 14px 22px; font-size: 14px; color: var(--muted-2); border-bottom: 1px solid var(--line); text-align: center; }
.search-results a { display: block; padding: 12px 22px; text-decoration: none; }
.search-results a:hover, .search-results a.active { background: var(--green-tint); }
.search-results .r-title { color: var(--ink); }
.search-results .r-title mark { background: none; color: inherit; font-weight: 700; }
.search-results .r-meta { font-size: 13px; color: var(--muted-2); }
.search-results .empty { padding: 20px 22px; color: var(--muted); }
.hero-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 999px;
  font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; cursor: pointer;
  border: 1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.12); color: #fff; backdrop-filter: blur(6px);
  transition: background .14s var(--ease);
}
.chip:hover { background: rgba(255,255,255,.26); }
.chip svg:not(.drawn-border) { width: 15px; height: 15px; }
/* Banner chips on hover: rise off the photo and settle, with the drawn gradient border (no selected state) */
.chip {
  position: relative; box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: transform .45s cubic-bezier(.4,0,.2,1), box-shadow .45s cubic-bezier(.4,0,.2,1), background .14s var(--ease);
}
.chip:hover {
  transform: translateY(-3px); box-shadow: 0 12px 22px -12px rgba(0,0,0,.55);
  transition: transform .55s cubic-bezier(.34,1.56,.64,1), box-shadow .55s cubic-bezier(.22,.8,.24,1), background .14s var(--ease);
}
.chip:active { transform: translateY(-1px); transition-duration: .12s; }

/* Banner entrance: each item rises, overshoots a touch and settles, one after another.
   Fill mode is backwards only, so once played the chips' hover lift still works. */
.hero h1, .hero-sub, .hero-search, .hero-chips .chip, .hero-meta {
  animation: heroRise 1s cubic-bezier(.33,0,.2,1) var(--rise-delay, 0ms) backwards;
}
.hero h1 { --rise-delay: 120ms; }
.hero-sub { --rise-delay: 260ms; }
.hero-search { --rise-delay: 400ms; }
.hero-chips .chip { --rise-delay: calc(540ms + var(--i, 0) * 70ms); }
.hero-meta { --rise-delay: 940ms; }
/* The leaf flourish from the LSET Foundation banner: same artwork, size and motion, above the title. It rises in
   with the title, then sways from where its stems meet (lower left), building to 3.4deg and dying away. Hidden on narrow screens,
   where the banner is already full, as it is there. */
.hero-leaf { display: block; width: 68px; height: auto; margin: 0 auto 16px; color: #fff; opacity: .9; transform-origin: 4% 58%; filter: drop-shadow(0 1px 8px rgba(0,0,0,.35)); }
@media (prefers-reduced-motion: no-preference) {
  .hero-leaf { animation: leafRiseShake 1800ms 120ms both; }
  .hero-leaf.settled { animation: none; opacity: 1; }
}
@keyframes leafRiseShake {
  0%   { opacity: 0; transform: translateY(16px) rotate(0deg); animation-timing-function: cubic-bezier(.2,0,.3,1); }
  28%  { opacity: 1; transform: translateY(0) rotate(0deg); animation-timing-function: cubic-bezier(.37,0,.63,1); }
  34%  { transform: translateY(0) rotate(-.8deg); }
  41%  { transform: translateY(0) rotate(1.8deg); }
  50%  { transform: translateY(0) rotate(-3deg); }
  59%  { transform: translateY(0) rotate(3.4deg); }
  68%  { transform: translateY(0) rotate(-2.4deg); }
  77%  { transform: translateY(0) rotate(1.5deg); }
  85%  { transform: translateY(0) rotate(-.8deg); }
  93%  { transform: translateY(0) rotate(.3deg); }
  100% { opacity: 1; transform: translateY(0) rotate(0deg); }
}
@media (max-width: 700px) { .hero-leaf { display: none; } }
/* Guide banners: the module's icon above the area label, in the leaf's motion, swaying from its base.
   Material Symbols Rounded at a light weight, from a subset font with only the guides' glyphs. */
@font-face {
  font-family: 'Material Symbols Rounded Guide'; font-style: normal; font-weight: 300; font-display: block;
  src: url('assets/fonts/material-symbols-rounded-guide.woff2') format('woff2');
}
.hero-icon {
  width: fit-content; height: auto; margin: 0 auto 12px; transform-origin: 50% 88%;
  font-family: 'Material Symbols Rounded Guide'; font-weight: 300; font-size: 46px; line-height: 1; letter-spacing: normal;
  text-transform: none; white-space: nowrap; direction: ltr; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
.hero-icon.drawn svg { display: block; width: 46px; height: 46px; }
@keyframes heroRise {
  0%   { opacity: 0; transform: translateY(32px); }
  60%  { opacity: 1; transform: translateY(-5px); }
  80%  { transform: translateY(1.5px); }
  100% { opacity: 1; transform: none; }
}
.hero-meta { margin-top: 36px; font-size: 14px; color: rgba(255,255,255,.75); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; }
.hero-meta > span:not(.hero-meta-sep) { display: inline-flex; align-items: center; gap: 8px; }
.hero-meta svg { width: 18px; height: 18px; flex: none; color: #8FE3AE; }
.hero-meta-sep { opacity: .6; }
@media (max-width: 640px) {
  .hero-inner { padding-top: 220px; padding-bottom: 48px; }
  /* The photo is a 360px band across the top, always the full width: wide photos are cut at the sides as before,
     and squarer ones (the art tiger) are scaled up to fill it instead of leaving dark bars beside them */
  .hero-bg { bottom: auto; height: 360px; background-position: var(--x, 68%) var(--y, 30%); background-size: cover; background-color: #1b2a1f; }
  .hero::after { background: linear-gradient(180deg, rgba(10,30,26,0) 0px, rgba(10,30,26,.1) 200px, rgba(18,34,26,1) 360px); }
  .search-field { height: 56px; }
  .search-field input { font-size: 16px; }
  .ph { font-size: 16px; right: 20px; }
  .chip { height: 32px; padding: 0 12px; font-size: 12px; }
}

/* ---------- Value grid ---------- */
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.value-card { padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: border-color .14s, box-shadow .2s var(--ease); }
.value-card:hover { border-color: var(--outline); box-shadow: var(--shadow); }
.value-card .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--green-tint); color: var(--green-strong); margin-bottom: 18px; }
.value-card .ic svg { width: 22px; height: 22px; }
.value-card h3 { font-size: 19px; margin-bottom: 8px; }
.value-card p { color: var(--muted); font-size: 15px; }
@media (max-width: 900px) { .value-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .value-grid { grid-template-columns: 1fr; gap: 12px; } .value-card { padding: 22px; } }

/* ---------- Outcomes: four tinted cards, a big number beside each ---------- */
.outcome-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.outcome-card { position: relative; display: flex; gap: 28px; padding: 32px 84px 32px 28px; min-height: 220px; border-radius: var(--radius-lg); background: linear-gradient(135deg, #F4FBF6 0%, #E3F5EA 55%, #D9F3EF 100%); }
.outcome-card:nth-child(2) { background: linear-gradient(135deg, #DDF4E4 0%, #C6EBD2 50%, #B8E6DF 100%); }
.outcome-card:nth-child(3) { background: linear-gradient(135deg, #EEF3F5 0%, #E1EAEE 50%, #D7E6EC 100%); }
.outcome-card:nth-child(4) { background: linear-gradient(135deg, #FDF2EE 0%, #FBE5DD 55%, #F8DCD6 100%); }
.outcome-ic { position: absolute; top: 24px; right: 24px; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.7); color: #1F415B; }
.outcome-ic svg { width: 24px; height: 24px; }
.outcome-no {
  flex: none; width: 76px; font-size: 48px; font-weight: 800; line-height: 1.06; letter-spacing: -.03em; color: #1F415B;
  background: linear-gradient(135deg, #37BD69 0%, #1F415B 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; align-self: flex-start;
}
.outcome-card h3 { font-size: 20px; color: #1F415B; margin: 4px 0 10px; }
.outcome-card p { color: var(--muted); font-size: 15px; }
@media (max-width: 760px) {
  .outcome-grid { grid-template-columns: 1fr; gap: 12px; }
  .outcome-card { min-height: 0; padding: 24px 68px 24px 20px; gap: 18px; }
  .outcome-ic { top: 20px; right: 16px; width: 38px; height: 38px; border-radius: 10px; }
  .outcome-ic svg { width: 21px; height: 21px; }
  .outcome-no { width: 52px; font-size: 36px; }
}

/* ---------- Kit sections: Objective, What is Antz, Getting Started ---------- */
.kit-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: start; }
.kit-photo-left { grid-template-columns: .85fr 1.15fr; }
.kit-copy .section-lede { margin-bottom: 28px; }
.kit-media { margin: 0; }
.kit-photo { align-self: stretch; }
.kit-photo img { width: 100%; height: 100%; min-height: 420px; max-height: 620px; object-fit: cover; border-radius: var(--radius-lg); }
.kit-device { display: grid; place-items: center; padding: 40px 24px; border-radius: var(--radius-lg); background: linear-gradient(160deg, var(--mint), #fff); }
.kit-label { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.kit-cards { display: grid; gap: 14px; }
.kit-cards.two { grid-template-columns: repeat(2, 1fr); }
.kit-card { padding: 20px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); }
.kit-card .ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--green-tint); color: var(--green-strong); margin-bottom: 12px; }
.kit-card .ic svg { width: 19px; height: 19px; }
.kit-card h3 { font-size: 16px; margin-bottom: 6px; }
.kit-card p { font-size: 14px; color: var(--muted); }
.kit-cards.compact .kit-card { padding: 16px 18px; }
.kit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.kit-list li { display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: start; padding: 14px 16px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); font-size: 14.5px; color: var(--muted); }
.kit-list .ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--green-tint); color: var(--green-strong); }
.kit-list .ic svg { width: 19px; height: 19px; }
.kit-list b { display: block; color: var(--ink); font-weight: 600; font-size: 15px; margin-bottom: 2px; }
/* The last card on the Getting Started page leads into the full guide: the same card, as a link, with an arrow */
/* Module pages: the last feature card leads into the module's full guide */
.mfeat-link { text-decoration: none; color: inherit; }
.mfeat-more .mfeat .t b { color: var(--tint-ink); }
.mfeat-more .mfeat-open svg { width: 14px; height: 14px; transition: transform .4s cubic-bezier(.22,.8,.24,1); }
.mfeat-more:hover .mfeat-open svg { transform: translate(2px, -2px); }
/* More saturated than the feature cards: the area's full page gradient, the icon and arrow filled in the area's deeper tones */
.mpage .mfeat-row.mfeat-more, .mpage .mfeat-row.mfeat-more:hover {
  background: linear-gradient(135deg, color-mix(in srgb, var(--tint-line) 14%, var(--tint)) 0%, color-mix(in srgb, var(--tint-line2) 14%, var(--tint-comp)) 100%);
}
.mpage .mfeat-more .mfeat .n { color: #fff; background: linear-gradient(135deg, var(--tint-line) 0%, var(--tint-line) 25%, var(--tint-line2) 100%); }
.mpage .mfeat-more .mfeat-open, .mpage .mfeat-row.mfeat-more:hover .mfeat-open { color: #fff; background: linear-gradient(135deg, var(--tint-line) 0%, var(--tint-line2) 100%); }
.mpage .mfeat-more .mfeat .t small { color: color-mix(in srgb, var(--tint-ink) 70%, var(--muted)); }
.kit-list .kit-more { display: block; padding: 0; transition: transform .45s cubic-bezier(.4,0,.2,1), box-shadow .45s cubic-bezier(.4,0,.2,1), border-color .3s var(--ease); }
.kit-more a { display: grid; grid-template-columns: 38px 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: inherit; color: inherit; text-decoration: none; }
.kit-more b { color: var(--green-strong); }
.kit-more .go { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--green-strong); background: var(--green-tint); }
.kit-more .go svg { transition: transform .4s cubic-bezier(.22,.8,.24,1); }
.kit-list .kit-more:hover, .kit-list .kit-more:focus-within { transform: translateY(-3px); border-color: color-mix(in srgb, var(--green) 45%, #fff); box-shadow: 0 12px 22px -14px rgba(14,40,34,.4);
  transition: transform .55s cubic-bezier(.34,1.56,.64,1), box-shadow .55s cubic-bezier(.22,.8,.24,1), border-color .3s var(--ease); }
.kit-more:hover .go svg { transform: translate(2px, -2px); }
@media (prefers-reduced-motion: reduce) { .kit-list .kit-more, .kit-more .go svg { transition: none; } .kit-list .kit-more:hover { transform: none; } }
/* Saturated like the module pages' Know more card, in Getting Started's colours (the Records & Communication gradient) */
.kit-list .kit-more { border-color: transparent;
  background: linear-gradient(135deg, color-mix(in srgb, #2FA864 14%, #BFF3D2) 0%, color-mix(in srgb, #E06C78 14%, #FFD3D3) 100%); }
.kit-list .kit-more:hover, .kit-list .kit-more:focus-within { border-color: transparent; }
.kit-more .ic { color: #fff; background: linear-gradient(135deg, #2FA864 0%, #2FA864 25%, #E06C78 100%); }
.kit-more b { color: #1D6B43; }
.kit-more a > span:nth-child(2) { color: color-mix(in srgb, #1D6B43 70%, var(--muted)); }
.kit-more .go { color: #fff; background: linear-gradient(135deg, #2FA864 0%, #E06C78 100%); }
@media (max-width: 900px) {
  .kit-split, .kit-photo-left { grid-template-columns: 1fr; gap: 32px; }
  .kit-photo img { min-height: 0; aspect-ratio: 4 / 3; max-height: none; }
  .kit-device { padding: 28px 16px; }
}
@media (max-width: 560px) { .kit-cards.two { grid-template-columns: 1fr; } }

/* ---------- Spotlight (feature + phone) ---------- */
.spotlight { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.tag-new { display: inline-block; font-size: 13px; font-weight: 500; padding: 4px 10px; border-radius: 6px; background: var(--mint); color: var(--teal); margin-bottom: 16px; }
.spotlight h2 { font-size: clamp(28px, 3.6vw, 40px); }
.spotlight .lede { font-size: 18px; color: var(--muted); margin: 14px 0 28px; }
.spot-feats { margin-bottom: 26px; }
.spot-feats .mfeats { margin: 0; }
.stage-device .device { cursor: default; }
.steps { list-style: none; margin: 0 0 28px; padding: 0; counter-reset: step; }
.step {
  position: relative; display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: start;
  padding: 14px 16px; border-radius: 12px; cursor: pointer; border: 1px solid transparent;
  transition: background .14s var(--ease), border-color .14s var(--ease);
}
.step:hover { background: var(--surface-soft); }
.step[aria-selected="true"] { background: #fff; border-color: var(--outline); box-shadow: var(--shadow-sm); }
.step .n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 600; background: var(--mint); color: var(--teal); }
.step[aria-selected="true"] .n { background: var(--green); color: #fff; }
.step h3 { font-size: 16px; font-weight: 600; margin-top: 5px; }
.step p { font-size: 14px; color: var(--muted); margin-top: 4px; display: none; }
.step[aria-selected="true"] p { display: block; }
/* The workflow's screen on a box in its area's page gradient, rounded like the Getting Started panel */
.stage {
  position: relative; display: grid; place-items: center; min-height: 600px; padding: 40px 24px; border-radius: var(--radius-lg);
  background:
    linear-gradient(to bottom right, var(--tint) 0%, var(--tint-comp) 100%);
}
@media (max-width: 900px) {
  .spotlight { grid-template-columns: 1fr; gap: 40px; }
  .stage { min-height: 520px; order: -1; padding: 28px 16px; }
}

/* ---------- Device frames ---------- */
.device { position: relative; z-index: 1; }
.device img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* Bare screens: no bezel, just rounded corners, a hairline edge and the lift shadow */
/* Places with no area (start-here pages and cards) frame their screens in the brand green */
.kitpage, .bento { --tint-line: #0B7A40; --tint-line2: #005A2C; }
/* Getting Started (home card, summary page, guide) sits on the Records & Communication gradient, so its bezels take that gradient's deeper tones */
.bento-getting-started, #first-day { --tint-line: #2FA864; --tint-line2: #E06C78; }
#first-day .kit-device { background: linear-gradient(to bottom right, #BFF3D2 0%, #FFD3D3 100%); }
/* Screens without a frame of their own get the same green phone body as the framed captures:
   a coloured rim around a thin dark edge. The rim is a fixed 7px (10px on tablets): padding percentages
   follow the surrounding box, which made frames thicker in wider panels */
.device-phone {
  width: 272px; aspect-ratio: 9 / 19.2; padding: 8px; border-radius: 15% / 7%;
  /* The area's own colours (as on its icon badges); pages without an area keep the brand green */
  background: linear-gradient(145deg, var(--tint-line, #0B7A40) 0%, var(--tint-line, #006D35) 40%, var(--tint-line2, #005A2C) 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.28), inset 0 1px 1px rgba(255,255,255,.18), var(--shadow-lg);
}
/* A 4px black gutter between the coloured bezel and the screen, on every app screen */
.device-phone .screen { position: relative; width: 100%; height: 100%; border-radius: 13.5% / 6.3%; overflow: hidden; background: #000; box-shadow: 0 0 0 4px #000; }

.device-framed { width: 272px; filter: drop-shadow(0 30px 40px rgba(14,23,21,.3)); }
.device-framed img { height: auto; border-radius: 34px; }
.device-tablet {
  width: min(460px, 100%); aspect-ratio: 3 / 4; padding: 11px; border-radius: 28px;
  /* The area's own colours (as on its icon badges); pages without an area keep the brand green */
  background: linear-gradient(145deg, var(--tint-line, #0B7A40) 0%, var(--tint-line, #006D35) 40%, var(--tint-line2, #005A2C) 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.28), inset 0 1px 1px rgba(255,255,255,.18), var(--shadow-lg);
}
.device-tablet .screen { position: relative; width: 100%; height: 100%; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 0 0 4px #000; }
/* Web screens: a browser window in the same area-coloured bezel as the tablets, with the 4px black gutter */
.device-web {
  width: min(620px, 100%); padding: 9px; border-radius: 20px;
  background: linear-gradient(145deg, var(--tint-line, #0B7A40) 0%, var(--tint-line, #006D35) 40%, var(--tint-line2, #005A2C) 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.28), inset 0 1px 1px rgba(255,255,255,.18), var(--shadow-lg);
}
.device-web .screen { position: relative; border-radius: 11px; overflow: hidden; background: #fff; box-shadow: 0 0 0 4px #000; }
.device-web .bar { height: 30px; background: var(--surface-soft); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 6px; padding: 0 12px; }
.device-web .bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--outline); }
.device-web img { height: auto; }
.screen img, .device-framed img, .device-web img { animation: fade .24s var(--ease); }
/* A scrolling screen: the top bar fixed, the rest scrolling beneath it (no visible scrollbar), a soft fade at
   the bottom while there is more below, and a small "Scroll" cue until the reader scrolls */
.screen.screen-scroll { display: flex; flex-direction: column; background: #fff; }
.screen-scroll .screen-head { flex: none; width: 100%; height: auto; position: relative; z-index: 1; }
.screen-scroll .screen-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; outline: none; }
.screen-scroll .screen-body::-webkit-scrollbar { display: none; }
.screen-scroll .screen-body img { width: 100%; height: auto; }
.screen-scroll::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; pointer-events: none; background: linear-gradient(rgba(255,255,255,0), #fff 85%); transition: opacity .3s; }
.screen-scroll.at-end::after { opacity: 0; }
.screen-cue {
  position: absolute; z-index: 2; left: 50%; bottom: 14px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px 5px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; pointer-events: none;
  color: #fff; background: rgba(16,42,48,.72); backdrop-filter: blur(6px); transition: opacity .35s, transform .35s;
}
.screen-cue::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); animation: cueNudge 1.6s ease-in-out infinite; }
.screen-cue.gone, .screen-scroll.at-end .screen-cue { opacity: 0; transform: translate(-50%, 6px); }
@keyframes cueNudge { 50% { transform: translateY(1px) rotate(45deg); } }
.screen-scroll .screen-body:focus-visible { box-shadow: inset 0 0 0 3px var(--green); }
@media (prefers-reduced-motion: reduce) { .screen-cue::before { animation: none; } }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) { .device-phone, .device-framed { width: 232px; } }

/* ---------- "Start here" cards (under the hero), each opening its own page ---------- */
.bento-section { padding: 64px 0; }
.bento { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.bento-card {
  position: relative; display: flex; align-items: center; min-height: 300px; padding: 44px 48px; border-radius: 16px; overflow: hidden;
  text-decoration: none; color: var(--text); isolation: isolate; box-shadow: 0 1px 2px rgba(14,23,21,.04);
  transition: transform .5s cubic-bezier(.22,.8,.24,1), box-shadow .5s cubic-bezier(.22,.8,.24,1);
}
/* Glass sheen: a soft light pooled in the top-left corner only, fading in on hover (no movement).
   It sits over the photo and gradient but under the text (z-index 0, the copy is z-index 1). */
.bento-card::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(70% 85% at 0% 0%, rgba(255,255,255,.42) 0%, rgba(255,255,255,.16) 30%, rgba(255,255,255,0) 60%);
  opacity: 0; transition: opacity .6s cubic-bezier(.22,.8,.24,1);
}
.bento-card:hover::after, .bento-card:focus-visible::after { opacity: 1; }
/* The deep green Objective card: a slightly softer corner light, and a narrower one as the card is wide */
.bento-objective::after { background: radial-gradient(40% 90% at 0% 0%, rgba(255,255,255,.3) 0%, rgba(255,255,255,.11) 30%, rgba(255,255,255,0) 60%); }
.bento-card:hover, .bento-card:focus-visible { transform: translateY(-4px); box-shadow: 0 26px 50px -24px rgba(14,40,34,.42), 0 2px 6px rgba(14,23,21,.05); }
.bento-copy { position: relative; z-index: 1; display: flex; flex-direction: column; max-width: 540px; }
.bento-card .eyebrow { margin-bottom: 10px; }
.bento-title { font-size: clamp(28px, 3vw, 40px); font-weight: 800; letter-spacing: -.025em; line-height: 1.12; color: var(--ink); }
.bento-text { margin-top: 14px; font-size: 16.5px; line-height: 1.6; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bento-more { margin-top: 20px; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: var(--green-strong); }
.bento-more svg { transition: transform .3s var(--ease); }
.bento-card:hover .bento-more svg { transform: translate(2px, -2px); }
/* The section's photo fills the card's right side and melts into the card colour */
.bento-media {
  position: absolute; top: 0; right: 0; bottom: 0; width: 48%; z-index: 0; background: center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%); mask-image: linear-gradient(90deg, transparent 0%, #000 42%);
  transition: transform .8s cubic-bezier(.22,.8,.24,1);
}
.bento-card:hover .bento-media { transform: scale(1.04); }

/* Objective: full width, deep brand green */
.bento-objective { grid-column: 1 / -1; min-height: 320px; background: linear-gradient(115deg, #1F5A34 0%, #2A7444 48%, #2F6F6E 100%); }
.bento-objective .bento-media { width: 52%; opacity: .92; }
.bento-objective .eyebrow { color: #FFB39F; }
.bento-objective .bento-title { color: #fff; }
.bento-objective .bento-text { color: rgba(255,255,255,.86); }
.bento-objective .bento-more { color: #8FE3AE; }
/* The platform: the Animal Records & Movement page gradient (warm yellow to aqua, top left to bottom right) */
.bento-platform { background: linear-gradient(to bottom right, #FFF5BF 0%, #BFF5F2 100%); }
.bento-platform .bento-copy { max-width: 56%; }
/* Getting started: the Records & Communication diagonal (mint to blush) so it stands out, with the app's home screen rising from the corner */
.bento-getting-started { align-items: flex-start; background: linear-gradient(to bottom right, #BFF3D2 0%, #FFD3D3 100%); }
.bento-getting-started .bento-copy { max-width: 62%; }
.bento-getting-started .bento-more { color: #B4573C; }
.bento-phone { position: absolute; right: -28px; bottom: -150px; width: 176px; z-index: 0; transform: rotate(-8deg); transition: transform .6s cubic-bezier(.22,.8,.24,1); }
.bento-phone .device-phone, .bento-phone .device-framed { width: 176px; }
.bento-card:hover .bento-phone { transform: rotate(-5deg) translateY(-14px); }
.bento-platform .bento-title, .bento-getting-started .bento-title {
  width: fit-content; background: linear-gradient(135deg, #37BD69 0%, #1F415B 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.bento-getting-started .bento-title { background-image: linear-gradient(135deg, #D9775A 0%, #8C4A37 100%); }
@media (max-width: 1000px) {
  .bento-card { padding: 36px; }
  .bento-getting-started .bento-copy { max-width: 70%; }
}
@media (max-width: 760px) {
  .bento-section { padding: 40px 0; }
  .bento { grid-template-columns: 1fr; gap: 14px; }
  .bento-card { flex-direction: column; align-items: stretch; min-height: 0; padding: 28px 24px 0; border-radius: 14px; }
  .bento-copy, .bento-platform .bento-copy { max-width: none; padding-bottom: 24px; }
  .bento-text { font-size: 15.5px; }
  /* Photos sit under the text on phones, fading in from the top */
  .bento-media, .bento-objective .bento-media { position: relative; width: auto; height: 170px; margin: 0 -24px; flex: none;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%); mask-image: linear-gradient(180deg, transparent 0%, #000 45%); }
  .bento-getting-started { min-height: 290px; }
  .bento-getting-started .bento-copy { max-width: 62%; }
  .bento-phone { right: -24px; bottom: -120px; width: 150px; }
  .bento-phone .device-phone, .bento-phone .device-framed { width: 150px; }
}
@media (prefers-reduced-motion: reduce) { .bento-card, .bento-media, .bento-phone { transition: none; } .bento-card:hover { transform: none; } }

/* Kit pages: tabs to move between the three, then the section as it was on the home page */
.kitpage { padding-top: calc(var(--header-h) + 24px); }
/* Pages whose section has the soft grey background carry it up behind the tabs too */
.kitpage.soft { background: var(--surface-soft); }
.kit-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 6px; --tint-line: var(--green); }
/* Kit page tabs look and move exactly like the home page category chips */
.kit-tabs .kit-tab { height: 40px; padding: 0 16px; background: #fff; border-color: var(--outline); font-size: 14.5px; color: var(--ink); }
.kit-tabs .kit-tab::before { background: linear-gradient(110deg, #61D3C7 0%, #62BA71 100%); }
.kit-tabs .kit-tab > .drawn-border path { stroke: url(#mcard-grad); }
.kit-tabs .kit-tab[aria-current] { color: #fff; }
.kitpage .kit-section:first-of-type, .kitpage > .section { padding-top: 48px; }
.kitpage { padding-bottom: 88px; }
.kitpage .mpager { border-top-color: var(--line); margin: 0; }
/* Kit page content eases in, rises past its place a touch and settles (the banner's heroRise), top to bottom.
   Each part waits hidden until it scrolls into view (observeReveal adds .in). */
.kitpage .kit-media.reveal, .kitpage .kit-copy.reveal > *, .kitpage .kit-card, .kitpage .kit-list li,
.kitpage .section-head.reveal > *, .kitpage .timeline li.reveal { --rise-delay: 0ms; }
.kitpage .kit-media.reveal:not(.in), .kitpage .kit-copy.reveal:not(.in) > *,
.kitpage .section-head.reveal:not(.in) > *, .kitpage .timeline li.reveal:not(.in) { opacity: 0; }
.kitpage .kit-media.reveal.in, .kitpage .kit-copy.reveal.in > *, .kitpage .kit-copy.reveal.in .kit-card,
.kitpage .kit-copy.reveal.in .kit-list li, .kitpage .section-head.reveal.in > *, .kitpage .timeline li.reveal.in {
  animation: heroRise 1s cubic-bezier(.33,0,.2,1) var(--rise-delay) backwards;
}
.kitpage .kit-media.reveal { --rise-delay: 60ms; }
.kitpage .kit-copy.reveal > :nth-child(1) { --rise-delay: 120ms; }
.kitpage .kit-copy.reveal > :nth-child(2) { --rise-delay: 220ms; }
.kitpage .kit-copy.reveal > :nth-child(3) { --rise-delay: 320ms; }
.kitpage .kit-copy.reveal > :nth-child(4) { --rise-delay: 420ms; }
.kitpage .kit-copy.reveal > :nth-child(n+5) { --rise-delay: 480ms; }
/* Cards and list rows inside the copy follow one after another */
.kitpage .kit-copy.reveal.in .kit-cards, .kitpage .kit-copy.reveal.in .kit-list { animation: none; }
.kitpage .kit-card:nth-child(1), .kitpage .kit-list li:nth-child(1) { --rise-delay: 500ms; }
.kitpage .kit-card:nth-child(2), .kitpage .kit-list li:nth-child(2) { --rise-delay: 580ms; }
.kitpage .kit-card:nth-child(3), .kitpage .kit-list li:nth-child(3) { --rise-delay: 660ms; }
.kitpage .kit-card:nth-child(4), .kitpage .kit-list li:nth-child(4) { --rise-delay: 740ms; }
.kitpage .kit-card:nth-child(n+5), .kitpage .kit-list li:nth-child(n+5) { --rise-delay: 820ms; }
.kitpage .section-head.reveal > :nth-child(2) { --rise-delay: 100ms; }
.kitpage .timeline li.reveal:nth-child(2) { --rise-delay: 100ms; }
.kitpage .timeline li.reveal:nth-child(3) { --rise-delay: 200ms; }
.kitpage .timeline li.reveal:nth-child(4) { --rise-delay: 300ms; }
@media (max-width: 640px) { .kit-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter) 6px; } .kitpage { padding-bottom: 56px; } }

/* ---------- Module cards (under the hero) ---------- */
/* Area tints, from the area gradients (Figma, top-left to bottom-right):
   --tint → --tint-comp is the area's page gradient at full strength (page bands, screen stages, icon tiles);
   --tint-soft / --tint-soft2 are the same gradient washed towards white (cards, bars, hovers);
   --tint-line → --tint-line2 are deeper tones of the same two hues (device bezels, icon badges, outlines, dots);
   --tint-ink is text in the area colour. */
.tint-records    { --tint: #BFF3D2; --tint-comp: #FFD3D3; --tint-line: #2FA864; --tint-line2: #E06C78; --tint-ink: #1D6B43; --line-grad: url(#line-records); }
.tint-animal     { --tint: #FFF5BF; --tint-comp: #BFF5F2; --tint-line: #D39B10; --tint-line2: #17A8A0; --tint-ink: #6E5608; --line-grad: url(#line-animal); }
.tint-medical    { --tint: #D3F3D7; --tint-comp: #FBF7D2; --tint-line: #4DB3A6; --tint-line2: #C8BC6A; --tint-ink: #2A6A62; --line-grad: url(#line-medical); }
.tint-mortality  { --tint: #FFF5BF; --tint-comp: #FFD3D3; --tint-line: #D6920E; --tint-line2: #DD5F6B; --tint-ink: #8A4424; --line-grad: url(#line-mortality); }
.tint-operations { --tint: #BFEBF5; --tint-comp: #F9CCD4; --tint-line: #2C94BC; --tint-line2: #DD647D; --tint-ink: #1E5D77; --line-grad: url(#line-operations); }
.tint-guide      { --tint: #BFF3D2; --tint-comp: #FFD3D3; --tint-line: #2FA864; --tint-line2: #E06C78; --tint-ink: #1D6B43; --line-grad: url(#line-records); } /* The Getting Started guide: the Records & Communication gradient, as on its home card */
[class*="tint-"] {
  --tint-soft: color-mix(in srgb, var(--tint) 32%, #fff); --tint-soft2: color-mix(in srgb, var(--tint-comp) 32%, #fff);
  --tint-grad: linear-gradient(135deg, var(--tint) 0%, var(--tint-comp) 100%);
  --tint-grad-soft: linear-gradient(135deg, var(--tint-soft) 0%, var(--tint-soft2) 100%);
}

.modules-section { padding: 80px 0 72px; background: linear-gradient(115deg, #EAFAF9 0%, #F3F4F1 50%, #FAEEEA 100%); }
.modules-head { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 64px; align-items: end; margin-bottom: 28px; }
.modules-head .section-lede { margin: 0; justify-self: end; max-width: 460px; }
/* Main titles: extra-bold with a diagonal green-to-deep-teal gradient fill (titles on photos stay white) */
.section-title, .spotlight h2 {
  font-weight: 800; letter-spacing: -.025em; width: fit-content;
  background: linear-gradient(135deg, #37BD69 0%, #1F415B 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #1F415B;
  padding-bottom: .06em;
}
.section-head.center .section-title { margin-left: auto; margin-right: auto; }

.mfilters {
  position: sticky; top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; scrollbar-width: none;
  padding: 12px 0; margin-bottom: 20px; background: rgba(243,244,241,.72); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
}
.mfilters::-webkit-scrollbar { display: none; }
.mfilter {
  flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--outline); background: #fff; color: var(--ink); font-size: 14.5px; font-weight: 500; cursor: pointer;
  box-shadow: 0 0 0 rgba(14,40,34,0);
  /* Leaving: settle back down smoothly */
  transition: transform .45s cubic-bezier(.4,0,.2,1), box-shadow .45s cubic-bezier(.4,0,.2,1),
              background .14s var(--ease), border-color .14s var(--ease), color .14s var(--ease);
}
/* Hover: rise off the surface, overshoot slightly, then settle */
.mfilter:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px -10px rgba(14,40,34,.35), 0 2px 4px rgba(14,40,34,.06);
  transition: transform .55s cubic-bezier(.34,1.56,.64,1), box-shadow .55s cubic-bezier(.22,.8,.24,1),
              background .14s var(--ease), border-color .14s var(--ease), color .14s var(--ease);
}
.mfilter:active { transform: translateY(-1px); transition-duration: .12s; }
.mfilter { position: relative; isolation: isolate; }
/* Selected fill: a wash that sweeps in from the left on click, and drains back to the left when deselected */
.mfilter::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;
  background: linear-gradient(110deg, #61D3C7 0%, #62BA71 100%); /* teal to green, sampled from the brand swatch */
  clip-path: inset(0 100% 0 0 round 999px);
  transition: clip-path .5s cubic-bezier(.65,0,.35,1);
}
.mfilter[aria-pressed="true"]::before, .msubtab[aria-current]::before { clip-path: inset(0 0 0 0 round 999px); transition: clip-path .6s cubic-bezier(.65,0,.35,1); }
.mfilter svg:not(.drawn-border) { width: 15px; height: 15px; color: var(--green-strong); }
.mfilter span { font-size: 12px; font-weight: 600; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.mfilter svg:not(.drawn-border), .mfilter span { transition: color .35s var(--ease); }
/* Text turns light as the wash passes under it */
.mfilter[aria-pressed="true"], .msubtab[aria-current] { color: #fff; transition: transform .45s cubic-bezier(.4,0,.2,1), box-shadow .45s cubic-bezier(.4,0,.2,1), color .3s var(--ease) .18s; }
.mfilter[aria-pressed="true"]:hover, .msubtab[aria-current]:hover { transition: transform .55s cubic-bezier(.34,1.56,.64,1), box-shadow .55s cubic-bezier(.22,.8,.24,1), color .3s var(--ease) .18s; }
.mfilter[aria-pressed="true"] svg:not(.drawn-border), .mfilter[aria-pressed="true"] span, .msubtab[aria-current] span { color: #E4F8EC; transition: color .3s var(--ease) .18s; }

.mgroup { margin-bottom: 48px; }
.mgroup[hidden] { display: none; }
.mgroup-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.mgroup-head .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--tint-grad); color: var(--tint-ink); }
.mgroup-head .ic svg { width: 18px; height: 18px; }
.mgroup-head h3 { font-size: 20px; }
.mgroup-head .count { font-size: 14px; color: var(--muted-2); margin-left: 2px; }

.mgrid { --mgap: 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--mgap); }

.mcard { position: relative; }
/* Soft rise: a quiet fade-up, staggered left to right */
.mcard.pending { opacity: 0; }
.mcard.deal { animation: cardRise .6s cubic-bezier(.22,.8,.24,1) var(--deal-delay, 0ms) both; }
@keyframes cardRise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.mcard-face {
  position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; text-align: left; padding: 0; cursor: pointer;
  background: #fff; border: 0; border-radius: 18px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(14,23,21,.04);
  transition: transform .5s cubic-bezier(.22,.8,.24,1), box-shadow .5s cubic-bezier(.22,.8,.24,1);
}
.mcard-face:hover, .mcard-face:focus-visible { transform: translateY(-4px); box-shadow: 0 22px 44px -22px rgba(14,40,34,.38), 0 2px 6px rgba(14,23,21,.05); }
.mcard-face:focus-visible { outline: none; }
/* Holographic mesh, from the LSET Foundation site's content area: eight pastel blobs, each circling its own
   small orbit at its own phase, so the wash turns rather than slides. It sits on a layer under the card's
   content and appears only while the card is hovered or focused; at rest the card keeps its usual face.
   Leaving pauses the turn where it is, so the next hover picks up from there instead of jumping back. */
@property --mesh-turn { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.mcard-face { isolation: isolate; }
.mcard-face::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  /* How strong the wash is: 1 is the Foundation site's full strength */
  --mesh-strength: .45;
  background-color: #fff; background-repeat: no-repeat;
  background-image:
    radial-gradient(ellipse 47% 55% at calc(18% + 15% * cos(var(--mesh-turn) + 0deg)) calc(26% + 15% * sin(var(--mesh-turn) + 0deg)), rgb(191 243 255 / calc(70% * var(--mesh-strength))), rgb(191 243 255 / 0%) 100%),
    radial-gradient(ellipse 47% 55% at calc(76% + 14% * cos(var(--mesh-turn) + 68deg)) calc(16% + 14% * sin(var(--mesh-turn) + 68deg)), rgb(255 200 220 / calc(70% * var(--mesh-strength))), rgb(255 200 220 / 0%) 100%),
    radial-gradient(ellipse 47% 55% at calc(88% + 17% * cos(var(--mesh-turn) + 155deg)) calc(66% + 17% * sin(var(--mesh-turn) + 155deg)), rgb(255 217 194 / calc(70% * var(--mesh-strength))), rgb(255 217 194 / 0%) 100%),
    radial-gradient(ellipse 47% 55% at calc(26% + 15% * cos(var(--mesh-turn) + 232deg)) calc(82% + 15% * sin(var(--mesh-turn) + 232deg)), rgb(200 255 228 / calc(70% * var(--mesh-strength))), rgb(200 255 228 / 0%) 100%),
    radial-gradient(ellipse 47% 55% at calc(52% + 10% * cos(var(--mesh-turn) + 310deg)) calc(46% + 10% * sin(var(--mesh-turn) + 310deg)), rgb(191 243 255 / calc(49% * var(--mesh-strength))), rgb(191 243 255 / 0%) 100%),
    radial-gradient(ellipse 47% 55% at calc(60% + 15% * cos(var(--mesh-turn) + 110deg)) calc(88% + 15% * sin(var(--mesh-turn) + 110deg)), rgb(255 252 204 / calc(70% * var(--mesh-strength))), rgb(255 252 204 / 0%) 100%),
    radial-gradient(ellipse 47% 55% at calc(8% + 14% * cos(var(--mesh-turn) + 285deg)) calc(56% + 14% * sin(var(--mesh-turn) + 285deg)), rgb(255 227 248 / calc(70% * var(--mesh-strength))), rgb(255 227 248 / 0%) 100%),
    radial-gradient(ellipse 47% 55% at calc(46% + 15% * cos(var(--mesh-turn) + 195deg)) calc(6% + 15% * sin(var(--mesh-turn) + 195deg)), rgb(204 228 255 / calc(70% * var(--mesh-strength))), rgb(204 228 255 / 0%) 100%);
  opacity: 0; transition: opacity .5s ease;
}
.mcard-face:hover::before, .mcard-face:focus-visible::before { opacity: 1; }
@keyframes meshTurn { to { --mesh-turn: 360deg; } }
@media (prefers-reduced-motion: no-preference) {
  .mcard-face::before { animation: meshTurn 10s linear infinite paused; }
  .mcard-face:hover::before, .mcard-face:focus-visible::before { animation-play-state: running; }
  /* Neighbouring cards start at different points of the turn */
  .mcard:nth-child(4n+2) .mcard-face::before { animation-delay: -3s; }
  .mcard:nth-child(4n+3) .mcard-face::before { animation-delay: -6s; }
  .mcard:nth-child(4n+4) .mcard-face::before { animation-delay: -8s; }
  .ggrid > .mcard-face:nth-child(odd)::before { animation-delay: -4s; }
}
/* The resting 1px edge sits under the drawn border, so the drawn line covers it completely */
.mcard-face::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; border: 1px solid var(--line); pointer-events: none; }

/* Photo with the module icon */
/* Photo inset by a 15px gutter, with a radius that sits inside the card's 18px corner */
.mcard-thumb { position: relative; display: block; height: 172px; margin: 15px 15px 0; border-radius: 11px; overflow: hidden; background: var(--teal-deep); isolation: isolate; }
.mcard-bg {
  position: absolute; inset: 0; background-size: cover; background-repeat: no-repeat;
  transform: scaleX(var(--flip, 1)) scale(1.02); transition: transform 1.4s cubic-bezier(.2,.7,.2,1), filter .6s cubic-bezier(.65,0,.35,1);
}
/* Hover or keyboard focus (and the selected card): the photo softens behind the icon */
.mcard.active .mcard-bg, .mcard-face:focus-visible .mcard-bg { filter: blur(3px); }
@media (hover: hover) and (pointer: fine) { .mcard-face:hover .mcard-bg { filter: blur(3px); } }
.mcard-face:hover .mcard-bg, .mcard-face:focus-visible .mcard-bg, .mcard.active .mcard-bg { transform: scaleX(var(--flip, 1)) scale(1.09); }
.mcard-thumb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,26,22,.10) 0%, rgba(8,26,22,.18) 45%, rgba(8,26,22,.72) 100%);
}
.mcard-icon {
  position: absolute; left: 18px; bottom: 16px; z-index: 1; width: 46px; height: 46px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.45));
  --icon: 46px; --icon-x: 18px; --icon-y: 16px;
  transition: transform .6s cubic-bezier(.22,.8,.24,1), left .6s cubic-bezier(.65,0,.35,1), bottom .6s cubic-bezier(.65,0,.35,1);
}
/* Hover or keyboard focus (and the selected card): the icon eases to the centre of the photo, grows 25%,
   then settles like rubber. Mouse and trackpad only for hover, so a tap on a phone just opens the module. */
.mcard.active .mcard-icon, .mcard-face:focus-visible .mcard-icon {
  left: calc(50% - var(--icon) / 2); bottom: calc(50% - var(--icon) / 2); transform: scale(1.25);
  animation: iconSettle .95s linear .55s;
}
@media (hover: hover) and (pointer: fine) {
  .mcard-face:hover .mcard-icon {
    left: calc(50% - var(--icon) / 2); bottom: calc(50% - var(--icon) / 2); transform: scale(1.25);
    animation: iconSettle .95s linear .55s;
  }
}
/* Elastic settle: squeeze a little, then spring back like rubber to the enlarged size */
@keyframes iconSettle {
  0%   { transform: scale(1.25); animation-timing-function: cubic-bezier(.4,0,.6,1); }
  22%  { transform: scale(1.02); animation-timing-function: cubic-bezier(.2,.8,.3,1); }
  48%  { transform: scale(1.38); animation-timing-function: cubic-bezier(.4,0,.6,1); }
  64%  { transform: scale(1.18); animation-timing-function: cubic-bezier(.4,0,.6,1); }
  78%  { transform: scale(1.29); animation-timing-function: cubic-bezier(.4,0,.6,1); }
  90%  { transform: scale(1.235); animation-timing-function: cubic-bezier(.4,0,.6,1); }
  100% { transform: scale(1.25); }
}

.mcard-num {
  position: absolute; top: 10px; right: 14px; z-index: 1; font-size: 27px; font-weight: 700; letter-spacing: .02em; line-height: 1;
  color: rgba(255,255,255,.95); font-variant-numeric: tabular-nums;
}

/* Card text on white that fades into a light wash of the area gradient */
.mgroup .mcard-face { background: linear-gradient(180deg, #fff 45%, var(--tint-soft2) 100%); }
.mcard-body { display: flex; flex-direction: column; gap: 5px; padding: 16px 15px 18px; flex: 1; }
.mcard-title { font-size: 17px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.mcard-sum { font-size: 14px; color: var(--muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mcard-foot { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 500; color: var(--muted); }
.mcard-plus {
  position: relative; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-soft); overflow: hidden;
  transition: transform .5s cubic-bezier(.22,.8,.24,1);
}
.mcard-plus { display: grid; place-items: center; color: var(--ink); }
/* The card opens its own page: an arrow that turns white on the green fill and nudges forward on hover */
.mcard-plus svg { position: relative; z-index: 1; display: block; }
.mcard-plus { background-image: linear-gradient(135deg, #37BD69, #00D6C9); background-size: 100% 100%; box-shadow: inset 0 0 0 40px var(--surface-soft); transition: transform .5s cubic-bezier(.22,.8,.24,1), box-shadow .5s cubic-bezier(.22,.8,.24,1), color .3s; }
.mcard-face:hover .mcard-plus, .mcard-face:focus-visible .mcard-plus { box-shadow: inset 0 0 0 0 var(--surface-soft); color: #fff; }
/* On hover the arrow slides out to the right and back in from the left, ending exactly centred */
.mcard-face:hover .mcard-plus svg, .mcard-face:focus-visible .mcard-plus svg { animation: arrowLoop .6s cubic-bezier(.5,0,.25,1); }
@keyframes arrowLoop {
  0%   { transform: none; opacity: 1; }
  45%  { transform: translateX(18px); opacity: 0; }
  46%  { transform: translateX(-18px); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .mcard-plus svg { animation: none !important; } }

/* The drawn border: 4px, #37BD69 to #00D6C9, from the bottom-left corner round and back */
.drawn-border { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; overflow: visible; }
.drawn-border path {
  /* Butt caps: a round cap would leave a dot at the start point when nothing is drawn.
     Dash lengths and offsets are animated from app.js (feathered ends). */
  fill: none; stroke: url(#mcard-grad); stroke-linecap: butt; stroke-linejoin: round;
}
/* Cards use a deeper tone of the area's colour for their drawn border instead of the brand gradient */
.mcard-face > .drawn-border path { stroke: var(--line-grad, var(--tint-line)); }
a.mcard-face { text-decoration: none; color: inherit; }

/* Module page layout (in the style of the old open-card panel): feature list beside the device */
.mpanel-inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: start; }
.mpanel-inner.no-stage { grid-template-columns: 1fr; }
.mpanel-area { display: flex; margin-bottom: 12px; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tint-ink); }
.mpanel-area svg { width: 15px; height: 15px; }
.mpanel-info .mpanel-title { font-size: clamp(30px, 4vw, 44px); margin: 0 0 12px; }
/* Module icon before the panel title, on a badge in the area's gradient */
.mpanel-title { display: flex; align-items: center; gap: 14px; }
.mpanel-icon {
  flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--tint-line) 0%, var(--tint-line) 25%, var(--tint-line2) 100%);
}
.mpanel-icon img { width: 30px; height: 30px; }
@media (max-width: 760px) { .mpanel-icon { width: 40px; height: 40px; border-radius: 12px; } .mpanel-icon img { width: 25px; height: 25px; } .mpanel-title { gap: 12px; } }
.mpanel-intro { color: var(--muted); font-size: 17px; max-width: 640px; margin-bottom: 26px; }
.mfeats { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 6px; }
.mfeat-row { position: relative; display: grid; grid-template-columns: 1fr; align-items: start; background: rgba(255,255,255,.55); border-radius: 12px; border: 1px solid transparent;
  box-shadow: 0 1px 2px rgba(14,23,21,.04);
  transition: background .14s, border-color .14s, transform .5s cubic-bezier(.22,.8,.24,1), box-shadow .5s cubic-bezier(.22,.8,.24,1); }
/* Hover like the home module cards: lift with a soft shadow while the outline draws round, in the area colour */
@media (hover: hover) and (pointer: fine) {
  .mfeat-row:hover { z-index: 1; transform: translateY(-4px); box-shadow: 0 22px 44px -22px rgba(14,40,34,.38), 0 2px 6px rgba(14,23,21,.05); }
}
.mfeat-row > .drawn-border path { stroke: var(--tint-line); }
.mfeat-row:hover { background: rgba(255,255,255,.85); }
.mfeat-row.on { background: #fff; border-color: var(--outline); }
.mfeat { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; text-align: left; padding: 12px 8px 12px 14px; background: none; border: 0; cursor: pointer; width: 100%; }
.mfeat .n {
  /* Selected number takes the panel outline's gradient (per area) */
  --num-grad: linear-gradient(135deg, var(--tint-line) 0%, var(--tint-line) 25%, var(--tint-line2) 100%);
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 600;
  background: #fff; color: var(--tint-ink); border: 1px solid var(--line);
}
.mfeat-row.on .mfeat .n { background: var(--num-grad); border-color: transparent; background-origin: border-box; color: #fff; font-weight: 700; }
/* Each feature's own icon sits in the circle (area colour; white on the gradient when selected) */
.mfeat .n { width: 30px; height: 30px; transition: background .3s, color .3s, border-color .3s; }
.mfeat .n svg { width: 15px; height: 15px; }
.mfeat { grid-template-columns: 32px 1fr; }
.mfeat .t b { display: block; font-size: 15px; font-weight: 600; color: var(--ink); margin-top: 2px; }
.mfeat .t small { display: none; font-size: 14px; color: var(--muted); margin-top: 3px; line-height: 1.45; }
.mfeat-row.on .mfeat .t small { display: block; }
.mpanel-hint { font-size: 13.5px; color: var(--muted-2); }
/* Without screens there is nothing to select, so every description shows */
.no-stage .mfeat .t small { display: block; }
/* The device sits in its own column, top-aligned with the title */
.mpanel-stage { position: relative; display: grid; justify-items: center; }
.mpanel-stage .device-phone, .mpanel-stage .device-framed { width: 260px; }
.mpanel-stage .device-tablet { width: min(380px, 100%); }
.mpanel-stage .cap { margin-top: 14px; font-size: 13.5px; color: var(--muted); text-align: center; }

/* Device rises from below, overshoots a touch, and settles */
.mpanel-stage .device.rise { animation: deviceRise .95s cubic-bezier(.22,.8,.24,1) both; }
@keyframes deviceRise {
  0%   { opacity: 0; transform: translateY(72px); }
  55%  { opacity: 1; }
  72%  { transform: translateY(-6px); }
  100% { opacity: 1; transform: translateY(0); }
}
.mfeat-row > .mpanel-stage { grid-column: 1 / -1; position: static; padding: 4px 0 18px; }

@media (max-width: 1000px) {
  .modules-head { grid-template-columns: 1fr; }
  .modules-head .section-lede { justify-self: start; }
  .mpanel-inner { grid-template-columns: 1fr 260px; gap: 28px; }
  .mpanel-stage .device-phone, .mpanel-stage .device-framed { width: 220px; }
}
@media (max-width: 760px) {
  .modules-section { padding: 56px 0 40px; }
  .mgrid { --mgap: 12px; grid-template-columns: repeat(2, 1fr); }
  .mcard-thumb { height: 118px; margin: 10px 10px 0; border-radius: 9px; }
  .mcard-icon { --icon: 34px; width: 34px; height: 34px; left: 12px; bottom: 12px; }
  .mcard-num { top: 8px; right: 10px; font-size: 25px; }
  .mcard-body { padding: 12px 10px 12px; }
  .mcard-title { font-size: 15px; }
  .mcard-sum { font-size: 13px; }
  .mcard-foot { font-size: 12px; padding-top: 8px; }
  .mcard-plus { width: 28px; height: 28px; }
  .mcard-plus svg { width: 14px; height: 14px; }
  .mcard-face { border-radius: 14px; }
  .mpanel-inner, .mpanel-inner.no-stage { grid-template-columns: 1fr; gap: 0; }
  .mpanel-intro { font-size: 15px; }
  .mpanel-stage .device-phone, .mpanel-stage .device-framed { width: 210px; }
  .mfilter { height: 38px; padding: 0 14px; font-size: 14px; }
  .mfilters { flex-wrap: nowrap; overflow-x: auto; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding-left: var(--gutter); padding-right: var(--gutter); }
  .mgroup-head .count { display: none; }
  .mgroup-head h3 { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .mcard-face, .mcard-bg, .mcard-icon, .mcard-plus, .mfilter, .mfilter::before, .mfilter span, .mfilter svg, .chip { transition: none !important; } .chip:hover { transform: none; } .mcard.active .mcard-icon { animation: none; } .mcard.deal { animation: none; } .mcard.pending { opacity: 1; } .mpanel-stage .device.rise { animation: none; } .mfilter:hover { transform: none; } }


/* ---------- First day timeline ---------- */
.first-day { margin-top: 88px; }
.first-day::before { content: ""; display: block; height: 1px; background: var(--line); margin-bottom: 64px; }
.first-day-title { font-size: clamp(24px, 3vw, 32px); }
@media (max-width: 640px) { .first-day { margin-top: 56px; } .first-day::before { margin-bottom: 44px; } }
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; top: 26px; left: 26px; right: 26px; height: 2px; background: var(--outline); z-index: 0; }
.timeline li { position: relative; z-index: 1; }
.timeline .dot { position: relative; width: 52px; height: 52px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; margin-bottom: 20px; box-shadow: 0 0 0 6px var(--surface-soft); }
.timeline .dot svg { width: 24px; height: 24px; }
.timeline .step-n { color: var(--green-strong); }
.timeline h3 { font-size: 18px; margin-bottom: 8px; }
.timeline p { color: var(--muted); font-size: 15px; }
@media (max-width: 900px) {
  .timeline { grid-template-columns: 1fr; gap: 28px; }
  .timeline::before { top: 26px; bottom: 26px; left: 25px; right: auto; width: 2px; height: auto; }
  .timeline li { display: grid; grid-template-columns: 52px 1fr; gap: 18px; }
  .timeline .dot { margin: 0; }
}

/* ---------- CTA banner ---------- */
.cta { position: relative; color: #fff; isolation: isolate; overflow: hidden; }
.cta-bg { position: absolute; inset: 0; z-index: -2; background: var(--teal) center 40% / cover; }
.cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10,30,26,.82) 0%, rgba(10,30,26,.45) 60%, rgba(10,30,26,.2) 100%); }
.cta-inner { padding: 120px 0; max-width: 560px; }
.cta h2 { color: #fff; font-size: clamp(30px, 4vw, 44px); }
.cta p { font-size: 18px; margin: 16px 0 32px; color: rgba(255,255,255,.9); }
.cta .actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cta .or { margin: 18px 0 0; font-size: 15px; color: rgba(255,255,255,.85); }
.cta [data-depth] { will-change: transform; }
.cta .or b { color: #fff; font-weight: 600; user-select: all; }
@media (max-width: 640px) { .cta-inner { padding: 80px 0; } .cta p { font-size: 16px; } }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative;
  font-size: 18px; font-weight: 500; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq .answer { padding: 0 0 24px; color: var(--muted); font-size: 16px; max-width: 700px; }

/* ---------- Module page ---------- */
/* Full-width band in the area's colour: the colour holds across the top, then melts into a faint complementary hue */
.mpage { --mfilters-h: 0px; padding: calc(28px + var(--header-h)) 0 72px;
  background: linear-gradient(var(--g-angle), var(--tint) 0%, var(--tint-comp) 100%);
  background-color: var(--tint); border-bottom: 1px solid var(--line); }
/* Changing area: the gradient turns from its corner to the opposite one while the new colours blend in,
   then carries on round and settles back where it rests */
@property --g-angle { syntax: '<angle>'; inherits: false; initial-value: 135deg; }
.mpage.area-swap { animation: areaSwap 1.9s both; }
/* An animal from the banner photos, in colour at 25%, washed into the empty lower part of the feature window's white
   text side, a different one for each feature (set from app.js): strongest at the lower left, looking into the panel,
   melting away to the right before the screenshot panel and upwards before the text */
.fwin-info { position: relative; isolation: isolate; }
/* It sits in a band along the bottom, below the text; app.js sets the band (--wash-top) and the photo's size and
   place so the face shows; it fades in upwards from the bottom */
.fwin-info::before {
  content: ""; position: absolute; left: 0; right: 0; top: var(--wash-top, 55%); bottom: 0; z-index: -1; pointer-events: none;
  /* Only animals looking left are mirrored (--area-flip: -1); the fade is mirrored with them (--area-fade) */
  transform: scaleX(var(--area-flip, 1));
  background: var(--area-photo) var(--area-photo-pos, 0 0) / var(--area-photo-size, cover) no-repeat; opacity: .25;
  /* Strongest at the lower left; gone well before the screenshot panel on the right and before the text above */
  -webkit-mask-image: linear-gradient(var(--area-fade, to right), #000 0%, #000 18%, rgba(0,0,0,.45) 50%, transparent 78%), linear-gradient(to top, #000 0%, #000 35%, rgba(0,0,0,.4) 70%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(var(--area-fade, to right), #000 0%, #000 18%, rgba(0,0,0,.45) 50%, transparent 78%), linear-gradient(to top, #000 0%, #000 35%, rgba(0,0,0,.4) 70%, transparent 100%);
  mask-composite: intersect;
}
/* Each new feature's animal fades in */
.animal-in::before { animation: animalIn .9s cubic-bezier(.45,0,.25,1) both; }
@keyframes animalIn { from { opacity: 0; } to { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .animal-in::before { animation: none; } }

@keyframes areaSwap {
  0%   { --g-angle: 135deg; animation-timing-function: cubic-bezier(.55,0,.45,1); }
  50%  { --g-angle: 315deg; animation-timing-function: cubic-bezier(.3,0,.2,1); }
  100% { --g-angle: 495deg; }
}
/* Tabs at the top of a module page: areas (each with a photo from one of its modules), then that area's modules */
.mtabs { margin-bottom: 40px; }
.mtabs-areas { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.mtab {
  /* Outline colours: the area's two deep tones, lightened; the selected outline runs from one to the other */
  --edge: color-mix(in srgb, var(--tint-line) 55%, #fff); --edge2: color-mix(in srgb, var(--tint-line2) 55%, #fff);
  position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px 10px 10px; border-radius: 10px; text-decoration: none;
  background: rgba(255,255,255,.7); border: 1px solid transparent; color: var(--text);
  box-shadow: 0 0 0 rgba(14,40,34,0);
  /* Leaving: settle back down smoothly (as the home chips) */
  transition: background .45s ease, border-color .45s ease, transform .45s cubic-bezier(.4,0,.2,1), box-shadow .45s cubic-bezier(.4,0,.2,1);
}
.mtab:not([aria-current]):hover {
  /* Hover like the home chips: rise off the surface, overshoot slightly, then settle, while the border draws in the area colour */
  background: #fff; transform: translateY(-3px); box-shadow: 0 10px 20px -10px rgba(14,40,34,.35), 0 2px 4px rgba(14,40,34,.06);
  transition: background .45s ease, border-color .45s ease, transform .55s cubic-bezier(.34,1.56,.64,1), box-shadow .55s cubic-bezier(.22,.8,.24,1);
}
.mtab > .drawn-border path { stroke: var(--tint-line); }
/* Tabs stop 10px above the bottom line; the selected outline curves down to it and runs beneath its neighbours */
.mtab { margin-bottom: 10px; }
/* Selected: the page colour shows through; its outline is drawn by .mtab-ind, which glides between tabs */
.mtab[aria-current] { background: transparent; border-color: transparent; transform: none; }
/* The selected-tab outline: open at the bottom like a browser tab. Its sides curve outward (10px),
   then run 40px along the bottom and fade into the background. Placed and sized from app.js. */
/* Draw-in progress, one value per part (1 = fully drawn, the resting state) */
@property --t1 { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --t2 { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --tc { syntax: '<length-percentage>'; inherits: true; initial-value: 100%; }
.mtab-ind {
  position: absolute; top: 0; left: 0; z-index: 2; pointer-events: none; border-radius: 10px 10px 0 0;
  box-shadow: 0 -6px 16px -8px rgba(14,40,34,.26);
}
/* The 1px outline (sides and top) and, over it, the 4px top that tapers to 1px down the sides */
.mtab-line, .mtab-bar {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0; border-bottom: 0; border-radius: 10px 10px 0 0;
  /* Feathered reveal: rises from the bottom (--t2), and the top closes from both corners to the middle (--tc) */
  -webkit-mask-image:
    linear-gradient(to top, #000 calc(var(--t2) * (100% + 22px) - 22px), transparent calc(var(--t2) * (100% + 22px))),
    linear-gradient(to right, #000 calc(var(--tc) - 22px), transparent var(--tc)),
    linear-gradient(to left, #000 calc(var(--tc) - 22px), transparent var(--tc));
  -webkit-mask-composite: source-in, source-over;
  mask-image:
    linear-gradient(to top, #000 calc(var(--t2) * (100% + 22px) - 22px), transparent calc(var(--t2) * (100% + 22px))),
    linear-gradient(to right, #000 calc(var(--tc) - 22px), transparent var(--tc)),
    linear-gradient(to left, #000 calc(var(--tc) - 22px), transparent var(--tc));
  mask-composite: intersect, add;
}
.mtab-line { border: 0; }
/* The outline itself: a ring cut from the area gradient (left edge colour to right), so the draw-in reveals the gradient */
.mtab-line::before, .mtab-bar::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px 1px 0;
  background: linear-gradient(90deg, var(--edge) 0%, var(--edge) 20%, var(--edge2) 100%);
  -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);
}
.mtab-bar::before { padding: 4px 4px 0; }
/* The 4px top tapers to 1px down the sides: an extra fading layer on top of the same reveal */
.mtab-bar {
  border: 0;
  -webkit-mask-image:
    linear-gradient(180deg, #000 0%, #000 14%, transparent 85%),
    linear-gradient(to top, #000 calc(var(--t2) * (100% + 22px) - 22px), transparent calc(var(--t2) * (100% + 22px))),
    linear-gradient(to right, #000 calc(var(--tc) - 22px), transparent var(--tc)),
    linear-gradient(to left, #000 calc(var(--tc) - 22px), transparent var(--tc));
  -webkit-mask-composite: source-in, source-in, source-over;
  mask-image:
    linear-gradient(180deg, #000 0%, #000 14%, transparent 85%),
    linear-gradient(to top, #000 calc(var(--t2) * (100% + 22px) - 22px), transparent calc(var(--t2) * (100% + 22px))),
    linear-gradient(to right, #000 calc(var(--tc) - 22px), transparent var(--tc)),
    linear-gradient(to left, #000 calc(var(--tc) - 22px), transparent var(--tc));
  mask-composite: intersect, intersect, add;
}
.mtab-ind {
  transition: transform .6s cubic-bezier(.65,0,.35,1), width .6s cubic-bezier(.65,0,.35,1), height .6s cubic-bezier(.65,0,.35,1), --edge .6s ease, --edge2 .6s ease;
}
.mtab-ind.still { transition: none; }
/* Moving to another tab: the thin outline travels there, then the 4px top forms (sides rise, top closes to the middle) */
.mtab-ind.glide .mtab-bar { animation: tabDraw .85s .55s both; }
/* Draw-in, one smooth sequence: the fading lines at the bottom draw towards the corners, the sides rise,
   then the top closes from both corners and meets in the middle; the shadow follows once it is complete */
.mtab-ind.draw { animation: tabDraw .85s both, tabShadow 1s ease both; }
@keyframes tabDraw {
  0%   { --t1: 0; --t2: 0; --tc: 32px; animation-timing-function: cubic-bezier(.4,0,.6,1); }
  34%  { --t1: 1; }
  16%  { --t2: 0; animation-timing-function: cubic-bezier(.45,0,.55,1); }
  64%  { --t2: 1; --tc: 32px; animation-timing-function: cubic-bezier(.4,0,.2,1); }
  100% { --t1: 1; --t2: 1; --tc: calc(50% + 24px); }
}
@keyframes tabShadow { 0%, 72% { box-shadow: 0 0 0 transparent; } 100% { box-shadow: 0 -6px 16px -8px rgba(14,40,34,.26); } }
.mtab-ind::before, .mtab-ind::after { content: ""; position: absolute; top: 100%; width: 50px; height: 10px; }
/* The bottom lines draw in from their faded outer ends towards the curves (--t1) */
.mtab-ind::before {
  left: -49px;
  background:
    radial-gradient(circle at 0 0, transparent 8.6px, var(--edge) 9.2px, var(--edge) 9.8px, transparent 10.4px) right bottom / 10px 10px no-repeat,
    linear-gradient(90deg, transparent, var(--edge)) left bottom / 40px 1px no-repeat;
  -webkit-mask-image: linear-gradient(to right, #000 calc(var(--t1) * (100% + 16px) - 16px), transparent calc(var(--t1) * (100% + 16px)));
  mask-image: linear-gradient(to right, #000 calc(var(--t1) * (100% + 16px) - 16px), transparent calc(var(--t1) * (100% + 16px)));
}
.mtab-ind::after {
  right: -49px;
  background:
    radial-gradient(circle at 100% 0, transparent 8.6px, var(--edge2) 9.2px, var(--edge2) 9.8px, transparent 10.4px) left bottom / 10px 10px no-repeat,
    linear-gradient(270deg, transparent, var(--edge2)) right bottom / 40px 1px no-repeat;
  -webkit-mask-image: linear-gradient(to left, #000 calc(var(--t1) * (100% + 16px) - 16px), transparent calc(var(--t1) * (100% + 16px)));
  mask-image: linear-gradient(to left, #000 calc(var(--t1) * (100% + 16px) - 16px), transparent calc(var(--t1) * (100% + 16px)));
}
.mtab-thumb { position: relative; flex: none; width: 58px; height: 46px; border-radius: 7px; overflow: hidden; background: var(--teal-deep) center / cover no-repeat; }
.mtab-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.45)); }
.mtab-thumb img { position: absolute; left: 6px; bottom: 5px; z-index: 1; width: 18px; height: 18px; }
.mtab-text { min-width: 0; align-self: center; }
.mtab-text b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.25; color: var(--ink); }
.mtab-text small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted-2); }
.mtab[aria-current] .mtab-text small { color: var(--tint-ink); font-weight: 500; }

.msubtabs {
  display: flex; flex-wrap: nowrap; gap: 8px; margin: 6px 0 -10px; padding: 10px 0 16px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  --fade-l: 0px; --fade-r: 0px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
}
.msubtabs::-webkit-scrollbar { display: none; }
.msubtabs.more-l { --fade-l: 48px; }
.msubtabs.more-r { --fade-r: 48px; }
/* Module chips move like the home filter chips (.mfilter: rise on hover, drawn border, fill sweeping in),
   but keep their own look and fill with the page's area colour */
.msubtab {
  height: 36px; padding: 0 14px; white-space: nowrap; text-decoration: none;
  background: rgba(255,255,255,.55); border-color: rgba(14,23,21,.08); font-size: 13.5px; font-weight: 500; color: var(--text);
}
.msubtab:hover { background: #fff; }
.msubtab::before { background: linear-gradient(135deg, var(--tint-line) 0%, var(--tint-line) 25%, var(--tint-line2) 100%); }
.msubtab > .drawn-border path { stroke: var(--tint-line); }
.msubtab .n { font-size: 11.5px; }
/* Module icon in each chip: the white icon file used as a shape, filled with the area colour (white once selected) */
.msubtab .ic {
  flex: none; width: 18px; height: 18px; background-color: var(--tint-line);
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat;
  transition: background-color .35s var(--ease);
}
.msubtab[aria-current] .ic { background-color: #fff; transition: background-color .3s var(--ease) .18s; }
.mpin .msubtab .ic { width: 16px; height: 16px; }
.msubtab[aria-current] span { color: rgba(255,255,255,.8); }
@media (max-width: 560px) { .msubtab { height: 32px; padding: 0 12px; font-size: 13px; } }
/* A new area's module tabs, and new content under the tabs, fade up softly */
.msubtabs.swap .msubtab { animation: tabIn .5s cubic-bezier(.22,.8,.24,1) both; }
.msubtabs.swap .msubtab:nth-child(2) { animation-delay: 30ms; } .msubtabs.swap .msubtab:nth-child(3) { animation-delay: 60ms; }
.msubtabs.swap .msubtab:nth-child(4) { animation-delay: 90ms; } .msubtabs.swap .msubtab:nth-child(5) { animation-delay: 120ms; }
.msubtabs.swap .msubtab:nth-child(n+6) { animation-delay: 150ms; }
@keyframes tabIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.mpage .swap-in { animation: contentIn .55s cubic-bezier(.22,.8,.24,1) both; }
.mpage .mpanel-inner.swap-in { animation-delay: 60ms; }
@keyframes contentIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* Area colours blend when moving to a module in another area */
@property --tint { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --tint-comp { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --tint-ink { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --tint-line { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --tint-line2 { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --edge { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --edge2 { syntax: '<color>'; inherits: true; initial-value: transparent; }
.mpage { transition: --tint 1.1s cubic-bezier(.45,0,.25,1), --tint-comp 1.1s cubic-bezier(.45,0,.25,1), --tint-ink .6s ease, --tint-line .6s ease, --tint-line2 .6s ease; }
/* Pinned bar under the header: current area pill + module chips, shown once the full tabs scroll away */
.mpin {
  position: fixed; left: 0; right: 0; top: var(--header-h); z-index: 40;
  /* Frosted, with a light trace of the area gradient */
  background: linear-gradient(90deg, color-mix(in srgb, var(--tint-soft, #fff) 82%, transparent), color-mix(in srgb, var(--tint-soft2, #fff) 82%, transparent));
  backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px);
  border-bottom: 1px solid rgba(14,23,21,.07); box-shadow: 0 10px 24px -20px rgba(14,40,34,.45);
  transform: translateY(-10px); opacity: 0; visibility: hidden;
  transition: transform .3s var(--ease), opacity .22s ease, visibility 0s linear .3s;
}
.mpin.on { transform: none; opacity: 1; visibility: visible; transition: transform .45s cubic-bezier(.22,.8,.24,1), opacity .3s ease, visibility 0s; }
.mpin-row { display: flex; align-items: center; gap: 12px; height: 58px; }
.mpin-area { position: relative; flex: none; }
.mpin-areabtn {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--tint-line) 45%, #fff); background: #fff; font-size: 13.5px; color: var(--ink);
  transition: box-shadow .2s ease;
}
.mpin-areabtn:hover { box-shadow: 0 6px 14px -8px rgba(14,40,34,.35); }
.mpin-areabtn b { font-weight: 600; white-space: nowrap; }
.mpin-areabtn .chev { color: var(--muted-2); transition: transform .2s var(--ease); }
.mpin-areabtn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.mpin .dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--tint-line); }
.mpin-menu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 270px; padding: 6px; z-index: 1;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg);
  animation: pinMenu .2s var(--ease);
}
@keyframes pinMenu { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.mpin-menu a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; text-decoration: none; font-size: 14px; color: var(--text); }
.mpin-menu a small { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--muted-2); }
.mpin-menu a:hover { background: var(--tint-grad-soft); color: var(--ink); }
.mpin-menu a[aria-current] { background: var(--tint-grad); color: var(--ink); font-weight: 600; }
.mpin .mpin-chips { flex: 1; min-width: 0; margin: 0; padding: 8px 0 10px; }
.mpin .msubtab { height: 32px; padding: 0 12px; font-size: 13px; }
@media (max-width: 560px) {
  .mpin-row { gap: 8px; height: 54px; }
  .mpin-areabtn { padding: 0 10px; }
  .mpin-areabtn b { max-width: 104px; overflow: hidden; text-overflow: ellipsis; }
  .mpin .mpin-chips { margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter); }
}
@media (prefers-reduced-motion: reduce) { .mfeat-row, .mfeat-row:hover { transition: none; transform: none; } }
/* Screens open in the feature window (desktop) or the feature sheet (phones), so the page shows the full feature list */
.mpage .mpanel-inner { grid-template-columns: minmax(0, 1fr); }
.mpage .mpanel-stage { display: none; }
:is(.mpage, .gfeats) .mfeat .t small, .spot-feats .mfeat .t small { display: block; }
:is(.mpage, .gfeats) .mfeat, .spot-feats .mfeat { grid-template-columns: 32px 1fr auto; }
.mfeat-open {
  display: grid; place-items: center; align-self: center; width: 34px; height: 34px; border-radius: 50%;
  color: var(--muted-2); transition: background .2s, color .2s;
}
.mfeat-row:hover .mfeat-open { background: var(--tint-grad); color: var(--tint-ink); }
@media (max-width: 760px) { :is(.mpage, .gfeats) .mfeat, .spot-feats .mfeat { padding-right: 4px; } .mfeat-open { width: 30px; height: 30px; } }
/* Module pages: features as a grid of cards (two across; one on phones) */
:is(.mpage, .gfeats) .mfeats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1100px) { :is(.mpage, .gfeats) .mfeats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
/* Keep the intro to a comfortable reading width now the cards span the page */
.mpage .mpanel-intro { max-width: 760px; }
/* Cards: white washed with a faint trace of the area gradient; the hovered or open card goes almost white */
:is(.mpage, .gfeats) .mfeat-row { align-items: stretch; border-radius: 16px; border: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--tint-soft) 55%, rgba(255,255,255,.8)) 0%, color-mix(in srgb, var(--tint-soft2) 55%, rgba(255,255,255,.8)) 100%); }
:is(.mpage, .gfeats) .mfeat-row:hover, :is(.mpage, .gfeats) .mfeat-row.on { background: linear-gradient(135deg, #fff 40%, var(--tint-soft2) 100%); }
:is(.mpage, .gfeats) .mfeat { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; height: 100%; padding: 20px 20px 22px; }
/* Every card icon sits on its area's page gradient (the colour holds, then melts into the complementary hue) */
:is(.mpage, .gfeats) .mfeat .n, :is(.mpage, .gfeats) .mfeat-row.on .mfeat .n { width: 42px; height: 42px; border-radius: 12px; border: 0; color: var(--tint-ink);
  /* A step stronger than the page behind it, so the tiles stand out on the washed cards */
  background: linear-gradient(135deg, color-mix(in srgb, var(--tint-line) 26%, var(--tint)) 0%, color-mix(in srgb, var(--tint-line2) 26%, var(--tint-comp)) 100%); }
:is(.mpage, .gfeats) .mfeat .n svg { width: 20px; height: 20px; }
:is(.mpage, .gfeats) .mfeat .t b { font-size: 16px; margin-top: 0; }
:is(.mpage, .gfeats) .mfeat .t small { font-size: 14px; margin-top: 5px; }
:is(.mpage, .gfeats) .mfeat-open { position: absolute; top: 16px; right: 16px; }
@media (max-width: 760px) {
  :is(.mpage, .gfeats) .mfeats { grid-template-columns: 1fr; gap: 10px; }
  :is(.mpage, .gfeats) .mfeat { padding: 16px 16px 18px; gap: 12px; }
  :is(.mpage, .gfeats) .mfeat .n { width: 38px; height: 38px; }
  :is(.mpage, .gfeats) .mfeat-open { top: 12px; right: 12px; }
}

/* Header search panel */
body.qs-open { overflow: hidden; }
.qs { position: fixed; inset: 0; z-index: 80; display: flex; justify-content: center; align-items: flex-start; padding: 90px 20px 20px; }
.qs[hidden] { display: none; }
.qs-backdrop { position: absolute; inset: 0; background: rgba(10,30,26,.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s ease; }
.qs.in .qs-backdrop { opacity: 1; }
.qs-panel { position: relative; width: min(680px, 100%); opacity: 0; transform: translateY(-10px) scale(.98); transition: opacity .25s ease, transform .35s cubic-bezier(.22,.8,.24,1); }
.qs.in .qs-panel { opacity: 1; transform: none; }
.qs .search-field { height: 60px; }
/* The rotating cue stops short of the clear and Esc buttons */
.qs .ph { right: 130px; }
.qs .search-results { position: relative; top: auto; margin-top: 10px; max-height: calc(100vh - 200px); }
.qs-close { flex: none; border: 1px solid var(--line); background: var(--surface-soft); color: var(--muted); font: 600 11px Inter, sans-serif; letter-spacing: .04em; border-radius: 6px; padding: 4px 7px; cursor: pointer; }
/* Phones: the label may take two short lines, and the language button shows just the globe */
@media (max-width: 560px) {
  .brand-label { white-space: normal; font-size: 13.5px; line-height: 1.15; max-height: 2.3em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  /* Scripts with tall letters need more room between the two lines */
  [lang="hi"] .brand-label { line-height: 1.4; max-height: 2.8em; font-size: 13px; }
  .nav-lang-code { display: none; }
  .header-row { gap: 2px; }
  .brand { gap: 10px; margin-inline-end: 8px; }
  .brand img { height: 32px; }
  .brand-guide { padding-inline-start: 9px; gap: 6px; }
  .brand-door { width: 21px; height: 21px; }
  .nav-lang-btn { width: 40px; padding: 0; justify-content: center; }
  .nav-search { width: 40px; height: 40px; }
}
/* The narrowest phones keep the room for the label: the door mark steps aside */
@media (max-width: 380px) { .brand-door { display: none; } }
@media (max-width: 400px) { .brand { gap: 10px; } .brand img { height: 32px; } .brand-label { font-size: 13px; } .brand-guide { padding-inline-start: 9px; } .nav-search { width: 38px; height: 38px; } }
@media (max-width: 640px) { .qs { padding: 16px 12px; } .qs .search-field { height: 54px; } .qs .search-results { max-height: calc(100vh - 110px); } }
@media (prefers-reduced-motion: reduce) { .qs-backdrop, .qs-panel { transition: none; } }

/* Feature window */
body.fwin-open { overflow: hidden; }
.fwin { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; gap: 22px; padding: 24px; }
.fwin-backdrop { opacity: 0; transition: opacity .35s ease; }
.fwin.in .fwin-backdrop { opacity: 1; }
.fwin-backdrop { position: absolute; inset: 0; background: rgba(10,30,26,.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.fwin-card {
  position: relative; display: grid; grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); width: min(1000px, calc(100vw - 200px)); max-height: calc(100vh - 48px);
  border-radius: 24px; overflow: hidden; background: #fff; box-shadow: 0 40px 90px -30px rgba(0,0,0,.5);
  /* Radial opening from the clicked feature (--ox/--oy/--r set in app.js): slow start, smooth finish */
  clip-path: circle(0px at var(--ox, 50%) var(--oy, 50%));
  transition: clip-path .4s cubic-bezier(.5,0,.75,0);
}
.fwin.in .fwin-card { clip-path: circle(var(--r, 150%) at var(--ox, 50%) var(--oy, 50%)); transition: clip-path .7s cubic-bezier(.55,0,.25,1); }
.fwin-stage {
  order: 2; display: grid; place-items: center; padding: 36px 24px; min-height: 0; overflow: hidden;
  background:
    linear-gradient(to bottom right, var(--tint) 0%, var(--tint-comp) 100%);
}
.fwin-device { display: grid; place-items: center; }
/* A tablet fills the panel's height, so it starts below the close button (top 16px + 40px) */
.fwin-stage:has(.device-tablet) { padding-top: 68px; padding-bottom: 44px; }
.fwin-device .device-phone, .fwin-device .device-framed { width: min(300px, calc((100vh - 140px) * 9 / 19.2)); }
.fwin-device .device-web { width: min(400px, 100%); }
/* Tablets are taller than they are wide, so a little narrower keeps them clear of the close button */
.fwin-device .device-tablet { width: min(350px, 100%); }
.fwin-empty { color: var(--muted); font-size: 15px; }
.fwin-info { background: linear-gradient(160deg, #fff 55%, var(--tint-soft2) 100%); display: flex; flex-direction: column; padding: 56px 44px 40px 52px; min-height: 0; overflow-y: auto; }
.fwin-head { display: flex; align-items: center; gap: 12px; margin: 22px 0 14px; }
.fwin-ic {
  flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--tint-line) 0%, var(--tint-line) 25%, var(--tint-line2) 100%);
}
.fwin-ic svg { width: 22px; height: 22px; }
.fwin-count { font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--muted-2); }
.fwin-title { font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--ink); }
.fwin-desc { margin-top: 14px; font-size: 17px; line-height: 1.6; color: var(--muted); }
.fwin-dots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 32px; }
/* A card's process stepper in the window: the module pages' stepper, a little smaller, under the description */
.fwin-flow:empty { display: none; }
.fwin-flow .mflow { margin: 32px 0 0; padding: 20px 20px 18px; background: rgba(255,255,255,.75); box-shadow: 0 1px 2px rgba(14,23,21,.05), 0 0 0 1px color-mix(in srgb, var(--tint-line) 14%, transparent); }
.fwin-flow .mflow-label { margin-bottom: 16px; font-size: 11.5px; }
.fwin-flow .mflow .gflow { grid-auto-flow: column; grid-template-columns: none; gap: 16px; }
.fwin-flow .mflow .gflow li { display: block; }
.fwin-flow .mflow .gflow .ic { width: 42px; height: 42px; }
.fwin-flow .mflow .gflow .ic svg { width: 20px; height: 20px; }
.fwin-flow .mflow .gflow li:not(:last-child)::after { top: 20px; bottom: auto; left: 52px; right: -10px; width: auto; height: 2px; background: linear-gradient(90deg, var(--tint-line), var(--tint-line2)); }
.fwin-flow .mflow .gflow h3 { margin-top: 12px; font-size: 14px; }
.fwin-flow .mflow .gflow h3 .n { font-size: 11.5px; }
.fwin-flow .mflow .gflow p { margin-top: 4px; font-size: 12.5px; line-height: 1.45; }
/* Phone sheet: the same steps across, icons and titles only */
.g-flow { padding: 6px 22px 0; }
.g-flow .mflow { margin: 0; padding: 14px 14px 12px; border-radius: 14px; background: color-mix(in srgb, var(--tint-line) 7%, #fff); box-shadow: none; }
.g-flow .mflow-label { margin-bottom: 10px; font-size: 10.5px; }
.g-flow .mflow .gflow { grid-auto-flow: column; grid-template-columns: none; gap: 8px; }
.g-flow .mflow .gflow li { display: block; text-align: center; }
.g-flow .mflow .gflow .ic { width: 34px; height: 34px; margin: 0 auto; }
.g-flow .mflow .gflow .ic svg { width: 17px; height: 17px; }
.g-flow .mflow .gflow li:not(:last-child)::after { top: 16px; bottom: auto; left: calc(50% + 24px); right: calc(-50% + 20px); width: auto; height: 2px; background: linear-gradient(90deg, var(--tint-line), var(--tint-line2)); }
.g-flow .mflow .gflow h3 { display: block; margin-top: 7px; font-size: 12px; line-height: 1.25; }
.g-flow .mflow .gflow h3 .n { display: none; }
.g-flow .mflow .gflow p { display: none; }
.fwin-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 5px; cursor: pointer; background: color-mix(in srgb, var(--tint-line) 30%, #fff); transition: width .3s cubic-bezier(.22,.8,.24,1), background .3s; }
.fwin-dots button[aria-current="true"] { width: 26px; background: var(--tint-line); }
.fwin-close {
  position: absolute; top: 16px; right: 16px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--surface-soft); color: var(--ink); display: grid; place-items: center; transition: transform .2s, background .2s;
}
.fwin-close:hover { transform: rotate(90deg); background: var(--line); }
.fwin-arrow {
  position: relative; z-index: 1; flex: none; width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
  background: #fff; color: var(--ink); display: grid; place-items: center; box-shadow: 0 12px 30px -12px rgba(0,0,0,.45);
  opacity: 0; transition: transform .45s cubic-bezier(.34,1.56,.64,1), opacity .25s ease, background .2s, color .2s;
}
/* Arrows appear once the card has opened, and go first when it closes */
.fwin.in .fwin-arrow { opacity: 1; transition: transform .45s cubic-bezier(.34,1.56,.64,1), opacity .35s ease .45s, background .2s, color .2s; }
.fwin.in .fwin-arrow:disabled { opacity: .35; }
.fwin-arrow:hover:not(:disabled) { transform: scale(1.08); background: var(--tint-line); color: #fff; }
.fwin-arrow:disabled { cursor: default; }
/* The screen slides in from the side being moved to; first view and text fade up */
.fwin-device.in-r { animation: fwinR .5s cubic-bezier(.22,.8,.24,1) both; }
.fwin-device.in-l { animation: fwinL .5s cubic-bezier(.22,.8,.24,1) both; }
.fwin-device.in-up, .fwin-text.in-up { animation: fwinUp .5s cubic-bezier(.22,.8,.24,1) both; }
@keyframes fwinR { from { opacity: 0; transform: translateX(46px); } to { opacity: 1; transform: none; } }
@keyframes fwinL { from { opacity: 0; transform: translateX(-46px); } to { opacity: 1; transform: none; } }
@keyframes fwinUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 1000px) { .fwin-card { width: calc(100vw - 160px); } .fwin-info { padding: 52px 32px 32px; } .fwin { gap: 14px; } }
@media (prefers-reduced-motion: reduce) { .fwin, .fwin-card, .fwin.in .fwin-card, .fwin-arrow, .fwin.in .fwin-arrow, .fwin-backdrop { transition: none; } .fwin-device, .fwin-text { animation: none !important; } }
@media (prefers-reduced-motion: reduce) { .mpin, .mpin.on { transition: none; } .mpin-menu { animation: none; } }
@media (prefers-reduced-motion: reduce) { .mtab-ind.draw, .mpage.area-swap { animation: none; } .mtab-ind, .mpage, .mtab { transition: none; } .msubtabs.swap .msubtab, .mpage .swap-in { animation: none; } }

/* Narrower screens: the area row scrolls sideways too; both rows run edge to edge */
@media (max-width: 1100px) {
  .mtabs-areas {
    display: flex; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding: 2px var(--gutter) 6px;
  }
  .mtabs-areas::-webkit-scrollbar { display: none; }
  .mtab { flex: none; width: 214px; }
  .msubtabs { margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding-left: var(--gutter); padding-right: var(--gutter); }
}
/* Phones: compact area tabs (small photo, one-line name) so the module title shows on the first screen */
@media (max-width: 560px) {
  .mtabs { margin-bottom: 24px; }
  .mtabs-areas { gap: 8px; }
  .mtab { width: auto; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; }
  .mtab { margin-bottom: 0; }
  .mtab-ind { border-radius: 999px; }
  .mtab-line { border-radius: 999px; }
  .mtab-line::before { padding: 1px; }
  .mtab-ind::before, .mtab-ind::after, .mtab-bar { display: none; }
  .mtab-thumb { width: 30px; height: 30px; border-radius: 50%; }
  .mtab-thumb::after, .mtab-thumb img { display: none; }
  .mtab-text b { font-size: 13px; white-space: nowrap; }
  .mtab-text small { display: none; }
  .mtab:hover { transform: none; }
  .msubtabs { margin-top: 0; }
}

/* Previous / next module, crossing areas */
.mpager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 48px; padding-top: 28px; border-top: 1px solid color-mix(in srgb, var(--tint-line) 25%, transparent); }
.mpager-link { display: flex; align-items: center; gap: 16px; padding: 6px 0; text-decoration: none; color: inherit; }
.mpager-link.next { flex-direction: row-reverse; text-align: right; }
.mpager-thumb {
  position: relative; flex: none; width: 76px; height: 76px; border-radius: 50%; background: var(--teal-deep) center / cover no-repeat;
  box-shadow: 0 2px 6px rgba(14,23,21,.12);
  /* Leaving: settle back down smoothly */
  transition: transform .45s cubic-bezier(.4,0,.2,1), box-shadow .45s cubic-bezier(.4,0,.2,1);
}
.mpager-thumb::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(10,30,26,.38); transition: background .3s ease; }
.mpager-arrow { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; color: #fff; }
.mpager-arrow svg { width: 26px; height: 26px; }
/* Hover: the circle eases up, overshoots a touch and settles; the photo shows through a little more */
.mpager-link:hover .mpager-thumb, .mpager-link:focus-visible .mpager-thumb {
  transform: translateY(-6px); box-shadow: 0 18px 30px -12px rgba(14,40,34,.45), 0 3px 8px rgba(14,40,34,.1);
  transition: transform .55s cubic-bezier(.34,1.56,.64,1), box-shadow .55s cubic-bezier(.22,.8,.24,1);
}
.mpager-link:hover .mpager-thumb::after { background: rgba(10,30,26,.22); }
.mpager-text { display: grid; gap: 4px; min-width: 0; }
.mpager-link small { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-2); }
.mpager-link b { font-size: 16px; font-weight: 600; color: var(--ink); transition: color .2s; }
.mpager-link:hover b { color: var(--tint-ink, var(--green-strong)); }
@media (prefers-reduced-motion: reduce) { .mpager-thumb, .mpager-link:hover .mpager-thumb { transition: none; transform: none; } }

@media (max-width: 560px) {
  .mpager { grid-template-columns: 1fr; gap: 10px; margin-top: 36px; }
  .mpager-link.next { flex-direction: row; text-align: left; }
  .mpager-thumb { width: 60px; height: 60px; }
}
@media (max-width: 760px) { .mpage { padding: calc(16px + var(--header-h)) 0 40px; } .mpanel-intro { font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { .mtab, .mtab:hover { transition: none; transform: none; } }


/* ---------- Phones: the device sits under the selected step ---------- */
@media (max-width: 900px) {
  .step > .mod-stage, .step > .stage { grid-column: 1 / -1; order: 0; margin: 14px 0 4px; cursor: default; }
  .step > .mod-stage { position: static; min-height: 0; padding: 24px 12px 16px; }
  .step > .stage { min-height: 460px; }
  .step[aria-selected="true"] { cursor: default; }
}

/* ---------- Screenshot gallery (phones) ---------- */
.zoom-hint { display: none; }
@media (max-width: 760px) {
  .zoom-hint { display: inline-flex; align-items: center; gap: 6px; margin: 10px auto 0; font-size: 12.5px; font-weight: 500; color: var(--muted); }
  .zoom-hint::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M350.77-550h-47.69q-12.75 0-21.38-8.63-8.62-8.63-8.62-21.38 0-12.76 8.62-21.37 8.63-8.62 21.38-8.62h47.69v-47.69q0-12.75 8.63-21.38 8.63-8.62 21.38-8.62 12.76 0 21.37 8.62 8.62 8.63 8.62 21.38V-610h47.69q12.75 0 21.38 8.63 8.62 8.63 8.62 21.38 0 12.76-8.62 21.37-8.63 8.62-21.38 8.62h-47.69v47.69q0 12.75-8.63 21.38-8.63 8.62-21.38 8.62-12.76 0-21.37-8.62-8.62-8.63-8.62-21.38V-550Zm30 214.61q-102.55 0-173.58-71.01-71.03-71.01-71.03-173.54 0-102.52 71.01-173.6 71.01-71.07 173.54-71.07 102.52 0 173.6 71.03 71.07 71.03 71.07 173.58 0 42.85-14.38 81.85-14.39 39-38.39 67.84l230.16 230.16q8.31 8.3 8.5 20.88.19 12.58-8.5 21.27t-21.08 8.69q-12.38 0-21.07-8.69L530.46-388.16q-30 24.77-69 38.77-39 14-80.69 14Zm0-59.99q77.31 0 130.96-53.66 53.66-53.65 53.66-130.96t-53.66-130.96q-53.65-53.66-130.96-53.66t-130.96 53.66Q196.15-657.31 196.15-580t53.66 130.96q53.65 53.66 130.96 53.66Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M350.77-550h-47.69q-12.75 0-21.38-8.63-8.62-8.63-8.62-21.38 0-12.76 8.62-21.37 8.63-8.62 21.38-8.62h47.69v-47.69q0-12.75 8.63-21.38 8.63-8.62 21.38-8.62 12.76 0 21.37 8.62 8.62 8.63 8.62 21.38V-610h47.69q12.75 0 21.38 8.63 8.62 8.63 8.62 21.38 0 12.76-8.62 21.37-8.63 8.62-21.38 8.62h-47.69v47.69q0 12.75-8.63 21.38-8.63 8.62-21.38 8.62-12.76 0-21.37-8.62-8.62-8.63-8.62-21.38V-550Zm30 214.61q-102.55 0-173.58-71.01-71.03-71.01-71.03-173.54 0-102.52 71.01-173.6 71.01-71.07 173.54-71.07 102.52 0 173.6 71.03 71.07 71.03 71.07 173.58 0 42.85-14.38 81.85-14.39 39-38.39 67.84l230.16 230.16q8.31 8.3 8.5 20.88.19 12.58-8.5 21.27t-21.08 8.69q-12.38 0-21.07-8.69L530.46-388.16q-30 24.77-69 38.77-39 14-80.69 14Zm0-59.99q77.31 0 130.96-53.66 53.66-53.65 53.66-130.96t-53.66-130.96q-53.65-53.66-130.96-53.66t-130.96 53.66Q196.15-657.31 196.15-580t53.66 130.96q53.65 53.66 130.96 53.66Z'/%3E%3C/svg%3E") center / contain no-repeat; }
  .mpanel-stage .device, .mod-stage .device { cursor: zoom-in; }
  .mpanel-stage, .mod-stage { display: grid; justify-items: center; }
}
.gallery {
  position: fixed; inset: 0; z-index: 200; display: grid; grid-template-rows: auto 1fr auto auto auto;
  background: #0B1714; color: #fff; opacity: 0; transition: opacity .22s ease;
  padding: env(safe-area-inset-top, 0px) 0 calc(env(safe-area-inset-bottom, 0px) + 12px);
}
.gallery.in { opacity: 1; }
.gallery.out { opacity: 0; }
.g-top { display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; padding: 10px 12px; }
.g-count { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.75); font-variant-numeric: tabular-nums; padding-left: 4px; }
.g-title { text-align: center; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-close { justify-self: end; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; cursor: pointer; }
.g-stage { position: relative; overflow: hidden; touch-action: none; display: grid; place-items: center; min-height: 0; }
.g-track { width: 100%; height: 100%; display: grid; place-items: center; padding: 8px 16px; }
.g-img { max-width: 100%; max-height: 100%; border-radius: 14px; box-shadow: 0 20px 60px -20px rgba(0,0,0,.6); user-select: none; -webkit-user-drag: none; transform-origin: center center; will-change: transform; }
.g-info { padding: 14px 20px 4px; min-height: 64px; transition: opacity .2s; }
.g-info b { display: block; font-size: 16px; font-weight: 600; margin-bottom: 3px; }
.g-info p { margin: 0; font-size: 14px; color: rgba(255,255,255,.75); line-height: 1.45; }
.gallery.zoomed .g-info, .gallery.zoomed .g-hint { opacity: 0; }
.g-dots { display: flex; justify-content: center; gap: 6px; padding: 8px 16px 2px; flex-wrap: wrap; }
.g-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.35); cursor: pointer; transition: width .2s, background .2s; }
.g-dots button[aria-current="true"] { width: 20px; border-radius: 4px; background: #fff; }
.g-hint { margin: 6px 0 0; text-align: center; font-size: 12px; color: rgba(255,255,255,.55); transition: opacity .2s; }
@media (prefers-reduced-motion: reduce) { .gallery, .g-track, .g-img { transition: none !important; } }
/* The plain gallery keeps its dark look; its feature-only parts stay hidden */
.gallery:not(.sheet) .g-head, .gallery:not(.sheet) .g-arrow { display: none; }
.g-nav { display: flex; align-items: center; justify-content: center; gap: 14px; }

/* Phones: the feature sheet, the full-screen counterpart of the desktop feature window */
.gallery.sheet {
  background: #fff; color: var(--ink); opacity: 1;
  clip-path: circle(0px at var(--ox, 50%) var(--oy, 50%));
  transition: clip-path .4s cubic-bezier(.5,0,.75,0);
}
.gallery.sheet.in { clip-path: circle(var(--r, 150%) at var(--ox, 50%) var(--oy, 50%)); transition: clip-path .65s cubic-bezier(.55,0,.25,1); }
.gallery.sheet.out { opacity: 1; }
.gallery.sheet .g-top { border-bottom: 1px solid var(--line); }
.gallery.sheet .g-count { display: none; }
.gallery.sheet .g-title { grid-column: 1 / 3; text-align: left; padding-left: 8px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tint-ink); }
.gallery.sheet .g-close { background: var(--surface-soft); color: var(--ink); }
.gallery.sheet .g-stage {
  background:
    linear-gradient(to bottom right, var(--tint) 0%, var(--tint-comp) 100%);
}
.gallery.sheet .g-track { padding: 12px 20px 16px; align-items: start; }
.g-frame { display: contents; }
/* Phone sheet: the screen sits in the same bezel as the desktop frames, in the area's colours */
.gallery.sheet .g-frame {
  display: block; max-width: 100%; padding: 8px; border-radius: 27px; overflow: hidden;
  transform-origin: center center; will-change: transform; user-select: none;
  background: linear-gradient(145deg, var(--tint-line) 0%, var(--tint-line) 40%, var(--tint-line2) 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.28), inset 0 1px 1px rgba(255,255,255,.18), 0 24px 50px -24px rgba(14,40,34,.45);
}
.gallery.sheet .g-img { display: block; border-radius: 20px; background: #000; box-shadow: 0 0 0 4px #000; width: auto; max-width: 100%; }
/* Web screens: the same bezel, with flatter browser corners */
.gallery.sheet .g-frame.web { border-radius: 18px; }
.gallery.sheet .g-frame.web .g-img { border-radius: 10px; background: #fff; }
.gallery.sheet .g-frame.web > .screen-lock { border-radius: 10px; }
/* Phone sheet: the feature's icon on the title's line, the description below both */
.gallery.sheet .g-info { padding: 14px 22px 4px; min-height: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
.gallery.sheet .g-head { display: contents; }
.gallery.sheet .g-info .g-fd { grid-column: 1 / -1; margin-top: 8px; }
.gallery.sheet .g-info.in-up { animation: fwinUp .45s cubic-bezier(.22,.8,.24,1) both; }
.g-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.g-ic {
  flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--tint-line) 0%, var(--tint-line) 25%, var(--tint-line2) 100%);
}
.g-ic svg { width: 18px; height: 18px; }
.gallery.sheet .g-info b { font-size: 21px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; margin-bottom: 0; }
.gallery.sheet .g-info p { font-size: 15px; color: var(--muted); }
.gallery.sheet .g-nav { padding: 10px 16px 2px; }
.gallery.sheet .g-dots { padding: 0; }
.gallery.sheet .g-dots button { background: color-mix(in srgb, var(--tint-line) 30%, #fff); }
.gallery.sheet .g-dots button[aria-current="true"] { background: var(--tint-line); }
.g-arrow {
  flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  background: #fff; color: var(--ink); box-shadow: 0 6px 16px -8px rgba(0,0,0,.45), 0 0 0 1px var(--line);
  transition: transform .45s cubic-bezier(.34,1.56,.64,1), opacity .2s, background .2s, color .2s;
}
.g-arrow:active:not(:disabled) { transform: scale(.94); background: var(--tint-line); color: #fff; }
.g-arrow:disabled { opacity: .35; }
.gallery.sheet .g-hint { color: var(--muted-2); }
@media (prefers-reduced-motion: reduce) { .gallery.sheet, .gallery.sheet.in { transition: none; clip-path: none; } .gallery.sheet .g-info.in-up { animation: none; } }

/* Locked screen: a 50% black veil over the app screen (inside the bezel), with a lock in the middle */
.screen-lock {
  position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; pointer-events: none;
  background: rgba(0,0,0,.5); color: #fff; border-radius: inherit;
}
.screen-lock svg { width: 30%; max-width: 88px; min-width: 40px; height: auto; filter: drop-shadow(0 4px 14px rgba(0,0,0,.35)); }
.device-web { position: relative; }
/* Phone sheet: the frame holds the bezel padding, so the veil sits inside it, on the screen only */
.gallery.sheet .g-frame { position: relative; }
.gallery.sheet .g-frame > .screen-lock { inset: 8px; border-radius: 20px; }
/* Lens: a round magnifier (no outline) on the screen's lower corner opens the screen on its own to zoom into.
   Web screens have it at every size (their detail is small); phone and tablet screens only on phones */
.lens {
  display: none; position: absolute; z-index: 2; right: -12px; bottom: 22px; width: 44px; height: 44px; padding: 0; border-radius: 50%;
  place-items: center; cursor: zoom-in; border: 0; color: #fff;
  background: linear-gradient(145deg, var(--tint-line, #0B7A40) 0%, var(--tint-line2, #005A2C) 100%);
  box-shadow: 0 10px 22px -8px rgba(14,40,34,.55);
  transition: transform .45s cubic-bezier(.34,1.56,.64,1);
}
.lens:active { transform: scale(.92); }
.device.zoomable > .lens, .lens-out { display: grid; right: 18px; bottom: 18px; outline: 3px solid rgba(255,255,255,.85); }
.device-phone.zoomable > .lens { right: -12px; bottom: 22px; }
@media (hover: hover) { .device.zoomable > .lens:hover, .lens-out:hover { transform: scale(1.08); } }
/* Guide cards and tour stages: the lens sits beside the button, over the screen's lower corner */
.gcard-wrap { position: relative; display: grid; }
.gcard-wrap > .gcard { height: 100%; }
.gcard-wrap > .lens-out { top: 182px; bottom: auto; right: 26px; width: 40px; height: 40px; }
.gqa-stage-wrap { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; }
.gqa-stage-wrap > .gqa-stage { position: relative; top: 0; }
.gqa-stage-wrap > .lens-out { right: 16px; bottom: 16px; }
@media (max-width: 760px) {
  .lens { display: grid; }
  .device-web > .lens, .device-tablet.zoomable > .lens { right: 12px; bottom: 12px; width: 40px; height: 40px; }
  /* In the feature sheet it sits in the stage's lower corner, clear of the zooming phone, and steps aside while zoomed */
  .gallery.sheet .g-stage > .lens { right: 16px; bottom: 14px; transition: transform .45s cubic-bezier(.34,1.56,.64,1), opacity .2s; }
  .gallery.sheet.zoomed .g-stage > .lens { opacity: 0; pointer-events: none; }
}
/* Lens view zoom buttons: − 100% +, under the screen */
.g-zoom { justify-self: center; display: flex; align-items: center; gap: 4px; margin-top: 10px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.1); }
.g-zoom button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: none; color: #fff; display: grid; place-items: center; cursor: pointer; }
.g-zoom button:hover { background: rgba(255,255,255,.14); }
.g-zoom-pct { min-width: 52px; text-align: center; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.8); }
.gallery.lens-view .g-stage { cursor: grab; }
.gallery.lens-view .g-stage:active { cursor: grabbing; }
/* The lens view: the plain dark gallery with a single screen, so no dots, swipes or captions */
.gallery.lens-view .g-info, .gallery.lens-view .g-nav, .gallery.lens-view .g-count { display: none; }
.gallery.lens-view .g-title { grid-column: 1 / 3; text-align: left; padding-left: 8px; }
/* The screen opens at full width; a tall one runs past the stage and scrolls with a drag */
.gallery.lens-view .g-track { padding: 0; }
.gallery.lens-view .g-img { width: 100%; max-width: none; max-height: none; border-radius: 0; box-shadow: none; }
.gallery.lens-view .g-hint { margin: 8px 0 6px; }

/* ---------- Footer ---------- */
/* Footer: the Antz Systems website's closing band. Green to navy, the logo, "See Antz in Action",
   the Book a Demo pill (white, with a green panel irising over it on hover), the store badges and the legal row */
.site-footer { background: linear-gradient(90deg, #37BD69 0%, #1F415B 98%); color: #fff; }
.footer-cta { max-width: 1280px; margin: 0 auto; padding: 47px 55px; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.footer-logo { width: 170px; height: auto; transform: scaleY(.95); }
.footer-cta h2 { font-family: "Inter", system-ui, sans-serif; font-weight: 700; font-size: 52px; line-height: 1.1; color: #fff; letter-spacing: 0; }
.footer-cta > p { max-width: 600px; font-family: "Epilogue", "Inter", system-ui, sans-serif; font-size: 16px; line-height: 1.5; color: #fff; }
.footer-stores { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; }
.footer-stores a { display: inline-block; border-radius: 7px; transition: transform .3s; }
.footer-stores a:hover { transform: scale(1.04); }
.footer-stores a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.footer-stores img { height: 44px; width: auto; }
.footer-legal { margin-top: 40px; display: flex; align-items: center; gap: 24px; }
.footer-legal p, .footer-legal a { font-family: "Inter", system-ui, sans-serif; font-weight: 300; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.7); }
.footer-legal nav { display: flex; align-items: center; gap: 24px; }
.footer-legal a { text-decoration: none; text-underline-offset: 4px; transition: color .15s; }
.footer-legal a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 767px) { .footer-cta { padding: 47px 32px; } .footer-cta h2 { font-size: 36px; } }
@media (max-width: 639px) { .footer-cta { padding: 47px 20px; } .footer-legal { flex-direction: column; gap: 8px; } }

/* The website's main call-to-action pill. On hover a panel in the second colour opens from a sliver at the
   centre to the full pill, repainting the label (from data-text) on top, so the text never shifts */
.btn-cta {
  --btn-color: #37BD69; --btn-text-color: #fff; --btn-active-color: #fff; --btn-active-text-color: #37BD69;
  --btn-label-nudge: .13em; --btn-pad-y: 12px;
  position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center;
  padding: calc(var(--btn-pad-y) + var(--btn-label-nudge)) 24px calc(var(--btn-pad-y) - var(--btn-label-nudge));
  border-radius: 999rem; color: var(--btn-text-color); text-decoration: none; white-space: nowrap;
  font-family: "Epilogue", "Inter", system-ui, sans-serif; font-weight: 600; font-size: 18px; line-height: 1.2;
}
.btn-cta::before {
  content: ""; position: absolute; inset: 0; z-index: 1; background: var(--btn-color); border: 1px solid var(--btn-color); border-radius: inherit;
  filter: drop-shadow(0 0 .5px var(--btn-color));
  transition: background-color .6s cubic-bezier(.645,.045,.355,1), border-color .6s cubic-bezier(.645,.045,.355,1);
}
.btn-cta::after {
  content: attr(data-text); position: absolute; inset: 0; z-index: 3; padding: inherit; display: flex; align-items: center; justify-content: center;
  background: var(--btn-active-color); border-radius: inherit; color: var(--btn-active-text-color); white-space: nowrap;
  clip-path: inset(27.5% 50% round 999rem); transform: scale(1.5);
  transition: clip-path .4s cubic-bezier(1,0,0,1), transform .6s cubic-bezier(.86,0,.07,1); will-change: clip-path, transform;
}
.btn-cta > span { position: relative; z-index: 2; }
.btn-cta:hover::after, .btn-cta:focus-visible::after {
  clip-path: inset(0 round 999rem); transform: scale(1);
  transition: clip-path .4s cubic-bezier(1,0,0,1), transform .8s cubic-bezier(.23,1,.32,1);
}
.btn-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.btn-cta-invert { --btn-color: #fff; --btn-text-color: #37BD69; --btn-active-color: #37BD69; --btn-active-text-color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .btn-cta::before, .btn-cta::after, .btn-cta:hover::after, .btn-cta:focus-visible::after { transform: none; transition: none; }
}

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; }
}

/* Feature label under the device: an elevated glass box */
.mpanel-stage .cap, .mod-stage .caption {
  display: inline-block; max-width: 300px; margin: 18px auto 0; padding: 9px 16px; border-radius: 12px;
  font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--ink); text-align: center;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 12px 28px -12px rgba(14,40,34,.35), 0 2px 6px rgba(14,40,34,.06);
}
.mpanel-stage .cap:empty, .mod-stage .caption:empty { display: none; }

/* ---------- Right-to-left (Arabic) ---------- */
[lang="ar"] * { letter-spacing: 0 !important; }
[dir="rtl"] .ph { left: 64px; right: 58px; }
[dir="rtl"] .qs .ph { left: 130px; right: 58px; }
[dir="rtl"] .mpager-arrow svg, [dir="rtl"] .fwin-arrow svg, [dir="rtl"] .g-arrow svg, [dir="rtl"] .mcard-plus svg,
[dir="rtl"] .link-arrow svg, [dir="rtl"] .bento-more svg, [dir="rtl"] .mega-foot svg { transform: scaleX(-1); }
[dir="rtl"] .mcard-face:hover .mcard-plus svg, [dir="rtl"] .mcard-face:focus-visible .mcard-plus svg { animation: none; }
[dir="rtl"] .mpager-link.next { text-align: left; }
[dir="rtl"] .mpin-menu { left: auto; right: 0; }
[dir="rtl"] .bento-media { right: auto; left: 0; -webkit-mask-image: linear-gradient(270deg, transparent 0%, #000 42%); mask-image: linear-gradient(270deg, transparent 0%, #000 42%); }
[dir="rtl"] .bento-phone { right: auto; left: -28px; transform: rotate(8deg); }
[dir="rtl"] .mfeat-open { right: auto; left: 16px; }
[dir="rtl"] .fwin-close { right: auto; left: 16px; }
[dir="rtl"] .cta::after { background: linear-gradient(270deg, rgba(10,30,26,.82) 0%, rgba(10,30,26,.45) 60%, rgba(10,30,26,.2) 100%); }
[dir="rtl"] .fwin-device.in-r { animation-name: fwinL; } [dir="rtl"] .fwin-device.in-l { animation-name: fwinR; }

/* ---------- Guide pages: a kit's full walkthrough ---------- */
/* Banner: the home page's photo and wash, shorter, with a jump to each part */
.guide-hero .hero-inner { padding-top: calc(96px + var(--header-h)); padding-bottom: 72px; }
.guide-kicker { display: inline-block; margin-bottom: 14px; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #8FE3AE; text-shadow: 0 1px 10px rgba(0,0,0,.4); }
.guide-jump { margin-top: 34px; }
.guide-jump .chip .n { font-variant-numeric: tabular-nums; opacity: .7; }
.guide-kicker { animation: heroRise 1s cubic-bezier(.33,0,.2,1) var(--rise-delay, 0ms) backwards; }
.guide-kicker { --rise-delay: 40ms; }
/* Module guides: a plain text link back to the module's own page, at the top left of the banner */
.guide-back {
  position: absolute; z-index: 2; top: calc(var(--header-h) + 24px); left: var(--gutter);
  display: inline-flex; align-items: center; gap: 2px; padding: 4px 0;
  font-size: 14px; font-weight: 500; color: rgba(255,255,255,.88); text-decoration: none; text-shadow: 0 1px 8px rgba(0,0,0,.45);
  transition: color .2s;
}
.guide-back svg { width: 20px; height: 20px; margin-left: -5px; filter: drop-shadow(0 1px 6px rgba(0,0,0,.4)); transition: transform .3s cubic-bezier(.22,.8,.24,1); }
.guide-back:hover, .guide-back:focus-visible { color: #fff; }
.guide-back:hover svg { transform: translateX(-3px); }
.guide-back span { display: inline-block; transition: transform .45s cubic-bezier(.45,0,.55,1); }
.guide-back:hover span, .guide-back:focus-visible span { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .guide-back span, .guide-back svg { transition: none; } }
.guide-hero .hero-inner { position: relative; }
[dir="rtl"] .guide-back { left: auto; right: var(--gutter); }
[dir="rtl"] .guide-back svg { transform: scaleX(-1); }
@media (max-width: 560px) { .guide-back { top: calc(var(--header-h) + 14px); font-size: 13px; } }

.guide-part, .guide-close { padding: 88px 0; }
/* Sections and cards fade up as they scroll into view */
.guidepage .reveal { transition: opacity .7s var(--ease), transform .8s cubic-bezier(.22,.8,.24,1); }
.guidepage .reveal:not(.in) { opacity: 0; transform: translateY(16px); }
.guide-head { max-width: 760px; margin-bottom: 40px; }

/* At a glance: the module pages' feature cards (shared rules under :is(.mpage, .gfeats)) */
.gfeats { margin-bottom: 40px; }
.gfeats-title { font-size: 22px; }
.gfeats-lede { margin: 8px 0 20px; max-width: 760px; color: var(--muted); }

/* Cards: the home cards' white face and drawn border, with the first screen peeking up from the guide's gradient */
.ggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.gcard { border: 0; font: inherit; color: inherit; }
/* Five cards: three across, then two wider ones, so none is left alone on a row */
@media (min-width: 1101px) {
  .ggrid[data-n="5"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ggrid[data-n="5"] > * { grid-column: span 2; }
  .ggrid[data-n="5"] > :nth-child(n+4) { grid-column: span 3; }
}
.gcard-thumb {
  position: relative; display: flex; justify-content: center; height: 210px; margin: 14px 14px 0; padding-top: 22px; overflow: hidden; border-radius: 12px;
  background: linear-gradient(to bottom right, var(--tint) 0%, var(--tint-comp) 100%);
}
/* The first screen in the phone frame, peeking up: only its top half shows, cut off by the stage's bottom edge.
   align-self keeps the flex row from stretching it to the stage's height (which squashed the phone).
   --peek (0 to 1) slides it to the part worth showing */
.gcard-thumb .device-phone { flex: none; align-self: flex-start; width: 160px; height: auto; margin-top: calc(var(--peek, 0) * -153px); box-shadow: inset 0 0 0 1px rgba(0,0,0,.28), 0 18px 30px -16px rgba(14,40,34,.4); transition: transform .7s cubic-bezier(.22,.8,.24,1); }
.gcard:hover .gcard-thumb .device-phone, .gcard:focus-visible .gcard-thumb .device-phone { transform: translateY(-10px); }
/* Web screens in card thumbnails: a tablet or browser frame peeking up the same way */
.gcard-thumb .device-tablet { flex: none; align-self: flex-start; width: 250px; height: auto; margin-top: calc(var(--peek, 0) * -120px); padding: 8px; border-radius: 18px; transition: transform .7s cubic-bezier(.22,.8,.24,1); }
.gcard-thumb .device-tablet .screen { border-radius: 12px; }
.gcard-thumb .device-web { flex: none; align-self: flex-start; width: 88%; margin-top: calc(var(--peek, 0) * -80px); transition: transform .7s cubic-bezier(.22,.8,.24,1); }
.gcard:hover .gcard-thumb :is(.device-tablet, .device-web), .gcard:focus-visible .gcard-thumb :is(.device-tablet, .device-web) { transform: translateY(-10px); }
.gqa-stage .device-tablet { width: min(420px, 100%); }
.gqa-stage .device-web { width: 100%; }
.gcard-body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 18px 20px 20px; }
.gcard-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.gcard-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--green-tint); color: var(--green-strong); }
.gcard-ic svg { width: 18px; height: 18px; }
.gcard-n { font-size: 13px; font-weight: 700; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.gcard-body > b { font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.gcard-desc { font-size: 14px; line-height: 1.5; color: var(--muted); }
.gcard-foot { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; font-size: 13.5px; font-weight: 600; color: var(--green-strong); }
.gcard-foot svg { transition: transform .4s cubic-bezier(.22,.8,.24,1); }
.gcard:hover .gcard-foot svg { transform: translate(2px, -2px); }

/* Quick actions: the sheet on the left, one tile per shortcut on the right */
.gqa { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items: start; }
/* The sheet on the guide's gradient, rounded like the module pages' screen stage */
.gqa-stage {
  position: sticky; top: calc(var(--header-h) + 24px); display: grid; place-items: center; width: 100%; padding: 40px 24px;
  border: 0; border-radius: var(--radius-lg); cursor: pointer; font: inherit;
  background: linear-gradient(to bottom right, var(--tint) 0%, var(--tint-comp) 100%);
}
.gqa-stage .device-phone { width: 236px; }
.gqa-side h3 { font-size: 22px; }
.gqa-side > p { margin-top: 8px; color: var(--muted); }
.gqa-grid { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gqa-grid button {
  width: 100%; height: 100%; display: block; text-align: left; cursor: pointer; padding: 14px 16px; border-radius: 12px;
  background: #fff; border: 1px solid var(--line);
  transition: transform .45s cubic-bezier(.4,0,.2,1), box-shadow .45s cubic-bezier(.4,0,.2,1), border-color .3s var(--ease);
}
.gqa-grid button:hover, .gqa-grid button:focus-visible {
  transform: translateY(-3px); border-color: color-mix(in srgb, var(--green) 45%, #fff);
  box-shadow: 0 12px 22px -14px rgba(14,40,34,.4);
  transition: transform .55s cubic-bezier(.34,1.56,.64,1), box-shadow .55s cubic-bezier(.22,.8,.24,1), border-color .3s var(--ease);
}
.gqa-grid b { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.gqa-grid small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--muted); }

/* Module guides take their area's colours where the Getting Started guide uses the brand green */
.guidepage:not(.tint-guide) .gcard-ic { background: var(--tint-soft); color: var(--tint-ink); }
.guidepage:not(.tint-guide) .gcard-foot { color: var(--tint-ink); }
.guidepage:not(.tint-guide) .gqa-grid button:hover, .guidepage:not(.tint-guide) .gqa-grid button:focus-visible { border-color: color-mix(in srgb, var(--tint-line) 50%, #fff); }
/* Two, three or six cards: spread across the row instead of leaving an empty column (six run three across) */
@media (min-width: 1101px) {
  .ggrid[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ggrid[data-n="3"], .ggrid[data-n="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Record tour: numbered tiles in one column; the tile on show is marked, and its screen is on the phone */
.gqa-grid.numbered { grid-template-columns: 1fr; }
.gqa-grid.numbered button { display: grid; grid-template-columns: 32px 1fr; gap: 14px; align-items: start; }
.gqa-grid.numbered .n {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 700;
  background: var(--tint-soft); color: var(--tint-ink); transition: background .3s, color .3s;
}
.gqa-tour .gqa-grid button.on { border-color: color-mix(in srgb, var(--tint-line) 55%, #fff); box-shadow: 0 12px 22px -14px rgba(14,40,34,.35); }
.gqa-tour .gqa-grid button.on .n { background: linear-gradient(135deg, var(--tint-line) 0%, var(--tint-line2) 100%); color: #fff; }
.gqa-tour .gqa-stage img { transition: opacity .25s var(--ease); }

/* Flow: open steps (no boxes), each with its icon in a circle in the area's colours, joined by one line;
   the step number sits beside the title. Across on wide screens, down on phones. */
.gflow { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 28px; }
.gflow li { position: relative; }
.gflow .ic {
  position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--tint-line) 0%, var(--tint-line2) 100%);
  box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--tint-line) 70%, #000);
}
.gflow .ic svg { width: 26px; height: 26px; }
/* The line runs from each circle to the next one, through the gap */
.gflow li:not(:last-child)::after {
  content: ""; position: absolute; top: 27px; left: 68px; right: -16px; height: 2px;
  background: linear-gradient(90deg, var(--tint-line), var(--tint-line2)); opacity: .4; border-radius: 2px;
}
.gflow h3 { display: flex; align-items: baseline; gap: 8px; margin-top: 18px; font-size: 17px; }
.gflow h3 .n { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--tint-ink); font-variant-numeric: tabular-nums; }
.gflow p { margin-top: 6px; font-size: 14px; color: var(--muted); max-width: 260px; }

/* Module pages: a module's own process as the stepper, between the intro and the features, in the area's colours */
.mflow { margin: 4px 0 32px; padding: 26px 26px 24px; border-radius: 18px; background: rgba(255,255,255,.6); box-shadow: 0 1px 2px rgba(14,23,21,.04); }
.mflow-label { margin: 0 0 22px; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tint-ink); }
.mflow .gflow { gap: 20px; }
.mflow .gflow .ic { width: 48px; height: 48px; }
.mflow .gflow .ic svg { width: 23px; height: 23px; }
@media (min-width: 901px) { .mflow .gflow li:not(:last-child)::after { top: 23px; left: 58px; right: -12px; } }
@media (max-width: 900px) { .mflow .gflow { gap: 22px; } .mflow .gflow li:not(:last-child)::after { top: 54px; bottom: -18px; left: 23px; } }
.mflow .gflow h3 { margin-top: 14px; font-size: 15.5px; }
.mflow .gflow p { font-size: 13.5px; }
@media (max-width: 760px) { .mflow { padding: 20px 18px; } }
/* The branch: the last step's options as small chips, each joined to one bracket line */
.mflow .gflow > li.mflow-branch { position: relative; }
.mflow-branch h3 { margin-top: 0 !important; }
.mflow-branch ul { list-style: none; margin: 12px 0 0; padding: 0 0 0 18px; display: grid; gap: 8px; position: relative; }
.mflow-branch ul::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--tint-line), var(--tint-line2)); opacity: .45; }
.mflow-branch ul li { position: relative; display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; color: var(--ink); background: #fff; box-shadow: 0 1px 2px rgba(14,23,21,.06); width: fit-content; }
.mflow-branch ul li::before { content: ""; position: absolute; left: -18px; top: 50%; width: 18px; height: 2px;
  background: var(--tint-line); opacity: .45; }
.mflow .gflow .mflow-branch .ic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--tint-line) 0%, var(--tint-line2) 100%); }
.mflow .gflow .mflow-branch .ic svg { width: 15px; height: 15px; }
.mflow .gflow .mflow-branch ul li::after { content: none; }
/* Phones: the branch lines up with the steps' text, below the joining line */
@media (max-width: 900px) { .mflow .gflow > li.mflow-branch { display: block; padding-left: 64px; } }

/* Hierarchy (guides): level cards on a spine beside a diagram of the containment path, as one unit */
.ghier { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 28px; align-items: stretch; }
.ghier-levels { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; position: relative; }
/* The spine joining the three levels, behind the cards' icon tiles */
.ghier-levels::before { content: ""; position: absolute; left: 47px; top: 40px; bottom: 40px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--tint-line), var(--tint-line2)); opacity: .45; }
.ghier-level {
  position: relative; width: 100%; display: grid; grid-template-columns: 56px 1fr 36px; gap: 18px; align-items: center; text-align: left;
  padding: 20px 20px 20px 20px; border: 0; border-radius: 18px; cursor: pointer; font: inherit; color: inherit;
  background: linear-gradient(135deg, #fff 40%, var(--tint-soft2) 100%); box-shadow: 0 1px 2px rgba(14,23,21,.05), 0 8px 24px -18px rgba(14,40,34,.35);
  transition: transform .5s cubic-bezier(.22,.8,.24,1), box-shadow .5s cubic-bezier(.22,.8,.24,1);
}
.ghier-level .ic { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--tint-line) 0%, var(--tint-line) 25%, var(--tint-line2) 100%);
  box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--tint-line) 70%, #000); transition: transform .55s cubic-bezier(.34,1.56,.64,1); }
.ghier-level .ic svg { width: 26px; height: 26px; }
.ghier-level .t small { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tint-ink); opacity: .8; }
.ghier-level .t b { display: block; margin-top: 2px; font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.ghier-level .t > span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.ghier-level .go { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--tint-ink);
  background: var(--tint-soft); transition: background .3s, color .3s; }
.ghier-level .go svg { width: 16px; height: 16px; transform: rotate(90deg); transition: transform .4s cubic-bezier(.22,.8,.24,1); }
@media (hover: hover) and (pointer: fine) {
  .ghier-level:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -22px rgba(14,40,34,.38), 0 2px 6px rgba(14,23,21,.05); }
  .ghier-level:hover .ic { transform: scale(1.06); }
  .ghier-level:hover .go { color: #fff; background: linear-gradient(135deg, var(--tint-line), var(--tint-line2)); }
  .ghier-level:hover .go svg { transform: rotate(90deg) translateX(2px); }
}
.ghier-level:focus-visible .go { color: #fff; background: linear-gradient(135deg, var(--tint-line), var(--tint-line2)); }

/* The diagram: the area's gradient, the path across the top, what an enclosure holds below */
.ghier-map { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 30px; padding: 34px 30px;
  border-radius: 22px; overflow: hidden; background: linear-gradient(to bottom right, var(--tint) 0%, var(--tint-comp) 100%); }
.ghier-map::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 60% at 0% 0%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 60%); }
.ghier-path { position: relative; display: flex; align-items: flex-start; }
.ghier-node { flex: none; width: 92px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0; border: 0; background: none;
  cursor: pointer; font: inherit; color: var(--ink); }
.ghier-node .ic { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; color: var(--tint-ink);
  background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.55), 0 10px 24px -14px rgba(14,40,34,.5);
  transition: transform .55s cubic-bezier(.34,1.56,.64,1), background .35s, color .35s, box-shadow .35s; }
.ghier-node .ic svg { width: 26px; height: 26px; }
.ghier-node b { font-size: 14.5px; font-weight: 700; }
.ghier-link { flex: 1; height: 2px; margin-top: 28px; border-radius: 2px; background: linear-gradient(90deg, var(--tint-line), var(--tint-line2)); opacity: .5; }
/* Lit: the pointed-at level's node fills with the area colours and grows; the ones before it tint */
.ghier-node.on .ic { color: #fff; transform: scale(1.12); background: linear-gradient(135deg, var(--tint-line) 0%, var(--tint-line2) 100%);
  box-shadow: 0 0 0 6px rgba(255,255,255,.7), 0 14px 28px -12px color-mix(in srgb, var(--tint-line) 70%, #000); }
.ghier-node.path .ic { color: var(--tint-line); }
.ghier.lit .ghier-node:not(.on):not(.path) { opacity: .55; }
.ghier-node { transition: opacity .3s; }
/* What an enclosure holds: hanging from the enclosure node by a bracket */
.ghier-holds { position: relative; margin-left: auto; width: min(100%, 330px); }
.ghier-holds small { display: block; margin: 0 0 12px 22px; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tint-ink); }
.ghier-holds ul { list-style: none; margin: 0; padding: 0 0 0 22px; display: grid; gap: 10px; position: relative; }
.ghier-holds ul::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--tint-line), var(--tint-line2)); opacity: .5; }
.ghier-holds li { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 16px 9px 9px; border-radius: 16px;
  background: rgba(255,255,255,.82); box-shadow: 0 1px 2px rgba(14,23,21,.05); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ghier-holds li::before { content: ""; position: absolute; left: -22px; top: 50%; width: 22px; height: 2px; background: var(--tint-line); opacity: .5; }
.ghier-holds .ic { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--tint-line) 0%, var(--tint-line2) 100%); }
.ghier-holds .ic svg { width: 18px; height: 18px; }
.ghier-holds b { display: block; font-size: 14px; font-weight: 700; color: var(--ink); }
.ghier-holds em { display: block; font-style: normal; font-size: 12.5px; color: var(--muted); }
/* The bracket's stem: down from the enclosure node (centre 46px in from the right), then round to the bracket */
.ghier-holds { padding-top: 16px; }
.ghier-holds::before { content: ""; position: absolute; right: 45px; top: -30px; height: 31px; width: 2px; background: var(--tint-line2); opacity: .5; }
.ghier-holds::after { content: ""; position: absolute; left: 0; right: 45px; top: 0; height: 40px; border-top: 2px solid var(--tint-line); border-left: 2px solid var(--tint-line);
  border-top-left-radius: 12px; opacity: .5; pointer-events: none; }
.ghier-holds ul::before { top: 0; }
@media (max-width: 1000px) {
  .ghier { grid-template-columns: 1fr; }
  .ghier-holds { margin-left: 0; width: 100%; }
  .ghier-holds::before, .ghier-holds::after { display: none; }
  .ghier-holds { padding-top: 0; }
  .ghier-holds ul::before { top: 22px; }
}
@media (max-width: 560px) {
  .ghier-level { grid-template-columns: 48px 1fr 32px; gap: 14px; padding: 16px; }
  .ghier-level .ic { width: 48px; height: 48px; border-radius: 14px; }
  .ghier-levels::before { left: 39px; }
  .ghier-level .t b { font-size: 19px; }
  .ghier-map { padding: 24px 18px; gap: 24px; }
  .ghier-node { width: 72px; } .ghier-node .ic { width: 48px; height: 48px; } .ghier-link { margin-top: 23px; }
}
@media (prefers-reduced-motion: reduce) { .ghier-level, .ghier-level .ic, .ghier-node .ic { transition: none; } }

/* Compare: capabilities down the side, one coloured column per type */
.gcmp { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: #fff; }
.gcmp table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.gcmp th, .gcmp td { padding: 16px 20px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); }
.gcmp tbody tr:last-child > * { border-bottom: 0; }
.gcmp thead th { color: #fff; font-weight: 400; }
.gcmp thead th b { display: block; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.gcmp thead th span { display: block; font-size: 13px; opacity: .85; }
.gcmp .gcmp-corner { width: 34%; color: var(--muted); background: #fff; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; vertical-align: bottom; }
.gcmp .tone-green { background: #2A9D55; } .gcmp .tone-clay { background: #C46B3F; } .gcmp .tone-yellow { background: #A87E22; }
/* The row label stays a table cell (so it fills the row's full height); its icon and text sit in .cap */
.gcmp tbody th { background: #fff; font-weight: 400; }
.gcmp tbody th .cap { display: flex; gap: 14px; align-items: center; }
.gcmp tbody th .ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--tint-soft); color: var(--tint-ink); }
.gcmp tbody th .ic svg { width: 20px; height: 20px; }
.gcmp tbody th b { display: block; font-size: 15.5px; font-weight: 600; color: var(--ink); }
.gcmp tbody th small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--muted); }
/* Every column reads from the left, like the capability column */
.gcmp td { border-left: 1px solid var(--line); text-align: left; }
.gcmp .stat { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; }
.gcmp .stat::before { content: ""; width: 20px; height: 20px; border-radius: 50%; flex: none; background: center / 14px no-repeat; }
.gcmp .stat.yes { color: #1F7A45; }
.gcmp .stat.yes::before { background-color: #DDF3E5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%231F7A45'%3E%3Cpath d='m382-339.38 345.54-345.54q8.92-8.93 20.88-9.12 11.96-.19 21.27 9.12 9.31 9.31 9.31 21.38 0 12.08-9.31 21.39l-362.38 363q-10.85 10.84-25.31 10.84-14.46 0-25.31-10.84l-167-167q-8.92-8.93-8.8-21.2.11-12.26 9.42-21.57t21.38-9.31q12.08 0 21.39 9.31L382-339.38Z'/%3E%3C/svg%3E"); }
.gcmp .stat.no { color: var(--muted-2); }
.gcmp .stat.no::before { background-color: #EEF1F0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%237A8684'%3E%3Cpath d='M480-437.85 277.08-234.92q-8.31 8.3-20.89 8.5-12.57.19-21.27-8.5-8.69-8.7-8.69-21.08 0-12.38 8.69-21.08L437.85-480 234.92-682.92q-8.3-8.31-8.5-20.89-.19-12.57 8.5-21.27 8.7-8.69 21.08-8.69 12.38 0 21.08 8.69L480-522.15l202.92-202.93q8.31-8.3 20.89-8.5 12.57-.19 21.27 8.5 8.69 8.7 8.69 21.08 0 12.38-8.69 21.08L522.15-480l202.93 202.92q8.3 8.31 8.5 20.89.19 12.57-8.5 21.27-8.7 8.69-21.08 8.69-12.38 0-21.08-8.69L480-437.85Z'/%3E%3C/svg%3E"); }
.gcmp td small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); }
@media (max-width: 900px) {
  .gflow { grid-auto-flow: row; grid-template-columns: 1fr; gap: 26px; }
  .gflow li { display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; align-items: start; }
  .gflow .ic { grid-row: span 2; width: 48px; height: 48px; }
  .gflow .ic svg { width: 22px; height: 22px; }
  .gflow h3 { margin-top: 4px; }
  .gflow p { margin-top: 4px; max-width: none; }
  .gflow li:not(:last-child)::after { top: 56px; bottom: -22px; left: 23px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--tint-line), var(--tint-line2)); }
}
/* Phones: each capability becomes a card listing the three types */
@media (max-width: 760px) {
  .gcmp { border: 0; background: none; border-radius: 0; overflow: visible; }
  .gcmp thead { display: none; }
  .gcmp table, .gcmp tbody, .gcmp tr, .gcmp th, .gcmp td { display: block; width: auto; }
  .gcmp tr { margin-bottom: 12px; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: #fff; }
  .gcmp tbody th { border-bottom: 1px solid var(--line); }
  .gcmp tbody tr:last-child > * { border-bottom: 1px solid var(--line); }
  .gcmp tbody tr > :last-child { border-bottom: 0 !important; }
  .gcmp td { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; border-left: 0; text-align: left; padding: 12px 18px; }
  .gcmp td::before { content: attr(data-type); font-size: 14px; font-weight: 600; color: var(--ink); }
  .gcmp td small { grid-column: 1 / -1; margin-top: 2px; }
}

/* Close: the outcomes as the same stepper as the flow sections (.gflow) */
.guide-close .mpager { margin-top: 64px; }


@media (max-width: 900px) {
  .gqa { grid-template-columns: 1fr; }
  .gqa-stage { position: relative; top: 0; height: 440px; }
  .gqa-stage-wrap { position: relative; top: 0; }
  .gqa-stage .device-phone { width: 190px; }
}
@media (max-width: 560px) {
  .guide-hero .hero-inner { padding-top: calc(56px + var(--header-h)); padding-bottom: 48px; }
  /* Room for the back link above the banner text */
  .guidepage:has(.guide-back) .guide-hero .hero-inner { padding-top: calc(76px + var(--header-h)); }
  .guide-part, .guide-close { padding: 56px 0; }
  .guide-head { margin-bottom: 28px; }
  .gqa-stage { height: 380px; padding: 18px; }
  .gqa-stage .device-phone { width: 164px; }
  .gqa-grid { grid-template-columns: 1fr; }
  .guide-jump .chip { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .guide-kicker { animation: none; }
  .guidepage .reveal, .guidepage .reveal:not(.in) { transition: none; transform: none; opacity: 1; }
  .gcard-thumb .device-phone, .gqa-grid button { transition: none; }
}