/* ============================================================
   main.css — Driving Test Routes UK
   
   Contents:
   01. Variables & Reset
   02. Base & Typography
   03. Utility Classes
   04. Navigation
   05. Hero
   06. Page Layout
   07. Sections
   08. Centre Info Cards
   09. Stats Row
   10. Frequency Table
   11. Roundabouts
   12. Hotspots
   13. Pseudo-update Elements
   14. Route Accordion
   15. Step List
   16. Road Type Bars
   17. FAQ
   18. Sidebar
   19. App CTA Card
   20. Nearby Centres
   21. App Banner
   22. Footer
   23. Error Page
   24. Page Hero (shared)
   25. Directory Page
   26. Pass Rates Page
   27. Waiting Times Page
   28. Homepage
   29. Static Prose Pages
   30. Responsive
   ============================================================ */




/* ── Route difficulty badges ── */
.rt-badges-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    flex-shrink: 0;
}

.rt-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.diff-badge.diff-easy        { background: rgba(16,185,129,0.15); color: #059669; }
.diff-badge.diff-moderate    { background: rgba(59,130,246,0.15);  color: #2563eb; }
.diff-badge.diff-challenging { background: rgba(245,158,11,0.15);  color: #d97706; }
.diff-badge.diff-demanding   { background: rgba(239,68,68,0.15);   color: #dc2626; }

.dur-badge {
    background: var(--surface);
    color: var(--muted);
    border: 1px solid var(--border);
}
.route-trigger.open .dur-badge {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.6);
    border-color: rgba(255,255,255,0.15);
}

/* ── Road Type Split ── */
.road-split {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}

.split-row {
    display: grid;
    grid-template-columns: 140px 1fr 40px;
    align-items: center;
    gap: 12px;
    font-size: 14px;
}

.split-label {
    color: var(--body);
    font-size: 13px;
}

.split-bar-wrap {
    background: var(--surface);
    border-radius: 4px;
    height: 10px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.split-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s ease;
}

.split-pct {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    text-align: right;
}

.split-caveat {
    font-size: 12px;
    color: var(--muted);
    margin-top: 4px;
}

/* ── What to Expect cards ── */
.expect-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.expect-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    font-size: 14px;
    color: var(--text);
    line-height: 1.55;
}

.expect-item-icon {
    color: var(--teal);
    flex-shrink: 0;
    margin-top: 2px;
}

.expect-item-text {
    flex: 1;
}

@media (max-width: 600px) {
    .split-row { grid-template-columns: 110px 1fr 36px; }
}

/* ═══════════════════════════════════════════════════════════════
   ICON SYSTEM
   Usage: <span class="icon icon-apple"></span>
   All icons rendered as CSS mask over a currentColor background.
   Size controlled by width/height on .icon or modifier classes.
   ═══════════════════════════════════════════════════════════════ */

.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    background-color: currentColor;
    flex-shrink: 0;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Size modifiers */
.icon-sm  { width: 14px; height: 14px; }
.icon-md  { width: 18px; height: 18px; }
.icon-lg  { width: 24px; height: 24px; }
.icon-xl  { width: 32px; height: 32px; }

/* ── Apple logo ── */
.icon-apple {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2216%22%20height=%2216%22%20fill=%22currentColor%22%20class=%22bi%20bi-apple%22%20viewBox=%220%200%2016%2016%22%3E%20%3Cpath%20d=%22M11.182.008C11.148-.03%209.923.023%208.857%201.18c-1.066%201.156-.902%202.482-.878%202.516s1.52.087%202.475-1.258.762-2.391.728-2.43m3.314%2011.733c-.048-.096-2.325-1.234-2.113-3.422s1.675-2.789%201.698-2.854-.597-.79-1.254-1.157a3.7%203.7%200%200%200-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074%202.237-.652%201.482-.311%203.83-.067%204.56s.625%201.924%201.273%202.796c.576.984%201.34%201.667%201.659%201.899s1.219.386%201.843.067c.502-.308%201.408-.485%201.766-.472.357.013%201.061.154%201.782.539.571.197%201.111.115%201.652-.105.541-.221%201.324-1.059%202.238-2.758q.52-1.185.473-1.282%22/%3E%20%3Cpath%20d=%22M11.182.008C11.148-.03%209.923.023%208.857%201.18c-1.066%201.156-.902%202.482-.878%202.516s1.52.087%202.475-1.258.762-2.391.728-2.43m3.314%2011.733c-.048-.096-2.325-1.234-2.113-3.422s1.675-2.789%201.698-2.854-.597-.79-1.254-1.157a3.7%203.7%200%200%200-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074%202.237-.652%201.482-.311%203.83-.067%204.56s.625%201.924%201.273%202.796c.576.984%201.34%201.667%201.659%201.899s1.219.386%201.843.067c.502-.308%201.408-.485%201.766-.472.357.013%201.061.154%201.782.539.571.197%201.111.115%201.652-.105.541-.221%201.324-1.059%202.238-2.758q.52-1.185.473-1.282%22/%3E%20%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2216%22%20height=%2216%22%20fill=%22currentColor%22%20class=%22bi%20bi-apple%22%20viewBox=%220%200%2016%2016%22%3E%20%3Cpath%20d=%22M11.182.008C11.148-.03%209.923.023%208.857%201.18c-1.066%201.156-.902%202.482-.878%202.516s1.52.087%202.475-1.258.762-2.391.728-2.43m3.314%2011.733c-.048-.096-2.325-1.234-2.113-3.422s1.675-2.789%201.698-2.854-.597-.79-1.254-1.157a3.7%203.7%200%200%200-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074%202.237-.652%201.482-.311%203.83-.067%204.56s.625%201.924%201.273%202.796c.576.984%201.34%201.667%201.659%201.899s1.219.386%201.843.067c.502-.308%201.408-.485%201.766-.472.357.013%201.061.154%201.782.539.571.197%201.111.115%201.652-.105.541-.221%201.324-1.059%202.238-2.758q.52-1.185.473-1.282%22/%3E%20%3Cpath%20d=%22M11.182.008C11.148-.03%209.923.023%208.857%201.18c-1.066%201.156-.902%202.482-.878%202.516s1.52.087%202.475-1.258.762-2.391.728-2.43m3.314%2011.733c-.048-.096-2.325-1.234-2.113-3.422s1.675-2.789%201.698-2.854-.597-.79-1.254-1.157a3.7%203.7%200%200%200-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074%202.237-.652%201.482-.311%203.83-.067%204.56s.625%201.924%201.273%202.796c.576.984%201.34%201.667%201.659%201.899s1.219.386%201.843.067c.502-.308%201.408-.485%201.766-.472.357.013%201.061.154%201.782.539.571.197%201.111.115%201.652-.105.541-.221%201.324-1.059%202.238-2.758q.52-1.185.473-1.282%22/%3E%20%3C/svg%3E");
}

/* ── Google Play / Android triangle ── */
.icon-android {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2216%22%20height=%2216%22%20fill=%22currentColor%22%20class=%22bi%20bi-google-play%22%20viewBox=%220%200%2016%2016%22%3E%20%3Cpath%20d=%22M14.222%209.374c1.037-.61%201.037-2.137%200-2.748L11.528%205.04%208.32%208l3.207%202.96zm-3.595%202.116L7.583%208.68%201.03%2014.73c.201%201.029%201.36%201.61%202.303%201.055zM1%2013.396V2.603L6.846%208zM1.03%201.27l6.553%206.05%203.044-2.81L3.333.215C2.39-.341%201.231.24%201.03%201.27%22/%3E%20%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2216%22%20height=%2216%22%20fill=%22currentColor%22%20class=%22bi%20bi-google-play%22%20viewBox=%220%200%2016%2016%22%3E%20%3Cpath%20d=%22M14.222%209.374c1.037-.61%201.037-2.137%200-2.748L11.528%205.04%208.32%208l3.207%202.96zm-3.595%202.116L7.583%208.68%201.03%2014.73c.201%201.029%201.36%201.61%202.303%201.055zM1%2013.396V2.603L6.846%208zM1.03%201.27l6.553%206.05%203.044-2.81L3.333.215C2.39-.341%201.231.24%201.03%201.27%22/%3E%20%3C/svg%3E");
}


/* ── Road ── */
.icon-road {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M20.5%203l-.16.03L15%205.1%209%203%203.36%204.9c-.21.07-.36.25-.36.48V20.5c0%20.28.22.5.5.5l.16-.03L9%2018.9l6%202.1%205.64-1.9c.21-.07.36-.25.36-.48V3.5c0-.28-.22-.5-.5-.5zM15%2019l-6-2.11V5l6%202.11V19z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M20.5%203l-.16.03L15%205.1%209%203%203.36%204.9c-.21.07-.36.25-.36.48V20.5c0%20.28.22.5.5.5l.16-.03L9%2018.9l6%202.1%205.64-1.9c.21-.07.36-.25.36-.48V3.5c0-.28-.22-.5-.5-.5zM15%2019l-6-2.11V5l6%202.11V19z%22/%3E%3C/svg%3E");
}

/* ── House ── */
.icon-house {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M10%2020v-6h4v6h5v-8h3L12%203%202%2012h3v8z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M10%2020v-6h4v6h5v-8h3L12%203%202%2012h3v8z%22/%3E%3C/svg%3E");
}

/* ── Directions ── */
.icon-directions {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M21.71%2011.29l-9-9a1%201%200%200%200-1.42%200l-9%209a1%201%200%200%200%200%201.42l9%209a1%201%200%200%200%201.42%200l9-9a1%201%200%200%200%200-1.42zM14%2014.5V12h-4v3H8v-4a1%201%200%200%201%201-1h5V7.5l3.5%203.5-3.5%203.5z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M21.71%2011.29l-9-9a1%201%200%200%200-1.42%200l-9%209a1%201%200%200%200%200%201.42l9%209a1%201%200%200%200%201.42%200l9-9a1%201%200%200%200%200-1.42zM14%2014.5V12h-4v3H8v-4a1%201%200%200%201%201-1h5V7.5l3.5%203.5-3.5%203.5z%22/%3E%3C/svg%3E");
}

/* ── Roundabout ── */
.icon-roundabout {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M12%202C6.48%202%202%206.48%202%2012s4.48%2010%2010%2010%2010-4.48%2010-10S17.52%202%2012%202zm0%2018c-4.42%200-8-3.58-8-8s3.58-8%208-8%208%203.58%208%208-3.58%208-8%208zm0-12c-2.21%200-4%201.79-4%204s1.79%204%204%204%204-1.79%204-4-1.79-4-4-4zm0%206c-1.1%200-2-.9-2-2s.9-2%202-2%202%20.9%202%202-.9%202-2%202z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M12%202C6.48%202%202%206.48%202%2012s4.48%2010%2010%2010%2010-4.48%2010-10S17.52%202%2012%202zm0%2018c-4.42%200-8-3.58-8-8s3.58-8%208-8%208%203.58%208%208-3.58%208-8%208zm0-12c-2.21%200-4%201.79-4%204s1.79%204%204%204%204-1.79%204-4-1.79-4-4-4zm0%206c-1.1%200-2-.9-2-2s.9-2%202-2%202%20.9%202%202-.9%202-2%202z%22/%3E%3C/svg%3E");
}

/* ── Traffic light ── */
.icon-trafficlight {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M12%202a4%204%200%200%200-4%204v12a4%204%200%200%200%208%200V6a4%204%200%200%200-4-4zm0%202a2%202%200%200%201%202%202v12a2%202%200%200%201-4%200V6a2%202%200%200%201%202-2zm0%201a1.5%201.5%200%201%200%200%203%201.5%201.5%200%200%200%200-3zm0%205a1.5%201.5%200%201%200%200%203%201.5%201.5%200%200%200%200-3zm0%205a1.5%201.5%200%201%200%200%203%201.5%201.5%200%200%200%200-3z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M12%202a4%204%200%200%200-4%204v12a4%204%200%200%200%208%200V6a4%204%200%200%200-4-4zm0%202a2%202%200%200%201%202%202v12a2%202%200%200%201-4%200V6a2%202%200%200%201%202-2zm0%201a1.5%201.5%200%201%200%200%203%201.5%201.5%200%200%200%200-3zm0%205a1.5%201.5%200%201%200%200%203%201.5%201.5%200%200%200%200-3zm0%205a1.5%201.5%200%201%200%200%203%201.5%201.5%200%200%200%200-3z%22/%3E%3C/svg%3E");
}

/* ── Clock ── */
.icon-clock {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M12%202C6.48%202%202%206.48%202%2012s4.48%2010%2010%2010%2010-4.48%2010-10S17.52%202%2012%202zm0%2018c-4.41%200-8-3.59-8-8s3.59-8%208-8%208%203.59%208%208-3.59%208-8%208zm.5-13H11v6l5.25%203.15.75-1.23-4.5-2.67V7z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M12%202C6.48%202%202%206.48%202%2012s4.48%2010%2010%2010%2010-4.48%2010-10S17.52%202%2012%202zm0%2018c-4.41%200-8-3.59-8-8s3.59-8%208-8%208%203.59%208%208-3.59%208-8%208zm.5-13H11v6l5.25%203.15.75-1.23-4.5-2.67V7z%22/%3E%3C/svg%3E");
}

/* ── Bar chart ── */
.icon-chart {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M5%2012H3v9h2v-9zm4-7H7v16h2V5zm4%204h-2v12h2V9zm4-6h-2v18h2V3zm4%203h-2v15h2V6z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M5%2012H3v9h2v-9zm4-7H7v16h2V5zm4%204h-2v12h2V9zm4-6h-2v18h2V3zm4%203h-2v15h2V6z%22/%3E%3C/svg%3E");
}

/* ── Smartphone / phone ── */
.icon-phone {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='2' ry='2'/%3E%3Cline x1='12' y1='18' x2='12.01' y2='18'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='2' ry='2'/%3E%3Cline x1='12' y1='18' x2='12.01' y2='18'/%3E%3C/svg%3E");
}

/* ── Map / routes ── */
.icon-map {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6'/%3E%3Cline x1='8' y1='2' x2='8' y2='18'/%3E%3Cline x1='16' y1='6' x2='16' y2='22'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6'/%3E%3Cline x1='8' y1='2' x2='8' y2='18'/%3E%3Cline x1='16' y1='6' x2='16' y2='22'/%3E%3C/svg%3E");
}

/* ── Clipboard / note ── */
.icon-clipboard {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Crect x='8' y='2' width='8' height='4' rx='1' ry='1'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Crect x='8' y='2' width='8' height='4' rx='1' ry='1'/%3E%3C/svg%3E");
}

/* ── Star / popular ── */
.icon-star {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
}

/* ── Check / tick ── */
.icon-check {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* ── App store button styles ── */
.store-btn,
.prose-page .store-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--navy);
    color: #fff;
    border: 1.5px solid rgba(255,255,255,0.15);
    border-radius: var(--radius-sm);
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.store-btn:hover,
.prose-page .store-btn,
.prose-page .store-btn:hover {
    background: #1a2a4a;
    border-color: rgba(255,255,255,0.3);
    color: #fff;
    text-decoration: none;
}

.store-btn .icon {
    background-color: #fff;
}

.store-btn-label {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.store-btn-sub {
    font-size: 10px;
    font-weight: 400;
    opacity: 0.75;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.store-btn-name {
    font-size: 14px;
    font-weight: 700;
}

/* Sidebar stacks buttons vertically; banner keeps them side by side */
.app-store-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ab-actions .store-btn {
    flex-direction: row;
}

/* ── 01. Variables & Reset ── */

:root {
    --navy:        #0f1e35;
    --navy-mid:    #1a2f4a;
    --navy-dark:   #1a3d5c;
    --teal:        #00b8a0;
    --teal-light:  #00d4bc;
    --amber:       #f5a623;
    --red:         #e84040;
    --green:       #1a9e6a;
    --surface:     #f7f8fa;
    --border:      #e2e6ed;
    --text:        #1a2030;
    --muted:       #6b7894;
    --white:       #ffffff;
    --radius:      10px;
    --radius-sm:   6px;
    --radius-lg:   12px;
    --shadow:      0 2px 12px rgba(15, 30, 53, 0.08);
    --shadow-lg:   0 8px 32px rgba(15, 30, 53, 0.14);
    --max-width:   1100px;
    --font-sans:   'DM Sans', sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


/* ── 02. Base & Typography ── */

body {
    font-family: var(--font-sans);
    font-size: 16px;
    color: var(--text);
    background: var(--white);
    line-height: 1.6;
}

h1, h2, h3 {
    font-family: var(--font-sans);
    line-height: 1.2;
}

a {
    color: var(--teal);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

strong {
    color: var(--navy);
}


/* ── 03. Utility Classes ── */

/* Colour states */
.ic-good,
.ssr-value.good { color: var(--green); }

.ic-warn,
.ssr-value.warn { color: var(--amber); }

/* Label style — used across multiple components */
.meta-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--muted);
    margin-bottom: 6px;
}

/* Tag pill */
.tag {
    background: var(--navy);
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 20px;
    display: inline-block;
}

.tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

/* Buttons */
.btn-primary {
    background: var(--teal);
    color: var(--navy);
    font-weight: 700;
    font-size: 15px;
    padding: 12px 24px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.15s, transform 0.1s;
}

.btn-primary:hover {
    background: var(--teal-light);
    transform: translateY(-1px);
    text-decoration: none;
}

.btn-ghost {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    text-decoration: none;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.15s;
}

.btn-ghost:hover {
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.3);
    text-decoration: none;
}


/* ── 04. Navigation ── */

nav {
    background: var(--navy);
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.nav-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 58px;
    gap: 16px;
}

.nav-logo {
    font-family: var(--font-sans);
    color: var(--white);
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 9px;
}

.nav-logo span {
    color: var(--teal);
}

.nav-links {
    display: flex;
    gap: 4px;
}

.nav-links a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    transition: all 0.15s;
}

.nav-links a:hover {
    color: var(--white);
    background: rgba(255, 255, 255, 0.08);
    text-decoration: none;
}

.nav-store-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--white) !important;
    font-size: 13px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}

