/* VERY ODD palette + type per brand/final/web/README.md. Fonts: Unbounded (Black 900) + Outfit, SIL OFL 1.1, self-hosted (Latin subset). */
@font-face{font-family:"Unbounded";src:url(/fonts/Unbounded-Black.woff2) format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Outfit";src:url(/fonts/Outfit-Variable.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{--black:#141414;--bone:#F1EEE8;--pink:#FF3D7F;--lime:#A6E22E;--orange:#FF7A00;--graphite:#3A3A3A;--white:#FFFFFF;--mute:rgba(241,238,232,.62);--line:rgba(241,238,232,.12)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--black);color:var(--bone);font:400 15px/1.45 "Outfit",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased;min-height:100svh;display:flex;flex-direction:column}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{flex:1;width:100%;max-width:1160px;margin:0 auto;padding:max(26px,env(safe-area-inset-top)) 16px 10px;display:flex;flex-direction:column;justify-content:center;gap:22px}
.hero{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.logo{display:block;width:min(86vw,620px);height:auto}
.tag{color:var(--mute);font-size:15px;font-weight:500;letter-spacing:.01em}
.soon{color:var(--bone)}
.tiles{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:10px 6px 6px;border:1px solid var(--line);border-radius:18px;background:rgba(241,238,232,.035);border-top:3px solid var(--tone)}
.tone-pink{--tone:var(--pink)}.tone-lime{--tone:var(--lime)}.tone-orange{--tone:var(--orange)}.tone-bone{--tone:var(--bone)}
.avatar,.avatar img{display:block;width:100%;max-width:112px;aspect-ratio:1/1;height:auto}
.avatar{margin-bottom:4px}
/* avatars are shown whole: no crop, no rotation, no filters (the 8deg tilt is part of the mark) */
.avatar img{border-radius:0;transform:none;filter:none;object-fit:contain}
.tile-name{font:900 11px/1.2 "Unbounded",system-ui,sans-serif;letter-spacing:.01em;text-transform:uppercase}
.handle{font-size:12px;font-weight:500;color:var(--mute)}
.social{list-style:none;display:flex;gap:0;margin-top:2px}
.social a{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;color:var(--bone);opacity:.85;transition:opacity .15s,background .15s,color .15s}
.social a:hover,.social a:focus-visible{opacity:1;background:rgba(241,238,232,.08);color:var(--pink)}
.social a:focus-visible{outline:2px solid var(--pink);outline-offset:1px}
.social svg{width:18px;height:18px}
.signoff{text-align:center;font:900 15px/1 "Unbounded",system-ui,sans-serif;color:var(--pink)}
.legal{text-align:center;padding:10px 20px max(14px,env(safe-area-inset-bottom));color:var(--mute);font-size:11px;font-weight:500;border-top:1px solid var(--line)}
@media (min-width:860px){
  .wrap{gap:44px;padding-top:44px}
  .hero{gap:18px}
  .tag{font-size:17px}
  .tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .tile{padding:22px 12px 12px;gap:6px}
  .avatar,.avatar img{max-width:168px}
  .avatar{margin-bottom:8px}
  .tile-name{font-size:13px}
  .handle{font-size:13px}
  .social a{width:40px;height:40px}
  .signoff{font-size:18px}
  .legal{font-size:12px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}