/* ==========================================================================
   MyBotPlus.com — Design System
   --------------------------------------------------------------------------
   Ported by hand from the _Template (Next.js 16 / Tailwind v4 / shadcn
   "base-nova"). Every token below is the sRGB equivalent of the template's
   oklch() value, with the oklch original kept as a comment so the two can
   never silently drift apart.

   Written as plain CSS on purpose: no build step, no Node, no PostCSS.
   Drop the folder on any PHP host and it renders.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Surfaces */
  --background:            #FFFFFF;   /* oklch(1 0 0) */
  --foreground:            #131F2D;   /* oklch(0.235 0.033 255.2) */
  --card:                  #FFFFFF;
  --card-foreground:       #131F2D;

  /* Brand — MyBotPlus navy, sampled from the supplied favicon.png.
     oklch(0.331 0.110 255.2). Every neutral below is rebuilt at hue 255.2
     so the greys carry a hint of the brand rather than reading as a separate
     palette sitting next to it.
     White on this navy is 11.96:1 — comfortably past WCAG AA. */
  --primary:               #00346C;   /* oklch(0.331 0.110 255.2) */
  --primary-foreground:    #F9FCFF;   /* oklch(0.99 0.006 255.2) */
  --brand:                 #00346C;
  --brand-soft:            #D8EDFF;   /* oklch(0.94 0.045 255.2) */

  /* Accent — emerald.
     The template's green is oklch(0.56 0.13 152). At that lightness, white
     text on it lands at 4.30:1 — just under the 4.5:1 WCAG AA threshold, and
     green-on-green-soft was worse at 3.87:1. Rather than abandon the palette,
     each green is tuned to the job it does:
       --green         fills and buttons   (white on it: 5.07:1)
       --green-text    green text on light (on green-soft: 4.97:1)
       --green-bright  green on the navy   (on --primary: 6.22:1)
     All three keep hue 152 and chroma 0.13–0.15, so they read as one colour. */
  --green:                 #137D41;   /* oklch(0.52 0.13 152) */
  --green-foreground:      #F7FEF8;   /* oklch(0.99 0.01 152) */
  --green-soft:            #DCF7E2;   /* oklch(0.95 0.04 152) */
  --green-text:            #05773B;   /* oklch(0.50 0.13 152) */
  --green-bright:          #69D98D;   /* oklch(0.80 0.15 152) */

  /* Neutrals — all at brand hue 255.2 */
  --secondary:             #EEF5FE;   /* oklch(0.968 0.014 255.2) */
  --secondary-foreground:  #00346C;
  --muted:                 #EFF4FC;
  --muted-foreground:      #5B697B;   /* oklch(0.515 0.033 255.2) */
  --border:                #DCE4EE;   /* oklch(0.915 0.016 255.2) */
  --input:                 #DCE4EE;
  --ring:                  #00346C;
  --destructive:           #E7000B;

  /* Radii — template scale: --radius 0.75rem with multipliers */
  --radius:      0.75rem;
  --radius-sm:   0.45rem;
  --radius-md:   0.6rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1.05rem;
  --radius-2xl:  1.35rem;
  --radius-3xl:  1.65rem;
  --radius-full: 9999px;

  /* Type */
  --font-sans:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Elevation — the template's shadow-primary/5 family */
  --shadow-sm: 0 1px 2px 0 rgba(0, 52, 108, .06);
  --shadow-md: 0 4px 6px -1px rgba(0, 52, 108, .07), 0 2px 4px -2px rgba(0, 52, 108, .06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 52, 108, .08), 0 4px 6px -4px rgba(0, 52, 108, .06);
  --shadow-xl: 0 20px 25px -5px rgba(0, 52, 108, .08), 0 8px 10px -6px rgba(0, 52, 108, .04);

  /* Layout */
  --container: 72rem;   /* max-w-6xl */
  --container-narrow: 56rem;
  --header-h: 4rem;
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; border-color: var(--border); }

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  background: var(--background);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--foreground);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
svg { flex-shrink: 0; }

a { color: inherit; text-decoration: none; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

button { background: none; border: 0; cursor: pointer; }

ul, ol { list-style: none; }

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

::selection { background: var(--brand-soft); color: var(--primary); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 50%; top: -100px; transform: translateX(-50%);
  z-index: 200; background: var(--primary); color: var(--primary-foreground);
  padding: .75rem 1.25rem; border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 600; transition: top .2s;
}
.skip-link:focus { top: 0; }

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--foreground);
  text-wrap: balance;
}

h1 { font-size: clamp(2.125rem, 1.55rem + 2.6vw, 3rem); line-height: 1.08; }
h2 { font-size: clamp(1.75rem, 1.35rem + 1.75vw, 2.25rem); }
h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.015em; }
h4 { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; }

p { text-wrap: pretty; }

.lead {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}

.text-muted   { color: var(--muted-foreground); }
.text-green   { color: var(--green-text); }
.text-brand   { color: var(--primary); }
.text-center  { text-align: center; }
.font-display { font-family: var(--font-display); }