.nav-store-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.35);
    color: var(--white) !important;
    text-decoration: none;
}

.nav-store-btn .icon {
    background-color: var(--white);
    flex-shrink: 0;
}

.nav-links a.nav-active {
    color: var(--white);
    background: rgba(255,255,255,0.1);
}

/* Hamburger button — hidden on desktop */
.nav-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    flex-shrink: 0;
}

.nav-burger span {
    display: block;
    height: 2px;
    background: rgba(255,255,255,0.85);
    border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s;
}

/* Animate to X when open */
.nav-burger-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger-open span:nth-child(2) { opacity: 0; }
.nav-burger-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 720px) {
    .nav-burger {
        display: flex;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 58px;
        left: 0;
        right: 0;
        background: var(--navy-dark);
        flex-direction: column;
        padding: 12px 16px 16px;
        gap: 2px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        z-index: 99;
    }

    .nav-links.nav-open {
        display: flex;
    }

    .nav-links a {
        padding: 10px 14px;
        font-size: 15px;
        border-radius: var(--radius-sm);
    }

    .nav-app-btn,
    .nav-store-btn {
        margin-top: 6px;
        text-align: center;
        justify-content: center;
    }
}


/* ── 05. Hero ── */

.hero {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 60%, #1f3d60 100%);
    color: var(--white);
    padding: 52px 24px 48px;
}

