@font-face{font-family:'Geist';src:url('/fonts/Geist-Variable.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap}
/* "Petrol & Brass" — see daliapps/docs/brand/house-identity-rollout.md. Maroon #500000 and the
   per-product coral #FF6A3D are RETIRED; do not restore them.

   Two layers, and the split matters:
     - BRAND CONSTANTS are fixed hexes; they never change with the colour scheme.
     - ROLE TOKENS are what every rule below references, and they are the only names the dark block
       overrides. It overrides VALUES only and introduces no new name, so a rule cannot silently
       reference a token that exists in one scheme and not the other.

   The old palette needed a SECOND accent value (--coral-ink) because raw coral was 2.66:1 on cream
   and could never carry words. Brass is a mid-tone precisely so it does not need that: it is 4.67:1
   on the canvas and 4.99:1 on --surface, so ONE accent serves both decoration and text. That is why
   --coral-ink has no successor here, and why the "the raw accent is never a text colour" guard in
   test/siteContrast.test.ts is gone rather than retargeted — see that file.

   Ratios are WCAG 2.x, pinned against black-on-white = 21.00, and match the values
   mobile/core/.../theme/BrandTokens.kt carries for the apps. */
:root{
  --petrol:#0e3a40;--petrol-lift:#5fb8c4;--brass:#9a6410;--brass-lift:#e0aa4e;
  --canvas:#f9f7f4;--canvas-2:#f1eeea;--surface:#fff;--ink:#1e1e24;--muted:#6d6a67;--line:#e2ded7;
  --heading:var(--petrol);--accent:var(--brass);--fill:var(--petrol);--fill-hover:#155a64;
  --on-fill:#fff;--mark-keyline:transparent;
  --shadow:0 12px 32px -18px rgba(30,30,36,.45);--shadow-lift:0 18px 44px -28px rgba(30,30,36,.5);
  --r-card:14px;--r-lg:20px;--r-pill:999px;--max:1120px;--gutter:clamp(20px,5vw,40px);
  --sec:clamp(64px,9vw,128px);color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{
  --canvas:#10171a;--canvas-2:#161f23;--surface:#162024;--ink:#eaf0f1;--muted:#9aa8ab;--line:#2a3b41;
  /* The inversion: petrol as a filled button on #10171A is 1.46:1, i.e. invisible. */
  --heading:var(--petrol-lift);--accent:var(--brass-lift);--fill:var(--petrol-lift);
  --fill-hover:#8ed2dc;--on-fill:#10171a;--shadow:0 12px 32px -18px rgba(0,0,0,.85);
  --shadow-lift:0 18px 44px -28px rgba(0,0,0,.9);
  /* The mark carries its own petrol field — 11.57:1 on cream but 1.34:1 on the dark surface, where
     the tile vanishes and the glyph appears to float. A hairline puts the edge back. */
  --mark-keyline:#4a6b73}}
*,*::before,*::after{box-sizing:border-box}*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  background:var(--canvas);color:var(--ink);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-synthesis-weight:none}
a{color:inherit}
/* padding-INLINE, not the `padding` shorthand: .wrap sits on the same element as <section>, and a
   class shorthand would beat `section{padding-bottom}` below and silently zero every section gap. */
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.wrap-narrow{max-width:780px}
[id]{scroll-margin-top:96px}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
svg.mark{display:block;border-radius:22%;outline:1px solid var(--mark-keyline);outline-offset:-1px}

/* nav */
.nav-outer{position:sticky;top:0;z-index:20;padding:12px var(--gutter)}
.nav{max-width:var(--max);margin:0 auto;display:flex;align-items:center;gap:16px;
  padding:8px 10px 8px 14px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface)}
.nav-brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;letter-spacing:-.02em}
.nav-brand svg.mark{width:26px;height:26px}
.nav-links{display:flex;gap:4px;margin-left:auto}
.nav-links a{padding:6px 12px;border-radius:var(--r-pill);text-decoration:none;font-size:15px;color:var(--muted);
  transition:color .15s ease,background-color .15s ease}
.nav-links a:hover{color:var(--ink);background:var(--canvas-2)}
.nav-cta{padding:9px 18px;border-radius:var(--r-pill);background:var(--fill);color:var(--on-fill);text-decoration:none;
  font-size:15px;font-weight:550;white-space:nowrap;transition:background-color .15s ease}
.nav-cta:hover{background:var(--fill-hover)}
@media (max-width:720px){.nav-links{display:none}.nav-cta{margin-left:auto}}

/* hero */
.hero{padding-block:clamp(48px,8vw,104px) var(--sec)}
.hero h1{color:var(--heading);font-size:clamp(38px,7.2vw,88px);line-height:.98;letter-spacing:-.04em;font-weight:600;
  max-width:15ch;margin-top:18px;text-wrap:balance}
.hero .lead{margin-top:24px;max-width:56ch;font-size:clamp(18px,1.6vw,21px);line-height:1.5;
  letter-spacing:-.01em;color:var(--muted)}
.hero .lead strong{color:var(--ink);font-weight:550}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 24px;border-radius:var(--r-pill);
  text-decoration:none;font-size:16px;font-weight:550;letter-spacing:-.01em;border:1px solid transparent;
  transition:background-color .15s ease,border-color .15s ease}
.btn-primary{background:var(--fill);color:var(--on-fill)}
.btn-primary:hover{background:var(--fill-hover)}
.btn-secondary{background:var(--surface);border-color:var(--line);color:var(--ink)}
.btn-secondary:hover{border-color:var(--ink)}
.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:var(--r-pill);
  background:var(--canvas-2);color:var(--muted);font-size:13px;font-weight:550}
