:root { --navy:#06233f; --blue:#0c6f9e; --orange:#f45116; --yellow:#ffc928; --steel:#52616b; --mist:#edf3f6; --ink:#13202a; --white:#fff; --radius:1rem; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--ink); background:var(--mist); }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; }
button,input,select { font:inherit; }
button { cursor:pointer; }
.shell { width:min(100%, 44rem); margin:auto; padding:1rem 1rem calc(2rem + env(safe-area-inset-bottom)); }
.brand { display:flex; align-items:center; gap:.7rem; color:var(--navy); font-weight:800; letter-spacing:.02em; text-decoration:none; }
.brand img { width:3rem; height:3rem; object-fit:contain; border-radius:50%; }
.brand span { display:block; font-size:.72rem; font-weight:600; letter-spacing:.08em; }
.top { display:flex; justify-content:space-between; align-items:center; padding:.25rem 0 1.2rem; }
.quiet-link { border:0; background:transparent; color:var(--navy); text-decoration:underline; font-weight:650; padding:.7rem .25rem; }
.hero { padding:1.8rem 0 1.2rem; }
.hero img { display:block; width:min(86vw, 20rem); margin:0 auto .8rem; }
h1 { color:var(--navy); margin:.3rem 0 .7rem; font-size:clamp(2rem, 9vw, 3.35rem); line-height:1.02; letter-spacing:-.045em; }
h2 { color:var(--navy); font-size:1.5rem; margin:.2rem 0 .5rem; }
p { font-size:1rem; line-height:1.55; margin:.4rem 0 1rem; }
.eyebrow { color:var(--orange); font-size:.78rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.primary,.secondary { min-height:3.25rem; border-radius:.85rem; width:100%; padding:.85rem 1rem; font-weight:800; font-size:1rem; }
.primary { color:var(--white); background:var(--navy); border:2px solid var(--navy); box-shadow:0 .2rem 0 var(--orange); }
.primary:focus-visible,.secondary:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid var(--yellow); outline-offset:3px; }
.secondary { color:var(--navy); background:var(--white); border:1px solid #bfced5; }
.cards { display:grid; gap:.85rem; margin:1.2rem 0; }
.plan { width:100%; text-align:left; padding:1rem; background:var(--white); border:2px solid #d5e0e5; border-radius:var(--radius); }
.plan.selected { border-color:var(--orange); box-shadow:0 0 0 2px #ffd7c4; }
.plan strong { display:block; color:var(--navy); font-size:1.08rem; }
.price { color:var(--orange); font-size:1.25rem; font-weight:850; float:right; }
.card { background:var(--white); border-radius:var(--radius); padding:1.1rem; box-shadow:0 .25rem .8rem #06233f12; }
.progress { display:flex; gap:.28rem; margin:0 0 1.1rem; }
.progress i { height:.35rem; flex:1; background:#cad6dc; border-radius:99px; }
.progress i.on { background:var(--orange); }
label { display:block; color:var(--navy); font-size:.92rem; font-weight:750; margin:1rem 0 .35rem; }
input,select { width:100%; min-height:3rem; border:1px solid #afc1ca; border-radius:.7rem; background:#fff; padding:.7rem; color:var(--ink); }
.actions { display:grid; gap:.75rem; margin-top:1.25rem; }
.back { color:var(--navy); background:transparent; border:0; padding:.65rem 0; font-weight:750; text-align:left; }
.notice { background:#fff5ce; border-left:4px solid var(--yellow); border-radius:.4rem; padding:.8rem; font-size:.92rem; }
.summary { display:grid; gap:.7rem; padding:0; list-style:none; }
.summary li { border-bottom:1px solid #e2eaed; padding-bottom:.7rem; }
.summary b { display:block; color:var(--steel); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; }
.admin-row { display:flex; justify-content:space-between; padding:.9rem 0; border-bottom:1px solid #deeaee; }
.status { color:var(--steel); font-weight:700; }
footer { margin-top:2rem; color:var(--steel); font-size:.78rem; text-align:center; }
@media (min-width: 48rem) { .shell { width:min(100%, 62rem); padding:1.5rem 2rem 3rem; } .hero { display:grid; grid-template-columns: .85fr 1.15fr; align-items:center; gap:2.4rem; padding:3rem 1.5rem; } .hero img { width:min(28rem,100%); order:2; } .cards { grid-template-columns:repeat(3, 1fr); } .plan { min-height:10rem; } .card { max-width:42rem; margin:auto; } }