.hero-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    text-align: center;
}

.breadcrumb {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 20px;
    text-align: center;
}

.breadcrumb a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--teal);
}

.breadcrumb span {
    margin: 0 6px;
}

.hero-meta {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.hero h1 {
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.15;
    margin-bottom: 12px;
    color: var(--white);
}

.hero-sub {
    color: rgba(255, 255, 255, 0.65);
    font-size: 17px;
    margin-bottom: 32px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
    justify-content: center;
}

.stat-pill {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-sm);
    padding: 10px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 90px;
}

.stat-pill .num {
    font-family: var(--font-sans);
    font-size: 26px;
    color: var(--teal);
    line-height: 1;
}

.stat-pill .lbl {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 4px;
}

.hero-live-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px;
    justify-content: center;
}

.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
}

.live-dot {
    width: 7px;
    height: 7px;
    background: var(--teal);
    border-radius: 50%;
    flex-shrink: 0;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}

.hero-cta-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}


/* ── 06. Page Layout ── */

.page-body {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 48px 24px;
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 40px;
    align-items: start;
}

.main-col {
    min-width: 0;
}

.side-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}


/* ── 07. Sections ── */

.section {
    margin-bottom: 48px;
}

.section-title {
    font-size: 22px;
    color: var(--navy);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--border);
}

