/* Self-hosted fonts (Google's own woff2 subsets, Sep 20 2026) — the latin files are
   preloaded from <head>, so the hero paints in Anton/Inter on the first frame instead
   of swapping in from Arial a beat later (that swap was the CTA-row layout shift
   Lighthouse flagged). Metric-matched fallbacks follow for anything that still
   paints before a font arrives. */
@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/anton-latin.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: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/anton-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: 'Inter'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('/fonts/inter-latin.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: 'Inter'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('/fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: 'Chakra Petch'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/chakra-petch-700-latin.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: 'Chakra Petch'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/chakra-petch-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: 'Anton Fallback'; src: local('Arial'); ascent-override: 129.70%; descent-override: 36.29%; line-gap-override: 0%; size-adjust: 90.69%; }
@font-face { font-family: 'Inter Fallback'; src: local('Arial'); ascent-override: 90.49%; descent-override: 22.56%; line-gap-override: 0%; size-adjust: 107.06%; }
/* AgentKinetics — Agentpreneurs.ai design system (Sep 18 2026)
   Source of truth: ~/agentpreneurs/app/globals.css + tailwind.config.js.
   Light neubrutalist: paper/band grounds, 2px ink outlines, hard offset
   shadows (ink) and sky shadows (#2099c5) on cards, flat orange #ef6f2e CTAs
   with BLACK uppercase type + arrow chip, Anton display / Inter body, deep-blue
   eyebrows. Dark = navy twin (paper #0d121b, outlines slate 107 125 148).
   Every class name from the Autoploy-era sheet is preserved so index.html,
   enterprise.html and everything gen-site.mjs writes keep working unchanged. */

/* ---- Theme tokens (space-separated RGB so alpha works) ---- */
:root {
  color-scheme: light;
  --ap-ink: 14 17 22;
  --ap-paper: 247 249 252;
  --ap-band: 233 240 248;
  --ap-surface: 255 255 255;
  --ap-sheet: 255 255 255;
  --ap-orange-deep: 184 68 20;
  --ap-border: 14 17 22;
  --ap-shadow: 14 17 22;
  --ap-body: 51 65 85;
  --ap-muted: 90 105 128;
  --ap-eyebrow: 6 106 153;
  --ap-dot: 196 216 234;
  --ap-line: 203 213 225;
  --ap-night: 6 9 14;
  --ap-stripe-bg: 226 232 240;
  --ap-stripe-fg: 148 163 184;
  --ap-band-hover: 233 240 248;
  --ap-glow-sky: rgb(32 153 197 / 0.15);
  --ap-glow-warm: rgb(239 111 46 / 0.11);
  --ap-glow-night: rgb(32 153 197 / 0.12);
  --ap-vignette: rgb(6 106 153 / 0.06);
  --ap-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  --ap-sheen: rgb(32 153 197 / 0.055);
  --ap-band-glow-a: rgb(32 153 197 / 0.12);
  --ap-band-glow-b: rgb(239 111 46 / 0.09);
  --ap-night-sheen: rgb(255 255 255 / 0.05);
  --ap-orange-lift: linear-gradient(180deg, rgb(255 255 255 / 0.17), rgb(0 0 0 / 0.09));
  --ap-moon-o: 1;
  --ap-moon-t: rotate(0) scale(1);
  --ap-sun-o: 0;
  --ap-sun-t: rotate(-90deg) scale(0.4);
  /* Arrow chip inside primary buttons: ink disc, paper arrow (flips with theme). */
  --chip-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7f9fc' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ap-ink: 232 238 245;
    --ap-paper: 13 18 27;
    --ap-band: 18 25 36;
    --ap-surface: 23 33 47;
    --ap-sheet: 13 18 27;
    --ap-orange-deep: 250 152 104;
    --ap-border: 107 125 148;
    --ap-shadow: 107 125 148;
    --ap-body: 183 197 211;
    --ap-muted: 139 155 173;
    --ap-eyebrow: 92 195 239;
    --ap-dot: 32 45 62;
    --ap-line: 40 53 70;
    --ap-night: 6 9 14;
    --ap-stripe-bg: 26 38 51;
    --ap-stripe-fg: 100 116 139;
    --ap-band-hover: 30 43 60;
    --ap-glow-sky: rgb(32 153 197 / 0.24);
    --ap-glow-warm: rgb(239 111 46 / 0.16);
    --ap-glow-night: rgb(32 153 197 / 0.2);
    --ap-vignette: rgb(2 6 12 / 0.38);
    --ap-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
    --ap-sheen: rgb(255 255 255 / 0.04);
    --ap-night-sheen: rgb(255 255 255 / 0.06);
    --ap-band-glow-a: transparent;
    --ap-band-glow-b: transparent;
    --ap-moon-o: 0;
    --ap-moon-t: rotate(90deg) scale(0.4);
    --ap-sun-o: 1;
    --ap-sun-t: rotate(0) scale(1);
    --chip-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d121b' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ap-ink: 232 238 245;
  --ap-paper: 13 18 27;
  --ap-band: 18 25 36;
  --ap-surface: 23 33 47;
  --ap-sheet: 13 18 27;
  --ap-orange-deep: 250 152 104;
  --ap-border: 107 125 148;
  --ap-shadow: 107 125 148;
  --ap-body: 183 197 211;
  --ap-muted: 139 155 173;
  --ap-eyebrow: 92 195 239;
  --ap-dot: 32 45 62;
  --ap-line: 40 53 70;
  --ap-night: 6 9 14;
  --ap-stripe-bg: 26 38 51;
  --ap-stripe-fg: 100 116 139;
  --ap-band-hover: 30 43 60;
  --ap-glow-sky: rgb(32 153 197 / 0.24);
  --ap-glow-warm: rgb(239 111 46 / 0.16);
  --ap-glow-night: rgb(32 153 197 / 0.2);
  --ap-vignette: rgb(2 6 12 / 0.38);
  --ap-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
  --ap-sheen: rgb(255 255 255 / 0.04);
  --ap-night-sheen: rgb(255 255 255 / 0.06);
  --ap-band-glow-a: transparent;
  --ap-band-glow-b: transparent;
  --ap-moon-o: 0;
  --ap-moon-t: rotate(90deg) scale(0.4);
  --ap-sun-o: 1;
  --ap-sun-t: rotate(0) scale(1);
  --chip-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d121b' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* ---- Legacy aliases: the old Autoploy-era names every inline style still
   uses, now pointing into the Agentpreneurs palette. ---- */
:root, :root[data-theme="dark"], :root:not([data-theme="light"]) {
  --orange: #ef6f2e;
  --sky: #2099c5;
  --snow: #f5fbff;
  --accent: #ef6f2e;
  --accent-hover: #d95f21;
  --accent-deep: rgb(var(--ap-orange-deep));
  --ink: rgb(var(--ap-ink));
  --heading: rgb(var(--ap-ink));
  --body: rgb(var(--ap-body));
  --muted: rgb(var(--ap-muted));
  --eyebrow: rgb(var(--ap-eyebrow));
  --outline: rgb(var(--ap-border));
  --border: rgb(var(--ap-line));
  --border-2: rgb(var(--ap-line));
  --band: rgb(var(--ap-band));
  --band-2: rgb(var(--ap-band));
  --cream: rgb(var(--ap-band));
  --cream-border: rgb(var(--ap-border));
  --card: rgb(var(--ap-surface));
  --bg: rgb(var(--ap-paper));
  --sheet: rgb(var(--ap-sheet));
  --night: rgb(var(--ap-night));
  --card-border: rgb(var(--ap-border));
  --card-text: rgb(var(--ap-body));
  --btn-bg: rgb(var(--ap-ink));
  --btn-text: rgb(var(--ap-paper));
  --shadow-hard-sm: 3px 3px 0 rgb(var(--ap-shadow));
  --shadow-hard: 5px 5px 0 rgb(var(--ap-shadow));
  --shadow-hard-lg: 8px 8px 0 rgb(var(--ap-shadow));
  --shadow-sky-sm: 4px 4px 0 #2099c5;
  --shadow-sky: 6px 6px 0 #2099c5;
  --shadow-sky-lg: 8px 8px 0 #2099c5;
  --font-display: 'Anton', 'Anton Fallback', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --font-sans: 'Inter', 'Inter Fallback', system-ui, sans-serif;
}

/* ---- Base ---- */
* { box-sizing: border-box; }
/* Keyboard users jump the nav: hidden until focused, then a hard-shadow orange pill top-left. */
.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 200;
  transform: translateY(-160%); opacity: 0;
  background: var(--orange); background-image: var(--ap-orange-lift); color: #0e1116; border: 2px solid var(--night); border-radius: 8px;
  padding: 10px 16px; font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; box-shadow: var(--shadow-hard-sm);
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.skip-link:focus-visible { transform: none; opacity: 1; outline-color: var(--night); }
#content { display: block; height: 0; outline: none; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; color: var(--heading); }
h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  line-height: 1.06;
}
h3 { font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }
p { text-wrap: pretty; }
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; }
::selection { background: var(--orange); color: #0e1116; }
:focus-visible { outline: 3px solid #38b0e0; outline-offset: 3px; border-radius: 2px; }
.btn:focus-visible, .chat-fab:focus-visible, .mm-cta:focus-visible { outline-color: var(--night); }
.accent { color: var(--orange); }

/* Orange marker sweep behind headline words (inline-block so the painted box
   follows its own line-height and never bleeds over the line above). */
.marker {
  display: inline-block; background: var(--orange); background-image: var(--ap-orange-lift);
  color: #0e1116; line-height: 1.14; padding: 0 0.14em; max-width: 100%;
}
.bg-night .marker, .close-section .marker { color: #0e1116; }

/* Display words drawn as outlines (watermarks, numerals) */
.text-stroke-ink { color: transparent; -webkit-text-stroke: 2px var(--outline); }
.text-stroke-white { color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, 0.55); }
.text-stroke-sky { color: transparent; -webkit-text-stroke: 1.5px var(--sky); }

/* Grounds */
.dot-grid {
  background-color: var(--bg);
  background-image:
    var(--ap-noise),
    radial-gradient(130% 110% at 50% 36%, transparent 50%, var(--ap-vignette)),
    radial-gradient(rgb(var(--ap-dot)) 1.5px, transparent 1.5px),
    radial-gradient(1100px 680px at 10% -10%, var(--ap-glow-sky), transparent 64%),
    radial-gradient(820px 500px at 96% 106%, var(--ap-glow-warm), transparent 66%);
  background-size: 160px 160px, 100% 100%, 22px 22px, 100% 100%, 100% 100%;
}
.bg-night {
  background-color: var(--night);
  background-image:
    var(--ap-noise),
    linear-gradient(180deg, var(--ap-night-sheen), transparent 46%),
    radial-gradient(1000px 560px at 50% 0%, var(--ap-glow-night), transparent 68%);
  background-size: 160px 160px, 100% 100%, 100% 100%;
}
.stripes {
  background-color: rgb(var(--ap-stripe-bg));
  background-image: repeating-linear-gradient(45deg, rgb(var(--ap-stripe-fg) / 0.25) 0 12px, transparent 12px 24px);
}

/* ---- Nav (sticky full-width bar, 2px ink rule) ---- */
.nav-outer {
  position: sticky; top: 0; z-index: 50; padding: 0;
  background: rgb(var(--ap-paper) / 0.95); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-bottom: 2px solid var(--outline);
}
.nav {
  display: flex; justify-content: flex-start; align-items: center; gap: 12px;
  max-width: 1240px; margin: 0 auto; padding: 14px 24px; min-height: 76px;
}
.brand {
  display: flex; align-items: center; gap: 10px; white-space: nowrap; margin-right: 12px; padding: 8px 0;
  font-family: var(--font-display); font-weight: 400; font-size: 24px; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--ink); line-height: 1;
}
.brand .akm { width: 30px; height: 30px; }
.brand .accent { color: var(--orange); }
.nav-links {
  display: flex; align-items: center; gap: 14px; margin-left: auto; flex-wrap: nowrap; white-space: nowrap;
  font-size: 12.5px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink);
}
.nav-links > a, .nav-dd > a { white-space: nowrap; transition: color 0.15s ease; }
.nav-links a:hover { color: var(--accent-deep); }
.nav-links a.active, .mobile-menu a.active { color: var(--accent-deep); }
@media (max-width: 1280px) { .nav-links { display: none; } }
.nav-enterprise {
  display: inline-flex; align-items: center;
  border: 2px solid var(--outline); background: var(--band); border-radius: 8px;
  padding: 6px 12px; box-shadow: 2px 2px 0 var(--outline);
}
.nav-enterprise:hover { background: rgb(var(--ap-band-hover)); color: var(--ink); }

