/* Hoot admissions demo. The look follows soltrack-ai.com and the sales desk demo: Inter, pills, one card per scene with real shadows. */
@import url("/fonts/fonts.css");
:root { --bg:#F5F5F3; --card:#fff; --line:#E7E6E2; --ink:#111114; --ink2:#55555D; --ink3:#8E8E96;
  --teal:#0F7A68; --teal-s:rgba(15,122,104,.10); --gold:#A97C19; --gold-s:rgba(169,124,25,.12); --vio:#6B4FD8; --vio-s:rgba(107,79,216,.11);
  --red:#C2410C; --red-s:rgba(194,65,12,.09); --ok:#16A34A;
  --ease:cubic-bezier(.2,.7,.2,1); --spring:cubic-bezier(.32,1.3,.42,1);
  --sh:0 0 0 1px var(--line), 0 1px 2px rgba(17,17,20,.04), 0 30px 60px -40px rgba(17,17,20,.30);
  --ar:"Geeza Pro","SF Arabic","Noto Naskh Arabic","Segoe UI","Arial",sans-serif; color-scheme:light; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; background:var(--bg); }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.5 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; letter-spacing:-.006em; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
button, input { font:inherit; color:inherit; letter-spacing:inherit; }
button { cursor:pointer; }
a { color:inherit; }
.ar { font-family:var(--ar); direction:rtl; unicode-bidi:isolate; letter-spacing:0; }
.wrap { max-width:1180px; margin:0 auto; padding:0 24px; }