.section-lead {
    color: var(--muted);
    font-size: 15px;
    margin-bottom: 20px;
    max-width: 640px;
}

/* Subsections within Local Road Guide */
.subsection {
    margin-bottom: 32px;
}
.subsection .section-title {
    font-size: 19px;
    font-weight: 700;
    color: var(--navy);
    padding-bottom: 8px;
    border-bottom: 2px solid var(--border);
    margin-bottom: 12px;
}

/* Sidebar & banner headings (not H tags) */
.sidebar-app-title,
.app-card p.sidebar-app-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 12px;
    line-height: 1.3;
    display: block;
    opacity: 1;
}
.banner-heading,
.ab-text p.banner-heading {
    font-size: 22px;
    font-weight: 700;
    color: var(--white);
    opacity: 1;
    margin-bottom: 8px;
    line-height: 1.3;
    max-width: none;
}


/* ── 08. Centre Info Cards ── */

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

.info-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 20px;
}

.ic-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--muted);
    margin-bottom: 6px;
}

.ic-value {
    font-size: 22px;
    font-family: var(--font-sans);
    color: var(--navy); /* overridden by ic-good / ic-warn when present */
    line-height: 1.1;
}
.ic-value.ic-good { color: var(--green); }
.ic-value.ic-warn { color: var(--amber); }

.ic-sub {
    font-size: 12px;
    color: var(--muted);
    margin-top: 3px;
}

.centre-detail-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.detail-col {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.db-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin-bottom: 6px;
}

.db-val {
    font-size: 14px;
    color: var(--text);
    line-height: 1.5;
}

.db-val a {
    color: var(--teal);
}

.detail-block-map {
    grid-column: 1 / -1;
}

.centre-map {
    width: 100%;
    height: 280px;
    border-radius: calc(var(--radius) - 2px);
    overflow: hidden;
    margin-bottom: 10px;
    border: 1px solid var(--border);
}

.centre-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
}

.map-links {
    font-size: 13px;
}



/* ── 09. Stats Row ── */

.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.stats-box {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    text-align: center;
    background: var(--white);
}

.sb-num {
    font-family: var(--font-sans);
    font-size: 28px;
    color: var(--navy);
    line-height: 1;
}

.sb-label {
    font-size: 12px;
    color: var(--muted);
    margin-top: 4px;
}


/* ── 10. Frequency Table ── */

.freq-table {
    width: 100%;
    border-collapse: collapse;
}

.freq-table th {
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    border-bottom: 2px solid var(--border);
    padding: 8px 12px;
}

.freq-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    vertical-align: middle;
}

.freq-table tr:last-child td {
    border-bottom: none;
}

.freq-table tr:hover td {
    background: var(--surface);
}

.freq-bar-wrap {
    width: 120px;
}

.freq-bar {
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}

.freq-bar-fill {
    height: 100%;
    background: var(--teal);
    border-radius: 3px;
}

.freq-count {
    font-weight: 600;
    color: var(--navy);
    font-size: 13px;
    white-space: nowrap;
}

.freq-feature {
    font-size: 13px;
    color: var(--muted);
}

.freq-th-bar {
    width: 140px;
}

.no-steps-msg {
    color: var(--muted);
    font-size: 14px;
    padding: 12px 0;
}


/* ── 11. Roundabouts ── */

.roundabout-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.roundabout-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    background: var(--white);
}

.rc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.rc-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--navy);
}

.rc-meta {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5;
}

.rc-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    flex-shrink: 0;
}

.rc-badge.high {
    background: rgba(232, 64, 64, 0.1);
    color: var(--red);
}

.rc-badge.medium {
    background: rgba(245, 166, 35, 0.12);
    color: var(--amber);
}

.rc-badge.common {
    background: rgba(0, 184, 160, 0.1);
    color: var(--teal);
}


/* ── 12. Hotspots ── */

.hotspot-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hotspot-item {
    display: flex;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--white);
    align-items: flex-start;
}

.hotspot-num {
    width: 30px;
    height: 30px;
    background: var(--navy);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}

.hotspot-title {
    font-weight: 600;
    font-size: 15px;
    color: var(--navy);
    margin-bottom: 4px;
}

.hotspot-desc {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.5;
}

.hotspot-routes {
    font-size: 12px;
    color: var(--teal);
    font-weight: 600;
    margin-top: 6px;
}


/* ── 13. Pseudo-update Elements ── */

.pseudo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.pseudo-card {
    border-radius: var(--radius);
    padding: 16px 18px;
    font-size: 14px;
    line-height: 1.6;
}

.pseudo-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 8px;
}

.tip-card {
    background: #fff8ec;
    border: 1px solid #fde8b0;
    color: #7a5500;
}