/* Services dropdown */
.nav-dd { position: relative; }
.nav-dd > a { display: inline-flex; align-items: center; gap: 6px; }
.nav-dd-menu {
  position: absolute; top: calc(100% + 18px); left: -12px; min-width: 320px;
  background: var(--card); border: 2px solid var(--outline); border-radius: 10px;
  box-shadow: var(--shadow-hard);
  padding: 8px; display: none; flex-direction: column; gap: 2px;
  text-transform: none; letter-spacing: 0; font-weight: 600;
}
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu { display: flex; animation: ddIn 0.18s ease-out; }
.nav-dd-menu::before { content: ""; position: absolute; top: -18px; left: 0; right: 0; height: 18px; }
.nav-dd-menu a { display: block; padding: 9px 12px; border-radius: 6px; font-size: 14px; color: var(--ink); }
.nav-dd-menu a:hover { background: var(--band); color: var(--accent-deep); }
.nav-dd-menu .dd-label { padding: 8px 12px 4px 12px; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--eyebrow); }
.nav-dd-menu .dd-all { border-top: 2px solid var(--outline); margin-top: 6px; padding-top: 10px; font-weight: 900; text-transform: uppercase; font-size: 12px; letter-spacing: 0.05em; color: var(--ink); }
@keyframes ddIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* Theme toggle + burger: bordered squares with a small hard shadow */
.theme-toggle, .nav-burger {
  position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 44px; height: 44px; border-radius: 8px; border: 2px solid var(--outline);
  background: var(--card); color: var(--ink); cursor: pointer; padding: 0; margin: 0;
  box-shadow: var(--shadow-hard-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.theme-toggle:hover, .nav-burger:hover { background: var(--band); transform: translate(-1px, -1px); box-shadow: var(--shadow-hard); }
.theme-toggle svg { position: absolute; inset: 0; margin: auto; transition: opacity 0.22s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.theme-toggle .icon-moon { opacity: var(--ap-moon-o); transform: var(--ap-moon-t); display: block; }
.theme-toggle .icon-sun { opacity: var(--ap-sun-o); transform: var(--ap-sun-t); display: block; }
.nav-burger { display: none; margin-left: auto; }
.nav-burger .ic-close { display: none; }
.nav-burger[aria-expanded="true"] .ic-open { display: none; }
.nav-burger[aria-expanded="true"] .ic-close { display: block; }
@media (max-width: 1280px) { .nav-burger { display: flex; order: 10; margin-left: 0; } .theme-toggle { margin-left: auto; } }

/* Mobile menu: full-width panel under the bar */
.mobile-menu {
  position: fixed; top: 78px; left: 0; right: 0; z-index: 55;
  background: var(--bg); border-bottom: 2px solid var(--outline);
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.18);
  padding: 8px 24px 20px 24px; display: none; flex-direction: column; gap: 0;
  max-height: calc(100vh - 78px); overflow-y: auto;
}
.mobile-menu.open { display: flex; animation: ddIn 0.18s ease-out; }
.mobile-menu a {
  display: block; padding: 13px 0; border-bottom: 1px solid var(--border);
  font-size: 14px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink);
}
.mobile-menu a:hover { color: var(--accent-deep); }
.mobile-menu .mm-label { padding: 16px 0 6px 0; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--eyebrow); }
.mobile-menu .mm-cta {
  margin-top: 16px; border: 2px solid var(--night); border-radius: 8px; background: var(--orange); background-image: var(--ap-orange-lift);
  color: #0e1116; text-align: center; padding: 14px 18px; box-shadow: var(--shadow-hard-sm);
}
.mobile-menu .mm-cta:hover { color: #0e1116; transform: translateY(-2px); box-shadow: var(--shadow-hard); }

/* ---- Buttons (the neubrutalist HardButton) ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--orange); background-image: var(--ap-orange-lift); color: #0e1116;
  font-weight: 900; font-size: 15px; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.2;
  padding: 18px 34px; border-radius: 8px; border: 2px solid var(--night);
  box-shadow: var(--shadow-hard);
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.18s ease;
  cursor: pointer; text-align: center; position: relative; overflow: hidden; isolation: isolate;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-hard-lg); color: #0e1116; }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgb(var(--ap-shadow)); transition-duration: 0.06s; }
.btn svg [stroke] { stroke: currentColor; }
.btn svg [fill]:not([fill="none"]) { fill: currentColor; }
/* Arrow chip rides at the end of every primary button */
.btn::after {
  content: ""; flex: none; width: 26px; height: 26px; border-radius: 50%;
  background-color: var(--ink); background-image: var(--chip-arrow);
  background-size: 14px 14px; background-position: center; background-repeat: no-repeat;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn:hover::after { transform: translateX(4px); }
.btn.small { font-size: 13px; padding: 11px 18px; box-shadow: var(--shadow-hard-sm); white-space: nowrap; gap: 8px; }
.btn.small:hover { transform: translate(-1px, -1px); box-shadow: var(--shadow-hard); }
.btn.small::after { display: none; }
.btn.white, .btn.tint {
  background: var(--card); background-image: none; color: var(--ink); border-color: var(--outline);
  box-shadow: var(--shadow-hard);
}
.btn.white:hover, .btn.tint:hover { background: var(--band); color: var(--ink); box-shadow: var(--shadow-hard-lg); }
.btn.white::after, .btn.tint::after { display: none; }
.btn.orange { background: var(--orange); background-image: var(--ap-orange-lift); color: #0e1116; border-color: var(--night); }
.btn.sky { box-shadow: 5px 5px 0 var(--sky); }
.btn.sky:hover { box-shadow: 8px 8px 0 var(--sky); }
.cta-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px; margin-top: 34px; }
.cta-note { font-size: 13px; font-weight: 600; color: var(--muted); margin-top: 16px; }

/* ---- Hero (dot-grid, two columns: copy left, Step-1 video right) ---- */
.hero {
  position: relative; overflow: hidden; text-align: left; padding: 72px 24px 80px 24px;
  background-color: var(--bg);
  background-image:
    var(--ap-noise),
    radial-gradient(130% 110% at 50% 36%, transparent 50%, var(--ap-vignette)),
    radial-gradient(rgb(var(--ap-dot)) 1.5px, transparent 1.5px),
    radial-gradient(1100px 680px at 10% -10%, var(--ap-glow-sky), transparent 64%),
    radial-gradient(820px 500px at 96% 106%, var(--ap-glow-warm), transparent 66%);
  background-size: 160px 160px, 100% 100%, 22px 22px, 100% 100%, 100% 100%;
}
.hero-glow, .float-chip, .cursor { display: none; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; max-width: 1240px; margin: 0 auto; }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.eyebrow-pill {
  display: inline-flex; align-items: center; gap: 10px;
  border: 2px solid var(--outline); background: var(--card); border-radius: 999px;
  padding: 9px 18px; box-shadow: var(--shadow-hard-sm);
  font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
}
.eyebrow-pill::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--orange); border: 1px solid var(--night); animation: pulseDot 2s infinite; }
.hero h1 { font-size: clamp(42px, 5.4vw, 78px); margin: 0; max-width: 680px; text-wrap: balance; }
.hero h1 .accent { color: inherit; }
.hero .sub { font-size: 18px; font-weight: 600; line-height: 1.7; color: var(--body); max-width: 540px; margin: 0; }
.hero .cta-row { justify-content: flex-start; margin-top: 4px; }
.hero .cta-note { margin-top: -6px; }
.hero-side { display: flex; flex-direction: column; align-items: flex-start; }
.hero-media { position: relative; width: 100%; padding: 0 12px 26px 0; }
.hero-media::before {
  content: ""; position: absolute; left: 16px; top: 16px; right: -4px; bottom: 10px; z-index: 0;
  border-radius: 12px; border: 2px solid var(--outline); background: var(--sky); transform: rotate(1deg);
}
/* Step 1 / Step 2 — the step line IS the headline (the reference program's pattern), set in
   the Agentpreneurs eyebrow voice (deep-blue Inter 900, wide tracking, pulsing
   orange dot) but at headline size. The dot is sized in em so it scales with the
   text and pins to the first line when the label wraps. */