/* hero */
.hero { padding-top:72px; padding-bottom:8px; text-align:center; }
.for { display:inline-flex; align-items:center; gap:10px; min-height:40px; padding:4px 18px; border-radius:999px; background:#fff; box-shadow:0 0 0 1px var(--line), 0 8px 24px -16px rgba(17,17,20,.25); font-size:13px; color:var(--ink2); }
.for i { width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 4px rgba(22,163,74,.14); }
.hero h1 { font-weight:700; font-size:60px; line-height:1.02; letter-spacing:-.042em; margin:22px auto 16px; max-width:860px; }
.hero p { font-size:18px; color:var(--ink2); max-width:620px; margin:0 auto; }
.row { display:flex; justify-content:center; gap:10px; margin-top:26px; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 20px; border-radius:999px; border:0; background:#fff; box-shadow:0 0 0 1px var(--line); font-weight:600; font-size:15px; text-decoration:none; transition:transform .2s var(--ease), box-shadow .2s; }
.btn:active { transform:scale(.97); }
.btn.dark { background:var(--ink); color:#fff; box-shadow:0 8px 20px -10px rgba(17,17,20,.5); }
.btn.teal { background:var(--teal); color:#fff; box-shadow:0 8px 20px -10px rgba(15,122,104,.6); }
.btn[disabled] { opacity:.45; cursor:not-allowed; }
.note { margin-top:18px; font-size:12.5px; color:var(--ink3); }

/* sections */
.sec { padding-top:96px; }
.sec-h { text-align:center; margin-bottom:30px; }
.num { display:inline-flex; align-items:center; height:28px; padding:0 12px; border-radius:999px; background:#fff; box-shadow:0 0 0 1px var(--line); font-size:12.5px; font-weight:600; color:var(--ink2); }
.sec h2 { font-weight:700; font-size:40px; line-height:1.06; letter-spacing:-.032em; margin:14px 0 10px; }
.lede { font-size:16.5px; color:var(--ink2); max-width:660px; margin:0 auto; }
.card { position:relative; background:var(--card); border-radius:24px; box-shadow:var(--sh); }
.foot { padding-top:100px; padding-bottom:110px; text-align:center; color:var(--ink3); font-size:12.5px; }

/* replay */
.replay { position:absolute; right:16px; bottom:16px; z-index:5; display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 14px 0 11px; border:0; border-radius:999px; background:#fff; color:var(--ink2); font-weight:600; font-size:12.5px; box-shadow:0 0 0 1px var(--line), 0 8px 20px -12px rgba(17,17,20,.35); opacity:0; transform:translateY(6px); transition:opacity .4s, transform .4s; pointer-events:none; }
.done .replay { opacity:1; transform:none; pointer-events:auto; }
.replay svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* segmented control: one track, one travelling lozenge (glass-controls rules 1 to 4) */
.seg { position:relative; display:inline-flex; padding:4px; border-radius:999px; background:rgba(17,17,20,.05); box-shadow:inset 0 0 0 1px rgba(17,17,20,.05); max-width:100%; }
.seg-pill { position:absolute; top:4px; bottom:4px; left:0; border-radius:999px; background:#fff; box-shadow:0 1px 2px rgba(17,17,20,.08), 0 6px 14px -8px rgba(17,17,20,.35); opacity:0; transition:transform .46s var(--spring), width .46s var(--spring), opacity .2s; }
.seg button { position:relative; z-index:1; height:34px; padding:0 14px; border:0; border-radius:999px; background:none; font-size:13.5px; font-weight:600; color:var(--ink2); white-space:nowrap; transition:color .25s; }
.seg button.on { color:var(--ink); }

/* 1. the reader */
.reader { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); gap:0; overflow:hidden; }
.docs { padding:22px 22px 26px; background:linear-gradient(180deg,#F8F8F6,#F1F1EE); border-right:1px solid var(--line); }
.docs-top { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.docs-top .lbl { font-size:12.5px; color:var(--ink3); font-weight:600; }
.paper { position:relative; margin:0 auto; border-radius:14px; box-shadow:0 1px 2px rgba(17,17,20,.08), 0 24px 40px -26px rgba(17,17,20,.45); transform:rotate(-.6deg); transition:opacity .35s var(--ease), transform .45s var(--ease); background:#fff; }
.paper img { display:block; width:100%; height:auto; border-radius:14px; }
.paper.swap { opacity:0; transform:rotate(-.6deg) translateY(8px) scale(.985); }
.scan { position:absolute; left:0; right:0; top:0; height:18%; border-radius:14px; background:linear-gradient(180deg, rgba(15,122,104,0), rgba(15,122,104,.16) 70%, rgba(15,122,104,.55) 98%, rgba(15,122,104,0)); opacity:0; pointer-events:none; }
.scan.go { animation:scan 1.1s var(--ease) both; }
@keyframes scan { 0% { opacity:0; transform:translateY(-10%); } 12% { opacity:1; } 88% { opacity:1; } 100% { opacity:0; transform:translateY(470%); } }
.box { position:absolute; border-radius:8px; box-shadow:0 0 0 2px var(--teal), 0 0 0 6px rgba(15,122,104,.14); background:rgba(15,122,104,.06); opacity:0; transform:scale(1.04); transition:opacity .3s var(--ease), transform .4s var(--spring); pointer-events:none; }
.box.on { opacity:1; transform:none; }
.box.gold { box-shadow:0 0 0 2px var(--gold), 0 0 0 6px var(--gold-s); background:rgba(169,124,25,.06); }

.form { padding:22px 24px 74px; min-width:0; }
.form-h { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.av { flex:0 0 auto; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--teal-s); color:var(--teal); font-weight:700; font-size:14px; }
.form-h b { display:block; font-size:16px; letter-spacing:-.015em; }
.form-h span { font-size:12.5px; color:var(--ink3); }
.status { margin-left:auto; display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 10px; border-radius:999px; background:var(--gold-s); color:var(--gold); font-size:12px; font-weight:600; white-space:nowrap; transition:background .3s, color .3s; }
.status.ok { background:rgba(22,163,74,.11); color:var(--ok); }
.fields { display:grid; gap:2px; }
.f { display:grid; grid-template-columns:118px minmax(0,1fr) auto; align-items:center; gap:10px; min-height:40px; padding:5px 10px; border-radius:10px; transition:background .4s; }
.f.hot { background:var(--teal-s); }
.f .k { font-size:12.5px; color:var(--ink3); }
.f .v { font-weight:600; font-size:14px; min-height:21px; overflow-wrap:anywhere; }
.f .v .ar { font-weight:600; font-size:15px; }
.f .v .caret { display:inline-block; width:2px; height:15px; margin-left:1px; vertical-align:-2px; background:var(--teal); animation:blink .8s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }
.src { display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 9px; border-radius:999px; background:#F3F3F1; font-size:11.5px; color:var(--ink2); white-space:nowrap; opacity:0; transform:translateX(6px); transition:opacity .3s, transform .35s var(--ease); }
.src.on { opacity:1; transform:none; }
.src i { width:7px; height:7px; border-radius:50%; background:var(--ok); }
.src i.mid { background:#E0A100; }
.checks { display:grid; gap:8px; margin-top:16px; }
.chk { display:flex; gap:10px; align-items:flex-start; padding:11px 13px; border-radius:14px; background:#F7F7F5; box-shadow:inset 0 0 0 1px var(--line); font-size:13.5px; line-height:1.45; opacity:0; transform:translateY(8px); transition:opacity .4s var(--ease), transform .5s var(--ease); }
.chk.on { opacity:1; transform:none; }
.chk .ic { flex:0 0 auto; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:rgba(22,163,74,.12); color:var(--ok); }
.chk.warn .ic { background:var(--gold-s); color:var(--gold); }
.chk.dup { background:var(--vio-s); box-shadow:inset 0 0 0 1px rgba(107,79,216,.25); }
.chk.dup .ic { background:rgba(107,79,216,.16); color:var(--vio); }
.chk svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.chk b { font-weight:600; }
.chk .mini { display:inline-flex; margin-top:8px; height:30px; padding:0 13px; border:0; border-radius:999px; background:var(--vio); color:#fff; font-size:12.5px; font-weight:600; align-items:center; transition:transform .2s; }
.chk .mini.pressed, .confirm.pressed { transform:scale(.94); }
.chk .mini.done { background:rgba(107,79,216,.16); color:var(--vio); }
.confirm-row { display:flex; align-items:center; gap:12px; margin-top:16px; flex-wrap:wrap; opacity:0; transition:opacity .4s; }
.confirm-row.on { opacity:1; }
.confirm { height:42px; padding:0 18px; border:0; border-radius:999px; background:var(--teal); color:#fff; font-weight:600; font-size:14px; box-shadow:0 8px 20px -10px rgba(15,122,104,.6); transition:transform .2s, background .3s; }
.confirm.done { background:var(--ok); }
.audit { font-size:12.5px; color:var(--ink3); opacity:0; transition:opacity .4s; }
.audit.on { opacity:1; }

/* live reader */
.live { margin-top:22px; padding:26px; }
.live-h { display:flex; justify-content:space-between; gap:18px; align-items:flex-end; flex-wrap:wrap; margin-bottom:18px; }
.live-h h3 { margin:0 0 4px; font-size:22px; letter-spacing:-.025em; }
.live-h p { margin:0; color:var(--ink2); font-size:14.5px; max-width:520px; }
.code { display:flex; gap:8px; align-items:center; }
.code input { width:150px; height:38px; padding:0 14px; border:0; border-radius:999px; background:#F3F3F1; box-shadow:inset 0 0 0 1px var(--line); font-size:14px; outline:none; }
.code input:focus { box-shadow:inset 0 0 0 1.5px var(--teal); }
.picks { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.pick { position:relative; display:flex; flex-direction:column; gap:8px; padding:10px; border:0; border-radius:16px; background:#F7F7F5; box-shadow:inset 0 0 0 1px var(--line); text-align:left; transition:box-shadow .25s, transform .2s; }
.pick:active { transform:scale(.98); }
.pick.on { box-shadow:inset 0 0 0 2px var(--teal); background:#fff; }
.pick .th { position:relative; height:96px; border-radius:10px; overflow:hidden; background:#ECECE8; display:grid; place-items:center; }
.pick .th img { width:100%; height:100%; object-fit:cover; object-position:top; }
.pick .th svg { width:30px; height:30px; fill:none; stroke:var(--ink3); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.pick b { font-size:13.5px; }
.pick span { font-size:12px; color:var(--ink3); }
.pick .scan { border-radius:10px; }
.pick.busy .scan { animation:scanloop 1.3s var(--ease) infinite; }
@keyframes scanloop { 0% { opacity:0; transform:translateY(-20%); } 15% { opacity:1; } 85% { opacity:1; } 100% { opacity:0; transform:translateY(480%); } }
.result { margin-top:18px; }
.result:empty { display:none; }
.res-h { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; font-size:13.5px; color:var(--ink2); }
.pill { display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 11px; border-radius:999px; background:#F3F3F1; font-size:12.5px; font-weight:600; color:var(--ink2); }
.pill.g { background:rgba(22,163,74,.11); color:var(--ok); }
.pill.r { background:var(--red-s); color:var(--red); }
.res-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px 18px; }
.res-grid .f { grid-template-columns:120px minmax(0,1fr) auto; }
.res-notes { margin:12px 0 0; padding:0; list-style:none; display:grid; gap:6px; }
.res-notes li { padding:9px 12px; border-radius:12px; background:var(--gold-s); color:#6B4E0F; font-size:13px; }
.err { padding:12px 14px; border-radius:12px; background:var(--red-s); color:var(--red); font-size:13.5px; }
.timer { font-variant-numeric:tabular-nums; }

/* 2. the family map */
.fam { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); overflow:hidden; }
.map { position:relative; padding:18px 10px 22px; background:linear-gradient(180deg,#FAFAF8,#F3F3F0); border-right:1px solid var(--line); }
.map-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.map-scroll::-webkit-scrollbar { display:none; }
.map svg { display:block; width:100%; min-width:640px; height:auto; }
.map .hint { position:absolute; left:20px; top:16px; font-size:12px; color:var(--ink3); font-weight:600; }
.legend { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:6px; font-size:12px; color:var(--ink3); }
.legend span { display:inline-flex; align-items:center; gap:6px; }
.legend i { width:18px; height:0; border-top:2px solid var(--gold); }
.legend i.d { border-top:2px dashed #B9B9B3; }
.legend i.s { border-top:2px dotted var(--vio); }
.node rect { fill:#fff; stroke:var(--line); stroke-width:1.2; transition:stroke .3s, fill .3s; filter:drop-shadow(0 6px 10px rgba(17,17,20,.07)); }
.node text { font-family:"Inter",sans-serif; }
.node .nm { font-size:14px; font-weight:600; fill:var(--ink); }
.node .na { font-size:13.5px; fill:var(--ink2); font-family:var(--ar); }
.node .gr { font-size:11px; font-weight:600; fill:var(--teal); }
.node .ci { transition:fill .3s; }
.node.kid { cursor:pointer; }
.node.kid:hover rect { stroke:#CFCFC9; }
.node.sel rect { stroke:var(--teal); stroke-width:2.2; }
.node.full rect { stroke:var(--teal); stroke-dasharray:0; fill:#F2FAF8; }
.node.half rect { stroke:var(--gold); fill:#FCF8EE; }
.node.step rect { stroke:var(--vio); fill:#F6F4FD; }
.node.dim { opacity:.42; }
.node { transition:opacity .35s; }
.edge { fill:none; stroke-width:2; transition:opacity .35s; }
.edge.m { stroke:var(--gold); }
.edge.d { stroke:#B9B9B3; stroke-dasharray:6 6; }
.edge.p { stroke:#C9C9C3; }
.edge.s { stroke:var(--vio); stroke-dasharray:2 5; stroke-linecap:round; }
.elbl { font-size:11px; fill:var(--ink3); font-family:"Inter",sans-serif; }
.kidcard { padding:22px 24px 26px; min-width:0; }
.kc-h { display:flex; align-items:center; gap:12px; }
.kc-h b { display:block; font-size:18px; letter-spacing:-.02em; }
.kc-h .ar { font-size:15px; color:var(--ink2); }
.kc-h .g { margin-left:auto; }
.kc-rows { margin-top:14px; display:grid; gap:2px; }
.kc-r { display:grid; grid-template-columns:96px minmax(0,1fr); gap:10px; padding:8px 0; border-top:1px solid #F0F0EC; font-size:13.5px; }
.kc-r .k { color:var(--ink3); font-size:12.5px; padding-top:1px; }
.sib { display:flex; flex-wrap:wrap; gap:6px; }
.tag { display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 9px; border-radius:999px; font-size:12px; font-weight:600; }
.tag.full { background:var(--teal-s); color:var(--teal); }
.tag.half { background:var(--gold-s); color:var(--gold); }
.tag.step { background:var(--vio-s); color:var(--vio); }
.disc { margin-top:18px; padding:16px; border-radius:16px; background:#F7F7F5; box-shadow:inset 0 0 0 1px var(--line); }
.disc .lbl { font-size:12.5px; font-weight:600; color:var(--ink2); margin-bottom:10px; }
.fees { width:100%; margin-top:12px; border-collapse:collapse; font-size:13px; }
.fees td { padding:6px 0; border-top:1px solid #ECECE8; }
.fees td:last-child { text-align:right; font-variant-numeric:tabular-nums; font-weight:600; }
.fees .off { color:var(--teal); font-weight:600; font-size:12px; }
.fees tr.tot td { border-top:1.5px solid #DADAD4; font-weight:700; padding-top:9px; }
.fees .amt { display:inline-block; transition:transform .35s var(--spring); }
.fees .amt.bump { transform:scale(1.08); }
.disc .fine { margin-top:8px; font-size:12px; color:var(--ink3); }

/* 3. sealed schools */
.sealed { padding:0; overflow:hidden; }
.appbar { display:flex; align-items:center; gap:14px; padding:14px 18px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.brand { font-weight:800; font-size:17px; letter-spacing:-.03em; }
.who { margin-left:auto; display:flex; align-items:center; gap:10px; font-size:13px; }
.who .av { width:32px; height:32px; font-size:12px; background:var(--gold-s); color:var(--gold); }
.right { font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:999px; background:rgba(22,163,74,.11); color:var(--ok); transition:background .3s, color .3s; }
.right.view { background:#F0F0EC; color:var(--ink2); }
.sealed-body { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); }
.apps { padding:16px 18px 22px; border-right:1px solid var(--line); min-width:0; }
.apps-h { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.apps-h b { font-size:14.5px; }
table.t { width:100%; border-collapse:collapse; font-size:13px; }
table.t th { text-align:left; font-weight:600; color:var(--ink3); font-size:11.5px; padding:6px 6px; }
table.t td { padding:9px 6px; border-top:1px solid #F0F0EC; }
table.t tbody tr { transition:opacity .3s, transform .35s var(--ease); }
table.t.swap tbody tr { opacity:0; transform:translateY(6px); }
.edit { height:34px; padding:0 14px; border:0; border-radius:999px; background:var(--ink); color:#fff; font-size:12.5px; font-weight:600; transition:opacity .3s; }
.edit[disabled] { opacity:.3; }
.proof { padding:16px 18px 64px; min-width:0; }
.probe { width:100%; height:auto; min-height:40px; padding:8px 14px; border:0; border-radius:14px; background:#F3F3F1; box-shadow:inset 0 0 0 1px var(--line); font-weight:600; font-size:13px; text-align:left; transition:transform .2s; }
.probe:active { transform:scale(.98); }
.term { margin-top:10px; padding:12px 14px; border-radius:14px; background:#111418; color:#D6E2DD; font:12px/1.6 "SF Mono",Menlo,Consolas,monospace; min-height:118px; white-space:pre-wrap; overflow-wrap:anywhere; }
.term .c { color:#7C8B86; }
.term .k { color:#7FD6C2; }
.term .r { color:#FBBF77; }
.tests { margin-top:14px; display:grid; gap:4px; }
.test { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink2); }
.test i { flex:0 0 auto; width:16px; height:16px; border-radius:50%; background:#ECECE8; display:grid; place-items:center; transition:background .25s; }
.test.ok i { background:var(--ok); }
.test i svg { width:10px; height:10px; fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; opacity:0; transition:opacity .2s; }
.test.ok i svg { opacity:1; }
.tests-h { display:flex; justify-content:space-between; align-items:center; margin-top:16px; font-size:12.5px; font-weight:600; color:var(--ink2); }

/* 4. ask your school */
.ask { padding:22px 24px 70px; }
.qs { display:flex; gap:8px; flex-wrap:wrap; }
.q { height:auto; min-height:36px; padding:7px 14px; border:0; border-radius:999px; background:#F3F3F1; box-shadow:inset 0 0 0 1px var(--line); font-size:13px; font-weight:600; color:var(--ink2); text-align:start; transition:background .25s, color .25s, box-shadow .25s; }
.q.on { background:var(--ink); color:#fff; box-shadow:none; }
.q.ar { font-size:14px; }
.askbox { margin-top:16px; display:flex; align-items:center; gap:10px; min-height:52px; padding:8px 8px 8px 18px; border-radius:999px; background:#fff; box-shadow:0 0 0 1px var(--line), 0 10px 26px -18px rgba(17,17,20,.35); font-size:15px; }
.askbox .txt { flex:1; min-width:0; }
.askbox .txt.ar { text-align:right; font-size:16px; }
.askbox .go { flex:0 0 auto; width:38px; height:38px; border-radius:50%; background:var(--teal); display:grid; place-items:center; }
.askbox .go svg { width:16px; height:16px; fill:none; stroke:#fff; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.ask-out { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; margin-top:18px; }
.sql { padding:14px 16px; border-radius:16px; background:#111418; color:#D6E2DD; font:12px/1.65 "SF Mono",Menlo,Consolas,monospace; white-space:pre-wrap; overflow-wrap:anywhere; min-height:180px; opacity:0; transition:opacity .4s; }
.sql.on { opacity:1; }
.sql .c { color:#7C8B86; } .sql .k { color:#7FD6C2; }
.answer { opacity:0; transform:translateY(8px); transition:opacity .45s var(--ease), transform .5s var(--ease); min-width:0; }
.answer.on { opacity:1; transform:none; }
.answer .say { font-size:14.5px; font-weight:600; margin:2px 0 10px; }
.answer .say.ar { text-align:right; font-size:16px; }

@media (max-width:900px) {
  .reader, .fam, .sealed-body, .ask-out { grid-template-columns:minmax(0,1fr); }
  .docs, .map, .apps { border-right:0; border-bottom:1px solid var(--line); }
  .picks { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .res-grid { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:640px) {
  .wrap { padding:0 16px; }
  .hero { padding-top:44px; padding-bottom:0; } .hero h1 { font-size:38px; } .hero p { font-size:16px; }
  .sec { padding-top:70px; } .sec h2 { font-size:29px; } .lede { font-size:15px; }
  .f, .res-grid .f { grid-template-columns:92px minmax(0,1fr); }
  .f .src { grid-column:2; justify-self:start; }
  .form { padding:18px 16px 70px; } .docs { padding:16px 14px 20px; } .live { padding:20px 16px; } .ask { padding:18px 16px 70px; }
  .kidcard { padding:18px 16px 22px; } .proof, .apps { padding:14px 14px 22px; } .proof { padding-bottom:64px; }
  .seg button { padding:0 11px; font-size:12.5px; }
  .who .nm { display:none; }
}
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }

/* scenes 3 and 4 on the real database */
.pgline { display:flex; align-items:center; gap:8px; margin-top:14px; font-size:12.5px; color:var(--ink2); }
.pgline i { flex:0 0 auto; width:8px; height:8px; border-radius:50%; background:#E0A100; animation:pulse 1s ease-in-out infinite; }
.pgline.ok i { background:var(--ok); animation:none; box-shadow:0 0 0 4px rgba(22,163,74,.14); }
.pgline.bad i { background:var(--red); animation:none; }
@keyframes pulse { 50% { opacity:.35; } }
details.rule { margin-top:12px; }
details.rule summary { display:inline-flex; align-items:center; height:32px; padding:0 13px; border-radius:999px; background:#F3F3F1; box-shadow:inset 0 0 0 1px var(--line); font-size:12.5px; font-weight:600; color:var(--ink2); cursor:pointer; list-style:none; }
details.rule summary::-webkit-details-marker { display:none; }
details.rule[open] summary { background:var(--ink); color:#fff; box-shadow:none; }
pre.sql { margin:0; }
details.rule pre.sql { margin-top:10px; min-height:0; font-size:11.5px; }
.proof-h { font-weight:700; font-size:14.5px; letter-spacing:-.01em; margin-bottom:10px; }
#attacks { margin-bottom:10px; }
#sqlin { display:block; width:100%; min-height:84px; padding:12px 14px; border:0; border-radius:14px; background:#fff; box-shadow:inset 0 0 0 1px var(--line); font:13px/1.55 "SF Mono",Menlo,Consolas,monospace; color:var(--ink); resize:vertical; outline:none; }
#sqlin:focus { box-shadow:inset 0 0 0 1.5px var(--teal); }
.runrow { display:flex; align-items:center; gap:12px; margin:10px 0; }
.runrow .btn { flex:0 0 auto; height:38px; }
.fine { font-size:12px; line-height:1.4; color:var(--ink3); }
table.rt { border-collapse:collapse; white-space:normal; }
.term .rt th { text-align:left; font-weight:500; color:#7C8B86; padding:1px 16px 1px 0; }
.term .rt td { color:#EAF3F0; padding:1px 16px 1px 0; }
.answer table.rt { width:100%; font-size:13px; }
.answer .rt th { text-align:start; font-weight:600; font-size:11.5px; color:var(--ink3); padding:6px; }
.answer .rt td { padding:9px 6px; border-top:1px solid #F0F0EC; }
.test span { min-width:0; }
.test.bad i { background:var(--red); }
.pill.r { background:var(--red-s); color:var(--red); }
.under { max-width:660px; margin:14px auto 0; text-align:center; font-size:12.5px; color:var(--ink3); }
@media (max-width:640px) { #sqlin { font-size:16px; } .runrow { align-items:flex-start; } }

/* review pass: a stage that never changes height, the document list, the family map full width, compact phone rows */
.stage { position:relative; aspect-ratio:1250/880; }
.paper { position:absolute; left:50%; top:50%; margin:0; transform:translate(-50%,-50%) rotate(-.6deg); }
.paper.swap { opacity:0; transform:translate(-50%,-48%) rotate(-.6deg) scale(.985); }
.paper[data-doc="passport"] { width:100%; aspect-ratio:1250/880; }
.paper[data-doc="idcard"] { width:92%; aspect-ratio:1012/638; }
.paper[data-doc="birth"] { height:100%; aspect-ratio:1000/1250; }
.paper img { height:100%; }
.doclist { display:grid; gap:8px; margin-top:22px; }
.drow { display:grid; grid-template-columns:56px minmax(0,1fr) 22px; align-items:center; gap:12px; padding:8px 12px 8px 8px; border:0; border-radius:14px; background:#fff; box-shadow:0 0 0 1px var(--line); text-align:left; transition:box-shadow .3s, transform .2s; }
.drow:active { transform:scale(.99); }
.drow img { width:56px; height:40px; border-radius:6px; object-fit:cover; object-position:top; background:#ECECE8; }
.drow b { display:block; font-size:13.5px; }
.drow em { font-style:normal; font-size:12px; color:var(--ink3); }
.drow i { display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:#ECECE8; transition:background .3s; }
.drow i svg { width:11px; height:11px; fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; opacity:0; transition:opacity .2s; }
.drow.reading { box-shadow:0 0 0 2px var(--teal); }
.drow.reading i { background:var(--teal); animation:pulse 1s ease-in-out infinite; }
.drow.read i { background:var(--ok); }
.drow.read i svg { opacity:1; }
.pill { white-space:nowrap; }
.fam { display:block; }
.map { border-right:0; border-bottom:1px solid var(--line); padding:20px 18px 20px; }
.map svg { max-width:1040px; margin:0 auto; }
.fam-lower { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:26px; padding:22px 24px 26px; align-items:start; }
.fam-lower .kidcard { padding:0; }
.fam-lower .disc { margin-top:0; }
.node.kid:focus { outline:none; }
.node.kid:focus-visible rect { stroke:var(--teal); stroke-width:2.6; }
.answer .rt .ar { font-size:15px; }
bdi { font-family:var(--ar); }
@media (max-width:900px) {
  .fam-lower { grid-template-columns:minmax(0,1fr); }
  .doclist { display:none; }
  #appst tbody tr:nth-child(n+7) { display:none; }
}
@media (max-width:640px) {
  .f, .res-grid .f { grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"k s" "v s"; row-gap:0; column-gap:10px; min-height:46px; }
  .f .k { grid-area:k; font-size:11.5px; }
  .f .v { grid-area:v; }
  .f .src { grid-area:s; grid-column:auto; justify-self:end; align-self:center; }
  .fam-lower { padding:18px 16px 22px; }
  .map { padding:16px 8px 16px; }
}