.pill::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--accent)}

/* the hero stage: the app mark on a card, standing in for the screenshots we can't ship pre-launch.
   (daliapps.dev fans two product cards; with a single product a tilt reads as crooked, not playful.) */
.stage{margin-top:clamp(48px,7vw,88px);display:flex;justify-content:center}
.stage-card{flex:0 1 300px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,3vw,34px);text-align:center;box-shadow:var(--shadow-lift)}
.stage-card svg.mark{width:clamp(72px,9vw,96px);height:auto;margin:0 auto}
.stage-card .name{margin-top:16px;font-weight:600;letter-spacing:-.02em}
.stage-card .kind{font-size:14px;color:var(--muted)}

/* sections */
section{padding-bottom:var(--sec)}
h2{color:var(--heading);font-size:clamp(28px,3.6vw,46px);line-height:1.05;letter-spacing:-.03em;font-weight:600;text-wrap:balance}
.section-head{margin-bottom:clamp(28px,4vw,48px)}
.section-head h2{margin-top:12px}
.section-head p{margin-top:14px;max-width:54ch;color:var(--muted);font-size:clamp(17px,1.4vw,19px)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(22px,2.6vw,30px);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.card:hover{transform:translateY(-3px);border-color:var(--heading);box-shadow:var(--shadow)}
.card h3{color:var(--heading);font-size:20px;line-height:1.15;letter-spacing:-.025em;font-weight:600}
.card p{margin-top:8px;color:var(--muted);font-size:15px}
/* .num is not decorative — it renders the pricing tier labels (FREE / ONE-TIME / MONTHLY) and the
   step numbers, at 12px. It was coral at 2.85:1. */
.card .num{font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--accent)}
.prose-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,56px)}
.prose-cols p{color:var(--muted)}
.prose-cols p+p{margin-top:16px}
.statement{max-width:24ch}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(8px,1vw,12px) clamp(20px,3vw,32px)}
dl.facts{display:grid;grid-template-columns:15rem 1fr}
dl.facts dt,dl.facts dd{padding:16px 0;border-top:1px solid var(--line)}
dl.facts dt:first-of-type,dl.facts dt:first-of-type+dd{border-top:0}
dl.facts dt{color:var(--muted);font-size:15px}
dl.facts a{color:var(--accent);text-decoration:none}
dl.facts a:hover{text-decoration:underline}
address{font-style:normal}

/* footer */
footer{border-top:1px solid var(--line);background:var(--canvas-2)}
.footer-main{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(24px,4vw,48px);
  padding:clamp(48px,6vw,72px) 0 clamp(32px,4vw,48px)}
.footer-brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.02em}
.footer-brand svg.mark{width:26px;height:26px}
.footer-tagline{margin-top:14px;color:var(--muted);font-size:15px;max-width:34ch}
.footer-col h4{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.footer-col ul{list-style:none;margin-top:14px}
.footer-col li+li{margin-top:8px}
.footer-col a{text-decoration:none;font-size:15px;color:var(--ink);transition:color .15s ease}
.footer-col a:hover{color:var(--heading)}
.footer-bottom{border-top:1px solid var(--line);padding:24px 0 40px;color:var(--muted);font-size:13px}
.footer-bottom-flush{border-top:0}
.footer-bottom p+p{margin-top:6px}

/* 404 */
.center-page{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding-block:clamp(40px,6vw,72px) var(--sec)}
.center-page svg.mark{width:64px;height:64px;margin-bottom:26px}
.center-page .code{color:var(--heading);font-size:clamp(56px,12vw,96px);line-height:1;letter-spacing:-.05em;font-weight:600}
.center-page h1{margin-top:6px;color:var(--heading);font-size:clamp(20px,2.4vw,26px);letter-spacing:-.02em;font-weight:600}
.center-page p{margin-top:12px;color:var(--muted);max-width:44ch}
.center-page .cta-row{justify-content:center}

/* legal documents */
.doc{padding-block:clamp(40px,6vw,72px) var(--sec)}
.back{display:inline-block;text-decoration:none;color:var(--muted);font-size:15px;margin-bottom:28px;
  transition:color .15s ease}
.back:hover{color:var(--ink)}
.doc h1{color:var(--heading);font-size:clamp(34px,5vw,60px);line-height:1.02;letter-spacing:-.035em;font-weight:600}
.doc .date{margin-top:16px;color:var(--muted)}
.doc h2{font-size:clamp(21px,2.2vw,27px);margin-top:clamp(40px,5vw,56px)}
.doc p{margin-top:14px;color:var(--muted);max-width:68ch}
.doc p strong{color:var(--ink);font-weight:550}
.doc a{color:var(--accent)}
.doc ul{margin-top:14px;padding-left:1.15em;color:var(--muted)}
.doc li+li{margin-top:8px}

@media (max-width:900px){
  .grid{grid-template-columns:1fr 1fr}
  .prose-cols{grid-template-columns:1fr}
  .prose-cols div+div{margin-top:16px}
  .footer-main{grid-template-columns:1fr 1fr}
  .footer-brand-col{grid-column:1/-1}}
@media (max-width:640px){
  body{font-size:16px}
  .grid{grid-template-columns:1fr}
  dl.facts{grid-template-columns:1fr}
  dl.facts dt{padding:14px 0 0}
  dl.facts dd{padding:0 0 14px;border-top:0}
  dl.facts dt:first-of-type+dd{border-top:0}
  .stage{flex-direction:column;align-items:center}
  .stage-card:first-child,.stage-card:last-child{transform:none}
  .stage-card{flex:0 0 auto;width:100%;max-width:320px}
  .footer-main{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important}
  .stage-card{transform:none !important}}