/* --------------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.5rem;
}
.container-narrow { max-width: var(--container-narrow); }

.section        { padding-block: 5rem; }
.section-tight  { padding-block: 3.5rem; }
@media (min-width: 1024px) { .section { padding-block: 7rem; } }

.section-alt     { background: color-mix(in srgb, var(--secondary) 55%, var(--background)); border-block: 1px solid var(--border); }
.section-brand   { background: var(--primary); border-block: 1px solid var(--border); }
.section-brand h2, .section-brand h3 { color: var(--primary-foreground); }
.section-brand .lead, .section-brand p { color: rgba(250, 252, 255, .72); }

.section-head          { max-width: 40rem; }
.section-head.is-center { margin-inline: auto; text-align: center; }
.section-head .lead     { margin-top: 1rem; }

.stack-sm > * + * { margin-top: .5rem; }
.stack    > * + * { margin-top: 1rem; }
.stack-lg > * + * { margin-top: 1.5rem; }

.grid { display: grid; gap: 1.25rem; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.split {
  display: grid;
  gap: 3rem;
  align-items: center;
}

/* Grid and flex children default to a min-width of `auto`, which resolves to
   min-content — the widest thing inside that cannot wrap. The install snippet
   contains an unbreakable script tag, so without this the column grows past
   the viewport and the whole page scrolls sideways on a phone.
   `min-width: 0` lets the column shrink and hands the overflow to the
   element that knows how to handle it (the <pre>, which scrolls). */
.split > *,
.grid > *,
.hero-inner > *,
.pricing-grid > *,
.footer-grid > * { min-width: 0; }
@media (min-width: 1024px) {
  .split { grid-template-columns: repeat(2, 1fr); gap: 3.5rem; }
  .split-hero { grid-template-columns: 1.05fr .95fr; gap: 3.5rem; }
}

/* --------------------------------------------------------------------------
   5. BUTTONS  (ported from components/ui/button.tsx)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 2.5rem;
  padding-inline: 1.125rem;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: .875rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; pointer-events: none; }
.btn svg { width: 1rem; height: 1rem; }

.btn-lg { height: 3rem; padding-inline: 1.5rem; font-size: 1rem; border-radius: var(--radius-lg); }
.btn-sm { height: 2.125rem; padding-inline: .875rem; font-size: .8125rem; }
.btn-block { display: flex; width: 100%; }
.btn-icon  { width: 2.5rem; padding: 0; }

.btn-primary   { background: var(--primary); color: var(--primary-foreground); }
.btn-primary:hover   { background: color-mix(in srgb, var(--primary) 90%, #000); }

.btn-green     { background: var(--green); color: var(--green-foreground); }
.btn-green:hover     { background: color-mix(in srgb, var(--green) 90%, #000); }

.btn-outline   { background: var(--background); color: var(--foreground); border-color: var(--border); }
.btn-outline:hover   { background: var(--secondary); }

.btn-ghost     { background: transparent; color: var(--foreground); }
.btn-ghost:hover     { background: var(--secondary); }

.btn-on-brand  { background: var(--primary-foreground); color: var(--primary); }
.btn-on-brand:hover  { background: #fff; }

.btn-row { display: flex; flex-direction: column; gap: .75rem; }
@media (min-width: 640px) { .btn-row { flex-direction: row; } }
.btn-row.is-center { justify-content: center; }

/* --------------------------------------------------------------------------
   6. BADGES / PILLS
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--secondary);
  padding: .3rem .75rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--secondary-foreground);
  line-height: 1.4;
}
.badge svg { width: .875rem; height: .875rem; }
.badge-green { border-color: rgba(19,125,65,.35); background: var(--green-soft); color: var(--green-text); }
.badge-brand { border-color: rgba(0,52,108,.25); background: var(--brand-soft); color: var(--primary); }
.badge-solid { background: var(--green); color: var(--green-foreground); border-color: transparent; }

.dot { width: .5rem; height: .5rem; border-radius: var(--radius-full); background: var(--green); flex-shrink: 0; }
.note-line {
  display: flex; align-items: center; gap: .5rem;
  font-size: .875rem; color: var(--muted-foreground);
}
.note-line.is-center { justify-content: center; }
/* Inline SVGs have no intrinsic size, so any icon dropped into a text row
   must be constrained here or it expands to fill its container. */
.note-line svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.note-line a { color: inherit; }
.note-line a:hover { color: var(--foreground); }

/* --------------------------------------------------------------------------
   7. CARDS
   -------------------------------------------------------------------------- */
.card {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: var(--radius-2xl);
  padding: 1.75rem;
}
.card-hover { transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease; }
.card-hover:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

.card-icon {
  display: flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem;
  border-radius: var(--radius-xl);
  background: var(--brand-soft);
  color: var(--primary);
  transition: background-color .22s ease, color .22s ease;
}
.card-icon svg { width: 1.5rem; height: 1.5rem; }
.card-hover:hover .card-icon { background: var(--primary); color: var(--primary-foreground); }
.card-icon.is-green { background: var(--green-soft); color: var(--green-text); }
.card-hover:hover .card-icon.is-green { background: var(--green); color: var(--green-foreground); }

.card h3 { margin-top: 1.25rem; }
.card h3 + p { margin-top: .5rem; color: var(--muted-foreground); }

/* The home page's feature image. A real <img> so search engines can index
   it; the frame is what stops a flat 1200x630 PNG looking pasted-on. */
.feature-shot { margin: 0; }
.feature-shot img {
  display: block;
  width: 100%;
  height: auto;                 /* keeps the 1200x630 ratio at every width */
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  background: var(--card);
}
/* ── Blog listing ──────────────────────────────────────────────────────────
   The newest post gets a wide card, the rest a normal grid. One featured
   piece and a grid underneath reads as an edited publication; nine identical
   cards read as a folder listing. */

.post-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
  margin: 0; font-size: .8125rem; color: var(--muted-foreground);
}

