/* ==========================================================================
   LogiSpirit website: the only stylesheet.
   Rules: no inline styles anywhere (strict CSP), mobile-first,
   breakpoints 600px (gutter, small tweaks) and 900px (full nav, side-by-side showcase).
   Sections: 1 Font + tokens · 2 Base · 3 Layout · 4 Header · 5 Buttons + links
   6 Home · 7 About · 8 Privacy + 404 · 9 Footer · 10 Background textures
   11 Motion (keyframes, pause, reduced motion)
   ========================================================================== */

/* 1. Font + tokens ------------------------------------------------------- */
@font-face {
  font-family: Outfit;
  src: url(/assets/fonts/outfit-latin-var.woff2) format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  /* Brand colours (brand-guidelines.md) */
  --navy: #293189;      /* Spirit Navy: text/links on tinted backgrounds */
  --blue: #2776BB;      /* Logic Blue: white backgrounds, large text, decoration */
  --night: #141742;
  --graphite: #636466;
  --silver: #C9CACD;
  --mist: #DCE8F6;
  /* Supporting colours taken from the approved v2.1 prototype */
  --sky: #6FB1EC;       /* highlight + focus ring on dark backgrounds */
  --sky-2: #4E9BE0;
  --ice: #BFD7F2;
  --on-dark: #C9CEE6;
  --on-dark-2: #DCE2F3;
  --on-dark-3: #B9BED3;
  --tint: #EEF4FC;
  --row: #F7F8FB;
  --line-2: #E1E6F1;
  --bar: #C9D9EF;
  --night-line: #2E3266;
  /* Text + surfaces */
  --text: #141742;
  --text-2: #3E4463;
  --text-3: #575C6E;
  --bg: #FFFFFF;
  --bg-alt: #F5F8FD;
  --line: #E6E9F2;
  --chip: #F1F3F8;
  /* Type */
  --font: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-h1: clamp(40px, 5vw, 68px);
  --fs-h2: clamp(30px, 3.2vw, 44px);
  --fs-lead: clamp(17px, 1.4vw, 20px);
  --fs-body: 18px;
  --fs-small: 15px;
  --fs-label: 14px;
  --lh: 1.55;
  /* Space, shape, layout */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 40px; --space-7: 64px;
  --section-y: clamp(64px, 7vw, 112px);
  --section-y-s: clamp(64px, 7vw, 104px);
  --radius-s: 10px;
  --radius-m: 12px;
  --radius-l: 20px;
  --pill: 999px;
  --shadow: 0 24px 60px rgb(20 23 66 / .08);
  --container: 1200px;
  --gutter: 16px;
  --header-h: 72px;
}
@media (min-width: 600px) {
  :root { --gutter: 24px; --header-h: 82px; }
}

/* 2. Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh);
  color: var(--text);
  background: var(--bg);
}
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
h1, h2, h3 { overflow-wrap: break-word; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
strong { font-weight: 600; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: calc(var(--header-h) + 8px); }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.on-dark :focus-visible { outline-color: var(--sky); }
main:focus { outline: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -200px; z-index: 100;
  padding: 12px 18px; border-radius: var(--radius-s);
  background: #FFFFFF; color: var(--navy);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.list-reset { list-style: none; padding: 0; }
.text-sky { color: var(--sky); }
.text-navy { color: var(--navy); }
.muted { color: var(--text-3); }

/* 3. Layout -------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 820px; }
.container--prose { max-width: 808px; }

.section { padding-block: var(--section-y); }
.section--s { padding-block: var(--section-y-s); }
.section--alt { background: var(--bg-alt); }
.section--night { background: var(--night); color: #FFFFFF; }

.stack { display: flex; flex-direction: column; }
.gap-36 { gap: 36px; }
.gap-40 { gap: 40px; }
.gap-44 { gap: 44px; }

.section-head {
  display: flex; flex-wrap: wrap;
  justify-content: space-between; align-items: flex-end;
  gap: 16px;
}
.section-intro { display: flex; flex-direction: column; gap: 10px; max-width: 700px; }
.h2 { font-size: var(--fs-h2); line-height: 1.12; font-weight: 600; }
.h2--narrow { max-width: 640px; }
.section-sub { font-size: 19px; color: var(--text-2); }
.section--night .section-sub { color: var(--on-dark); }

.grid { display: grid; }
.grid--220 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 24px; }
.grid--240 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 18px; }
.grid--260 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 18px; }
.grid--280 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px; }

.eyebrow {
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--navy);
}
.pill-label {
  align-self: flex-start;
  padding: 6px 14px; border-radius: var(--pill);
  background: rgb(255 255 255 / .08);
  border: 1px solid rgb(255 255 255 / .14);
  color: var(--ice);
  font-size: 13px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
}

/* Decorative radial glows behind dark sections */
.has-glow { position: relative; overflow: hidden; }
.has-glow > .container { position: relative; }
.glow { position: absolute; border-radius: 50%; pointer-events: none; }
.glow--hero-a {
  width: 620px; height: 620px; right: -120px; top: -160px;
  background: radial-gradient(circle, rgb(39 118 187 / .45), rgb(39 118 187 / 0) 70%);
}
.glow--hero-b {
  width: 520px; height: 520px; left: -200px; bottom: -260px;
  background: radial-gradient(circle, rgb(41 49 137 / .7), rgb(41 49 137 / 0) 70%);
}
.glow--about {
  width: 600px; height: 600px; right: -140px; top: -180px;
  background: radial-gradient(circle, rgb(39 118 187 / .42), rgb(39 118 187 / 0) 70%);
}
.glow--cta {
  width: 560px; height: 560px; left: 50%; top: 50%; margin: -280px 0 0 -280px;
  background: radial-gradient(circle, rgb(111 177 236 / .35), rgb(111 177 236 / 0) 70%);
}

