/* RevMatic AI | site.css
   The shared design system. Source of truth: the approved mockups (home hero2, the Services page, the
   "Pick your business" section of hero1). Class names and rules are documented in /DESIGN.md.
   Breakpoints: 768 (tablet), 1024 (desktop layouts), 1180 (full header nav, picker side list).

   1  Tokens            7  Section heads       13 Quiet image band     19 Prose, split, lists
   2  Base               8  Hero                14 Steps                20 Reveal motion
   3  Utilities          9  Numbered accordion  15 FAQ                  21 Reduced motion, print
   4  Buttons, links    10  Example audit card  16 Apps strip
   5  Header            11  Business picker     17 Closing band
   6  Mobile menu       12  Leo line            18 Footer
*/

/* ================================================================ 1 Tokens */
:root {
  --void: #07060B;
  --plum: #16111F;
  --raise: #1E1829;
  --raise-2: #2A2238;
  --platinum: #F3F0F8;
  --smoke: #A69DB8;
  --plasma: #8C70FF;
  --plasma-soft: #BBA9FF;
  --signal: #FF4F9A;
  --signal-soft: #FF8FC0;
  --ember: #FF8A3C;
  --ember-hi: #FF9A55;

  --ink-88: rgba(243, 240, 248, 0.88);
  --ink-78: rgba(243, 240, 248, 0.78);
  --ink-70: rgba(243, 240, 248, 0.70);
  --ink-60: rgba(243, 240, 248, 0.60);
  --line: rgba(243, 240, 248, 0.10);
  --line-strong: rgba(243, 240, 248, 0.22);
  --line-hover: rgba(243, 240, 248, 0.50);

  --afterglow: linear-gradient(100deg, #8C70FF 0%, #FF4F9A 52%, #FF8A3C 100%);
  --rule: linear-gradient(90deg, #8C70FF, rgba(140, 112, 255, 0));

  --font-display: 'Archivo', system-ui, sans-serif;
  --font-text: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --font-sig: 'Instrument Serif', Georgia, serif;

  --fs-display: clamp(44px, 1.6rem + 3.4vw, 76px);       /* home h1 */
  --fs-h1: clamp(2.3rem, 1rem + 3.6vw, 4.4rem);          /* inner page h1 */
  --fs-h2: clamp(2rem, 1rem + 2.5vw, 3.4rem);            /* section h2 */
  --fs-h2-xl: clamp(2.2rem, 1rem + 3.3vw, 4.1rem);       /* closing band h2 */
  --fs-h3: clamp(1.5rem, 1rem + 1vw, 2.1rem);            /* accordion titles */
  --fs-lede: clamp(1.05rem, 0.95rem + 0.42vw, 1.25rem);  /* hero sub, close line */
  --fs-body: 16px;
  --fs-small: 15px;
  --fs-mono: 12px;
  --fs-tagline: clamp(2.5rem, 1.2rem + 4.6vw, 5.6rem);

  --gutter: clamp(16px, 5vw, 72px);
  --container: 1320px;
  --header-h: 72px;
  --sec-y: clamp(64px, 3rem + 4.5vw, 120px);
  --bleed: calc(var(--gutter) + max(0px, (100vw - 1464px) / 2));
  --stick: 24px;

  --r-btn: 10px;
  --r-card: 20px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --chk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.9 2.9 6.1-6.6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9.5M8.5 3.8 12.7 8l-4.2 4.2' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (max-width: 767px) {
  :root { --header-h: 56px; --r-card: 16px; }
}

/* ================================================================ 2 Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0; min-height: 100vh; background: var(--void); color: var(--platinum);
  font: 400 var(--fs-body)/1.6 var(--font-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
@supports (overflow: clip) { body { overflow-x: clip; } }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
/* zero specificity, so any component's own padding wins */
:where(ul[class], ol[class], nav ul, nav ol, aside ul, aside ol) { list-style: none; padding: 0; }
[hidden]:not([hidden="until-found"]) { display: none !important; }
::selection { background: rgba(140, 112, 255, 0.45); color: var(--platinum); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--plasma-soft); outline-offset: 3px; border-radius: 6px; }
svg.arr, .arr { width: 16px; height: 16px; flex: none; }
main { display: block; }

/* ================================================================ 3 Utilities */
.wrap { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
/* the reading column keeps the page's left edge (every section starts at the gutter) and only limits its measure */
.wrap--narrow > * { max-width: 880px; }
.vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.nw { white-space: nowrap; }
.soft { color: var(--plasma-soft); }
.glow-text { background: var(--afterglow); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--signal); }
.mono {
  font: 500 var(--fs-mono)/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--smoke);
}
.skip {
  position: fixed; left: 12px; top: 12px; z-index: 100; padding: 12px 16px; border-radius: var(--r-btn);
  background: var(--platinum); color: var(--void); font-weight: 600; transform: translateY(-160%);
  transition: transform 0.2s var(--ease-out);
}
.skip:focus-visible { transform: none; outline-color: var(--ember); }

/* ================================================================ 4 Buttons, links */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px; border-radius: var(--r-btn); border: 1px solid transparent;
  font: 600 16px/1.2 var(--font-text); white-space: nowrap; cursor: pointer; text-align: center;
  transition: transform 0.18s var(--ease-out), background-color 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.btn .arr { transition: transform 0.18s var(--ease-out); }
.btn:hover .arr { transform: translateX(2px); }
.btn--primary { background: var(--ember); color: var(--void); box-shadow: 0 10px 34px rgba(255, 138, 60, 0.28); }
.btn--primary:hover { transform: translateY(-1px); background: var(--ember-hi); }
.btn--primary:active { transform: none; }
.btn--quiet { background: rgba(7, 6, 11, 0.35); color: var(--platinum); border-color: var(--line-strong); }
.btn--quiet:hover { border-color: var(--line-hover); }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: 15px; box-shadow: none; }
.btn--block { width: 100%; }

.textlink {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font: 500 15.5px/1.3 var(--font-text); color: var(--platinum);
}
.textlink > span:first-child, .textlink__t { border-bottom: 1px solid var(--line-strong); padding-bottom: 4px; transition: border-color 0.18s; }
.textlink:hover > span:first-child, .textlink:hover .textlink__t { border-color: var(--plasma-soft); }
.textlink .arr { color: var(--plasma-soft); transition: transform 0.18s var(--ease-out); }
.textlink:hover .arr { transform: translateX(3px); }

.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 34px; }
.ctas--wide { gap: 14px 28px; }

/* ================================================================ 5 Header */
.hdr {
  position: absolute; top: 0; left: 0; right: 0; z-index: 50; height: var(--header-h);
  border-bottom: 1px solid rgba(243, 240, 248, 0.06);
  transition: transform 0.4s var(--ease-out), background-color 0.25s, border-color 0.25s;
}
.hdr::before {
  content: ""; position: absolute; inset: 0 0 -24px 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 6, 11, 0.72), rgba(7, 6, 11, 0));
  transition: opacity 0.25s;
}
.js .hdr { position: fixed; }
[data-hdr="up"] .hdr, .menu-open .hdr {
  background: rgba(7, 6, 11, 0.86); border-bottom-color: var(--line);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
}
[data-hdr="up"] .hdr::before, .menu-open .hdr::before { opacity: 0; }
[data-hdr="down"]:not(.menu-open) .hdr { transform: translateY(-101%); }
.hdr__in {
  display: flex; align-items: center; gap: 16px; height: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter);
}
.wordmark {
  /* inline-block, not flex: a flex item would eat the space before "AI" */
  display: inline-block; padding: calc((44px - 1em) / 2) 0;
  font-family: var(--font-display); font-style: italic; font-weight: 800; font-stretch: 112%;
  letter-spacing: -0.01em; font-size: 21px; line-height: 1; white-space: nowrap; color: var(--platinum);
}
.wordmark .ai {
  padding-right: 0.12em; background: var(--afterglow); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--signal);
}
.nav { display: none; margin: 0 auto; }
.nav ul { display: flex; gap: 4px; }
.nav a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  font: 500 15px/1 var(--font-text); color: var(--smoke); white-space: nowrap; transition: color 0.18s;
}
.nav a:hover, .nav a[aria-current] { color: var(--platinum); }
.nav a[aria-current]::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--plasma);
}
.hdr__act { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.hdr__call {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; height: 44px; padding: 0 10px;
  border-radius: var(--r-btn); font: 500 15px/1 var(--font-text); color: var(--platinum); white-space: nowrap;
}
.hdr__call svg { width: 18px; height: 18px; flex: none; }
.hdr__call .num { display: none; }
.hdr__call:hover { color: var(--plasma-soft); }
.hdr__book { display: none; }
.menubtn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: var(--r-btn); border: 1px solid var(--line-strong); background: rgba(7, 6, 11, 0.35);
}
.menubtn i {
  position: absolute; left: 13px; right: 13px; height: 1.6px; border-radius: 2px; background: currentColor;
  transition: transform 0.3s var(--ease-out), top 0.3s var(--ease-out);
}
.menubtn i:first-child { top: 17px; }
.menubtn i:last-child { top: 25px; }
.menubtn[aria-expanded="true"] i:first-child { top: 21px; transform: rotate(45deg); }
.menubtn[aria-expanded="true"] i:last-child { top: 21px; transform: rotate(-45deg); }
html:not(.js) .menubtn { display: none; }
@media (min-width: 768px) {
  .hdr__book { display: inline-flex; }
}
@media (min-width: 1180px) {
  .nav { display: block; }
  .hdr__act { margin-left: 0; }
  .menubtn { display: none; }
  .hdr__call .num { display: inline; }
}
@media (min-width: 1180px) and (max-width: 1279px) {
  .nav a { padding: 0 9px; font-size: 14.5px; }
}
@media (max-width: 767px) {
  .wordmark { font-size: 19px; }
  .hdr__act { gap: 6px; }
}