.post-lead { display: grid; gap: 1.75rem; padding: 1.75rem; }
@media (min-width: 900px) {
  .post-lead { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; }
}

.post-lead-media, .post-card-media { display: block; }
.post-lead-media img, .post-card-media img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1200 / 630; object-fit: cover;
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  background: var(--card);
}

.post-lead-body h2 { font-size: 1.625rem; line-height: 1.25; }

/* The whole card is not a link — the heading is. A card-sized link swallows
   text selection and gives a screen reader one enormous link name; the image
   beside it is aria-hidden and out of the tab order so it never announces the
   same destination twice. */
.post-lead-body h2 a, .post-card h3 a { color: inherit; text-decoration: none; }
.post-lead-body h2 a:hover, .post-card h3 a:hover { color: var(--primary); }

.post-card { display: flex; flex-direction: column; gap: .875rem; }
.post-card h3 { font-size: 1.0625rem; line-height: 1.35; }
.post-card p { font-size: .9375rem; }
.post-card-more { margin-top: auto; padding-top: .25rem; font-size: .875rem; }
.post-card-more a {
  display: inline-flex; align-items: center; gap: .35rem;
  color: var(--primary); font-weight: 600; text-decoration: none;
}
.post-card-more a:hover { text-decoration: underline; }
.post-card-more svg { width: 1rem; height: 1rem; }

/* ── A single post ─────────────────────────────────────────────────────── */

.post-byline {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin: 0 0 1.5rem; font-size: .875rem; color: var(--muted-foreground);
}

.post-nav {
  display: grid; gap: 1rem; margin-top: 3.5rem;
  padding-top: 2rem; border-top: 1px solid var(--border);
}
@media (min-width: 640px) { .post-nav { grid-template-columns: 1fr 1fr; } }

.post-nav-link {
  display: block; padding: 1rem 1.125rem;
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  background: var(--card); text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.post-nav-link:hover { border-color: var(--primary); box-shadow: var(--shadow-lg); }
/* A lone "Newer" link belongs on the right, where a reader expects it, even
   with nothing in the first column. */
.post-nav-link.is-next { text-align: right; grid-column: -2; }
.post-nav-dir   { display: block; font-size: .75rem; font-weight: 700; color: var(--primary); }
.post-nav-title { display: block; margin-top: .25rem; font-size: .9375rem; color: var(--foreground); }

.post-back { margin-top: 2rem; font-size: .9375rem; }
.post-back a { color: var(--muted-foreground); text-decoration: none; }
.post-back a:hover { color: var(--primary); }

/* A blog post's feature image. Same treatment as the home page's, at the
   narrower measure the article column uses. */
.post-hero { margin: 0 0 2.5rem; }
.post-hero img {
  display: block;
  width: 100%;
  aspect-ratio: 1200 / 630;
  height: auto;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  background: var(--card);
}
.post-hero figcaption {
  margin-top: .875rem;
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}

.feature-shot figcaption {
  margin: 1rem auto 0;
  max-width: 46rem;
  text-align: center;
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}

.panel {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: var(--radius-2xl);
  padding: 1.25rem;
  box-shadow: var(--shadow-xl);
}

/* --------------------------------------------------------------------------
   8. HEADER / NAV
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  gap: 1rem;
}

.brand { display: inline-flex; align-items: center; gap: .5rem; }

/* Supplied wordmark. Height is fixed and width follows, so a future logo
   file with different proportions does not need a CSS change. The explicit
   width/height attributes in the markup reserve the space and stop the
   header shifting as it loads. */
.brand-logo { height: 1.85rem; width: auto; }
@media (min-width: 420px) { .brand-logo { height: 2.1rem; } }
@media (min-width: 640px) { .brand-logo { height: 2.35rem; } }

.brand-mark {
  display: flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: var(--radius-md);
  background: var(--primary); color: var(--primary-foreground);
}
.brand-mark svg { width: 1.25rem; height: 1.25rem; }
.brand-name {
  font-family: var(--font-display);
  font-size: 1.125rem; font-weight: 800;
  letter-spacing: -0.03em; color: var(--foreground);
}
.brand-name em { font-style: normal; color: var(--green); }

.nav { display: none; align-items: center; gap: 2rem; }
@media (min-width: 900px) { .nav { display: flex; } }
.nav a {
  font-size: .875rem; font-weight: 500; color: var(--muted-foreground);
  transition: color .18s ease; padding-block: .25rem;
}
.nav a:hover { color: var(--foreground); }
.nav a[aria-current="page"] { color: var(--foreground); font-weight: 600; }

.header-actions { display: flex; align-items: center; gap: .625rem; }
.header-actions .btn-ghost { display: none; }
@media (min-width: 640px) { .header-actions .btn-ghost { display: inline-flex; } }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--radius-md); border: 1px solid var(--border);
  color: var(--foreground); background: var(--background);
}
.nav-toggle svg { width: 1.25rem; height: 1.25rem; }
@media (min-width: 900px) { .nav-toggle { display: none; } }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
.nav-toggle[aria-expanded="true"] .icon-open  { display: none; }

.mobile-nav {
  display: none;
  border-top: 1px solid var(--border);
  background: var(--background);
  padding: 1rem 1.5rem 1.5rem;
}
.mobile-nav.is-open { display: block; }
@media (min-width: 900px) { .mobile-nav { display: none !important; } }
.mobile-nav a {
  display: block; padding: .75rem .25rem;
  font-size: .9375rem; font-weight: 500; color: var(--foreground);
  border-bottom: 1px solid var(--border);
}
.mobile-nav a:last-of-type { border-bottom: 0; }
.mobile-nav .btn { margin-top: 1rem; }