.tip-card .pseudo-label {
    color: #9a6a00;
}

.focus-card {
    background: #eef6ff;
    border: 1px solid #c5dff8;
    color: #1a3d5c;
}

.focus-card .pseudo-label {
    color: #1a5080;
}

.popular-route-card {
    background: var(--navy);
    border-radius: var(--radius);
    padding: 20px 24px;
    color: var(--white);
}

.pr-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 8px;
}

.pr-name {
    font-family: var(--font-sans);
    font-size: 22px;
    color: var(--white);
    margin-bottom: 10px;
}

.pr-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 14px;
}

.pr-stats span {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
}

.pr-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--teal);
    text-decoration: none;
}

.pr-link:hover {
    color: var(--teal-light);
    text-decoration: none;
}


/* ── 14. Route Accordion ── */

.routes-header {
    background: #fff8ec;
    border: 1px solid #fde8b0;
    border-radius: var(--radius);
    padding: 16px 20px;
    margin-bottom: 16px;
    font-size: 14px;
    color: #7a5500;
    line-height: 1.6;
}

.routes-header strong {
    color: #5c3e00;
}

.routes-header a {
    color: #7a5500;
    font-weight: 700;
    text-decoration: underline;
}

.route-accordion {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.route-item {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--white);
}

.route-trigger {
    width: 100%;
    background: var(--white);
    border: none;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    text-align: left;
    transition: background 0.1s;
}

.route-trigger:hover {
    background: var(--surface);
}

.route-trigger.open {
    background: var(--navy);
}

.route-trigger.open .rt-name {
    color: var(--white);
}

.route-trigger.open .rs-num {
    color: var(--teal);
}

.route-trigger.open .rs-lbl {
    color: rgba(255, 255, 255, 0.5);
}

.route-trigger.open .rt-arrow {
    color: var(--white);
    transform: rotate(180deg);
}



.rt-num {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--teal);
    color: var(--navy);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s;
}

.route-trigger.open .rt-num {
    background: var(--teal);
}

.route-group-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    padding: 4px 2px 8px;
    margin-top: 8px;
}

.route-group-label:first-child {
    margin-top: 0;
}

.rt-info {
    flex: 1;
    min-width: 0;
}

.rt-name {
    font-weight: 600;
    font-size: 15px;
    color: var(--navy);
    margin: 0;
    padding: 0;
}

.rt-stats-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 4px;
    align-items: baseline;
}

.rt-stat {
    display: flex;
    align-items: baseline;
    gap: 3px;
}

.rs-num {
    font-size: 13px;
    font-weight: 700;
    color: var(--teal);
}

.rs-lbl {
    font-size: 11px;
    color: var(--muted);
}

.rt-arrow {
    color: var(--muted);
    transition: transform 0.2s;
    flex-shrink: 0;
}

.route-body {
    display: none;
    padding: 0 20px 20px;
    border-top: 1px solid var(--border);
}

.route-body.open {
    display: block;
}

.route-app-nudge {
    margin-top: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    font-size: 13px;
    color: var(--muted);
    display: flex;
    gap: 12px;
    align-items: center;
}

.route-app-nudge a {
    color: var(--teal);
    font-weight: 600;
}

.nudge-icon {
    font-size: 20px;
    flex-shrink: 0;
}


/* ── 15. Step List ── */

.steps-list {
    margin-top: 16px;
    user-select: none;
}

/* Grid: [num] [icon] [road name] [instruction] */
.step-row {
    display: grid;
    grid-template-columns: 2rem 2rem 1fr 1fr;
    align-items: center;
    gap: 0 .5rem;
    padding: .5rem .25rem;
    border-bottom: 1px solid var(--border);
    font-size: .88rem;
    line-height: 1.4;
}

.step-row:last-child  { border-bottom: none; }
.step-row.step-marker { background: var(--surface); font-weight: 600; }

/* Step number bubble */
.step-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    flex-shrink: 0;
}

/* Direction icons */
.step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    font-size: .95rem;
    flex-shrink: 0;
}

