:root { color-scheme: light; --ink:#13231f; --muted:#53635e; --brand:#087f5b; --brand-dark:#056647; --surface:#fff; --wash:#edf7f2; --line:#c9d9d2; --danger:#a32626; font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:linear-gradient(150deg,#e8f7ef,#f8faf9 44%,#e8f0ff); min-height:100vh; }
a { color:var(--brand-dark); }
header { max-width:72rem; margin:auto; padding:1rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand { font-weight:850; color:var(--ink); text-decoration:none; letter-spacing:-.03em; }
.pill { border-radius:99px; padding:.45rem .75rem; background:#fff4cf; font-size:.8rem; font-weight:750; }
main { width:min(100% - 1.5rem,72rem); margin:0 auto 4rem; }
.hero { padding:clamp(1.25rem,5vw,3.5rem) 0 1.5rem; }
.eyebrow { margin:0 0 .5rem; color:var(--brand-dark); text-transform:uppercase; letter-spacing:.12em; font-size:.75rem; font-weight:850; }
h1 { max-width:16ch; margin:.2rem 0 .75rem; font-size:clamp(2rem,8vw,4.5rem); line-height:.98; letter-spacing:-.055em; }
.lead { max-width:44rem; color:var(--muted); font-size:1.05rem; line-height:1.6; }
.layout { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(17rem,.65fr); gap:1rem; align-items:start; }
.card { background:rgba(255,255,255,.96); border:1px solid var(--line); border-radius:1.25rem; padding:clamp(1rem,3vw,1.5rem); box-shadow:0 18px 45px rgba(28,66,54,.08); }
.card + .card { margin-top:1rem; }
h2,h3 { margin:.1rem 0 .8rem; letter-spacing:-.025em; }
label { display:block; font-weight:700; margin:.8rem 0; }
label span { display:block; margin-bottom:.35rem; }
input,select,textarea,button { font:inherit; }
input,select,textarea { width:100%; min-height:3rem; border:1px solid #9db3ab; border-radius:.7rem; padding:.7rem .8rem; background:white; color:var(--ink); }
textarea { min-height:6rem; resize:vertical; }
button,.button { min-height:3rem; border:0; border-radius:.7rem; padding:.75rem 1rem; background:var(--brand); color:white; font-weight:800; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
button:hover { background:var(--brand-dark); }
button:disabled { opacity:.5; cursor:not-allowed; }
.secondary { background:#e1eee8; color:var(--ink); }
.danger { background:var(--danger); }
.actions { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem; }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
.rates,.totals,.metrics { display:grid; gap:.55rem; margin:.8rem 0; }
.rates div,.totals div,.metrics div { display:flex; justify-content:space-between; gap:1rem; border-bottom:1px solid #e7eeeb; padding:.35rem 0; }
.total { font-size:1.2rem; font-weight:850; }
.notice { padding:.8rem; border-radius:.75rem; background:var(--wash); line-height:1.45; }
.warning { background:#fff4cf; }
.error { background:#ffe8e8; color:#741515; }
.status { min-height:1.5rem; margin:.8rem 0; font-weight:700; }
[hidden] { display:none !important; }
.steps { margin:0; padding:0; list-style:none; display:grid; gap:.6rem; }
.steps li { display:flex; align-items:center; gap:.6rem; color:var(--muted); }
.steps li::before { content:""; width:.75rem; height:.75rem; border-radius:50%; background:#b7c7c0; }
.steps li.done { color:var(--ink); font-weight:750; }
.steps li.done::before { background:var(--brand); }
.offline { position:sticky; top:.5rem; z-index:3; background:#722; color:white; padding:.8rem 1rem; border-radius:.7rem; text-align:center; }
table { width:100%; border-collapse:collapse; font-size:.9rem; }
th,td { padding:.65rem .4rem; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.checklist { columns:2; padding-left:1.2rem; }
.muted { color:var(--muted); }
@media (max-width:760px) { .layout { grid-template-columns:1fr; } .grid { grid-template-columns:1fr; } .checklist { columns:1; } header { align-items:flex-start; } h1 { font-size:clamp(2.3rem,14vw,3.8rem); } .actions button,.actions .button { width:100%; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; transition:none !important; } }
:focus-visible { outline:3px solid #ffbf47; outline-offset:3px; }