/* utility.css: the not-found page and the two legal documents (R5, 2026 rebrand).
   Loaded by /404.html, /legal/privacy.html and /legal/terms.html only, after
   core.css. These are plain text pages, not Console pages, so they take the
   concept's generic text components that core.css leaves out, re-imported
   verbatim from design/rebrand-2026/concept/assets/site.css: the type (lines
   69-71 and 73-76: .eyebrow .bit .display .h3 .lede .prose), .ctas (91), the
   hero (193-198) and its text-only variant from the 1024px block (210, 212 and
   213, re-wrapped in their own @media). The .legal block at the end is this
   file's own. The reduced-motion and phone rules come from core.css.
   Website/ is the source from here on (PLAN.md A16). */
/* ---------- type ---------- */
.eyebrow{display:flex;align-items:center;gap:10px;font:500 11.5px/1.35 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.eyebrow .bit,.bit{flex:none;width:7px;height:7px;background:var(--forge)}
.display{font-size:clamp(40px, 9.6vw, 84px);font-weight:560;line-height:1;letter-spacing:-.042em;color:var(--fg);text-wrap:balance}
.h3{font-size:clamp(21px, 2.2vw, 25px);font-weight:600;line-height:1.2;letter-spacing:-.02em;color:var(--fg)}
.lede{font-size:clamp(17px, 1.6vw, 20px);line-height:1.55;color:var(--fg-2);max-width:38em;text-wrap:pretty}
.prose{display:grid;gap:14px;color:var(--fg-2);font-size:16.5px;line-height:1.65;max-width:40em}
.prose b,.prose strong{color:var(--fg);font-weight:600}
.ctas{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;left:50%;top:-180px;width:min(1100px,170vw);height:560px;transform:translateX(-50%);background:radial-gradient(50% 50% at 50% 50%,rgba(58,102,255,.20) 0%,rgba(58,102,255,0) 70%);pointer-events:none}
.hero__in{position:relative;display:grid;gap:30px;padding-top:26px;padding-bottom:clamp(56px, 8vw, 96px)}
.hero__copy{display:grid;gap:18px;align-content:start}
.hero__copy .display{margin-top:4px}
.hero__copy .ctas{margin-top:8px}
@media (min-width:1024px){
  .hero__in{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:48px;padding-top:40px}
  .hero--text .hero__in{grid-template-columns:minmax(0,1fr)}
  .hero--text .hero__copy{max-width:820px}
}
/* Not the concept's: a text hero is shorter than the 560px glow, so .hero's
   overflow cut it off in a hard line on phones. Sized to the hero, it fades out
   before the bottom edge at every width. */
.hero--text::before{height:calc(100% + 180px)}

/* ---------- long-form legal documents ---------- */
/* core.css's reset sets ul{padding:0;list-style:none} for the menus and the
   footer, so the legal lists must put their discs back here, or every clause
   list in both documents flattens into unmarked lines. */
.legal{padding-bottom:clamp(72px, 11vw, 128px)}
.legal h2{margin-top:clamp(14px, 2.4vw, 26px)}
.legal ul{display:grid;gap:8px;padding-left:22px;list-style:disc}
.legal li::marker{color:var(--fg-3)}
.legal a{color:var(--fg);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.legal a:hover{text-decoration-color:var(--fg-3)}