/* --------------------------------------------------------------------------
   9. HERO
   -------------------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; }
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background: radial-gradient(60% 50% at 50% 0%, var(--brand-soft), transparent 70%);
}
.hero-inner {
  display: grid;
  gap: 3.5rem;
  align-items: center;
  padding-block: 4rem 5rem;
}
@media (min-width: 1024px) {
  .hero-inner { grid-template-columns: 1.05fr .95fr; padding-block: 6rem 7rem; }
}
.hero-copy { max-width: 36rem; }
.hero-copy h1 { margin-top: 1.25rem; }
.hero-copy .lead { margin-top: 1.25rem; font-size: 1.125rem; }
.hero-copy .btn-row { margin-top: 2rem; }
.hero-copy .note-line { margin-top: 1.25rem; }

.hero-facts {
  display: flex; flex-wrap: wrap; gap: .5rem .75rem;
  margin-top: 1.5rem;
}
.hero-fact {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .8125rem; font-weight: 500; color: var(--muted-foreground);
}
.hero-fact svg { width: 1rem; height: 1rem; color: var(--green-text); }

/* --------------------------------------------------------------------------
   10. SCANNER + CHAT DEMO  (ported from components/hero.tsx)
   -------------------------------------------------------------------------- */
.demo { position: relative; }
.demo-inner {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: var(--radius-2xl);
  padding: 1.25rem;
  box-shadow: var(--shadow-xl);
}
.demo-step {
  border: 1px solid var(--border);
  background: var(--background);
  border-radius: var(--radius-xl);
  padding: 1rem;
}
.demo-step-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.step-num {
  display: flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: var(--radius-sm);
  background: var(--brand-soft); color: var(--primary);
  font-size: .6875rem; font-weight: 800;
}
.demo-step-head span:last-child { font-size: .875rem; font-weight: 600; }

.scan-form { display: flex; flex-direction: column; gap: .5rem; }
@media (min-width: 640px) { .scan-form { flex-direction: row; } }
.scan-input {
  display: flex; flex: 1; align-items: center; gap: .5rem;
  border: 1px solid var(--input); background: var(--secondary);
  border-radius: var(--radius-md); padding-inline: .75rem;
}
.scan-input svg { width: 1rem; height: 1rem; color: var(--muted-foreground); }
.scan-input input {
  height: 2.75rem; width: 100%;
  background: transparent; border: 0; outline: none;
  font-size: .875rem;
}
.scan-input input::placeholder { color: var(--muted-foreground); }
.scan-form .btn { height: 2.75rem; }

/* The hero's live-looking contact form.
   assets/css/forms.css owns the fields themselves — index.php loads it via
   $page['styles']. These few rules only fit that form into the demo panel,
   which is a narrower and darker box than a real hosted form ever sits in. */
.demo-form { margin-top: .25rem; }
.demo-form .cf-grid { gap: .625rem; }
.demo-form .cf-label { font-size: .75rem; margin-bottom: .25rem; }
.demo-form .cf-input { font-size: .875rem; padding: .5rem .625rem; }
.demo-form .cf-textarea { min-height: 74px; }
.demo-form .cf-submit { width: 100%; min-height: 40px; font-size: .875rem; }

.demo-idle {
    margin: 1rem 0 0;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--muted-foreground);
}

.scan-checks { margin-top: 1rem; display: grid; gap: .5rem; }
.scan-check {
  display: flex; align-items: center; gap: .5rem;
  font-size: .875rem; color: var(--muted-foreground);
  opacity: .3; transition: opacity .3s ease, color .3s ease;
}
.scan-check.is-done { opacity: 1; color: var(--foreground); }
.scan-check i {
  display: flex; align-items: center; justify-content: center;
  width: 1.25rem; height: 1.25rem; border-radius: var(--radius-full);
  background: var(--secondary); color: var(--muted-foreground);
  transition: background-color .3s ease, color .3s ease;
}
.scan-check i svg { width: .75rem; height: .75rem; }
.scan-check.is-done i { background: var(--green); color: var(--green-foreground); }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.chat {
  margin-top: 1rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  max-height: 0;
  opacity: 0;
  border-color: transparent;
  transition: max-height .5s ease, opacity .5s ease, border-color .5s ease;
}
.chat.is-open { max-height: 30rem; opacity: 1; border-color: var(--border); }

.chat-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem;
  background: var(--primary);
  border-bottom: 1px solid var(--border);
  padding: .75rem 1rem;
}
.chat-head-id { display: flex; align-items: center; gap: .5rem; }
.chat-avatar {
  display: flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; border-radius: var(--radius-sm);
  background: rgba(250,252,255,.15); color: var(--primary-foreground);
}
.chat-avatar svg { width: 1rem; height: 1rem; }
.chat-title { font-size: .875rem; font-weight: 600; color: var(--primary-foreground); line-height: 1.3; }
.chat-status {
  display: flex; align-items: center; gap: .375rem;
  font-size: .75rem; color: rgba(250,252,255,.7); line-height: 1.3;
}
.chat-status .dot { width: .5rem; height: .5rem; }
.chat-tag {
  border-radius: var(--radius-full);
  background: rgba(250,252,255,.12);
  padding: .25rem .625rem;
  font-size: .6875rem; font-weight: 500;
  color: var(--primary-foreground);
}