.step-label {
  position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 0.5em;
  font-family: var(--font-sans); font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.2;
  font-size: clamp(22px, 2.2vw, 28px); color: var(--eyebrow);
  margin: 0 0 18px 0;
}
.step-label::before {
  content: ""; flex-shrink: 0; width: 0.5em; height: 0.5em; margin-top: 0.35em; border-radius: 50%;
  background: var(--orange); border: 1px solid var(--night); animation: pulseDot 2s infinite;
}
.step-label b { font-weight: 900; color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .step-label::before { animation: none; } }
.video-frame {
  position: relative; z-index: 1; width: 100%; aspect-ratio: 16 / 9; margin: 0;
  background: var(--night); border: 2px solid var(--outline); border-radius: 12px; overflow: hidden;
  background-image: var(--ap-noise), linear-gradient(180deg, var(--ap-night-sheen), transparent 46%), radial-gradient(700px 400px at 50% 0%, var(--ap-glow-night), transparent 68%);
  background-size: 160px 160px, 100% 100%, 100% 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
}
.video-frame .play {
  display: flex; align-items: center; justify-content: center;
  width: 84px; height: 84px; border-radius: 50%; background: var(--orange); background-image: var(--ap-orange-lift);
  border: 2px solid #0e1116; box-shadow: 4px 4px 0 #0e1116;
}
.video-frame .play svg path { fill: #0e1116; }
.video-frame .note { text-align: center; padding: 0 20px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #cbd5e1; }
.cred { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.cred .sep { color: var(--border); }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); animation: pulseDot 2s infinite; }
@keyframes pulseDot {
  0% { box-shadow: 0 0 0 0 rgb(239 111 46 / 0.45); }
  70% { box-shadow: 0 0 0 8px rgb(239 111 46 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(239 111 46 / 0); }
}
.rise { animation: riseIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
.rise.d1 { animation-delay: 0.02s; } .rise.d2 { animation-delay: 0.1s; }
.rise.d3 { animation-delay: 0.22s; } .rise.d4 { animation-delay: 0.34s; }
@keyframes riseIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
.settle { animation: settleIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes settleIn { from { transform: translateY(2rem) rotate(2deg); } to { transform: translateY(0) rotate(0); } }
@media (prefers-reduced-motion: reduce) { .rise, .settle, .pulse, .eyebrow-pill::before { animation: none; } }

/* Scroll-reveal (same easing as the Agentpreneurs [data-reveal] system) */
.sr { opacity: 0; transform: translateY(26px); transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1); }
.sr.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .sr { opacity: 1; transform: none; transition: none; } }

/* ---- Sections ---- */
section { padding: 96px 0; }
.label {
  font-family: var(--font-sans); font-size: 13px; font-weight: 800; letter-spacing: 0.08em; line-height: 1.5; text-transform: uppercase; color: var(--eyebrow);
}
.label.orange { color: var(--eyebrow); }
.section-head { text-align: center; }
.section-head h2 { font-size: clamp(34px, 4.2vw, 58px); margin-top: 14px; }
.section-head .sub { font-size: 18px; font-weight: 600; line-height: 1.7; color: var(--body); max-width: 680px; margin: 18px auto 0 auto; }
.band {
  background-color: var(--band);
  background-image:
    radial-gradient(900px 420px at 12% 0%, var(--ap-band-glow-a), transparent 62%),
    radial-gradient(760px 420px at 92% 100%, var(--ap-band-glow-b), transparent 64%);
  border-top: 2px solid var(--outline); border-bottom: 2px solid var(--outline);
}
.band-cream { background: var(--sheet); border-top: 2px solid var(--outline); border-bottom: 2px solid var(--outline); }
.band + .band, .band-cream + .band, .band + .band-cream, .band-cream + .band-cream { border-top: 0; }
.bg-surface { background: var(--card); background-image: linear-gradient(180deg, var(--ap-sheen), transparent 42%); }

/* Step 2 / booking — the Calendly widget stays a fixed white card in both themes */
.book { text-align: center; }
.book .step-label { font-size: clamp(26px, 2.9vw, 38px); display: block; text-align: center; margin: 0 auto; }
.book .step-label::before { display: inline-block; vertical-align: middle; margin: -0.1em 0.5em 0 0; }
.section-head .step-label + .sub { margin-top: 20px; }
.calendly-inline-widget {
  margin-top: 34px; border-radius: 12px; overflow: hidden; background: #fff;
  border: 2px solid var(--outline); box-shadow: var(--shadow-sky-lg);
}
.price-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 20px; margin-top: 30px; font-size: 14px; font-weight: 600; color: var(--muted); }
.price-row b { color: var(--heading); }
.cal-fallback { font-size: 13.5px; font-weight: 600; color: var(--muted); margin-top: 14px; }
.cal-fallback a { color: var(--accent-deep); font-weight: 800; }

/* ---- Cards ---- */
.grid { display: grid; gap: 28px; margin-top: 52px; }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  background: var(--card); background-image: linear-gradient(180deg, var(--ap-sheen), transparent 42%);
  border: 2px solid var(--outline); border-radius: 12px; padding: 30px;
  box-shadow: var(--shadow-sky);
  transition: box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1), transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
a.card:hover, .card.lift:hover { transform: translate(-4px, -4px); box-shadow: 10px 10px 0 var(--sky); }
a.card:active { transform: translate(1px, 1px); box-shadow: 3px 3px 0 var(--sky); transition-duration: 0.06s; }
.card h3, .card h2 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.015em; line-height: 1.05; font-size: 25px; }
.card p { font-size: 15.5px; line-height: 1.65; font-weight: 600; color: var(--body); margin: 0; }
.card .label { font-family: var(--font-sans); font-size: 13px; font-weight: 800; letter-spacing: 0.08em; line-height: 1.5; color: var(--eyebrow); }
.card .more { font-size: 12.5px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-deep); margin-top: auto; padding-top: 4px; }
.card.hard { box-shadow: var(--shadow-hard); }
.icon-chip {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 10px; color: var(--ink);
  background: var(--band); border: 2px solid var(--outline); box-shadow: 3px 3px 0 var(--sky);
}
.icon-chip svg { width: 22px; height: 22px; }
.icon-chip svg [stroke] { stroke: currentColor; }
.icon-chip svg [fill]:not([fill="none"]) { fill: currentColor; }
.new-tag {
  position: absolute; top: 18px; right: 18px;
  font-size: 11px; font-weight: 900; letter-spacing: 0.08em; color: #0e1116;
  background: var(--orange); background-image: var(--ap-orange-lift); border: 2px solid var(--night); border-radius: 6px; padding: 3px 9px;
  box-shadow: 2px 2px 0 var(--night);
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink); }
.chip { border: 2px solid var(--outline); border-radius: 6px; padding: 4px 10px; background: var(--card); box-shadow: 2px 2px 0 var(--outline); }

/* Banner (enterprise strip) */
.banner {
  display: flex; justify-content: space-between; align-items: center; gap: 32px;
  background: var(--band); border: 2px solid var(--outline); border-radius: 12px;
  padding: 34px 36px; margin-top: 28px; box-shadow: var(--shadow-hard);
}
.banner h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.015em; line-height: 1.05; font-size: 30px; }
.banner p { font-size: 15.5px; font-weight: 600; line-height: 1.65; color: var(--body); margin: 0; max-width: 640px; }
.banner .col { display: flex; flex-direction: column; gap: 12px; }

/* Statement */
.statement { text-align: center; }
.statement h2 { font-size: clamp(36px, 5vw, 64px); max-width: 900px; margin: 16px auto 0 auto; text-wrap: balance; }
.statement h2 .accent { color: var(--orange); }
.statement .sub { font-size: 18px; font-weight: 600; line-height: 1.7; color: var(--body); max-width: 660px; margin: 22px auto 0 auto; }

/* How it works */
.step-num { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--eyebrow); }
.step-num.first { color: var(--eyebrow); }
.mini { background: var(--band); border: 2px solid var(--outline); border-radius: 10px; padding: 16px; margin-top: 6px; }
.mini-label { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 8px; }
.mini-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; font-weight: 600; color: var(--body); padding: 3px 0; }
.mini-row b { color: var(--heading); }
.mini-row.total { border-top: 2px solid var(--outline); margin-top: 6px; padding-top: 9px; }
.mini-row.total span, .mini-row.total b { color: var(--accent-deep); font-weight: 900; }
.flow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 9px; padding: 20px 12px; }
.flow .chip { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; }
.flow .chip.live { background: var(--orange); background-image: var(--ap-orange-lift); border-color: var(--night); color: #0e1116; box-shadow: 2px 2px 0 var(--night); }
.flow .arrow { color: var(--muted); font-weight: 800; }
.stat-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
.stat-tiles.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-tile {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--card); border: 2px solid var(--outline); border-radius: 10px; padding: 14px 6px;
  box-shadow: var(--shadow-hard-sm);
}
.stat-tile b { font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1; text-transform: uppercase; letter-spacing: 0.015em; color: var(--heading); }
.stat-tile span { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); text-align: center; }