/* ================================================================ 6 Mobile menu */
.menu {
  position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column;
  padding: calc(var(--header-h) + 12px) var(--gutter) calc(24px + env(safe-area-inset-bottom));
  background: var(--void); overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity 0.25s ease, transform 0.4s var(--ease-out), visibility 0s linear 0.4s;
}
.menu::before {
  content: ""; position: fixed; left: -20%; right: -20%; bottom: -30%; height: 70%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 50% at 22% 100%, rgba(140, 112, 255, 0.28), rgba(140, 112, 255, 0) 70%),
    radial-gradient(36% 46% at 58% 100%, rgba(255, 79, 154, 0.18), rgba(255, 79, 154, 0) 70%),
    radial-gradient(32% 42% at 88% 100%, rgba(255, 138, 60, 0.16), rgba(255, 138, 60, 0) 70%);
}
.menu-open .menu { opacity: 1; visibility: visible; transform: none; transition: opacity 0.25s ease, transform 0.4s var(--ease-out), visibility 0s; }
.menu-open, .menu-open body { overflow: hidden; }
.menu__nav a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 800; font-stretch: 104%; font-size: clamp(26px, 6.4vw, 34px);
  line-height: 1.1; letter-spacing: -0.02em; color: var(--platinum);
}
.menu__nav a .arr { width: 20px; height: 20px; color: var(--plasma-soft); }
.menu__nav a[aria-current] { color: var(--plasma-soft); }
.menu__more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; margin-top: 18px; }
.menu__more a { display: flex; align-items: center; min-height: 44px; font: 500 16px/1.3 var(--font-text); color: var(--ink-78); }
.menu__more a:hover { color: var(--platinum); }
.menu__label { display: block; margin: 22px 0 4px; }
.menu__foot { margin-top: auto; padding-top: 28px; display: grid; gap: 10px; }
.menu__contact { display: flex; flex-wrap: wrap; gap: 0 18px; }
.menu__contact a { display: inline-flex; align-items: center; min-height: 44px; font: 500 15px/1.3 var(--font-text); color: var(--ink-88); }
@media (min-width: 1180px) { .menu { display: none; } }

/* ================================================================ 7 Section heads */
.section { position: relative; padding: var(--sec-y) 0; border-top: 1px solid var(--line); }
.section--flush { border-top: 0; }
.section--tight { padding: calc(var(--sec-y) * 0.6) 0; }
.section--glow { background: radial-gradient(60% 50% at 78% 0%, rgba(140, 112, 255, 0.10), rgba(7, 6, 11, 0) 70%), var(--void); }
.section--glow-l { background: radial-gradient(55% 45% at 12% 0%, rgba(255, 79, 154, 0.07), rgba(7, 6, 11, 0) 70%), var(--void); }

.kicker {
  display: flex; align-items: center; gap: 12px; margin: 0 0 18px;
  font: 500 12.5px/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--smoke);
}
.kicker::before { content: ""; width: 28px; height: 1px; flex: none; background: var(--rule); }
.kicker--plain::before { display: none; }
.kicker--accent { color: var(--plasma-soft); }

.shead { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: clamp(28px, 1rem + 2.4vw, 56px); }
.shead--center { text-align: center; justify-items: center; }
.shead--center .kicker::after { content: ""; width: 28px; height: 1px; flex: none; background: linear-gradient(270deg, #8C70FF, rgba(140, 112, 255, 0)); }
.h2 {
  font-family: var(--font-display); font-weight: 800; font-stretch: 108%; letter-spacing: -0.022em;
  font-size: var(--fs-h2); line-height: 1; color: var(--platinum); text-wrap: balance;
}
.h2 .ln { display: block; }
.h2 .ln + .soft, .h2 .soft.ln { margin-top: 0.04em; }
.h3 { font: 600 clamp(1.15rem, 1rem + 0.4vw, 1.35rem)/1.3 var(--font-text); letter-spacing: -0.005em; color: var(--platinum); }
.lede { max-width: 34em; font: 400 clamp(1rem, 0.95rem + 0.3vw, 1.1rem)/1.58 var(--font-text); color: var(--ink-88); }
.lede b, .lede strong { font-weight: 500; color: var(--platinum); }
.pull { max-width: 22em; font: 400 clamp(1.6rem, 1.1rem + 1.25vw, 2.45rem)/1.14 var(--font-sig); font-style: italic; color: var(--platinum); text-wrap: balance; }
@media (min-width: 1100px) {
  .shead--split { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 20px 64px; align-items: end; }
}
@media (max-width: 767px) {
  .kicker { margin-bottom: 14px; font-size: 12px; }
  .h2 { font-size: 31px; font-stretch: 104%; line-height: 1.03; }
  .lede { font-size: 16px; }
}

/* ================================================================ 8 Hero
   .hero          home: full-bleed photo or video, headline left over a left scrim (hero2)
   .hero--page    inner pages: shorter, photo feathered in from the right (Services mockup)
   .hero--bright  add for a daylight photo (the ocean view): stronger scrim so white type always reads */
.hero {
  --hero-pos: 50% 50%; --hero-pos-m: 50% 50%; --hero-filter: none;
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100svh;
}
.hero__media { position: absolute; inset: 0; z-index: -3; overflow: hidden; background: var(--plum); }
.hero__media img, .hero__media video {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;
  object-position: var(--hero-pos); filter: var(--hero-filter);
}
.hero__media video { opacity: 0; transition: opacity 1.4s ease; }
.hero__media video.is-playing { opacity: 1; }
.hero__scrim {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7, 6, 11, 0.95) 0%, rgba(7, 6, 11, 0.88) 30%, rgba(7, 6, 11, 0.55) 48%, rgba(7, 6, 11, 0.14) 66%, rgba(7, 6, 11, 0.04) 100%),
    linear-gradient(0deg, rgba(7, 6, 11, 0.96) 0%, rgba(7, 6, 11, 0) 24%),
    linear-gradient(180deg, rgba(7, 6, 11, 0.62) 0%, rgba(7, 6, 11, 0) 20%);
}
/* daylight (the ocean view): dark behind the words, then clear, so the water keeps its color */
.hero--bright .hero__scrim {
  background:
    linear-gradient(90deg, rgba(7, 6, 11, 0.95) 0%, rgba(7, 6, 11, 0.9) 34%, rgba(7, 6, 11, 0.68) 47%, rgba(7, 6, 11, 0.24) 59%, rgba(7, 6, 11, 0) 70%),
    linear-gradient(0deg, rgba(7, 6, 11, 0.96) 0%, rgba(7, 6, 11, 0) 22%),
    linear-gradient(180deg, rgba(7, 6, 11, 0.55) 0%, rgba(7, 6, 11, 0) 15%);
}
.hero__glow {
  position: absolute; z-index: -1; pointer-events: none; width: 980px; height: 820px; right: -220px; top: 46%;
  transform: translateY(-50%);
  background: radial-gradient(closest-side, rgba(140, 112, 255, 0.22), rgba(140, 112, 255, 0.06) 58%, rgba(140, 112, 255, 0) 100%);
}
.hero--bright .hero__glow { opacity: 0.6; }
.hero--bright:not(.hero--page) .hero__glow { opacity: 0.22; }   /* the violet would grey the water */
/* wide screens: --hero-pos-xl (optional) moves the photo's focus where the headline sits on the left */
@media (min-width: 1100px) {
  .hero:not(.hero--page) .hero__media img, .hero:not(.hero--page) .hero__media video { object-position: var(--hero-pos-xl, var(--hero-pos)); }
}
.hero__in { flex: 1 0 auto; display: flex; align-items: center; padding-top: calc(var(--header-h) + 32px); padding-bottom: 96px; }
.hero__copy { max-width: 780px; }
.hero h1 { font-weight: 800; }
.hero__eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; font: 500 12.5px/1.45 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--smoke); }
.hero__eyebrow::before { content: ""; width: 28px; height: 1px; flex: none; background: var(--afterglow); }
.hero__title {
  display: block; font-family: var(--font-display); font-stretch: 112%; font-weight: 800;
  font-size: var(--fs-display); line-height: 0.98; letter-spacing: -0.024em; color: var(--platinum);
}
.hero__title .ln { display: block; }
/* a breadcrumb over an inner hero (the group pages of /who-we-help/) */
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; margin: -12px 0 4px; padding: 0; list-style: none; font: 500 12px/1.4 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-60); }
.crumbs li + li::before { content: "/"; content: "/" / ""; margin-right: 10px; color: rgba(140, 112, 255, 0.55); }
.crumbs a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; color: var(--ink-78); transition: color 0.18s; }
.crumbs a:hover { color: var(--platinum); }
.hero__title .gap { margin-top: 0.08em; }
.hero__sub { margin-top: 30px; max-width: 33em; font: 400 var(--fs-lede)/1.55 var(--font-text); color: var(--ink-88); }
.hero__sub strong { font-weight: 500; color: var(--platinum); }
.hero .ctas { margin-top: 38px; }
.hero__foot {
  position: absolute; left: 0; right: 0; bottom: 26px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
}
.hero__foot .r { justify-self: end; }
.hero__cue { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--platinum); transition: color 0.18s; }
.hero__cue:hover { color: var(--plasma-soft); }
.hero__cue svg { width: 14px; height: 14px; }
/* phones: the cue sits under the Leo line (the strip at the bottom has no room for it) */
.hero__cue--m { display: none; }
/* the pause button for a looping hero video: made by site.js only while a clip can play (768px and up, motion on),
   so it never shows with JavaScript off, on phones or under reduced motion. Bottom right, clear of the copy. */
