/* ==========================================================================
   LifterLMS Expert — public design system
   Near-black surfaces, light type, one blue→teal accent. No framework.

   Contents
   01 Fonts            06 Buttons            11 Process steps     16 Forms
   02 Tokens           07 Header + nav       12 Stats             17 Blog + prose
   03 Base             08 Hero               13 FAQ               18 Footer
   04 Layout           09 Cards + grids      14 CTA band          19 Motion
   05 Type helpers     10 Feature panels     15 Page hero         20 Utilities
                                             11b 3D course scene (home)

   Motion lives next to what it moves:
   07 nav underline, condensing header      09b Marquee              17 reading progress
   08b Hero choreography (on load)          11 steps draw in         19 reveal / stagger, count-up,
   09a Pointer spotlight                    11b 3D course scene      ambient pause, page transitions,
                                            14 CTA edge              reduced motion (the off switch)
   ========================================================================== */

/* 01 Fonts ---------------------------------------------------------------- */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/geist-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/geist-latin-ext-var.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/geist-mono-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F, U+2190-2193, U+2212, U+FEFF, U+FFFD;
}
/* Metric-matched fallback: the page barely moves when Geist swaps in. */
@font-face {
  font-family: "Geist Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica");
  size-adjust: 105.9%;
  ascent-override: 94.9%;
  descent-override: 27.9%;
  line-gap-override: 0%;
}

/* 02 Tokens --------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* Surfaces, darkest to lightest */
  --bg: #050608;
  --bg-raised: #090b0f;
  --surface: #0d1015;
  --surface-2: #12161d;
  --surface-3: #191e27;

  /* Hairlines */
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .13);
  --line-3: rgba(255, 255, 255, .22);

  /* Text (all pass WCAG AA on --bg and --surface-2) */
  --text: #f3f5f7;
  --text-2: #aab3c0;
  --text-3: #808b9b;

  /* Accent: the brand's blue → teal */
  --blue: #4d9bff;
  --blue-deep: #2a7de1;
  --cyan: #35c8e8;
  --teal: #2ad0c4;
  --teal-deep: #12b6ac;
  --accent: var(--teal);
  --grad: linear-gradient(100deg, #5aa5ff 0%, #3cc9ea 52%, #33d6c8 100%);
  --grad-text: linear-gradient(96deg, #9cc9ff 0%, #6bdcec 52%, #55e0d2 100%);
  --on-accent: #03121c;

  --ok: #3ddc97;
  --warn: #f5b84a;
  --danger: #ff7a7a;

  /* Shape */
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* Type */
  --font: "Geist", "Geist Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Rhythm */
  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2rem);
  --section-y: clamp(4.25rem, 2.6rem + 5.6vw, 7.5rem);
  --header-h: 68px;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --shadow-pop: 0 24px 60px -24px rgba(0, 0, 0, .85), 0 2px 0 rgba(255, 255, 255, .03) inset;
}

/* 03 Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
  background: var(--bg);
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text-2);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--text);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.025em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.1rem); line-height: 1.04; letter-spacing: -.04em; }
h2 { font-size: clamp(1.85rem, 1.3rem + 2.3vw, 3rem); letter-spacing: -.032em; }
h3 { font-size: 1.1875rem; line-height: 1.3; letter-spacing: -.015em; }
h4 { font-size: 1rem; line-height: 1.4; letter-spacing: -.01em; }
p { margin: 0 0 1rem; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a { color: var(--text); text-decoration-color: var(--line-3); text-underline-offset: 3px; transition: color .2s var(--ease), text-decoration-color .2s var(--ease); }
a:hover { color: #fff; text-decoration-color: var(--teal); }
img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
ul, ol { margin: 0; padding: 0; }
strong, b { color: var(--text); font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
::selection { background: rgba(53, 200, 232, .32); color: #fff; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }

.ic { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.24em; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip-link {
  position: absolute; left: 12px; top: -80px; z-index: 200;
  background: var(--text); color: var(--bg); padding: .7rem 1rem; border-radius: var(--r-sm);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; color: var(--bg); }

/* 04 Layout --------------------------------------------------------------- */
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.container-narrow { max-width: calc(820px + 2 * var(--gutter)); }

.section { padding-block: var(--section-y); position: relative; }
.section-tight { padding-block: calc(var(--section-y) * .6); }
.section-alt { background: var(--bg-raised); border-block: 1px solid var(--line); }
.section + .section:not(.section-alt):not(.section-flush)::before {
  /* A faint centre-weighted rule between two same-coloured sections. */
  content: ""; position: absolute; top: 0; left: 50%; width: min(var(--container), 100% - 2 * var(--gutter));
  transform: translateX(-50%); height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2) 20%, var(--line-2) 80%, transparent);
}
.section-alt + .section::before { display: none; }

.section-head { max-width: 46rem; margin: 0 auto clamp(2.5rem, 5vw, 4rem); text-align: center; }
.section-head.left { margin-inline: 0; text-align: left; }
.section-head h2 { margin-top: .9rem; }
.section-head p { margin-top: 1.1rem; font-size: 1.125rem; color: var(--text-2); }

.split { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.split.top { align-items: start; }
@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split.wide-left { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .split.wide-right { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
  .split.narrow-left { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .split .order-last { order: 2; }
}

.grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) {
  .grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.grid.cols-2-always { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stack > * + * { margin-top: 1rem; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.center { text-align: center; }
.center .actions { justify-content: center; }
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; } .mt-5 { margin-top: 3rem; }

/* 05 Type helpers --------------------------------------------------------- */
.lead { font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height: 1.6; color: var(--text-2); }
.muted { color: var(--text-3); }
.small { font-size: .875rem; }
.text-grad { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--mono); font-size: .75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal);
}
.eyebrow::before { content: ""; width: 18px; height: 1px; background: currentColor; opacity: .7; }
.section-head:not(.left) .eyebrow::after { content: ""; width: 18px; height: 1px; background: currentColor; opacity: .7; }

.pill {
  display: inline-flex; align-items: center; gap: .6rem; margin: 0;
  padding: .4rem .9rem .4rem .7rem; border: 1px solid var(--line-2); border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .03); color: var(--text-2); font-size: .8125rem; font-weight: 500; line-height: 1.4;
}
.pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(42, 208, 196, .16); flex: none; }

.check-list { list-style: none; display: grid; gap: .8rem; }
.check-list li { display: grid; grid-template-columns: 1.375rem 1fr; gap: .75rem; align-items: start; color: var(--text-2); }
.check-list .ic { width: 1.375rem; height: 1.375rem; color: var(--teal); margin-top: .12rem; }
.check-list.cols-2 { grid-template-columns: 1fr; }
@media (min-width: 560px) { .check-list.cols-2 { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; } }

.tags { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; }
.tag {
  display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .8rem;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface);
  color: var(--text-2); font-size: .875rem; line-height: 1.3;
}
.tag .ic { color: var(--teal); width: 1em; height: 1em; }

.link-arrow { display: inline-flex; align-items: center; gap: .4rem; color: var(--text); font-weight: 500; text-decoration: none; }
.link-arrow .ic { width: 1.05em; height: 1.05em; color: var(--teal); transition: transform .25s var(--ease); }
.link-arrow:hover .ic, a:hover > .link-arrow .ic, a:hover .go .ic { transform: translateX(3px); }

/* 06 Buttons -------------------------------------------------------------- */
.btn {
  --btn-py: .7rem; --btn-px: 1.15rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: var(--btn-py) var(--btn-px); border: 1px solid transparent; border-radius: var(--r-pill);
  font: inherit; font-size: .9375rem; font-weight: 600; line-height: 1.2; letter-spacing: -.005em; text-decoration: none;
  cursor: pointer; white-space: nowrap; user-select: none;
  transition: transform .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease), box-shadow .25s var(--ease), color .2s var(--ease);
}
.btn .ic { width: 1.1em; height: 1.1em; transition: transform .25s var(--ease); }
.btn:hover .ic-end { transform: translateX(3px); }
.btn:active { transform: translateY(1px) scale(.985); }
.btn-lg { --btn-py: .9rem; --btn-px: 1.5rem; font-size: 1rem; }
.btn-sm { --btn-py: .55rem; --btn-px: 1rem; font-size: .875rem; }
.btn-block { width: 100%; }

.btn-primary { background: var(--grad); color: var(--on-accent); box-shadow: 0 0 0 1px rgba(255, 255, 255, .14) inset, 0 10px 30px -12px rgba(53, 200, 232, .55); }
.btn-primary:hover { color: var(--on-accent); box-shadow: 0 0 0 1px rgba(255, 255, 255, .28) inset, 0 14px 38px -10px rgba(53, 200, 232, .7); transform: translateY(-1px); }
.btn-secondary { background: rgba(255, 255, 255, .04); border-color: var(--line-2); color: var(--text); }
.btn-secondary:hover { background: rgba(255, 255, 255, .08); border-color: var(--line-3); color: #fff; }
.btn-ghost { color: var(--text-2); padding-inline: .6rem; }
.btn-ghost:hover { color: #fff; }
.btn[disabled], .btn.is-busy { opacity: .65; cursor: progress; transform: none; }
/* Sheen: one soft highlight crosses the primary button on hover. It sits under the label, so contrast never drops. */
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .4) 50%, transparent 68%); transform: translateX(-105%); }
.btn-primary:hover::after { transform: translateX(105%); transition: transform .75s cubic-bezier(.4, 0, .2, 1); }