/* Work */
.feature-card {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--card); border: 2px solid var(--outline); border-radius: 12px; box-shadow: var(--shadow-sky);
  padding: 32px; margin-top: 52px;
}
.feature-card h3, .feature-card h2 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.015em; line-height: 1.05; font-size: 32px; }
.feature-card p { font-size: 16px; font-weight: 600; line-height: 1.65; color: var(--body); margin: 0; max-width: 760px; }
.tag {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink);
  background: var(--band); border: 2px solid var(--outline); border-radius: 6px; padding: 3px 9px;
}
.tags { display: flex; flex-wrap: wrap; gap: 7px; }
.read-more { font-size: 12.5px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-deep); margin-top: auto; padding-top: 12px; }
.work-card { justify-content: flex-start; }
.card-shot {
  margin: 14px -30px -30px -30px; border-radius: 0 0 10px 10px; overflow: hidden; border-top: 2px solid var(--outline);
  background: var(--night); padding: 18px 22px; display: flex; flex-direction: column; gap: 8px;
}
.feature-card .card-shot { margin: 14px -32px -32px -32px; }
.card-shot .line { display: flex; align-items: center; gap: 8px; font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: #9aa0ab; white-space: nowrap; }
.card-shot .line b { color: #e5e7eb; font-weight: 600; }
.card-shot .ok { color: #34d399; }
.card-shot .bar { height: 6px; border-radius: 3px; background: #1c2027; overflow: hidden; }
.card-shot .bar i { display: block; height: 100%; width: 72%; background: var(--orange); border-radius: 3px; }

/* Founder (about) */
.founder { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 52px; align-items: center; }
.monogram {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  aspect-ratio: 5 / 6; max-height: 420px; width: 100%;
  background: var(--band); border: 2px solid var(--outline); border-radius: 12px; box-shadow: var(--shadow-sky-lg);
}
.monogram b { font-family: var(--font-display); font-weight: 400; font-size: 88px; color: var(--orange); letter-spacing: 0.02em; line-height: 1; }
.monogram span { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; }
.founder-copy { display: flex; flex-direction: column; gap: 16px; }
.founder-copy h2 { font-size: clamp(32px, 4vw, 48px); }
.founder-copy p { font-size: 17px; font-weight: 600; line-height: 1.7; color: var(--body); margin: 0; }

/* Team cards (about) */
.team-card {
  display: flex; align-items: center; gap: 22px; background: var(--card); border: 2px solid var(--outline);
  border-radius: 12px; padding: 28px; box-shadow: var(--shadow-sky);
}
.team-card .avatar {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 84px; height: 84px; border-radius: 12px;
  background: var(--band); border: 2px solid var(--outline); box-shadow: 3px 3px 0 var(--sky);
  font-family: var(--font-display); font-size: 30px; color: var(--accent-deep); letter-spacing: 0.02em;
}
.team-card h3, .team-card h2 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.015em; line-height: 1.05; font-size: 24px; }
.team-card .role { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--eyebrow); margin-top: 4px; }
.team-card p { font-size: 15px; font-weight: 600; line-height: 1.6; color: var(--body); margin: 8px 0 0 0; }

/* FAQ */
.faq-list { margin-top: 40px; }
.faq-item { padding: 22px 0; border-top: 2px solid var(--outline); }
.faq-item:last-child { border-bottom: 2px solid var(--outline); }
.faq-item h3 { font-size: 18px; font-weight: 800; margin: 0 0 8px 0; color: var(--heading); }
.faq-item p { font-size: 15.5px; font-weight: 600; line-height: 1.65; color: var(--body); margin: 0; max-width: 780px; }
.faq-item.acc h3 { display: flex; justify-content: space-between; align-items: center; gap: 16px; cursor: pointer; margin: 0; }
.faq-q { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; background: none; border: 0; padding: 8px 0; margin: -8px 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.faq-item.acc h3 svg { flex-shrink: 0; transition: transform 0.2s ease; color: var(--ink); }
.faq-item.acc.open h3 svg { transform: rotate(180deg); }
.faq-item.acc .faq-a { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.25s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease, margin-top 0.25s ease; margin-top: 0; }
.faq-item.acc.open .faq-a { grid-template-rows: 1fr; opacity: 1; margin-top: 10px; }
.faq-item.acc .faq-a > div { overflow: hidden; }

/* Service / subpage hero */
.svc-hero {
  position: relative; text-align: center; padding: 80px 24px 64px 24px;
  background-color: var(--bg);
  background-image:
    var(--ap-noise),
    radial-gradient(130% 110% at 50% 36%, transparent 50%, var(--ap-vignette)),
    radial-gradient(rgb(var(--ap-dot)) 1.5px, transparent 1.5px),
    radial-gradient(1100px 680px at 10% -10%, var(--ap-glow-sky), transparent 64%),
    radial-gradient(820px 500px at 96% 106%, var(--ap-glow-warm), transparent 66%);
  background-size: 160px 160px, 100% 100%, 22px 22px, 100% 100%, 100% 100%;
}
.svc-hero { border-bottom: 2px solid var(--outline); }
.svc-hero + .band, .svc-hero + .band-cream { border-top: 0; }
.svc-hero .eyebrow-pill { margin: 0 auto; }
.svc-hero h1 { font-size: clamp(38px, 5.2vw, 72px); max-width: 940px; margin: 26px auto 0 auto; text-wrap: balance; }
.svc-hero h1 span[style*="--accent"] { color: var(--orange) !important; }
.svc-hero .sub { font-size: 18px; font-weight: 600; line-height: 1.7; color: var(--body); max-width: 660px; margin: 22px auto 0 auto; }
.svc-hero .tags { justify-content: center; }
.check-row { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; font-weight: 600; color: var(--body); }
.check-dot {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 5px; background: var(--orange); border: 2px solid var(--night); color: #0e1116;
  margin-top: 2px;
}
.check-dot svg [stroke] { stroke: #0e1116; }
.steps-compact { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 44px; }
.step-compact {
  display: flex; flex-direction: column; gap: 8px; background: var(--card); border: 2px solid var(--outline); border-radius: 12px;
  padding: 24px; box-shadow: var(--shadow-hard-sm);
}
.step-compact.first { box-shadow: var(--shadow-sky); }
.step-compact h3, .step-compact h2 { font-family: var(--font-sans); font-size: 16px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.2; }
.step-compact p { font-size: 14px; font-weight: 600; line-height: 1.6; color: var(--body); margin: 0; }
.stats-band { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 48px; }
.stats-band .stat-tile { min-width: 160px; padding: 18px 22px; }

/* Pricing */
.price-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 52px; }
@media (max-width: 1100px) { .price-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.price-card {
  display: flex; flex-direction: column; gap: 14px; background: var(--card); border: 2px solid var(--outline); border-radius: 12px; padding: 34px;
  box-shadow: var(--shadow-hard);
}
.price-card.featured { box-shadow: var(--shadow-sky-lg); }
.price-card .tier { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--eyebrow); }
.price-card h3, .price-card h2 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.015em; line-height: 1.05; font-size: 30px; }
.price-card .desc { font-size: 15px; font-weight: 600; line-height: 1.6; color: var(--body); margin: 0; }
.price-big { display: flex; align-items: baseline; gap: 8px; margin: 6px 0; }
.price-big b { font-family: var(--font-display); font-weight: 400; font-size: 56px; line-height: 1; color: var(--heading); letter-spacing: 0.015em; text-transform: uppercase; }
.price-big span { font-size: 13px; font-weight: 700; color: var(--muted); }
.price-big.text { flex-direction: column; align-items: flex-start; gap: 6px; }
.price-big.text b { font-size: 44px; white-space: nowrap; }
.price-list { display: flex; flex-direction: column; gap: 9px; margin: 4px 0 8px 0; padding: 0; list-style: none; }
.price-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; font-weight: 600; color: var(--body); }
.price-list li svg { color: var(--accent-deep); }
.price-list li svg [stroke] { stroke: currentColor; }
.free-block {
  display: flex; justify-content: space-between; align-items: center; gap: 28px;
  background: var(--band); border: 2px solid var(--outline); border-radius: 12px; box-shadow: var(--shadow-sky);
  padding: 30px 34px; margin-top: 28px;
}

/* Review wall (badges + marquee) */
.badge-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; }
.badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--card); border: 2px solid var(--outline); border-radius: 8px;
  padding: 9px 16px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink);
  box-shadow: var(--shadow-hard-sm);
}
.badge .score { font-weight: 900; color: var(--heading); }
.badge .tp-star { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; background: #00b67a; }
.marquee { overflow: hidden; position: relative; width: 100%; margin-top: 36px; padding: 6px 0 12px 0; }
.marquee::before, .marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none; }
.marquee::before { left: 0; background: linear-gradient(to right, var(--marquee-bg, var(--card)), transparent); }
.marquee::after { right: 0; background: linear-gradient(to left, var(--marquee-bg, var(--card)), transparent); }
.marquee-track { display: flex; gap: 20px; width: max-content; animation: marquee 32s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }
.review-card {
  width: 320px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px;
  background: var(--card); border: 2px solid var(--outline); border-radius: 10px; padding: 22px;
  box-shadow: var(--shadow-hard-sm);
}
.review-card .who { display: flex; align-items: center; gap: 10px; }
.review-card .who .avatar {
  display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 8px;
  background: var(--band) !important; border: 2px solid var(--outline) !important; font-size: 13px; font-weight: 900; color: var(--ink);
}
.review-card .who .avatar svg [stroke] { stroke: currentColor; }
.review-card .who b { font-size: 13.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--heading); }
.review-card .who span { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.review-card .stars { display: flex; gap: 3px; }
.review-card p { font-size: 14px; font-weight: 600; line-height: 1.6; color: var(--body); margin: 0; }

/* Close CTA (night band, marker headline, watermark word) */
.close-section {
  position: relative; overflow: hidden; text-align: center;
  background-color: var(--night);
  background-image:
    var(--ap-noise),
    linear-gradient(180deg, var(--ap-night-sheen), transparent 46%),
    radial-gradient(1000px 560px at 50% 0%, var(--ap-glow-night), transparent 68%);
  background-size: 160px 160px, 100% 100%, 100% 100%;
  border-top: 2px solid var(--outline); border-bottom: 0; padding: 112px 0 128px 0;
}
.close-section .wrap { position: relative; z-index: 1; }
.close-section .label { color: #94a3b8; }
.close-section h2 { font-size: clamp(38px, 5.4vw, 80px); line-height: 1.08; max-width: 980px; margin: 16px auto 0 auto; color: #fff; text-wrap: balance; }
.close-section .sub { font-size: 18px; font-weight: 600; line-height: 1.7; color: #cbd5e1; max-width: 640px; margin: 22px auto 0 auto; }
.close-section .btn { box-shadow: 5px 5px 0 var(--sky); }
.close-section .btn:hover { box-shadow: 8px 8px 0 var(--sky); }
.close-section .btn.white, .close-section .btn.tint { background: #fff; color: #0e1116; border-color: #0e1116; box-shadow: 5px 5px 0 var(--sky); }
.close-section .btn.white:hover, .close-section .btn.tint:hover { background: #f5fbff; box-shadow: 8px 8px 0 var(--sky); }
.close-section .cta-note { color: #94a3b8; }
.watermark {
  position: absolute; bottom: -34px; left: 50%; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  font-family: var(--font-display); font-size: clamp(120px, 18vw, 260px); text-transform: uppercase; line-height: 1; letter-spacing: 0.02em;
  color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, 0.55); opacity: 0.25; z-index: 0;
}
@media (min-width: 820px) { .watermark { bottom: -62px; } }

/* Orange ticker strip (sits on top of the close band) */
.ticker { overflow: hidden; background: var(--orange); background-image: var(--ap-orange-lift); border-bottom: 2px solid #0e1116; padding: 10px 0; }
.ticker-track { display: flex; width: max-content; align-items: center; animation: marquee 26s linear infinite; }
.ticker-track span { display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; white-space: nowrap; font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; color: #0e1116; }
.ticker-track span::after { content: "↗"; font-weight: 900; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* ---- Footer ---- */
.footer-big { background: var(--bg); border-top: 2px solid var(--outline); padding: 64px 24px 32px 24px; }
.footer-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; max-width: 1240px; margin: 0 auto; }
.footer-cols h4, .footer-cols .f-head { font-family: var(--font-sans); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; line-height: 1.4; text-transform: uppercase; color: var(--eyebrow); margin: 0 0 14px 0; }
.footer-cols a { display: block; font-size: 14.5px; font-weight: 600; color: var(--body); padding: 4px 0; }
.footer-cols a:hover { color: var(--orange); }
.footer-brand p { font-size: 15px; font-weight: 600; line-height: 1.65; color: var(--body); max-width: 340px; margin: 16px 0 18px 0; }
.footer-brand .brand { margin: 0; font-size: 22px; }
.footer-social { display: flex; flex-wrap: wrap; gap: 10px; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px !important;
  border: 2px solid var(--outline); border-radius: 8px; background: var(--card); color: var(--ink) !important;
  font-size: 11.5px !important; font-weight: 900 !important; text-transform: uppercase; letter-spacing: 0.05em;
  box-shadow: 2px 2px 0 var(--outline);
}
.footer-social a:hover { background: var(--band); }
.f-item { display: flex; align-items: flex-start; gap: 12px; padding: 7px 0; font-size: 14.5px; font-weight: 600; color: var(--body); }
.f-item a { display: inline-block; padding: 5px 0; margin: -5px 0; }
.f-item a:hover { color: var(--orange); }
.f-item b { color: var(--ink); }
.f-ic {
  display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; color: var(--ink);
  background: var(--card); border: 2px solid var(--outline); box-shadow: 2px 2px 0 var(--outline); flex-shrink: 0;
}
.f-ic svg [stroke] { stroke: currentColor; }
.f-ic svg [fill]:not([fill="none"]) { fill: currentColor; }
.f-sub { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  max-width: 1240px; margin: 44px auto 0 auto; padding-top: 22px; border-top: 1px solid var(--border);
  font-size: 12.5px; font-weight: 600; color: var(--muted);
}
.footer-bottom .legal { display: flex; gap: 22px; }
.footer-bottom .legal a { display: inline-block; padding: 6px 0; margin: -6px 0; }
.footer-bottom .legal a:hover { color: var(--orange); }

/* ---- AGK animated mark (identity stays; only the orange updated) ---- */
.akm .ant { animation: akm-pulse 5.2s ease-in-out infinite; }
.akm .eye { transform-origin: center; transform-box: fill-box; animation: akm-blink 5.2s infinite; }
.akm .e2 { animation-delay: .07s; }
.akm .glint { animation: akm-glint 6s ease-in-out infinite; }
@keyframes akm-blink { 0%,91%,100% { transform: scaleY(1) } 94% { transform: scaleY(.12) } 97% { transform: scaleY(1) } }
@keyframes akm-pulse { 0%,100% { opacity: .55 } 50% { opacity: 1 } }
@keyframes akm-glint { 0%,72% { transform: skewX(-18deg) translateX(0) } 88%,100% { transform: skewX(-18deg) translateX(58px) } }
@media (prefers-reduced-motion: reduce) { .akm * { animation: none !important } }

/* ---- Chat concierge ---- */
.chat-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 12px; color: #0e1116;
  background: var(--orange); background-image: var(--ap-orange-lift); border: 2px solid #0e1116; box-shadow: 4px 4px 0 #0e1116;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.chat-fab:hover { transform: translate(-2px, -2px) rotate(-6deg); box-shadow: 6px 6px 0 #0e1116; }
.chat-fab svg [stroke] { stroke: #0e1116; }
.chat-fab svg [fill]:not([fill="none"]) { fill: #0e1116; }
.cf-badge { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; background: #ef4444; color: #fff; font-size: 11px; font-weight: 900; display: flex; align-items: center; justify-content: center; border: 2px solid #0e1116; }
.cf-badge::after { content: attr(data-n); }
.chat-bubbles { position: fixed; right: 22px; bottom: 92px; z-index: 59; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.chat-greet {
  display: flex; align-items: center; gap: 10px; background: var(--card); border: 2px solid var(--outline); border-radius: 8px; padding: 10px 14px;
  font-size: 13.5px; font-weight: 700; color: var(--ink); box-shadow: var(--shadow-hard-sm); opacity: 0; animation: bubbleIn 0.4s ease-out 1.2s forwards;
}
.chat-greet button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: -8px -10px -8px -2px; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; font-size: 12px; padding: 0; }
.chat-greet button:hover { background: var(--band); color: var(--ink); }
.chat-q {
  background: var(--card); border: 2px solid var(--outline); color: var(--ink); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
  border-radius: 8px; padding: 8px 12px; box-shadow: 2px 2px 0 var(--outline); opacity: 0; animation: bubbleIn 0.4s ease-out forwards;
}
.chat-q:hover { background: var(--band); }
.chat-q.q1 { animation-delay: 1.5s; } .chat-q.q2 { animation-delay: 1.7s; } .chat-q.q3 { animation-delay: 1.9s; } .chat-q.q4 { animation-delay: 2.1s; }
@keyframes bubbleIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 820px) { .chat-bubbles { display: none; } }
@media (prefers-reduced-motion: reduce) { .chat-greet, .chat-q { animation: none; opacity: 1; } }
.chat-panel {
  position: fixed; right: 22px; bottom: 92px; z-index: 70;
  width: min(370px, calc(100vw - 32px)); height: min(520px, calc(100vh - 130px));
  background: var(--card); border: 2px solid var(--outline); border-radius: 12px;
  box-shadow: var(--shadow-hard-lg);
  display: none; flex-direction: column; overflow: hidden;
}
.chat-panel.open { display: flex; animation: ddIn 0.18s ease-out; }
.cp-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background: var(--night); color: #fff; border-bottom: 2px solid var(--outline); }
.cp-id { display: flex; align-items: center; gap: 11px; }
.cp-id b { display: block; font-size: 14px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; }
.cp-id span:last-child { display: block; font-size: 12px; color: #cbd5e1; font-weight: 600; }
.cp-avatar { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 8px; background: var(--orange); border: 2px solid #0e1116; color: #0e1116; }
.cp-avatar svg [stroke] { stroke: #0e1116; }
.cp-close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: -6px -8px -6px 0; border: 0; background: none; color: #fff; font-size: 15px; cursor: pointer; padding: 0; border-radius: 6px; }
.cp-close:hover { background: rgba(255, 255, 255, 0.15); }
.cp-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--band); }
.cp-msg { max-width: 85%; padding: 10px 14px; border-radius: 10px; font-size: 13.5px; font-weight: 600; line-height: 1.55; }
.cp-msg.bot { background: var(--card); border: 2px solid var(--outline); color: var(--ink); align-self: flex-start; box-shadow: 2px 2px 0 var(--outline); }
.cp-msg.user { background: var(--orange); background-image: var(--ap-orange-lift); border: 2px solid #0e1116; color: #0e1116; align-self: flex-end; box-shadow: 2px 2px 0 #0e1116; }
.cp-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.cp-chip { border: 2px solid var(--outline); background: var(--card); color: var(--ink); font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; border-radius: 6px; padding: 8px 11px; min-height: 32px; cursor: pointer; box-shadow: 2px 2px 0 var(--outline); font-family: inherit; }
.cp-chip:hover { background: var(--band); }
.cp-links { display: flex; flex-wrap: wrap; gap: 7px; align-self: flex-start; }
.cp-link { background: var(--orange); background-image: var(--ap-orange-lift); border: 2px solid #0e1116; color: #0e1116; font-size: 11.5px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; border-radius: 6px; padding: 8px 12px; box-shadow: 2px 2px 0 #0e1116; }
.cp-link:hover { transform: translateY(-1px); }
.cp-typing { display: flex; gap: 4px; align-items: center; padding: 14px; }
.cp-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: typingDot 1s infinite; }
.cp-typing span:nth-child(2) { animation-delay: 0.15s; }
.cp-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typingDot { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .cp-typing span { animation: none; } }
.cp-input { display: flex; gap: 8px; padding: 12px; border-top: 2px solid var(--outline); background: var(--card); }
.cp-input input { flex: 1; border: 2px solid var(--outline); background: var(--bg); color: var(--ink); border-radius: 8px; padding: 10px 14px; font-size: 13.5px; font-weight: 600; font-family: inherit; outline: none; }
.cp-input input:focus { border-color: var(--sky); }
.cp-input button { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 2px solid #0e1116; border-radius: 8px; background: var(--orange); background-image: var(--ap-orange-lift); color: #0e1116; cursor: pointer; box-shadow: 2px 2px 0 #0e1116; }
.cp-input button svg [stroke] { stroke: #0e1116; }
.cp-input button svg [fill]:not([fill="none"]) { fill: #0e1116; }
.cp-note { text-align: center; font-size: 11.5px; font-weight: 600; color: var(--muted); padding: 7px 12px 9px 12px; background: var(--card); border-top: 1px solid var(--border); }
.cp-note a { color: var(--accent-deep); font-weight: 800; }
@media (max-width: 640px) { .chat-panel { right: 16px; bottom: 84px; } .chat-fab { right: 16px; bottom: 16px; width: 52px; height: 52px; } .calendly-inline-widget { height: 980px !important; } }

/* Chrome autofill stays on-theme */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--card) inset; -webkit-text-fill-color: var(--ink); caret-color: var(--ink); transition: background-color 9999s ease-out;
}

/* Theme switch cross-fade (theme.js adds .theme-switching for 400ms) */
.theme-switching *, .theme-switching *::before, .theme-switching *::after {
  transition-property: background-color, border-color, color, fill, stroke, box-shadow; transition-duration: 0.3s; transition-timing-function: ease;
}
@media (prefers-reduced-motion: reduce) { .theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: none; } }

/* ---- Responsive ---- */
@media (max-width: 1080px) {
  .grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero h1 { max-width: 100%; }
  .hero-media { padding-right: 8px; }
}
@media (max-width: 820px) {
  section { padding: 64px 0; }
  .hero { padding: 48px 20px 60px 20px; }
  .hero h1 { font-size: clamp(40px, 11vw, 60px); }
  .step-label { font-size: clamp(19px, 5.4vw, 24px); }
  .book .step-label { font-size: clamp(22px, 6.4vw, 28px); }
  .grid { gap: 22px; margin-top: 40px; }
  .grid.cols-3, .grid.cols-2, .grid.cols-4 { grid-template-columns: 1fr; }
  .card { padding: 24px; }
  .card-shot { margin: 12px -24px -24px -24px; }
  .feature-card { padding: 24px; }
  .feature-card h3, .feature-card h2 { font-size: 26px; }
  .feature-card .card-shot { margin: 12px -24px -24px -24px; }
  .banner { flex-direction: column; align-items: flex-start; padding: 26px; }
  .founder { grid-template-columns: 1fr; gap: 30px; }
  .monogram { max-height: 300px; aspect-ratio: 4 / 3; }
  .steps-compact { grid-template-columns: 1fr; }
  .price-cards { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr; gap: 32px; }
  .free-block { flex-direction: column; align-items: flex-start; }
  .stat-tiles.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cred .sep { display: none; }
  .close-section { padding: 80px 0 96px 0; }
  .btn { width: 100%; max-width: 420px; padding: 16px 22px; font-size: 14px; }
  .cta-row { flex-direction: column; align-items: stretch; }
  .hero .cta-row { align-items: flex-start; }
  .nav { padding: 12px 16px; min-height: 72px; }
  .mobile-menu { top: 74px; max-height: calc(100vh - 74px); }
}
@media (max-width: 640px) {
  .nav .btn.small { display: none; }
  .brand { font-size: 20px; margin-right: 4px; }
  .brand .akm { width: 26px; height: 26px; }
  .card-shot .line { white-space: normal; flex-wrap: wrap; }
  .review-card { width: 280px; }
}

/* =====================================================================
   Sep 18 2026 polish pass — "more epic": light-mode depth, tactile hovers
   everywhere, marker sweep-in, scroll feedback, giant step numerals.
   Everything here is additive; class names unchanged.
   ===================================================================== */

/* ---- Marker sweep-in: the orange highlighter paints itself across the
   words. Hero h1 fires on load; scroll-revealed headlines fire on .sr.in.
   Text starts in the heading colour and settles to ink as the fill lands
   (matters in dark mode, where ink-on-navy would vanish). ---- */
@keyframes markerSweep { to { background-size: 100% 100%, 100% 100%; color: #0e1116; } }
.hero h1 .marker, .sr .marker {
  background-color: transparent;
  background-image: var(--ap-orange-lift), linear-gradient(var(--orange), var(--orange));
  background-size: 0% 100%, 0% 100%; background-repeat: no-repeat; background-position: 0 0;
  color: var(--heading);
}
.hero h1 .marker { animation: markerSweep 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.55s forwards; }
.sr.in .marker { animation: markerSweep 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards; }
.close-section .sr .marker { color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .hero h1 .marker, .sr .marker { background-color: var(--orange); background-image: var(--ap-orange-lift); background-size: auto; color: #0e1116; animation: none; }
}

/* ---- Buttons: glossy sweep between the fill and the label ---- */
.btn:not(.white):not(.tint)::before {
  content: ""; position: absolute; inset: -2px; z-index: -1; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgb(255 255 255 / 0.38) 50%, transparent 68%);
  transform: translateX(-130%); transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn:not(.white):not(.tint):hover::before { transform: translateX(130%); }

/* ---- Nav: orange underline sweeps in under links ---- */
.nav-links > a:not(.nav-enterprise), .nav-dd > a { position: relative; padding: 10px 0; }
.nav-links > a:not(.nav-enterprise)::after, .nav-dd > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: var(--orange);
  transform: scaleX(0); transform-origin: left; transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-links > a:not(.nav-enterprise):hover::after, .nav-dd:hover > a::after, .nav-links > a.active::after { transform: scaleX(1); }
.nav-dd-menu a { transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease; }
.nav-dd-menu a:hover { transform: translateX(3px); }

/* ---- Scroll feedback (CSS scroll-driven; older browsers simply skip it):
   orange progress bar along the top, hard shadow under the nav once scrolled ---- */
@supports (animation-timeline: scroll()) {
  body::before {
    content: ""; position: fixed; top: 0; left: 0; z-index: 100; width: 100%; height: 4px; pointer-events: none;
    background: var(--orange); transform: scaleX(0); transform-origin: 0 50%;
    animation: scrollProgress linear both; animation-timeline: scroll(root);
  }
  @keyframes scrollProgress { to { transform: scaleX(1); } }
  .nav-outer { animation: navSettle linear both; animation-timeline: scroll(root); animation-range: 0 140px; }
  @keyframes navSettle { to { box-shadow: 0 6px 0 rgb(var(--ap-shadow) / 0.22); } }
  @media (prefers-reduced-motion: reduce) { body::before { animation: none; transform: none; opacity: 0; } }
}

/* ---- Cards & tiles: everything with a hard shadow lifts up-left ---- */
.icon-chip { transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
a.card:hover .icon-chip, .card.lift:hover .icon-chip {
  background: var(--orange); background-image: var(--ap-orange-lift); color: #0e1116;
  border-color: var(--night); box-shadow: 3px 3px 0 var(--night); transform: rotate(-5deg) scale(1.08);
}
a.card h3, a.card h2, .card .more, .read-more { transition: color 0.18s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), letter-spacing 0.18s ease; }
a.card:hover h3, a.card:hover h2 { color: var(--accent-deep); }
a.card:hover .more, a.card:hover .read-more { color: var(--orange); transform: translateX(5px); letter-spacing: 0.08em; }
.card:not(a):not(.lift) { transition: box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1), transform 0.2s cubic-bezier(0.22, 1, 0.36, 1); }
.card:not(a):not(.lift):hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--sky); }
.card.hard:hover { box-shadow: 8px 8px 0 rgb(var(--ap-shadow)); }
.price-card, .team-card, .step-compact, .banner, .free-block, .review-card, .stat-tile, .monogram {
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.price-card:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 rgb(var(--ap-shadow)); }
.price-card.featured:hover { box-shadow: 10px 10px 0 var(--sky); }
.team-card:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--sky); }
.step-compact:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-hard); }
.step-compact.first:hover { box-shadow: 8px 8px 0 var(--sky); }
.banner:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 rgb(var(--ap-shadow)); }
.free-block:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--sky); }
.review-card:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-hard); }
.stat-tile:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-hard); }
.stat-tile b { transition: color 0.18s ease; }
.stat-tile:hover b { color: var(--orange); }

/* Small bordered bits: chips, tags, badges, social pills, contact icons */
.chip, .tag, .badge, .footer-social a, .f-ic, .nav-enterprise, .chat-q, .cp-chip, .cp-link, .theme-toggle, .nav-burger {
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.chip:not(.live):hover, .footer-social a:hover, .chat-q:hover, .cp-chip:hover, .nav-enterprise:hover {
  transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--outline); background: rgb(239 111 46 / 0.16); color: var(--ink);
}
.tag:hover { transform: translate(-1px, -1px); box-shadow: 2px 2px 0 var(--outline); background: rgb(239 111 46 / 0.16); }
.badge:hover { transform: translate(-1px, -1px); box-shadow: var(--shadow-hard); }
.cp-link:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 #0e1116; }
.f-item:hover .f-ic { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--outline); background: rgb(239 111 46 / 0.16); }
.footer-cols a, .footer-bottom .legal a { transition: color 0.15s ease, transform 0.15s cubic-bezier(0.22, 1, 0.36, 1); }
.footer-cols .f-item a:hover, .footer-cols > div > a:hover, .footer-bottom .legal a:hover { transform: translateX(3px); }