.chat-body {
  height: 13rem;
  overflow-y: auto;
  background: color-mix(in srgb, var(--secondary) 40%, var(--background));
  padding: 1rem;
  display: flex; flex-direction: column; gap: .75rem;
}
.msg { display: flex; }
.msg.is-user { justify-content: flex-end; }
.msg p {
  max-width: 80%;
  border-radius: var(--radius-xl);
  padding: .5rem .875rem;
  font-size: .875rem;
  line-height: 1.6;
}
.msg.is-ai p {
  border-bottom-left-radius: .25rem;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--card-foreground);
}
.msg.is-user p {
  border-bottom-right-radius: .25rem;
  background: var(--primary);
  color: var(--primary-foreground);
}

.chat-form {
  display: flex; align-items: center; gap: .5rem;
  border-top: 1px solid var(--border);
  background: var(--card);
  padding: .75rem;
}
.chat-form input {
  height: 2.5rem; flex: 1;
  border: 1px solid var(--input); background: var(--secondary);
  border-radius: var(--radius-md); padding-inline: .75rem;
  font-size: .875rem; outline: none;
}
.chat-form .btn-icon { height: 2.5rem; width: 2.5rem; }

/* --------------------------------------------------------------------------
   11. FLOW DIAGRAM  (ported from components/personalized-ai.tsx)
   -------------------------------------------------------------------------- */
.flow {
  margin-top: 3.5rem;
  display: flex; flex-direction: column;
  align-items: stretch; gap: .5rem;
}
@media (min-width: 1024px) {
  .flow { flex-direction: row; align-items: stretch; justify-content: center; gap: 0; }
}
/* Mobile: node above, arrow below pointing down. Desktop: node then arrow
   side by side, so the chain reads left to right as one line. */
.flow-item { display: flex; flex-direction: column; align-items: stretch; gap: .5rem; }
@media (min-width: 1024px) { .flow-item { flex-direction: row; align-items: center; gap: 0; } }

.flow-node {
  display: flex; flex: 1; align-items: center; gap: .75rem;
  border: 1px solid var(--border); background: var(--card);
  border-radius: var(--radius-xl);
  padding: 1rem;
}
@media (min-width: 1024px) {
  .flow-node { width: 9.5rem; flex: 0 0 9.5rem; flex-direction: column; text-align: center; justify-content: center; min-height: 8.5rem; }
}
.flow-node span:last-child { font-size: .875rem; font-weight: 600; }
.flow-node i {
  display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--secondary); color: var(--foreground);
}
.flow-node i svg { width: 1.25rem; height: 1.25rem; }
.flow-node.is-brand { border-color: rgba(0,52,108,.28); background: var(--brand-soft); }
.flow-node.is-brand i { background: var(--primary); color: var(--primary-foreground); }
.flow-node.is-green { border-color: rgba(19,125,65,.45); background: var(--green-soft); }
.flow-node.is-green i { background: var(--green); color: var(--green-foreground); }

.flow-arrow {
  display: flex; align-items: center; justify-content: center;
  color: var(--muted-foreground); flex-shrink: 0;
  transform: rotate(90deg);       /* points down between stacked nodes */
}
.flow-arrow svg { width: 1.125rem; height: 1.125rem; }
@media (min-width: 1024px) {
  .flow-arrow { transform: none; padding-inline: .5rem; }
}

/* --------------------------------------------------------------------------
   12. NUMBERED STEPS  (ported from components/simple-process.tsx)
   -------------------------------------------------------------------------- */
.steps {
  margin-top: 3rem;
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(250,252,255,.15);
  background: rgba(250,252,255,.15);
  border-radius: var(--radius-2xl);
}
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { background: var(--primary); padding: 2rem; }
.step-index { font-family: var(--font-display); font-size: 2.25rem; font-weight: 800; color: var(--green-bright); line-height: 1; }
.step h3 { margin-top: 1rem; color: var(--primary-foreground); }
.step p  { margin-top: .5rem; color: rgba(250,252,255,.72); }

/* On a light section, steps invert. */
.steps.is-light { border-color: var(--border); background: var(--border); }
.steps.is-light .step { background: var(--card); }
.steps.is-light .step h3 { color: var(--foreground); }
.steps.is-light .step p  { color: var(--muted-foreground); }
.steps.is-light .step-index { color: var(--primary); }

/* --------------------------------------------------------------------------
   13. LEAD CAPTURE PANEL  (ported from components/lead-generation.tsx)
   -------------------------------------------------------------------------- */
.lead-card { border: 1px solid rgba(19,125,65,.35); background: color-mix(in srgb, var(--green-soft) 60%, var(--background)); border-radius: var(--radius-xl); padding: 1rem; margin-top: 1.25rem; }
.lead-card-head { display: flex; align-items: center; gap: .5rem; }
.lead-card-head svg { width: 1.25rem; height: 1.25rem; color: var(--green-text); }
.lead-card-head span { font-family: var(--font-display); font-size: .875rem; font-weight: 800; }
.lead-rows { margin-top: 1rem; display: grid; gap: .625rem; }
.lead-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.lead-row dt { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--muted-foreground); }
.lead-row dt svg { width: 1rem; height: 1rem; }
.lead-row dd { font-size: .875rem; font-weight: 500; }
.lead-row.is-last { border-top: 1px solid rgba(19,125,65,.25); padding-top: .75rem; }

/* --------------------------------------------------------------------------
   14. PRICING
   -------------------------------------------------------------------------- */