/* Cards */
.card-lift { transition: transform .25s ease, box-shadow .25s ease; }
.card-lift:hover { transform: translateY(-5px); box-shadow: 0 20px 44px rgb(20 23 66 / .14); }
.card-text { font-size: 16px; color: var(--text-2); }
.dark-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 26px; border-radius: 18px;
  background: #20234B; /* opaque: same colour as the old 5% white on Night, so the flow texture never shows through */
  border: 1px solid rgb(255 255 255 / .1);
}
.dark-card--tight { gap: 8px; }
.dark-card h3 { font-size: 20px; font-weight: 600; line-height: 1.3; }
.dark-card p { font-size: 16px; color: var(--on-dark); }

/* 4. Header + mobile menu ------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--night);
  border-bottom: 1px solid rgb(255 255 255 / .08);
  font-size: 16px; font-weight: 500;
}
.header-bar {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 8px;
  padding-block: 12px;
}
.brand { display: flex; align-items: center; min-height: 44px; margin-right: auto; border-radius: 6px; }
.brand-logo { flex-shrink: 0; max-width: none; height: 44px; width: auto; margin: -4px 0 -4px -10px; }

.site-nav {
  order: 4; flex-basis: 100%;
  display: flex; flex-direction: column;
  padding: 4px 0 6px;
  font-size: 18px;
}
.site-nav a {
  display: block; padding: 12px 0;
  border-top: 1px solid rgb(255 255 255 / .1);
  color: #FFFFFF; text-decoration: none;
}
.site-nav a[aria-current="page"] { color: var(--sky); font-weight: 600; }
.header-cta { order: 2; }
.menu-toggle {
  order: 3;
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border-radius: var(--radius-s);
  border: 1px solid rgb(255 255 255 / .25);
  background: transparent; color: #FFFFFF;
  cursor: pointer;
}
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }

/* Progressive enhancement: the menu only collapses once site.js has added html.js */
html.js .menu-toggle { display: inline-flex; }
html.js .site-nav { display: none; }
html.js .site-nav.is-open { display: flex; }

.hide-sm { display: none; }

@media (min-width: 600px) {
  .header-bar { gap: 10px 12px; }
  .brand-logo { height: 56px; margin: -6px 0 -6px -12px; }
  .hide-sm { display: inline; }
}
@media (min-width: 900px) {
  .header-bar { gap: 10px 28px; }
  .site-nav,
  html.js .site-nav {
    order: 1; flex-basis: auto;
    display: flex; flex-direction: row; align-items: center;
    gap: 4px 28px; padding: 0;
    font-size: 16px;
  }
  .site-nav a { padding: 10px 0; border-top: 0; color: var(--on-dark-2); }
  .site-nav a:hover { color: #FFFFFF; }
  .site-nav a[aria-current="page"] {
    color: #FFFFFF;
    box-shadow: inset 0 -2px 0 var(--sky);
  }
  html.js .menu-toggle { display: none; }
}

/* Short viewports (landscape phones, 400% zoom): don't let a sticky header eat the screen. */
@media (max-height: 500px) {
  .site-header { position: static; }
  [id] { scroll-margin-top: 8px; }
}

/* 5. Buttons + links ----------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 16px;
  border: 0; border-radius: var(--radius-s);
  font: inherit; font-weight: 600; line-height: 1.2;
  text-align: center; text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn-light { background: #FFFFFF; color: var(--navy); }
.btn-light:hover { background: var(--mist); }
.btn-lg { min-height: 54px; padding: 0 28px; border-radius: var(--radius-m); font-size: 18px; }
.btn-xl { min-height: 56px; padding: 0 34px; border-radius: var(--radius-m); font-size: 18px; }
.btn-outline {
  background: #FFFFFF; color: var(--night);
  border: 1.5px solid var(--silver);
  font-size: 15px;
}
.btn-outline:hover { border-color: var(--navy); }
.btn-outline-navy {
  min-height: 50px; padding: 0 22px; border-radius: var(--radius-m);
  background: transparent; color: var(--navy);
  border: 2px solid var(--navy);
  font-size: 17px;
}
.btn-outline-navy:hover { background: var(--mist); }
.btn-ghost {
  background: transparent; color: #FFFFFF;
  border: 1.5px solid rgb(255 255 255 / .25);
  font-size: 15px;
}
.btn-ghost:hover { border-color: #FFFFFF; }
.header-cta { gap: 0; padding: 0 16px; }
@media (min-width: 600px) { .header-cta { padding: 0 20px; } }

/* Pause/Play animations button: icon swaps with html.motion-paused */
.self-start { align-self: flex-start; }
.btn-motion svg { flex-shrink: 0; }
.btn-motion .icon-play { display: none; }
html.motion-paused .btn-motion .icon-play { display: block; }
html.motion-paused .btn-motion .icon-pause { display: none; }
html:not(.js) .btn-motion { display: none; }

.link-arrow {
  display: inline-block; padding: 12px 0;
  font-weight: 600; text-decoration: none;
}
.link-arrow:hover { text-decoration: underline; }
.link-arrow--white { color: #FFFFFF; font-size: 18px; }
.link-arrow--ice { color: var(--ice); padding: 10px 0; }
.link-arrow--navy { color: var(--navy); padding: 10px 0; }

/* 6. Home ---------------------------------------------------------------- */
/* Hero */
.hero { background: var(--night); color: #FFFFFF; }
.hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: 56px; align-items: center;
  padding-block: clamp(56px, 7vw, 112px);
}
.hero-copy { display: flex; flex-direction: column; gap: 22px; }
.hero-visual { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.hero-visual .btn-motion { align-self: flex-end; font-size: 14px; }
.hero-title {
  font-size: var(--fs-h1); line-height: 1.04;
  font-weight: 600; letter-spacing: -.02em;
}
.hero-lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--on-dark); max-width: 540px; }
.hero-actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px 26px; padding-top: 6px;
}
.hero-note { font-size: var(--fs-small); color: var(--on-dark-3); }

