:root { color-scheme:light; --ink:#19211e; --muted:#596761; --line:#c9d3ce; --paper:#f5f7f5; --white:#fff; --green:#176449; --blue:#315f8a; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:15px/1.55 Inter,ui-sans-serif,system-ui,sans-serif; letter-spacing:0; }
a { color:inherit; }
.topbar,footer { min-height:58px; padding:0 4vw; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); background:var(--white); }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; text-decoration:none; }.brand span { display:grid; place-items:center; width:34px; height:34px; background:var(--ink); color:#fff; font-size:12px; }
nav,footer span:last-child { display:flex; gap:18px; }
.workspace { display:grid; grid-template-columns:minmax(330px,.95fr) minmax(380px,1.05fr); min-height:calc(100vh - 58px); }
.input-panel,.output-panel { padding:34px clamp(20px,4vw,58px); }.input-panel { background:#fff; border-right:1px solid var(--line); }
h1 { max-width:720px; margin:4px 0 10px; font-size:clamp(30px,4vw,48px); line-height:1.07; letter-spacing:0; } h2 { margin:4px 0 10px; font-size:25px; letter-spacing:0; }
.eyebrow { margin:0; color:var(--green); font-size:12px; font-weight:800; text-transform:uppercase; }.intro,.boundary,.status { color:var(--muted); }
label { display:grid; gap:7px; margin:17px 0; font-weight:700; } input,textarea { width:100%; border:1px solid #aebbb5; border-radius:4px; padding:11px 12px; background:#fff; color:var(--ink); font:inherit; resize:vertical; }
.check { grid-template-columns:20px 1fr; align-items:start; font-weight:500; }.check input { width:18px; height:18px; margin-top:3px; }
.actions,.output-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
button,.button-link { min-height:42px; border:1px solid var(--ink); border-radius:4px; padding:10px 16px; background:var(--ink); color:#fff; font:700 14px/1 system-ui; text-decoration:none; cursor:pointer; }.quiet { background:#fff; color:var(--ink); } button:disabled,.button-link[aria-disabled="true"] { opacity:.45; cursor:not-allowed; }
.results article { margin:14px 0; padding:18px; border:1px solid var(--line); border-left:4px solid var(--green); background:#fff; }.results p { margin-bottom:0; }.results li { margin:7px 0; }
.offer-band,.activation-band,.method-band { display:grid; grid-template-columns:minmax(280px,1fr) minmax(300px,.85fr); gap:36px; padding:44px 5vw; border-top:1px solid var(--line); background:#fff; }.activation-band { background:#eaf0f4; }.method-band { align-items:center; background:#e9efec; }
.offer-actions,.activation-panel { padding:22px; border:1px solid var(--line); background:var(--paper); }.price { display:block; margin-bottom:12px; font-size:30px; font-weight:800; }
.method-band img { width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border:1px solid var(--line); }.method-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }.method-grid article { padding:18px; border-left:3px solid var(--blue); background:#fff; }
footer { border-top:1px solid var(--line); border-bottom:0; }.legal { max-width:800px; min-height:calc(100vh - 116px); margin:auto; padding:52px 24px; }.legal h1 { font-size:38px; }
.guide { background:#fff; }.guide-intro { display:grid; grid-template-columns:minmax(300px,.9fr) minmax(360px,1.1fr); gap:40px; align-items:center; padding:52px 6vw; }.guide-intro img { width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border:1px solid var(--line); }.guide-intro .button-link,.guide-boundary .button-link { display:inline-flex; align-items:center; margin-top:12px; }.guide-step,.guide-boundary { padding:42px max(6vw,24px); border-top:1px solid var(--line); }.guide-step > *,.guide-boundary > * { max-width:820px; }.guide-step li { margin:10px 0; }.guide-step.alternate { background:#e9efec; }.guide-boundary { background:#eaf0f4; }
@media (max-width:800px) { .workspace,.offer-band,.activation-band,.method-band,.guide-intro { grid-template-columns:1fr; }.input-panel { border-right:0; border-bottom:1px solid var(--line); }.method-grid { grid-template-columns:1fr; }.input-panel,.output-panel { padding:26px 18px; }.guide-intro { padding:34px 18px; }.guide-step,.guide-boundary { padding:34px 18px; }.topbar { padding:10px 16px; align-items:flex-start; }.topbar nav { gap:10px; flex-wrap:wrap; justify-content:flex-end; } footer { padding:14px 18px; flex-wrap:wrap; } }