.cur-toggle {
  display: inline-flex; gap: .25rem; margin-top: 1.25rem;
  padding: .25rem; border-radius: var(--radius-full);
  border: 1px solid var(--border); background: var(--secondary);
}
.cur-btn {
  border-radius: var(--radius-full);
  padding: .4rem 1.125rem;
  font-size: .8125rem; font-weight: 600;
  color: var(--muted-foreground);
  transition: background-color .18s ease, color .18s ease;
}
.cur-btn[aria-pressed="true"] { background: var(--primary); color: var(--primary-foreground); }

.pricing-grid {
  margin-top: 3rem;
  display: grid; gap: 1.25rem;
  align-items: stretch;
}
@media (min-width: 900px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); } }

.plan {
  position: relative;
  display: flex; flex-direction: column;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: var(--radius-2xl);
  padding: 1.75rem;
}
.plan.is-featured {
  border: 2px solid var(--primary);
  box-shadow: var(--shadow-xl);
}
.plan.is-dark { background: var(--primary); border-color: var(--primary); }
.plan.is-dark h3, .plan.is-dark .plan-price { color: var(--primary-foreground); }
.plan.is-dark .plan-tagline, .plan.is-dark .plan-alt { color: rgba(250,252,255,.7); }
.plan.is-dark .plan-meta { color: var(--primary-foreground); }
.plan.is-dark .plan-list svg { color: var(--green-bright); }
.plan.is-dark .plan-list li { color: rgba(250,252,255,.88); }
.plan.is-dark hr { border-color: rgba(250,252,255,.18); }

.plan-flag {
  position: absolute; top: -.75rem; right: 1.5rem;
  border-radius: var(--radius-full);
  background: var(--green); color: var(--green-foreground);
  padding: .25rem .75rem;
  font-size: .6875rem; font-weight: 700; letter-spacing: .04em;
}
.plan-kicker {
  font-size: .6875rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted-foreground);
}
.plan.is-dark .plan-kicker { color: rgba(250,252,255,.6); }
.plan h3 { margin-top: .5rem; font-size: 1.375rem; }
.plan-price {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: 2.5rem; font-weight: 800; letter-spacing: -0.04em;
  line-height: 1; color: var(--foreground);
}
.plan-price .unit { font-size: 1rem; font-weight: 600; color: var(--muted-foreground); letter-spacing: 0; }
.plan.is-featured .plan-price { color: var(--primary); }
.plan-alt { margin-top: .5rem; font-size: .875rem; color: var(--muted-foreground); }
.plan-alt .save { color: var(--green-text); font-weight: 700; }
.plan-meta { margin-top: .75rem; font-size: .875rem; font-weight: 600; color: var(--foreground); }
.plan-tagline { margin-top: .25rem; font-size: .875rem; color: var(--muted-foreground); }
.plan hr { margin-block: 1.25rem; border: 0; border-top: 1px solid var(--border); }
.plan-list { display: grid; gap: .625rem; flex: 1; }
.plan-list li { display: flex; align-items: flex-start; gap: .5rem; font-size: .875rem; line-height: 1.55; }
.plan-list svg { width: 1rem; height: 1rem; margin-top: .2rem; color: var(--green-text); flex-shrink: 0; }
.plan-list li.is-note {
  display: block;                 /* not flex: it has no icon, and flex would
                                     break its inline text into columns */
  color: var(--muted-foreground); font-size: .8125rem;
  border-top: 1px solid var(--border); padding-top: .75rem; margin-top: .25rem;
}
.plan .btn { margin-top: 1.5rem; }

.pricing-note {
  margin-top: 2rem; text-align: center;
  font-size: .875rem; color: var(--muted-foreground);
}
.pricing-note a { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Comparison table */
.compare-wrap { margin-top: 3rem; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-2xl); }
table.compare { width: 100%; border-collapse: collapse; font-size: .875rem; min-width: 34rem; }
table.compare th, table.compare td { padding: .875rem 1.25rem; text-align: left; border-bottom: 1px solid var(--border); }
table.compare thead th { background: var(--secondary); font-family: var(--font-display); font-weight: 700; }
table.compare tbody tr:last-child th, table.compare tbody tr:last-child td { border-bottom: 0; }
table.compare tbody th { font-weight: 500; color: var(--muted-foreground); }
table.compare td { text-align: center; font-weight: 600; }
table.compare td svg { width: 1.125rem; height: 1.125rem; color: var(--green-text); margin-inline: auto; }
table.compare td .no { color: var(--muted-foreground); font-weight: 400; }

/* --------------------------------------------------------------------------
   15. FAQ ACCORDION
   -------------------------------------------------------------------------- */
