.commute-page { padding-bottom: 52px; }
.commute-hero { max-width: 910px; padding-top: 48px; }
.commute-hero h1 { max-width: 760px; }
.commute-hero p { max-width: 720px; }
.commute-page-calculator { padding-top: 10px; }
.commute-summary { margin-top: 25px; }
.commute-summary h2 { margin: 1px 0 3px; font-size: 12px; }
.vehicle-step .field-help { margin: 0 0 10px; }
.vehicle-choice { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.vehicle-choice label { position: relative; display: block; min-width: 0; cursor: pointer; }
.vehicle-choice input { position: absolute; opacity: 0; pointer-events: none; }
.vehicle-choice span { display: grid; min-height: 68px; gap: 5px; justify-items: center; padding: 12px 8px; border: 1px solid #d8e9de; border-radius: 11px; color: #34525b; background: #fbfefc; font-size: 18px; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.vehicle-choice strong { font-size: 11px; }.vehicle-choice input:checked + span { border-color: #099443; color: #087b37; background: #effbf2; box-shadow: 0 0 0 3px rgba(9,148,67,.1); }.vehicle-choice input:focus-visible + span { outline: 3px solid rgba(9,148,67,.28); outline-offset: 2px; }
.public-charging { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; padding: 9px 10px; border-radius: 10px; color: #41606a; background: #f0f8f2; font-size: 12px; }.public-charging strong { color: #087d38; }.public-charging button { border: 0; color: #087d38; background: transparent; font: inherit; font-weight: 850; cursor: pointer; text-decoration: underline; }.public-charging label { display: flex; gap: 7px; align-items: center; width: 100%; font-weight: 750; }.public-charging .input-wrap { flex: 1 1 130px; }
.primary-result { margin: 13px 0; padding: 16px 18px; border: 1px solid #bce5c8; border-radius: 13px; color: #0a7b37; background: linear-gradient(110deg,#edfbf1,#f9fffb); }.primary-result p { margin: 0 0 4px; color: #40636d; font-size: 12px; font-weight: 800; }.primary-result strong { display: block; font-size: clamp(24px,2.8vw,33px); letter-spacing: -1.3px; line-height: 1.08; }.primary-result span { display: block; margin-top: 5px; color: #54747b; font-size: 12px; }
.next-steps { margin-top: 13px; padding: 17px; border: 1px solid #d4e9da; border-radius: 13px; background: #f8fdf9; }.next-steps h3 { margin: 0; color: #1c4350; font-size: 15px; }.next-steps > p { margin: 4px 0 11px; color: #637a84; font-size: 12px; }.next-steps > div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }.next-steps a { display: block; min-width: 0; padding: 11px; border: 1px solid #d8ebe0; border-radius: 10px; color: #1f4650; background: #fff; text-decoration: none; }.next-steps a:hover { border-color: #6dc78c; }.next-steps a strong,.next-steps a span { display: block; }.next-steps a strong { font-size: 12px; }.next-steps a span { margin-top: 4px; color: #087d38; font-size: 10px; font-weight: 750; line-height: 1.35; }
.commute-content { display: grid; max-width: 1040px; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 17px; margin-top: 42px; }
.commute-content > section { padding: 22px; border: 1px solid #dcebe1; border-radius: 15px; background: #fff; box-shadow: 0 6px 17px rgba(20,67,55,.045); }
.commute-content > section:first-child,.commute-content .commute-faq,.commute-content .tool-links { grid-column: 1 / -1; }
.commute-content h2 { margin: 0 0 8px; color: #163c49; font-size: 21px; letter-spacing: -.75px; }
.commute-content p,.commute-content li { color: #526b78; font-size: 14px; line-height: 1.55; }
.commute-content p { margin: 0; }
.commute-content ul { margin: 0; padding-left: 20px; }
.commute-example { border-color: #c5e9d0!important; background: linear-gradient(135deg,#eefaf1,#fff)!important; }
.commute-includes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.commute-includes > div + div { padding-left: 20px; border-left: 1px solid #dcebe1; }
.commute-faq details { padding: 14px 0; border-top: 1px solid #e3eee6; }
.commute-faq details:first-of-type { border-top: 0; }
.commute-faq summary { color: #1b4050; font-size: 14px; font-weight: 800; cursor: pointer; }
.commute-faq details p { margin-top: 8px; }
.commute-content .tool-links { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; border: 0; background: transparent; box-shadow: none; }
.commute-content .tool-links a { padding: 10px 13px; border: 1px solid #cfe8d7; border-radius: 10px; color: #087a36; background: #f3fbf5; font-size: 13px; font-weight: 800; text-decoration: none; }
.commute-content .tool-links a:hover { color: #fff; background: #078b3d; }
body.dark .commute-content > section { border-color: #2d5137; background: #172b1d; }
body.dark .commute-content h2,body.dark .commute-faq summary { color: #ecfff1; }
body.dark .commute-content p,body.dark .commute-content li { color: #bfd2c4; }
body.dark .commute-example { background: #17351f!important; }
body.dark .public-charging,body.dark .next-steps { background: #17301f; } body.dark .primary-result { border-color: #2f8b4b; background: #173a23; } body.dark .primary-result p,body.dark .primary-result span,body.dark .next-steps > p { color: #bdd5c3; } body.dark .next-steps h3,body.dark .next-steps a { color: #e8f9ec; } body.dark .next-steps a { border-color: #2d5137; background: #172b1d; }
@media (max-width: 900px) { .commute-content { grid-template-columns: 1fr; }.commute-content > section:first-child,.commute-content .commute-faq,.commute-content .tool-links { grid-column: auto; }.next-steps > div { grid-template-columns: 1fr; } }
@media (max-width: 570px) { .commute-hero { padding-top: 31px; }.commute-content { gap: 12px; margin-top: 29px; }.commute-content > section { padding: 17px; }.commute-content h2 { font-size: 19px; }.vehicle-choice { grid-template-columns: 1fr; }.vehicle-choice span { min-height: 56px; grid-template-columns: 24px 1fr; align-items: center; justify-items: start; }.commute-includes { grid-template-columns: 1fr; gap: 15px; }.commute-includes > div + div { padding-top: 15px; padding-left: 0; border-top: 1px solid #dcebe1; border-left: 0; }.commute-summary { grid-template-columns: 1fr; }.commute-summary .share-card { display: grid; } }