:root { --bg:#F5F9FF; --panel:#FFFFFF; --text:#13233A; --muted:#506079; --accent:#1F6FEB; --accent2:#12A37A; --line:#D6E2F2; }
@media (prefers-color-scheme: dark) { :root { --bg:#0B1626; --panel:#13233A; --text:#E8F0FA; --muted:#A3B4CA; --accent:#6EA8FF; --accent2:#4FD1A5; --line:#29405F; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
main { max-width: 760px; margin: 0 auto; }
.eyebrow { color:var(--accent2); font-size:.8rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; margin-top:12px; }
h1 { font-size:2.1rem; line-height:1.2; margin:.2em 0 .2em; }
h2 { font-size:1.2rem; margin:1.8em 0 .4em; }
.muted { color:var(--muted); }
.card { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px 18px; margin:18px 0; }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:12px; margin:18px 0; }
.grid .card { margin:0; }
.card strong { display:block; margin-bottom:2px; }
.badge { display:inline-block; background:var(--accent); color:#fff; border-radius:999px; padding:3px 12px; font-size:.85rem; font-weight:600; }
a { color:var(--accent); }
ul { padding-left:1.2em; }
footer { margin-top:40px; padding-top:16px; border-top:1px solid var(--line); font-size:.9rem; color:var(--muted); }
footer a { margin-right:14px; }
.back { display:inline-block; margin-bottom:8px; }
.cta { display:inline-block; background:var(--accent); color:#fff; font-weight:700; text-decoration:none; border-radius:12px; padding:12px 20px; }
.cta:hover { filter:brightness(1.08); }
.grid.units a.card { text-decoration:none; color:inherit; display:block; }
.grid.units a.card:hover, .grid.units a.card:focus-visible { border-color:var(--accent); }
.grid.units .muted { font-size:.9rem; }

/* ================= Landing (Oct 8 refresh) — all art is inline SVG styled here; no external assets ================= */
:root { --u1:#E8692C; --u2:#7B5CE0; --u3:#D1453B; --u4:#2E5BD7; --u5:#12A37A; --u6:#1C8FC4; --sun:#F6B800; --hero1:#E6F0FF; --hero2:#F3ECFF; }
@media (prefers-color-scheme: dark) { :root { --u1:#FF9A62; --u2:#A893FF; --u3:#FF7B72; --u4:#7FA2FF; --u5:#4FD1A5; --u6:#5CC4F0; --hero1:#122441; --hero2:#1E1838; } }
body.landing { padding:0; }
body.landing main { padding:0 16px 32px; max-width:980px; }
.skip { position:absolute; left:-999px; top:8px; background:var(--panel); padding:8px 12px; border-radius:8px; z-index:5; }
.skip:focus { left:8px; }
.hero { background:linear-gradient(135deg, var(--hero1), var(--hero2)); border-bottom:1px solid var(--line); padding:max(20px, env(safe-area-inset-top)) 16px 28px; }
.hero-in { max-width:980px; margin:0 auto; display:grid; grid-template-columns:1.15fr .85fr; gap:24px; align-items:center; }
.hero h1 { font-size:clamp(2rem, 5vw, 3rem); line-height:1.1; margin:.25em 0 .3em; letter-spacing:-.01em; }
.hero .hl { white-space:nowrap; background:linear-gradient(90deg, var(--u1), var(--u2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lede { font-size:1.1rem; max-width:34em; }
.ctas { display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 10px; }
.cta.ghost { background:transparent; color:var(--accent); border:2px solid var(--accent); padding:10px 18px; }
.pill-row { display:flex; flex-wrap:wrap; gap:8px; margin:0; }
.pill { background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:3px 12px; font-size:.85rem; }
.hero-art { width:100%; max-width:380px; justify-self:center; overflow:visible; }
.a-sun { fill:var(--sun); } .a-rays path, .a-rays { stroke:var(--sun); stroke-width:4; stroke-linecap:round; fill:none; }
.a-orbit { fill:none; stroke:var(--muted); stroke-opacity:.45; stroke-dasharray:4 6; stroke-width:2; }
.a-earth { fill:#2E7DD7; } .a-land { fill:#3FBF7F; } .a-moon { fill:#C9CED6; }
.a-magnet { fill:#8892A0; } .a-pole-n { fill:var(--u3); } .a-pole-s { fill:var(--u4); }
.a-field { fill:none; stroke:var(--u4); stroke-width:2; stroke-dasharray:3 5; opacity:.7; }
.a-wave path { fill:none; stroke:var(--u2); stroke-width:3.5; stroke-linecap:round; }
.a-dna path { fill:none; stroke:var(--u5); stroke-width:4; stroke-linecap:round; } .a-dna .a-rung { stroke-width:2.5; stroke:var(--muted); }
.a-peng { fill:#1E2A3A; } .a-belly { fill:#fff; } .a-eye { fill:#1E2A3A; } .a-beak { fill:#F6A400; }
@media (prefers-color-scheme: dark) { .a-peng, .a-eye { fill:#0A0F18; } .a-peng { stroke:#4a5d78; stroke-width:1.5; } }
@media (prefers-reduced-motion: no-preference) {
  .f1 { animation:bob 4s ease-in-out infinite; } .f2 { animation:bob 5s ease-in-out -1.5s infinite; } .f3 { animation:bob 3.5s ease-in-out -.7s infinite; }
  @keyframes bob { 50% { translate:0 -6px; } }
  .ucard:hover svg, .ucard:focus-visible svg { animation:wiggle .5s ease; }
  @keyframes wiggle { 30% { rotate:-6deg; } 70% { rotate:5deg; } }
}
.ugrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(270px, 1fr)); gap:14px; margin:16px 0; }
.ucard { --c:var(--accent); position:relative; display:grid; grid-template-columns:64px 1fr; grid-template-rows:auto auto 1fr auto; column-gap:14px; text-decoration:none; color:var(--text);
  background:var(--panel); border:1px solid var(--line); border-top:6px solid var(--c); border-radius:16px; padding:14px 16px; transition:transform .15s, box-shadow .15s; }
.ucard:hover, .ucard:focus-visible { transform:translateY(-3px); box-shadow:0 8px 20px rgba(19,35,58,.12); border-color:var(--c); }
.ucard svg { grid-row:1 / span 4; width:64px; height:64px; background:color-mix(in srgb, var(--c) 12%, transparent); border-radius:14px; padding:6px; }
.ucard .unum { font-size:.75rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--c); }
.ucard strong { font-size:1.1rem; line-height:1.25; }
.ucard .q { color:var(--muted); font-size:.92rem; margin-top:2px; }
.ucard .go { font-weight:700; color:var(--c); font-size:.9rem; margin-top:6px; }
.u1 { --c:var(--u1); } .u2 { --c:var(--u2); } .u3 { --c:var(--u3); } .u4 { --c:var(--u4); } .u5 { --c:var(--u5); } .u6 { --c:var(--u6); }
.ucard .ic-a { fill:var(--c); } .ucard .ic-b { fill:color-mix(in srgb, var(--c) 45%, #fff); } .ucard .ic-d { fill:var(--text); opacity:.8; }
.ucard .ic-burst { fill:var(--sun); } .ucard .ic-line { fill:none; stroke:var(--c); stroke-width:4; stroke-linecap:round; }
.ucard .ic-rung { fill:none; stroke:var(--muted); stroke-width:3; stroke-linecap:round; } .ucard .ic-dash { fill:none; stroke:var(--muted); stroke-width:3; stroke-dasharray:3 5; }
.ucard .ic-n { fill:var(--u3); } .ucard .ic-s { fill:var(--u4); } .ucard.u3 .ic-a { fill:#8892A0; }
.ucard .ic-sun { fill:var(--sun); } .ucard .ic-orbit { fill:none; stroke:var(--muted); stroke-width:2; stroke-dasharray:3 4; } .ucard .ic-moon { fill:#C9CED6; }
.ucard .ic-belly { fill:#fff; }
.feat { list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:10px; }
.feat li { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:12px 14px; display:flex; flex-direction:column; }
.feat .fi { font-size:1.6rem; line-height:1.2; } .feat span:last-child { color:var(--muted); font-size:.9rem; }
.privacy-band { display:flex; gap:16px; align-items:flex-start; background:color-mix(in srgb, var(--u5) 10%, var(--panel)); border:1px solid var(--line); border-radius:16px; padding:16px 18px; margin:28px 0; }
.privacy-band h2 { margin:0 0 .2em; } .privacy-band p { margin:0; }
.privacy-band svg { flex:none; width:48px; height:48px; }
.lk-body { fill:var(--u5); } .lk-shackle { fill:none; stroke:var(--u5); stroke-width:4; } .lk-hole { fill:var(--panel); }
@media (max-width:700px) { .hero-in { grid-template-columns:1fr; } .hero-art { max-width:280px; order:-1; } }

/* Light husky mascot accent (R-P East Middle) — keep tiny so it doesn't steal the show */
.hero-in { position: relative; }
.mascot-flourish { position:absolute; right:8px; bottom:4px; width:72px; height:72px; object-fit:contain;
  filter: drop-shadow(0 2px 6px rgba(19,35,58,.18)); opacity:.92; pointer-events:none; transform: rotate(8deg); }
@media (prefers-reduced-motion: no-preference) {
  .mascot-flourish { animation: bob 4.5s ease-in-out -0.4s infinite; }
}
.mascot-nod { display:flex; align-items:center; gap:8px; margin:0 0 10px; font-size:.9rem; color:var(--muted); }
.mascot-nod img { width:28px; height:28px; object-fit:contain; transform: rotate(-6deg); }
@media (max-width:700px) { .mascot-flourish { width:56px; height:56px; right:4px; bottom:0; } }