/* School Squad public pages (landing, Start a group, owner). Loaded AFTER /style.css (the QC app's own stylesheet),
   so colors, fonts, header, buttons, inputs, cards and the memphis background come straight from the QC app.
   This file only adds layout and maps public-page classes onto QC's existing styles/variables. No new colors. */
.wrap{max-width:1040px;margin:0 auto;padding:0 12px}
.topnav{display:flex;justify-content:flex-end;padding:10px 0 0}
.panel{background:var(--card);border:3px solid var(--line);border-radius:20px;padding:14px 16px;margin:12px 0;box-shadow:6px 6px 0 var(--purple);position:relative}
.panel:nth-of-type(4n+1){box-shadow:6px 6px 0 var(--pink)}.panel:nth-of-type(4n+2){box-shadow:6px 6px 0 var(--teal)}.panel:nth-of-type(4n+3){box-shadow:6px 6px 0 var(--sun)}
.panel h3{margin:0 0 6px;font-size:1.15rem}
a.btn.gold,button.btn.gold{background:var(--sun);color:var(--ink)}a.btn.sm,button.btn.sm{padding:5px 11px;font-size:.88rem}
button.btn{font:inherit;font-weight:800}button.btn.pri{background:var(--pink);color:#fff}button:disabled{opacity:.5;cursor:default}
.hero{padding:10px 0 6px;display:grid;gap:18px}
.hero h2{font-size:clamp(1.7rem,6vw,2.6rem);line-height:1.15;margin:0;color:var(--purple);text-shadow:3px 3px 0 var(--sun),6px 6px 0 var(--pink)}
.hero p.lead{font-size:1.1rem;margin:12px 0 0;font-weight:700}.hero .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.feat{display:grid;gap:4px 16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.feat p{margin:0;color:var(--mut)}
section{padding:14px 0}section>h2{font-size:1.6rem;margin:0 0 8px}
.prices{display:grid;gap:4px 16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.price .amt{font-family:"Righteous",sans-serif;font-size:2.2rem;color:var(--purple)}.price .amt small{font-size:1rem;color:var(--mut);font-family:"Nunito",sans-serif}
.price ul{padding-left:18px;margin:8px 0 0}
.tag{display:inline-block;background:var(--lav);border:2px solid var(--line);border-radius:999px;padding:0 10px;font-weight:800;font-size:.78rem}
.steps{counter-reset:s;list-style:none;padding:0;display:grid;gap:12px}.steps li{counter-increment:s;padding-left:46px;position:relative;min-height:32px}
.steps li::before{content:counter(s);position:absolute;left:0;top:-2px;width:32px;height:32px;border-radius:50%;background:var(--sun);border:2.5px solid var(--line);display:grid;place-items:center;font-weight:800}
.foot{text-align:center;color:var(--mut);font-size:.85rem;margin:28px 0 10px}
@media(min-width:860px){.hero{grid-template-columns:1.2fr 1fr;align-items:center;padding:24px 0 10px}}
/* Start a group */
.stepper{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0 14px}.stepper span{border:2px solid var(--line);border-radius:999px;padding:2px 10px;font-size:.78rem;font-weight:800;background:#fff}
.stepper span.on{background:var(--purple);color:#fff;box-shadow:2px 2px 0 var(--sun)}.stepper span.done{background:var(--mint)}
.panel>h2{margin:0 0 6px}
.row2{display:grid;grid-template-columns:2fr 1fr;gap:10px}
.lib{display:flex;align-items:center;justify-content:space-between;gap:10px;border:2.5px solid var(--line);border-radius:14px;padding:10px 12px;margin:8px 0;background:#fff}
.lib.on{background:var(--mint);box-shadow:3px 3px 0 var(--teal)}.lib small{display:block;color:var(--mut)}
button.sw{flex:none;width:58px;height:32px;border:2.5px solid var(--line);border-radius:999px;background:#eee;position:relative;padding:0;box-shadow:none}
button.sw::after{content:"";position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid var(--line);transition:left .15s}
button.sw.on{background:var(--teal)}button.sw.on::after{left:28px;background:var(--sun)}button.sw:hover,button.sw:active{transform:none;box-shadow:none}
.devcode{background:var(--sun);border:2px dashed var(--line);border-radius:12px;padding:8px 12px}
.err{color:#d61f69;font-weight:700}
.acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;justify-content:space-between;align-items:center}
.req{border:2.5px dashed var(--line);border-radius:14px;padding:10px 12px;margin-top:10px;background:var(--lav)}
.sumtbl{width:100%;border-collapse:collapse}.sumtbl td{padding:6px 0;border-bottom:1px dashed #d8cfe8}.sumtbl td:last-child{text-align:right;font-weight:800}
details summary{cursor:pointer;margin:8px 0}
/* Owner */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:12px 0}.kpi{background:#fff;border:2.5px solid var(--line);border-radius:16px;padding:10px 12px;box-shadow:3px 3px 0 var(--line)}.kpi b{display:block;font-size:1.4rem;font-family:"Righteous",sans-serif;font-weight:400}
.grp.sel{background:#fff9db;outline:3px solid var(--sun);outline-offset:2px}.grp h3{margin:0}
.pill{display:inline-block;border:2px solid var(--line);border-radius:999px;padding:0 9px;font-size:.75rem;font-weight:800;background:#fff;margin:2px 4px 2px 0}
.pill.active{background:var(--mint)}.pill.pending_payment{background:var(--sun)}.pill.removed{background:#ffe3ef}
.ftbl{width:100%;border-collapse:collapse;font-size:.9rem;margin-top:8px}.ftbl th,.ftbl td{text-align:left;padding:5px 4px;border-bottom:1px dashed #d8cfe8;white-space:nowrap}.ftbl td:first-child{white-space:normal;min-width:120px}
.tabs2{display:flex;gap:6px;margin:10px 0}.tabs2 button.on{background:var(--purple);color:#fff}
body.pub{padding-bottom:20px}
.pill.locked,.pill.canceled,.pill.sub-locked,.pill.sub-canceled{background:#e9e4f2}.pill.sub-active{background:var(--mint)}.pill.sub-past_due{background:#ffe3ef;border-color:#d61f69}
/* Payments (Phase 3) */
.plans{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:8px 0}
button.plan{text-align:left;display:block;width:100%;background:#fff;border:2.5px solid var(--line);border-radius:14px;padding:10px 12px;font:inherit;color:var(--ink);box-shadow:3px 3px 0 var(--line)}
button.plan b{display:block;font-size:1.05rem}button.plan small{display:block;color:var(--mut)}
button.plan.on{background:var(--mint);box-shadow:4px 4px 0 var(--teal);outline:3px solid var(--teal);outline-offset:1px}button.plan.on b::before{content:"✔ "}
.mockbar{background:var(--sun);border:2.5px dashed var(--line);border-radius:12px;padding:8px 12px;font-weight:800;margin:0 0 12px}
.okbar{background:var(--mint);border:2.5px solid var(--line);border-radius:12px;padding:8px 12px;font-weight:800;margin:8px 0}
.failbar{background:#ffe3ef;border:2.5px solid #d61f69;border-radius:12px;padding:8px 12px;font-weight:800;margin:8px 0}
.who{display:flex;justify-content:space-between;align-items:center;gap:10px;border:2.5px solid var(--line);border-radius:14px;padding:10px 12px;margin:8px 0;background:#fff}
.who.paid{background:var(--mint);box-shadow:3px 3px 0 var(--teal)}.who.wait{background:#fff9db;box-shadow:3px 3px 0 var(--sun)}.who small{display:block;color:var(--mut)}
.adult{border:2.5px solid var(--line);border-radius:14px;padding:8px 12px;margin:8px 0;background:var(--lav)}
.seg2{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0}.seg2 button{padding:4px 10px;font-size:.85rem}.seg2 button.on{background:var(--purple);color:#fff}
.card4242{border:2.5px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff;font-family:monospace;letter-spacing:1px;color:var(--mut)}
.linkbox{word-break:break-all;background:#fff;border:2px dashed var(--line);border-radius:10px;padding:6px 10px;font-size:.85rem}
.incl{display:inline-block;padding:6px 12px;border-radius:999px;background:#e7f8ec;border:2px solid #222;margin:2px 0 6px}
.adult.me{padding:8px 12px}
.legal{font-size:.85rem;color:#555;text-align:center;margin:10px 0 0}.legal a{font-weight:800}
.draftbar{background:#fff3b0;border:3px dashed #c48a00;border-radius:14px;padding:10px 14px;font-weight:800;margin:10px 0}
.doc{background:#fff;border:3px solid var(--line);border-radius:18px;padding:18px 20px;box-shadow:6px 6px 0 var(--line);line-height:1.55}
.doc h2{margin-top:22px}.doc table{border-collapse:collapse;width:100%}.doc td,.doc th{border:2px solid var(--line);padding:6px 8px;text-align:left}
.rqb{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}
.trialbox{background:#e3f8f5;border:3px solid #16c79a;border-radius:14px;padding:10px 12px;margin:10px 0;box-shadow:4px 4px 0 #2a1f3d;font-size:1rem;line-height:1.45}
.pill.sub-trialing{background:#d4f5ec;border-color:#16a085;color:#0b6b5a}
/* SEO day 1: the brand line is no longer the <h1> (the hero headline is), so it keeps the exact h1 look from style.css. */
.pub .brand{margin:0;font-family:"Righteous","Nunito",sans-serif;font-weight:400;letter-spacing:.3px;font-size:clamp(1.6rem,6vw,2.6rem);color:var(--purple);text-shadow:3px 3px 0 var(--sun),6px 6px 0 var(--pink)}
.hero h1{font-size:clamp(1.7rem,6vw,2.6rem);line-height:1.15;margin:0;color:var(--purple);text-shadow:3px 3px 0 var(--sun),6px 6px 0 var(--pink)}