.si-l   { background: #dbeafe; color: #1d4ed8; }
.si-r   { background: #fce7f3; color: #9d174d; }
.si-rbt { background: #fef9c3; color: #854d0e; }
.si-s   { background: #f1f5f9; color: #475569; }
.si-mk  { background: #dcfce7; color: #15803d; }

/* Road name — bold */
.step-road {
    font-weight: 600;
    color: var(--text);
}

/* Instruction — muted */
.step-inst {
    color: var(--muted);
    font-size: .83rem;
}

/* Mobile: collapse instruction under road name */
@media (max-width: 520px) {
    .step-row {
        grid-template-columns: 2rem 2rem 1fr;
        grid-template-rows: auto auto;
        padding: .5rem 0;
    }
    .step-inst {
        grid-column: 3;
        grid-row: 2;
        padding-bottom: .15rem;
    }
}


/* ── 16. Road Type Bars ── */

.road-type-bars {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.road-type-bars h3 {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 4px;
}

.rt-bar-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rt-bar-label {
    font-size: 14px;
    font-weight: 500;
    width: 160px;
    flex-shrink: 0;
    color: var(--text);
}

.rt-bar-track {
    flex: 1;
    height: 10px;
    background: var(--border);
    border-radius: 5px;
    overflow: hidden;
}

.rt-bar-fill {
    height: 100%;
    border-radius: 5px;
}

.rt-bar-fill.residential { background: var(--teal); }
.rt-bar-fill.a-road      { background: var(--amber); }
.rt-bar-fill.dual        { background: var(--red); }
.rt-bar-fill.b-road      { background: var(--navy-mid); }

.rt-bar-pct {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    width: 36px;
    text-align: right;
    flex-shrink: 0;
}


/* ── 17. FAQ ── */

.faq-list {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.faq-q {
    width: 100%;
    background: var(--white);
    border: none;
    border-bottom: 1px solid var(--border);
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 500;
    color: var(--navy);
    transition: background 0.1s;
    gap: 16px;
}

.faq-q:hover {
    background: var(--surface);
}

.faq-item:last-child .faq-q {
    border-bottom: none;
}

.faq-q.open {
    background: var(--surface);
}

.faq-arrow {
    flex-shrink: 0;
    transition: transform 0.2s;
    color: var(--muted);
}

.faq-q.open .faq-arrow {
    transform: rotate(180deg);
}

.faq-a {
    display: none;
    padding: 4px 20px 16px;
    font-size: 14px;
    color: var(--muted);
    line-height: 1.7;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.faq-a.open {
    display: block;
}

.faq-item:last-child .faq-a {
    border-bottom: none;
}


/* ── 18. Sidebar ── */

.side-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--white);
}

.side-card-head {
    background: var(--navy);
    color: var(--white);
    padding: 14px 18px;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.side-card-body {
    padding: 16px 18px;
}

.side-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}

.side-stat-row:last-child {
    border-bottom: none;
}

.ssr-label {
    color: var(--muted);
}

.ssr-value {
    font-weight: 600;
    color: var(--navy);
}

.ssr-value--small {
    font-size: 12px;
}


/* ── 19. App CTA Card ── */

.app-card {
    background: linear-gradient(135deg, var(--navy) 0%, #1f3d60 100%);
    border-radius: var(--radius);
    padding: 24px 20px;
    color: var(--white);
}

.app-card-tag {
    display: inline-block;
    background: var(--teal);
    color: var(--navy);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 10px;
    border-radius: 10px;
    margin-bottom: 12px;
}

.app-card h3 {
    font-size: 19px;
    color: var(--white);
    margin-bottom: 8px;
    line-height: 1.3;
}

.app-card p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin-bottom: 16px;
}

.app-features {
    margin-bottom: 18px;
}

.app-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 6px;
}

.app-feature::before {
    content: "✓";
    color: var(--teal);
    font-weight: 700;
    flex-shrink: 0;
}

.btn-app {
    display: block;
    text-align: center;
    background: var(--teal);
    color: var(--navy);
    font-weight: 700;
    font-size: 14px;
    padding: 12px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    margin-bottom: 8px;
    transition: background 0.15s;
}

.btn-app:hover {
    background: var(--teal-light);
    text-decoration: none;
}

/* store-btn defined in icon system above */


/* ── 20. Nearby Centres ── */

.nearby-list {
    display: flex;
    flex-direction: column;
}

.nearby-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    gap: 8px;
}

.nearby-item:last-child {
    border-bottom: none;
}

.nearby-left {
    min-width: 0;
}

.nearby-name {
    display: block;
    color: var(--teal);
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nearby-name:hover {
    text-decoration: underline;
}

.nearby-dist {
    color: var(--muted);
    font-size: 12px;
    margin-top: 2px;
}

.nearby-meta {
    text-align: right;
    font-size: 12px;
    flex-shrink: 0;
}

.nearby-wait {
    color: var(--navy);
    font-weight: 600;
    margin-bottom: 2px;
}

.nearby-pass {
    color: var(--muted);
    font-size: 12px;
}


/* ── 21. App Banner ── */

.app-banner {
    background: linear-gradient(90deg, var(--navy) 0%, var(--navy-dark) 100%);
    padding: 40px 24px;
}

.app-banner-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    gap: 32px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.ab-tag {
    display: inline-block;
    background: rgba(0, 184, 160, 0.15);
    color: var(--teal);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 10px;
    border-radius: 10px;
    margin-bottom: 10px;
}

.ab-text h2 {
    font-size: 26px;
    color: var(--white);
    margin-bottom: 8px;
}

.ab-text p {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.65);
    max-width: 520px;
    line-height: 1.6;
}

.ab-features {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.ab-feat {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
    display: flex;
    align-items: center;
    gap: 6px;
}

.ab-feat::before {
    content: "✓";
    color: var(--teal);
    font-weight: 700;
}

.ab-actions {
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    flex-shrink: 0;
}


/* ── 22. Footer ── */

footer {
    background: var(--navy);
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    padding: 28px 24px;
    font-size: 13px;
    line-height: 2;
}

footer a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    margin: 0 8px;
}

footer a:hover {
    color: var(--teal);
}

.footer-divider {
    display: block;
    margin: 4px 0;
}


/* ── 23. Error Page ── */

.error-page {
    max-width: 600px;
    margin: 80px auto;
    padding: 0 24px;
    text-align: center;
}

.error-page h1 {
    font-size: 36px;
    color: var(--navy);
    margin-bottom: 12px;
}

.error-page p {
    color: var(--muted);
    margin-bottom: 24px;
}

.error-links {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.error-links a {
    color: var(--teal);
    font-weight: 600;
}


/* ── 24. Page Hero (shared — directory, pass rates, waiting times) ── */

.page-hero {
    background: var(--navy);
    padding: 52px 20px 44px;
    text-align: center;
}

.page-hero h1 {
    font-family: var(--font-sans);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    color: var(--white);
    margin-bottom: 10px;
}

.page-hero p {
    color: rgba(255, 255, 255, 0.65);
    font-size: 1.05rem;
    max-width: 520px;
    margin: 0 auto 28px;
}

.page-hero-stats {
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
}

.page-hero-stat strong {
    display: block;
    font-size: 1.8rem;
    font-family: var(--font-sans);
    color: var(--teal);
    line-height: 1;
    margin-bottom: 4px;
}

.page-hero-stat span {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Scrollable region jump bar (used on directory + pass rates + waiting times) */
.page-jump {
    background: var(--navy-mid);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.page-jump::-webkit-scrollbar { display: none; }

.page-jump-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    padding: 10px 20px;
    max-width: var(--max-width);
    margin: 0 auto;
}

.page-jump a {
    white-space: nowrap;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    letter-spacing: 0.02em;
}

.page-jump a:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
    text-decoration: none;
}

/* Shared page body wrapper */
.page-content {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 40px 20px 80px;
}

/* Shared search bar */
.page-search-wrap {
    margin-bottom: 36px;
    position: relative;
}

.page-search-wrap svg {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
}

.page-search {
    width: 100%;
    padding: 14px 16px 14px 46px;
    font-size: 1rem;
    font-family: var(--font-sans);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--text);
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
}

.page-search:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(0, 184, 160, 0.12);
}

.page-search::placeholder { color: var(--muted); }

.page-search-count {
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--muted);
    min-height: 20px;
}

/* Shared region section header */
.region-section {
    margin-bottom: 48px;
}

.region-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--border);
}

.region-icon {
    font-size: 1.3rem;
    line-height: 1;
}

.region-header h2,
.region-header h3 {
    font-family: var(--font-sans);
    font-size: 1.35rem;
    color: var(--navy);
    flex: 1;
}

.region-count {
    font-size: 0.8rem;
    color: var(--muted);
    background: var(--surface);
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 500;
}