/* Hero animated flow (decorative, described by role="img" + aria-label) */
.flow {
  display: flex; flex-direction: column; gap: 18px;
  padding: 22px 16px;
  border-radius: 24px;
  background: rgb(255 255 255 / .04);
  border: 1px solid rgb(255 255 255 / .12);
}
.flow-pipe {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) 22px 64px 22px minmax(0, 1fr);
}
.flow-col { display: flex; flex-direction: column; gap: 14px; font-size: 12px; font-weight: 600; }
.flow-chip {
  display: flex; align-items: center; gap: 6px;
  height: 48px; min-width: 0; padding: 0 6px;
  border-radius: var(--radius-m);
  background: rgb(255 255 255 / .08); color: #FFFFFF;
  line-height: 1.15;
}
.flow-chip--out { background: #FFFFFF; color: var(--night); }
.flow-chip svg { display: none; flex-shrink: 0; width: 14px; height: 14px; }
.flow-lines { width: 22px; height: 234px; }
.flow-core {
  position: relative;
  width: 96px; height: 96px;
  display: flex; align-items: center; justify-content: center;
  transform: scale(.68); margin: 0 -16px;
}
.flow-ring { position: absolute; inset: 0; width: 96px; height: 96px; }
.flow-hub {
  width: 70px; height: 70px; border-radius: 50%;
  background: var(--navy);
  display: flex; align-items: center; justify-content: center;
}
.flow-hub img { width: 44px; height: 44px; }
.flow-approval {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 16px;
  border-radius: 14px; background: rgb(255 255 255 / .08);
}
.flow-approval-text { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--on-dark-2); }
.blink-dot { display: inline-block; flex-shrink: 0; width: 10px; height: 10px; border-radius: 3px; background: var(--sky); }
.flow-approve-btn {
  padding: 8px 16px; border-radius: var(--radius-s);
  background: #FFFFFF; color: var(--navy);
  font-size: 14px; font-weight: 600;
}
@media (min-width: 360px) {
  .flow-col { font-size: 12.5px; }
  .flow-chip { gap: 6px; padding: 0 8px; }
  .flow-chip svg { display: block; }
}
@media (min-width: 600px) {
  .flow { padding: 26px 22px; }
  .flow-pipe { grid-template-columns: minmax(0, 1fr) 44px 96px 44px minmax(0, 1fr); }
  .flow-col { font-size: 14px; }
  .flow-chip { gap: 8px; padding: 0 12px; }
  .flow-chip svg { width: 18px; height: 18px; }
  .flow-lines { width: 44px; }
  .flow-core { transform: none; margin: 0; }
}

/* Marquee band */
.marquee {
  overflow: hidden;
  padding: 22px 0;
  background: #FFFFFF;
  border-bottom: 1px solid var(--line);
}
.marquee-track {
  display: flex; width: max-content;
  font-size: 18px; font-weight: 600; color: var(--navy);
  white-space: nowrap;
}
.marquee-item { padding: 0 28px; }
.marquee-sep { color: var(--blue); }

/* Services showcase */
.showcase { display: grid; gap: 24px; }
.tablist {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
  padding: 8px; border-radius: 22px;
  background: var(--night);
}
.tab {
  display: flex; align-items: center; gap: 8px;
  width: 100%; min-height: 52px; padding: 10px 12px;
  border: 0; border-radius: 14px;
  background: transparent; color: var(--on-dark);
  font: inherit; font-size: 14px; font-weight: 500; line-height: 1.25;
  text-align: left; cursor: pointer;
  transition: background-color .2s, color .2s;
}
.tab svg { flex-shrink: 0; width: 20px; height: 20px; }
.tab:hover { background: rgb(255 255 255 / .07); color: #FFFFFF; }
.tab[aria-selected="true"],
.tab[aria-selected="true"]:hover {
  background: #FFFFFF; color: var(--night); font-weight: 600;
  box-shadow: 0 10px 30px rgb(0 0 0 / .25);
}
html:not(.js) .tablist { display: none; }

.demo {
  position: relative; min-width: 0;
  display: flex; flex-direction: column;
  min-height: 490px;
  padding: 52px clamp(16px, 2.4vw, 30px) clamp(18px, 2.4vw, 30px);
  border-radius: 22px;
  background: #FFFFFF;
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow);
}
.badge-sample {
  position: absolute; top: 16px; right: 18px;
  padding: 4px 10px; border-radius: var(--pill);
  background: var(--chip); color: var(--text-3);
  font-size: 12px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}
/* All panels share one grid cell, so the window is as tall as the tallest
   demo and switching tabs never shifts the page (no layout shift). */
