.hero{padding-block:clamp(2.5rem,6vw,5rem) clamp(3rem,7vw,5.5rem)}.hero-grid{align-items:center;gap:3rem;display:grid}.hero h1{letter-spacing:-.025em;text-wrap:balance;font-size:clamp(2.5rem,5.6vw,4.4rem);line-height:1.03}.hero h1 span{display:block}@media (width>=64rem){.hero-grid{grid-template-columns:1fr 1fr;gap:4rem}}.demo{background:var(--panel);border:1px solid var(--line);box-shadow:0 18px 40px -24px color-mix(in srgb, var(--pine) 45%, transparent);border-radius:1.75rem;padding:clamp(1.25rem,3vw,2rem)}.demo h2{font-size:1.5rem}.demo-note{color:var(--muted);margin-top:.35rem;font-size:.95rem}.kid{margin-top:1.25rem}.kid-head{align-items:center;gap:.75rem;padding-bottom:.6rem;display:flex}.avatar{background:var(--mint);width:2.5rem;height:2.5rem;color:var(--fg);font-family:var(--f-display);border-radius:50%;place-items:center;font-size:1.1rem;font-weight:600;display:grid}.kid-name{flex-direction:column;line-height:1.25;display:flex}.kid-name small{color:var(--muted);font-size:.88rem}.sub{font-variant-numeric:tabular-nums;margin-left:auto;font-weight:700}.kid ul{gap:.5rem;display:grid}.row{border:1px solid var(--line);cursor:pointer;background:var(--bg);border-radius:1rem;align-items:center;gap:.9rem;min-height:3.5rem;padding:.55rem .9rem;transition:background .15s,border-color .15s;display:flex;position:relative}.row:hover{border-color:var(--muted)}.cls{flex-direction:column;line-height:1.3;display:flex}.cls small{color:var(--muted);font-size:.88rem}.price{font-variant-numeric:tabular-nums;margin-left:auto;font-weight:700}.row input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.sw{background:#7a9488;border-radius:999px;flex:none;width:2.6rem;height:1.5rem;transition:background .2s;position:relative}.sw:after{content:"";background:#fff;border-radius:50%;width:1.1rem;height:1.1rem;transition:transform .2s;position:absolute;top:.2rem;left:.2rem;box-shadow:0 1px 2px #00000040}.row input:checked~.sw{background:var(--pine)}html.dark .row input:checked~.sw{background:var(--sun)}.row input:checked~.sw:after{transform:translate(1.1rem)}html.dark .row input:checked~.sw:after{background:#0f1f1a}.row input:not(:checked)~.price{color:var(--muted);text-decoration:line-through}.row:has(input:not(:checked)){background:0 0}.row:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:3px}.total{border-top:2px solid var(--fg);justify-content:space-between;align-items:baseline;margin-top:1.4rem;padding-top:1.1rem;font-weight:700;display:flex}.total output{text-align:right;min-width:7.5ch;font-family:var(--f-display);font-variant-numeric:tabular-nums;border-radius:.5rem;margin-right:-.45rem;padding:.1rem .45rem;font-size:2.3rem;font-weight:600;line-height:1;display:inline-block}.total output.flash{animation:.6s ease-out flash}@keyframes flash{0%{background:var(--sun);color:#0f1f1a}to{background:0 0}}.fine{color:var(--muted);margin-top:.6rem;font-size:.9rem}