.vidctl {
  position: absolute; z-index: 2; right: var(--bleed); bottom: 24px;
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--line-strong); border-radius: 50%; background: rgba(7, 6, 11, 0.55); color: var(--platinum);
  cursor: pointer; transition: color 0.18s, border-color 0.18s;
}
.vidctl:hover { color: var(--plasma-soft); border-color: var(--line-hover); }
.vidctl:focus-visible { border-radius: 50%; }
.vidctl svg { width: 14px; height: 14px; }
.vidctl .i-play, .vidctl.is-held .i-pause { display: none; }
.vidctl.is-held .i-play { display: block; }
.vidctl[hidden] { display: none; }
.hero:not(.hero--page) > .vidctl { bottom: 84px; }   /* the home hero keeps its bottom strip; the button sits just above it */
/* paused: the home hero's slow camera push holds too */
.hero.is-held .hero__media img, .hero.is-held .hero__media video { animation-play-state: paused; }

/* inner page hero (Services mockup) */
.hero--page { min-height: clamp(600px, calc(100svh - 196px), 800px); }
.hero--page .hero__media {
  left: 30%; background: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.35) 20%, rgba(0, 0, 0, 0.8) 40%, #000 56%), linear-gradient(180deg, #000 0%, #000 52%, rgba(0, 0, 0, 0.45) 74%, rgba(0, 0, 0, 0.08) 90%, transparent 97%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.35) 20%, rgba(0, 0, 0, 0.8) 40%, #000 56%), linear-gradient(180deg, #000 0%, #000 52%, rgba(0, 0, 0, 0.45) 74%, rgba(0, 0, 0, 0.08) 90%, transparent 97%);
  mask-composite: intersect;
}
.hero--page .hero__scrim {
  background:
    linear-gradient(180deg, rgba(7, 6, 11, 0.72) 0%, rgba(7, 6, 11, 0) 18%),
    radial-gradient(55% 70% at 16% 52%, rgba(7, 6, 11, 0.78), rgba(7, 6, 11, 0) 72%);
}
.hero--page.hero--bright .hero__scrim {
  background:
    linear-gradient(180deg, rgba(7, 6, 11, 0.82) 0%, rgba(7, 6, 11, 0) 22%),
    radial-gradient(60% 75% at 16% 52%, rgba(7, 6, 11, 0.86), rgba(7, 6, 11, 0) 74%);
}
.hero--page .hero__glow { width: 1000px; height: 820px; right: -280px; top: -160px; transform: none; background: radial-gradient(closest-side, rgba(140, 112, 255, 0.24), rgba(140, 112, 255, 0)); }
.hero--page .hero__in { padding-top: calc(var(--header-h) + 40px); padding-bottom: 64px; }
.hero--page .hero__copy { max-width: 900px; }
.hero--page .hero__eyebrow { gap: 12px; margin-bottom: 24px; letter-spacing: 0.12em; }
.hero--page .hero__eyebrow::before { background: var(--rule); }
.hero--page .hero__title { font-size: var(--fs-h1); font-stretch: 108%; letter-spacing: -0.028em; line-height: 0.99; text-wrap: balance; }
.hero--page .hero__title .soft { margin-top: 0; }
.hero--page .hero__sub { margin-top: 28px; }
.hero--page .ctas { margin-top: 34px; gap: 14px 28px; }

