/* ─── tw-compat.css — local Tailwind-utility shim ────────────────────────────
   Replaces the runtime https://cdn.tailwindcss.com dependency on about.html,
   contact.html, how-it-works.html, and results.html (plans.html already dropped
   the CDN as its "one third-party supply-chain surface"). These pages use only a
   tiny, fixed set of Tailwind utilities plus their own inline brand styles; this
   file provides exactly those utilities with Tailwind's default values, so the
   pages no longer depend on a third-party script that fails on a CDN outage (and
   warns "should not be used in production" in the console). Audit 2026-07-18, P3.

   If you add a NEW Tailwind utility class to any of these pages, add it here too.
   box-sizing + html/body margin reset already come from brand/components.css. */

/* ── preflight parity ──────────────────────────────────────────────────────
   Tailwind's base reset zeroed default margins on text blocks and stripped list
   markers; these pages space with explicit mb-* utilities + brand t-* type
   classes, so those browser defaults must stay off, and images stay responsive. */
blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; }
ol, ul, menu { list-style: none; margin: 0; padding: 0; }
img, svg, video, canvas { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: inherit; color: inherit; margin: 0; }

/* ── spacing ── */
.mb-1  { margin-bottom: 0.25rem; }
.mb-3  { margin-bottom: 0.75rem; }
.mb-4  { margin-bottom: 1rem; }
.mb-5  { margin-bottom: 1.25rem; }
.mb-6  { margin-bottom: 1.5rem; }
.mb-7  { margin-bottom: 1.75rem; }
.mb-8  { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ── layout ── */
.relative { position: relative; }
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.gap-12 { gap: 3rem; }
.gap-16 { gap: 4rem; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }

/* ── text ── */
.text-center { text-align: center; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }

/* ── max-width (arbitrary values used on these pages) ── */
.max-w-\[520px\]  { max-width: 520px; }
.max-w-\[680px\]  { max-width: 680px; }
.max-w-\[720px\]  { max-width: 720px; }
.max-w-\[960px\]  { max-width: 960px; }
.max-w-\[1040px\] { max-width: 1040px; }
.max-w-\[1240px\] { max-width: 1240px; }

/* ── responsive: lg = ≥1024px ── */
@media (min-width: 1024px) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── index.html additions (2026-07-22, Phase 5 PERF-01: drop the Play CDN) ─────
   index.html carried https://cdn.tailwindcss.com for this superset of utilities.
   Values are Tailwind defaults; md = 768px, lg = 1024px. index.html defines its
   OWN .container (max-width:var(--container); margin:0 auto) inline, so container
   is intentionally NOT listed here. If you add a new utility to index.html, add
   it here too. */
.absolute { position: absolute; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.hidden { display: none; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.w-full { width: 100%; }
.z-10 { z-index: 10; }
.min-h-\[calc\(100vh-68px\)\] { min-height: calc(100vh - 68px); }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-8  { padding-top: 2rem; padding-bottom: 2rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.max-w-\[860px\] { max-width: 860px; }
@media (min-width: 768px) {
  .md\:block { display: block; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .lg\:gap-16 { gap: 4rem; }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:justify-end { justify-content: flex-end; }
  .lg\:py-0  { padding-top: 0; padding-bottom: 0; }
  .lg\:py-24 { padding-top: 6rem; padding-bottom: 6rem; }
}