/* Snolo — the app's own face on the shared family skeleton (family.css v1.0.0).
   Stage colours = the apex Snolo stage. Aura + sheen come from the icon: the green payoff line,
   the white snowball, and the yellow accent. Light-mode aura3 is a pale snow-mint so no dark disc
   sits on the light page; the deeper green appears only under dark. */
:root {
  --g1:#0d0d0d; --g2:#2c2c1a; --acc:#f4d93c; --sfg:#ffffff;
  --aura1:#34c759; --aura2:#f4d93c; --aura3:#cdeedb;
  --sheen:linear-gradient(90deg,#1fa652,#12803c 30%,#d9b50f 55%,#1fa652 80%,#46cf74);
  --snow-ink:#6b5a00;  /* accent ink that reads on the light surface */
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --aura3:#1f7a43; --snow-ink:var(--acc);
  --sheen:linear-gradient(90deg,#34c759,#7be59b 30%,#f4d93c 55%,#34c759 80%,#b9f3cb) } }
:root[data-theme="dark"] { --aura3:#1f7a43; --snow-ink:var(--acc);
  --sheen:linear-gradient(90deg,#34c759,#7be59b 30%,#f4d93c 55%,#34c759 80%,#b9f3cb) }

/* --g2 is near-black olive, so the bits of the skeleton that paint with it on the page
   (not on a stage) would vanish under dark. They take the accent instead. */
.chip.dot::before { background:var(--acc); box-shadow:0 0 0 1px color-mix(in srgb, var(--snow-ink) 45%, transparent) }
.card .ico { background:color-mix(in srgb, var(--acc) 26%, var(--surface)); color:var(--snow-ink) }
.card .ico b { font:800 18px/1 var(--display) }
#trust .cards { grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)) }
#steps .cards { grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)) }

/* hero stat row */
.facts { display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:28px; padding:0; list-style:none; color:var(--muted); font-size:15px; font-weight:500 }
.facts b { display:block; font:800 28px/1 var(--display); letter-spacing:-.03em; color:var(--fg) }
@media (max-width:600px) { .facts { gap:8px 22px } .facts b { font-size:24px } }

/* footer: this app's own chip, unlinked */
footer .note { margin:0; font-size:13px }

/* closing call */
.cta { margin-top:clamp(56px,8vw,112px); padding-inline:clamp(8px,2vw,24px) }
.cta .stage { grid-template-columns:minmax(0,1fr); text-align:center; justify-items:center; padding-block:clamp(48px,7vw,96px) }
.cta .line { margin-inline:auto }
.cta .water { right:auto; left:50%; translate:-50% 0 }

/* legal pages: the old summary callout and sub-heads */
.legal-page .callout { border:1px solid color-mix(in srgb, var(--acc) 55%, var(--line)); background:color-mix(in srgb, var(--acc) 12%, var(--surface)); border-radius:18px; padding:16px 20px; margin:22px 0 }
.legal-page .callout p { margin:0; color:var(--fg) }
.legal-page h3 { font:700 17px/1.25 var(--display); margin:24px 0 8px }
.legal-page strong { color:var(--fg) }
.nw { white-space:nowrap }

/* Snolo's stage is near-black, so under dark it would melt into the page: give it a hairline edge */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stage { box-shadow:inset 0 0 0 1px rgb(255 255 255 / .08) } }
:root[data-theme="dark"] .stage { box-shadow:inset 0 0 0 1px rgb(255 255 255 / .08) }