@media (min-width: 1100px) and (max-height: 820px) {
  .hero:not(.hero--page) .hero__title { font-size: 68px; }
  .hero:not(.hero--page) .hero__in { padding-top: calc(var(--header-h) + 20px); }
}
@media (min-width: 1100px) and (max-height: 760px) {
  .hero:not(.hero--page) .hero__title { font-size: 60px; }
  .hero__eyebrow { margin-bottom: 20px; }
  .hero__sub { margin-top: 22px; }
  .hero .ctas { margin-top: 28px; }
  .hero:not(.hero--page) .hero__in { padding-bottom: 76px; }
}
@media (min-width: 1024px) and (max-height: 860px) {
  .hero--page .hero__title { font-size: clamp(2.3rem, 1rem + 3.2vw, 4rem); }
  .hero--page .hero__in { padding-top: calc(var(--header-h) + 24px); padding-bottom: 40px; }
}
/* inner hero, tablet and phone: the photo becomes a band on top, the words sit under it */
@media (max-width: 1023px) {
  .hero--page { --band: clamp(250px, 44vw, 420px); min-height: 0; }
  .hero--page .hero__media { left: 0; bottom: auto; height: var(--band); -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 96%); mask-image: linear-gradient(180deg, #000 50%, transparent 96%); -webkit-mask-composite: source-over; mask-composite: add; }
  .hero--page .hero__media img, .hero--page .hero__media video { object-position: var(--hero-pos-m); }
  .hero--page .hero__scrim { background: linear-gradient(180deg, rgba(7, 6, 11, 0.8) 0%, rgba(7, 6, 11, 0.1) 16%, rgba(7, 6, 11, 0) 24%); }
  .hero--page.hero--bright .hero__scrim { background: linear-gradient(180deg, rgba(7, 6, 11, 0.86) 0%, rgba(7, 6, 11, 0.2) 18%, rgba(7, 6, 11, 0) 28%); }
  .hero--page .hero__glow { width: 520px; height: 520px; right: -240px; top: -120px; }
  .hero--page .hero__in { align-items: flex-start; padding-top: calc(var(--band) - 28px); padding-bottom: 36px; }
  .hero--page > .vidctl { top: calc(var(--header-h) + 16px); bottom: auto; }
}
@media (max-width: 1099px) {
  .hero:not(.hero--page) .hero__in { padding-bottom: 120px; }
  /* tablet: the headline spans most of the width, so the daylight scrim reaches further right */
  .hero--bright:not(.hero--page) .hero__scrim {
    background:
      linear-gradient(90deg, rgba(7, 6, 11, 0.95) 0%, rgba(7, 6, 11, 0.88) 45%, rgba(7, 6, 11, 0.62) 72%, rgba(7, 6, 11, 0.34) 100%),
      linear-gradient(0deg, rgba(7, 6, 11, 0.98) 0%, rgba(7, 6, 11, 0) 30%),
      linear-gradient(180deg, rgba(7, 6, 11, 0.8) 0%, rgba(7, 6, 11, 0) 24%);
  }
  .hero__foot { grid-template-columns: auto 1fr auto; }
  .hero__foot .hero__cue { justify-self: center; }
  .hero__foot .mono { white-space: nowrap; }
}
/* home hero, phone (hero2): words first, the photo as a band at the bottom */
@media (max-width: 767px) {
  .hero:not(.hero--page) { min-height: 0; }
  .hero:not(.hero--page) .hero__media { inset: auto 0 0 0; height: var(--hero-m-h, 420px); }
  .hero:not(.hero--page) .hero__media img, .hero:not(.hero--page) .hero__media video { object-position: var(--hero-pos-m); }
  .hero:not(.hero--page) .hero__scrim {
    inset: auto 0 0 0; height: var(--hero-m-h, 420px);
    background: linear-gradient(180deg, var(--void) 0%, rgba(7, 6, 11, 0.55) 34%, rgba(7, 6, 11, 0.10) 62%, rgba(7, 6, 11, 0.55) 100%);
  }
  /* the ocean band: dark where the Leo line sits over its top, clear through the water, dark again under the strip */
  .hero--bright:not(.hero--page) .hero__scrim {
    background: linear-gradient(180deg, var(--void) 0%, rgba(7, 6, 11, 0.72) 12%, rgba(7, 6, 11, 0.3) 26%, rgba(7, 6, 11, 0) 44%, rgba(7, 6, 11, 0) 64%, rgba(7, 6, 11, 0.5) 82%, rgba(7, 6, 11, 0.9) 100%);
  }
  .hero:not(.hero--page) .hero__glow { width: 520px; height: 520px; right: -230px; top: auto; bottom: -160px; transform: none; }
  .hero:not(.hero--page) .hero__in { display: block; padding-top: calc(var(--header-h) + 26px); padding-bottom: calc(var(--hero-m-h, 420px) - 64px); }
  .hero__eyebrow { margin-bottom: 14px; font: 500 13.5px/1.4 var(--font-text); letter-spacing: 0; text-transform: none; color: var(--smoke); }
  .hero__eyebrow::before { display: none; }
  .hero__title { font-stretch: 100%; font-size: clamp(30px, 9.6vw, 36px); line-height: 1.02; letter-spacing: -0.02em; }
  .hero--page .hero__title { font-size: clamp(2.05rem, 1.2rem + 4.2vw, 2.5rem); line-height: 1.02; font-stretch: 104%; }
  .hero__sub, .hero--page .hero__sub { margin-top: 16px; font-size: 16.5px; line-height: 1.5; }
  .hero .ctas { flex-direction: column; align-items: stretch; margin-top: 22px; gap: 10px; }
  .hero .ctas .btn { width: 100%; }
  .hero .ctas .btn--quiet { min-height: 48px; }
  .hero .ctas .textlink { align-self: center; }
  .hero__foot { bottom: 18px; grid-template-columns: 1fr; gap: 4px; }
  .hero__foot .hero__cue { display: none; }
  .hero__cue--m { display: inline-flex; margin-top: 10px; color: var(--plasma-soft); }
  .hero__foot .r { justify-self: start; }
  .hero__foot .mono { font-size: 11px; color: var(--ink-70); }
  .vidctl { display: none !important; }
}

/* ================================================================ 9 Numbered accordion (Services mockup)
   .acc-layout = sticky numbered index (desktop) + the list. .jump = the phone row of group chips. */
.acc-layout { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.acc-index { display: none; }
.acc { min-width: 0; }
/* no scroll-margin here: html's scroll-padding-top already clears the header (a second one doubled it) */
.acc__item { position: relative; border-top: 1px solid var(--line); }
.acc > .acc__item:last-of-type { border-bottom: 1px solid var(--line); }
.acc__head { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr) 44px; gap: 0 12px; align-items: start; padding: 30px 0 28px; }
.js .acc__head { cursor: pointer; }
/* the whole head is the button's tap area */
.js .acc__btn::after { content: ""; position: absolute; inset: 0; }
.acc__num {
  justify-self: start; font-family: var(--font-display); font-weight: 800; font-stretch: 108%; font-size: 66px; line-height: 0.8;
  letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1.2px rgba(187, 169, 255, 0.5); transition: -webkit-text-stroke-color 0.2s;
}
.acc__head:hover .acc__num { -webkit-text-stroke-color: rgba(187, 169, 255, 0.8); }
.acc__item.is-open .acc__num, html:not(.js) .acc__num {
  background: var(--afterglow); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 0 transparent;
}
.acc__title {
  font-family: var(--font-display); font-weight: 800; font-stretch: 106%; letter-spacing: -0.02em;
  font-size: var(--fs-h3); line-height: 1.08; color: var(--platinum);
}
.acc__btn { display: block; width: 100%; margin: 0; padding: 0; text-align: left; font: inherit; letter-spacing: inherit; color: inherit; }
.acc__btn:focus-visible { outline-offset: 6px; }
.acc__preview { margin-top: 10px; font: 400 15.5px/1.5 var(--font-text); color: var(--ink-60); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc__preview .dot { color: rgba(187, 169, 255, 0.55); }
.acc__promise { display: none; margin-top: 12px; max-width: 34em; font: 400 clamp(1.25rem, 1.05rem + 0.5vw, 1.5rem)/1.32 var(--font-sig); font-style: italic; color: rgba(243, 240, 248, 0.84); }
.acc__item.is-open .acc__preview, html:not(.js) .acc__preview { display: none; }
.acc__item.is-open .acc__promise, html:not(.js) .acc__promise { display: block; }
.acc__pm { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--platinum); transition: border-color 0.2s, background-color 0.2s; }
.acc__pm svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.acc__pm .v { transform-origin: 8px 8px; transition: transform 0.25s var(--ease-out); }
.acc__head:hover .acc__pm { border-color: var(--line-hover); }
.acc__item.is-open .acc__pm { border-color: rgba(255, 79, 154, 0.55); background: rgba(255, 79, 154, 0.08); }
.acc__item.is-open .acc__pm .v { transform: rotate(90deg); }
html:not(.js) .acc__pm { display: none; }
.acc__inner { padding: 0 56px 36px 124px; }
.acc__item.is-open .acc__inner { animation: rise 0.45s var(--ease-out); }
.acc__rows { list-style: none; margin: 0; padding: 0; }
.acc__row { position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 8fr); gap: 8px 40px; padding: 18px 0 19px; border-top: 1px solid var(--line); }
.acc__row::before { content: ""; position: absolute; left: -22px; top: 28px; width: 5px; height: 5px; border-radius: 50%; background: var(--signal); opacity: 0; box-shadow: 0 0 10px var(--signal); transition: opacity 0.2s; }
.acc__row:hover::before { opacity: 1; }
.acc__row h3, .acc__row h4, .acc__row-t { margin: 0; font: 600 17px/1.4 var(--font-text); color: var(--platinum); letter-spacing: -0.003em; }
.acc__row p { margin: 0; font: 400 16px/1.6 var(--font-text); color: rgba(243, 240, 248, 0.74); }

.jump {
  position: sticky; top: 0; z-index: 30; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: rgba(7, 6, 11, 0.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: top 0.4s var(--ease-out);
}
[data-hdr="up"] .jump { top: calc(var(--header-h) - 1px); }
.jump .wrap { position: relative; padding-right: 0; }
/* position: relative makes the row the chips' offset parent, so the active chip is measured from the row */
.jump ul { position: relative; display: flex; gap: 2px; margin: 0; padding: 0 var(--gutter) 0 0; overflow-x: auto; scrollbar-width: none; }
.jump ul::-webkit-scrollbar { display: none; }
.jump .wrap::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 72px; pointer-events: none; background: linear-gradient(90deg, rgba(7, 6, 11, 0), rgba(7, 6, 11, 0.92) 70%); }
.jump a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 3px; white-space: nowrap; }
.jump a span { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border: 1px solid rgba(243, 240, 248, 0.14); border-radius: 999px; font: 500 13.5px/1 var(--font-text); color: var(--ink-78); transition: border-color 0.18s, color 0.18s, background-color 0.18s; }
.jump a.is-on span { border-color: rgba(255, 79, 154, 0.55); background: rgba(255, 79, 154, 0.08); color: var(--platinum); }
.jump li:first-child a { padding-left: 0; }
.section > .jump:first-child { margin: calc(-1 * var(--sec-y)) 0 clamp(32px, 6vw, 48px); }
.section > .jump:not(:first-child) { margin: -8px 0 28px; }
/* a section that keeps its own top hairline: the row's border would double it */
.section:not(.section--flush) > .jump:first-child { border-top: 0; }
/* phones and tablets: the sticky row sits under the header, so anything a link lands on below it clears the row too
   (html's scroll-padding-top clears the header) */
