:root { color-scheme: light; --navy:#0b1f33; --ink:#183043; --soft:#5f7180; --teal:#1f8f83; --pale:#e5f5f2; --line:#d8e2e8; --paper:#f5f7f8; font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:#fff; }
header, footer { min-height:72px; padding:1rem 5vw; display:flex; align-items:center; justify-content:space-between; gap:1rem; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:.7rem; color:var(--navy); text-decoration:none; }
.brand > span { width:42px; height:42px; display:grid; place-items:center; color:#fff; background:var(--navy); border-radius:12px; font-weight:900; }
.brand strong { display:grid; }.brand small { color:var(--soft); font-weight:500; }
.back { color:var(--teal); font-weight:700; }
main { width:min(1180px,90vw); margin:auto; padding:4rem 0; }
.hero { max-width:780px; }.eyebrow { color:var(--teal); font-size:.72rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
h1 { margin:.4rem 0 1rem; color:var(--navy); font-size:clamp(2.5rem,7vw,5.4rem); line-height:.95; letter-spacing:-.055em; }
.hero > p:last-child { color:var(--soft); font-size:1.08rem; line-height:1.7; }
.calculator { margin-top:3rem; display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:2rem; align-items:start; }
.inputs { display:grid; gap:1rem; }.inputs h2 { margin:1rem 0 .25rem; color:var(--navy); }
.plans { display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; }
.plans label { cursor:pointer; }.plans input { position:absolute; opacity:0; }.plans span { min-height:160px; padding:1rem; display:grid; align-content:start; gap:.5rem; background:var(--paper); border:2px solid transparent; border-radius:14px; }
.plans input:checked + span { border-color:var(--teal); background:var(--pale); }.plans b { color:var(--navy); font-size:1.15rem; }.plans small { color:var(--soft); }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }.field-grid label { display:grid; gap:.4rem; font-weight:700; }
input[type="number"] { width:100%; padding:.7rem; border:1px solid var(--line); border-radius:9px; font:inherit; }
.efforts { display:grid; gap:.5rem; }.efforts > label { padding:.8rem; display:grid; grid-template-columns:minmax(190px,1fr) 1.2fr; gap:1rem; align-items:center; background:var(--paper); border-radius:10px; }
.efforts > label > span:last-child { display:grid; grid-template-columns:1fr 72px auto; gap:.45rem; align-items:center; color:var(--soft); font-size:.75rem; }
.total-time { padding:1rem; display:flex; justify-content:space-between; gap:1rem; background:var(--navy); color:#fff; border-radius:12px; }
.results { position:sticky; top:1rem; padding:1.2rem; display:grid; gap:.65rem; color:#fff; background:var(--navy); border-radius:18px; box-shadow:0 20px 60px rgba(11,31,51,.2); }
.result { padding:.8rem 0; display:grid; gap:.2rem; border-bottom:1px solid rgba(255,255,255,.14); }.result span { color:#bfd0dc; font-size:.78rem; }.result strong { font-size:1.65rem; }.result.highlight strong { color:#64d8c9; }
.capacity { display:grid; gap:.45rem; margin-top:.5rem; }.capacity > div { height:10px; overflow:hidden; background:rgba(255,255,255,.15); border-radius:999px; }.capacity i { height:100%; display:block; background:#64d8c9; }.capacity small { color:#bfd0dc; }
.cta { margin-top:.8rem; padding:.85rem; color:var(--navy); text-align:center; text-decoration:none; background:#64d8c9; border-radius:10px; font-weight:900; }
.method { margin-top:2rem; color:var(--soft); font-size:.78rem; line-height:1.6; }footer { color:var(--soft); border-top:1px solid var(--line); border-bottom:0; font-size:.78rem; }
@media (max-width:900px) { .calculator { grid-template-columns:1fr; }.results { position:static; }.plans { grid-template-columns:1fr; }.plans span { min-height:0; }.efforts > label { grid-template-columns:1fr; } }
@media (max-width:560px) { main { width:min(100% - 2rem,1180px); padding:2.5rem 0; }.field-grid { grid-template-columns:1fr; }.efforts > label > span:last-child { grid-template-columns:1fr 68px auto; }.total-time { flex-direction:column; } }