@font-face { font-family: "Avenir LFC"; src: url("assets/Avenir.ttc") format("truetype-collection"); font-display: swap; }
:root { font-family: "Avenir LFC", Avenir, "Segoe UI", sans-serif; color: #17284b; background: #f4f7fa; font-synthesis: none; --navy:#17284b; --coral:#ef5366; --teal:#2eb8b3; --gold:#f5b824; --ink:#17284b; --muted:#607089; }
* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; background: radial-gradient(circle at 8% 5%, #2eb8b312, transparent 28rem), radial-gradient(circle at 92% 8%, #ef536610, transparent 26rem), #f4f7fa; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.site-header { position: sticky; top: 0; z-index: 5; min-height: 5.3rem; padding: .75rem clamp(1rem,4vw,4rem); display:flex; align-items:center; gap:2rem; background:#fffc; border-bottom:1px solid #dbe3ed; backdrop-filter:blur(16px); }
.logo-button { width:13rem; padding:0; border:0; background:transparent; }
.logo-button img { display:block; width:100%; }
nav { display:flex; align-self:stretch; gap:.3rem; margin-left:auto; }
.nav-link { padding:0 1rem; border:0; border-bottom:3px solid transparent; background:transparent; color:#5c6a80; font-weight:750; }
.nav-link.active { color:var(--navy); border-color:var(--teal); }
.account-chip { display:flex; align-items:center; gap:.7rem; padding:.45rem .75rem; border-radius:999px; background:#edf2f7; font-size:.9rem; font-weight:750; }
.account-chip>span { width:2.2rem; height:2.2rem; display:grid; place-items:center; border-radius:50%; color:white; background:var(--navy); }
.account-chip small { display:block; color:#718096; font-size:.72rem; font-weight:600; }
main { width:min(82rem,calc(100% - 2rem)); min-height:calc(100vh - 10rem); margin:0 auto; padding:clamp(2rem,5vw,4rem) 0; }
footer { min-height:4.5rem; padding:1rem clamp(1rem,4vw,4rem); display:flex; justify-content:space-between; gap:1rem; color:#7b8798; font-size:.85rem; }
.card { border:1px solid #dfe6ee; border-radius:1.35rem; background:#fff; box-shadow:0 16px 40px #17284b0d; }
.pill { display:inline-flex; padding:.45rem .8rem; border-radius:999px; color:#087a79; background:#dff7f4; font-weight:800; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; }
.coral-pill { color:#a52a42; background:#ffe7ec; }
.eyebrow { margin:0 0 .55rem; color:#5c6b82; font-size:.78rem; font-weight:850; letter-spacing:.13em; text-transform:uppercase; }
h1,h2,p { margin-top:0; }
h1 { margin-bottom:.8rem; font-size:clamp(2rem,4vw,3.6rem); line-height:1.05; letter-spacing:-.035em; }
h2 { margin-bottom:.5rem; }
p { color:var(--muted); line-height:1.6; }
.signup-layout { min-height:calc(100vh - 14rem); display:grid; grid-template-columns:minmax(0,1.25fr) minmax(22rem,.75fr); align-items:center; gap:clamp(2rem,6vw,6rem); }
.hero-copy h1 { max-width:15ch; margin-top:1.2rem; }
.hero-copy>p { max-width:48rem; font-size:1.2rem; }
.benefit-list { margin:2rem 0; padding:0; display:grid; gap:.85rem; list-style:none; color:#43526a; }
.benefit-list li::before { content:"✓"; margin-right:.7rem; color:#16805a; font-weight:900; }
.trust-row { display:flex; flex-wrap:wrap; gap:.6rem; }
.trust-row span { padding:.55rem .8rem; border:1px solid #d7e0e9; border-radius:.7rem; background:#ffffffb3; color:#5d6c81; font-size:.82rem; font-weight:700; }
.signup-card { padding:clamp(1.5rem,4vw,2.5rem); }
form { display:grid; gap:1rem; }
label { display:grid; gap:.4rem; color:#3e4d65; font-weight:750; font-size:.9rem; }
.field-help { color:#7a8798; font-size:.78rem; font-weight:500; line-height:1.4; }
input,select { width:100%; height:3.25rem; padding:0 .9rem; border:1.5px solid #bdc9d8; border-radius:.75rem; background:white; color:var(--ink); }
input:focus,select:focus { outline:3px solid #2eb8b333; border-color:var(--teal); }
.check { grid-template-columns:auto 1fr; align-items:start; font-weight:600; line-height:1.4; }
.check input { width:1.2rem; height:1.2rem; }
.button { min-height:3rem; padding:.65rem 1.05rem; border:0; border-radius:.75rem; font-weight:850; }
.button.primary { color:white; background:var(--navy); box-shadow:0 8px 18px #17284b2e; }
.button.secondary { color:var(--navy); background:#eef3f7; }
.button.coral { color:white; background:var(--coral); }
.wide { width:100%; }
.text-button,.back-link { padding:.55rem 0; border:0; background:transparent; color:#315f8b; font-weight:750; }
.signup-card>.text-button { width:100%; margin-top:.7rem; }
.fine-print { margin:.6rem 0 0; text-align:center; font-size:.75rem; }
.page-head,.results-head { display:flex; align-items:end; justify-content:space-between; gap:2rem; margin-bottom:2rem; }
.page-head h1,.results-head h1 { font-size:clamp(2.2rem,3.5vw,3.2rem); }
.page-head p,.results-head p { margin-bottom:0; }
.allowance { margin-bottom:1.5rem; padding:1rem 1.25rem; display:grid; grid-template-columns:auto minmax(12rem,26rem); align-items:center; gap:2rem; }
.allowance strong,.allowance span { display:block; }
.allowance span { color:#6d7b8e; font-size:.86rem; }
.allowance-track { height:.55rem; overflow:hidden; border-radius:99px; background:#e3e9ef; }
.allowance-track i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--teal),var(--gold)); }
.children-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.4rem; }
.child-card { padding:1.35rem; }
.child-top { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.85rem; }
.avatar { width:3.5rem; height:3.5rem; display:grid; place-items:center; border-radius:1rem; background:linear-gradient(145deg,#d8f4f2,#c6d9f3); font-size:1.2rem; font-weight:900; }
.child-top h2,.child-top p { margin:0; }
.status { padding:.35rem .6rem; border-radius:999px; font-size:.72rem; font-weight:800; }
.status.complete { color:#17613a; background:#e4f5ea; }
.status.ready { color:#22669b; background:#e3f1fb; }
.snapshot { margin:1.3rem 0; display:grid; grid-template-columns:repeat(3,1fr); border-block:1px solid #e5eaf0; }
.snapshot div { padding:1rem .5rem; text-align:center; }
.snapshot div+div { border-left:1px solid #e5eaf0; }
.snapshot b,.snapshot span { display:block; }
.snapshot b { font-size:1.5rem; }
.snapshot span { color:#748195; font-size:.72rem; }
.assessment-empty { min-height:6rem; margin:1.3rem 0; display:flex; align-items:center; gap:1rem; border-block:1px solid #e5eaf0; }
.assessment-empty p { margin:0; }
.book-icon { width:3rem; height:3rem; display:grid; place-items:center; border-radius:.7rem; color:white; background:var(--coral); font-family:Georgia,serif; font-weight:800; }
.card-actions { display:flex; gap:.65rem; }
.card-actions .button { flex:1; }
.empty-child { min-height:20rem; padding:2rem; display:flex; flex-direction:column; align-items:center; justify-content:center; border-style:dashed; color:#617187; }
.empty-child span { width:3.6rem; height:3.6rem; margin-bottom:1rem; display:grid; place-items:center; border-radius:50%; color:white; background:var(--teal); font-size:2rem; }
.empty-child small { max-width:18rem; margin-top:.4rem; text-align:center; line-height:1.5; }
.family-note { margin-top:1.5rem; padding:1.1rem 1.3rem; border-left:4px solid var(--gold); border-radius:.5rem; background:#fff8df; }
.family-note p { margin:.2rem 0 0; font-size:.9rem; }
.form-page { max-width:43rem; margin:auto; }
.form-card { margin-top:1rem; padding:clamp(1.5rem,4vw,3rem); }
.form-card h1 { font-size:2.6rem; }
.optional { color:#8995a6; font-weight:500; }
.privacy-box { display:flex; flex-direction:column; gap:.25rem; padding:1rem; border-radius:.8rem; color:#245b55; background:#e7f7f5; font-size:.85rem; }
.privacy-box span { font-weight:500; line-height:1.45; }
.empty-results,.account-page { max-width:48rem; margin:4rem auto; text-align:center; }
.empty-results .card,.account-page>.card { padding:3rem; }
.result-actions { display:flex; gap:.7rem; }
.result-actions select { width:auto; }
.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.metric { padding:1.2rem; }
.metric span,.metric small,.metric b { display:block; }
.metric span { color:#68768b; font-weight:750; }
.metric b { margin:.35rem 0; font-size:2.25rem; }
.metric small { color:#8994a4; line-height:1.35; }
.result-columns { margin-top:1rem; display:grid; grid-template-columns:1.05fr .95fr; gap:1rem; }
.parent-summary,.locked-report { padding:clamp(1.3rem,3vw,2rem); }
.next-step { margin-top:1.5rem; padding:1rem; display:grid; gap:.3rem; border-radius:.8rem; background:#eaf7f5; }
.next-step span { color:#4f6770; line-height:1.45; }
.locked-report { position:relative; overflow:hidden; }
.lock-badge { display:inline-block; margin-bottom:1rem; padding:.4rem .65rem; border-radius:999px; color:#92364a; background:#ffe7ec; font-size:.8rem; font-weight:850; }
.locked-report ul,.plan ul { padding-left:1.2rem; color:#5d6b80; line-height:1.8; }
.blur-lines { display:grid; gap:.5rem; margin:1rem 0; filter:blur(5px); opacity:.45; }
.blur-lines i { height:.7rem; border-radius:99px; background:#8fa2b9; }
.blur-lines i:nth-child(2) { width:78%; }.blur-lines i:nth-child(3) { width:92%; }.blur-lines i:nth-child(4) { width:63%; }
.plan-row { margin:2rem 0; padding:1.2rem; display:flex; justify-content:space-between; gap:1rem; border-radius:1rem; background:#eef3f7; text-align:left; }
.plan-row b,.plan-row span { display:block; }.plan-row span { margin-top:.25rem; color:#708095; font-size:.85rem; }
.danger { color:#b42318; }
.upgrade-page { max-width:67rem; margin:auto; }
.upgrade-hero { max-width:50rem; margin:1.5rem auto 2rem; text-align:center; }
.upgrade-hero h1 { margin-top:1rem; }
.plan-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; }
.plan { position:relative; padding:2rem; }
.plan.featured { border:2px solid var(--coral); transform:translateY(-.35rem); }
.recommended { position:absolute; top:-.8rem; right:1.2rem; padding:.35rem .7rem; border-radius:999px; color:white; background:var(--coral); font-size:.75rem; font-weight:850; }
.price-placeholder { margin:1rem 0; padding:.8rem; border-radius:.7rem; background:#f1f4f7; color:#6b788b; font-weight:750; }
.checkout-note { margin:1.5rem auto 0; text-align:center; font-size:.8rem; }
.toast { position:fixed; z-index:20; left:50%; bottom:1.5rem; transform:translateX(-50%); max-width:min(32rem,90vw); padding:.9rem 1.2rem; border-radius:.8rem; color:white; background:#17284bea; box-shadow:0 14px 35px #0004; font-weight:750; }
@media (max-width:850px) { .signup-layout,.children-grid,.result-columns,.plan-grid { grid-template-columns:1fr; }.metric-grid { grid-template-columns:repeat(2,1fr); }.site-header nav { display:none; }.account-chip { margin-left:auto; }.signup-layout { align-items:start; }.hero-copy h1 { max-width:none; }.page-head,.results-head { align-items:start; flex-direction:column; }.plan.featured { transform:none; } }
@media (max-width:560px) { main { width:min(100% - 1rem,82rem); padding:1.3rem 0; }.site-header { padding:.65rem; }.logo-button { width:9rem; }.account-chip div { display:none; }.metric-grid { grid-template-columns:1fr 1fr; }.allowance { grid-template-columns:1fr; gap:.7rem; }.card-actions,.result-actions { flex-direction:column; }.signup-layout { grid-template-columns:minmax(0,1fr); }.trust-row { display:none; } }