@media (max-width: 1023px) {
  .jump ~ [id], .jump ~ * [id] { scroll-margin-top: 52px; }
}

@media (min-width: 1024px) {
  .jump { display: none; }
  .acc-layout { grid-template-columns: 232px minmax(0, 1fr); gap: 88px; }
  .acc-index { display: block; position: sticky; top: calc(var(--stick) + 16px); align-self: start; padding-top: 4px; transition: top 0.4s var(--ease-out); }
  [data-hdr="up"] .acc-index { top: calc(var(--header-h) + 24px); }
  .acc-index .mono { display: block; margin-bottom: 16px; font-size: 12.5px; letter-spacing: 0.14em; }
  .acc-index ol { margin: 0; padding: 0; border-left: 1px solid var(--line); }
  .acc-index ol a { display: flex; align-items: baseline; gap: 14px; min-height: 44px; margin-left: -1px; padding: 12px 0 12px 18px; border-left: 2px solid transparent; font: 500 15px/1.3 var(--font-text); color: var(--smoke); transition: color 0.18s, border-color 0.18s; }
  .acc-index ol .n { flex: none; width: 20px; font: 500 12.5px/1 var(--font-mono); letter-spacing: 0.04em; color: rgba(166, 157, 184, 0.85); transition: color 0.18s; }
  .acc-index ol a:hover { color: var(--platinum); }
  .acc-index ol a.is-on { color: var(--platinum); border-left-color: var(--signal); }
  .acc-index ol a.is-on .n { color: var(--signal-soft); }
  .acc-index__cta { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
  .acc-index__cta p { margin: 0 0 8px; font: 400 21px/1.22 var(--font-sig); font-style: italic; color: var(--platinum); }
}
@media (max-width: 767px) {
  .acc__head { grid-template-columns: minmax(0, 1fr) 44px; grid-template-areas: "num pm" "t t"; gap: 0; align-items: center; padding: 16px 0 17px; }
  .acc__num { grid-area: num; font-size: 28px; line-height: 0.9; -webkit-text-stroke-width: 1px; }
  .acc__pm { grid-area: pm; }
  .acc__t { grid-area: t; margin-top: 4px; }
  .acc__title { font-size: 24px; line-height: 1.14; letter-spacing: -0.015em; font-stretch: 102%; }
  .acc__preview { margin-top: 7px; font-size: 14px; line-height: 1.45; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .acc__promise { margin-top: 8px; font-size: 1.2rem; }
  .acc__inner { padding: 0 0 24px; }
  .acc__row { grid-template-columns: minmax(0, 1fr); gap: 5px; padding: 15px 0 16px; }
  .acc__row::before { display: none; }
  .acc__row h3, .acc__row h4, .acc__row-t { font-size: 16.5px; }
  .acc__row p { font-size: 15.5px; line-height: 1.55; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .acc__inner { padding: 0 0 32px 124px; }
}

/* ================================================================ 10 Example audit card (hero1) */
.audit {
  position: relative; border-radius: var(--r-card); overflow: hidden; min-width: 0;
  background: linear-gradient(180deg, rgba(30, 24, 41, 0.92) 0%, rgba(20, 16, 29, 0.96) 100%);
  border: 1px solid rgba(243, 240, 248, 0.14);
  box-shadow: 0 50px 120px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(140, 112, 255, 0.08), 0 30px 100px rgba(140, 112, 255, 0.14);
}
.audit::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 1; background: linear-gradient(90deg, rgba(140, 112, 255, 0), rgba(187, 169, 255, 0.7), rgba(255, 79, 154, 0.5), rgba(255, 138, 60, 0)); }
.audit__panel + .audit__panel { border-top: 1px solid var(--line-strong); }
.js .audit__panel + .audit__panel { border-top: 0; }
.js .audit__panels > .audit__panel:not(.is-on) { display: none; }
.audit__panel.is-entering { animation: rise 0.4s var(--ease-out); }
.audit__top { padding: 20px 32px 18px; border-bottom: 1px solid var(--line); }
.audit__label { font: 400 16px/1.4 var(--font-text); color: var(--smoke); }
.audit__label b { font-weight: 600; color: var(--platinum); }
.audit__intro { margin-top: 3px; font: 400 15px/1.5 var(--font-text); color: var(--ink-70); }
.audit__looked { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "lab key" "list list"; align-items: center; column-gap: 16px; padding: 16px 32px 18px; border-bottom: 1px solid var(--line); }
.audit__looked > .mono { grid-area: lab; letter-spacing: 0.07em; }
.looked { grid-area: list; display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 11px 0 0; }
.looked__item { display: inline-flex; align-items: center; gap: 6px; font: 400 14.5px/1.3 var(--font-text); color: var(--ink-88); white-space: nowrap; }
.looked__item::before { content: ""; width: 14px; height: 14px; flex: none; background: var(--plasma-soft); -webkit-mask: var(--chk) center / contain no-repeat; mask: var(--chk) center / contain no-repeat; }
.looked__item.is-hit::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 3px; border-radius: 50%; background: var(--plasma); box-shadow: 0 0 0 3px rgba(140, 112, 255, 0.2), 0 0 10px rgba(140, 112, 255, 0.9); }
.looked__key { grid-area: key; display: inline-flex; align-items: center; gap: 8px; font: 400 13.5px/1.3 var(--font-text); color: var(--smoke); }
.hit { display: inline-block; width: 7px; height: 7px; margin-left: 3px; border-radius: 50%; background: var(--plasma); box-shadow: 0 0 0 3px rgba(140, 112, 255, 0.2), 0 0 10px rgba(140, 112, 255, 0.9); }
.looked__key .hit { margin-left: 0; }
.audit__fhead, .finding { display: grid; grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.6fr); gap: 40px; }
.audit__fhead { padding: 18px 32px 0; }
.audit__fhead .mono { letter-spacing: 0.07em; }
.findings { margin: 0; padding: 0 32px; }
.finding { padding: 16px 0 22px; align-items: start; }
.finding + .finding { border-top: 1px solid var(--line); padding-top: 20px; }
.finding__area { display: inline-block; padding: 4px 8px; border-radius: 5px; background: rgba(140, 112, 255, 0.13); font: 500 12px/1.3 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--plasma-soft); }
.finding__quote { margin-top: 9px; }
.finding__quote p { font: 400 25px/1.17 var(--font-sig); font-style: italic; color: var(--platinum); }
.opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 8px 0 0; }
.opt { position: relative; display: flex; flex-direction: column; gap: 4px; padding-top: 18px; }
.opt:not(:last-child)::after { content: ""; position: absolute; left: 9px; right: -22px; top: 4px; height: 1px; background: linear-gradient(90deg, rgba(166, 157, 184, 0.45), rgba(140, 112, 255, 0.6)); }
.opt::before { content: ""; position: absolute; left: 0; top: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--void); border: 1.5px solid var(--smoke); }
.opt--2::before { border-color: var(--plasma-soft); background: rgba(140, 112, 255, 0.35); }
.opt--3::before { border-color: var(--plasma-soft); background: var(--plasma); box-shadow: 0 0 12px rgba(140, 112, 255, 0.8); }
.opt__step { font: 500 12px/1.3 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--smoke); }
.opt--3 .opt__step { color: var(--plasma-soft); }
.opt__txt { font: 400 15px/1.45 var(--font-text); color: var(--ink-88); }
.audit__app { margin: 0 32px; padding: 14px 0 20px; border-top: 1px solid var(--line); font: 400 15px/1.5 var(--font-text); color: var(--smoke); }
.audit__app a { color: var(--platinum); border-bottom: 1px solid var(--line-strong); }
.audit__app a:hover { border-color: var(--plasma-soft); }
.audit__more { margin: 0 32px; padding: 6px 0 12px; border-top: 1px solid var(--line); }
.audit__app + .audit__more { border-top: 0; padding-top: 0; margin-top: -10px; }
.audit__more .textlink { font-size: 15px; color: var(--ink-88); }
.audit__other { padding: 26px 32px 30px; }
.audit__other-lead { max-width: 26em; font: 400 30px/1.2 var(--font-sig); font-style: italic; color: var(--platinum); }
.audit__other-body { margin-top: 16px; max-width: 38em; font: 400 16px/1.6 var(--font-text); color: var(--ink-88); }
.audit__other .mono { margin-top: 28px; }
.audit__call { margin-top: 28px; font: 400 16px/1.6 var(--font-text); color: var(--smoke); }
.audit__call a { color: var(--platinum); border-bottom: 1px solid var(--line-strong); }
.audit__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 32px; border-top: 1px solid var(--line); background: rgba(7, 6, 11, 0.35); }
.audit__foot p { font: 400 15.5px/1.45 var(--font-text); color: var(--smoke); }
.audit__foot b { font-weight: 500; color: var(--platinum); }
.audit__foot .btn { min-height: 48px; padding: 0 20px; font-size: 15.5px; box-shadow: 0 8px 26px rgba(255, 138, 60, 0.22); }
@media (max-width: 899px) {
  .audit__fhead, .finding { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .audit__fhead .r { display: none; }
}
@media (max-width: 767px) {
  .audit__top { padding: 14px 16px 13px; }
  .audit__label { font-size: 15px; }
  .audit__looked { padding: 13px 16px 15px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "lab" "list" "key"; }
  .looked__key { margin-top: 10px; font-size: 13px; }
  .looked { gap: 7px 16px; }
  .looked__item { font-size: 14px; }
  .audit__fhead { padding: 14px 16px 0; }
  .findings { padding: 0 16px; }
  .finding { padding: 12px 0 18px; }
  .finding + .finding { padding-top: 16px; }
  .finding__quote p { font-size: 22.5px; line-height: 1.18; }
  .opts { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 2px; padding-left: 22px; }
  .opt { padding-top: 0; gap: 2px; }
  .opt::before { left: -22px; top: 3px; }
  .opt:not(:last-child)::after { left: -18px; right: auto; top: 13px; bottom: -15px; width: 1px; height: auto; background: linear-gradient(180deg, rgba(166, 157, 184, 0.45), rgba(140, 112, 255, 0.6)); }
  .audit__app, .audit__more { margin: 0 16px; }
  .audit__other { padding: 18px 16px 22px; }
  .audit__other-lead { font-size: 25px; }
  .audit__foot { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 16px 16px; }
  .audit__foot .btn { width: 100%; }
}

/* ================================================================ 11 Business picker
   Scales to any number of businesses: type to find, grouped radios, one example audit at a time.
   Without JavaScript every example audit shows, one under the other, and the chooser hides. */
.picker { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
.picker__side { min-width: 0; }
.picker__side > .mono { display: block; margin-bottom: 12px; letter-spacing: 0.07em; }
html:not(.js) .picker__side { display: none; }
.picker__find { position: relative; margin-bottom: 12px; }
.picker__find svg { position: absolute; left: 14px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); color: var(--smoke); pointer-events: none; }
.picker__input {
  width: 100%; min-height: 48px; padding: 0 44px 0 42px; border-radius: var(--r-btn);
  border: 1px solid var(--line-strong); background: rgba(22, 17, 31, 0.9); color: var(--platinum);
  font: 400 16px/1.2 var(--font-text); transition: border-color 0.18s, box-shadow 0.18s;
  -webkit-appearance: none; appearance: none;
}
.picker__input::placeholder { color: rgba(166, 157, 184, 0.85); font-size: 15px; }
.picker__input:hover { border-color: rgba(243, 240, 248, 0.34); }
.picker__input:focus-visible { outline: none; border-color: rgba(187, 169, 255, 0.8); box-shadow: 0 0 0 3px rgba(140, 112, 255, 0.25); }
.picker__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.picker__clear { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-btn); color: var(--smoke); }
.picker__clear:hover { color: var(--platinum); }
.picker__clear svg { position: static; width: 14px; height: 14px; transform: none; }
.picker__list { position: relative; }
.picker__group { margin: 0; padding: 0; border: 0; min-width: 0; }
.picker__legend { display: block; width: 100%; padding: 0; margin: 0 0 4px; font: 500 11.5px/1.4 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(166, 157, 184, 0.78); }
.picker__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.picker__opt { position: relative; display: inline-flex; cursor: pointer; }
.picker__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.picker__opt span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-btn);
  font: 500 15px/1.2 var(--font-text); color: var(--ink-88); white-space: nowrap; transition: color 0.18s, background-color 0.18s, border-color 0.18s;
}
.picker__opt:hover span { color: var(--platinum); border-color: rgba(243, 240, 248, 0.4); }
.picker__opt input:checked + span { border-color: rgba(187, 169, 255, 0.75); background: rgba(140, 112, 255, 0.22); color: var(--platinum); }
.picker__opt input:focus-visible + span { outline: 2px solid var(--plasma-soft); outline-offset: 2px; }
.picker__group--other { margin-top: 14px; }
.picker__none { margin: 12px 0 0; font: 400 15px/1.5 var(--font-text); color: var(--smoke); }
/* the short picker (city and group pages): a few businesses and a link to the rest */
.picker__all { margin-top: 14px; }
@media (max-width: 1179px) {
  .picker--short .picker__list { gap: 10px; }
  .picker--short .picker__all { margin-top: 8px; }
}
.picker__none a { color: var(--platinum); border-bottom: 1px solid var(--line-strong); }
.picker__more {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 6px;
  font: 500 15px/1.2 var(--font-text); color: var(--platinum);
}
.picker__more span { border-bottom: 1px solid var(--line-strong); padding-bottom: 3px; }
.picker__more svg { width: 14px; height: 14px; color: var(--plasma-soft); transition: transform 0.25s var(--ease-out); }
.picker__more[aria-expanded="true"] svg { transform: rotate(180deg); }
/* no scroll-margin: html's scroll-padding-top already clears the header, so RM.pick and #biz- links land just under it */
.picker__stage { min-width: 0; }