/* 07 Header + nav --------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100; height: var(--header-h);
  border-bottom: 1px solid transparent;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
/* The glass bar is its own layer: once the page scrolls it fades in and condenses (scaleY),
   and the contents ride up with it. The header's box never changes, so nothing below moves. */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transform-origin: 50% 0;
  background: rgba(5, 6, 8, .92); border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px);
  transition: opacity .3s var(--ease), transform .4s var(--ease);
}
.site-header.is-stuck::before { opacity: 1; transform: scaleY(.853); }
.site-header.is-open { border-bottom-color: var(--line); transition-duration: 0s; } /* solid at once: no page text ghosting through as the menu opens */
.site-header.is-open::before { opacity: 0; transition-duration: 0s; }
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand, .nav-toggle { transition: color .2s var(--ease), transform .4s var(--ease); }
.is-stuck:not(.is-open) > .header-inner > :is(.brand, .nav-toggle) { transform: translateY(-5px); }

.brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--text); text-decoration: none; font-weight: 600; font-size: 1.0625rem; letter-spacing: -.02em; white-space: nowrap; }
.brand:hover { color: #fff; }
.brand-mark { width: 32px; height: 32px; flex: none; border-radius: 9px; }
.brand-name span { color: var(--teal); }
.brand-logo { display: block; flex: none; width: auto; max-width: min(60vw, 280px); object-fit: contain; }
.brand-logo.is-full + .brand-name { display: none; } /* an uploaded logo that already contains the name */

.nav-toggle {
  display: inline-grid; place-items: center; width: 44px; height: 44px; margin-right: -10px;
  background: none; border: 0; color: var(--text); cursor: pointer; border-radius: var(--r-sm);
}
.nav-toggle-bars { position: relative; width: 20px; height: 12px; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform .3s var(--ease), top .3s var(--ease); }
.nav-toggle-bars::before { top: 0; }
.nav-toggle-bars::after { top: 100%; }
.is-open .nav-toggle-bars::before { top: 50%; transform: rotate(45deg); }
.is-open .nav-toggle-bars::after { top: 50%; transform: rotate(-45deg); }

.site-nav {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain;
  padding: .75rem var(--gutter) 2rem; background: var(--bg);
}
.site-header.is-open { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
.is-open .site-nav { display: block; }
.nav-list { list-style: none; }
.nav-link {
  display: flex; align-items: center; justify-content: space-between; gap: .35rem; width: 100%;
  padding: .85rem 0; background: none; border: 0; border-bottom: 1px solid var(--line);
  color: var(--text); font: inherit; font-size: 1.0625rem; font-weight: 500; text-decoration: none; text-align: left; cursor: pointer;
}
.nav-link[data-current] { color: #fff; }
.nav-link .ic { width: 1rem; height: 1rem; color: var(--text-3); transition: transform .25s var(--ease); }
.nav-menu-btn[aria-expanded="true"] .ic { transform: rotate(180deg); }
.nav-menu { display: none; padding: .5rem 0 1rem; }
.has-menu.is-open > .nav-menu { display: block; }
.nav-menu-grid { display: grid; gap: .15rem; }
.nav-menu-item { display: grid; grid-template-columns: 36px 1fr; gap: .8rem; align-items: center; padding: .55rem .6rem; border-radius: var(--r); text-decoration: none; color: var(--text); }
.nav-menu-item:hover { background: rgba(255, 255, 255, .05); }
.nav-menu-item strong { display: block; font-size: .9375rem; font-weight: 500; line-height: 1.3; }
.nav-menu-item small { display: none; color: var(--text-3); font-size: .8125rem; line-height: 1.4; }
.nav-menu-all { display: inline-flex; align-items: center; gap: .4rem; margin: .6rem .6rem 0; color: var(--teal); font-size: .9375rem; font-weight: 500; text-decoration: none; }
.nav-cta { margin-top: 1.25rem; width: 100%; }
.nav-list > .nav-ink { display: none; }

@media (min-width: 1024px) {
  .nav-toggle { display: none; }
  .site-nav { display: flex; align-items: center; gap: 1.5rem; position: static; height: auto; overflow: visible; padding: 0; background: none; transition: transform .4s var(--ease); }
  .is-stuck .site-nav { transform: translateY(-5px); }
  .nav-list { display: flex; align-items: center; gap: .15rem; position: relative; }
  /* Underline that site.js slides to the hovered or focused item (--x, --w) and rests on the current page. */
  .nav-list > .nav-ink { display: block; position: absolute; left: 0; bottom: -5px; width: 1px; height: 2px; background: var(--grad); opacity: 0; pointer-events: none; transform: translateX(var(--x, 0)) scaleX(var(--w, 0)); transform-origin: 0 50%; transition: opacity .25s var(--ease); }
  .nav-list > .nav-ink.is-on { opacity: 1; transition: opacity .25s var(--ease), transform .45s var(--ease); }
  .nav-list > li { position: relative; }
  .nav-link { width: auto; padding: .5rem .8rem; border: 0; border-radius: var(--r-pill); font-size: .9375rem; color: var(--text-2); }
  .nav-link:hover, .nav-link[aria-current="page"], .nav-link[aria-expanded="true"] { color: #fff; background: rgba(255, 255, 255, .06); }
  .nav-menu {
    position: absolute; top: calc(100% + 14px); left: 50%; width: 620px; padding: .6rem;
    transform: translateX(-50%); background: rgba(13, 16, 21, .96); border: 1px solid var(--line-2); border-radius: var(--r-lg);
    box-shadow: var(--shadow-pop); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  }
  /* Invisible bridge so the pointer can travel from the button to the panel. */
  .nav-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
  .has-menu.is-open > .nav-menu { display: block; animation: menu-in .18s var(--ease); }
  .nav-menu-grid { grid-template-columns: 1fr 1fr; gap: .1rem; }
  .nav-menu-item { align-items: start; padding: .7rem; }
  .nav-menu-item small { display: block; margin-top: .15rem; }
  .nav-menu-all { margin: .4rem 0 0; padding: .8rem .7rem .4rem; width: 100%; border-top: 1px solid var(--line); }
  .nav-cta { margin-top: 0; width: auto; }
  /* Where the browser can transition `display`, the panel also eases out when it closes. */
  @supports (transition-behavior: allow-discrete) {
    .js .nav-menu { transition: opacity .2s var(--ease), transform .25s var(--ease), display .25s allow-discrete; }
    .js .has-menu:not(.is-open) > .nav-menu { opacity: 0; transform: translateX(-50%) translateY(-6px); }
    .js .has-menu.is-open > .nav-menu { animation: none; }
    @starting-style { .js .has-menu.is-open > .nav-menu { opacity: 0; transform: translateX(-50%) translateY(-6px); } }
  }
}
@keyframes menu-in { from { opacity: 0; transform: translateX(-50%) translateY(-6px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

.icon-tile {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  border: 1px solid var(--line-2); color: var(--teal);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset;
  transition: border-color .3s var(--ease);
}
.icon-tile .ic { width: 20px; height: 20px; transition: transform .45s var(--ease); }
.icon-tile.sm { width: 36px; height: 36px; border-radius: 10px; }
.icon-tile.sm .ic { width: 17px; height: 17px; }
.icon-tile.lg { width: 56px; height: 56px; border-radius: 15px; }
.icon-tile.lg .ic { width: 26px; height: 26px; }
.icon-tile.blue { color: var(--blue); }

/* 08 Hero ----------------------------------------------------------------- */
.hero { position: relative; margin-top: calc(var(--header-h) * -1); padding: calc(var(--header-h) + clamp(3rem, 7vw, 6.5rem)) 0 clamp(1rem, 3vw, 2rem); overflow: hidden; isolation: isolate; }
.hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-bg::before {
  /* Two soft brand glows. */
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60rem 34rem at 78% 8%, rgba(42, 125, 225, .22), transparent 62%),
    radial-gradient(44rem 28rem at 96% 62%, rgba(42, 208, 196, .13), transparent 60%),
    radial-gradient(40rem 26rem at 4% 0%, rgba(77, 155, 255, .10), transparent 60%);
}
.hero-bg::after {
  /* A fine grid that fades out towards the edges. */
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 56px 56px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 60% 30%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 75% 70% at 60% 30%, #000 20%, transparent 78%);
}
.hero-grid { display: grid; gap: clamp(3rem, 6vw, 4.5rem); align-items: center; }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); } }
.hero h1 { margin-top: 1.5rem; max-width: 16ch; }
.hero .lead { margin-top: 1.5rem; max-width: 34rem; }
.hero .actions { margin-top: 2.25rem; }
.trust-row { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; margin-top: 2.25rem; padding-top: 1.75rem; border-top: 1px solid var(--line); max-width: 34rem; }
.trust-row li { display: inline-flex; align-items: center; gap: .5rem; color: var(--text-2); font-size: .9375rem; }
.trust-row .ic { color: var(--teal); width: 1.1rem; height: 1.1rem; }

.hero-visual { position: relative; min-width: 0; }
@media (min-width: 1024px) { .hero-visual { margin-right: -1rem; } }

.window {
  position: relative; border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(180deg, rgba(18, 22, 29, .92), rgba(9, 11, 15, .92));
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .03) inset, 0 -1px 60px -10px rgba(42, 125, 225, .25);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.window-bar { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border-bottom: 1px solid var(--line); }
.window-dots { display: flex; gap: 6px; }
.window-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.window-tab { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: .75rem; color: var(--text-3); }
.window-tab b { color: var(--text-2); font-weight: 500; }
.window-badge { margin-left: auto; flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: .4rem; font-family: var(--mono); font-size: .6875rem; color: var(--ok); }
.window-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.code { margin: 0; padding: 1.25rem 1.25rem 3.25rem; font-family: var(--mono); font-size: clamp(.6875rem, .55rem + .45vw, .8125rem); line-height: 1.85; color: #c9d3e0; overflow-x: auto; tab-size: 4; white-space: pre; counter-reset: ln; }
.code .ln { display: inline; }
.code .ln::before { counter-increment: ln; content: counter(ln); display: inline-block; width: 1.5em; margin-right: 1.25em; text-align: right; color: rgba(255, 255, 255, .22); }
.tk-c { color: #6c7889; font-style: italic; }
.tk-k { color: #7fb6ff; }
.tk-f { color: #5fe0d2; }
.tk-s { color: #f0c987; }
.tk-v { color: #e3a8ff; }
.tk-n { color: #f5a97f; }

.float-card {
  position: absolute; display: flex; align-items: center; gap: .7rem; padding: .7rem .95rem;
  background: rgba(18, 22, 29, .82); border: 1px solid var(--line-2); border-radius: 14px;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--shadow-pop);
  color: var(--text); font-size: .8125rem; font-weight: 500; line-height: 1.35;
}
.float-card small { display: block; color: var(--text-3); font-weight: 400; font-size: .75rem; }
.float-card .ic { color: var(--ok); width: 1.25rem; height: 1.25rem; }
.float-a { left: -1.25rem; bottom: -1.25rem; animation: bob 9s ease-in-out infinite; }
.float-b { right: -1.25rem; bottom: 3.25rem; flex-direction: column; align-items: stretch; gap: .5rem; min-width: 190px; animation: bob 11s ease-in-out -3s infinite; }
@media (max-width: 1100px) { .float-a { left: .75rem; } .float-b { right: .75rem; } }
@media (max-width: 520px) { .float-b { display: none; } .float-a { position: static; margin-top: .75rem; animation: none; } .code { padding-bottom: 1.25rem; } .window-tab span { display: none; } }
.vitals { display: grid; gap: .4rem; }
.vital { display: grid; grid-template-columns: 2.2rem 1fr auto; gap: .6rem; align-items: center; font-family: var(--mono); font-size: .6875rem; color: var(--text-2); }
.vital-bar { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.vital-bar i { display: block; height: 100%; border-radius: inherit; background: var(--grad); }
.vital em { font-style: normal; color: var(--ok); }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Facts bar under the hero */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r-lg); background: rgba(255, 255, 255, .015); overflow: hidden; }
.fact { padding: 1.5rem clamp(1rem, 3vw, 1.75rem); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fact:nth-child(2n) { border-right: 0; }
.fact:nth-last-child(-n+2) { border-bottom: 0; }
@media (min-width: 860px) {
  .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fact { border-bottom: 0; }
  .fact:nth-child(2n) { border-right: 1px solid var(--line); }
  .fact:last-child { border-right: 0; }
}
.hero-facts { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
.fact-num { display: block; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); font-weight: 600; letter-spacing: -.04em; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.fact-num span { color: var(--teal); }
.fact-label { display: block; margin-top: .6rem; color: var(--text-3); font-size: .875rem; line-height: 1.4; }

/* 08b Hero choreography ----------------------------------------------------
   One pass on load, then calm: the status dot pings, the code is typed line by line behind a caret,
   the vitals bars fill, the two cards arrive. Pure CSS, like .rise, so the first paint never waits for
   JavaScript and nothing here can leave content hidden. Only the glows and the grid keep moving
   afterwards, very slowly. With reduced motion none of this exists. */
@media (prefers-reduced-motion: no-preference) {
  /* Ambient: the glows breathe and drift (they only ever scale up, so no edge shows)… */
  .hero-bg::before, .page-hero::before, .cta-band::before { animation: glow-drift 26s ease-in-out infinite alternate; }
  /* …and on wide screens two tinted patches of the grid slowly trade places. */
  @media (min-width: 768px) {
    .hero::before, .hero::after {
      content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
      background-image: linear-gradient(rgba(107, 220, 236, .13) 1px, transparent 1px), linear-gradient(90deg, rgba(107, 220, 236, .13) 1px, transparent 1px);
      background-size: 56px 56px; background-position: center top;
      -webkit-mask-image: radial-gradient(26rem 18rem at 30% 22%, #000, transparent 72%); mask-image: radial-gradient(26rem 18rem at 30% 22%, #000, transparent 72%);
      animation: glint 22s ease-in-out infinite alternate;
    }
    .hero::after { -webkit-mask-image: radial-gradient(30rem 20rem at 80% 56%, #000, transparent 72%); mask-image: radial-gradient(30rem 20rem at 80% 56%, #000, transparent 72%); animation-delay: -22s; }
  }

  /* Status dot: three slow pings, then still. */
  .pill-dot { position: relative; }
  .pill-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--teal); animation: ping 2.4s var(--ease) .9s 3 both; }

  /* Code window: each line is unmasked one character per step while a caret rides the edge.
     --c is the line's length in characters and --t when it starts (6ms a character, 40ms per line break),
     for the sample in pages/home.php. If that sample changes, a rough match is fine: it only sets the pace
     (a line without values is typed last). The resting clip-path is a no-op that stays on purpose: taking
     it off after each line costs a layout. On the last line the caret blinks three times and goes. */
  .code .ln { --gutter: 2.75em; display: inline-block; position: relative; clip-path: inset(0 -2px 0 0); animation: type calc(var(--c, 20) * 6ms) steps(var(--c, 20), end) var(--t, 3.5s) backwards; }
  .code .ln::after { content: ""; position: absolute; inset: .36em 0; box-shadow: 2px 0 0 var(--cyan); opacity: 0; pointer-events: none; animation: caret calc(var(--c, 20) * 6ms) steps(var(--c, 20), end) var(--t, 3.5s); }
  .code .ln:last-child::after { animation: caret-end 3.2s step-end var(--t, 3.5s); }
  .code .ln:nth-child(1) { --c: 3; --t: .95s; } .code .ln:nth-child(2) { --c: 41; --t: 1.01s; } .code .ln:nth-child(3) { --c: 38; --t: 1.29s; } .code .ln:nth-child(4) { --c: 3; --t: 1.56s; }
  .code .ln:nth-child(5) { --c: 41; --t: 1.62s; } .code .ln:nth-child(6) { --c: 39; --t: 1.91s; } .code .ln:nth-child(7) { --c: 41; --t: 2.18s; } .code .ln:nth-child(8) { --c: 1; --t: 2.47s; }
  .code .ln:nth-child(9) { --c: 25; --t: 2.51s; } .code .ln:nth-child(10) { --c: 30; --t: 2.70s; } .code .ln:nth-child(11) { --c: 37; --t: 2.92s; } .code .ln:nth-child(12) { --c: 10; --t: 3.18s; }
  .code .ln:nth-child(13) { --c: 12; --t: 3.28s; } .code .ln:nth-child(14) { --c: 2; --t: 3.40s; }
  .window-badge { animation: fade .6s var(--ease) 3.5s backwards; }

  /* Cards: fade in on `translate`, so the entrance and the slow bob (on `transform`) never fight. */
  .float-b { animation: float-in .7s var(--ease) 1.3s backwards, bob 11s ease-in-out -3s infinite; }
  .float-a { animation: float-in .7s var(--ease) 3.6s backwards, bob 9s ease-in-out 4.3s infinite; }
  .float-a .ic { animation: pop .5s var(--ease) 3.8s backwards; }
  @media (max-width: 520px) { .float-a { animation: float-in .7s var(--ease) 3.6s backwards; } }
  .vital:nth-child(2) { --n: 1; } .vital:nth-child(3) { --n: 2; }
  .vital-bar i { transform-origin: 0 50%; animation: grow-x .9s var(--ease) calc(1.7s + var(--n, 0) * .15s) backwards; }
  .vital em { animation: fade .5s var(--ease) calc(2.4s + var(--n, 0) * .15s) backwards; }
}
@keyframes glow-drift { to { opacity: .8; transform: scale(1.14) translate3d(-2.5%, 2%, 0); } }
@keyframes glint { from { opacity: 0; } to { opacity: 1; } }
@keyframes ping { from { opacity: .5; transform: scale(1); } 70%, to { opacity: 0; transform: scale(3.4); } }
@keyframes type { 0% { clip-path: inset(0 100% 0 0); } 1% { clip-path: inset(0 calc(100% - var(--gutter, 0px) - 2px) 0 0); } 100% { clip-path: inset(0 -2px 0 0); } }
@keyframes caret { from { opacity: 1; transform: translateX(calc(var(--gutter, 0px) - 100%)); } to { opacity: 1; transform: none; } }
@keyframes caret-end { 0% { opacity: 1; transform: translateX(calc(var(--gutter, 0px) - 100%)); } 1% { opacity: 1; transform: none; } 17% { opacity: 0; } 34% { opacity: 1; } 50% { opacity: 0; } 67% { opacity: 1; } 84%, 100% { opacity: 0; transform: none; } }
@keyframes float-in { from { opacity: 0; translate: 0 10px; } }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(.6); } }
@keyframes grow-x { from { transform: scaleX(0); } }

/* 09 Cards + grids -------------------------------------------------------- */
.card {
  position: relative; display: block; padding: clamp(1.25rem, 2.4vw, 1.75rem);
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-raised) 100%);
  border: 1px solid var(--line); border-radius: var(--r-lg); color: inherit; text-decoration: none;
  transition: border-color .3s var(--ease), transform .3s var(--ease), background-color .3s var(--ease);
}
.card :is(h2, h3) { margin-top: 1.1rem; }
.card :is(h2, h3):first-child { margin-top: 0; }
.card p { margin-top: .5rem; color: var(--text-2); font-size: .9375rem; line-height: 1.6; }
.card.pad-lg { padding: clamp(1.5rem, 3.5vw, 2.5rem); }
.card.glass { background: rgba(255, 255, 255, .03); border-color: var(--line-2); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

a.card { display: flex; flex-direction: column; }
a.card > .icon-tile { align-self: flex-start; }
a.card:hover { border-color: var(--line-3); transform: translateY(-3px); color: inherit; }
a.card:hover :is(h2, h3) { color: #fff; }
.card .go { display: inline-flex; align-items: center; gap: .4rem; margin-top: auto; padding-top: 1.25rem; color: var(--text); font-size: .875rem; font-weight: 500; }
.card .go .ic { width: 1em; height: 1em; color: var(--teal); transition: transform .25s var(--ease); }

/* Service cards sit icon-beside-text on phones, so eight of them stay scannable. */
@media (max-width: 639px) {
  a.card.svc { display: grid; grid-template-columns: 44px 1fr; column-gap: 1rem; align-items: start; }
  a.card.svc > .icon-tile { grid-row: 1 / span 3; }
  a.card.svc > :is(h2, h3) { margin-top: .05rem; }
  a.card.svc > .go { padding-top: .75rem; }
}

.card-row { display: grid; grid-template-columns: 44px 1fr; gap: 1rem; align-items: start; }
.card-row h3 { margin-top: .1rem; }

/* Compact tile: icon + two short lines (industries, integrations). */
.tile { position: relative; display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); transition: border-color .3s var(--ease), background-color .3s var(--ease); }
.tile:hover { border-color: var(--line-2); background: var(--surface-2); }
.tile strong { display: block; font-size: .9375rem; font-weight: 500; line-height: 1.3; }
.tile small { display: block; margin-top: .1rem; color: var(--text-3); font-size: .8125rem; line-height: 1.35; }
.tiles { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 520px) { .tile { flex-direction: column; align-items: flex-start; gap: .65rem; padding: .9rem; } }
@media (min-width: 760px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tiles.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* 09a Pointer spotlight ----------------------------------------------------
   On fine pointers site.js writes the pointer position to --mx / --my on the hovered card, tile, stat
   or panel. ::before is a soft fill (and lift shadow) under the content; ::after is a 1px ring that
   lights the border nearest the pointer. Without the script both sit at the top centre. */
.card, .stat { isolation: isolate; }
.card::before, .card::after, .tile::after, .stat::after, .panel::before { content: ""; position: absolute; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s var(--ease); }
.card::before { inset: 0; z-index: -1; background: radial-gradient(22rem circle at var(--mx, 50%) var(--my, 0%), rgba(77, 155, 255, .1), transparent 62%); box-shadow: 0 28px 50px -32px rgba(0, 0, 0, .95); }
.card::after, .tile::after, .stat::after {
  inset: -1px; padding: 1px; background: radial-gradient(15rem circle at var(--mx, 50%) var(--my, 0%), rgba(107, 220, 236, .75), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.panel::before { inset: 0; z-index: -1; background: radial-gradient(20rem circle at var(--mx, 50%) var(--my, 0%), rgba(107, 220, 236, .6), transparent 68%); }
a.card:focus-visible::after { opacity: 1; }
@media (hover: hover) {
  .card:hover::before, .card:hover::after, .tile:hover::after, .stat:hover::after, .panel:hover::before { opacity: 1; }
  /* Icon micro-motion */
  :is(.card, .tile, .feature, .nav-menu-item):hover .icon-tile { border-color: rgba(107, 220, 236, .32); }
  :is(.card, .tile, .feature, .nav-menu-item):hover .icon-tile .ic { transform: translateY(-1px) scale(1.1); }
}
.card:has(.form)::before, .card:has(.form)::after { display: none; } /* not while someone is filling in a form */

/* 09b Marquee --------------------------------------------------------------
   A slow strip of tiles (home: integrations). The markup holds the list twice so it can loop; the copy
   is aria-hidden. Hover or focus pauses it. With reduced motion the copy is hidden and the list is the
   ordinary .tiles grid again. */
.marquee > * > [aria-hidden="true"] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .marquee { position: relative; overflow: hidden; border-radius: var(--r); --fade: var(--bg); }
  .section-alt .marquee { --fade: var(--bg-raised); }
  .marquee::before, .marquee::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; z-index: 1; width: clamp(2rem, 9vw, 7rem); pointer-events: none; background: linear-gradient(90deg, var(--fade), transparent); }
  .marquee::after { left: auto; right: 0; transform: scaleX(-1); }
  .marquee-track { display: flex; width: max-content; animation: marquee 60s linear infinite; }
  .marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
  .marquee .tiles, .marquee > * > [aria-hidden="true"] { display: flex; gap: .75rem; padding-right: .75rem; }
  .marquee .tile { flex: none; flex-direction: row; align-items: center; gap: .9rem; min-width: 13rem; padding: 1rem 1.1rem; }
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* 10 Feature panels ------------------------------------------------------- */
/* One bordered panel whose cells are separated by hairlines. */
.panel { position: relative; isolation: isolate; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.panel > * { background: var(--bg); padding: clamp(1.4rem, 2.6vw, 2rem); transition: background-color .3s var(--ease); }
.section-alt .panel > * { background: var(--bg-raised); }
.panel > *:hover { background: var(--surface); }
@media (min-width: 640px) { .panel.cols-2, .panel.cols-3, .panel.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) {
  .panel.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .panel.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.feature h3 { margin-top: 1.1rem; }
.feature p { margin-top: .5rem; color: var(--text-2); font-size: .9375rem; line-height: 1.6; }

/* 11 Process steps -------------------------------------------------------- */
.steps { list-style: none; display: grid; gap: 2rem; counter-reset: step; }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; } }
.step { position: relative; counter-increment: step; padding-top: 2.25rem; }
@media (min-width: 960px) { .step { padding-right: 2rem; } }
.step::before {
  content: counter(step, decimal-leading-zero); position: absolute; top: -.85rem; left: 0;
  display: grid; place-items: center; width: 2.6rem; height: 1.75rem; padding: 0 .5rem;
  border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--bg);
  font-family: var(--mono); font-size: .75rem; color: var(--teal); z-index: 1;
}
.section-alt .step::before { background: var(--bg-raised); }
.step::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, var(--line-3), var(--line)); }
.step h3 { font-size: 1.125rem; }
.step p { margin-top: .5rem; color: var(--text-2); font-size: .9375rem; }
/* As the steps arrive (see 19) the line draws from one number to the next and each number lights up in turn. */
@property --lit { syntax: "<number>"; inherits: false; initial-value: 0; }
.steps { --stagger: 170ms; }
.step::before { box-shadow: 0 0 0 calc(var(--lit) * 5px) rgba(42, 208, 196, calc(var(--lit) * .2)); }
.step::after { transform-origin: 0 50%; }
.steps > .in::after { animation: grow-x .9s var(--ease) calc(var(--i, 0) * var(--stagger)) backwards; }
.steps > .in::before { animation: step-lit 1.3s var(--ease) calc(var(--i, 0) * var(--stagger) + .3s) backwards; }
@keyframes step-lit { from { opacity: 0; transform: scale(.8); } 35% { opacity: 1; transform: none; --lit: 1; } to { --lit: 0; } }

/* 11b 3D course scene ------------------------------------------------------
   Home, "How a course comes together in LifterLMS" (partials/course_scene.php). A CSS 3D stack: one
   glass tray per step (.cs-layer, lifted along Z by --i × --cs-gap) inside an isometric .cs-stack. The
   card of the current step leaves its tray, rises to --cs-h and turns to face the viewer: its
   rotateZ / rotateX undo the stack's. Trays still to come are faint outlines. Everything in the scene
   is sized in em from .cs-tilt, which follows the scene's width, so it scales as one piece.
   site.js only switches classes (.cs-live, .is-built, .is-held, .is-active, .is-todo) and writes the
   pointer tilt (--tx / --ty). The clock for auto-advance is the animation of the current step's rail,
   so pausing (off screen, hover, .is-held) is plain CSS. What is outside the no-preference block is
   the whole picture without JavaScript or with reduced motion: the finished stack, static.
   No backdrop-filter in here: it is slow, and it flattens preserve-3d. */
@property --cs-p { syntax: "<integer>"; inherits: true; initial-value: 100; }
.course3d { overflow: hidden; overflow: clip; } /* clip: the scene can still be sticky */
.cs-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 960px) { .cs-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }

/* --cs-gap and --cs-h are plain numbers, in em of the stack: the distance between two trays and the
   height the current card rises to. Keep --cs-h at least 9.5 above the top tray (6 × --cs-gap): measured
   in Chrome, a card standing closer loses part of its glow, because its layer then crosses that tray's plane. */
.cs-scene { --cs-gap: 2.1; --cs-h: 22.5; --cs-max: 30rem; position: relative; width: 100%; max-width: clamp(17.5rem, calc((100vh - 7.5rem) / 1.35), var(--cs-max)); margin-inline: auto; aspect-ratio: 1 / 1.35; container-type: inline-size; perspective: 1500px; perspective-origin: 50% 40%; pointer-events: none; user-select: none; }
/* Beside the steps the scene stays in view while they scroll past; the max-width above keeps it no taller than the screen. */
@media (min-width: 960px) { .cs-scene { --cs-max: 38rem; position: sticky; top: calc(var(--header-h) + 1rem); align-self: start; } }
/* Flat light behind the 3D: a halo where the current card stands and a wider glow under the stack. */
.cs-scene::before { content: ""; position: absolute; inset: -6% -24%; background: radial-gradient(36% 24% at 50% 30%, rgba(60, 201, 234, .24), transparent), radial-gradient(50% 36% at 50% 70%, rgba(42, 125, 225, .2), transparent); transition: opacity 1.2s var(--ease) .8s; }
.cs-side { position: relative; } /* the steps paint above that light */
.cs-tilt, .cs-stack, .cs-layer { position: absolute; transform-style: preserve-3d; }
.cs-tilt { inset: 0; font-size: clamp(11px, 3.1vw, 16.5px); font-size: 3.5cqw; transform: rotateX(calc(var(--ty, 0) * -5deg)) rotateY(calc(var(--tx, 0) * 6deg)); transition: transform .7s var(--ease); }
.cs-stack { left: 50%; top: 75.8%; width: 18em; height: 13em; margin: -6.5em 0 0 -9em; transform: rotateX(58deg) rotateZ(-36deg); }
/* The floor: a patch of grid and a glow under the stack. */
.cs-stack::before {
  content: ""; position: absolute; inset: -6em -7em; transform: translateZ(-1.6em);
  background: radial-gradient(closest-side, rgba(60, 201, 234, .26), transparent 78%), linear-gradient(rgba(107, 220, 236, .2) 1px, transparent 1px) 0 0 / 2em 2em, linear-gradient(90deg, rgba(107, 220, 236, .2) 1px, transparent 1px) 0 0 / 2em 2em;
  -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent); mask-image: radial-gradient(closest-side, #000 35%, transparent);
}
.cs-layer { inset: 0; transform: translateZ(calc(var(--i) * var(--cs-gap) * 1em)); transition: transform 1.1s var(--ease) calc(var(--i) * 90ms); }
/* A tray is two planes, .45em apart, so it reads as a slab of glass; its label sits on the front edge. */
.cs-layer::before { content: ""; position: absolute; inset: 0; border: 1px solid rgba(140, 200, 255, .16); border-radius: 1.1em; background: rgba(8, 11, 16, .5); transform: translateZ(-.45em); transition: opacity .6s var(--ease); }
.cs-plate {
  position: absolute; inset: 0; display: flex; align-items: flex-end; gap: .9em; padding: 0 0 1em 1.9em;
  border: 1px solid rgba(150, 205, 255, .28); border-radius: 1.75em;
  background: linear-gradient(140deg, rgba(120, 180, 255, .16), rgba(13, 17, 23, .88) 36%, rgba(13, 17, 23, .9) 72%, rgba(51, 214, 200, .14));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset;
  color: var(--text-2); font-family: var(--mono); font-size: .62em; line-height: 1; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  transition: opacity .6s var(--ease);
}
.cs-plate b { color: var(--teal); font-weight: 500; }
.cs-plate::before { content: ""; position: absolute; inset: -1px; border: 1px solid rgba(107, 220, 236, .9); border-radius: inherit; background: radial-gradient(closest-side, rgba(60, 201, 234, .3), transparent); box-shadow: 0 0 2.6em rgba(60, 201, 234, .4), 0 0 2em rgba(60, 201, 234, .16) inset; opacity: 0; transition: opacity .6s var(--ease); }
.is-active > .cs-plate::before { opacity: 1; }

/* The card: flat in its tray, or (current step) lifted out and turned to the viewer. Both transforms
   list the same functions, so the browser interpolates each one. 1.4286em here is 1em of the stack. */
.cs-card {
  position: absolute; inset: .8em .8em 3em; display: grid; align-content: start; gap: .55em; padding: 1.05em 1.15em;
  border: 1px solid var(--line-2); border-radius: 1.1em; background: linear-gradient(165deg, #171d27, #0b0e13 72%);
  color: var(--text-2); font-size: .7em; line-height: 1.3; opacity: .7;
  transform: translate3d(0, 0, 1px) rotateZ(0deg) rotateX(0deg) rotateY(0deg) rotateX(0deg) scale(1);
  transition: transform 1s var(--ease), opacity .6s var(--ease);
}
/* The card's own glow is kept tight for the same reason (a wide shadow makes its layer larger); the
   wide halo is .cs-scene::before. */
.cs-card::after { content: ""; position: absolute; inset: -1px; border: 1px solid rgba(107, 220, 236, .7); border-radius: inherit; box-shadow: 0 0 1.8em -.2em rgba(60, 201, 234, .7); opacity: 0; transition: opacity .6s var(--ease); }
.is-active > .cs-card {
  opacity: 1;
  transform: translate3d(0, 0, calc((var(--cs-h) - var(--i) * var(--cs-gap)) * 1.4286em)) rotateZ(36deg) rotateX(-58deg) rotateY(-14deg) rotateX(5deg) scale(1.16);
}
.is-active > .cs-card::after { opacity: 1; }

/* What the cards are made of */
.cs-card strong { color: var(--text); font-size: 1.22em; font-weight: 600; line-height: 1.2; letter-spacing: -.015em; }
.cs-card .ic { width: 1em; height: 1em; }
.cs-head { display: flex; align-items: center; justify-content: space-between; gap: .8em; color: var(--text-2); font-family: var(--mono); font-size: .8em; letter-spacing: .08em; text-transform: uppercase; }
.cs-chip { display: inline-flex; align-items: center; gap: .35em; padding: .3em .75em; border: 1px solid rgba(107, 220, 236, .38); border-radius: 99px; background: rgba(42, 208, 196, .12); color: #9aece3; font-family: var(--font); font-size: .82em; font-weight: 500; line-height: 1.2; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.cs-chip.dim { border-color: var(--line-2); background: rgba(255, 255, 255, .04); color: var(--text-2); }
.cs-chip.ok { border-color: rgba(61, 220, 151, .45); background: rgba(61, 220, 151, .12); color: var(--ok); }
.cs-by, .cs-meta, .cs-row, .cs-opt { display: flex; align-items: center; gap: .6em; font-size: .92em; }
.cs-by i { width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--grad); }
.cs-btn { display: inline-flex; align-items: center; justify-content: center; justify-self: start; gap: .4em; padding: .5em 1.1em; border: 1px solid var(--line-2); border-radius: 99px; background: rgba(255, 255, 255, .06); color: var(--text); font-size: .92em; font-weight: 600; }
.cs-btn.primary { justify-self: stretch; border: 0; background: var(--grad); color: var(--on-accent); }
.cs-row, .cs-opt { padding: .42em .7em; border: 1px solid var(--line); border-radius: .55em; background: rgba(255, 255, 255, .04); }
.cs-line { height: .5em; border-radius: 1em; background: rgba(255, 255, 255, .15); }
.cs-line.short { width: 60%; }
/* 1 Course */
.cs-cover { position: relative; display: grid; place-items: center; height: 5.6em; border-radius: .7em; background: linear-gradient(120deg, rgba(90, 165, 255, .4), rgba(51, 214, 200, .24)), var(--surface-2); color: #d6ecff; }
.cs-cover .ic { width: 2.1em; height: 2.1em; }
.cs-cover .cs-chip { position: absolute; top: .6em; right: .6em; background: rgba(5, 6, 8, .7); }
/* 2 Sections and lessons */
.cs-c-builder { gap: .42em; }
.cs-sec { color: var(--text); font-size: .95em; font-weight: 600; }
.cs-row { margin-left: .9em; }
.cs-row i { width: .5em; height: .9em; background: radial-gradient(circle, var(--text-3) 36%, transparent 40%) 0 0 / .25em .3em; }
/* 3 Lesson content */
.cs-c-lesson { grid-template-columns: 1.45fr 1fr; column-gap: 1em; }
.cs-c-lesson > :is(.cs-head, .cs-btn) { grid-column: 1 / -1; }
.cs-video { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: .7em; background: linear-gradient(140deg, rgba(90, 165, 255, .34), rgba(51, 214, 200, .16)), #0a0d12; }
.cs-video::before { content: ""; width: 2.6em; height: 2.6em; border: 1px solid var(--line-3); border-radius: 50%; background: rgba(5, 6, 8, .7); }
.cs-video::after { content: ""; position: absolute; left: 50%; top: 50%; margin: -.55em 0 0 -.32em; border: solid transparent; border-width: .55em 0 .55em .9em; border-left-color: #fff; }
.cs-video i { position: absolute; left: .7em; right: .7em; bottom: .6em; height: .22em; border-radius: 1em; background: linear-gradient(90deg, var(--teal) 38%, rgba(255, 255, 255, .22) 0); }
.cs-text { display: grid; align-content: start; gap: .65em; padding-top: .35em; }
/* 4 Quiz */
.cs-opt { padding-block: .55em; }
.cs-opt i { display: grid; place-items: center; width: 1.25em; height: 1.25em; border: 1px solid var(--line-3); border-radius: 50%; }
.cs-opt .ic { width: .8em; height: .8em; stroke-width: 3; }
.cs-opt.is-right { border-color: rgba(61, 220, 151, .5); background: rgba(61, 220, 151, .1); color: var(--text); }
.cs-opt.is-right i { border: 0; background: var(--ok); color: var(--on-accent); }
/* 5 Access plan */
.cs-c-plan { gap: .45em; }
.cs-toggle { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: .22em; border: 1px solid var(--line-2); border-radius: 99px; background: rgba(255, 255, 255, .04); font-size: .92em; font-weight: 500; text-align: center; }
.cs-toggle::before { content: ""; position: absolute; inset: .22em 50% .22em .22em; border: 1px solid rgba(107, 220, 236, .5); border-radius: 99px; background: rgba(107, 220, 236, .2); }
.cs-toggle span { position: relative; padding: .3em 0; }
.cs-toggle span:first-child, .cs-kv b { color: var(--text); font-weight: 500; }
.cs-kv { display: flex; justify-content: space-between; font-size: .92em; }
/* 6 Certificate */
.cs-c-cert { align-content: stretch; padding: .7em; }
.cs-frame { position: relative; display: grid; align-content: center; justify-items: center; gap: .55em; border: 1px solid rgba(156, 201, 255, .4); border-radius: .6em; box-shadow: 0 0 0 .28em #10151d inset, 0 0 0 calc(.28em + 1px) rgba(156, 201, 255, .2) inset; }
.cs-sign { width: 38%; height: 1px; margin-top: .7em; background: var(--line-3); }
.cs-seal { position: absolute; right: 1.2em; bottom: 1.1em; display: grid; place-items: center; width: 3.3em; height: 3.3em; border-radius: 50%; background: var(--grad); color: var(--on-accent); box-shadow: 0 0 0 .28em rgba(60, 201, 234, .2); }
.cs-seal .ic { width: 1.8em; height: 1.8em; }
/* 7 Published: the ring and its number both read --cs-p (0 to 100) */
.cs-c-live { grid-template-columns: auto 1fr; column-gap: 1.1em; }
.cs-c-live > :is(.cs-head, .cs-meter, .cs-meta) { grid-column: 1 / -1; }
.cs-c-live strong { align-self: end; }
.cs-ring { grid-row: span 2; display: grid; place-items: center; width: 7em; height: 7em; border-radius: 50%; background: conic-gradient(#5aa5ff, #33d6c8 calc(var(--cs-p) * 1%), rgba(255, 255, 255, .12) 0); }
.cs-ring::after { counter-reset: p var(--cs-p); content: counter(p) "%"; display: grid; place-items: center; width: 76%; height: 76%; border-radius: 50%; background: #10141b; color: var(--text); font-size: 1.3em; font-weight: 600; font-variant-numeric: tabular-nums; }
.cs-meter { height: .45em; border-radius: 1em; background: rgba(255, 255, 255, .12); }
.cs-meter i { display: block; height: 100%; border-radius: inherit; background: var(--grad); transform-origin: 0 50%; }

/* The steps: real buttons in an ordered list. The rail on the left of the current one is the progress indicator. */
.cs-steps { display: grid; gap: .2rem; }
.cs-step { position: relative; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: .2rem .9rem; width: 100%; padding: .8rem 1rem .85rem 1.2rem; border: 0; border-radius: var(--r); background: none; color: var(--text-2); font: inherit; text-align: left; transition: background-color .3s var(--ease); }
.cs-live .cs-step { cursor: pointer; }
.cs-step::before, .cs-step::after { content: ""; position: absolute; left: 0; top: .55rem; bottom: .55rem; width: 2px; border-radius: 2px; background: var(--line-2); }
.cs-step::after { background: linear-gradient(180deg, #5aa5ff, #33d6c8); transform-origin: 50% 0; opacity: 0; }
.cs-step[aria-current] { background: rgba(60, 201, 234, .07); }
.cs-step[aria-current]::after { opacity: 1; }
.cs-step:focus-visible { outline-offset: 1px; border-radius: var(--r); }
.cs-step-num { grid-row: span 2; padding-top: .28rem; color: var(--text-3); font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; transition: color .3s var(--ease); }
.cs-step[aria-current] .cs-step-num { color: var(--teal); }
.cs-step-title { color: var(--text); font-size: 1.0625rem; font-weight: 600; line-height: 1.3; letter-spacing: -.015em; }
.cs-step-text { font-size: .9375rem; line-height: 1.5; }
.cs-actions { margin-top: 1.75rem; padding-left: 1.2rem; gap: .9rem 1.5rem; }
@media (hover: hover) { .cs-live .cs-step:not([aria-current]):hover { background: rgba(255, 255, 255, .04); } }

/* Phones: fewer layers and lighter glows (and site.js adds no pointer tilt on touch). */
@media (max-width: 640px) {
  .cs-layer::before { display: none; }
  .cs-plate::before { box-shadow: none; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Before the section is seen the trays lie on top of each other; .is-built lets them rise in turn. */
  .cs-live:not(.is-built) .cs-scene { --cs-gap: .3; }
  .cs-live:not(.is-built) .cs-scene::before { opacity: 0; }
  .is-todo > .cs-card { opacity: 0; }
  .is-todo > .cs-plate, .is-todo::before { opacity: .34; }
  /* Ambient float. It starts from the resting transform, so nothing jumps when it begins. */
  .is-built .cs-stack { animation: cs-float 8s ease-in-out infinite alternate; }
  .is-built:not(.is-away) .cs-stack { will-change: transform; }
  /* Details of the card that has just come forward (.is-built: only once site.js runs the scene) */
  .is-built .is-active .cs-in { animation: cs-in .6s var(--ease) calc(.55s + var(--n, 0) * 90ms) backwards; }
  .is-built .is-active :is(.cs-seal, .cs-opt.is-right i) { animation: cs-stamp .55s var(--ease) 1.15s backwards; }
  .is-built .is-active .cs-ring { animation: cs-ring 1.6s cubic-bezier(.3, .6, .2, 1) .7s backwards; }
  .is-built .is-active .cs-meter i { animation: grow-x 1.6s cubic-bezier(.3, .6, .2, 1) .7s backwards; }
  .is-built .is-active .cs-toggle::before { animation: cs-slide .5s var(--ease) 1.2s backwards; }
  /* The clock: when the rail of the current step is full, site.js moves on. */
  .is-built .cs-step[aria-current]::after { animation: cs-progress 4.8s linear backwards; }
  .is-held .cs-step[aria-current]::after { animation-play-state: paused; }
  @media (hover: hover) { .cs-steps:hover .cs-step[aria-current]::after { animation-play-state: paused; } }
}
@keyframes cs-float { from { transform: rotateX(58deg) rotateZ(-36deg) translateZ(0); } to { transform: rotateX(56.5deg) rotateZ(-32.5deg) translateZ(.6em); } }
@keyframes cs-in { from { opacity: 0; transform: translateX(-1em); } }
@keyframes cs-stamp { from { opacity: 0; transform: scale(1.9) rotate(-20deg); } }
@keyframes cs-ring { from { --cs-p: 0; } }
@keyframes cs-slide { from { transform: translateX(100%); } }
@keyframes cs-progress { from { transform: scaleY(0); } }

/* 12 Stats ---------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.stat { position: relative; padding: clamp(1.25rem, 2.6vw, 1.75rem); border: 1px solid var(--line); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--surface), var(--bg-raised)); }
.stat-num { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); font-weight: 600; line-height: 1; letter-spacing: -.045em; color: var(--text); font-variant-numeric: tabular-nums; }
.stat-num .unit { color: var(--teal); font-size: .6em; letter-spacing: -.02em; }
.stat-label { margin-top: .75rem; color: var(--text-2); font-size: .875rem; line-height: 1.4; }
.is-counting { display: inline-block; text-align: right; } /* site.js holds the final width while a number counts up */
.footnote { margin-top: 1rem; color: var(--text-3); font-size: .8125rem; line-height: 1.5; }

/* 13 FAQ ------------------------------------------------------------------ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.25rem 0; cursor: pointer; list-style: none;
  color: var(--text); font-size: 1.0625rem; font-weight: 500; line-height: 1.4; letter-spacing: -.01em;
  transition: color .2s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: #fff; }
.faq summary :is(h2, h3) { font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; }
.faq-icon { position: relative; flex: none; width: 28px; height: 28px; border: 1px solid var(--line-2); border-radius: 50%; transition: border-color .2s var(--ease), background-color .2s var(--ease); }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: var(--text-2); transform: translate(-50%, -50%); transition: transform .3s var(--ease), opacity .2s var(--ease); }
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details[open] .faq-icon { border-color: var(--teal); background: rgba(42, 208, 196, .1); }
.faq details[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }
/* site.js animates the answer's height; while one is closing its icon already shows the closed state. */
.faq details.is-closing .faq-icon { border-color: var(--line-2); background: none; }
.faq details.is-closing .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 1; }
.faq-answer { padding: 0 3.5rem 1.5rem 0; color: var(--text-2); max-width: 46rem; }
@media (max-width: 520px) { .faq-answer { padding-right: 0; } }

/* 14 CTA band ------------------------------------------------------------- */
.cta-band {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(2.25rem, 6vw, 4.5rem); border: 1px solid var(--line-2); border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(38rem 20rem at 100% 0%, rgba(42, 125, 225, .28), transparent 65%),
    radial-gradient(30rem 18rem at 0% 100%, rgba(42, 208, 196, .16), transparent 65%);
}
.cta-band::after { content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(107, 220, 236, .7), transparent); }
/* The top highlight travels slowly along the edge; the glows drift with the hero's (08b). */
@media (prefers-reduced-motion: no-preference) { .cta-band::after { animation: edge 24s ease-in-out infinite alternate; } }
@keyframes edge { from { transform: translateX(-34%); } to { transform: translateX(34%); } }
.cta-grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .cta-grid { grid-template-columns: minmax(0, 1.5fr) auto; gap: 3rem; } }
.cta-band h2 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); margin-top: .9rem; }
.cta-band .lead { margin-top: 1rem; max-width: 38rem; }
.cta-actions { display: flex; flex-direction: column; gap: .75rem; }
.cta-actions .btn { width: 100%; }
@media (min-width: 560px) and (max-width: 899px) { .cta-actions { flex-direction: row; } .cta-actions .btn { width: auto; } }
.cta-note { display: flex; align-items: center; gap: .5rem; margin-top: .25rem; color: var(--text-3); font-size: .8125rem; }
.cta-note .ic { color: var(--teal); width: 1rem; height: 1rem; }

/* 15 Page hero (inner pages) ---------------------------------------------- */
.page-hero { position: relative; margin-top: calc(var(--header-h) * -1); padding: calc(var(--header-h) + clamp(2.5rem, 6vw, 5rem)) 0 clamp(2.75rem, 6vw, 4.75rem); overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--line); }
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(48rem 26rem at 85% -10%, rgba(42, 125, 225, .2), transparent 62%),
    radial-gradient(36rem 20rem at 0% 0%, rgba(42, 208, 196, .08), transparent 60%);
}
.page-hero h1 { font-size: clamp(2.2rem, 1.5rem + 3.2vw, 3.75rem); max-width: 20ch; margin-top: 1rem; }
.page-hero .lead { margin-top: 1.25rem; max-width: 42rem; }
.page-hero .actions { margin-top: 2rem; }
.page-hero-grid { display: grid; gap: 2rem; align-items: end; }
@media (min-width: 900px) { .page-hero-grid { grid-template-columns: minmax(0, 1fr) auto; } }
.page-hero-icon { display: none; }
@media (min-width: 900px) {
  .page-hero-icon { display: grid; place-items: center; width: 132px; height: 132px; border-radius: 34px; border: 1px solid var(--line-2); background: linear-gradient(160deg, rgba(77, 155, 255, .16), rgba(42, 208, 196, .06)); color: var(--teal); box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 30px 60px -30px rgba(42, 125, 225, .6); }
  .page-hero-icon .ic { width: 56px; height: 56px; stroke-width: 1.25; }
}

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; list-style: none; margin-bottom: 1.75rem; font-size: .875rem; color: var(--text-3); }
.crumbs a { color: var(--text-3); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.crumbs li + li::before { content: "/"; margin-right: .5rem; color: var(--line-3); }
.crumbs [aria-current] { color: var(--text-2); }

/* 16 Forms ---------------------------------------------------------------- */
.form { display: grid; gap: 1.1rem; }
.form-row { display: grid; gap: 1.1rem; }
@media (min-width: 620px) { .form-row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: .45rem; min-width: 0; }
.field label { color: var(--text); font-size: .875rem; font-weight: 500; transition: color .25s var(--ease); }
.field:focus-within > label { color: #9fe8f6; }
.field label .opt { color: var(--text-3); font-weight: 400; }
.input, .select, .textarea {
  width: 100%; padding: .8rem .95rem; background: rgba(255, 255, 255, .035); border: 1px solid var(--line-2); border-radius: var(--r);
  color: var(--text); font: inherit; font-size: 1rem; line-height: 1.4;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
  -webkit-appearance: none; appearance: none;
}
.input::placeholder, .textarea::placeholder { color: var(--text-3); opacity: 1; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-3); }
.input:focus, .select:focus, .textarea:focus { outline: 0; border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(53, 200, 232, .16); background: rgba(255, 255, 255, .05); }
.textarea { min-height: 9rem; resize: vertical; }
.select {
  padding-right: 2.5rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aab3c0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .85rem center; background-size: 1.1rem;
}
.select option { background: var(--surface-2); color: var(--text); }
.field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: var(--danger); }
.field-error { color: var(--danger); font-size: .8125rem; line-height: 1.4; }
.field-error:empty { display: none; }
.field-error, .form-status { animation: fade .35s var(--ease); }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-note { color: var(--text-3); font-size: .8125rem; line-height: 1.5; }
.form-status { padding: .85rem 1rem; border: 1px solid var(--line-2); border-radius: var(--r); font-size: .9375rem; line-height: 1.5; }
.form-status:empty { display: none; }
.form-status.is-error { border-color: rgba(255, 122, 122, .45); background: rgba(255, 122, 122, .08); color: #ffc9c9; }
.form-success { text-align: center; padding: clamp(1.5rem, 5vw, 3rem) 1rem; }
.form-success .icon-tile { margin-inline: auto; color: var(--ok); }
.form-success h3 { margin-top: 1.25rem; font-size: 1.5rem; }
.form-success p { margin-top: .6rem; }
/* Success: the panel rises, the ring pops and the tick is drawn (site.js adds .success-mark with two stacked SVGs). */
.form-success { animation: rise .7s var(--ease) both; }
.success-mark .ic { grid-area: 1 / 1; animation: pop .6s var(--ease) .2s backwards; }
.success-mark .ic + .ic { animation: type .45s var(--ease) .65s backwards; }
.spinner { width: 1em; height: 1em; border: 2px solid rgba(3, 18, 28, .25); border-top-color: var(--on-accent); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.contact-list { list-style: none; display: grid; gap: 1.25rem; }
.contact-list li { display: grid; grid-template-columns: 44px 1fr; gap: 1rem; align-items: start; }
.contact-list strong { display: block; font-size: .9375rem; font-weight: 500; }
.contact-list a { color: var(--text-2); text-decoration: none; overflow-wrap: anywhere; }
.contact-list a:hover { color: #fff; }
.contact-list small { display: block; color: var(--text-3); font-size: .8125rem; margin-top: .1rem; }

/* 17 Blog + prose --------------------------------------------------------- */
.cat-nav { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin-bottom: clamp(2rem, 4vw, 3rem); }
.cat-pill { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem 1rem; border: 1px solid var(--line-2); border-radius: var(--r-pill); color: var(--text-2); font-size: .875rem; font-weight: 500; text-decoration: none; transition: all .2s var(--ease); }
.cat-pill:hover { color: #fff; border-color: var(--line-3); }
.cat-pill[aria-current="page"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.cat-pill span { opacity: .6; font-family: var(--mono); font-size: .75rem; }

.post-card { display: flex; flex-direction: column; height: 100%; padding: 0; }
.post-thumb { position: relative; aspect-ratio: 16 / 9; background: var(--surface-2); border-bottom: 1px solid var(--line); border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0; overflow: hidden; }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
a.card:hover .post-thumb img { transform: scale(1.03); }
.post-thumb-empty { display: grid; place-items: center; height: 100%; color: var(--line-3); background: radial-gradient(18rem 10rem at 80% 0%, rgba(42, 125, 225, .22), transparent 70%), radial-gradient(14rem 9rem at 0% 100%, rgba(42, 208, 196, .14), transparent 70%), var(--surface); }
.post-thumb-empty .ic { width: 40px; height: 40px; }
.post-body { display: flex; flex-direction: column; flex: 1; padding: 1.4rem 1.5rem 1.5rem; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; color: var(--text-3); font-size: .8125rem; }
.post-meta .cat { color: var(--teal); font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; }
.post-card :is(h2, h3) { margin-top: .75rem; font-size: 1.1875rem; line-height: 1.3; letter-spacing: -.015em; }
.post-card p { flex: 1; }

.empty-state { max-width: 40rem; margin-inline: auto; padding: clamp(2rem, 6vw, 4rem) clamp(1.5rem, 5vw, 3rem); text-align: center; border: 1px dashed var(--line-2); border-radius: var(--r-xl); }
.empty-state .icon-tile { margin-inline: auto; }
.empty-state h2 { margin-top: 1.5rem; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); }
.empty-state p { margin-top: .9rem; }
.empty-state .actions { justify-content: center; margin-top: 1.75rem; }

.pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem; list-style: none; margin-top: clamp(2.5rem, 5vw, 4rem); }
.pagination a, .pagination span { display: inline-grid; place-items: center; min-width: 2.6rem; height: 2.6rem; padding: 0 .8rem; border: 1px solid var(--line-2); border-radius: var(--r-pill); color: var(--text-2); font-size: .9375rem; text-decoration: none; }
.pagination a:hover { color: #fff; border-color: var(--line-3); }
.pagination [aria-current] { background: var(--text); border-color: var(--text); color: var(--bg); font-weight: 600; }

/* Reading progress on articles: site.js adds the bar and sets --p (0 to 1) from one throttled scroll listener. */
.read-progress { position: fixed; inset: 0 0 auto 0; z-index: 110; height: 2px; background: var(--grad); pointer-events: none; transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }

.article-head { max-width: 50rem; }
.article-head h1 { font-size: clamp(2.1rem, 1.5rem + 2.8vw, 3.4rem); max-width: none; }
.article-cover { margin: clamp(2rem, 5vw, 3.5rem) 0 0; border: 1px solid var(--line-2); border-radius: var(--r-xl); overflow: hidden; }
.article-cover img { width: 100%; }
.article-layout { display: grid; gap: 3rem; }
.article-layout > * { min-width: 0; } /* or one wide table or code block widens the whole page on a phone */
@media (min-width: 1024px) { .article-layout.has-toc { grid-template-columns: minmax(0, 1fr) 15rem; } }
.toc { display: none; }
@media (min-width: 1024px) {
  .toc { display: block; position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; order: 2; }
  .toc h2 { font-family: var(--mono); font-size: .75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
  .toc ol { list-style: none; margin-top: 1rem; border-left: 1px solid var(--line); }
  .toc a { display: block; padding: .35rem 0 .35rem 1rem; margin-left: -1px; border-left: 1px solid transparent; color: var(--text-3); font-size: .875rem; line-height: 1.4; text-decoration: none; }
  .toc a:hover { color: var(--text); border-left-color: var(--teal); }
  .toc .lvl-h3 a { padding-left: 1.75rem; }
}

.prose { max-width: 44rem; color: #c3cbd6; font-size: 1.0625rem; line-height: 1.75; overflow-wrap: break-word; }
.prose > * + * { margin-top: 1.35em; }
.prose h2 { margin-top: 2.2em; font-size: clamp(1.5rem, 1.25rem + 1vw, 1.9rem); }
.prose h3 { margin-top: 1.9em; font-size: 1.3125rem; }
.prose h4 { margin-top: 1.6em; font-size: 1.0625rem; }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: .8em; }
.prose a { color: #8fd9f0; text-decoration: underline; text-decoration-color: rgba(143, 217, 240, .4); }
.prose a:hover { color: #fff; text-decoration-color: var(--teal); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: .5em; }
.prose li::marker { color: var(--teal); }
.prose blockquote { margin-inline: 0; padding: .25rem 0 .25rem 1.4rem; border-left: 2px solid var(--teal); color: var(--text); font-size: 1.1875rem; line-height: 1.6; }
.prose img { border-radius: var(--r-lg); border: 1px solid var(--line-2); }
.prose figure { margin-inline: 0; }
.prose figcaption { margin-top: .6rem; color: var(--text-3); font-size: .875rem; text-align: center; }
.prose code { font-family: var(--mono); font-size: .875em; padding: .15em .4em; border-radius: 6px; background: rgba(255, 255, 255, .07); color: #d8f3ef; }
.prose pre { padding: 1.1rem 1.25rem; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); overflow-x: auto; font-size: .875rem; line-height: 1.7; }
.prose pre code { padding: 0; background: none; color: #c9d3e0; font-size: inherit; }
.prose table { width: 100%; border-collapse: collapse; font-size: .9375rem; display: block; overflow-x: auto; }
.prose th, .prose td { padding: .7rem .9rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th { color: var(--text); font-weight: 600; border-bottom-color: var(--line-2); }
/* Phones: let a table scroll sideways inside its own box rather than crush its columns to a word a line. */
@media (max-width: 640px) { .prose th, .prose td { min-width: 8.5rem; } }
.prose iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--r-lg); }
.prose hr { margin-block: 2.5em; }

/* "Add to preferred sources": Google badge + AI assistant buttons (partials/ai_sources.php) */
.ai-src-list { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.ai-src-list li { margin: 0; padding: 0; }
.ai-src-badge { display: block; border-radius: 10px; line-height: 0; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.ai-src-badge img { display: block; width: auto; height: 46px; border-radius: 10px; }
.ai-src-btn { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); color: var(--text); transition: transform .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease); }
.ai-src-btn .ic { width: 20px; height: 20px; }
.ai-src-badge:hover, .ai-src-btn:hover { transform: translateY(-2px); }
.ai-src-btn:hover { border-color: rgba(60, 201, 234, .55); background: rgba(60, 201, 234, .08); color: #fff; }
.ai-src-inline { margin-top: 1.5rem; }
.ai-src-card { max-width: 44rem; margin-top: 3rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--r-lg, 16px); background: var(--surface, rgba(255, 255, 255, .02)); }
.ai-src-title { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.ai-src-title .ic { width: 18px; height: 18px; color: var(--teal); }
.ai-src-text { margin: .4rem 0 1.1rem; color: var(--text-2); font-size: .9375rem; }
@media (max-width: 420px) { .ai-src-badge img, .ai-src-btn { height: 42px; } .ai-src-btn { width: 42px; } .ai-src-list { gap: .5rem; } }
.byline { display: flex; align-items: center; gap: .9rem; margin-top: 3rem; padding-top: 1.75rem; border-top: 1px solid var(--line); max-width: 44rem; }
.byline-avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--grad); color: var(--on-accent); font-weight: 600; flex: none; }
.byline strong { display: block; font-weight: 500; }
.byline small { color: var(--text-3); font-size: .875rem; }

/* Case studies */
.case { display: flex; flex-direction: column; height: 100%; }
.case-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.case-flag { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .65rem; border: 1px solid rgba(245, 184, 74, .35); border-radius: var(--r-pill); background: rgba(245, 184, 74, .08); color: #f7cf85; font-family: var(--mono); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.case .sector { margin-top: 1.5rem; color: var(--teal); font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; }
.case :is(h2, h3) { margin-top: .5rem; font-size: 1.375rem; line-height: 1.3; letter-spacing: -.015em; }
.case dl { margin: 1.25rem 0 0; display: grid; gap: 1rem; flex: 1; }
.case dt { color: var(--text-3); font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; }
.case dd { margin: .3rem 0 0; color: var(--text-2); font-size: .9375rem; line-height: 1.6; }
.case-metrics { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.case-metrics strong { display: block; font-size: clamp(1rem, .85rem + .8vw, 1.5rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; color: var(--text); }
.case-metrics span { display: block; margin-top: .3rem; color: var(--text-3); font-size: .8125rem; line-height: 1.35; }

.notice { display: grid; grid-template-columns: 1.25rem 1fr; gap: .9rem; padding: 1rem 1.25rem; border: 1px solid var(--line-2); border-radius: var(--r); background: rgba(255, 255, 255, .025); color: var(--text-2); font-size: .9375rem; line-height: 1.55; }
.notice .ic { color: var(--warn); margin-top: .15rem; }

/* Error page */
.error-page { min-height: 62vh; display: grid; place-items: center; text-align: center; padding-block: clamp(4rem, 10vw, 8rem); }
.error-code { font-family: var(--mono); font-size: clamp(4rem, 3rem + 8vw, 8rem); font-weight: 500; line-height: 1; letter-spacing: -.05em; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* 18 Footer --------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--line); background: var(--bg-raised); padding: clamp(3.5rem, 7vw, 5.5rem) 0 0; color: var(--text-2); font-size: .9375rem; }
.footer-grid { display: grid; gap: 2.5rem 2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer-brand { grid-column: 1 / -1; max-width: 26rem; }
.footer-brand p { margin-top: 1.1rem; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); } .footer-brand { grid-column: auto; } }
@media (max-width: 899px) { .footer-contact { grid-column: 1 / -1; } }
.footer-title { font-family: var(--mono); font-size: .75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 1.1rem; }
.footer-links { list-style: none; display: grid; gap: .65rem; }
.footer-links a { color: var(--text-2); text-decoration: none; }
.footer-links a:hover { color: #fff; }
.footer-links .ic { width: 1rem; height: 1rem; margin-top: .3em; color: var(--text-3); }
.footer-links .with-icon { display: flex; align-items: flex-start; gap: .55rem; overflow-wrap: anywhere; }
.social { list-style: none; display: flex; gap: .5rem; margin-top: 1.5rem; }
.social a { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line-2); border-radius: 50%; color: var(--text-2); transition: all .2s var(--ease); }
.social a:hover { color: #fff; border-color: var(--line-3); background: rgba(255, 255, 255, .05); }
.social .ic { width: 16px; height: 16px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 2rem; margin-top: clamp(3rem, 6vw, 4.5rem); padding: 1.5rem 0 2rem; border-top: 1px solid var(--line); color: var(--text-3); font-size: .8125rem; }
.footer-bottom a { color: var(--text-3); }
.footer-bottom a:hover { color: var(--text); }

/* 19 Motion --------------------------------------------------------------- */
/* Hero: pure CSS so the first paint never waits for JavaScript. */
.rise { animation: rise .8s var(--ease) both; }
.rise.d1 { animation-delay: .08s; } .rise.d2 { animation-delay: .16s; } .rise.d3 { animation-delay: .24s; } .rise.d4 { animation-delay: .32s; } .rise.d5 { animation-delay: .42s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Scroll reveal. Nothing is hidden by default: once the page is laid out, site.js marks what is below
   the screen .out (hidden) and swaps that for .in as it scrolls into view. What was on screen at load
   is never touched, and without JavaScript or with reduced motion nothing gets either class.
     .reveal    the element fades up.
     .stagger   each direct child fades up. Children that arrive together are spaced --stagger apart
                (site.js numbers them with --i); in a .panel the cells stay put and their contents move.
   Optional: style="--d:.2s" fixes a delay by hand. The keyframes only have a `from` and fill
   backwards, so a finished entrance leaves nothing behind and hover transforms keep working. */
.reveal.out, .stagger:not(.panel) > .out, .panel.stagger > .out > * { opacity: 0; }
.reveal.in, .stagger:not(.panel) > .in, .panel.stagger > .in > * { animation: reveal-in .7s var(--ease) var(--d, calc(var(--i, 0) * var(--stagger, 70ms))) backwards; }
@keyframes reveal-in { from { opacity: 0; transform: translateY(18px); } }
/* The eyebrow's rules grow out as it arrives. */
.eyebrow.in::before, .eyebrow.in::after { animation: grow-x .7s var(--ease) calc(var(--i, 0) * 70ms + .25s) backwards; }
.eyebrow.rise::before { animation: grow-x .7s var(--ease) .3s backwards; }

/* Ambient loops stop while their section is off screen or the tab is hidden (site.js toggles .is-away). */
.is-away, .is-away *, .is-away::before, .is-away::after, .is-away *::before, .is-away *::after { animation-play-state: paused !important; }

/* Page transitions (browsers with cross-document view transitions): a quick cross-fade of the whole
   page, during which the header is pixel-for-pixel the same and so appears to stay put, while <main>
   settles upwards. Nothing is given a view-transition-name on purpose: a named element becomes its own
   backdrop root, which switches off the blur behind the glass header and the dropdown. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }
  :root:active-view-transition main { animation: vt-in .42s var(--ease) backwards; }
  /* site.js sets .is-leaving just before the old page is captured: the condensed header is put back
     to its resting position, so it matches the header of the page that is arriving. */
  .is-leaving :is(.brand, .nav-toggle, .site-nav) { transform: none !important; transition: none !important; }
}
@keyframes vt-in { from { transform: translateY(10px); } }

/* The off switch. Looping, typing, marquee and page-transition rules above sit in no-preference queries
   and site.js arms nothing, so this only has to flatten what is left (hovers, .rise). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .out, .panel.stagger > .out > * { opacity: 1 !important; }
  .nav-list > .nav-ink, .read-progress { display: none; }
}

/* 20 Utilities ------------------------------------------------------------ */
.list-plain { list-style: none; }
.h3-lg { font-size: 1.375rem; }
.h3-xl { font-size: 1.5rem; line-height: 1.2; }
.h3-sub { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.15; letter-spacing: -.028em; }
.subsection { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
.section-head.tight { margin-bottom: 2rem; }
.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; }
.nowrap { white-space: nowrap; }
.maxw-prose { max-width: 40rem; }

@media print {
  .site-header, .site-footer, .cta-band, .nav-toggle, .hero-visual, .read-progress { display: none !important; }
  .out, .panel.stagger > .out > * { opacity: 1 !important; }
  body { background: #fff; color: #111; }
  h1, h2, h3, strong { color: #000; }
  a { color: #000; }
}