.demo-stage { display: grid; }
.demo-panel { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
html.js .demo-panel { grid-area: 1 / 1; }
html.js .demo-panel:not(.is-active) { visibility: hidden; }
html:not(.js) .demo-panel + .demo-panel { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--line); }

@media (min-width: 600px) {
  .tablist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .showcase { grid-template-columns: 280px minmax(0, 1fr); align-items: stretch; }
  .tablist { display: flex; flex-direction: column; gap: 6px; padding: 14px; }
  .tab { gap: 12px; min-height: 56px; padding: 12px 16px; font-size: 17px; }
  .tab svg { width: 22px; height: 22px; }
}

/* Demo content (sample data only) */
.panel-head {
  display: flex; flex-wrap: wrap;
  justify-content: space-between; align-items: baseline; gap: 8px;
}
.demo-title { font-size: 24px; font-weight: 600; line-height: 1.25; }
.panel-meta { font-size: var(--fs-small); color: var(--text-3); }
.mini-label {
  font-size: 13px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--navy);
}
.mini-label--muted { color: var(--text-3); }
.tint-box {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px; border-radius: 14px;
  background: var(--tint);
}
.tint-box--strong { color: var(--navy); font-weight: 600; }

.mail-list { display: flex; flex-direction: column; gap: 10px; }
.mail-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: var(--radius-m);
  background: var(--row); font-size: var(--fs-small);
}
.tag {
  flex-shrink: 0;
  padding: 4px 10px; border-radius: 8px;
  font-size: 13px; font-weight: 600; color: #FFFFFF;
}
.tag--blue { background: var(--blue); }
.tag--navy { background: var(--navy); }
.tag--muted { background: transparent; border: 1.5px solid var(--silver); color: var(--text-3); }
.draft-text { font-size: var(--fs-small); }
.demo-actions { display: flex; justify-content: flex-end; gap: 10px; }
.fake-btn { padding: 10px 18px; border-radius: var(--radius-s); font-size: var(--fs-small); font-weight: 600; }
.fake-btn--outline { border: 1.5px solid var(--silver); }
.fake-btn--navy { background: var(--navy); color: #FFFFFF; }

.doc-grid {
  display: grid; gap: 20px; align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.doc-mock {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 12px;
  height: 220px; padding: 22px;
  border-radius: 14px; border: 1px solid var(--silver);
  background: #FFFFFF;
}
.doc-title { font-size: 18px; font-weight: 700; color: var(--navy); }
.doc-line { height: 8px; border-radius: 4px; background: var(--mist); }
.doc-line--grey { background: var(--line); }
.doc-rule { height: 1px; margin: 6px 0; background: var(--line); }
.doc-total { margin-top: auto; align-self: flex-end; width: 34%; height: 12px; border-radius: 4px; background: var(--silver); }
.doc-grid { --scan-travel: 150px; }
@media (min-width: 600px) {
  .doc-mock { height: 300px; }
  .doc-grid { --scan-travel: 222px; }
}
.w-45 { width: 45%; } .w-60 { width: 60%; } .w-66 { width: 66%; }
.w-70 { width: 70%; } .w-74 { width: 74%; } .w-80 { width: 80%; }
.scan-line {
  position: absolute; left: 10px; right: 10px; top: 30px;
  height: 3px; border-radius: 2px;
  background: var(--blue); box-shadow: 0 0 14px var(--sky-2);
}
.fields { display: flex; flex-direction: column; gap: 10px; font-size: var(--fs-small); }
.field-list { display: flex; flex-direction: column; gap: 10px; }
.field {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-radius: var(--radius-s);
  background: var(--row);
}
.field dt { color: var(--text-3); }
.field dd { font-weight: 600; text-align: right; }
.done-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: var(--radius-s);
  background: var(--tint); color: var(--navy); font-weight: 600;
}
.done-row svg { flex-shrink: 0; }

.chat { display: flex; flex-direction: column; gap: 14px; padding: 8px 0; }
.bubble { max-width: 80%; padding: 14px 18px; font-size: 16px; }
.bubble--user { align-self: flex-end; max-width: 75%; border-radius: 18px 18px 4px 18px; background: var(--navy); color: #FFFFFF; }
.bubble--bot { align-self: flex-start; border-radius: 18px 18px 18px 4px; background: var(--tint); }
.typing {
  align-self: flex-start;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--pill);
  background: var(--chip); color: var(--text-3); font-size: 14px;
}
.chat-chips { align-self: flex-start; display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; font-weight: 600; }
.chip-line { padding: 6px 12px; border-radius: 8px; border: 1.5px solid var(--silver); color: var(--text-3); }
.chip-line--blue { border-color: var(--blue); color: var(--blue); }

.int-grid {
  display: grid; gap: 14px; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
}
.int-col { display: flex; flex-direction: column; gap: 10px; }
.int-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 14px; font-size: var(--fs-small); }
.int-card--line { gap: 4px; border: 1px solid var(--line-2); }
.int-card--tint { background: var(--tint); }
.int-card--navy { background: var(--navy); color: #FFFFFF; }
.int-card--navy span { color: var(--on-dark-2); }
.notify {
  padding: 12px 14px; border-radius: var(--radius-m);
  border: 1.5px solid var(--blue);
  color: var(--navy); font-size: 14px; font-weight: 600;
}

.request { padding: 14px 16px; border-radius: var(--radius-m); background: var(--row); font-size: var(--fs-small); }
.checklist { display: flex; flex-direction: column; gap: 10px; font-size: 16px; }
.checklist li { display: flex; align-items: center; gap: 12px; }
.check {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--navy); color: #FFFFFF;
}