/* phone and tablet: chips; until "Show all" only the quick picks ([data-short]) and the current one show, in one row */
@media (max-width: 1179px) {
  .picker__list { display: grid; gap: 14px; }
  .picker__group--other { margin-top: 0; }
  .picker__list.is-short { display: flex; flex-wrap: wrap; gap: 8px; }
  .picker__list.is-short .picker__group, .picker__list.is-short .picker__opts { display: contents; }
  .picker__list.is-short .picker__legend { display: none; }
  .picker__list.is-short .picker__opt:not([data-short]):not(.is-sel) { display: none; }
}
@media (max-width: 767px) {
  .picker__list.is-short { gap: 7px; }
}
@media (max-width: 767px) {
  .picker__opts { gap: 7px; }
  .picker__opt span { padding: 0 12px; font-size: 14.5px; }
}
/* desktop: a sticky side list that scrolls on its own */
@media (min-width: 1180px) {
  .picker { grid-template-columns: 272px minmax(0, 1fr); gap: 48px; }
  .picker__side { position: sticky; top: calc(var(--stick) + 4px); transition: top 0.4s var(--ease-out); }
  [data-hdr="up"] .picker__side { top: calc(var(--header-h) + 16px); }
  .picker__list {
    max-height: calc(100vh - 230px); max-height: calc(100svh - 230px); overflow-y: auto; overscroll-behavior: contain;
    margin-right: -8px; padding-right: 8px; scrollbar-width: thin; scrollbar-color: rgba(166, 157, 184, 0.35) transparent;
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 36px), transparent);
    padding-bottom: 28px;
  }
  .picker__group + .picker__group { margin-top: 16px; }
  .picker__legend { padding-left: 18px; }
  .picker__opts { display: block; border-left: 1px solid var(--line); }
  .picker__opt { display: flex; }
  .picker__opt span {
    width: 100%; min-height: 44px; margin-left: -1px; padding: 0 16px; border: 0; border-left: 2px solid transparent; border-radius: 0;
    font-size: 15.5px; color: var(--smoke); white-space: normal;
  }
  .picker__opt:hover span { color: var(--platinum); border-color: transparent; }
  .picker__opt input:checked + span { color: var(--platinum); border-left-color: var(--plasma); background: linear-gradient(90deg, rgba(140, 112, 255, 0.18), rgba(140, 112, 255, 0) 90%); }
  .picker__opt input:focus-visible + span { outline-offset: -2px; border-radius: 4px; }
  .picker__more { display: none; }
  .picker__group--other { margin-top: 16px; }
}
/* without JavaScript the chooser hides, so the example audits take the full width (not the 272px column) */
html:not(.js) .picker { grid-template-columns: minmax(0, 1fr); }