/* Shared no-results */
.page-no-results {
    display: none;
    text-align: center;
    padding: 48px 20px;
    color: var(--muted);
    font-size: 1.05rem;
}

.page-no-results.visible { display: block; }


/* ── 25. Directory Page ── */

.dir-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.dir-card {
    display: block;
    text-decoration: none;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.dir-card:hover {
    border-color: var(--teal);
    box-shadow: var(--shadow);
    transform: translateY(-1px);
    text-decoration: none;
}

.dir-card-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--navy);
    margin-bottom: 4px;
    line-height: 1.3;
}

.dir-card-addr {
    font-size: 0.78rem;
    color: var(--muted);
    margin-bottom: 10px;
}

.dir-card-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Shared badge — used on dir cards and pass rate tables */
.badge {
    font-size: 0.72rem;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

.badge-routes {
    background: rgba(0, 184, 160, 0.1);
    color: #007a6a;
}

.badge-routes.no-routes {
    background: var(--surface);
    color: var(--muted);
}

.badge-pass-high {
    background: rgba(26, 158, 106, 0.1);
    color: #147a50;
}

.badge-pass-mid {
    background: rgba(245, 166, 35, 0.12);
    color: #9a6200;
}

.badge-pass-low {
    background: rgba(232, 64, 64, 0.08);
    color: #b52e2e;
}

.badge-wait {
    background: rgba(15, 30, 53, 0.06);
    color: var(--muted);
}

.badge-wait-long {
    background: rgba(232, 64, 64, 0.08);
    color: #b52e2e;
}

/* Hidden states for search filtering */
.dir-card.hidden          { display: none; }
.region-section.all-hidden { display: none; }


/* ── 26. Pass Rates Page ── */

/* Top/bottom highlights panels */
.prate-highlights {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 48px;
}

.prate-panel h2 {
    font-family: var(--font-sans);
    font-size: 1.2rem;
    color: var(--navy);
    margin-bottom: 14px;
}

.prate-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.prate-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    gap: 10px;
}

.prate-list li:hover { border-color: var(--teal); }

.prate-list a {
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--navy);
    text-decoration: none;
}

.prate-list a:hover { color: var(--teal); }

.prate-list small {
    font-size: 0.75rem;
    color: var(--muted);
}

/* Map */
.prate-map-wrap {
    margin-bottom: 48px;
    position: relative;
    z-index: 0;
}

.prate-map-wrap h2 {
    font-family: var(--font-sans);
    font-size: 1.3rem;
    color: var(--navy);
    margin-bottom: 14px;
}

#prate-map,
#wtime-map {
    height: 360px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.prate-map-legend {
    display: flex;
    gap: 20px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.prate-map-legend span {
    font-size: 0.8rem;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.prate-map-legend i {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

/* Region jump links (pill style — different to page-jump bar) */
.prate-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 36px;
}

.prate-jump a {
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--navy);
    text-decoration: none;
    border: 1px solid var(--border);
    background: var(--white);
    transition: border-color 0.15s, background 0.15s;
}

.prate-jump a:hover {
    border-color: var(--teal);
    background: rgba(0, 184, 160, 0.05);
    text-decoration: none;
}

/* Data tables */
.prate-table-wrap {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.prate-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.prate-table th {
    text-align: left;
    padding: 8px 12px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
}

.prate-table th.num { text-align: right; }

.prate-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}

.prate-table td.num {
    text-align: right;
    color: var(--muted);
    font-size: 0.85rem;
}

.prate-table tr:last-child td { border-bottom: none; }
.prate-table tr:hover td { background: var(--surface); }

.prate-table a {
    font-weight: 500;
    color: var(--navy);
    text-decoration: none;
}

.prate-table a:hover { color: var(--teal); }


/* ── 27. Waiting Times Page ── */

.wtime-table-wrap {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.wtime-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.wtime-table th {
    text-align: left;
    padding: 8px 12px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
}

.wtime-table th.num { text-align: right; }

.wtime-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}

.wtime-table td.num {
    text-align: right;
    color: var(--muted);
    font-size: 0.85rem;
}

.wtime-table tr:last-child td { border-bottom: none; }
.wtime-table tr:hover td { background: var(--surface); }

.wtime-table a {
    font-weight: 500;
    color: var(--navy);
    text-decoration: none;
}

.wtime-table a:hover { color: var(--teal); }




/* ── Opening Hours List ── */
.hours-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
}

.hours-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px solid var(--border);
    gap: 16px;
}

.hours-list li:last-child {
    border-bottom: none;
}

.hours-day {
    font-weight: 600;
    color: var(--text);
    min-width: 36px;
}

.hours-time {
    color: var(--text);
}

.hours-closed {
    color: var(--muted);
}

.db-note {
    font-size: 12px;
    color: var(--muted);
    margin-top: 6px;
    font-style: italic;
}

/* ── Routes Pending (no-routes hero notice) ── */
.routes-pending {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--radius);
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 8px;
    text-align: center;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.rp-icon {
    display: flex;
    align-items: center;
    color: rgba(255,255,255,0.7);
}

.rp-text {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255,255,255,0.9);
}

.rp-text strong {
    color: #fff;
}

/* ── 28. Homepage ── */

/* Search bar */
.home-search-wrap {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 20px 24px;
}

.home-search-inner {
    max-width: 640px;
    margin: 0 auto;
    position: relative;
}

.home-search-inner svg {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
}

.home-search-input {
    width: 100%;
    padding: 14px 16px 14px 48px;
    font-size: 1rem;
    font-family: var(--font-sans);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--text);
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
}

.home-search-input:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(0, 184, 160, 0.12);
}

.home-search-input::placeholder { color: var(--muted); }

.home-search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    z-index: 200;
    overflow: hidden;
}

.hsr-item {
    display: flex;
    flex-direction: column;
    padding: 10px 16px;
    text-decoration: none;
    border-bottom: 1px solid var(--border);
    transition: background 0.1s;
}

.hsr-item:last-child { border-bottom: none; }
.hsr-item:hover { background: var(--surface); text-decoration: none; }

.hsr-name {
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--navy);
}

.hsr-sub {
    font-size: 0.78rem;
    color: var(--muted);
    margin-top: 1px;
}

.hsr-empty {
    padding: 12px 16px;
    font-size: 0.9rem;
    color: var(--muted);
}

/* Page body */
.home-body {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 40px 24px 80px;
}

/* Feature cards */
.home-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 32px;
}

