:root{
  /* Dark first, matching the palette below. This is what native form controls
     read, so one on a dark panel paints dark chrome rather than light. */
  color-scheme:dark light;
  --bg:#0b0e12; --panel:#0f141a; --text:#e8edf2; --muted:#a9b3be; --stroke:#1e2935; --accent:#7aa2ff;
  --radius:14px; --shadow:0 8px 30px rgba(0,0,0,.25);
}
@media (prefers-color-scheme: light){:root{--bg:#ffffff;--panel:#f6f8fb;--text:#0e1116;--muted:#475569;--stroke:#e5e7eb;--accent:#3b82f6}}
*{box-sizing:border-box}
body{margin:0; font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif; color:var(--text); background:radial-gradient(50% 60% at 90% -10%, rgba(122,162,255,.15), transparent 60%), var(--bg)}
a{color:inherit; text-decoration:none}
.container{max-width:1080px; margin-inline:auto; padding:0 20px}

/* header */
header{position:sticky; top:0; z-index:2; backdrop-filter:saturate(140%) blur(8px); background:color-mix(in srgb, var(--bg) 80%, transparent); border-bottom:1px solid var(--stroke)}
.nav{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; gap:12px}
.logo{width:36px; height:36px; display:inline-block; background-image:url("./images/kadojo.png"); background-size:contain; background-repeat:no-repeat; background-position:center; border-radius:8px}
.brand span{font-weight:700}
nav a{color:var(--muted)}

/* hero */
.hero{padding:64px 0 28px; text-align:center}
.hero h1{font-size:clamp(26px,4.4vw,40px); margin:0 0 10px}
.hero p{color:var(--muted); margin:0}
.appicon{width:clamp(96px,20vw,140px); aspect-ratio:1; margin:0 auto 24px; background-image:url("./images/kadojo.png"); background-size:contain; background-repeat:no-repeat; background-position:center; border-radius:24px; box-shadow:var(--shadow)}
.tagline{font-size:clamp(16px,2.2vw,19px)}
.launch{margin-top:28px; color:var(--text); font-weight:600}

/* calls to action */
.cta-row{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; align-items:center; margin:20px 0 0}
/* 40px rather than the 48 the old text buttons used: the Google badge is a
   270x80 raster, so 40 CSS px lands exactly on 2x for a retina screen and
   anything taller upscales it. Apple's badge is vector and just follows.
   Neither file carries transparent padding, so equal height aligns them with
   no correction. */
.store-badge{display:inline-flex; border-radius:8px; transition:transform .12s ease}
.store-badge img{display:block; height:40px; width:auto}
/* The artwork is never recoloured or filtered - altering it breaks both
   vendors' terms - so the hover affordance moves the badge, not its pixels. */
.store-badge:hover{transform:translateY(-1px)}
.store-badge:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
@media (prefers-reduced-motion:reduce){.store-badge{transition:none} .store-badge:hover{transform:none}}
/* .hero p sets margin:0 at specificity (0,1,1), so a bare .web-soon (0,1,0)
   loses and its margin-top is silently dropped. Scoped to .hero to outrank it. */
.hero .web-soon{margin-top:32px; font-size:14px}

/* socials */
.socials{display:flex; gap:18px; justify-content:center; margin-top:20px}
.socials a{display:inline-flex; color:var(--muted); padding:6px; border-radius:8px; transition:color .12s ease}
.socials svg{width:22px; height:22px; display:block}
.socials a:hover{color:var(--text)}
.socials a:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
@media (prefers-reduced-motion:reduce){.socials a{transition:none}}
/* Same specificity problem as .web-soon above - .hero p wins over a bare
   .quiz and would drop the margin. */
.hero .quiz{margin-top:12px; font-size:14px}
.quiz time{color:var(--text); font-weight:600}

/* footer */
footer{border-top:1px solid var(--stroke); padding:24px 0; color:var(--muted); margin-top:20px}
footer .links{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
footer a{color:var(--muted)}

/* public homepage */
/* Scoped to body.home, so any other page on this stylesheet starts from the
   plain shell above rather than the homepage's night-study look. */
@font-face{font-family:Nunito;src:url("./fonts/nunito-variable.ttf") format("truetype");font-style:normal;font-weight:200 1000;font-display:swap}
body.home{--bg:#070914;--panel:#111126;--text:#f4f1ff;--muted:#cbc6df;--stroke:#302c55;--accent:#c4b1ff;overflow-x:hidden;color-scheme:dark;background-color:var(--bg);background-image:linear-gradient(90deg,rgba(4,5,18,.58) 0%,rgba(5,6,20,.28) 46%,rgba(4,5,16,.18) 100%),linear-gradient(0deg,rgba(4,5,17,.68),transparent 44%),url("./images/home/night-study.webp");background-position:center;background-size:cover;background-attachment:fixed}
body.home header{background:linear-gradient(90deg,rgba(7,9,20,.82),rgba(10,9,27,.52));border-color:color-mix(in srgb,var(--stroke) 78%,transparent)}
body.home .nav{max-width:1200px}
body.home .brand span{letter-spacing:-.02em}
body.home nav a{font-size:14px}
.home-hero{position:relative;padding:34px 0 22px;overflow:hidden}
.home-hero::after{position:absolute;right:0;bottom:0;left:0;height:130px;content:"";pointer-events:none;background:linear-gradient(0deg,rgba(6,7,21,.88),transparent)}
.home-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.82fr) minmax(420px,1.18fr);align-items:center;gap:42px;max-width:1200px;min-height:calc(100svh - 86px)}
.home-hero-grid,.home-copy,.home-stack{min-width:0}
.home-copy{padding-block:34px;text-shadow:0 2px 20px rgba(3,4,17,.45)}
.home-copy h1{max-width:580px;margin:0;font-family:Nunito,system-ui,sans-serif;font-size:clamp(48px,5.5vw,78px);font-weight:750;letter-spacing:-.035em;line-height:1.01;overflow-wrap:anywhere;text-wrap:balance}
.home-copy h1 span{color:#bca1ff}
.home-lede{max-width:470px;margin:24px 0 0;color:var(--muted);font-size:clamp(18px,2vw,22px);line-height:1.48}
.home-copy .launch{margin-top:30px;color:var(--text);font-size:14px;font-weight:700}
.home-copy .cta-row{justify-content:flex-start;margin-top:16px}
.home-copy .web-soon{margin:20px 0 0;color:var(--muted);font-size:13px}
.home-stack{justify-self:end;width:min(100%,520px);touch-action:pan-y}
.home-stack:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
.screen-stack{--front-offset:-112px;--stack-depth-x:132px;--stack-depth-y:84px;--stack-depth-z:-180px;--stack-hidden-x:264px;--stack-hidden-y:168px;--stack-hidden-z:-360px;--stack-hidden-scale:.54;--plane-tilt-x:6deg;--plane-tilt-y:-11deg;--plane-tilt-z:0deg;position:relative;isolation:isolate;min-height:790px;perspective:1500px;perspective-origin:36% 48%}
.stack-screen{position:absolute;top:0;left:50%;z-index:1;width:350px;margin:0;overflow:hidden;border-radius:16px;background:var(--panel);box-shadow:0 18px 34px rgba(0,0,0,.44);filter:brightness(.36) saturate(.44);opacity:0;pointer-events:none;transform:translate(calc(-50% + var(--stack-hidden-x)),var(--stack-hidden-y)) translateZ(var(--stack-hidden-z)) rotateX(var(--plane-tilt-x)) rotateY(var(--plane-tilt-y)) rotateZ(var(--plane-tilt-z)) scale(var(--stack-hidden-scale));transform-style:preserve-3d;transition:transform .52s cubic-bezier(.16,1,.3,1),opacity .32s ease,filter .52s cubic-bezier(.16,1,.3,1)}
.stack-screen::after{position:absolute;inset:0;z-index:1;content:"";pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 2px rgba(246,241,255,.72),inset 0 0 9px 2px rgba(246,241,255,.28)}
.stack-screen img{position:relative;z-index:0;display:block;width:100%;height:auto}
.stack-screen[data-depth="0"]{z-index:4;filter:brightness(1) saturate(1);opacity:1;box-shadow:0 42px 68px rgba(0,0,0,.64),-13px 20px 32px rgba(7,5,29,.44);cursor:pointer;pointer-events:auto;transform:translate(calc(-50% + var(--front-offset)),0) translateZ(60px) rotateX(var(--plane-tilt-x)) rotateY(var(--plane-tilt-y)) rotateZ(var(--plane-tilt-z))}
.stack-screen[data-depth="1"]{z-index:3;filter:brightness(.76) saturate(.78);opacity:1;transform:translate(calc(-50% + var(--stack-depth-x)),var(--stack-depth-y)) translateZ(var(--stack-depth-z)) rotateX(var(--plane-tilt-x)) rotateY(var(--plane-tilt-y)) rotateZ(var(--plane-tilt-z)) scale(.82)}
.stack-screen[data-depth="2"]{z-index:2;filter:brightness(.56) saturate(.64);opacity:1;transform:translate(calc(-50% + var(--stack-depth-x) + var(--stack-depth-x)),calc(var(--stack-depth-y) + var(--stack-depth-y))) translateZ(calc(var(--stack-depth-z) + var(--stack-depth-z))) rotateX(var(--plane-tilt-x)) rotateY(var(--plane-tilt-y)) rotateZ(var(--plane-tilt-z)) scale(.66)}
.stack-screen[data-depth="3"]{z-index:1;filter:brightness(.42) saturate(.52);opacity:1;transform:translate(calc(-50% + var(--stack-depth-x) + var(--stack-depth-x) + var(--stack-depth-x)),calc(var(--stack-depth-y) + var(--stack-depth-y) + var(--stack-depth-y))) translateZ(calc(var(--stack-depth-z) + var(--stack-depth-z) + var(--stack-depth-z))) rotateX(var(--plane-tilt-x)) rotateY(var(--plane-tilt-y)) rotateZ(var(--plane-tilt-z)) scale(.54)}
.stack-screen[data-depth="leaving-front"]{z-index:5;filter:brightness(1) saturate(1);opacity:0;transform:translate(calc(-50% + var(--front-offset)),-10px) translateZ(170px) rotateX(var(--plane-tilt-x)) rotateY(var(--plane-tilt-y)) rotateZ(var(--plane-tilt-z)) scale(1.04)}
.stack-screen[data-depth="leaving-back"]{z-index:3;filter:brightness(.76) saturate(.78);opacity:0;transform:translate(calc(-50% + var(--stack-depth-x)),var(--stack-depth-y)) translateZ(var(--stack-depth-z)) rotateX(var(--plane-tilt-x)) rotateY(var(--plane-tilt-y)) rotateZ(var(--plane-tilt-z)) scale(.82)}
.stack-screen[data-depth="entering-front"]{z-index:5;opacity:0;transform:translate(calc(-50% + var(--front-offset)),-10px) translateZ(170px) rotateX(var(--plane-tilt-x)) rotateY(var(--plane-tilt-y)) rotateZ(var(--plane-tilt-z)) scale(1.04)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.home-community{padding:22px 0 30px;text-align:center}
.home-community .socials{margin-top:0}
.home-community .quiz{margin:12px 0 0;color:var(--muted);font-size:14px}
.home-community .quiz time{color:var(--text)}
body.home .home-community,body.home footer{position:relative;background:rgba(6,7,21,.76)}
body.home footer{margin-top:0;padding:20px 0 24px}
body.home footer .links a+a::before{margin:0 12px;color:var(--muted);content:"·"}
body.home::selection{color:#100d24;background:#c4b1ff}
@media (max-width:760px){body.home{background-image:linear-gradient(180deg,rgba(4,5,18,.82) 0%,rgba(5,6,21,.58) 45%,rgba(4,5,18,.74) 76%),url("./images/home/night-study.webp");background-position:100% 0;background-size:auto 1040px;background-repeat:no-repeat;background-attachment:scroll}body.home .nav{gap:10px}body.home nav a{font-size:12px}.home-hero{padding:20px 0 12px}.home-hero-grid{grid-template-columns:minmax(0,1fr);gap:18px;min-height:0}.home-copy{padding:10px 0 0;text-align:center}.home-copy h1{max-width:560px;margin-inline:auto;font-size:clamp(42px,12vw,58px)}.home-lede{margin-inline:auto;font-size:18px}.home-copy .cta-row{justify-content:center}.home-stack{justify-self:center;width:min(100%,390px)}.screen-stack{--front-offset:-38px;min-height:min(158vw,622px);perspective:1100px;perspective-origin:34% 48%}.stack-screen{width:min(76vw,280px);border-radius:14px}.home-community{padding:20px 0 26px}body.home footer .links{font-size:13px}}
@media (prefers-reduced-motion:reduce){.stack-screen,.stack-button{transition:none}.stack-button:hover{transform:none}}