/* ================================================================ 12 Leo line */
.leo { display: flex; align-items: center; gap: 12px; margin-top: 30px; font: 400 15px/1.4 var(--font-text); color: var(--smoke); }
.leo img { width: 40px; height: 40px; flex: none; border-radius: 50%; object-fit: cover; border: 1px solid var(--line-strong); }
.leo b { font-weight: 500; color: var(--platinum); }
.leo a { color: var(--platinum); border-bottom: 1px solid var(--line-strong); }
@media (max-width: 767px) {
  .leo { margin-top: 18px; font-size: 14.5px; gap: 10px; }
  .leo img { width: 34px; height: 34px; }
}

/* ================================================================ 13 Quiet image band (Services mockup) */
.band { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; height: clamp(250px, 26vw, 400px); --pos: 50% 50%; --pos-m: 50% 50%; --lift: none; }
.band__img { position: absolute; inset: 0; z-index: -1; }
.band__img picture, .hero__media picture { display: contents; }
.band__img img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--pos); filter: var(--lift); animation: drift 26s ease-in-out infinite alternate; }
.band__img::after {
  content: ""; position: absolute; inset: 0; background:
    linear-gradient(90deg, var(--void) 0%, rgba(7, 6, 11, 0.82) 16%, rgba(7, 6, 11, 0.35) 48%, rgba(7, 6, 11, 0) 72%),
    linear-gradient(180deg, var(--void) 0%, rgba(7, 6, 11, 0) 22%, rgba(7, 6, 11, 0) 58%, rgba(7, 6, 11, 0.7) 84%, var(--void) 100%);
}
.band__copy { width: 100%; padding-bottom: 44px; }
.band__k { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font: 500 12px/1.3 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal-soft); }
.band__k::before { content: ""; width: 28px; height: 1px; background: var(--afterglow); }
.band__line { max-width: 760px; font: 400 clamp(1.8rem, 1.1rem + 1.7vw, 2.9rem)/1.1 var(--font-sig); font-style: italic; letter-spacing: -0.005em; color: var(--platinum); text-shadow: 0 2px 30px rgba(7, 6, 11, 0.6); }
.band__line .ln { display: block; }
.band__line .ln + .ln { color: rgba(243, 240, 248, 0.8); }
/* inside a content column (Services): bleeds to the right edge of the screen */
.band--bleed { height: 360px; margin: 28px calc(-1 * var(--bleed)) 28px 0; }
.band--bleed .band__copy { padding: 0 24px 44px 44px; }
@keyframes drift { from { transform: scale(1.02) translateX(0); } to { transform: scale(1.1) translateX(-1.5%); } }
@media (max-width: 1023px) {
  .band--bleed { margin: 12px calc(-1 * var(--gutter)); }
  .band--bleed .band__copy { padding: 0 var(--gutter) 32px; }
}
@media (max-width: 767px) {
  .band, .band--bleed { height: 250px; }
  .band__img img { object-position: var(--pos-m); }
  .band__img::after { background: linear-gradient(180deg, var(--void) 0%, rgba(7, 6, 11, 0.2) 22%, rgba(7, 6, 11, 0.1) 45%, rgba(7, 6, 11, 0.9) 100%); }
  .band__copy, .band--bleed .band__copy { padding-bottom: 24px; }
  .band__k { margin-bottom: 10px; }
  .band__line { font-size: 1.7rem; }
}

/* ================================================================ 14 Steps (How it works) */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; counter-reset: none; }
.step { position: relative; padding-top: 30px; }
.step::before { content: ""; position: absolute; left: 0; top: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--void); border: 1.5px solid var(--smoke); }
.step:nth-child(2)::before { border-color: var(--plasma-soft); background: rgba(140, 112, 255, 0.4); }
.step:nth-child(n+3)::before { border-color: var(--plasma-soft); background: var(--plasma); box-shadow: 0 0 12px rgba(140, 112, 255, 0.85); }
.step:not(:last-child)::after { content: ""; position: absolute; left: 14px; right: -38px; top: 5px; height: 1px; background: linear-gradient(90deg, rgba(166, 157, 184, 0.35), rgba(140, 112, 255, 0.6)); }
.step__num { display: block; font-family: var(--font-display); font-weight: 800; font-stretch: 108%; font-size: 56px; line-height: 0.85; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1.2px rgba(187, 169, 255, 0.55); }
.step__t { margin-top: 18px; font: 600 clamp(1.15rem, 1rem + 0.4vw, 1.35rem)/1.3 var(--font-text); letter-spacing: -0.005em; color: var(--platinum); }
.step__p { margin-top: 10px; max-width: 30em; font: 400 16px/1.6 var(--font-text); color: var(--ink-88); }
.step__p + .step__p { margin-top: 8px; }
@media (max-width: 899px) {
  .steps { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-left: 30px; }
  .step { padding-top: 0; }
  .step::before { left: -30px; top: 4px; }
  .step:not(:last-child)::after { left: -25px; right: auto; top: 20px; bottom: -26px; width: 1px; height: auto; background: linear-gradient(180deg, rgba(166, 157, 184, 0.35), rgba(140, 112, 255, 0.6)); }
  .step__num { font-size: 36px; }
  .step__t { margin-top: 10px; }
}

/* ================================================================ 15 FAQ (native details, works without JavaScript) */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  display: grid; grid-template-columns: minmax(0, 1fr) 40px; gap: 20px; align-items: center; min-height: 44px; padding: 22px 0;
  cursor: pointer; list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }
.faq__h { font: 500 clamp(1.06rem, 0.98rem + 0.35vw, 1.28rem)/1.35 var(--font-text); letter-spacing: -0.005em; color: var(--platinum); }
.faq__q:hover .faq__h { color: #fff; }
.faq__pm { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong); transition: border-color 0.2s, background-color 0.2s; }
.faq__pm svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.faq__pm .v { transform-origin: 8px 8px; transition: transform 0.25s var(--ease-out); }
.faq__q:hover .faq__pm { border-color: var(--line-hover); }
.faq__item[open] .faq__pm { border-color: rgba(255, 79, 154, 0.55); background: rgba(255, 79, 154, 0.08); }
.faq__item[open] .faq__pm .v { transform: rotate(90deg); }
.faq__a { max-width: 44em; padding: 0 60px 26px 0; font: 400 16.5px/1.65 var(--font-text); color: var(--ink-88); }
.faq__a p + p { margin-top: 12px; }
.faq__a a { color: var(--platinum); border-bottom: 1px solid var(--line-strong); }
.faq__a a:hover { border-color: var(--plasma-soft); }
.faq__item[open] .faq__a { animation: rise 0.4s var(--ease-out); }
.faq-more { margin-top: 24px; }
@media (max-width: 767px) {
  .faq__q { gap: 14px; padding: 18px 0; }
  .faq__a { padding-right: 0; font-size: 16px; }
}
/* without JavaScript every answer shows open and the +/- marks go (kept as its own rule: a browser that does not
   know ::details-content drops only this one) */
html:not(.js) details.faq__item::details-content { content-visibility: visible; display: block; }
html:not(.js) .faq__pm { display: none; }

/* ================================================================ 16 Apps strip (Services mockup) */
.apps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.apps__line { margin-top: 10px; font: 400 15.5px/1.5 var(--font-text); color: rgba(243, 240, 248, 0.72); }
.apps__list { display: grid; grid-template-columns: minmax(0, 1fr); }
.apps__list a { position: relative; display: block; min-height: 44px; padding: 14px 0; border-top: 1px solid var(--line); }
.apps__name { display: flex; align-items: center; gap: 8px; font: 600 17px/1.3 var(--font-text); color: var(--platinum); }
.apps__for { display: block; margin-top: 3px; font: 400 14.5px/1.4 var(--font-text); color: var(--smoke); }
.apps__list .arr { color: var(--plasma-soft); transition: transform 0.18s var(--ease-out); }
.apps__list a:hover .arr { transform: translateX(3px); }
@media (min-width: 1024px) {
  .apps { grid-template-columns: 220px minmax(0, 1fr); gap: 40px; align-items: start; }
  .apps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .apps__list li + li a { padding-left: 22px; border-left: 1px solid var(--line); }
  .apps__list a { border-top: 0; padding: 2px 18px 2px 0; }
}