.bars {
  display: flex; align-items: flex-end; gap: 14px;
  height: 200px; padding: 16px 16px 0;
  border-bottom: 2px solid var(--line);
}
.bar { flex: 1; border-radius: 8px 8px 0 0; background: var(--bar); transform-origin: bottom; }
.bar--hi { background: var(--blue); }
.h-38 { height: 38%; } .h-45 { height: 45%; } .h-50 { height: 50%; } .h-58 { height: 58%; }
.h-66 { height: 66%; } .h-70 { height: 70%; } .h-92 { height: 92%; }
.report-text { display: block; font-size: 16px; }
.wipe-block { display: block; }

/* Process */
.progress { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.progress-fill { height: 4px; border-radius: 2px; background: var(--blue); transform-origin: left; }
.step {
  display: flex; flex-direction: column; gap: 10px;
  padding: 24px; border-radius: 18px;
  background: #FFFFFF; border: 1px solid var(--line); /* solid, so card edges stay crisp over the cube texture */
}
.step-num { font-size: 44px; line-height: 1; font-weight: 700; color: var(--mist); }
.step h3 { font-size: 21px; font-weight: 600; line-height: 1.3; }

/* Final CTA */
.cta { background: var(--navy); color: #FFFFFF; }
.cta-inner {
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  padding-block: clamp(72px, 8vw, 120px);
  text-align: center;
}
.cta-inner--about { padding-block: clamp(72px, 8vw, 112px); }
.cta-icon { width: 88px; height: 88px; }
.offer-chip {
  padding: 6px 14px; border-radius: var(--pill);
  background: rgb(255 255 255 / .12);
  border: 1px solid rgb(255 255 255 / .22);
  font-size: 14px; font-weight: 600; letter-spacing: .04em;
}
.h2--cta { font-size: clamp(32px, 3.8vw, 52px); line-height: 1.1; }
.h2--cta-about { font-size: clamp(32px, 3.8vw, 50px); line-height: 1.1; }
.cta-lead { font-size: 19px; color: var(--mist); }
.cta-note { font-size: 16px; color: var(--mist); }
.founder-strip {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px 12px 12px;
  border-radius: 40px;
  background: rgb(255 255 255 / .08);
  text-align: left;
}
.founder-strip img {
  flex-shrink: 0;
  width: 52px; height: 52px;
  border-radius: 50%; object-fit: cover;
}
.founder-strip p { font-size: 16px; color: #FFFFFF; }
.founder-strip a { color: var(--ice); font-weight: 600; white-space: nowrap; }
.cta-email { font-size: var(--fs-small); color: var(--mist); }
.cta-email a { color: #FFFFFF; font-weight: 600; }
@media (min-width: 600px) { .founder-strip { border-radius: var(--pill); } }

/* 7. About --------------------------------------------------------------- */
.about-hero { background: var(--night); color: #FFFFFF; }
.about-hero-grid {
  display: grid; gap: 48px; align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  padding-block: clamp(56px, 7vw, 104px);
}
.about-copy { display: flex; flex-direction: column; gap: 20px; }
.about-title { font-size: clamp(40px, 5vw, 64px); line-height: 1.05; font-weight: 600; letter-spacing: -.02em; }
.about-lead { font-size: var(--fs-lead); color: var(--on-dark); max-width: 560px; }
.about-visual {
  position: relative; height: 320px;
  display: flex; align-items: center; justify-content: center;
}
.about-ring { position: absolute; width: 300px; height: 300px; }
.about-icon { width: 150px; height: 150px; }

.value-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 30px; border-radius: var(--radius-l);
  background: var(--bg-alt);
}
.value-card h3 { font-size: 22px; font-weight: 600; line-height: 1.3; }

.founder-grid {
  display: grid; gap: 56px; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
}
.portrait {
  position: relative;
  width: calc(100% - 14px); max-width: 460px;
  justify-self: start;
}
.portrait::before {
  content: ""; position: absolute;
  inset: 14px -14px -14px 14px;
  border-radius: 28px; background: var(--navy);
}
.portrait img {
  position: relative;
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 28px;
}
@media (min-width: 600px) {
  .portrait { width: calc(100% - 24px); justify-self: center; }
  .portrait::before { inset: 24px -24px -24px 24px; }
}
.founder-copy { display: flex; flex-direction: column; gap: 18px; }
.founder-name { font-size: clamp(34px, 3.6vw, 50px); line-height: 1.08; font-weight: 600; }
.founder-role { font-size: 18px; font-weight: 600; color: var(--navy); }
.founder-copy > p:not([class]) { font-size: 18px; color: var(--text-2); }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding-top: 6px; }
.stat { padding: 18px; border-radius: 16px; background: #FFFFFF; border: 1px solid var(--line-2); }
.stat-value { font-size: 30px; font-weight: 700; line-height: 1.1; color: var(--navy); }
.stat-label { margin-top: 4px; font-size: var(--fs-small); color: var(--text-3); }
.skills { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; font-size: 14px; font-weight: 600; }
.skills li { padding: 7px 12px; border-radius: var(--pill); background: var(--mist); color: var(--navy); }
.founder-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-top: 6px; }

/* 8. Privacy + 404 ------------------------------------------------------- */
.page-hero { background: var(--night); color: #FFFFFF; }
.page-hero-inner { display: flex; flex-direction: column; gap: 16px; padding-block: clamp(48px, 6vw, 88px); }
.page-title { font-size: clamp(36px, 4.4vw, 56px); line-height: 1.08; font-weight: 600; letter-spacing: -.01em; }
.page-lead { font-size: var(--fs-lead); color: var(--on-dark); max-width: 640px; }
.page-hero .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; padding-top: 6px; }

.prose { display: flex; flex-direction: column; gap: 16px; font-size: 17px; color: var(--text-2); }
.prose h2 { margin-top: 24px; font-size: 26px; line-height: 1.25; font-weight: 600; color: var(--text); }
.prose h3 { margin-top: 8px; font-size: 19px; line-height: 1.3; font-weight: 600; color: var(--text); }
.prose ul { display: flex; flex-direction: column; gap: 8px; padding-left: 22px; }
.prose a { color: var(--navy); font-weight: 600; }
.prose strong { color: var(--text); }
.prose .updated { font-size: var(--fs-small); color: var(--text-3); }
.draft-banner {
  padding: 14px 18px; border-radius: var(--radius-m);
  background: var(--tint); border: 1px solid var(--line-2);
  color: var(--navy); font-size: var(--fs-small); font-weight: 600;
}
mark.todo { padding: 0 4px; border-radius: 4px; background: #FFF1BF; color: var(--night); }

/* 9. Footer -------------------------------------------------------------- */
.site-footer { background: var(--night); color: var(--silver); }
.footer-inner { display: flex; flex-direction: column; gap: 32px; padding-block: 56px 36px; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; }
.footer-brand { display: flex; flex-direction: column; gap: 10px; }
.footer-logo { align-self: flex-start; max-width: none; height: 54px; width: auto; margin: -8px 0 -8px -12px; }
.footer-brand p { font-size: 16px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 0 28px; font-size: 16px; }
.footer-nav a,
.footer-bottom a {
  display: inline-block; padding: 10px 0;
  color: var(--silver); text-decoration: none;
}
.footer-nav a:hover, .footer-bottom a:hover { color: #FFFFFF; text-decoration: underline; }
/* Links inside the footer's text row must not rely on colour alone (WCAG 1.4.1) */
.footer-bottom a { text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 4px 12px; padding-top: 12px;
  border-top: 1px solid var(--night-line);
  font-size: 14px;
}
.footer-bottom a { padding: 12px 0; }

/* 10. Background textures --------------------------------------------------
   Decorative layers built from the brand's own geometry: the isometric cube (lattice, cubes),
   the hero's dashed connector lines (flow) and the hero glow (blobs). A textured section gets
   .tex + one variant. The texture is the section's own ::before/::after, kept behind the content
   (isolation + z-index -1) and clipped by the section, so it never causes horizontal scroll.
   Only transform moves; each loop is seamless (it travels exactly one tile).
   The rest position IS the static texture: Pause, reduced motion and no-JS (section 11) show it still.
   Animated variants need data-motion-section on the section so they freeze when off-screen.
   Variants:  --iso     navy diamond lattice, drifts along its own 30-degree line (light sections)
              --cubes   stacked isometric cubes, rising slowly, strongest on the right (white)
              --flow    dashed data lines with brighter "packets", flowing left to right (night)
              --blobs   two drifting soft glows (navy CTA; add --blobs-light on light sections)
              --quiet   STATIC data lines + glow (Privacy and 404 heroes: reading pages, no Pause button)
              --footer  STATIC faint light lattice fading in from the right (footer)              */
:root {
  --tex-iso: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='104' height='60'><path d='M0 0l104 60M0 60L104 0' stroke='%23293189' stroke-opacity='.1'/><g fill='%23293189' fill-opacity='.17'><circle cx='52' cy='30' r='2.2'/><circle r='2.2'/><circle cx='104' r='2.2'/><circle cy='60' r='2.2'/><circle cx='104' cy='60' r='2.2'/></g></svg>");
  --tex-flow-a: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='400'><defs><path id='a' pathLength='1000' d='M0 300C200 300 400 110 600 110S1000 300 1200 300'/><path id='b' pathLength='1000' d='M0 150C300 150 300 250 600 250S900 150 1200 150'/></defs><g fill='none' opacity='.34'><g stroke='%232776BB' stroke-width='1.5' stroke-dasharray='4 6'><use href='%23a'/><use href='%23b'/></g><g stroke='%236FB1EC' stroke-width='3' stroke-linecap='round' stroke-dasharray='10 490'><use href='%23a'/><use href='%23b' stroke-dashoffset='-250'/></g></g></svg>");
}
.tex { position: relative; overflow: hidden; isolation: isolate; }
.tex::before,
.tex::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }

/* Isometric diamond lattice. --tex-fade = the section background, so the lattice fades at the edges. */
.tex--iso { --tex-fade: var(--bg); }
.tex--iso.section--alt { --tex-fade: var(--bg-alt); }
.tex--iso::before {
  inset: -60px 0 0 -104px;
  background: var(--tex-iso) 0 0 / 104px 60px;
  animation: tex-iso 72s linear infinite; /* travels exactly one tile per loop: seamless at any duration */
}
.tex--iso::after {
  inset: 0;
  background: linear-gradient(var(--tex-fade), rgb(255 255 255 / 0) 22%, rgb(255 255 255 / 0) 78%, var(--tex-fade));
}

/* Stacked isometric cubes (tumbling blocks), Mist top faces */
.tex--cubes::before {
  inset: 0 0 -135px;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='78' height='135' viewBox='0 0 52 90'><path fill='%23DCE8F6' fill-opacity='.45' d='M26 15l26 15-26 15-26-15zM0 60l26 15-26 15-26-15zM52 60l26 15-26 15-26-15z'/><path fill='none' stroke='%23293189' stroke-opacity='.1' stroke-width='.75' d='M0-30l26 15v30l-26 15-26-15v-30zM-26-15l26 15 26-15M0 0v30M52-30l26 15v30l-26 15-26-15v-30zM26-15l26 15 26-15M52 0v30M26 15l26 15v30l-26 15-26-15v-30zM0 30l26 15 26-15M26 45v30M0 60l26 15v30l-26 15-26-15v-30zM-26 75l26 15 26-15M0 90v30M52 60l26 15v30l-26 15-26-15v-30zM26 75l26 15 26-15M52 90v30'/></svg>") 0 0 / 78px 135px;
  animation: tex-rise 60s linear infinite;
}
.tex--cubes::after {
  inset: 0;
  background:
    linear-gradient(90deg, #FFFFFF 10%, rgb(255 255 255 / .55) 45%, rgb(255 255 255 / 0) 85%),
    linear-gradient(#FFFFFF, rgb(255 255 255 / 0) 25%, rgb(255 255 255 / 0) 80%, #FFFFFF);
}

/* Flowing data lines: two layers with different tiles and speeds (parallax) */
.tex--flow::before {
  top: 0; bottom: 0; left: -1200px; right: 0;
  background: var(--tex-flow-a) 0 0 / 1200px 400px;
  animation: tex-flow-a 80s linear infinite;
}
.tex--flow::after {
  top: 0; bottom: 0; left: -1600px; right: 0;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='1600' height='400'><defs><path id='c' pathLength='1000' d='M0 380C400 380 400 330 800 330S1200 380 1600 380'/><path id='d' pathLength='1000' d='M0 30C200 30 200 80 400 80S600 30 800 30S1000 80 1200 80S1400 30 1600 30'/></defs><g fill='none' opacity='.32'><g stroke='%232776BB' stroke-width='1.5' stroke-dasharray='3 7'><use href='%23c'/><use href='%23d'/></g><g stroke='%236FB1EC' stroke-width='3' stroke-linecap='round' stroke-dasharray='8 492'><use href='%23c' stroke-dashoffset='-120'/><use href='%23d' stroke-dashoffset='-380'/></g></g></svg>") 0 0 / 1600px 400px;
  animation: tex-flow-b 130s linear infinite;
}
/* Below 768px: layer B group opacity .32 -> .26 (layer opacity .8125 x .32 = .26) */
@media (max-width: 767.98px) { .tex--flow::after { opacity: .8125; } }

/* Soft drifting glows. Colours are custom properties so the light variant can reuse the motion.
   On the navy CTA they hug the top and bottom edges and drift sideways, so they never sit
   under the centred text on top of the existing centre glow (keeps ice/mist text above 4.5:1). */
.tex--blobs { --blob-a: rgb(39 118 187 / .55); --blob-b: rgb(78 155 224 / .22); }
.tex--blobs-light { --blob-a: rgb(39 118 187 / .18); --blob-b: rgb(111 177 236 / .4); } /* a = .18 so the top-left glow never smudges the founder photo */
.tex--blobs::before,
.tex--blobs::after { border-radius: 50%; }
.tex--blobs-light::before { width: 760px; height: 760px; left: -260px; top: -200px; }
.tex--blobs-light::after { width: 820px; height: 820px; right: -260px; bottom: -280px; }
.tex--blobs::before {
  width: 520px; height: 520px; left: -140px; top: -260px;
  background: radial-gradient(closest-side, var(--blob-a), rgb(39 118 187 / 0));
  animation: tex-blob-a 28s ease-in-out infinite alternate;
}
.tex--blobs::after {
  width: 600px; height: 600px; right: -160px; bottom: -300px;
  background: radial-gradient(closest-side, var(--blob-b), rgb(78 155 224 / 0));
  animation: tex-blob-b 36s ease-in-out infinite alternate;
}

/* Static variants (no animation at all) */
.tex--quiet::before { inset: 0; opacity: .7; background: var(--tex-flow-a) -300px 0 / 1200px 400px; }
.tex--quiet::after {
  width: 640px; height: 640px; right: -220px; top: -300px; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(39 118 187 / .38), rgb(39 118 187 / 0));
}
.tex--footer::before {
  inset: 0;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='104' height='60'><path d='M0 0l104 60M0 60L104 0' stroke='%236FB1EC' stroke-opacity='.09'/><g fill='%236FB1EC' fill-opacity='.18'><circle cx='52' cy='30' r='2'/><circle r='2'/><circle cx='104' r='2'/><circle cy='60' r='2'/><circle cx='104' cy='60' r='2'/></g></svg>") 0 0 / 104px 60px;
}
.tex--footer::after { inset: 0; background: linear-gradient(90deg, var(--night) 15%, rgb(20 23 66 / 0) 80%); }

@keyframes tex-iso { to { transform: translate(104px, 60px); } }
@keyframes tex-rise { to { transform: translateY(-135px); } }
@keyframes tex-flow-a { to { transform: translateX(1200px); } }
@keyframes tex-flow-b { to { transform: translateX(1600px); } }
@keyframes tex-blob-a { to { transform: translate(320px, 40px) scale(1.1); } }
@keyframes tex-blob-b { to { transform: translate(-340px, -30px) scale(.92); } }

/* 11. Motion --------------------------------------------------------------
   Every animated element rests in its final, readable state, so
   "animation: none" (Pause button, reduced motion) leaves a clean static frame.
   Board rule: animate transform/opacity only (clip-path wipe and SVG dash are the
   two small exceptions kept from the design). */
@keyframes a-seq {
  0%, 6% { opacity: 0; transform: translateY(12px); }
  12%, 86% { opacity: 1; transform: none; }
  94%, 100% { opacity: 0; transform: translateY(-8px); }
}
@keyframes a-wipe { 0%, 28% { clip-path: inset(0 100% 0 0); } 52%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes a-pulse { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.18); } }
@keyframes a-spin { to { transform: rotate(360deg); } }
@keyframes a-dash { to { stroke-dashoffset: -28; } }
@keyframes a-marquee { to { transform: translateX(-50%); } }
@keyframes a-scan { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(var(--scan-travel, 222px)); } }
@keyframes a-bar { 0%, 8% { transform: scaleY(0); } 30%, 86% { transform: scaleY(1); } 96%, 100% { transform: scaleY(0); } }
@keyframes a-glow { 0%, 100% { opacity: .45; transform: scale(.94); } 50% { opacity: .8; transform: scale(1.06); } }
@keyframes a-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes a-float-lg { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes a-fill { 0% { transform: scaleX(0); } 80%, 100% { transform: scaleX(1); } }
@keyframes a-blink { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes a-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.a-seq { animation: a-seq 8s ease-out infinite both; }
.a-wipe { animation: a-wipe 8s linear infinite both; }
.a-pulse { position: relative; }
.a-pulse::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 4px rgb(78 155 224 / .55);
  opacity: 0; pointer-events: none;
  animation: a-pulse 2s ease-out infinite;
}
.a-spin { animation: a-spin 16s linear infinite; }
.a-spin-slow { animation: a-spin 24s linear infinite; }
.a-dash { stroke-dasharray: 6 8; animation: a-dash 1.1s linear infinite; }
.a-marquee { animation: a-marquee 45s linear infinite; }
.a-scan { animation: a-scan 2.8s ease-in-out infinite; }
.a-bar { animation: a-bar 8s cubic-bezier(.2, .8, .2, 1) infinite both; }
.a-glow { opacity: .6; animation: a-glow 5s ease-in-out infinite; }
.a-float { animation: a-float 5s ease-in-out infinite; }
.a-float-lg { animation: a-float-lg 6s ease-in-out infinite; }
.a-fill { animation: a-fill 6s ease-in-out infinite; }
.a-blink { animation: a-blink 1.4s ease-in-out infinite; }
.a-rise { animation: a-rise .8s ease-out both; }

/* Delays (seconds x 100). Must stay after the animation classes above. */
.d-n250 { animation-delay: -2.5s; }
.d-010 { animation-delay: .1s; }  .d-015 { animation-delay: .15s; } .d-020 { animation-delay: .2s; }
.d-030 { animation-delay: .3s; }  .d-035 { animation-delay: .35s; } .d-045 { animation-delay: .45s; }
.d-050 { animation-delay: .5s; }  .d-060 { animation-delay: .6s; }  .d-070 { animation-delay: .7s; }
.d-075 { animation-delay: .75s; } .d-080 { animation-delay: .8s; }  .d-090 { animation-delay: .9s; }
.d-105 { animation-delay: 1.05s; } .d-110 { animation-delay: 1.1s; } .d-120 { animation-delay: 1.2s; }
.d-130 { animation-delay: 1.3s; } .d-155 { animation-delay: 1.55s; } .d-170 { animation-delay: 1.7s; }
.d-180 { animation-delay: 1.8s; } .d-210 { animation-delay: 2.1s; } .d-215 { animation-delay: 2.15s; }
.d-230 { animation-delay: 2.3s; } .d-240 { animation-delay: 2.4s; } .d-250 { animation-delay: 2.5s; }
.d-270 { animation-delay: 2.7s; } .d-285 { animation-delay: 2.85s; } .d-290 { animation-delay: 2.9s; }
.d-320 { animation-delay: 3.2s; } .d-330 { animation-delay: 3.3s; } .d-340 { animation-delay: 3.4s; }

/* Inactive demo panels don't animate; the animation restarts when a panel is shown. */
html.js .demo-panel:not(.is-active) *,
html.js .demo-panel:not(.is-active) *::after { animation: none !important; }

/* Off-screen sections and hidden tabs: freeze in place (saves CPU/battery).
   .is-offscreen::before/::after = the section's own background texture (section 10). */
.is-offscreen::before, .is-offscreen::after,
.is-offscreen *, .is-offscreen *::before, .is-offscreen *::after,
html.page-hidden *, html.page-hidden *::before, html.page-hidden *::after { animation-play-state: paused !important; }

/* Pause button (WCAG 2.2.2) and reduced-motion start state: show the static frame. */
html.motion-paused *,
html.motion-paused *::before,
html.motion-paused *::after { animation: none !important; }

/* Motion is a JS-only enhancement: without JS there is no Pause button, so nothing animates. */
html:not(.js) *,
html:not(.js) *::before,
html:not(.js) *::after { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  /* With JS, site.js adds html.motion-paused before first paint; here only transitions are switched off. */
  *, *::before, *::after { transition: none !important; }
  .card-lift:hover { transform: none; }
}