:root { --ink:#172033; --muted:#667085; --canvas:#f5f7fb; --paper:#ffffff; --accent:#4f46e5; --accent-soft:#eeefff; --line:#e4e8f0; --green:#16756a; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:radial-gradient(circle at 8% 1%, #e9edff 0, transparent 27rem), var(--canvas); font-family:"DM Sans", sans-serif; }
.page-shell { width:min(100% - 32px, 760px); margin:0 auto; padding:82px 0 64px; }
.hero { max-width:610px; margin:0 0 44px 5px; }
.eyebrow { display:inline-block; margin:0 0 17px; padding:7px 10px; border-radius:999px; color:#4940ca; background:var(--accent-soft); font-size:.73rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; } h1,h2 { letter-spacing:-.045em; } h1 { margin-bottom:20px; font:700 clamp(2.8rem, 9vw, 4.8rem)/.97 Fraunces,serif; } h1 em { color:var(--accent); font-style:normal; }
.intro { max-width:520px; color:var(--muted); font-size:1.1rem; line-height:1.6; }.disclaimer { color:#8490a1; font-size:.84rem; }
.calculator,.results { background:var(--paper); border:1px solid var(--line); border-radius:22px; padding:clamp(22px,5vw,40px); box-shadow:0 18px 50px #263a6d12; }
.step-heading { display:flex; align-items:flex-start; gap:13px; margin-bottom:20px; }.step-number { display:grid; place-items:center; flex:0 0 29px; height:29px; border-radius:9px; background:var(--accent-soft); color:var(--accent); font-size:.8rem; font-weight:700; }.step-heading h2 { margin:1px 0 3px; font-size:1.3rem; }.step-heading p { margin:0; color:var(--muted); font-size:.92rem; }.second-step { border-top:1px solid var(--line); margin-top:36px; padding-top:32px; }
.choice-grid,.form-grid { display:grid; gap:12px; }.choice-grid { grid-template-columns:repeat(2,1fr); }.choice-card { position:relative; border:1px solid var(--line); border-radius:13px; padding:17px; cursor:pointer; transition:border-color .18s, background .18s, transform .18s, box-shadow .18s; }.choice-card:hover { border-color:#b8bdf9; transform:translateY(-1px); box-shadow:0 6px 15px #2937a40b; }.choice-card.selected { border:2px solid var(--accent); background:#f5f5ff; padding:16px; }.choice-card input { position:absolute; opacity:0; }.choice-card span { display:block; font-weight:700; }.choice-card small { color:var(--muted); display:block; margin-top:5px; line-height:1.25; }
.form-grid { grid-template-columns:repeat(2,1fr); margin-top:20px; }.form-grid label { color:var(--ink); font-size:.88rem; font-weight:600; }.full-width { grid-column:1 / -1; }.field-help { display:block; margin-top:5px; color:var(--muted); font-size:.72rem; font-weight:400; }.required { color:var(--accent); }.input-wrap { position:relative; margin-top:7px; }.input-wrap span { position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--muted); font-weight:500; } input,select { width:100%; border:1px solid #d8deea; border-radius:10px; padding:12px 38px 12px 12px; background:#fbfcff; color:var(--ink); font:500 1rem "DM Sans",sans-serif; transition:border-color .16s,box-shadow .16s,background .16s; } select { padding-right:10px; margin-top:7px; } input[type="text"] { margin-top:7px; padding-right:12px; } input:hover,select:hover { border-color:#bbc4df; } input:focus,select:focus { outline:none; border-color:#7773eb; box-shadow:0 0 0 3px #e5e5ff; background:white; }
fieldset { margin:22px 0 0; border:1px solid var(--line); border-radius:11px; padding:15px; } legend { padding:0 5px; font-size:.88rem; font-weight:700; } fieldset label { display:inline-flex; margin:7px 14px 3px 0; align-items:center; gap:6px; font-size:.9rem; } fieldset input { width:auto; padding:0; }.comparison-form { margin-top:36px; }.comparison-form .second-step { margin-top:0; }.offer-b-toggle { display:flex; align-items:center; gap:9px; padding:13px 14px; border-radius:10px; background:#f7f8fe; color:var(--ink); font-size:.92rem; font-weight:700; }.offer-b-toggle input { width:auto; }.no-offer-b { margin:15px 0 0; color:var(--muted); font-size:.86rem; line-height:1.45; }.priority-label { display:block; margin-top:22px; color:var(--ink); font-size:.88rem; font-weight:600; }.priority-label select { margin-top:7px; } button { border:0; cursor:pointer; font:700 1rem "DM Sans",sans-serif; } #calculate { width:100%; margin-top:32px; padding:16px; border-radius:11px; color:white; background:linear-gradient(135deg,#5d56e8,#4138c9); box-shadow:0 8px 18px #4f46e538; transition:transform .15s,box-shadow .15s; } #calculate:hover { box-shadow:0 12px 24px #4f46e54a; transform:translateY(-2px); } #calculate span { margin-left:7px; }
.results { margin-top:24px; }.results h2 { margin-bottom:13px; font-size:clamp(1.8rem,6vw,2.65rem); }.results h2 span { color:var(--muted); text-decoration:line-through; text-decoration-thickness:2px; }.real-cost { margin-bottom:8px; font-size:1.1rem; }.real-cost strong { color:var(--green); font-size:clamp(2.2rem,8vw,3.5rem); letter-spacing:-.06em; }.real-cost span { color:var(--muted); }.result-explanation { color:var(--muted); line-height:1.5; }.summary-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:27px 0; }.summary-grid article { padding:14px; border-radius:9px; background:#f3f4f1; }.summary-grid span { display:block; color:var(--muted); font-size:.76rem; line-height:1.25; }.summary-grid strong { display:block; margin-top:7px; font-size:1.08rem; letter-spacing:-.03em; }.decision-note { margin:0 0 27px; padding:17px; border-radius:10px; background:#eef7f3; color:#25473f; font-size:.92rem; line-height:1.48; }.decision-note strong { color:var(--green); }.comparison-result { margin:0 0 27px; padding:22px; border-radius:14px; background:#f5f5ff; border:1px solid #e0e1ff; }.comparison-heading .eyebrow { margin-bottom:8px; }.comparison-heading h3 { margin-bottom:18px; font-size:1.15rem; letter-spacing:-.025em; }.comparison-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.comparison-grid .compare-card { padding:14px; border:1px solid #e4e5fb; border-radius:10px; background:white; text-align:left; transition:transform .15s,border-color .15s,box-shadow .15s; }.comparison-grid .compare-card:hover { border-color:#aaa8fa; box-shadow:0 5px 13px #4f46e512; transform:translateY(-1px); }.comparison-grid .compare-card.active { border-color:var(--accent); box-shadow:0 0 0 2px #e4e4ff; }.comparison-grid span,.comparison-grid small { display:block; color:var(--muted); font-size:.78rem; font-weight:500; }.comparison-grid span b { margin-left:4px; color:var(--accent); font-size:.68rem; }.comparison-grid strong { display:block; margin:6px 0; color:var(--ink); font-size:1.18rem; letter-spacing:-.04em; }.catalog-source { margin:13px 0 0; color:#59657b; font-size:.77rem; line-height:1.4; }.catalog-source a { color:var(--accent); font-weight:700; }.comparison-verdict { margin:17px 0 7px; color:#303078; font-size:.95rem; font-weight:600; line-height:1.45; }.comparison-tradeoff { margin:0; padding:12px 13px; border-radius:9px; background:#fff; color:#556078; font-size:.84rem; line-height:1.45; }.comparison-tradeoff strong { color:var(--ink); }.offer-details { margin-top:15px; padding:15px; border-radius:10px; background:white; border:1px solid #e1e2f5; }.offer-details h4 { margin:18px 0 10px; font-size:.93rem; }.offer-details h4:first-child { margin-top:0; }.offer-details p { margin:8px 0 0; color:var(--muted); font-size:.83rem; line-height:1.42; }.offer-detail-row { display:flex; justify-content:space-between; gap:14px; padding:8px 0; border-top:1px solid #edf0f5; font-size:.86rem; }.offer-detail-row strong { white-space:nowrap; }.comparison-note { margin:12px 0 0; color:var(--muted); font-size:.77rem; line-height:1.4; }.breakdown { border-top:1px solid var(--line); padding-top:20px; }.breakdown-header { display:flex; justify-content:space-between; gap:12px; align-items:center; }.breakdown h3 { margin:0; font-size:1rem; }.breakdown button { padding:0; color:var(--green); background:none; font-size:.85rem; }.breakdown-row { display:flex; align-items:center; gap:10px; padding:12px 0; border-bottom:1px solid #eceae4; }.breakdown-row .bar { height:8px; border-radius:6px; background:var(--accent); min-width:5px; }.breakdown-row span { flex:1; font-size:.9rem; }.breakdown-row strong { font-size:.9rem; }.fuel-formula { margin:18px 0 0; padding:12px 14px; border-radius:9px; background:#f8fafc; color:#526174; font-size:.8rem; line-height:1.45; }.method-note { margin:14px 0 0; color:var(--muted); font-size:.79rem; line-height:1.45; }.guide-content { margin-top:74px; padding-top:54px; border-top:1px solid var(--line); }.guide-content > h2,.faq h2 { margin-bottom:14px; font-size:clamp(1.75rem,5vw,2.4rem); }.guide-content > p:not(.eyebrow) { max-width:650px; color:var(--muted); line-height:1.65; }.guide-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:28px 0 48px; }.guide-grid section { padding:18px; border:1px solid var(--line); border-radius:13px; background:#fff; }.guide-grid h3 { margin-bottom:8px; font-size:1rem; }.guide-grid p { margin:0; color:var(--muted); font-size:.88rem; line-height:1.5; }.faq details { padding:17px 0; border-top:1px solid var(--line); }.faq details:last-child { border-bottom:1px solid var(--line); }.faq summary { cursor:pointer; color:var(--ink); font-weight:700; }.faq p { margin:12px 0 0; color:var(--muted); font-size:.9rem; line-height:1.55; }.hidden { display:none; } footer { padding:0 20px 40px; color:var(--muted); font-size:.8rem; text-align:center; }
.guide-link { margin:0 0 46px; }.guide-link a { color:var(--accent); font-weight:700; text-decoration:none; }.guide-link a:hover { text-decoration:underline; }.article-page { width:min(100% - 32px, 760px); margin:0 auto; padding:62px 0 64px; }.article-header { max-width:650px; margin-bottom:38px; }.article-page h1 { font-size:clamp(2.5rem,8vw,4.3rem); }.article-lead,.article-body { color:var(--muted); line-height:1.65; }.article-lead { font-size:1.12rem; }.article-body { font-size:1rem; }.article-body h2 { margin:46px 0 13px; color:var(--ink); font-size:clamp(1.65rem,5vw,2.25rem); }.decision-table { width:100%; margin:27px 0; border:1px solid var(--line); border-radius:14px; border-spacing:0; overflow:hidden; background:white; font-size:.9rem; }.decision-table th,.decision-table td { padding:14px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }.decision-table th { color:var(--ink); background:#f7f8fe; }.decision-table tr:last-child td { border-bottom:0; }.article-callout,.article-cta { margin:30px 0; padding:20px; border-radius:14px; }.article-callout { background:#eef7f3; color:#25473f; }.article-cta { background:#f5f5ff; border:1px solid #e0e1ff; }.article-cta h2 { margin-top:0; }.article-cta a { display:inline-block; padding:13px 17px; border-radius:10px; background:var(--accent); color:white; font-weight:700; text-decoration:none; }
.share-result { width:100%; margin-top:20px; padding:13px 16px; border:1px solid #d8dcfb; border-radius:10px; color:var(--accent); background:#f7f7ff; transition:background .15s,border-color .15s; }.share-result:hover { border-color:#aaa8fa; background:#eeeeff; }
.article-nav { display:flex; justify-content:space-between; gap:16px; margin-bottom:40px; font-size:.9rem; }.article-nav a,.related-guides a { color:var(--accent); font-weight:700; text-decoration:none; }.article-nav a:hover,.related-guides a:hover { text-decoration:underline; }.related-guides { margin:34px 0; padding-top:24px; border-top:1px solid var(--line); }.related-guides h2 { margin-top:0; font-size:1.15rem; }.related-guides ul { margin:0; padding-left:18px; }.related-guides li { margin:8px 0; }
@media (max-width:580px) { .page-shell { padding-top:48px; }.choice-grid,.form-grid,.summary-grid,.guide-grid { grid-template-columns:1fr; }.summary-grid { gap:7px; }.summary-grid article { display:flex; justify-content:space-between; align-items:center; }.summary-grid strong { margin:0; }.calculator,.results { padding:23px 18px; }.decision-table { display:block; overflow-x:auto; } }