/* styles/fonts.css */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(./fonts/inter-variable.woff2) format("woff2");
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(./fonts/lora-variable.woff2) format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/atkinson-regular.woff2) format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(./fonts/atkinson-bold.woff2) format("woff2");
}
@font-face {
  font-family: "OpenDyslexic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/opendyslexic-regular.woff2) format("woff2");
}
@font-face {
  font-family: "OpenDyslexic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(./fonts/opendyslexic-bold.woff2) format("woff2");
}

/* styles/tokens.css */
:root {
  --font-sans:
    "Inter",
    ui-sans-serif,
    system-ui,
    sans-serif;
  --font-serif:
    "Lora",
    Georgia,
    serif;
  --radius: 12px;
  --maxw: 1080px;
  color-scheme: dark light;
}
:root,
html[data-theme=cyber][data-mode=dark] {
  --bg: #0c1119;
  --bg-2: #121a25;
  --surface: #0e1426;
  --surface-2: #161f3a;
  --text: #d7e3ff;
  --text-dim: #8aa0c8;
  --border: #1d2a4a;
  --brand: #35cfe0;
  --brand-2: #6fe2ef;
  --accent: #e8b86a;
  --good: #38f5a0;
  --warn: #ffb020;
  --on-brand: #001018;
  --halo: 0 0 0 1px rgba(53,207,224,.30), 0 0 40px rgba(53,207,224,.22);
  --hero-grad:
    radial-gradient(
      700px 360px at 78% -10%,
      rgba(53,207,224,.20),
      transparent),
    radial-gradient(
      560px 300px at 8% 120%,
      rgba(232,184,106,.18),
      transparent),
    linear-gradient(
      180deg,
      #0c1119 0%,
      #121a25 100%);
}
html[data-theme=cyber][data-mode=light] {
  --bg: #f2fbff;
  --bg-2: #e4f6fb;
  --surface: #fff;
  --surface-2: #e9f8fb;
  --text: #04121a;
  --text-dim: #3f6675;
  --border: #c2e6ee;
  --brand: #00b3a4;
  --brand-2: #00d4c0;
  --accent: #bf8a2a;
  --good: #0ea371;
  --warn: #b45309;
  --on-brand: #ffffff;
  --halo: 0 0 0 1px rgba(0,179,164,.2), 0 10px 30px rgba(0,179,164,.14);
  --hero-grad:
    radial-gradient(
      120% 80% at 50% 0%,
      rgba(0,179,164,.22),
      transparent 60%),
    linear-gradient(
      180deg,
      #f2fbff 0%,
      #e4f6fb 100%);
}
html[data-theme=cool][data-mode=dark] {
  --bg: #0c1119;
  --bg-2: #121a25;
  --surface: #0e2236;
  --surface-2: #143049;
  --text: #e8f3ff;
  --text-dim: #9db4cc;
  --border: #1e3a52;
  --brand: #35cfe0;
  --brand-2: #6fe2ef;
  --accent: #e8b86a;
  --good: #34d399;
  --warn: #fbbf24;
  --on-brand: #001018;
  --halo: 0 0 0 1px rgba(53,207,224,.25), 0 0 40px rgba(53,207,224,.18);
  --hero-grad:
    radial-gradient(
      120% 80% at 50% 0%,
      rgba(53,207,224,.16),
      transparent 60%),
    linear-gradient(
      180deg,
      #0c1119 0%,
      #121a25 100%);
}
html[data-theme=cool][data-mode=light] {
  --bg: #f4f9ff;
  --bg-2: #e7f2fb;
  --surface: #fff;
  --surface-2: #eef6fd;
  --text: #06192b;
  --text-dim: #486179;
  --border: #cfe2f0;
  --brand: #0891b2;
  --brand-2: #06b6d4;
  --accent: #6d4bd8;
  --good: #059669;
  --warn: #b45309;
  --on-brand: #ffffff;
  --halo: 0 0 0 1px rgba(8,145,178,.2), 0 10px 28px rgba(8,145,178,.12);
  --hero-grad:
    linear-gradient(
      180deg,
      #f4f9ff 0%,
      #e7f2fb 100%);
}
html[data-theme=professional][data-mode=dark] {
  --bg: #0b1220;
  --bg-2: #111a2e;
  --surface: #16213a;
  --surface-2: #1e2c4a;
  --text: #eef2f8;
  --text-dim: #a6b2c6;
  --border: #2a3a57;
  --brand: #4f8cff;
  --brand-2: #7aa9ff;
  --accent: #38bdf8;
  --good: #34d399;
  --warn: #f59e0b;
  --on-brand: #04101f;
  --halo: 0 0 0 1px rgba(79,140,255,.22), 0 14px 38px rgba(0,0,0,.5);
  --hero-grad:
    linear-gradient(
      180deg,
      #0b1220 0%,
      #111a2e 100%);
}
html[data-theme=professional][data-mode=light] {
  --bg: #f6f8fc;
  --bg-2: #eceff5;
  --surface: #fff;
  --surface-2: #eef2f8;
  --text: #0b1220;
  --text-dim: #4a5670;
  --border: #d4dbe8;
  --brand: #2563eb;
  --brand-2: #3b82f6;
  --accent: #0284c7;
  --good: #047857;
  --warn: #b45309;
  --on-brand: #ffffff;
  --halo: 0 0 0 1px rgba(37,99,235,.18), 0 10px 26px rgba(0,0,0,.1);
  --hero-grad:
    linear-gradient(
      180deg,
      #f6f8fc 0%,
      #eceff5 100%);
}
html[data-theme=mission][data-mode=dark] {
  --bg: #140e08;
  --bg-2: #1f160d;
  --surface: #2a1f12;
  --surface-2: #38291a;
  --text: #fdf3e7;
  --text-dim: #cbb497;
  --border: #4a3522;
  --brand: #f59e0b;
  --brand-2: #fbbf24;
  --accent: #14b8a6;
  --good: #34d399;
  --warn: #ef4444;
  --on-brand: #1a1205;
  --halo: 0 0 0 1px rgba(245,158,11,.25), 0 0 40px rgba(245,158,11,.16);
  --hero-grad:
    radial-gradient(
      120% 80% at 50% 0%,
      rgba(245,158,11,.16),
      transparent 60%),
    linear-gradient(
      180deg,
      #140e08 0%,
      #1f160d 100%);
}
html[data-theme=mission][data-mode=light] {
  --bg: #fdf8f0;
  --bg-2: #f7ecdc;
  --surface: #fff;
  --surface-2: #fbf2e6;
  --text: #241608;
  --text-dim: #6b5337;
  --border: #e6d4bc;
  --brand: #b45309;
  --brand-2: #d97706;
  --accent: #0d9488;
  --good: #047857;
  --warn: #dc2626;
  --on-brand: #ffffff;
  --halo: 0 0 0 1px rgba(180,83,9,.18), 0 10px 26px rgba(180,83,9,.1);
  --hero-grad:
    linear-gradient(
      180deg,
      #fdf8f0 0%,
      #f7ecdc 100%);
}
html[data-theme=contrast][data-mode=dark] {
  --bg: #000;
  --bg-2: #0a0a0a;
  --surface: #111;
  --surface-2: #1a1a1a;
  --text: #fff;
  --text-dim: #e5e5e5;
  --border: #fff;
  --brand: #ffff00;
  --brand-2: #ffff66;
  --accent: #00ffff;
  --good: #00ff00;
  --warn: #ff8c00;
  --on-brand: #000000;
  --halo: 0 0 0 2px #ffff00;
  --hero-grad:
    linear-gradient(
      180deg,
      #000 0%,
      #0a0a0a 100%);
}
html[data-theme=contrast][data-mode=light] {
  --bg: #fff;
  --bg-2: #f2f2f2;
  --surface: #fff;
  --surface-2: #f2f2f2;
  --text: #000;
  --text-dim: #1a1a1a;
  --border: #000;
  --brand: #0000cc;
  --brand-2: #0000ff;
  --accent: #b30086;
  --good: #006600;
  --warn: #cc3300;
  --on-brand: #ffffff;
  --halo: 0 0 0 2px #0000cc;
  --hero-grad:
    linear-gradient(
      180deg,
      #fff 0%,
      #f2f2f2 100%);
}
html[data-theme=nature][data-mode=dark] {
  --bg: #0c1410;
  --bg-2: #111d16;
  --surface: #16271c;
  --surface-2: #1e3528;
  --text: #eef5ec;
  --text-dim: #aac3ad;
  --border: #2a4634;
  --brand: #5fb87a;
  --brand-2: #8fd6a0;
  --accent: #d9a441;
  --good: #4ade80;
  --warn: #f59e0b;
  --on-brand: #04140a;
  --halo: 0 0 0 1px rgba(95,184,122,.22), 0 12px 40px rgba(95,184,122,.16);
  --hero-grad:
    radial-gradient(
      120% 80% at 50% 0%,
      rgba(95,184,122,.18),
      transparent 60%),
    radial-gradient(
      80% 60% at 80% 100%,
      rgba(217,164,65,.16),
      transparent 70%),
    linear-gradient(
      180deg,
      #0c1410 0%,
      #111d16 100%);
}
html[data-theme=nature][data-mode=light] {
  --bg: #f4f7ee;
  --bg-2: #e8efdd;
  --surface: #fff;
  --surface-2: #eef4e3;
  --text: #1c2a1a;
  --text-dim: #4f6347;
  --border: #d2ddc2;
  --brand: #3f7d4e;
  --brand-2: #5fa06a;
  --accent: #b9772e;
  --good: #15803d;
  --warn: #b45309;
  --on-brand: #ffffff;
  --halo: 0 0 0 1px rgba(63,125,78,.18), 0 10px 28px rgba(63,125,78,.10);
  --hero-grad:
    radial-gradient(
      120% 80% at 50% 0%,
      rgba(63,125,78,.20),
      transparent 60%),
    linear-gradient(
      180deg,
      #f4f7ee 0%,
      #e8efdd 100%);
}
html[data-theme=architect][data-mode=dark] {
  --bg: #16171b;
  --bg-2: #1c1e23;
  --surface: #23262c;
  --surface-2: #2d3138;
  --text: #f0f0ef;
  --text-dim: #a8abb0;
  --border: #3b3f47;
  --brand: #c2613f;
  --brand-2: #d98a63;
  --accent: #9aa0a8;
  --good: #6ea36e;
  --warn: #d98c2b;
  --on-brand: #1a0d07;
  --halo: 0 0 0 1px rgba(194,97,63,.28), 0 16px 44px rgba(0,0,0,.55);
  --hero-grad:
    linear-gradient(
      180deg,
      #16171b 0%,
      #1c1e23 100%);
}
html[data-theme=architect][data-mode=light] {
  --bg: #e9e9e5;
  --bg-2: #dfdfd9;
  --surface: #f5f5f2;
  --surface-2: #dcdcd5;
  --text: #161616;
  --text-dim: #55554f;
  --border: #c6c6bf;
  --brand: #b0593f;
  --brand-2: #c87a5c;
  --accent: #2b2b2b;
  --good: #2f6b2f;
  --warn: #9a5a12;
  --on-brand: #ffffff;
  --halo: 0 0 0 1px rgba(176,89,63,.2), 0 10px 26px rgba(0,0,0,.12);
  --hero-grad:
    linear-gradient(
      180deg,
      #eeeeea 0%,
      #e0e0da 100%);
}
html[data-theme=vapor][data-mode=dark] {
  --bg: #160b2e;
  --bg-2: #1f0f3e;
  --surface: #271450;
  --surface-2: #341a63;
  --text: #ffe6ff;
  --text-dim: #c39ce0;
  --border: #4a2780;
  --brand: #ff6ad5;
  --brand-2: #ff9ee0;
  --accent: #36e2ff;
  --good: #5ff0c0;
  --warn: #ffc14d;
  --on-brand: #2a0b22;
  --halo: 0 0 0 1px rgba(255,106,213,.30), 0 0 40px rgba(255,106,213,.22);
  --hero-grad:
    linear-gradient(
      180deg,
      #ff6ad5 0%,
      #c43ad6 30%,
      #6a2bb0 62%,
      #160b2e 100%);
}
html[data-theme=vapor][data-mode=light] {
  --bg: #fff0fa;
  --bg-2: #ffe3f5;
  --surface: #fff;
  --surface-2: #ffe9f7;
  --text: #2a0b33;
  --text-dim: #7a4d86;
  --border: #f3c2e6;
  --brand: #d6258f;
  --brand-2: #f25cb5;
  --accent: #0d8fb0;
  --good: #0e9e6e;
  --warn: #b45309;
  --on-brand: #ffffff;
  --halo: 0 0 0 1px rgba(214,37,143,.2), 0 10px 30px rgba(214,37,143,.14);
  --hero-grad:
    linear-gradient(
      180deg,
      #ffd9f0 0%,
      #ffe9d6 55%,
      #fff0fa 100%);
}
html[data-theme=stone][data-mode=dark] {
  --bg: #05080b;
  --bg-2: #0a121a;
  --surface: #0c1922;
  --surface-2: #12252e;
  --text: #eef4f5;
  --text-dim: #9fb2b6;
  --border: #1d4f59;
  --brand: #3f97a6;
  --brand-2: #7fd6e2;
  --accent: #cda44f;
  --good: #57c8a0;
  --warn: #d99a2b;
  --on-brand: #06181c;
  --halo: 0 0 0 1px rgba(63,151,166,.30), 0 0 40px rgba(127,214,226,.18);
  --hero-grad:
    radial-gradient(
      700px 360px at 78% -10%,
      rgba(127,214,226,.18),
      transparent),
    radial-gradient(
      560px 300px at 8% 120%,
      rgba(205,164,79,.14),
      transparent),
    linear-gradient(
      180deg,
      #05080b 0%,
      #0a121a 100%);
}
html[data-theme=stone][data-mode=light] {
  --bg: #f3f1ea;
  --bg-2: #e7e3d8;
  --surface: #ffffff;
  --surface-2: #eef4f5;
  --text: #2a2e31;
  --text-dim: #5a5d5c;
  --border: #d3cdbe;
  --brand: #1d4f59;
  --brand-2: #3f97a6;
  --accent: #a07c2e;
  --good: #15803d;
  --warn: #b45309;
  --on-brand: #ffffff;
  --halo: 0 0 0 1px rgba(29,79,89,.18), 0 10px 28px rgba(29,79,89,.12);
  --hero-grad:
    radial-gradient(
      120% 80% at 50% 0%,
      rgba(63,151,166,.16),
      transparent 60%),
    linear-gradient(
      180deg,
      #f3f1ea 0%,
      #e7e3d8 100%);
}
html[data-font=dyslexic],
html[data-font=atkinson] {
  --text-dim: var(--text) !important;
}
html[data-font=dyslexic] body,
html[data-font=dyslexic] body *,
html[data-font=atkinson] body,
html[data-font=atkinson] body * {
  opacity: 1 !important;
}
html[data-font=dyslexic] {
  font-family: "OpenDyslexic", var(--font-sans);
}
html[data-font=atkinson] {
  font-family: "Atkinson Hyperlegible", var(--font-sans);
}
html[data-font=serif] {
  font-family: var(--font-serif);
}
html[data-size=s] {
  font-size: 93.75%;
}
html[data-size=m] {
  font-size: 100%;
}
html[data-size=l] {
  font-size: 112.5%;
}
html[data-size=xl] {
  font-size: 125%;
}
html[data-motion=reduce] *,
html[data-motion=reduce] *::before,
html[data-motion=reduce] *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion=motion]) *,
  html:not([data-motion=motion]) *::before,
  html:not([data-motion=motion]) *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* styles/base.css */
* {
  box-sizing: border-box;
}
html {
  font-family: var(--font-sans);
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a {
  color: var(--brand);
  text-underline-offset: 3px;
}
a:hover {
  color: var(--brand-2);
}
:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brand);
  color: var(--on-brand, #001018);
  padding: 10px 16px;
  z-index: 100;
  font-weight: 700;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
}
.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}
.hero {
  background: var(--hero-grad);
  padding: 96px 0 72px;
  position: relative;
  overflow: hidden;
}
.hero > .container {
  position: relative;
  z-index: 1;
}
.hero::before {
  content: "";
  position: absolute;
  top: 50%;
  right: clamp(-160px, -6vw, -60px);
  width: clamp(280px, 42vw, 560px);
  height: clamp(280px, 42vw, 560px);
  transform: translateY(-50%);
  background-image: url(/assets/logo.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .06;
  z-index: 0;
  pointer-events: none;
}
.hero:has(.hero__mark)::before {
  content: none;
}
html[data-mode=dark] .hero::before {
  filter: invert(1);
}
.hero__mark {
  position: absolute;
  top: 50%;
  right: clamp(-130px, -5vw, -40px);
  width: clamp(260px, 40vw, 500px);
  height: auto;
  transform: translateY(-50%);
  opacity: .10;
  z-index: 0;
  pointer-events: none;
  animation: heroMarkDrift 80s linear infinite;
}
@keyframes heroMarkDrift {
  from {
    transform: translateY(-50%) rotate(0deg);
  }
  to {
    transform: translateY(-50%) rotate(360deg);
  }
}
h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.1;
  margin: 0 0 16px;
  letter-spacing: -.02em;
}
h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin: 48px 0 16px;
  letter-spacing: -.01em;
}
.lede {
  font-size: 1.2rem;
  color: var(--text-dim);
  max-width: 60ch;
}
.btn {
  display: inline-block;
  background: var(--brand);
  color: var(--on-brand, #001018);
  font-weight: 700;
  padding: 12px 22px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: var(--halo);
  transition:
    background .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}
.btn:hover {
  background: var(--brand-2);
  color: var(--on-brand, #001018);
  transform: translateY(-1px);
}
.btn--ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: none;
}
.btn--inline {
  margin-left: 10px;
}
.hero__cta {
  margin-top: 28px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  margin: 14px 0;
  transition: border-color .2s ease, transform .2s ease;
}
.card:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
}
.grid {
  display: grid;
  gap: 16px;
}
@media (min-width: 720px) {
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}
.site-header nav a {
  color: var(--text-dim);
  margin-left: 20px;
  text-decoration: none;
  font-size: .95rem;
}
.site-header nav a:hover {
  color: var(--text);
}
.brandmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text);
  text-decoration: none;
  font-size: 1.15rem;
}
.brandmark__mark {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex: none;
}
.brandmark__ai {
  color: var(--brand);
}
html[data-mode=dark] .brandmark__mark,
html[data-mode=dark] .hero__mark,
html[data-mode=dark] .footer__mark {
  filter: invert(1);
}
.price {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--brand);
}
.price--tier {
  font-size: 1.6rem;
}
.price del {
  color: var(--text-dim);
  font-size: 1.4rem;
  font-weight: 600;
  margin-right: 10px;
}
.pill {
  display: inline-block;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: .8rem;
  color: var(--text-dim);
}
.pill--flow {
  margin-top: 8px;
}
.cta-row {
  margin-top: 24px;
}
.note-row {
  margin-top: 16px;
}
.ai-disclosure {
  font-size: .8rem;
  color: var(--text-dim);
  background: var(--surface-2);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 20px 0;
}
.mt-16 {
  margin-top: 16px;
}
.mt-24 {
  margin-top: 24px;
}
.mt-0 {
  margin-top: 0;
}
.mt-28 {
  margin-top: 28px;
}
.mt-32 {
  margin-top: 32px;
}
.mt-48 {
  margin-top: 48px;
}
.m-0 {
  margin: 0;
}
.ml-8 {
  margin-left: 8px;
}
.text-italic {
  font-style: italic;
}
.lead-label {
  font-weight: 700;
  margin: 0 0 8px;
}
.measure-40 {
  max-width: 40ch;
}
.price--md {
  font-size: 2rem;
}
.policy-table {
  width: 100%;
  border-collapse: collapse;
}
.policy-table th {
  text-align: left;
  padding: .6rem;
  border-bottom: 2px solid var(--border);
}
.policy-table td {
  padding: .6rem;
  border-bottom: 1px solid var(--border);
}
.fine-print {
  font-size: .85rem;
  color: var(--text-dim);
}
.band {
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 8px 0 24px;
  margin: 40px 0;
}
.wave-divider {
  height: 28px;
  margin: 48px 0;
  border: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-image:
    linear-gradient(
      to right,
      transparent,
      color-mix(in oklab, var(--brand) 55%, transparent),
      transparent),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='28' viewBox='0 0 1200 28' preserveAspectRatio='none'%3E%3Cpath d='M0 14 C 100 2, 200 26, 300 14 S 500 2, 600 14 S 800 26, 900 14 S 1100 2, 1200 14' fill='none' stroke='%2335cfe0' stroke-width='2' stroke-opacity='0.35'/%3E%3C/svg%3E");
  background-size: 100% 1px, 1200px 28px;
}
.post-list {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
  display: grid;
  gap: 16px;
}
.post-card {
  padding: 0;
}
.post-card a {
  display: block;
  padding: 22px;
  color: inherit;
  text-decoration: none;
}
.post-card a:hover {
  color: inherit;
}
.post-card h2 {
  margin: 0 0 6px;
  font-size: 1.3rem;
  line-height: 1.3;
}
.post-card .byline {
  margin: 0 0 10px;
}
.post-card p:last-child {
  margin: 0;
  color: var(--text-dim);
}
.prose {
  max-width: 760px;
}
.prose h2 {
  margin: 40px 0 14px;
}
.prose h3 {
  margin: 28px 0 10px;
  font-size: 1.2rem;
}
.prose p {
  margin: 0 0 18px;
}
.prose ul {
  margin: 0 0 20px;
  padding-left: 22px;
}
.prose li {
  margin: 6px 0;
}
.prose code {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: .1rem .35rem;
  font-size: .9em;
}
.byline {
  color: var(--text-dim);
  font-size: .95rem;
}
.pull-quote {
  border-left: 4px solid var(--brand);
  margin: 28px 0;
  padding: 8px 0 8px 20px;
  font-size: 1.2rem;
  font-style: italic;
  color: var(--text);
}
.pull-quote p {
  margin: 0;
}
footer.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 64px;
  padding: 32px 0;
  color: var(--text-dim);
  font-size: .9rem;
}
footer.site-footer a {
  color: var(--text-dim);
}
.footer__mark {
  display: block;
  width: 44px;
  height: 44px;
  opacity: .85;
  margin-bottom: 14px;
}
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
.measure {
  max-width: 72ch;
}
.illustrative-ribbon {
  background:
    repeating-linear-gradient(
      45deg,
      color-mix(in oklab, var(--warn) 24%, var(--bg)) 0 16px,
      color-mix(in oklab, var(--warn) 12%, var(--bg)) 16px 32px);
  border-bottom: 3px dashed var(--warn);
  color: var(--text);
  padding: 14px 16px;
  text-align: center;
  font-weight: 700;
  font-size: .95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.illustrative-ribbon .ribbon-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--warn);
  color: #000;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 800;
  white-space: nowrap;
}
.illustrative-callout {
  background: color-mix(in oklab, var(--warn) 12%, var(--surface));
  border: 1px solid var(--warn);
  border-left: 6px solid var(--warn);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin: 28px 0 0;
}
.illustrative-callout .callout-label {
  color: var(--warn);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .78rem;
  font-weight: 800;
  display: block;
  margin-bottom: 6px;
}
.illustrative-callout p {
  margin: 0;
  max-width: none;
}
.cs-grid {
  display: grid;
  gap: 18px;
}
@media (min-width: 720px) {
  .cs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.cs-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cs-card .cs-vertical {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--brand);
  font-weight: 800;
}
.cs-card .cs-big {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 800;
  color: var(--brand);
  letter-spacing: -.02em;
  line-height: 1.05;
  margin: 4px 0 0;
}
.cs-card .cs-summary {
  color: var(--text-dim);
  font-size: .95rem;
  margin: 6px 0 0;
}
.cs-card .cs-card__title {
  margin: 4px 0;
  font-size: 1.15rem;
}
.cs-card .cs-card__title a {
  color: var(--text);
  text-decoration: none;
}
.cs-card .cs-card__title a:hover {
  color: var(--brand);
}
.cs-card .cs-readmore {
  margin-top: auto;
}
.badge-pl {
  display: inline-block;
  width: fit-content;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--warn) 14%, var(--surface-2));
  border: 1px solid var(--warn);
  color: var(--warn);
}
.empty-note {
  background: color-mix(in oklab, var(--warn) 10%, var(--surface));
  border: 1px dashed var(--warn);
  border-radius: var(--radius);
  padding: clamp(20px, 3vw, 28px);
  margin: 24px 0;
}
.empty-note .eyebrow-warn {
  color: var(--warn);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .78rem;
}
.cs-crumbs {
  font-size: .88rem;
  color: var(--text-dim);
  margin: 0 0 16px;
}
.cs-crumbs a {
  color: var(--text-dim);
}
.cs-eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .78rem;
  font-weight: 700;
  color: var(--brand);
  margin-bottom: 12px;
}
.cs-lead {
  font-size: 1.1rem;
  color: var(--text-dim);
  max-width: 70ch;
}
.client-meta {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
@media (min-width: 760px) {
  .client-meta {
    grid-template-columns: repeat(4, 1fr);
  }
}
.client-meta dt {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--text-dim);
  margin-bottom: 4px;
  font-weight: 700;
}
.client-meta dd {
  margin: 0;
  font-weight: 700;
  font-size: 1rem;
}
.headline-metric {
  margin-top: 28px;
  padding: 20px 22px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--halo);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: baseline;
}
.headline-metric .hm-big {
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 800;
  color: var(--brand);
  letter-spacing: -.02em;
  line-height: 1;
}
.headline-metric .hm-label {
  font-weight: 700;
  color: var(--text);
  max-width: 48ch;
}
.headline-metric .hm-window {
  color: var(--text-dim);
  font-size: .92rem;
}
.ill-tag {
  display: inline-block;
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 999px;
  margin-top: 6px;
  background: color-mix(in oklab, var(--warn) 22%, var(--surface-2));
  color: var(--warn);
  border: 1px solid var(--warn);
}
.method-list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  gap: 18px;
}
@media (min-width: 720px) {
  .method-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.method-list li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.method-list .n {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--brand);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  margin-bottom: 10px;
}
.method-list h3 {
  font-size: 1.05rem;
  margin: 2px 0 8px;
}
.method-list p {
  color: var(--text-dim);
  font-size: .95rem;
  margin: 0;
}
.split-2 {
  display: grid;
  gap: 18px;
  margin-top: 22px;
}
@media (min-width: 720px) {
  .split-2 {
    grid-template-columns: 1fr 1fr;
  }
}
.split-2 .card h3 {
  font-size: 1rem;
  margin: 0 0 10px;
}
.split-2 .card ul {
  margin: 0;
  padding-left: 18px;
  color: var(--text-dim);
  font-size: .95rem;
}
.split-2 .card li {
  margin: 5px 0;
}
.numbers-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 22px;
}
.numbers-table caption {
  text-align: left;
  padding: 14px 18px;
  font-weight: 700;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.numbers-table th,
.numbers-table td {
  text-align: left;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.numbers-table thead th {
  background: var(--surface-2);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-dim);
}
.numbers-table tbody tr:last-child td,
.numbers-table tbody tr:last-child th {
  border-bottom: 0;
}
.numbers-table .delta-pos {
  color: var(--good);
  font-weight: 800;
}
.chart-grid {
  display: grid;
  gap: 18px;
  margin-top: 22px;
}
@media (min-width: 720px) {
  .chart-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.chart-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin: 0;
}
.chart-card h3 {
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-dim);
  margin: 0 0 10px;
  font-weight: 800;
}
.chart-svg {
  width: 100%;
  height: 180px;
}
.chart-note {
  font-size: .85rem;
  color: var(--text-dim);
  margin: 10px 0 0;
}
.client-quote {
  border: 1px solid var(--border);
  border-left: 6px solid var(--warn);
  border-radius: var(--radius);
  padding: 22px 26px;
  margin: 22px 0;
  background: color-mix(in oklab, var(--warn) 8%, var(--surface));
}
.client-quote .quote-label {
  display: block;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--warn);
  font-weight: 800;
  margin-bottom: 8px;
}
.client-quote blockquote {
  margin: 0;
  font-size: 1.15rem;
  font-style: italic;
}
.client-quote .who {
  margin-top: 12px;
  font-size: .92rem;
  color: var(--text-dim);
  font-weight: 700;
}
.eocs-card {
  background:
    linear-gradient(
      135deg,
      var(--surface) 0%,
      var(--surface-2) 100%);
  border: 1px solid var(--border);
  border-left: 6px solid var(--brand);
  border-radius: var(--radius);
  padding: 20px 24px;
  box-shadow: var(--halo);
  margin: 14px 0;
}
.eocs-card h3 {
  margin: 2px 0 10px;
  font-size: 1.1rem;
}
.eocs-card ul {
  margin: 6px 0 0;
  padding-left: 20px;
  color: var(--text-dim);
}
.cs-cta {
  background:
    linear-gradient(
      135deg,
      var(--surface) 0%,
      var(--surface-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(22px, 4vw, 34px);
  box-shadow: var(--halo);
  display: grid;
  gap: 18px;
  align-items: center;
}
@media (min-width: 720px) {
  .cs-cta {
    grid-template-columns: 1.4fr 1fr;
  }
}
.cs-cta h2 {
  margin: 0 0 8px;
}
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* styles/a11y-panel.css */
.a11y-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 0;
  background: var(--brand);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--halo);
  cursor: pointer;
}
.a11y-fab:hover {
  background: var(--brand-2);
}
.a11y-fab svg {
  width: 26px;
  height: 26px;
}
.a11y-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 65;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
.a11y-backdrop[data-show] {
  opacity: 1;
  pointer-events: auto;
}
.a11y-drawer {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(420px, 92vw);
  z-index: 70;
  background: var(--surface);
  border-left: 1px solid var(--border);
  color: var(--text);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .28s ease, visibility 0s .28s;
  overflow-y: auto;
  padding: 1.2rem;
  box-shadow: var(--halo);
}
.a11y-drawer[aria-hidden=false] {
  transform: translateX(0);
  visibility: visible;
  transition-delay: 0s;
}
.a11y-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .4rem;
}
.a11y-drawer__head h2 {
  margin: 0;
  font-size: 1.15rem;
}
.a11y-iconbtn {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  width: 38px;
  height: 38px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.a11y-iconbtn:hover {
  border-color: var(--brand);
}
.a11y-iconbtn svg {
  width: 20px;
  height: 20px;
}
.a11y-note {
  font-size: .85rem;
  color: var(--text-dim);
  margin: 0 0 1rem;
}
.a11y-section {
  margin: 1.2rem 0;
}
.a11y-section__title {
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-dim);
  margin: 0 0 .6rem;
  font-weight: 800;
}
.a11y-opts {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.a11y-opt {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  padding: .55rem .85rem;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
  font-size: .9rem;
  font-family: inherit;
}
.a11y-opt[aria-pressed=true] {
  background: var(--brand);
  color: var(--bg);
  border-color: var(--brand);
}
.a11y-opt:hover:not([aria-pressed=true]) {
  border-color: var(--brand);
}
.a11y-reset {
  width: 100%;
  background: transparent;
  padding: .7rem;
}
.a11y-presets {
  display: grid;
  gap: .5rem;
  grid-template-columns: 1fr 1fr;
}
.a11y-preset {
  text-align: left;
  padding: .75rem .9rem;
  border-radius: 12px;
  cursor: pointer;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: inherit;
}
.a11y-preset b {
  display: block;
  font-size: .92rem;
}
.a11y-preset span {
  font-size: .76rem;
  color: var(--text-dim);
}
.a11y-preset:hover {
  border-color: var(--brand);
}
.a11y-speechbar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 90px;
  z-index: 55;
  background: var(--surface);
  border: 1px solid var(--brand);
  color: var(--text);
  padding: .55rem 1rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: .7rem;
  box-shadow: var(--halo);
}
.a11y-speechbar[hidden] {
  display: none;
}
.a11y-speechbar__stop {
  padding: .25rem .6rem;
}
.a11y-speechbar__pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand);
  animation: a11yPulse 1.2s ease-in-out infinite;
}
@keyframes a11yPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.7);
    opacity: .4;
  }
}
.a11y-toast {
  position: fixed;
  bottom: 18px;
  left: 18px;
  z-index: 80;
  background: var(--surface);
  border: 1px solid var(--brand);
  color: var(--text);
  padding: .7rem 1rem;
  border-radius: 12px;
  box-shadow: var(--halo);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .25s, transform .25s;
  pointer-events: none;
}
.a11y-toast[data-show] {
  opacity: 1;
  transform: translateY(0);
}
html[data-motion=reduce] .a11y-backdrop,
html[data-motion=reduce] .a11y-drawer,
html[data-motion=reduce] .a11y-toast,
html[data-motion=reduce] .a11y-speechbar__pulse {
  transition: none !important;
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion=motion]) .a11y-backdrop,
  html:not([data-motion=motion]) .a11y-drawer,
  html:not([data-motion=motion]) .a11y-toast,
  html:not([data-motion=motion]) .a11y-speechbar__pulse {
    transition: none !important;
    animation: none !important;
  }
}

/* styles/styles.css */