:root {
  color-scheme: dark;
  --ink: #fff3eb;
  --muted: var(--ink);
  --mauve: #f7e7db;
  --bg: #02000e;
  --bg-end: #030002;
  --line: rgb(139 104 127 / 30%);
  --blue: #041b9e;
  --link: var(--ink);
  --accent: #aa0028;
  --accent-text: #ff667a;
  font-family: ui-sans-serif, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { position: relative; isolation: isolate; margin: 0; background: linear-gradient(135deg, var(--bg), var(--bg-end)); background-attachment: fixed; color: var(--ink); line-height: 1.65; overflow-wrap: break-word; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .18;
  background:
    radial-gradient(circle at 7% 14%, var(--ink) 1px, transparent 2px),
    radial-gradient(circle at 23% 6%, var(--mauve) 1.5px, transparent 2.5px),
    radial-gradient(circle at 49% 18%, var(--ink) 1px, transparent 2px),
    radial-gradient(circle at 74% 8%, var(--mauve) 1px, transparent 2px),
    radial-gradient(circle at 91% 23%, var(--ink) 1.5px, transparent 2.5px),
    radial-gradient(circle at 15% 37%, var(--mauve) 1px, transparent 2px),
    radial-gradient(circle at 37% 29%, var(--ink) 1px, transparent 2px),
    radial-gradient(circle at 66% 39%, var(--mauve) 1.5px, transparent 2.5px),
    radial-gradient(circle at 85% 48%, var(--ink) 1px, transparent 2px),
    radial-gradient(circle at 4% 61%, var(--ink) 1px, transparent 2px),
    radial-gradient(circle at 28% 53%, var(--mauve) 1.5px, transparent 2.5px),
    radial-gradient(circle at 53% 66%, var(--ink) 1px, transparent 2px),
    radial-gradient(circle at 76% 73%, var(--mauve) 1px, transparent 2px),
    radial-gradient(circle at 96% 64%, var(--ink) 1px, transparent 2px),
    radial-gradient(circle at 12% 86%, var(--mauve) 1.5px, transparent 2.5px),
    radial-gradient(circle at 39% 93%, var(--ink) 1px, transparent 2px),
    radial-gradient(circle at 63% 88%, var(--mauve) 1px, transparent 2px),
    radial-gradient(circle at 89% 95%, var(--ink) 1.5px, transparent 2.5px),
    radial-gradient(circle at 43% 9%, var(--mauve) 1px, transparent 2px),
    radial-gradient(circle at 81% 30%, var(--ink) 1.5px, transparent 2.5px),
    radial-gradient(circle at 9% 45%, var(--mauve) 1px, transparent 2px),
    radial-gradient(circle at 58% 26%, var(--ink) 1px, transparent 2px),
    radial-gradient(circle at 33% 72%, var(--mauve) 1.5px, transparent 2.5px),
    radial-gradient(circle at 71% 55%, var(--ink) 1px, transparent 2px),
    radial-gradient(circle at 20% 96%, var(--mauve) 1px, transparent 2px),
    radial-gradient(circle at 48% 81%, var(--ink) 1.5px, transparent 2.5px),
    radial-gradient(circle at 95% 84%, var(--mauve) 1px, transparent 2px);
  background-repeat: repeat-y;
  background-size: 100% 100%;
  background-position: 0 var(--dot-offset, 0px);
}
a { color: var(--link); text-underline-offset: .25em; }
a:hover { color: var(--ink); }
.skip-link { position: absolute; left: 1rem; top: -5rem; padding: .6rem 1rem; background: var(--accent); color: var(--ink); z-index: 2; }
.skip-link:focus { top: 1rem; }
.skip-link:hover { color: var(--ink); }
.shell { width: min(100% - 2rem, 68rem); margin: auto; }
header { padding: 1.5rem 0; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--ink); text-decoration: none; font-weight: 750; letter-spacing: -.02em; }
.brand-mark { color: var(--accent); font-size: 1.5rem; }
.nav-links { display: flex; flex-wrap: wrap; gap: 1.5rem; }
main { padding: clamp(3rem, 7vw, 6rem) 0 5rem; }
.eyebrow { color: var(--accent-text); letter-spacing: .08em; font-size: .8rem; font-weight: 700; text-transform: uppercase; text-decoration: none; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -.035em; }
h1 { max-width: 13ch; margin: .75rem 0 1.5rem; font-size: clamp(2.65rem, 7.5vw, 6rem); }
h2 { margin: 0 0 1.75rem; font-size: clamp(1.8rem, 3.5vw, 2.6rem); color: var(--mauve); }
h3 { margin: 0; font-size: 1.3rem; }
.lead { max-width: 42rem; color: var(--muted); font-size: clamp(1.1rem, 2.3vw, 1.35rem); }
.buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin: 2rem 0; }
.button { display: inline-block; padding: .75rem 1.1rem; background: var(--blue); color: var(--ink); font-weight: 700; text-decoration: none; box-shadow: inset 0 0 0 1px var(--muted); }
.button:hover { color: var(--ink); text-decoration: underline; }
.button.secondary { padding: .75rem 0; color: var(--link); background: transparent; text-decoration: underline; box-shadow: none; }
.button.secondary:hover { color: var(--ink); }
section { margin-top: 4rem; padding-top: 2.5rem; border-top: 1px solid var(--line); }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
.card p, .section-intro { color: var(--muted); }
.section-intro { max-width: 38rem; margin: -1rem 0 1.5rem; }
.faq-grid, .faq-list { border-bottom: 1px solid var(--line); }
.faq-item { border-top: 1px solid var(--line); }
.faq-item summary { padding: 1.2rem 0; cursor: pointer; color: var(--ink); font-weight: 650; line-height: 1.45; }
.faq-item summary::marker { color: var(--ink); }
.faq-item p { max-width: 65ch; margin: 0; padding-bottom: 1.5rem; color: var(--muted); }
.prose { max-width: 48rem; }
.prose h2 { margin-top: 2.6rem; font-size: clamp(1.6rem, 4vw, 2rem); }
.prose h3 { margin-top: 2rem; font-size: 1.35rem; }
.prose li { margin: .5rem 0; }
footer { padding: 2rem 0; color: var(--muted); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
@media (max-width: 700px) { .nav { align-items: flex-start; flex-direction: column; } .grid { grid-template-columns: 1fr; gap: 1.5rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
@media (prefers-reduced-motion: reduce) { body::before { background-position: 0 0; } }