.faq { margin-top: 3rem; display: grid; gap: .75rem; }
.faq-item {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.faq-item[open] { border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; padding: 1.125rem 1.375rem;
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 700; text-align: left;
  cursor: pointer; list-style: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q svg { width: 1.25rem; height: 1.25rem; color: var(--muted-foreground); transition: transform .22s ease; }
.faq-item[open] .faq-q svg { transform: rotate(180deg); }
.faq-a { padding: 0 1.375rem 1.375rem; color: var(--muted-foreground); line-height: 1.7; }

/* --------------------------------------------------------------------------
   16. CTA BAND
   -------------------------------------------------------------------------- */
.cta { border-top: 1px solid var(--border); background: color-mix(in srgb, var(--secondary) 55%, var(--background)); }
.cta-inner { max-width: 48rem; margin-inline: auto; padding-block: 5rem; text-align: center; }
@media (min-width: 1024px) { .cta-inner { padding-block: 7rem; } }
.cta-inner .lead { margin-top: 1rem; margin-inline: auto; max-width: 36rem; }
.cta-inner .btn-row { margin-top: 2rem; }
.cta-inner .note-line { margin-top: 1.25rem; }

/* --------------------------------------------------------------------------
   17. FORMS
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 1.125rem; }
.field { display: grid; gap: .4rem; }
.field label { font-size: .875rem; font-weight: 600; }
.field .hint { font-size: .8125rem; color: var(--muted-foreground); }
.field input, .field textarea, .field select {
  width: 100%;
  border: 1px solid var(--input);
  background: var(--background);
  border-radius: var(--radius-md);
  padding: .75rem .875rem;
  font-size: .9375rem;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field.has-error input, .field.has-error textarea { border-color: var(--destructive); }
.field .error { font-size: .8125rem; color: var(--destructive); font-weight: 500; }
.field-row { display: grid; gap: 1.125rem; }
@media (min-width: 640px) { .field-row { grid-template-columns: repeat(2, 1fr); } }
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.alert {
  display: flex; gap: .75rem; align-items: flex-start;
  border-radius: var(--radius-xl); padding: 1rem 1.125rem;
  font-size: .9375rem; line-height: 1.6;
  border: 1px solid;
}
.alert svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; margin-top: .1rem; }
.alert-ok    { border-color: rgba(19,125,65,.4); background: var(--green-soft); color: #14532d; }
.alert-error { border-color: rgba(231,0,11,.3); background: #fef2f2; color: #991b1b; }

/* --------------------------------------------------------------------------
   18. PAGE HEADER (interior pages)
   -------------------------------------------------------------------------- */
.page-head {
  position: relative;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--secondary) 45%, var(--background));
  overflow: hidden;
}
.page-head::before {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(55% 60% at 50% 0%, var(--brand-soft), transparent 72%);
}
.page-head .container { position: relative; z-index: 1; }
.page-head-inner { max-width: 44rem; padding-block: 3.5rem; }
.page-head-inner.is-center { margin-inline: auto; text-align: center; }
@media (min-width: 1024px) { .page-head-inner { padding-block: 4.5rem; } }
.page-head h1 { margin-top: 1rem; }
.page-head .lead { margin-top: 1rem; }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .8125rem; color: var(--muted-foreground); }
.crumbs a:hover { color: var(--foreground); text-decoration: underline; }
.crumbs svg { width: .875rem; height: .875rem; }

/* --------------------------------------------------------------------------
   19. PROSE (legal + blog body copy)
   -------------------------------------------------------------------------- */
.prose { max-width: 46rem; font-size: 1rem; line-height: 1.75; color: var(--foreground); }
.prose > * + * { margin-top: 1.125rem; }
.prose h2 { margin-top: 2.75rem; font-size: 1.5rem; }
.prose h3 { margin-top: 2rem; font-size: 1.1875rem; }
.prose p, .prose li { color: color-mix(in srgb, var(--foreground) 85%, var(--muted-foreground)); }
.prose ul, .prose ol { padding-left: 1.25rem; display: grid; gap: .5rem; }
.prose ul li { list-style: disc; }
.prose ol li { list-style: decimal; }
.prose a { color: var(--primary); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.prose strong { font-weight: 700; color: var(--foreground); }
/* Inline commands appear on the home page too, not only in blog prose. */
.prose code, .card code, .faq-a code {
  background: var(--secondary); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .1rem .35rem;
  font-size: .875em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.prose pre {
  max-width: 100%;
  background: var(--primary); color: var(--primary-foreground);
  border-radius: var(--radius-xl); padding: 1.125rem 1.25rem;
  overflow-x: auto; font-size: .8125rem; line-height: 1.7;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.prose pre code { background: none; border: 0; padding: 0; color: inherit; }
.prose blockquote {
  border-left: 3px solid var(--primary);
  background: var(--secondary);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 1rem 1.25rem; color: var(--muted-foreground);
}
.prose hr { border: 0; border-top: 1px solid var(--border); margin-block: 2.5rem; }
.prose table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
/* Wide legal tables scroll inside themselves rather than widening the page. */
.prose { overflow-wrap: break-word; }
.prose table { display: block; overflow-x: auto; }
@media (min-width: 640px) { .prose table { display: table; } }
.prose th, .prose td { border: 1px solid var(--border); padding: .625rem .875rem; text-align: left; }
.prose th { background: var(--secondary); font-weight: 700; }

.toc {
  border: 1px solid var(--border); background: var(--secondary);
  border-radius: var(--radius-xl); padding: 1.25rem 1.5rem;
}
.toc h2 { margin: 0 0 .625rem; font-size: .875rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted-foreground); }
.toc ol { display: grid; gap: .4rem; padding-left: 1.125rem; }
.toc a { color: var(--primary); font-size: .9375rem; }

/* --------------------------------------------------------------------------
   20. BLOG
   -------------------------------------------------------------------------- */
.post-grid { margin-top: 3rem; display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }
.post-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--border); background: var(--card);
  border-radius: var(--radius-2xl); padding: 1.5rem;
  transition: box-shadow .22s ease, transform .22s ease;
}
.post-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.post-card { padding: 1rem; }
/* Card thumbnail. aspect-ratio matches the real 1200x630 file, so the row
   holds its height before the PNG lands instead of shifting the grid. */