.home-feature-card {
    display: block;
    text-decoration: none;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 16px;
    text-align: center;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.home-feature-card:hover {
    border-color: var(--teal);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
    text-decoration: none;
}

.home-feature-icon {
    font-size: 1.8rem;
    display: block;
    margin-bottom: 10px;
}

.home-feature-card h3 {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 6px;
}

.home-feature-card p {
    font-size: 0.82rem;
    color: var(--muted);
    line-height: 1.5;
    margin: 0;
}

/* Did you know bar */
.home-fact {
    background: var(--navy);
    border-radius: var(--radius);
    padding: 18px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 36px;
    flex-wrap: wrap;
}

.home-fact-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--teal);
    white-space: nowrap;
}

.home-fact-num {
    font-family: var(--font-sans);
    font-size: 1.8rem;
    color: var(--white);
    line-height: 1;
    white-space: nowrap;
}

.home-fact-text {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.4;
}

/* Two-column layout */
.home-two-col {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 36px;
    align-items: start;
}

.home-main { min-width: 0; }

.home-side {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Section blocks */
.home-section { margin-bottom: 44px; }

.home-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 12px;
}

.home-section-head h2 {
    font-size: 1.25rem;
    color: var(--navy);
}

.home-section-head a {
    font-size: 0.82rem;
    color: var(--teal);
    white-space: nowrap;
    text-decoration: none;
}

.home-section-head a:hover { text-decoration: underline; }

.home-section-sub {
    font-size: 0.82rem;
    color: var(--muted);
}

/* Tables */
.home-table-wrap {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.home-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.home-table th {
    text-align: left;
    padding: 8px 14px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.home-table th.num { text-align: right; }

.home-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    vertical-align: middle;
}

.home-table td small {
    display: block;
    font-size: 0.75rem;
    color: var(--muted);
    margin-top: 1px;
}

.home-table td.num { text-align: right; color: var(--muted); }
.home-table tr:last-child td { border-bottom: none; }
.home-table tr:hover td { background: var(--surface); }

.home-table a {
    font-weight: 500;
    color: var(--navy);
    text-decoration: none;
}

.home-table a:hover { color: var(--teal); }

.home-table-btn {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--teal) !important;
    white-space: nowrap;
}


/* ── 29. Static Prose Pages (about, privacy, terms, contact) ── */

.prose-page {
    max-width: 760px;
    margin: 0 auto;
    padding: 52px 24px 80px;
}

.prose-page h1 {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    color: var(--navy);
    margin-bottom: 8px;
}

.prose-breadcrumb {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 32px;
}

.prose-breadcrumb a {
    color: var(--muted);
    text-decoration: none;
}

.prose-breadcrumb a:hover { color: var(--teal); }

.prose-breadcrumb span { margin: 0 6px; }

.prose-meta {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.prose-page h2 {
    font-size: 1.3rem;
    color: var(--navy);
    margin: 40px 0 12px;
}

.prose-page h3 {
    font-size: 1.1rem;
    color: var(--navy);
    margin: 28px 0 10px;
}

.prose-page p {
    color: var(--text);
    line-height: 1.75;
    margin-bottom: 16px;
}

.prose-page ul,
.prose-page ol {
    padding-left: 24px;
    margin-bottom: 16px;
}

.prose-page li {
    line-height: 1.75;
    color: var(--text);
    margin-bottom: 6px;
}

.prose-page strong { color: var(--navy); }

.prose-page a { color: var(--teal); }

.prose-page a:hover { text-decoration: underline; }

/* Contact form */
.contact-form {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 11px 14px;
    font-size: 15px;
    font-family: var(--font-sans);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--text);
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(0, 184, 160, 0.12);
}

.form-group textarea { resize: vertical; min-height: 140px; }

.form-notice {
    font-size: 13px;
    color: var(--muted);
    padding: 12px 16px;
    background: var(--surface);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

/* About page specifics */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 24px 0;
}

.about-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
}

.about-card h3 {
    margin-top: 0;
    font-size: 1rem;
    color: var(--navy);
    margin-bottom: 8px;
}

.about-card p {
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 0;
}

.about-icon {
    font-size: 1.6rem;
    margin-bottom: 10px;
    display: block;
}

@media (max-width: 600px) {
    .about-grid { grid-template-columns: 1fr; }
    .prose-page { padding: 36px 20px 60px; }
}


/* ── 30. Responsive ── */

@media (max-width: 900px) {
    .home-features       { grid-template-columns: repeat(2, 1fr); }
    .home-two-col        { grid-template-columns: 1fr; }
    .home-side           { order: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .pseudo-grid         { grid-template-columns: 1fr; }
}

@media (max-width: 800px) {
    .page-body {
        grid-template-columns: 1fr;
        padding: 32px 20px;
    }

    .side-col {
        order: 1;
    }

    .stats-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .centre-detail-row {
        grid-template-columns: 1fr;
    }

    .roundabout-grid {
        grid-template-columns: 1fr;
    }

    .ab-text p {
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .info-grid {
        grid-template-columns: 1fr 1fr;
    }

    .freq-table th:last-child,
    .freq-table td:last-child {
        display: none;
    }

    .rt-bar-label {
        width: 110px;
        font-size: 13px;
    }
}

@media (max-width: 540px) {
    .hero {
        padding: 36px 20px 32px;
    }

    .hero-stats {
        gap: 8px;
    }

    .stat-pill {
        min-width: 70px;
        padding: 8px 12px;
    }

    .stat-pill .num {
        font-size: 22px;
    }

    .hero-live-row {
        flex-direction: column;
        gap: 8px;
    }

    .hero-live-row--compact {
        flex-direction: row;
        justify-content: center;
        gap: 8px;
    }

    .nav-links {
        display: none;
    }

    .centre-detail-row {
        grid-template-columns: 1fr;
    }

    .pr-stats {
        gap: 10px;
    }

    .route-trigger {
        padding: 14px 16px;
        gap: 10px;
    }

    .rt-stats-row {
        gap: 8px;
    }

    .ab-banner-inner {
        flex-direction: column;
    }
}

@media (max-width: 700px) {
    .prate-highlights { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .dir-grid              { grid-template-columns: 1fr; }
    .page-hero-stats       { gap: 20px; }
    .page-hero-stat strong { font-size: 1.4rem; }
    .home-features         { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .home-side             { grid-template-columns: 1fr; }
    .home-fact             { gap: 10px; }
    .home-fact-num         { font-size: 1.4rem; }
}