/* ---- Hero video: plate drifts, play button pulses, frame lifts on hover ---- */
@keyframes plateDrift { 0%, 100% { transform: rotate(1deg); } 50% { transform: rotate(1.9deg) translate(3px, 4px); } }
@keyframes playPulse {
  0% { box-shadow: 4px 4px 0 #0e1116, 0 0 0 0 rgb(239 111 46 / 0.55); }
  100% { box-shadow: 4px 4px 0 #0e1116, 0 0 0 28px rgb(239 111 46 / 0); }
}
.hero-media::before { animation: plateDrift 7s ease-in-out infinite; }
.video-frame { transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
.hero-media:hover .video-frame { transform: translate(-3px, -3px); }
.video-frame .play { animation: playPulse 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite; transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1); }
.hero-media:hover .play { transform: scale(1.1); }
@media (prefers-reduced-motion: reduce) { .hero-media::before, .video-frame .play { animation: none; } }

/* ---- Section eyebrows get orange flanks; headlines balance their lines ---- */
.section-head > .label, .statement .wrap > .label, .close-section .wrap > .label { display: inline-flex; align-items: center; gap: 12px; }
.section-head > .label::before, .section-head > .label::after,
.statement .wrap > .label::before, .statement .wrap > .label::after,
.close-section .wrap > .label::before, .close-section .wrap > .label::after { content: ""; width: 26px; height: 3px; background: var(--orange); border-radius: 2px; }
.section-head h2 { text-wrap: balance; }

/* ---- How it works: giant outlined numeral behind each step card ---- */
.grid.cols-2 { counter-reset: hiw; }
.grid.cols-2 > .card:has(> .step-num) { counter-increment: hiw; isolation: isolate; }
.grid.cols-2 > .card:has(> .step-num)::before {
  content: "0" counter(hiw); position: absolute; top: 8px; right: 22px; z-index: -1; pointer-events: none;
  font-family: var(--font-display); font-size: 112px; line-height: 1; letter-spacing: 0.02em;
  color: transparent; -webkit-text-stroke: 2px rgb(var(--ap-border) / 0.16);
  transition: -webkit-text-stroke-color 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.grid.cols-2 > .card:has(> .step-num):hover::before { -webkit-text-stroke-color: rgb(239 111 46 / 0.6); transform: translateY(-4px); }

/* ---- Services grid: the trailing "Not sure which one?" card was an orphan
   at one-third width; it now spans the row as a horizontal call-out ---- */
.grid.cols-3 > a.card + div.card:last-child {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; row-gap: 8px;
  align-items: center; align-content: center; padding: 34px 40px;
}
/* Fill whatever is left of the last row: alone on the row → full width;
   after one card → the remaining two columns; after two → a normal card. */
.grid.cols-3 > a.card + div.card:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
.grid.cols-3 > a.card + div.card:last-child:nth-child(3n+2) { grid-column: 2 / -1; }
.grid.cols-3 > a.card + div.card:last-child:nth-child(3n) { display: flex; padding: 30px; }
@media (max-width: 1080px) {
  .grid.cols-3 > a.card + div.card:last-child:nth-child(n) { grid-column: 1 / -1; display: grid; padding: 34px 40px; }
}
.grid.cols-3 > a.card + div.card:last-child > .label,
.grid.cols-3 > a.card + div.card:last-child > h3,
.grid.cols-3 > a.card + div.card:last-child > p { grid-column: 1; }
.grid.cols-3 > a.card + div.card:last-child > h3 { font-size: 32px; }
.grid.cols-3 > a.card + div.card:last-child > p { max-width: 720px; }
.grid.cols-3 > a.card + div.card:last-child > .btn { grid-column: 2; grid-row: 1 / 4; align-self: center; margin-top: 0 !important; font-size: 15px; padding: 18px 30px; box-shadow: var(--shadow-hard); }
.grid.cols-3 > a.card + div.card:last-child > .btn.small::after { display: block; }
@media (max-width: 820px) {
  .grid.cols-3 > a.card + div.card:last-child { grid-template-columns: 1fr; padding: 26px; }
  .grid.cols-3 > a.card + div.card:last-child > .btn { grid-column: 1; grid-row: auto; justify-self: stretch; margin-top: 8px !important; padding: 16px 22px; font-size: 14px; white-space: normal; }
}

/* ---- Services strip (replaced the placeholder review wall, Sep 18 2026).
   Compact pills generated from SERVICES by gen-site.mjs: dot · name · arrow.
   Kept deliberately thin — no header, no descriptions. ---- */
.live-strip {
  background: var(--card); background-image: linear-gradient(180deg, var(--ap-sheen), transparent 60%);
  border-top: 2px solid var(--outline); border-bottom: 2px solid var(--outline); padding: 22px 0;
}
.live-strip .marquee { margin-top: 0; padding: 4px 0 8px 0; }
.live-strip .marquee-track { gap: 14px; animation-duration: 44s; }
.sys-card {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 12px;
  background: var(--card); border: 2px solid var(--outline); border-radius: 10px; padding: 11px 16px 11px 14px;
  box-shadow: var(--shadow-hard-sm); color: inherit; white-space: nowrap;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.2s ease;
}
.sys-card:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--sky); background: rgb(239 111 46 / 0.08); }
.sys-live { width: 9px; height: 9px; border-radius: 50%; background: var(--orange); border: 1px solid var(--night); flex-shrink: 0; }
.sys-name { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; font-size: 18px; line-height: 1; color: var(--heading); transition: color 0.18s ease; }
.sys-card:hover .sys-name { color: var(--accent-deep); }
.sys-arrow { font-weight: 900; font-size: 15px; line-height: 1; color: var(--accent-deep); transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), color 0.18s ease; }
.sys-card:hover .sys-arrow { transform: translateX(4px); color: var(--orange); }
@media (max-width: 640px) { .sys-name { font-size: 16px; } .sys-card { padding: 10px 14px 10px 12px; } }


