/* ============================================================
   CDI Premium Final UX Guardrail - V20
   Purpose: compact premium desktop, mobile-first rails, no overflow.
   ============================================================ */
:root{
  --cdi-page-max:1120px;
  --cdi-wide-max:1180px;
  --cdi-reader-max:760px;
  --cdi-mobile-pad:16px;
  --cdi-tablet-pad:22px;
  --cdi-card-radius:22px;
  --cdi-compact-shadow:0 16px 42px rgba(10,31,58,.08);
}
html{width:100%;max-width:100%;overflow-x:hidden;scroll-behavior:smooth}
body{width:100%;max-width:100%;overflow-x:hidden;background:#f7fbff;text-rendering:optimizeLegibility}
*,*::before,*::after{box-sizing:border-box;min-width:0}
img,svg,video,canvas,iframe{max-width:100%;height:auto}

/* Full-width shell with compact centred body */
body:not(.admin-body) .fw,
body:not(.admin-body) .mphero,
body:not(.admin-body) .cdi-hero,
body:not(.admin-body) .page-hero,
body:not(.admin-body) .hero-band,
body:not(.admin-body) .sec,
body:not(.admin-body) .cdi-section,
body:not(.admin-body) .site-footer{width:100%;max-width:100%;overflow:hidden}
body:not(.admin-body) .cw,
body:not(.admin-body) .container,
body:not(.admin-body) .topnav .row,
body:not(.admin-body) .cdi-topnav .row,
body:not(.admin-body) .site-footer .cdi-footer-inner,
body:not(.admin-body) .site-footer .foot-grid,
body:not(.admin-body) .site-footer .foot-bottom{
  width:100%;
  max-width:var(--cdi-page-max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:24px!important;
  padding-right:24px!important;
}
body:not(.admin-body) .topnav,
body:not(.admin-body) .cdi-topnav{width:100%;max-width:100%;background:#071831}
body:not(.admin-body) .site-footer{background:#071831;color:#fff;border-top:0}
body:not(.admin-body) .dcard,
body:not(.admin-body) .page-card,
body:not(.admin-body) .guide-card,
body:not(.admin-body) .trust-card,
body:not(.admin-body) .locux-hero-card,
body:not(.admin-body) .locux-side-card,
body:not(.admin-body) .locux-region-card{box-shadow:var(--cdi-compact-shadow)}

/* Reading width for text-heavy blocks */
body:not(.admin-body) .dcard > p,
body:not(.admin-body) .dcard > ul,
body:not(.admin-body) .dcard > ol,
body:not(.admin-body) .content-copy,
body:not(.admin-body) .reader,
body:not(.admin-body) .seo-copy,
body:not(.admin-body) article p{max-width:var(--cdi-reader-max)}
body:not(.admin-body) .dcard > p,
body:not(.admin-body) article p{line-height:1.7}

/* Desktop rhythm: compact, premium, not stretched */
@media (min-width:1024px){
  body:not(.admin-body) .cw,
  body:not(.admin-body) .container{padding-left:28px!important;padding-right:28px!important}
  body:not(.admin-body) .mphero,
  body:not(.admin-body) .cdi-hero,
  body:not(.admin-body) .page-hero{padding-top:48px;padding-bottom:46px}
  body:not(.admin-body) .sec,
  body:not(.admin-body) .cdi-section{padding-top:48px;padding-bottom:48px}
  body:not(.admin-body) h1{font-size:clamp(36px,4.2vw,58px);letter-spacing:-.055em;line-height:1.02}
  body:not(.admin-body) h2{font-size:clamp(25px,2.4vw,34px);letter-spacing:-.035em;line-height:1.13}
}
@media (min-width:1380px){
  body:not(.admin-body) .topnav .row,
  body:not(.admin-body) .cdi-topnav .row{max-width:1180px!important}
}

/* Buttons: premium compact, not thick */
body:not(.admin-body) .btn,
body:not(.admin-body) .btn-lg,
body:not(.admin-body) button.btn,
body:not(.admin-body) a.btn{
  min-height:40px!important;
  padding:10px 15px!important;
  border-radius:13px!important;
  font-size:13px!important;
  line-height:1.15!important;
  gap:7px!important;
  white-space:normal!important;
  max-width:100%!important;
}
body:not(.admin-body) .btn-lg{min-height:44px!important;padding:11px 17px!important;font-size:13.5px!important}
body:not(.admin-body) .btn svg,
body:not(.admin-body) .btn .ti{flex:0 0 auto}

/* Mobile CTAs: two-up where possible, never edge-to-edge ugly stacks */
@media (max-width:760px){
  body:not(.admin-body) .cw,
  body:not(.admin-body) .container,
  body:not(.admin-body) .topnav .row,
  body:not(.admin-body) .cdi-topnav .row,
  body:not(.admin-body) .site-footer .cdi-footer-inner,
  body:not(.admin-body) .site-footer .foot-grid,
  body:not(.admin-body) .site-footer .foot-bottom{
    max-width:100%!important;
    padding-left:var(--cdi-mobile-pad)!important;
    padding-right:var(--cdi-mobile-pad)!important;
  }
  body:not(.admin-body) .mphero,
  body:not(.admin-body) .cdi-hero,
  body:not(.admin-body) .page-hero{padding-top:26px!important;padding-bottom:24px!important}
  body:not(.admin-body) .sec,
  body:not(.admin-body) .cdi-section{padding-top:34px!important;padding-bottom:34px!important}
  body:not(.admin-body) h1{font-size:clamp(29px,9vw,39px)!important;line-height:1.05!important;letter-spacing:-.045em!important}
  body:not(.admin-body) h2{font-size:clamp(21px,6vw,28px)!important;line-height:1.15!important;letter-spacing:-.035em!important}
  body:not(.admin-body) p, body:not(.admin-body) li{font-size:14px;line-height:1.62}
  body:not(.admin-body) .hero-ctas,
  body:not(.admin-body) .cdi-hero-ctas,
  body:not(.admin-body) .locux-cta-row,
  body:not(.admin-body) .market-actions,
  body:not(.admin-body) .cta-row,
  body:not(.admin-body) .actions-row{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
    align-items:stretch!important;
  }
  body:not(.admin-body) .hero-ctas .btn,
  body:not(.admin-body) .cdi-hero-ctas .btn,
  body:not(.admin-body) .locux-cta-row .btn,
  body:not(.admin-body) .market-actions .btn,
  body:not(.admin-body) .cta-row .btn,
  body:not(.admin-body) .actions-row .btn{
    width:100%!important;
    min-height:40px!important;
    padding:10px 11px!important;
    font-size:12.5px!important;
    justify-content:center!important;
    text-align:center!important;
  }
  body:not(.admin-body) .hero-ctas .btn:only-child,
  body:not(.admin-body) .cdi-hero-ctas .btn:only-child,
  body:not(.admin-body) .locux-cta-row .btn:only-child{grid-column:1/-1}
}
@media (max-width:380px){
  body:not(.admin-body) .hero-ctas,
  body:not(.admin-body) .cdi-hero-ctas,
  body:not(.admin-body) .locux-cta-row,
  body:not(.admin-body) .market-actions,
  body:not(.admin-body) .cta-row,
  body:not(.admin-body) .actions-row{grid-template-columns:1fr!important}
}

/* Pills and filters: compact mobile experience */
body:not(.admin-body) .chip,
body:not(.admin-body) .pill,
body:not(.admin-body) .cdi-pill,
body:not(.admin-body) .filter-pill,
body:not(.admin-body) .eyepill,
body:not(.admin-body) .locux-card-kicker{
  min-height:30px;
  padding:7px 10px;
  border-radius:999px;
  line-height:1.1;
  max-width:100%;
}
@media (max-width:760px){
  body:not(.admin-body) .qf-bar,
  body:not(.admin-body) .qf-pills,
  body:not(.admin-body) .chip-row,
  body:not(.admin-body) .filter-pills,
  body:not(.admin-body) .related-searches-rail,
  body:not(.admin-body) .ph2-qfilter,
  body:not(.admin-body) .locux-region-pills,
  body:not(.admin-body) .locux-lesson-rail,
  body:not(.admin-body) .locux-rail,
  body:not(.admin-body) .cdi-mobile-rail{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:8px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:2px 0 10px!important;
    margin-left:0!important;
    margin-right:0!important;
  }
  body:not(.admin-body) .qf-bar::-webkit-scrollbar,
  body:not(.admin-body) .qf-pills::-webkit-scrollbar,
  body:not(.admin-body) .chip-row::-webkit-scrollbar,
  body:not(.admin-body) .filter-pills::-webkit-scrollbar,
  body:not(.admin-body) .related-searches-rail::-webkit-scrollbar,
  body:not(.admin-body) .ph2-qfilter::-webkit-scrollbar,
  body:not(.admin-body) .locux-region-pills::-webkit-scrollbar,
  body:not(.admin-body) .locux-lesson-rail::-webkit-scrollbar,
  body:not(.admin-body) .locux-rail::-webkit-scrollbar,
  body:not(.admin-body) .cdi-mobile-rail::-webkit-scrollbar{display:none}
  body:not(.admin-body) .qf-bar > *,
  body:not(.admin-body) .qf-pills > *,
  body:not(.admin-body) .chip-row > *,
  body:not(.admin-body) .filter-pills > *,
  body:not(.admin-body) .related-searches-rail > *,
  body:not(.admin-body) .ph2-qfilter > *,
  body:not(.admin-body) .locux-region-pills > *,
  body:not(.admin-body) .locux-lesson-rail > *,
  body:not(.admin-body) .cdi-mobile-rail > *{
    flex:0 0 auto!important;
    scroll-snap-align:start;
    white-space:nowrap!important;
  }
  body:not(.admin-body) .cdi-pills-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  body:not(.admin-body) .cdi-pills-grid .cdi-pill{
    width:100%;
    white-space:normal!important;
    min-height:38px!important;
    padding:8px 9px!important;
    font-size:12.5px!important;
  }
}

/* Mobile card rails: swipeable instead of endless vertical stacks */
@media (max-width:860px){
  body:not(.admin-body) .grid-3,
  body:not(.admin-body) .cards-grid,
  body:not(.admin-body) .comparison-help-grid,
  body:not(.admin-body) .trust-grid,
  body:not(.admin-body) .parent-card-grid,
  body:not(.admin-body) .tc-compare-grid,
  body:not(.admin-body) .sl-rail,
  body:not(.admin-body) .auto-carousel,
  body:not(.admin-body) .premium-rail{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:12px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none;
    padding-bottom:10px!important;
  }
  body:not(.admin-body) .grid-3::-webkit-scrollbar,
  body:not(.admin-body) .cards-grid::-webkit-scrollbar,
  body:not(.admin-body) .comparison-help-grid::-webkit-scrollbar,
  body:not(.admin-body) .trust-grid::-webkit-scrollbar,
  body:not(.admin-body) .parent-card-grid::-webkit-scrollbar,
  body:not(.admin-body) .tc-compare-grid::-webkit-scrollbar,
  body:not(.admin-body) .sl-rail::-webkit-scrollbar,
  body:not(.admin-body) .auto-carousel::-webkit-scrollbar,
  body:not(.admin-body) .premium-rail::-webkit-scrollbar{display:none}
  body:not(.admin-body) .grid-3 > *,
  body:not(.admin-body) .cards-grid > *,
  body:not(.admin-body) .comparison-help-grid > *,
  body:not(.admin-body) .trust-grid > *,
  body:not(.admin-body) .parent-card-grid > *,
  body:not(.admin-body) .tc-compare-grid > *,
  body:not(.admin-body) .sl-rail > *,
  body:not(.admin-body) .auto-carousel > *,
  body:not(.admin-body) .premium-rail > *{
    flex:0 0 min(82vw,340px)!important;
    scroll-snap-align:start!important;
  }
}

/* Forms and controls never overflow */
body:not(.admin-body) input,
body:not(.admin-body) select,
body:not(.admin-body) textarea{max-width:100%;font-size:16px}
body:not(.admin-body) form,
body:not(.admin-body) fieldset{min-width:0;max-width:100%}
body:not(.admin-body) .filter-grid,
body:not(.admin-body) .fgrid,
body:not(.admin-body) .fg-grid{min-width:0}
@media (max-width:760px){
  body:not(.admin-body) .filter-grid,
  body:not(.admin-body) .fgrid,
  body:not(.admin-body) .fg-grid{grid-template-columns:1fr!important;gap:12px!important}
}

/* Tables: contained horizontal scroll only, never page scroll */
body:not(.admin-body) .table-scroll,
body:not(.admin-body) .compare-table-wrap,
body:not(.admin-body) .responsive-table{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:760px){
  body:not(.admin-body) table:not(.no-scroll){display:block;width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* Locations page final guardrails */
.locux-main-grid{grid-template-columns:250px minmax(0,1fr)!important;gap:22px!important}
.locux-region-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
.locux-city-card{min-height:44px}
.locux-hero-copy,.locux-directory,.locux-side,.locux-hero-card{min-width:0}
@media (min-width:1320px){.locux-region-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media (max-width:980px){.locux-main-grid{grid-template-columns:1fr!important}.locux-side{position:relative!important;top:auto!important}.locux-region-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:760px){
  .locux-region-grid{grid-template-columns:1fr!important}
  .locux-hero-card,.locux-side-card,.locux-region-card{border-radius:18px!important}
  .locux-route-card{flex-basis:76vw!important;max-width:330px!important}
  .locux-lesson-rail a{padding:9px 12px!important;font-size:12.5px!important}
  .locux-city-card{grid-template-columns:minmax(0,1fr) 16px!important;padding:10px 9px!important}
  .locux-city-meta{grid-column:1/-1!important;display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;gap:5px!important;scrollbar-width:none}
  .locux-city-meta::-webkit-scrollbar{display:none}
}

/* Footer: full-width background, compact inner */
.site-footer .foot-grid{display:grid;grid-template-columns:1.35fr repeat(3,minmax(0,1fr));gap:26px!important;align-items:start}
.site-footer .foot-brand p{max-width:330px}
.site-footer .foot-bottom{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.10);padding-top:18px!important;margin-top:22px!important}
@media (max-width:900px){.site-footer .foot-grid{grid-template-columns:1fr 1fr!important}.site-footer .foot-brand{grid-column:1/-1}}
@media (max-width:560px){.site-footer .foot-grid{grid-template-columns:1fr 1fr!important;gap:18px!important}.site-footer .foot-brand{grid-column:1/-1}.site-footer .foot-col h4{font-size:12px!important}.site-footer .foot-col a{font-size:12.5px!important}.site-footer .foot-bottom{display:grid;grid-template-columns:1fr;gap:8px;text-align:left}}

/* Sticky/floating elements safe zones */
@media (max-width:760px){
  .ai-fab{right:14px!important;bottom:84px!important;max-width:calc(100vw - 28px)!important}
  .pwa-bottom-nav{max-width:100vw!important}
  .ios-install-nudge,.cdi-ios-install-nudge{left:12px!important;right:12px!important;max-width:calc(100vw - 24px)!important}
}

/* ============================================================
   V20 UX hotfix - fixed FAQ containment and rail behaviour
   ============================================================ */
body:not(.admin-body) .seo-faq-section,
body:not(.admin-body) .seo-interlinks-section{
  width:100%;
  max-width:100%;
  overflow:hidden;
}
body:not(.admin-body) .seo-faq-section .cw,
body:not(.admin-body) .seo-interlinks-section .cw{
  max-width:var(--cdi-page-max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:28px!important;
  padding-right:28px!important;
}
@media(max-width:760px){
  body:not(.admin-body) .seo-faq-section .cw,
  body:not(.admin-body) .seo-interlinks-section .cw{
    padding-left:16px!important;
    padding-right:16px!important;
  }
}

/* Desktop should be premium and calm: rails become compact grids/wraps, no motion. */
@media(min-width:861px){
  .locux-rail{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
    overflow:visible!important;
    padding:0!important;
  }
  .locux-route-card{
    flex:initial!important;
    width:100%;
    min-height:132px;
  }
  .locux-lesson-rail{
    display:flex!important;
    flex-wrap:wrap!important;
    overflow:visible!important;
    gap:10px!important;
    padding:0!important;
  }
  .locux-lesson-rail a{
    flex:0 0 auto!important;
    padding:9px 13px!important;
    font-size:12.5px!important;
    box-shadow:0 8px 18px rgba(13,39,77,.045)!important;
  }
  .locux-lessons{padding:32px 0 36px!important;}
}
@media(min-width:861px) and (max-width:1180px){
  .locux-rail{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(max-width:860px){
  .locux-rail,
  .locux-lesson-rail{
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:2px 0 10px!important;
    overscroll-behavior-inline:contain;
    touch-action:pan-x;
  }
  .locux-rail::-webkit-scrollbar,
  .locux-lesson-rail::-webkit-scrollbar{display:none;}
  .locux-route-card{flex:0 0 min(78vw,320px)!important;scroll-snap-align:start;}
  .locux-lesson-rail a{
    flex:0 0 auto!important;
    scroll-snap-align:start;
    padding:9px 12px!important;
    font-size:12.5px!important;
    max-width:82vw;
    white-space:nowrap;
  }
}
@media(max-width:520px){
  .locux-stat-row{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .locux-cta-row{grid-template-columns:repeat(2,minmax(0,1fr))!important;display:grid!important;}
  .locux-cta-row .btn{width:100%!important;padding:11px 9px!important;font-size:12px!important;min-height:42px!important;}
  .locux-hero-card{padding:16px!important;}
}

/* Extra protection for generic FAQ sections that appear outside a page wrapper. */
.seo-faq-h{max-width:var(--cdi-page-max);}
.seo-faq-list{max-width:var(--cdi-page-max);}