.post-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1200 / 630;
  height: auto;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--muted);
  margin-bottom: 1rem;
}
.post-card .badge { align-self: flex-start; }
.post-card h3 { margin-top: .875rem; font-size: 1.125rem; }
.post-card p { margin-top: .5rem; font-size: .9375rem; color: var(--muted-foreground); flex: 1; }
.post-meta { margin-top: 1rem; display: flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--muted-foreground); }
.post-more { margin-top: 1rem; display: inline-flex; align-items: center; gap: .375rem; font-size: .875rem; font-weight: 600; color: var(--primary); }
.post-more svg { width: 1rem; height: 1rem; transition: transform .18s ease; }
.post-card:hover .post-more svg { transform: translateX(3px); }

.empty-state {
  border: 1px dashed var(--border); border-radius: var(--radius-2xl);
  padding: 3rem 1.5rem; text-align: center; color: var(--muted-foreground);
  grid-column: 1 / -1;
}

/* --------------------------------------------------------------------------
   21. USE CASES
   -------------------------------------------------------------------------- */
.usecase {
  display: flex; flex-direction: column; gap: 1rem;
  border: 1px solid var(--border); background: var(--card);
  border-radius: var(--radius-2xl); padding: 1.75rem;
  transition: box-shadow .22s ease, transform .22s ease;
}
.usecase:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.usecase-qs { display: grid; gap: .5rem; margin-top: .25rem; }
.usecase-qs li {
  display: flex; gap: .5rem; align-items: flex-start;
  font-size: .875rem; color: var(--muted-foreground); line-height: 1.55;
}
.usecase-qs svg { width: .9375rem; height: .9375rem; margin-top: .25rem; color: var(--primary); flex-shrink: 0; }

/* --------------------------------------------------------------------------
   22. STAT STRIP
   -------------------------------------------------------------------------- */
.stats { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-2xl); overflow: hidden; }
@media (min-width: 640px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--card); padding: 1.75rem 1.5rem; text-align: center; }
.stat b { display: block; font-family: var(--font-display); font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; color: var(--primary); line-height: 1.1; }
.stat span { display: block; margin-top: .375rem; font-size: .875rem; color: var(--muted-foreground); }

/* --------------------------------------------------------------------------
   23. CODE SNIPPET BLOCK (install)
   -------------------------------------------------------------------------- */
.snippet { position: relative; }
.snippet { max-width: 100%; }
.snippet pre {
  background: var(--primary); color: var(--primary-foreground);
  border-radius: var(--radius-xl); padding: 1.25rem 1.25rem;
  overflow-x: auto; font-size: .8125rem; line-height: 1.7;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  margin: 0;
  max-width: 100%;
  /* The copy button sits top-right; keep the code clear of it. */
  padding-right: 5rem;
}
.snippet .copy-btn {
  position: absolute; top: .75rem; right: .75rem;
  border-radius: var(--radius-md);
  background: rgba(250,252,255,.14); color: var(--primary-foreground);
  padding: .375rem .75rem; font-size: .75rem; font-weight: 600;
  transition: background-color .18s ease;
}
.snippet .copy-btn:hover { background: rgba(250,252,255,.24); }

.platform-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.platform-chip {
  border: 1px solid var(--border); background: var(--secondary);
  border-radius: var(--radius-full); padding: .35rem .875rem;
  font-size: .8125rem; font-weight: 500; color: var(--muted-foreground);
}

/* --------------------------------------------------------------------------
   24. FOOTER
   -------------------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--border); background: var(--background); }
.footer-grid {
  display: grid; gap: 2.5rem;
  padding-block: 3.5rem;
}
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; } }
.footer-brand p { margin-top: 1rem; max-width: 24rem; font-size: .875rem; line-height: 1.7; color: var(--muted-foreground); }
.footer-brand .note-line { margin-top: 1rem; }
.footer-col h4 { font-family: var(--font-display); font-size: .8125rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--foreground); }
.footer-col ul { margin-top: 1rem; display: grid; gap: .625rem; }
.footer-col a { font-size: .875rem; color: var(--muted-foreground); transition: color .18s ease; }
.footer-col a:hover { color: var(--foreground); }
.footer-bottom {
  display: flex; flex-direction: column; gap: .75rem;
  align-items: center; justify-content: space-between;
  border-top: 1px solid var(--border);
  padding-block: 1.5rem;
  font-size: .8125rem; color: var(--muted-foreground);
}
@media (min-width: 640px) { .footer-bottom { flex-direction: row; } }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: center; }

/* --------------------------------------------------------------------------
   25. 404
   -------------------------------------------------------------------------- */
.error-page { display: grid; place-items: center; text-align: center; padding-block: 6rem; }
.error-code {
  font-family: var(--font-display); font-size: clamp(4rem, 12vw, 7rem);
  font-weight: 800; letter-spacing: -0.05em; line-height: 1;
  color: var(--brand-soft);
}

/* --------------------------------------------------------------------------
   26. UTILITIES
   -------------------------------------------------------------------------- */
.mt-0  { margin-top: 0 !important; }
.mt-2  { margin-top: .5rem; }
.mt-4  { margin-top: 1rem; }
.mt-6  { margin-top: 1.5rem; }
.mt-8  { margin-top: 2rem; }
.mt-12 { margin-top: 3rem; }
.mx-auto { margin-inline: auto; }
.hide-sm { display: none; }
@media (min-width: 640px) { .hide-sm { display: initial; } }

/* Print — legal pages get printed and filed. */
@media print {
  .site-header, .site-footer, .cta, .btn, .nav-toggle, .mobile-nav { display: none !important; }
  body { color: #000; }
  .prose a::after { content: " (" attr(href) ")"; font-size: .75em; color: #555; }
}