/* =====================================================================
   Sep 18 2026 — homepage sections brought over from the slyte.app audit,
   rebuilt in the Agentpreneurs language: KPI count-up band, how-it-works
   timeline + wow moment, "what every build includes" bento, savings
   calculator, us-vs-typical comparison, homepage FAQ.
   ===================================================================== */

/* ---- How it works: zig-zag timeline with a spine that fills as you scroll ---- */
.timeline { position: relative; column-gap: 80px; padding-bottom: 72px; align-items: start; }
.timeline::before, .timeline::after { content: ""; position: absolute; top: 24px; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px; border-radius: 2px; }
.timeline::before { background: var(--outline); opacity: 0.35; }
.timeline::after { background: var(--orange); transform-origin: top; transform: scaleY(0); }
@supports (animation-timeline: scroll()) {
  .timeline::after { animation: spineFill linear both; animation-timeline: view(); animation-range: entry 25% exit 70%; }
  @keyframes spineFill { to { transform: scaleY(1); } }
}
@supports not (animation-timeline: scroll()) { .timeline::after { transform: scaleY(1); opacity: 0.6; } }
.timeline > .card { position: relative; }
.timeline > .card:nth-child(even) { top: 72px; }
.timeline > .card::after {
  content: ""; position: absolute; top: 30px; width: 18px; height: 18px; border-radius: 50%; z-index: 2;
  background: var(--orange); background-image: var(--ap-orange-lift); border: 2px solid var(--outline); box-shadow: 0 0 0 5px var(--band);
}
.timeline > .card:nth-child(odd)::after { right: -51px; }   /* -(gap/2) - dot/2 - 2px border */
.timeline > .card:nth-child(even)::after { left: -51px; }
.wow {
  position: relative; margin: 24px auto 0 auto; max-width: 820px; text-align: center;
  background: var(--night); color: #fff; border: 2px solid var(--outline); border-radius: 12px; padding: 28px 34px 30px 34px;
  box-shadow: 6px 6px 0 var(--sky);
  background-image: linear-gradient(180deg, var(--ap-night-sheen), transparent 50%), radial-gradient(700px 300px at 50% 0%, var(--ap-glow-night), transparent 70%);
}
.wow-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: #0e1116; background: var(--orange); background-image: var(--ap-orange-lift); border: 2px solid #0e1116; border-radius: 6px; padding: 4px 10px; box-shadow: 2px 2px 0 #0e1116; margin-bottom: 14px; }
.wow p { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.6; color: #e2e8f0; }
.wow p b { color: #fff; font-weight: 900; }
@media (max-width: 820px) {
  .timeline { column-gap: 0; padding-left: 34px; padding-bottom: 0; }
  .timeline::before, .timeline::after { left: 10px; margin-left: 0; top: 0; }
  .timeline > .card:nth-child(even) { top: 0; }
  .timeline > .card::after, .timeline > .card:nth-child(odd)::after, .timeline > .card:nth-child(even)::after { left: -42px; right: auto; top: 26px; width: 16px; height: 16px; }
  .wow { padding: 22px 20px; }
  .wow p { font-size: 16px; }
}

/* ---- What every build includes: bento with CSS-drawn mock UIs ---- */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 26px; margin-top: 52px; }
.bento-tile { grid-column: span 2; gap: 18px; padding: 28px; }
.bento-tile.wide { grid-column: span 3; }
.bento-copy { display: flex; flex-direction: column; gap: 10px; }
.bento-tile h3 { font-size: 24px; }
.bento-tile p { font-size: 15px; }
.mock { margin-top: auto; background: var(--band); border: 2px solid var(--outline); border-radius: 10px; padding: 16px; position: relative; overflow: hidden; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.mock-line { height: 8px; border-radius: 4px; background: rgb(var(--ap-stripe-fg) / 0.45); margin: 10px 0; }
.mock-line.w80 { width: 80%; } .mock-line.w60 { width: 60%; } .mock-line.w70 { width: 70%; }
.mock-doc-bar { display: flex; align-items: center; gap: 6px; padding-bottom: 10px; border-bottom: 2px solid var(--outline); margin-bottom: 4px; }
.mock-doc-bar span { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--outline); background: var(--card); }
.mock-doc-bar span:first-child { background: var(--orange); }
.mock-doc-bar i { margin-left: auto; font-style: normal; font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--muted); }
.mock-doc-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.mock-chip { display: inline-flex; align-items: center; font-size: 11px; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; background: var(--card); border: 2px solid var(--outline); border-radius: 6px; padding: 3px 8px; box-shadow: 2px 2px 0 var(--outline); }
.mock-chip.ok { background: var(--orange); background-image: var(--ap-orange-lift); color: #0e1116; border-color: var(--night); box-shadow: 2px 2px 0 var(--night); }
.mock-stamp { position: absolute; right: 14px; top: 44px; transform: rotate(-12deg); font-family: var(--font-display); font-size: 22px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange); border: 3px solid var(--orange); border-radius: 6px; padding: 2px 10px; opacity: 0.9; }
.mock-bar { height: 10px; border-radius: 5px; background: rgb(var(--ap-stripe-fg) / 0.35); border: 1.5px solid var(--outline); overflow: hidden; }
.mock-bar i { display: block; height: 100%; background: var(--orange); background-image: var(--ap-orange-lift); }
.mock-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.mock-steps span { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted); padding-top: 8px; border-top: 3px solid rgb(var(--ap-stripe-fg) / 0.5); }
.mock-steps span.done { color: var(--ink); border-top-color: var(--orange); }
.mock-steps span.now { color: var(--accent-deep); border-top-color: var(--orange); position: relative; }
.mock-steps span.now::before { content: ""; position: absolute; top: -8px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--orange); border: 1.5px solid var(--night); animation: pulseDot 2s infinite; }
.mock-list > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1.5px solid rgb(var(--ap-line)); font-size: 13px; }
.mock-list > div:last-child { border-bottom: 0; padding-bottom: 0; } .mock-list > div:first-child { padding-top: 0; }
.mock-check { flex-shrink: 0; width: 18px; height: 18px; border-radius: 4px; background: var(--orange); border: 2px solid var(--night); margin-right: 10px; position: relative; }
.mock-check::after { content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid #0e1116; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.mock-list > div:has(> .mock-check) { justify-content: flex-start; }
.mock-chat { display: flex; flex-direction: column; gap: 8px; }
.mock-msg { max-width: 88%; padding: 9px 12px; border-radius: 10px; font-size: 12.5px; font-weight: 600; line-height: 1.45; }
.mock-msg.them { align-self: flex-start; background: var(--card); border: 2px solid var(--outline); color: var(--ink); box-shadow: 2px 2px 0 var(--outline); }
.mock-msg.me { align-self: flex-end; background: var(--orange); background-image: var(--ap-orange-lift); border: 2px solid #0e1116; color: #0e1116; box-shadow: 2px 2px 0 #0e1116; }
@media (max-width: 1080px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bento-tile, .bento-tile.wide { grid-column: span 1; } }
@media (max-width: 820px) { .bento { grid-template-columns: 1fr; gap: 20px; margin-top: 40px; } .bento-tile { padding: 24px; } }

/* ---- Savings calculator ---- */
.calc { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px; margin-top: 52px; align-items: stretch; }
.calc-panel { background: var(--card); background-image: linear-gradient(180deg, var(--ap-sheen), transparent 42%); border: 2px solid var(--outline); border-radius: 12px; padding: 30px; box-shadow: var(--shadow-hard); }
.calc-inputs { display: flex; flex-direction: column; justify-content: space-between; gap: 26px; }
.calc-field { display: grid; grid-template-columns: 1fr auto; row-gap: 12px; align-items: end; }
.calc-label { font-size: 14px; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); line-height: 1.3; }
.calc-label small { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); margin-top: 3px; }
.calc-value { font-family: var(--font-display); font-size: 30px; line-height: 1; color: var(--accent-deep); letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.calc-field input[type="range"] { grid-column: 1 / -1; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 12px; margin: 6px 0; border-radius: 999px; border: 2px solid var(--outline); background: linear-gradient(90deg, var(--orange) 0 var(--p, 50%), rgb(var(--ap-stripe-bg)) var(--p, 50%) 100%); cursor: pointer; outline: none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--orange); background-image: var(--ap-orange-lift); border: 2px solid var(--night); box-shadow: 3px 3px 0 var(--night); cursor: grab; transition: transform 0.15s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.15s ease; }
input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--orange); border: 2px solid var(--night); box-shadow: 3px 3px 0 var(--night); cursor: grab; }
input[type="range"]:hover::-webkit-slider-thumb, input[type="range"]:focus-visible::-webkit-slider-thumb { transform: scale(1.12); box-shadow: 4px 4px 0 var(--night); }
input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.05) translate(1px, 1px); box-shadow: 1px 1px 0 var(--night); }
input[type="range"]:focus-visible { outline: 3px solid #38b0e0; outline-offset: 3px; }
.calc-note { margin: 4px 0 0 0; font-size: 12.5px; font-weight: 600; line-height: 1.55; color: var(--muted); }
.calc-results { display: flex; flex-direction: column; gap: 14px; }
.calc-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.calc-tile { display: flex; flex-direction: column; gap: 6px; background: var(--band); border: 2px solid var(--outline); border-radius: 10px; padding: 16px 18px; }
.calc-tile span { font-size: 11.5px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--eyebrow); }
.calc-tile b { font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1; color: var(--heading); letter-spacing: 0.015em; font-variant-numeric: tabular-nums; }
.calc-tile b small { font-family: var(--font-sans); font-size: 13px; font-weight: 800; color: var(--muted); letter-spacing: 0; }
.calc-hero { display: flex; flex-direction: column; gap: 6px; text-align: center; background: var(--orange); background-image: var(--ap-orange-lift); border: 2px solid var(--night); border-radius: 12px; padding: 22px 20px 20px 20px; color: #0e1116; box-shadow: 5px 5px 0 var(--night); }
.calc-hero span { font-size: 12px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.calc-hero b { font-family: var(--font-display); font-weight: 400; font-size: clamp(44px, 4.4vw, 64px); line-height: 1; letter-spacing: 0.015em; font-variant-numeric: tabular-nums; }
.calc-hero em { font-style: normal; font-size: 14px; font-weight: 800; line-height: 1.45; margin-top: 4px; }
.calc-results .btn { width: 100%; margin-top: auto; }
@media (max-width: 1080px) { .calc { grid-template-columns: 1fr; } }
@media (max-width: 820px) { .calc-panel { padding: 22px; } .calc-value { font-size: 26px; } .calc-tile b { font-size: 26px; } .calc-row { grid-template-columns: 1fr; } }

/* ---- Us vs. a typical agency ---- */
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; margin-top: 52px; }
.compare-col { background: var(--card); border: 2px solid var(--outline); border-radius: 12px; padding: 28px 30px 30px 30px; transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1); }
.compare-col.us { background-image: linear-gradient(180deg, var(--ap-sheen), transparent 42%); box-shadow: var(--shadow-sky-lg); }
.compare-col.them { box-shadow: var(--shadow-hard-sm); }
.compare-col.us:hover { transform: translate(-3px, -3px); box-shadow: 10px 10px 0 var(--sky); }
.compare-col.them:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-hard); }
.compare-head { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 2px solid var(--outline); margin-bottom: 8px; }
.compare-badge { display: inline-flex; align-items: center; font-family: var(--font-display); font-size: 22px; letter-spacing: 0.03em; text-transform: uppercase; line-height: 1; padding: 8px 14px; border-radius: 8px; border: 2px solid var(--outline); }
.compare-col.us .compare-badge { background: var(--orange); background-image: var(--ap-orange-lift); color: #0e1116; border-color: var(--night); box-shadow: 3px 3px 0 var(--night); }
.compare-col.them .compare-badge { background: var(--band); color: var(--muted); box-shadow: 2px 2px 0 var(--outline); }
.compare ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.compare li { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1.5px solid rgb(var(--ap-line)); font-size: 15.5px; font-weight: 600; line-height: 1.5; color: var(--body); }
.compare li:last-child { border-bottom: 0; }
.compare li::before { content: ""; flex-shrink: 0; width: 24px; height: 24px; border-radius: 6px; margin-top: 1px; border: 2px solid var(--night); background: var(--orange) var(--check-mark) center / 13px 13px no-repeat; box-shadow: 2px 2px 0 var(--night); }
.compare-col.us li { color: var(--ink); }
.compare-col.them li::before { background: var(--band) var(--x-mark) center / 11px 11px no-repeat; border-color: var(--outline); box-shadow: none; }
.compare-col.them li { color: var(--muted); }
:root { --check-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e1116' stroke-width='3.2' stroke-linecap='square'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E"); --x-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6980' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
.compare + .cta-row { margin-top: 40px; }
@media (max-width: 820px) { .compare { grid-template-columns: 1fr; gap: 20px; margin-top: 40px; } .compare-col { padding: 22px; } }

/* ---- Homepage FAQ (same accordion as /enterprise, restyled answers) ---- */
#faq .faq-list { max-width: 880px; margin: 44px auto 0 auto; }
#faq .faq-item h3 { font-size: 18px; }
#faq .faq-q { color: var(--heading); transition: color 0.15s ease; }
#faq .faq-item:hover .faq-q { color: var(--accent-deep); }
#faq .faq-a p { font-size: 16px; line-height: 1.65; font-weight: 600; color: var(--body); margin: 0; max-width: 800px; }

/* Legal pages: inline links are underlined so they read as links without relying on
   color alone (their accent-deep sits at ~1:1 against the muted body text). */
.legal-body a { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.legal-body a:hover { color: var(--accent); }
main { display: block; }