:root { --car-ink:#0d312d; --car-text:#486d66; --car-paper:#f5f3eb; --car-mint:#39c99b; --car-blue:#63a9e8; --car-gold:#dda34c; --car-line:#c5d8d1; }
.carcost-page { overflow-x:hidden; background:var(--car-paper); color:var(--car-ink); }
.carcost-page *, .carcost-page *::before, .carcost-page *::after { box-sizing:border-box; }
.carcost-page button, .carcost-page input, .carcost-page select { font:inherit; }
.carcost-page section[id] { scroll-margin-top:92px; }
.carcost-hero { position:relative; padding:28px 0 76px; background:linear-gradient(120deg,#eef6f1 0%,#f8f4e8 56%,#e8f0f5 100%); overflow:hidden; }
.carcost-hero::before { content:""; position:absolute; inset:0; opacity:.3; background-image:linear-gradient(rgba(33,91,79,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(33,91,79,.1) 1px,transparent 1px); background-size:44px 44px; mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 75%,transparent); }
.carcost-hero .mrp-breadcrumbs { position:relative; margin-bottom:32px; }
.carcost-hero__grid { position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(420px,.72fr); align-items:center; gap:clamp(45px,7vw,105px); }
.carcost-hero__copy { min-width:0; }
.carcost-hero__copy h1 { max-width:760px; margin:18px 0 24px; font-size:clamp(4rem,6.5vw,7.2rem); line-height:.88; letter-spacing:-.075em; }
.carcost-hero__copy > p:not(.mrp-kicker) { max-width:720px; margin:0; color:var(--car-text); font-size:1.12rem; line-height:1.65; }
.carcost-hero__actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.carcost-hero__proof { display:flex; flex-wrap:wrap; gap:9px; margin:25px 0 0; padding:0; list-style:none; }
.carcost-hero__proof li { padding:8px 12px; border:1px solid #c5d7d0; border-radius:999px; background:rgba(255,255,255,.58); color:#476c65; font-size:.78rem; font-weight:850; }
.carcost-visual { position:relative; padding:18px; border-radius:34px; background:linear-gradient(150deg,#103a4c 0%,#17615d 64%,#75613b 100%); color:white; box-shadow:0 34px 70px rgba(24,61,55,.2); overflow:hidden; }
.carcost-visual::before { content:""; position:absolute; width:300px; height:300px; right:-180px; top:-170px; border:44px solid rgba(255,255,255,.07); border-radius:50%; }
.carcost-visual__top { position:relative; display:flex; justify-content:space-between; gap:16px; padding:2px 4px 16px; font-size:.7rem; font-weight:950; letter-spacing:.08em; }
.carcost-visual__top strong { color:#d8e6e2; }
.carcost-garage { position:relative; height:300px; border-radius:24px; background:linear-gradient(#dce9e7 0 65%,#bfbbb0 65%); overflow:hidden; }
.carcost-garage::before { content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.36) 41% 53%,transparent 54%); }
.carcost-garage__light { position:absolute; width:58px; height:58px; right:42px; top:28px; border-radius:50%; background:#ffe59e; box-shadow:0 0 48px rgba(255,225,142,.55); }
.carcost-car { position:absolute; left:45px; bottom:48px; width:265px; height:100px; border-radius:65px 80px 20px 22px; background:linear-gradient(150deg,#d6a04a,#cb7f35); box-shadow:0 18px 24px rgba(38,50,48,.18); }
.carcost-car::before { content:""; position:absolute; width:125px; height:57px; left:58px; top:-38px; border-radius:60px 70px 0 0; background:#d6923f; clip-path:polygon(18% 100%,36% 0,77% 0,100% 100%); }
.carcost-car::after { content:""; position:absolute; left:101px; top:-29px; width:60px; height:34px; background:#bdd8da; clip-path:polygon(16% 100%,32% 0,76% 0,100% 100%); }
.carcost-car i, .carcost-car b { position:absolute; bottom:-17px; width:46px; height:46px; border:10px solid #173e45; border-radius:50%; background:#dfe9e6; }
.carcost-car i { left:35px; }.carcost-car b { right:35px; }
.carcost-car span { position:absolute; right:17px; top:37px; width:18px; height:11px; border-radius:5px; background:#fff3c0; }
.carcost-floor { position:absolute; left:0; right:0; bottom:32px; height:3px; background:rgba(41,68,64,.22); }
.carcost-price { position:absolute; right:18px; bottom:18px; min-width:175px; padding:14px 16px; border-radius:18px; background:#fbfcfa; color:var(--car-ink); box-shadow:0 15px 28px rgba(28,57,52,.16); }
.carcost-price span, .carcost-price strong, .carcost-price small { display:block; }
.carcost-price span { color:#617c76; font-size:.65rem; font-weight:850; }.carcost-price strong { margin:5px 0 1px; font-size:1.35rem; }.carcost-price small { color:#69817c; font-size:.62rem; }
.carcost-visual__metrics { position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:12px; }
.carcost-visual__metrics div { min-width:0; padding:14px; border:1px solid rgba(255,255,255,.15); border-radius:17px; background:rgba(255,255,255,.08); }
.carcost-visual__metrics span, .carcost-visual__metrics strong { display:block; }.carcost-visual__metrics span { color:#c4d8d4; font-size:.62rem; }.carcost-visual__metrics strong { margin-top:7px; font-size:.79rem; overflow-wrap:anywhere; }
.carcost-visual__mix { position:relative; display:grid; grid-template-columns:52px 1fr; align-items:center; gap:8px 12px; margin-top:12px; padding:13px 15px; border-radius:17px; background:rgba(255,255,255,.07); }
.carcost-visual__mix span { color:#d2e1de; font-size:.63rem; }.carcost-visual__mix i { height:6px; border-radius:20px; background:rgba(255,255,255,.16); overflow:hidden; }.carcost-visual__mix b { display:block; height:100%; width:30%; border-radius:inherit; background:var(--car-mint); }.carcost-visual__mix i:nth-of-type(2) b { background:var(--car-blue); }.carcost-visual__mix i:nth-of-type(3) b { background:var(--car-gold); }

.carcost-nav { position:sticky; top:0; z-index:20; border-top:1px solid #ccddd7; border-bottom:1px solid #ccddd7; background:rgba(238,246,243,.94); backdrop-filter:blur(16px); }
.carcost-nav__inner { display:flex; gap:9px; padding-top:12px; padding-bottom:12px; overflow-x:auto; scrollbar-width:none; }.carcost-nav__inner::-webkit-scrollbar { display:none; }
.carcost-nav a { flex:0 0 auto; padding:9px 13px; border:1px solid #c7d8d2; border-radius:999px; background:#f9fbfa; color:#486861; font-size:.75rem; font-weight:850; text-decoration:none; }
.carcost-calculator { padding:56px 0 88px; background:#e9f2ef; }
.carcost-stage { display:grid; grid-template-columns:minmax(0,1.18fr) minmax(390px,.72fr); gap:22px; align-items:start; }
.carcost-form, .carcost-result { border:1px solid #bfd4cc; border-radius:31px; background:#fbfcfa; box-shadow:0 25px 58px rgba(28,65,58,.1); }
.carcost-form { padding:30px; }
.carcost-form::before, .carcost-result::before { content:""; display:block; height:4px; margin:-30px -30px 25px; background:linear-gradient(90deg,var(--car-mint),var(--car-blue),var(--car-gold)); }
.carcost-form__head { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; }.carcost-form__head h2 { margin:11px 0 10px; font-size:2.45rem; letter-spacing:-.045em; }.carcost-form__head p:last-child { max-width:650px; margin:0; color:var(--car-text); line-height:1.55; }
.carcost-live { flex:0 0 auto; display:flex; align-items:center; gap:7px; padding:8px 10px; border-radius:999px; background:#e4f4ee; color:#08745e; font-size:.68rem; font-weight:900; }.carcost-live i { width:8px; height:8px; border-radius:50%; background:var(--car-mint); box-shadow:0 0 0 5px rgba(57,201,155,.14); }
.carcost-presets { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:25px 0; }.carcost-presets button { min-width:0; padding:15px; border:1px solid #c5d8d1; border-radius:18px; background:#f8faf9; color:var(--car-ink); text-align:left; cursor:pointer; }.carcost-presets button.is-active { border-color:#49c99e; background:linear-gradient(135deg,#e7f8f0,#fbfcf8); box-shadow:0 10px 24px rgba(35,130,105,.1); }.carcost-presets span, .carcost-presets strong, .carcost-presets small { display:block; }.carcost-presets span { margin-bottom:14px; color:#078169; font-size:.67rem; font-weight:950; }.carcost-presets strong { font-size:.8rem; }.carcost-presets small { margin-top:5px; color:#66817b; font-size:.67rem; }
.carcost-drive { display:grid; grid-template-columns:auto repeat(3,1fr); align-items:center; gap:9px; margin:0 0 20px; padding:15px; border:1px solid #cbdcd6; border-radius:19px; background:#f2f7f5; }.carcost-drive legend { position:absolute; clip:rect(0,0,0,0); }.carcost-drive::before { content:"Pohon"; margin-right:4px; color:#52716b; font-size:.72rem; font-weight:900; }.carcost-drive button { display:flex; justify-content:center; align-items:center; gap:8px; padding:10px; border:1px solid #c8d9d3; border-radius:13px; background:white; color:#315b54; font-size:.74rem; font-weight:900; cursor:pointer; }.carcost-drive button.is-active { color:#0c5f51; border-color:#45c89c; background:#e9f8f2; }.carcost-drive button i { width:9px; height:9px; border-radius:50%; background:#de9940; }.carcost-drive button[data-drive="diesel"] i { background:#61a8e7; }.carcost-drive button[data-drive="ev"] i { background:#39c99b; }
.carcost-field-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:17px; }.carcost-field { display:grid; gap:8px; min-width:0; }.carcost-field--wide { grid-column:1/-1; }.carcost-field > span:first-child { font-size:.78rem; font-weight:900; }.carcost-field small { color:#6b827d; font-size:.68rem; line-height:1.45; }.carcost-input { display:flex; align-items:center; min-width:0; border:1px solid #c5d8d1; border-radius:16px; background:white; overflow:hidden; }.carcost-input:focus-within { border-color:#31b98e; box-shadow:0 0 0 4px rgba(49,185,142,.12); }.carcost-input input { width:100%; min-width:0; padding:14px 13px; border:0; outline:0; background:transparent; color:var(--car-ink); font-weight:850; }.carcost-input em { flex:0 0 auto; padding-right:12px; color:#58736d; font-style:normal; font-size:.68rem; font-weight:850; }
.carcost-pro { margin-top:24px; border:1px solid #c4d8d0; border-radius:22px; background:#eef6f3; overflow:hidden; }.carcost-pro summary { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:18px 20px; cursor:pointer; list-style:none; }.carcost-pro summary::-webkit-details-marker { display:none; }.carcost-pro summary span { display:grid; gap:3px; }.carcost-pro summary strong { font-size:.91rem; }.carcost-pro summary small { color:#64807a; font-size:.7rem; }.carcost-pro summary b { padding:7px 10px; border-radius:999px; background:#fff0d5; color:#93601b; font-size:.67rem; }.carcost-pro[open] summary { border-bottom:1px solid #c9dad4; }
.carcost-pro__body { padding:20px; }.carcost-pro__note { margin-bottom:14px; padding:16px 17px; border-radius:17px; border-left:4px solid var(--car-mint); background:white; }.carcost-pro__note strong { display:block; margin-bottom:6px; }.carcost-pro__note p { margin:0; color:var(--car-text); font-size:.78rem; line-height:1.5; }
.carcost-pro-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-bottom:13px; }.carcost-pro-tabs button { min-width:0; display:grid; grid-template-columns:auto 1fr; gap:2px 9px; padding:13px; border:1px solid #c6d8d2; border-radius:16px; background:#fbfcfa; color:var(--car-ink); text-align:left; cursor:pointer; }.carcost-pro-tabs button.is-active { border-color:#43c79b; background:#e7f6f0; }.carcost-pro-tabs span { grid-row:1/3; align-self:center; display:grid; place-items:center; width:27px; height:27px; border-radius:9px; background:#e9f0ee; color:#51726b; font-size:.62rem; font-weight:950; }.carcost-pro-tabs button.is-active span { background:#164f56; color:white; }.carcost-pro-tabs strong { font-size:.76rem; }.carcost-pro-tabs small { color:#6b827d; font-size:.62rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.carcost-pro-workspace { border:1px solid #c3d7d0; border-radius:21px; background:#fbfcfa; overflow:hidden; }.carcost-pro-workspace__head { display:grid; grid-template-columns:minmax(0,.8fr) minmax(260px,1.2fr); gap:20px; align-items:end; padding:19px 20px; border-bottom:1px solid #d1dfdb; background:linear-gradient(120deg,#f5efe2,#e7f4ef); }.carcost-pro-workspace__head span { color:#08765f; font-size:.65rem; font-weight:950; letter-spacing:.1em; }.carcost-pro-workspace__head h3 { margin:5px 0 0; font-size:1.3rem; }.carcost-pro-workspace__head p { margin:0; color:var(--car-text); font-size:.73rem; line-height:1.5; }.carcost-pro-workspace section { padding:18px; }.carcost-pro-workspace section[hidden] { display:none!important; }
.carcost-switch { display:flex; align-items:center; gap:10px; width:fit-content; margin-bottom:5px; cursor:pointer; }.carcost-switch input { position:absolute; opacity:0; }.carcost-switch > span { position:relative; width:42px; height:24px; border-radius:999px; background:#ccd9d5; }.carcost-switch > span::after { content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; border-radius:50%; background:white; transition:.18s; }.carcost-switch input:checked + span { background:#32bc90; }.carcost-switch input:checked + span::after { transform:translateX(18px); }.carcost-switch strong { font-size:.77rem; }
.carcost-pro-fields { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:13px; }.carcost-pro-fields > label { display:grid; gap:7px; color:#46665f; font-size:.72rem; font-weight:850; }.carcost-pro-fields .carcost-input { background:#f7faf8; border-radius:13px; }.carcost-pro-fields .carcost-input input { padding:11px; font-size:.79rem; }.carcost-pro-hint, .carcost-pro-warning { margin:14px 0 0; padding:14px; border-radius:15px; background:#e7f3ef; color:#4b6c65; font-size:.72rem; line-height:1.5; }.carcost-pro-warning { background:#fff5df; color:#6d5b39; }.carcost-pro-warning strong { display:block; color:#71511e; }.carcost-pro-warning p { margin:5px 0 0; }
.carcost-pro-actions { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; padding:14px 20px 19px; }.carcost-pro-actions button { padding:10px 13px; border:1px solid #c2d5ce; border-radius:999px; background:white; color:#235b52; font-size:.72rem; font-weight:900; cursor:pointer; }.carcost-pro-actions button:last-child { justify-self:end; background:#164f56; border-color:#164f56; color:white; }.carcost-pro-actions button:disabled { opacity:.4; cursor:not-allowed; }.carcost-pro-actions span { color:#5c7872; font-size:.69rem; font-weight:900; }
.carcost-error { margin:15px 0 0; padding:13px 15px; border:1px solid #e4b9a9; border-radius:14px; background:#fff0eb; color:#953f2a; font-weight:800; }.carcost-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }.carcost-privacy { display:flex; align-items:center; gap:9px; margin:14px 0 0; color:#69827c; font-size:.7rem; font-weight:750; }.carcost-privacy span { width:6px; height:6px; border-radius:50%; background:var(--car-mint); }
.carcost-result { position:sticky; top:88px; padding:27px; background:linear-gradient(150deg,#102f53 0%,#0f5360 55%,#35634f 100%); color:white; overflow:hidden; }.carcost-result::before { margin:-27px -27px 23px; }.carcost-result::after { content:""; position:absolute; width:280px; height:280px; right:-175px; top:-135px; border:42px solid rgba(57,201,155,.1); border-radius:50%; }.carcost-result__head { position:relative; display:flex; justify-content:space-between; align-items:center; gap:12px; }.carcost-result__head > span { padding:7px 10px; border:1px solid rgba(255,255,255,.19); border-radius:999px; color:#d5e8e4; font-size:.66rem; font-weight:850; }.carcost-result h2 { position:relative; margin:18px 0 8px; font-size:1.9rem; letter-spacing:-.04em; }.carcost-result__lead { position:relative; margin:0 0 17px; color:#c5dad7; font-size:.8rem; line-height:1.52; }
.carcost-result__main { position:relative; display:grid; grid-template-columns:1fr auto; gap:7px 12px; padding:20px; border:1px solid rgba(255,255,255,.18); border-radius:23px; background:linear-gradient(135deg,rgba(18,56,113,.86),rgba(14,108,91,.72)); }.carcost-result__main > span { grid-column:1/-1; color:#bed5d1; font-size:.68rem; font-weight:850; text-transform:uppercase; letter-spacing:.08em; }.carcost-result__main output { grid-column:1/-1; white-space:nowrap; font-size:clamp(2.65rem,4.3vw,3.65rem); line-height:.95; font-weight:950; letter-spacing:-.06em; }.carcost-result__main strong { grid-column:1/-1; justify-self:start; padding:7px 10px; border-radius:999px; background:#e6bd65; color:#23443e; font-size:.64rem; }.carcost-result__main small { grid-column:1/-1; color:#bbd4d0; }
.carcost-result__split { position:relative; display:grid; grid-template-columns:repeat(2,1fr); gap:9px; margin-top:13px; }.carcost-result__split article { min-width:0; padding:13px; border:1px solid rgba(255,255,255,.14); border-radius:16px; background:rgba(255,255,255,.07); }.carcost-result__split span, .carcost-result__split strong, .carcost-result__split small { display:block; }.carcost-result__split span { color:#bad0cd; font-size:.62rem; }.carcost-result__split strong { margin:6px 0 3px; font-size:.84rem; overflow-wrap:anywhere; }.carcost-result__split small { color:#91b4ae; font-size:.6rem; }
.carcost-mix { position:relative; display:grid; gap:10px; margin-top:13px; padding:15px; border:1px solid rgba(255,255,255,.14); border-radius:18px; background:rgba(255,255,255,.07); }.carcost-mix > div { display:grid; grid-template-columns:1fr auto; gap:5px 12px; align-items:center; }.carcost-mix span { color:#c2d7d3; font-size:.65rem; }.carcost-mix span b { color:white; }.carcost-mix i { grid-column:1; height:6px; border-radius:20px; background:rgba(255,255,255,.14); overflow:hidden; }.carcost-mix i em { display:block; height:100%; border-radius:inherit; background:var(--car-mint); }.carcost-mix > div:nth-child(2) i em { background:var(--car-blue); }.carcost-mix > div:nth-child(3) i em { background:var(--car-gold); }.carcost-mix strong { grid-column:2; grid-row:1/3; font-size:.73rem; }
.carcost-result__reading { position:relative; margin-top:13px; padding:15px; border-radius:17px; background:#f8fbfa; color:var(--car-ink); }.carcost-result__reading span { color:#118069; font-size:.63rem; font-weight:950; letter-spacing:.08em; }.carcost-result__reading strong { display:block; margin-top:6px; font-size:.84rem; }.carcost-result__reading p { margin:5px 0 0; color:#4c6c66; font-size:.7rem; line-height:1.48; }.carcost-result__actions { position:relative; display:flex; flex-wrap:wrap; gap:8px; margin-top:13px; }.carcost-result__actions button, .carcost-result__actions a { padding:9px 11px; border:1px solid rgba(255,255,255,.21); border-radius:999px; background:rgba(255,255,255,.08); color:white; font-size:.69rem; font-weight:850; text-decoration:none; cursor:pointer; }

.carcost-overview, .carcost-method, .carcost-use-cases, .carcost-faq, .carcost-related { padding:92px 0; background:var(--car-paper); }.carcost-stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:34px; }.carcost-stat-grid article { padding:25px; border:1px solid #c8d9d3; border-radius:24px; background:rgba(255,255,255,.66); box-shadow:0 16px 34px rgba(31,67,61,.055); }.carcost-stat-grid span { color:#0b856d; font-size:.7rem; font-weight:950; letter-spacing:.1em; }.carcost-stat-grid h3 { margin:19px 0 9px; font-size:1.13rem; }.carcost-stat-grid p { margin:0; color:var(--car-text); font-size:.84rem; line-height:1.55; }
.carcost-detail { padding:92px 0; background:#e5efec; }.carcost-detail__grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(290px,.58fr); gap:22px; margin-top:34px; align-items:start; }.carcost-table-card, .carcost-detail-card { border:1px solid #c1d5ce; border-radius:27px; background:#fbfcfa; overflow:hidden; }.carcost-reading { padding:24px; background:linear-gradient(135deg,#e4f7ef,#edf4f7); }.carcost-reading span { color:#55756e; font-size:.67rem; text-transform:uppercase; font-weight:900; letter-spacing:.08em; }.carcost-reading strong { display:block; margin-top:7px; font-size:1.5rem; }.carcost-reading p { margin:7px 0 0; color:var(--car-text); }.carcost-table-wrap { overflow-x:auto; }.carcost-table-wrap table { width:100%; min-width:690px; border-collapse:collapse; }.carcost-table-wrap th, .carcost-table-wrap td { padding:14px 16px; border-bottom:1px solid #d6e2de; text-align:left; font-size:.79rem; }.carcost-table-wrap th { background:#f3f7f5; color:#58766f; font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; }.carcost-table-wrap tr:last-child td { border-bottom:0; }.carcost-detail-card { padding:25px; background:linear-gradient(150deg,#123f49,#1e5c59); color:white; }.carcost-detail-card h3 { margin:16px 0 21px; font-size:1.55rem; }.carcost-detail-card > div { display:grid; grid-template-columns:1fr auto; gap:12px; padding:14px 0; border-top:1px solid rgba(255,255,255,.14); }.carcost-detail-card span { color:#c4d8d4; font-size:.72rem; }.carcost-detail-card strong { font-size:.8rem; }.carcost-detail-card > p:last-child { margin:19px 0 0; color:#c7d9d5; font-size:.75rem; line-height:1.55; }
.carcost-stress { padding:92px 0; background:#153f45; color:white; }.carcost-stress .mrp-kicker { color:#bff2e3; background:rgba(255,255,255,.09); border-color:rgba(191,242,227,.25); }.carcost-stress__grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(350px,.7fr); gap:clamp(40px,7vw,100px); align-items:center; }.carcost-stress h2 { max-width:790px; margin:22px 0 18px; color:white; font-size:clamp(2.8rem,5vw,5.4rem); line-height:.95; letter-spacing:-.06em; }.carcost-stress p { max-width:700px; color:#c5d9d5; line-height:1.68; }.carcost-stress__score { max-width:620px; display:grid; grid-template-columns:1fr auto; gap:8px 18px; margin-top:28px; padding:21px; border:1px solid rgba(255,255,255,.14); border-radius:21px; background:rgba(255,255,255,.08); }.carcost-stress__score span { color:#bdd3cf; font-size:.7rem; text-transform:uppercase; font-weight:900; letter-spacing:.08em; }.carcost-stress__score strong { grid-row:span 2; font-size:2.3rem; }.carcost-stress__score b { font-size:.8rem; }.carcost-stress__score i { grid-column:1/-1; height:7px; border-radius:20px; background:rgba(255,255,255,.14); overflow:hidden; }.carcost-stress__score i em { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--car-mint),var(--car-gold)); }.carcost-scenarios { padding:22px; border:1px solid rgba(255,255,255,.16); border-radius:27px; background:rgba(255,255,255,.08); }.carcost-scenarios > div { display:flex; justify-content:space-between; gap:14px; padding:17px 3px; border-bottom:1px solid rgba(255,255,255,.13); }.carcost-scenarios > div:last-child { border-bottom:0; }.carcost-scenarios span { color:#c5d8d5; font-size:.8rem; }.carcost-scenarios strong { font-size:.86rem; }
.carcost-method-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:17px; margin-top:34px; }.carcost-method-grid article { padding:29px; border:1px solid #c6d8d2; border-radius:26px; background:#fbfcfa; }.carcost-method-grid span { color:#0b8069; font-size:.69rem; font-weight:900; letter-spacing:.08em; }.carcost-method-grid h3 { margin:20px 0 11px; font-size:1.3rem; }.carcost-method-grid p { color:var(--car-text); line-height:1.62; }.carcost-method-grid code { display:block; margin-top:20px; padding:14px; border-left:3px solid var(--car-mint); border-radius:0 13px 13px 0; background:#e8f3ef; color:#23534b; white-space:normal; }
.carcost-guide { padding:100px 0; background:#edf3f1; }.carcost-guide-map { display:grid; grid-template-columns:1fr 34px 1fr 34px 1fr 34px 1fr; align-items:center; gap:8px; margin-top:38px; padding:18px; border:1px solid #bfd3cc; border-radius:27px; background:rgba(255,255,255,.55); box-shadow:0 18px 45px rgba(36,72,66,.06); }.carcost-guide-map > div { min-width:0; padding:17px 15px; border-radius:18px; background:#fbfcfa; }.carcost-guide-map > div:nth-of-type(3) { background:#e4f5ef; }.carcost-guide-map span, .carcost-guide-map strong, .carcost-guide-map small { display:block; }.carcost-guide-map span { margin-bottom:11px; color:#0b8069; font-size:.66rem; font-weight:950; letter-spacing:.1em; }.carcost-guide-map strong { font-size:.86rem; }.carcost-guide-map small { margin-top:4px; color:#69827c; font-size:.68rem; line-height:1.35; }.carcost-guide-map > i { height:1px; background:#9ebbb3; }
.carcost-article-grid { counter-reset:car-step; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:24px; }.carcost-article-grid article { counter-increment:car-step; position:relative; min-width:0; padding:65px 29px 29px; border:1px solid #c5d7d1; border-radius:25px; background:rgba(255,255,255,.74); box-shadow:0 17px 38px rgba(36,72,66,.05); overflow:hidden; }.carcost-article-grid article::before { content:counter(car-step,decimal-leading-zero); position:absolute; top:21px; left:29px; display:grid; place-items:center; min-width:37px; height:27px; padding:0 8px; border-radius:10px; background:#e2f1ec; color:#08765f; font-size:.65rem; font-weight:950; }.carcost-article-grid article::after { content:""; position:absolute; inset:0 0 auto; height:4px; background:linear-gradient(90deg,var(--car-mint),var(--car-blue),var(--car-gold)); }.carcost-article-grid h3 { margin:0 0 15px; font-size:1.38rem; letter-spacing:-.025em; }.carcost-article-grid p { margin:0 0 12px; color:var(--car-text); line-height:1.7; }.carcost-article-grid p:last-child { margin-bottom:0; }
.carcost-article-grid article:nth-child(1), .carcost-article-grid article:nth-child(4), .carcost-article-grid article:nth-child(7), .carcost-article-grid article:nth-child(10), .carcost-article-grid article:nth-child(13), .carcost-article-grid article:nth-child(16) { grid-column:1/-1; display:grid; grid-template-columns:minmax(270px,.72fr) minmax(0,1fr); gap:8px 46px; padding:71px 39px 37px; }.carcost-article-grid article:nth-child(1) { background:linear-gradient(130deg,#f8f4e9,#e5f5ef); }.carcost-article-grid article:nth-child(4) { background:linear-gradient(130deg,#e9f2f6,#f8faf7); }.carcost-article-grid article:nth-child(7) { background:linear-gradient(135deg,#123e48,#275e59); border-color:#315f5d; }.carcost-article-grid article:nth-child(10) { background:linear-gradient(130deg,#f8f2e5,#eef5ee); }.carcost-article-grid article:nth-child(13) { background:linear-gradient(130deg,#e5f3ef,#f7f4e9); }.carcost-article-grid article:nth-child(16) { background:linear-gradient(130deg,#eaf1f5,#f8f5eb); }.carcost-article-grid article:nth-child(1) h3, .carcost-article-grid article:nth-child(4) h3, .carcost-article-grid article:nth-child(7) h3, .carcost-article-grid article:nth-child(10) h3, .carcost-article-grid article:nth-child(13) h3, .carcost-article-grid article:nth-child(16) h3 { grid-column:1; grid-row:1/span 3; align-self:center; margin:0; font-size:clamp(2rem,3vw,3.1rem); line-height:.98; letter-spacing:-.055em; }.carcost-article-grid article:nth-child(1) p, .carcost-article-grid article:nth-child(4) p, .carcost-article-grid article:nth-child(7) p, .carcost-article-grid article:nth-child(10) p, .carcost-article-grid article:nth-child(13) p, .carcost-article-grid article:nth-child(16) p { grid-column:2; }.carcost-article-grid article:nth-child(7) h3 { color:white; }.carcost-article-grid article:nth-child(7) p { color:#d1e0dd; }.carcost-article-grid article:nth-child(7)::before { background:rgba(255,255,255,.13); color:#9ef0d6; }
.carcost-case-grid, .carcost-source-grid, .carcost-related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:34px; }.carcost-case-grid article { padding:28px; border:1px solid #c8d8d3; border-radius:24px; background:#fbfcfa; }.carcost-case-grid span { color:#0b846c; font-size:.68rem; font-weight:950; letter-spacing:.09em; }.carcost-case-grid h3 { margin:17px 0 11px; font-size:1.3rem; }.carcost-case-grid p { color:var(--car-text); line-height:1.6; }.carcost-case-grid strong { display:block; margin-top:18px; color:#174d45; font-size:.78rem; }
.carcost-checklist { padding:92px 0; background:#dceae6; }.carcost-checklist-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:34px; }.carcost-checklist-grid article { display:grid; grid-template-columns:45px 1fr; gap:14px; padding:21px; border:1px solid #bfd2cb; border-radius:21px; background:rgba(255,255,255,.68); }.carcost-checklist-grid article > span { display:grid; place-items:center; width:41px; height:41px; border-radius:13px; background:#164f56; color:white; font-size:.69rem; font-weight:900; }.carcost-checklist-grid h3 { margin:1px 0 6px; font-size:1.04rem; }.carcost-checklist-grid p { margin:0; color:var(--car-text); line-height:1.52; }
.carcost-sources { padding:90px 0; background:#123c43; color:white; }.carcost-sources .mrp-kicker { color:#bff2e3; background:rgba(255,255,255,.09); border-color:rgba(191,242,227,.25); }.carcost-sources .mrp-heading h2 { color:white; }.carcost-sources .mrp-heading > p:last-child { color:#c5d8d4; }.carcost-source-grid { grid-template-columns:repeat(4,1fr); }.carcost-source-grid a { min-width:0; padding:24px; border:1px solid rgba(255,255,255,.17); border-radius:22px; background:rgba(255,255,255,.07); color:white; text-decoration:none; transition:.18s; }.carcost-source-grid a:hover { transform:translateY(-3px); background:rgba(255,255,255,.11); }.carcost-source-grid span, .carcost-source-grid strong, .carcost-source-grid small { display:block; }.carcost-source-grid span { color:#6fe0bd; font-size:.66rem; font-weight:950; letter-spacing:.08em; }.carcost-source-grid strong { margin:16px 0 8px; }.carcost-source-grid small { color:#c4d6d3; line-height:1.48; }
.carcost-faq-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:30px; }.carcost-faq details { border:1px solid #c6d8d2; border-radius:18px; background:#fbfcfa; overflow:hidden; }.carcost-faq summary { padding:18px 20px; cursor:pointer; font-weight:900; list-style:none; }.carcost-faq summary::-webkit-details-marker { display:none; }.carcost-faq summary::before { content:"+"; display:inline-grid; place-items:center; width:24px; height:24px; margin-right:10px; border-radius:50%; background:#e4f3ed; color:#08765f; }.carcost-faq details[open] summary::before { content:"−"; }.carcost-faq details p { margin:0; padding:0 20px 20px 54px; color:var(--car-text); line-height:1.6; }.carcost-related { padding-top:20px; }.carcost-related-grid { grid-template-columns:repeat(4,1fr); }.carcost-related-grid a { padding:23px; border:1px solid #c7d8d3; border-radius:22px; background:#fbfcfa; color:var(--car-ink); text-decoration:none; }.carcost-related-grid span { display:grid; place-items:center; width:42px; height:42px; border-radius:13px; background:#164f56; color:white; font-size:.7rem; font-weight:900; }.carcost-related-grid strong, .carcost-related-grid small { display:block; }.carcost-related-grid strong { margin:19px 0 7px; }.carcost-related-grid small { color:var(--car-text); line-height:1.46; }

@media (max-width:1120px) {
  .carcost-hero__grid { grid-template-columns:1fr 410px; gap:40px; }.carcost-hero__copy h1 { font-size:clamp(3.5rem,6vw,5.2rem); }.carcost-stage { grid-template-columns:minmax(0,1.1fr) minmax(365px,.75fr); }.carcost-source-grid, .carcost-related-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px) {
  .carcost-hero { padding-bottom:48px; }.carcost-hero__grid { grid-template-columns:1fr; }.carcost-visual { display:none; }.carcost-stage { grid-template-columns:1fr; }.carcost-result { position:relative; top:auto; }.carcost-stat-grid { grid-template-columns:repeat(2,1fr); }.carcost-detail__grid, .carcost-stress__grid { grid-template-columns:1fr; }.carcost-method-grid, .carcost-case-grid { grid-template-columns:1fr; }.carcost-guide-map { grid-template-columns:repeat(4,1fr); }.carcost-guide-map > i { display:none; }.carcost-article-grid { grid-template-columns:1fr; }.carcost-article-grid article:nth-child(1), .carcost-article-grid article:nth-child(4), .carcost-article-grid article:nth-child(7), .carcost-article-grid article:nth-child(10), .carcost-article-grid article:nth-child(13), .carcost-article-grid article:nth-child(16) { grid-column:auto; display:block; padding:65px 29px 29px; }.carcost-article-grid article:nth-child(1) h3, .carcost-article-grid article:nth-child(4) h3, .carcost-article-grid article:nth-child(7) h3, .carcost-article-grid article:nth-child(10) h3, .carcost-article-grid article:nth-child(13) h3, .carcost-article-grid article:nth-child(16) h3 { margin-bottom:15px; font-size:clamp(1.8rem,5vw,2.6rem); }
}
@media (max-width:640px) {
  .carcost-hero { padding:18px 0 34px; }.carcost-hero .mrp-breadcrumbs { margin-bottom:22px; }.carcost-hero__copy h1 { margin-top:16px; font-size:clamp(3rem,15vw,4.3rem); line-height:.9; }.carcost-hero__copy > p:not(.mrp-kicker) { font-size:1rem; }.carcost-hero__actions { display:grid; }.carcost-hero__actions .mrp-btn { width:100%; }.carcost-hero__proof { gap:7px; }.carcost-hero__proof li { padding:7px 10px; font-size:.71rem; }.carcost-nav { position:relative; }.carcost-nav__inner { flex-wrap:wrap; justify-content:center; gap:7px; overflow:visible; }.carcost-nav a { flex:0 0 calc(33.333% - 5px); padding:8px 5px; text-align:center; }.carcost-calculator { padding:26px 0 60px; }.carcost-form, .carcost-result { border-radius:23px; }.carcost-form { padding:22px 18px; }.carcost-form::before { margin:-22px -18px 20px; }.carcost-form__head { display:block; }.carcost-live { width:fit-content; margin-top:12px; }.carcost-form__head h2 { font-size:2.25rem; }.carcost-presets { grid-template-columns:1fr; }.carcost-presets button { display:grid; grid-template-columns:38px 1fr; gap:0 10px; align-items:center; padding:13px 15px; }.carcost-presets span { grid-row:1/3; margin:0; }.carcost-presets small { margin-top:2px; }.carcost-drive { grid-template-columns:repeat(3,1fr); }.carcost-drive::before { grid-column:1/-1; }.carcost-field-grid { grid-template-columns:1fr; }.carcost-field--wide { grid-column:auto; }.carcost-pro__body { padding:13px; }.carcost-pro-tabs { grid-template-columns:1fr; }.carcost-pro-workspace__head { grid-template-columns:1fr; gap:9px; padding:17px; }.carcost-pro-workspace section { padding:12px; }.carcost-pro-fields { grid-template-columns:1fr; }.carcost-pro-actions { grid-template-columns:1fr 1fr; padding:13px 12px 16px; }.carcost-pro-actions span { grid-column:1/-1; grid-row:1; justify-self:center; }.carcost-pro-actions button:first-child { grid-column:1; grid-row:2; }.carcost-pro-actions button:last-child { grid-column:2; grid-row:2; }.carcost-result { padding:22px 18px; }.carcost-result::before { margin:-22px -18px 19px; }.carcost-result h2 { font-size:1.7rem; }.carcost-result__main output { font-size:2.8rem; }.carcost-overview, .carcost-method, .carcost-use-cases, .carcost-faq, .carcost-related, .carcost-detail, .carcost-stress, .carcost-guide, .carcost-checklist, .carcost-sources { padding:64px 0; }.carcost-page .mrp-heading h2 { font-size:clamp(2.35rem,12vw,3.4rem); line-height:.96; overflow-wrap:break-word; }.carcost-page .mrp-heading--split { display:block; }.carcost-page .mrp-heading--split > p { margin-top:18px; }.carcost-stat-grid, .carcost-checklist-grid, .carcost-source-grid, .carcost-faq-grid, .carcost-related-grid { grid-template-columns:1fr; }.carcost-stress h2 { font-size:clamp(2.7rem,13vw,4rem); }.carcost-guide-map { grid-template-columns:repeat(2,1fr); gap:8px; padding:10px; }.carcost-guide-map > div { padding:14px 12px; }.carcost-article-grid article, .carcost-article-grid article:nth-child(1), .carcost-article-grid article:nth-child(4), .carcost-article-grid article:nth-child(7), .carcost-article-grid article:nth-child(10), .carcost-article-grid article:nth-child(13), .carcost-article-grid article:nth-child(16) { padding:59px 20px 22px; }.carcost-article-grid article::before { top:18px; left:20px; }.carcost-checklist-grid article { grid-template-columns:40px 1fr; padding:18px; }.carcost-faq details p { padding-left:20px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.carcost-page *, .carcost-page *::before, .carcost-page *::after { transition:none!important; animation:none!important; } }