/* Content pages (guides, fare calculators). Loaded after the home page stylesheet, so it reuses its tokens
   (--ink, --green, --dkgreen, --grey, --r, --pad), its buttons (.btn, .btn-dark, .btn-line, .btn-white) and its
   closing call to action (.cta-wrap / .cta). Everything here is scoped under .cx. */
.cx{display:block;padding-bottom:8px}
.cx a{color:inherit}
.cx a.btn-white,.cx a.btn-line{color:var(--ink)}
.cx a.btn-dark{color:#fff}
.cx-crumbs{max-width:1240px;margin:0 auto;padding:20px var(--pad) 0;font-size:13px;line-height:20px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px}
.cx-crumbs a{text-decoration:none}
.cx-crumbs a:hover{text-decoration:underline}
.cx-sep{opacity:.5}

/* Page head */
.cx-head{max-width:1240px;margin:0 auto;padding:20px var(--pad) 8px}
.cx-kicker{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--dkgreen);background:#e9f6ec;border-radius:100px;padding:4px 10px}
.cx-head h1{font-size:34px;line-height:40px;letter-spacing:-.02em;font-weight:700;margin-top:14px;max-width:880px}
.cx-lede{font-size:18px;line-height:28px;color:rgba(10,10,10,.75);margin-top:14px;max-width:820px}
.cx-meta{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;line-height:20px;color:var(--muted);margin-top:14px}
.cx-meta b{color:var(--ink);font-weight:600}
@media (min-width:810px){.cx-head h1{font-size:44px;line-height:50px}}

/* Two columns: article + side rail */
.cx-grid{max-width:1240px;margin:0 auto;padding:16px var(--pad) 0;display:grid;gap:32px}
@media (min-width:1100px){.cx-grid{grid-template-columns:minmax(0,1fr) 300px;gap:48px}}
.cx-rail{display:none}
@media (min-width:1100px){.cx-rail{display:block}.cx-rail-in{position:sticky;top:20px;display:grid;gap:16px}}
.cx-toc{background:var(--light);border-radius:var(--r);padding:16px}
.cx-toc p{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:8px}
.cx-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.cx-toc a{display:block;font-size:14px;line-height:20px;padding:5px 8px;border-radius:8px;text-decoration:none}
.cx-toc a:hover{background:#fff}
.cx-side-cta{background:var(--dkgreen);color:#fff;border-radius:var(--r);padding:18px}
.cx-side-cta h2{font-size:17px;line-height:23px;font-weight:600}
.cx-side-cta p{font-size:14px;line-height:20px;color:var(--wmuted);margin-top:6px}
.cx-side-cta .btn{margin-top:14px}

/* Article body */
.cx-body{min-width:0;font-size:17px;line-height:28px}
.cx-body > * + *{margin-top:16px}
.cx-body h2{font-size:26px;line-height:32px;letter-spacing:-.01em;font-weight:700;margin-top:48px;scroll-margin-top:20px}
.cx-body h3{font-size:19px;line-height:26px;font-weight:600;margin-top:28px}
.cx-body p,.cx-body li{color:rgba(10,10,10,.82)}
.cx-body ul,.cx-body ol{padding-left:22px}
.cx-body .fc-lines{padding:0}
.cx-body li + li{margin-top:6px}
.cx-body a{color:#137a2a;text-decoration:underline;text-underline-offset:2px}
.cx-body a.btn{text-decoration:none}
.cx-body strong{color:var(--ink)}
.cx-answer{background:#e9f6ec;border-radius:var(--r);padding:18px 20px;border-left:4px solid var(--green)}
.cx-answer p{color:var(--ink)}
.cx-note{font-size:14px;line-height:22px;color:var(--muted)}
.cx-callout{background:var(--light);border-radius:var(--r);padding:16px 18px;font-size:15px;line-height:24px}

/* Tables */
.cx-table{overflow-x:auto;border:1px solid rgba(10,10,10,.1);border-radius:var(--r)}
.cx-table table{width:100%;border-collapse:collapse;font-size:15px;line-height:22px}
.cx-table th,.cx-table td{padding:10px 14px;text-align:left;vertical-align:top;border-bottom:1px solid rgba(10,10,10,.08)}
.cx-table thead th{background:var(--light);font-size:13px;font-weight:600;color:rgba(10,10,10,.7);white-space:nowrap}
.cx-table tbody tr:last-child td{border-bottom:0}
.cx-table td.num,.cx-table th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.cx-table caption{caption-side:bottom;text-align:left;padding:10px 14px;font-size:13px;color:var(--muted)}

/* Cards and link grids */
.cx-cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.cx-card{display:block;border:1px solid rgba(10,10,10,.1);border-radius:var(--r);padding:14px 16px;text-decoration:none!important;color:var(--ink)!important;transition:border-color .15s,box-shadow .15s}
.cx-card:hover{border-color:var(--green);box-shadow:0 4px 14px rgba(0,0,0,.06)}
.cx-card b{display:block;font-size:16px;line-height:22px}
.cx-card span{display:block;font-size:14px;line-height:20px;color:var(--muted);margin-top:4px}

/* FAQ */
.cx-faq{display:grid;gap:8px}
.cx-faq details{border:1px solid rgba(10,10,10,.1);border-radius:var(--r);padding:0 16px}
.cx-faq summary{cursor:pointer;list-style:none;padding:14px 28px 14px 0;font-weight:600;font-size:16px;line-height:24px;position:relative}
.cx-faq summary::-webkit-details-marker{display:none}
.cx-faq summary::after{content:"+";position:absolute;right:0;top:12px;font-size:20px;color:var(--muted)}
.cx-faq details[open] summary::after{content:"–"}
.cx-faq details > div{padding:0 0 14px;font-size:16px;line-height:26px;color:rgba(10,10,10,.8)}
.cx-faq details > div > * + *{margin-top:10px}

/* Sources */
.cx-sources{font-size:14px;line-height:22px}
.cx-sources li{color:var(--muted)}

/* Fare calculator */
.fc{border:1px solid rgba(10,10,10,.1);border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.06);background:#fff}
.fc-top{display:grid;gap:0}
@media (min-width:880px){.fc-top{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.fc-form{padding:20px;display:grid;gap:14px;align-content:start}
.fc-row{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.fc-field{display:grid;gap:6px;min-width:0;align-content:start}
.fc-field > span,.fc-legend{font-size:13px;font-weight:600;color:rgba(10,10,10,.7)}
.fc-field input,.fc-field select{height:44px;border:1px solid rgba(10,10,10,.15);border-radius:10px;padding:0 12px;font:inherit;font-size:16px;background:#fff;color:var(--ink);width:100%;box-sizing:border-box}
.fc-field input:focus,.fc-field select:focus{outline:2px solid var(--green);outline-offset:1px;border-color:transparent}
.fc-hint{font-size:12px;line-height:16px;color:var(--muted)}
.fc-seg{display:flex;flex-wrap:wrap;gap:6px}
.fc-seg label{position:relative}
.fc-seg input{position:absolute;opacity:0;pointer-events:none}
.fc-seg span{display:inline-flex;align-items:center;height:34px;padding:0 12px;border-radius:100px;border:1px solid rgba(10,10,10,.15);font-size:14px;cursor:pointer;user-select:none}
.fc-seg input:checked + span{background:var(--ink);border-color:var(--ink);color:#fff}
.fc-seg input:focus-visible + span{outline:2px solid var(--green);outline-offset:2px}
.fc-checks{display:grid;gap:8px}
.fc-check{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:22px;cursor:pointer}
.fc-check input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--dkgreen);flex:0 0 auto}
.fc-check small{display:block;font-size:12px;line-height:16px;color:var(--muted)}
.cx-body .fc-out p,.cx-body .fc-out li{color:inherit}
.fc-out{background:var(--dkgreen);color:#fff;padding:20px;display:grid;gap:14px;align-content:start}
.cx-body .fc-out .fc-total-l,.cx-body .fc-out .fc-range,.cx-body .fc-out .fc-fine{color:var(--wmuted)}
.fc-total-l{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.fc-total{font-size:46px;line-height:52px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.fc-range{font-size:14px;color:var(--wmuted)}
.fc-lines{list-style:none;margin:0;padding:0;font-size:14px;line-height:20px;display:grid;gap:6px}
.fc-lines li{display:flex;justify-content:space-between;gap:12px;color:rgba(255,255,255,.88)}
.fc-lines li b{font-weight:600;font-variant-numeric:tabular-nums;color:#fff}
.fc-lines li.fc-sum{border-top:1px solid rgba(255,255,255,.2);padding-top:8px;margin-top:2px;font-weight:600;color:#fff}
.fc-compare{background:rgba(255,255,255,.1);border-radius:10px;padding:10px 12px;font-size:14px;line-height:20px}
.fc-compare b{color:#fff}
.fc-fine{font-size:12px;line-height:18px;color:var(--wmuted)}
.fc-fine a{color:#fff}
.fc-bar{border-top:1px solid rgba(10,10,10,.08);padding:12px 20px;font-size:13px;line-height:20px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 16px;background:var(--light)}

/* Closing call to action spacing inside content pages */
.cx .cta-wrap{margin-top:56px}
@media (prefers-reduced-motion:reduce){.cx-card{transition:none}}