/* ================================================================ 17 Closing band */
.close { position: relative; isolation: isolate; overflow: hidden; border-top: 1px solid var(--line); }
.close::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 60% at 50% 0%, rgba(140, 112, 255, 0.10), rgba(140, 112, 255, 0) 70%);
}
.close__in { padding-top: clamp(72px, 3rem + 3.5vw, 104px); padding-bottom: clamp(40px, 2rem + 1.5vw, 56px); }
.close .kicker { margin-bottom: 22px; letter-spacing: 0.14em; color: var(--plasma-soft); }
.close__h { max-width: 13em; font-family: var(--font-display); font-weight: 800; font-stretch: 108%; letter-spacing: -0.028em; font-size: var(--fs-h2-xl); line-height: 1; text-wrap: balance; }
.close__h .soft { display: block; }
.close__line { margin-top: 26px; max-width: 36em; font: 400 var(--fs-lede)/1.58 var(--font-text); color: var(--ink-88); }
.close .ctas { gap: 16px 30px; }
@media (max-width: 767px) {
  .close__h { font-size: 34px; font-stretch: 104%; line-height: 1.02; }
  .close .ctas { flex-direction: column; align-items: stretch; }
  .close .ctas .btn { width: 100%; }
  .close .ctas .textlink { align-self: flex-start; }
}

/* ================================================================ 18 Footer (the tagline signs off every page) */
.ftr { position: relative; isolation: isolate; overflow: hidden; border-top: 1px solid var(--line); padding: clamp(56px, 2rem + 3vw, 84px) 0 calc(26px + env(safe-area-inset-bottom)); }
/* a closing band that ends main flows straight into the footer: one closing area, as in the mockups */
.close + .ftr, main:has(> .close:last-child) + .ftr { border-top: 0; padding-top: clamp(24px, 1rem + 2vw, 44px); }
.ftr::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -6%; right: -6%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(34% 130px at 30% 150px, rgba(255, 79, 154, 0.07), rgba(255, 79, 154, 0) 75%),
    radial-gradient(46% 55% at 22% 100%, rgba(140, 112, 255, 0.30), rgba(140, 112, 255, 0) 70%),
    radial-gradient(40% 50% at 56% 104%, rgba(255, 79, 154, 0.22), rgba(255, 79, 154, 0) 70%),
    radial-gradient(36% 46% at 86% 104%, rgba(255, 138, 60, 0.18), rgba(255, 138, 60, 0) 70%);
  animation: dusk 18s ease-in-out infinite alternate;
}
@keyframes dusk { from { transform: translateX(-2%); } to { transform: translateX(2%); } }
.ftr__sign {
  display: inline-block; max-width: 100%; font: 400 var(--fs-tagline)/1.02 var(--font-sig); font-style: italic; letter-spacing: -0.01em;
  padding: 0 0.08em 0.1em 0; text-wrap: balance;
  background: var(--afterglow); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--signal);
}
.ftr__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 32px 40px; margin-top: clamp(36px, 2rem + 1.5vw, 56px); padding-top: 36px; border-top: 1px solid var(--line); }
.ftr__about { max-width: 25em; margin-top: 12px; font: 400 15px/1.6 var(--font-text); color: var(--smoke); }
.ftr__contact { display: grid; gap: 0; margin-top: 14px; }
.ftr__contact a, .ftr__links a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 400 15.5px/1.3 var(--font-text); color: var(--ink-78); transition: color 0.18s; }
.ftr__links a { min-width: 44px; }   /* short names (Home, About) still make a 44px target */
.ftr__contact a { color: var(--platinum); font-weight: 500; }
.ftr__contact svg { width: 16px; height: 16px; flex: none; color: var(--plasma-soft); }
.ftr__contact a:hover, .ftr__links a:hover { color: #fff; }
.ftr__links a[aria-current="page"] { color: var(--platinum); }
.ftr__h { display: block; margin-bottom: 6px; letter-spacing: 0.1em; }
.ftr__book { margin-top: 18px; }
.ftr__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line);
  font: 500 12px/1.5 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--smoke);
}
.ftr__base a { display: inline-block; padding: 13px 0; margin: -13px 0; }
.ftr__base a:hover { color: var(--platinum); }
.ftr__legal { display: inline-flex; flex-wrap: wrap; gap: 0 24px; }
@media (max-width: 1023px) {
  .ftr__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ftr__brand { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .ftr__sign { font-size: clamp(2.3rem, 11vw, 3rem); }
  .ftr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .ftr__base { flex-direction: column; }
}

/* ================================================================ 19 Prose, split, lists */
.prose { max-width: 42em; font: 400 17px/1.7 var(--font-text); color: var(--ink-88); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 2em; font-family: var(--font-display); font-weight: 800; font-stretch: 106%; font-size: clamp(1.6rem, 1.1rem + 1.2vw, 2.2rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--platinum); }
.prose h3 { margin-top: 1.8em; font: 600 clamp(1.1rem, 1rem + 0.3vw, 1.25rem)/1.35 var(--font-text); color: var(--platinum); }
.prose h2 + *, .prose h3 + * { margin-top: 0.6em; }
.prose strong, .prose b { font-weight: 600; color: var(--platinum); }
.prose a { color: var(--platinum); border-bottom: 1px solid var(--line-strong); transition: border-color 0.18s; }
.prose a:hover { border-color: var(--plasma-soft); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose ul { list-style: none; padding-left: 1.3em; }
.prose ul li { position: relative; }
.prose ul li::before { content: ""; position: absolute; left: -1.05em; top: 0.72em; width: 6px; height: 6px; border-radius: 50%; background: var(--plasma); box-shadow: 0 0 8px rgba(140, 112, 255, 0.8); }
.prose li + li { margin-top: 0.5em; }
.prose blockquote { padding-left: 22px; border-left: 1px solid rgba(187, 169, 255, 0.6); font: 400 1.35em/1.3 var(--font-sig); font-style: italic; color: var(--platinum); }

.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 2rem + 3vw, 88px); align-items: center; }
.split--flip > :first-child { order: 2; }
.split__media { position: relative; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--line-strong); background: var(--plum); box-shadow: 0 40px 100px rgba(0, 0, 0, 0.45); }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(7, 6, 11, 0) 60%, rgba(7, 6, 11, 0.45)); }
.split__cap { position: absolute; left: 18px; bottom: 16px; z-index: 1; color: var(--ink-88); }
@media (max-width: 899px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split--flip > :first-child { order: 0; }
}

.checklist { display: grid; gap: 14px; }
.checklist--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 36px; }
.checklist li { display: flex; gap: 10px; align-items: flex-start; font: 400 16px/1.5 var(--font-text); color: var(--ink-88); }
.checklist .chk { width: 15px; height: 15px; flex: none; margin-top: 4px; color: var(--plasma-soft); }
.checklist b { display: block; font: 600 16px/1.35 var(--font-text); color: var(--platinum); }
.checklist span > span { display: block; font-size: 15px; color: var(--smoke); }
@media (max-width: 767px) { .checklist--2 { grid-template-columns: minmax(0, 1fr); } }

/* ================================================================ 20 Reveal motion (only with JavaScript on) */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.8s var(--ease-out), transform 0.9s var(--ease-out); transition-delay: var(--d, 0ms); }
.js .reveal.is-in { opacity: 1; transform: none; }
.still .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
.still *, .still *::before, .still *::after { animation: none !important; }

/* ================================================================ 21 Reduced motion, print */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .hero__media video { display: none; }
  .vidctl { display: none !important; }
}
@media print {
  .hdr, .menu, .jump, .acc-index, .picker__side, .hero__media, .hero__scrim, .hero__glow, .band, .vidctl { display: none !important; }
  body { background: #fff; color: #000; }
}
@media print {
  details.faq__item::details-content { content-visibility: visible; display: block; }
}

/* ================================================================ 22 Video thumbnail (2026-10-06)
   A still with a play button. The player loads only when someone clicks (site.js initYt);
   without JavaScript the link opens the video in a new tab. */
.ytl { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--r-card); overflow: hidden; background: var(--plum); border: 1px solid var(--line); color: var(--platinum); }
.ytl__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.8); transition: transform 0.6s var(--ease-out), filter 0.3s; }
a.ytl:hover .ytl__img, a.ytl:focus-visible .ytl__img { transform: scale(1.02); filter: brightness(0.95); }
.ytl__play { position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; display: grid; place-items: center; background: rgba(7, 6, 11, 0.72); border: 1px solid var(--line-strong); }
.ytl__play svg { width: 26px; height: 26px; margin-left: 4px; fill: var(--platinum); }
a.ytl:hover .ytl__play, a.ytl:focus-visible .ytl__play { background: var(--ember); border-color: var(--ember); }
.ytl iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ================================================================ 23 Small labels stay readable on phones (2026-10-06)
   Nothing below 12 px at phone widths. Page samples set their own sizes in their page CSS. */
@media (max-width: 767px) {
  .hero__foot .mono { font-size: 12px; }
  .picker__legend { font-size: 12px; }
}