/* ---------------------------------------------------------------
   My Good Movers – State Blog hero redesign
   Fonts: Plus Jakarta Sans (body), Noto Serif (headings)
   --------------------------------------------------------------- */

.state-guide-hero {
    position: relative;
    background: #ffffff;
    overflow: hidden;
    padding: 30px 0 60px;
}

.state-guide-hero > .container {
    position: relative;
    z-index: 1;
}

/* Background decorative glows */
.state-guide-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(111.75px);
    pointer-events: none;
    z-index: 0;
}

.state-guide-glow--blue {
    width: 1180px;
    height: 687px;
    right: -340px;
    top: 120px;
    background: #E0EEFC;
    transform: rotate(-68.54deg);
    opacity: .8;
}

.state-guide-glow--rose {
    width: 1081px;
    height: 526px;
    left: -420px;
    top: 150px;
    background: #F8E7E6;
    transform: rotate(-107.6deg);
    opacity: .7;
}

/* Breadcrumb */
.state-guide-breadcrumb {
    margin-bottom: 26px;
}

.state-guide-breadcrumb .breadcrumb {
    margin: 0;
    font-size: 13px;
}

.state-guide-breadcrumb .breadcrumb-item a {
    color: #52708c;
    text-decoration: none;
}

.state-guide-breadcrumb .breadcrumb-item a:hover {
    color: #1e75bb;
}

.state-guide-breadcrumb .breadcrumb-item.active {
    color: #798697;
}

/* Hero row: copy left, quote card right */
.state-guide-hero-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 48px;
}

.state-guide-hero-main {
    flex: 1 1 auto;
    min-width: 0;
}

/* Editorial team */
.state-guide-author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.state-guide-author-img {
    display: block;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #eef4fb;
}

.state-guide-author-info {
    display: flex;
    gap: 10px;
    line-height: 1.35;
    align-items: baseline;
}

.state-guide-author-name {
    font-size: 14px;
    font-weight: 700;
    color: #2b3a4a;
    text-decoration: none;
}

.state-guide-author-name:hover {
    color: #1e75bb;
}

.state-guide-author-label {
    font-size: 14px;
    color: #8a94a0;
}

.state-guide-hero-title {
    font-family: 'Noto Serif', serif;
    font-size: clamp(32px, 4vw, 46px);
    line-height: 1.15;
    letter-spacing: -.8px;
    font-weight: 700;
    color: #16395c;
    margin: 0 0 16px;
}

.state-guide-hero-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
}

.state-guide-hero-date {
    font-size: 13px;
    color: #55606C;
}

.state-guide-fact-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid #d9e4ec;
    border-radius: 999px;
    background: #ffffff;
    color: #3f5468;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.state-guide-fact-badge svg {
    width: 13px;
    height: 13px;
    color: #1E9E5A;
}

/* Sidebar search card */
.state-guide-searchbox {
    background: #ffffff;
    border: 1px solid #e1e8ef;
    border-radius: 17px;
    padding: 21px;
    box-shadow: 0 8px 26px rgba(15, 23, 42, .055);
    margin-bottom: 20px;
}

.state-guide-searchbox-title {
    font-family: 'Noto Serif', serif;
    font-size: 16px;
    font-weight: 800;
    color: #172436;
    margin: 0 0 14px;
}

.state-guide-searchbox-field {
    display: flex;
    align-items: stretch;
}

.state-guide-searchbox-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 42px;
    padding: 0 12px;
    border: 1px solid #d8e6f2;
    border-right: 0;
    border-radius: 9px 0 0 9px;
    background: #eaf3fb;
    font-size: 13px;
    font-family: inherit;
    color: #3A3A3C;
}

.state-guide-searchbox-input::placeholder {
    color: #8fa3b5;
}

.state-guide-searchbox-input:focus {
    outline: none;
    border-color: #2E7FC4;
}

.state-guide-searchbox-btn {
    flex: 0 0 46px;
    border: 0;
    border-radius: 0 9px 9px 0;
    background: #2E7FC4;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s ease;
}

.state-guide-searchbox-btn:hover {
    background: #256aa8;
}

.state-guide-searchbox-btn svg {
    width: 16px;
    height: 16px;
}

/* Quote card */
.state-guide-search {
    flex: 0 0 380px;
    background: #ffffff;
    border: 1px solid #EAF3FB;
    border-radius: 16px;
    box-shadow: 0 12px 34px rgba(22, 57, 92, .07);
    padding: 24px;
}

.state-guide-search-title {
       font-size: 24px;
    font-weight: 700;
    color: #16395c;
    margin: 0 0 16px;
}

.state-guide-search-row {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.state-guide-field > label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 6px;
}

.state-guide-req {
    color: #d33;
}

.state-guide-input-wrap {
    position: relative;
}

.state-guide-input-wrap > svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: #2E7FC4;
    pointer-events: none;
}

.state-guide-input {
    width: 100%;
    height: 46px;
    padding: 0 14px 0 42px;
    border: 1px solid #D5E5F3;
    border-radius: 10px;
    font-size: 13px;
    font-family: inherit;
    color: #3A3A3C;
    background: #ffffff;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.state-guide-input::placeholder {
    color: #9aa5ae;
}

.state-guide-input:focus {
    outline: none;
    border-color: #2E7FC4;
    box-shadow: 0 0 0 3px rgba(46, 127, 196, .12);
}

.state-guide-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 46px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: #F57300;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

.state-guide-btn:hover {
    background: #D96600;
    transform: translateY(-1px);
}

.state-guide-btn svg {
    width: 16px;
    height: 16px;
}

@media (max-width: 991px) {
    .state-guide-hero-row {
        flex-direction: column;
        gap: 28px;
    }

    .state-guide-search {
        flex: none;
        width: 100%;
    }
}

@media (max-width: 767px) {
    .state-guide-hero {
        padding: 24px 0 40px;
    }

    .state-guide-hero-title {
        font-size: 30px;
        letter-spacing: -.4px;
    }

    .state-guide-search {
        padding: 20px;
    }
}


  :root{
    --blue:#2E7FC4;
    --navy:#16395C;
    --ink:#17181A;
    --gray:#55606C;
    --gray-2:#6C7076;
    --border:#D5E5F3;
    --row-alt:#F6F9FC;
    --source-bg:#EAF3FB;
    --green:#1E9E5A;
    --red:#FF5F57;
    --orange:#F2994A;
  }
  body{
    font-family:'Plus Jakarta Sans',sans-serif;
    color:var(--ink);
    background:#fff;
  }
  .state-guide-intro p
  .section-block{
   padding: 36px 0px;
  }
  .section-block{
    margin:40px 0px;
}
  .container-mgm{
    max-width:1340px;
    margin:0 auto;
  }
  .section-tag{
    font-weight:600;
    font-size:12px;
    line-height:15px;
    letter-spacing:3px;
    text-transform:uppercase;
    color:var(--blue);
    margin-bottom:10px;
  }
  .section-title{
    font-family:'Noto Serif',serif;
    font-weight:600;
    font-size:32px;
    line-height:120%;
    letter-spacing:-0.015em;
    color:var(--navy);
    margin-bottom:44px;
  }
  .section-title-sm{
    margin-bottom:24px;
  }

  /* ---------- Glance cards ---------- */
  .glance-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    padding:28px 30px;
    height:100%;
  }
  .glance-card h3{
    font-family:'Noto Serif',serif;
    font-weight:600;
    font-size:20px;
    line-height:140%;
    letter-spacing:-0.005em;
    color:var(--navy);
    margin-bottom:12px;
  }
  .glance-card p{
    font-size:14px;
    line-height:160%;
    color:var(--gray-2);
    margin:0;
  }

  /* ---------- Quick facts table ---------- */
  .facts-card{
    border:1px solid var(--border);
    border-radius:12px;
    overflow:hidden;
    background:#fff;
  }
  .facts-table{
    width:100%;
    border-collapse:collapse;
    margin:0;
  }
  .facts-table th,
  .facts-table td{
    padding:14px 20px;
    font-size:14px;
    line-height:150%;
    font-weight:400;
    
  }
  .facts-table thead th{
    background:var(--blue);
    color:#fff;
    font-weight:400;
  }
  .facts-table tbody tr:nth-child(odd){ background:var(--row-alt); }
  .facts-table tbody tr:nth-child(even){ background:#fff; }
  .facts-table td:first-child{
    font-weight:600;
    color:var(--ink);
  }
  .facts-table td:last-child{
    color:var(--gray);
  }
  .facts-source{
    background:var(--source-bg);
    border-radius:12px;
    padding:14px 20px;
    font-size:12px;
    font-weight:700;
    color:var(--gray);
    margin-top:24px;
  }

  /* ---------- Checklist cards ---------- */
  .check-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:24px;
    box-shadow:0 25px 50px -30px rgba(46,127,196,.15);
    padding:36px;
    height:100%;
  }
  .check-card h3{
    font-family:'Noto Serif',serif;
    font-weight:500;
    font-size:20px;
    line-height:150%;
    letter-spacing:-0.005em;
    color:var(--ink);
    margin:0;
    display:flex;
    align-items:center;
    gap:10px;
  }
  .check-list{
    list-style:none;
    margin:24px 0 0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .check-list li{
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-size:14px;
    line-height:150%;
    color:var(--gray-2);
  }
  .icon-bullet{
    flex:0 0 18px;
    width:18px;
    height:18px;
    margin-top:2px;
  }
  .icon-bullet svg{ display:block; width:18px; height:18px; }
  .title-icon{ width:24px; height:24px; flex:0 0 24px; }

  /* ---------- Stat cards ---------- */
  .stat-card{
    border:1px solid var(--border);
    border-radius:16px;
    background:#fff;
    padding:24px 28px;
    height:100%;
  }
  .stat-card .stat-label{
    font-size:13px;
    font-weight:600;
    color:var(--gray-2);
    margin-bottom:8px;
  }
  .stat-card .stat-value{
    font-family:'Noto Serif',serif;
    font-weight:600;
    font-size:32px;
    line-height:120%;
    color:var(--blue);
  }
  .rank-6 {
    background: #bb971e;
}
  .stat-card .stat-sub{
    font-size:13px;
    color:var(--gray-2);
    margin-top:8px;
  }

  /* ---------- Bar chart cards ---------- */
  .bars-card{
    border:1px solid var(--border);
    border-radius:16px;
    background:#fff;
    padding:28px 30px;
    height:100%;
  }
  .bars-card h3{
    font-family:'Noto Serif',serif;
    font-weight:600;
    font-size:20px;
    color:var(--navy);
    margin-bottom:4px;
  }
  .bars-card .bars-sub{
    font-size:13px;
    color:var(--gray-2);
    margin-bottom:24px;
  }
  .bar-row{
    display:grid;
    grid-template-columns:220px 1fr 52px;
    align-items:center;
    gap:16px;
    margin-bottom:14px;
  }
  .bar-row .bar-label{
    font-size:13px;
    color:var(--ink);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .bar-track{
    height:10px;
    background:var(--row-alt);
    border-radius:999px;
    overflow:hidden;
  }
  .bar-fill{
    display:block;
    height:100%;
    border-radius:999px;
  }
  .bar-fill.blue{ background:linear-gradient(270deg,#2D91EB 0%,#69B8FF 100%); }
  .bar-fill.orange{ background:linear-gradient(270deg,#F57300 0%,#FFB06A 100%); }
  .bar-row .bar-val{
    font-size:13px;
    font-weight:600;
    color:var(--ink);
    text-align:right;
  }
  .bars-source{
    margin-top:18px;
    font-size:11px;
    font-weight:600;
    letter-spacing:1px;
    text-transform:uppercase;
    color:var(--gray-2);
  }

  /* ---------- Sub headings & notes ---------- */
  .sub-title{
    font-family:'Noto Serif',serif;
    font-weight:600;
    font-size:28px;
    line-height:130%;
    color:var(--navy);
    margin:64px 0 24px;
  }
  .sub-title:first-child{ margin-top:0; }
  .sub-text{
    font-size:16px;
    line-height:32px;
    color:var(--gray-2);
    margin-bottom:24px;
    max-width:900px;
  }
  .table-note{
    font-size:14px;
    color:var(--gray-2);
    margin-top:16px;
  }
p {
    margin: 20px 0px 20px 0px !important;
    font-family: "Plus Jakarta Sans";
    font-size: 16px !important;
    font-weight: 300;
    color: #2B2F32 !important;
    line-height: 36px;
}
  /* ---------- Filter pills ---------- */
  .filter-pills{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:32px;
  }
  .filter-pill{
    border:1px solid var(--border);
    border-radius:999px;
    background:#fff;
    padding:10px 22px;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:14px;
    font-weight:600;
    color:var(--gray);
    cursor:pointer;
  }
  .filter-pill.active{
    background:var(--blue);
    border-color:var(--blue);
    color:#fff;
  }

  /* ---------- Highlight card (big number on right) ---------- */
  .highlight-card{
    border:1px solid var(--border);
    border-radius:16px;
    background:linear-gradient(109.25deg,#FFFFFF 7.5%,#EFF8FF 100.8%);
    padding:32px 36px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:40px;
  }
  .highlight-card h3{
    font-family:'Noto Serif',serif;
    font-weight:600;
    font-size:22px;
    color:var(--navy);
    margin-bottom:8px;
  }
  .highlight-card p{
    font-size:14px;
    line-height:160%;
    color:var(--gray-2);
    margin:0;
    max-width:640px;
  }
  .highlight-num{
    font-family:'Noto Serif',serif;
    font-weight:600;
    font-size:44px;
    line-height:120%;
    color:var(--navy);
    text-align:right;
    flex:0 0 auto;
  }
  .highlight-num small{
    display:block;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:13px;
    font-weight:400;
    color:var(--gray-2);
    margin-top:6px;
  }

  /* ---------- Rent bars (label above bar) ---------- */
  .rent-row{ margin-bottom:22px; }
  .rent-row:last-child{ margin-bottom:0; }
  .rent-head{
    display:flex;
    justify-content:space-between;
    font-size:13px;
    margin-bottom:8px;
  }
  .rent-head .rent-label{ color:var(--ink); }
  .rent-head .rent-val{ font-weight:600; color:var(--ink); }
  .rent-row .bar-track{ height:8px; }

  /* ---------- Mini grocery bars ---------- */
  .mini-bars-card{
    border:1px solid var(--border);
    border-radius:16px;
    background:#fff;
    padding:24px;
    height:100%;
  }
  .mini-bars-card h3{
    font-size:15px;
    font-weight:600;
    color:var(--ink);
    margin-bottom:20px;
  }
  .mini-bar-row{
    display:grid;
    grid-template-columns:92px 1fr 56px;
    align-items:center;
    gap:10px;
    margin-bottom:12px;
  }
  .mini-bar-row:last-child{ margin-bottom:0; }
  .mini-bar-row .bar-label{ font-size:12px; color:var(--gray-2); }
  .mini-bar-row .bar-track{ height:8px; }
  .mini-bar-row .bar-val{ font-size:13px; font-weight:600; color:var(--ink); text-align:right; }

  /* ---------- Diverging comparison chart ---------- */
  .div-row{
    display:grid;
    grid-template-columns:140px 1fr 76px;
    align-items:center;
    gap:16px;
    margin-bottom:16px;
  }
  .div-row .bar-label{ font-size:13px; color:var(--ink); }
  .div-track{
    position:relative;
    height:14px;
    background:var(--row-alt);
    border-radius:999px;
  }
  .div-track::after{
    content:'';
    position:absolute;
    left:50%;
    top:-2px;
    bottom:-2px;
    width:1px;
    background:var(--border);
  }
  .div-fill{
    position:absolute;
    top:0;
    height:100%;
  }
  .div-fill.neg{
    right:50%;
    border-radius:999px 0 0 999px;
    background:linear-gradient(270deg,#2D91EB 0%,#69B8FF 100%);
  }
  .div-fill.pos{
    left:50%;
    border-radius:0 999px 999px 0;
    background:linear-gradient(270deg,#F57300 0%,#FFB06A 100%);
  }
  .div-row .bar-val{ font-size:13px; font-weight:600; color:var(--ink); text-align:right; }
  .div-legend{
    display:flex;
    justify-content:space-between;
    font-size:11px;
    font-weight:600;
    letter-spacing:1px;
    text-transform:uppercase;
    color:var(--gray-2);
    margin-top:20px;
    padding:0 160px 0 156px;
  }

  /* ---------- Season cards ---------- */
  .season-card{
    border-radius:16px;
    padding:28px;
    height:100%;
  }
  .season-card .season{
    font-size:13px;
    font-weight:600;
    color:var(--gray-2);
    margin-bottom:6px;
  }
  .season-card h3{
    font-family:'Noto Serif',serif;
    font-weight:600;
    font-size:22px;
    color:var(--navy);
    margin-bottom:10px;
  }
  .season-card p{
    font-size:14px;
    line-height:160%;
    color:var(--gray-2);
    margin:0;
  }
  .season-spring{ background:#F0F7EE; }
  .season-summer{ background:#FDF6E4; }
  .season-fall{ background:#FDF1EF; }
  .season-winter{ background:#EFF6FD; }

  /* ---------- Weather risk cards ---------- */
  .risk-card{
    border:1px solid var(--border);
    border-radius:16px;
    background:#fff;
    padding:28px;
    height:100%;
  }
  .risk-card .risk-icon{
    width:40px;
    height:40px;
    border-radius:10px;
    background:var(--source-bg);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:16px;
  }
  .risk-card h3{
    font-family:'Noto Serif',serif;
    font-weight:600;
    font-size:18px;
    color:var(--navy);
    margin-bottom:8px;
  }
  .risk-card p{
    font-size:14px;
    line-height:160%;
    color:var(--gray-2);
    margin:0;
  }

  /* ---------- Link cards ---------- */
  .link-card{
    border:1px solid var(--border);
    border-radius:16px;
    background:#fff;
    padding:28px 30px;
    height:100%;
  }
  .link-card h3{
    font-family:'Noto Serif',serif;
    font-weight:600;
    font-size:20px;
    color:var(--navy);
    margin-bottom:10px;
  }
  .link-card p{
    font-size:14px;
    line-height:160%;
    color:var(--gray-2);
    margin-bottom:18px;
  }
  .link-card .card-link{
    font-size:14px;
    font-weight:600;
    color:var(--blue);
    text-decoration:none;
  }
  .link-card .card-link:hover{ text-decoration:underline; }

  /* ---------- Rank badges ---------- */
  .rank-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    border-radius:50%;
    font-size:13px;
    font-weight:600;
    color:#fff;
  }
  .rank-1,.rank-2{ background:var(--green); }
  .rank-3{ background:var(--orange); }
  .rank-4{ background:var(--red); }

  /* ---------- Sponsored mover cards ---------- */
  .sponsored-wrap{
    background:var(--row-alt);
    border-radius:16px;
    padding:40px 32px;
  }
  .sponsored-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:24px;
  }
  .sponsored-head h3{
    font-family:'Noto Serif',serif;
    font-weight:600;
    font-size:22px;
    color:var(--navy);
    margin:0;
  }
  .view-all{
    font-size:14px;
    font-weight:600;
    color:var(--blue);
    text-decoration:none;
  }
  .view-all:hover{ text-decoration:underline; }
  .mover-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    padding:24px 20px;
    text-align:center;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
  }
  .mover-logo{
    width:72px;
    height:72px;
    border:1px solid var(--border);
    border-radius:14px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    background:#fff;
  }
  .mover-logo svg{ width:22px; height:22px; }
  .mover-logo span{
    font-size:11px;
    font-weight:700;
    letter-spacing:2px;
    color:var(--navy);
  }
  .mover-name{
    font-weight:600;
    font-size:15px;
    color:var(--ink);
  }
  .mover-rating{
    font-size:13px;
    color:var(--blue);
    font-weight:600;
  }
  .mover-tag{
    font-size:12px;
    color:var(--gray-2);
    margin-bottom:6px;
  }
  .mover-btn{
    display:block;
    width:100%;
    background:var(--row-alt);
    border:1px solid var(--border);
    border-radius:10px;
    padding:10px;
    font-size:14px;
    font-weight:600;
    color:var(--ink);
    text-decoration:none;
  }
  .mover-btn:hover{ background:var(--source-bg); color:var(--ink); }

  /* ---------- Route finder pills ---------- */
  .route-panel{
    border:1px solid var(--border);
    border-radius:16px;
    background:#fff;
    padding:28px 30px;
  }
  .route-panel-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    cursor:pointer;
  }
  .route-panel-head h3{
    font-family:'Noto Serif',serif;
    font-weight:600;
    font-size:26px;
    color:var(--navy);
    margin:0 0 20px;
    max-width:520px;
  }
  .route-toggle{
    border:1px solid var(--border);
    border-radius:10px;
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--navy);
    flex:0 0 36px;
    transition:transform .2s;
  }
  .route-panel-head.collapsed .route-toggle{ transform:rotate(180deg); }
  .route-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
  }
  .route-pill{
    display:flex;
    align-items:center;
    gap:10px;
    border:1px solid var(--border);
    border-radius:10px;
    padding:10px 14px;
    text-decoration:none;
    min-width:0;
  }
  .route-pill:hover{ background:var(--row-alt); }
  .route-code{
    flex:0 0 auto;
    background:var(--source-bg);
    color:var(--blue);
    font-size:11px;
    font-weight:700;
    border-radius:6px;
    padding:4px 7px;
  }
  .route-name{
    font-size:13px;
    color:var(--ink);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* ---------- Blue bullet card ---------- */
  .blue-card{
    background:var(--source-bg);
    border-radius:16px;
    padding:28px 30px;
  }
  .blue-list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .blue-list li{
    display:flex;
    align-items:baseline;
    gap:12px;
    font-size:14px;
    color:var(--gray-2);
    line-height:160%;
  }
  .blue-list li::before{
    content:'';
    flex:0 0 8px;
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--blue);
    transform:translateY(-1px);
  }
  .blue-list strong{ color:var(--ink); font-weight:600; }

  /* ---------- Dark band ---------- */
  .section-dark{
    background:#0E2740;
    padding:100px 60px 300px;
    text-align:center;
    clip-path:polygon(0 0,100% 0,100% 109%,0 65%);
  }
  .section-dark .section-tag{ color:#69B8FF; }
  .section-dark h2{
    font-family:'Noto Serif',serif;
    font-weight:600;
    font-size:44px;
    color:#fff;
    margin-bottom:16px;
  }
  .section-dark .dark-sub{
    color:#B8C7D9;
    font-size:15px;
    max-width:560px;
    margin:0 auto 54px;
  }
  .steps{
    position:relative;
    display:flex;
    gap:40px;
    max-width:1000px;
    margin:0 auto;
  }
  .steps::before{
    content:'';
    position:absolute;
    top:22px;
    left:12%;
    right:12%;
    border-top:2px dashed rgba(105,184,255,.4);
  }
  .step{
    flex:1;
    position:relative;
    text-align:center;
  }
  .step-num{
    width:44px;
    height:44px;
    border-radius:50%;
    background:var(--blue);
    color:#fff;
    font-weight:700;
    font-size:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 18px;
    position:relative;
    z-index:1;
  }
  .step h3{
    font-family:'Noto Serif',serif;
    font-weight:600;
    font-size:18px;
    color:#fff;
    margin-bottom:10px;
  }
  .step p{
    font-size:13px;
    line-height:170%;
    color:#B8C7D9;
    margin:0;
  }

  /* ---------- FAQ card ---------- */
  .faq-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:28px;
    padding:64px 56px;
    margin-top:-236px;
    position:relative;
    z-index:2;
  }
  .faq-item{
    border-bottom:1px solid var(--row-alt);
  }
  .faq-item:last-child{ border-bottom:0; }
  .faq-q{
    width:100%;
    background:none;
    border:0;
    display:flex;
    align-items:center;
    gap:18px;
    padding:22px 0;
    font-size:15px;
    font-weight:600;
    color:var(--ink);
    text-align:left;
  }
  .faq-q .faq-num{
    color:var(--blue);
    font-weight:600;
    font-size:14px;
    flex:0 0 28px;
  }
  .faq-q .faq-text{ flex:1; }
  .faq-q .faq-chevron{
    color:var(--gray-2);
    transition:transform .2s;
  }
  .faq-q:not(.collapsed) .faq-chevron{ transform:rotate(180deg); }
  .faq-a{
    padding:0 46px 24px;
    font-size:14px;
    line-height:170%;
    color:var(--gray-2);
    max-width:900px;
  }
  .faq-feature h3{
    font-family:'Noto Serif',serif;
    font-weight:600;
    font-size:30px;
    color:var(--navy);
    margin-bottom:16px;
  }
  .faq-feature p{
    font-size:14px;
    line-height:170%;
    color:var(--gray-2);
    max-width:900px;
    margin-bottom:8px;
  }

  @media (max-width: 991.98px){
    .section-block{ padding:48px 20px; }
    .section-title{ font-size:32px; }
    .bar-row{ grid-template-columns:150px 1fr 48px; }
    .highlight-card{ flex-direction:column; align-items:flex-start; gap:16px; }
    .highlight-num{ text-align:left; }
    .div-row{ grid-template-columns:100px 1fr 64px; }
    .div-legend{ padding:0; }
      .decide-card{ padding:28px 22px; }
    .vs-card{ flex-direction:column; }
    .vs-col{ padding:32px 24px; }
    .vs-cons{ border-left:0; border-top:1px solid var(--border); }
    .vs-badge{ top:50%; }
    .facts-card{ overflow-x:auto; }
    .facts-table{ min-width:720px; }
    .route-grid{ grid-template-columns:repeat(1,1fr); }
    .section-dark{ padding:60px 20px 280px; }
    .steps{ flex-direction:column; }
    .steps::before{ display:none; }
    .faq-card{ padding:36px 24px; margin-top:-240px; }
  }
/* ---------- Decision cards (tinted) ---------- */
  .decide-card{
    border-radius:24px;
    padding:40px;
    height:100%;
    position:relative;
    overflow:hidden;
  }
  .decide-yes{ background:linear-gradient(150deg,#F1F8EF 0%,#E3F1E1 100%); }
  .decide-no{ background:linear-gradient(150deg,#FDF3F0 0%,#FAE9E3 100%); }
  .decide-head{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:26px;
  }
  .decide-head h3{
    font-family:'Noto Serif',serif;
    font-weight:600;
    font-size:22px;
    line-height:135%;
    color:var(--navy);
    margin:0;
  }
  .decide-icon{
    width:46px;
    height:46px;
    border-radius:14px;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 46px;
    box-shadow:0 10px 20px -10px rgba(23,24,26,.18);
  }
  .decide-list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  .decide-list li{
    display:flex;
    align-items:flex-start;
    gap:12px;
    font-size:14px;
    line-height:160%;
    color:#3E4A55;
    background:rgba(255,255,255,.55);
    border:1px solid rgba(255,255,255,.7);
    border-radius:12px;
    padding:12px 16px;
  }
  .decide-list .icon-bullet{ margin-top:2px; }

  /* ---------- Pros vs Cons split card ---------- */
  .vs-card{
    position:relative;
    display:flex;
    border:1px solid var(--border);
    border-radius:24px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 25px 50px -30px rgba(46,127,196,.15);
  }
  .vs-col{
    flex:1;
    padding:44px 42px;
    min-width:0;
  }
  .vs-pros{ background:#F3FAF1; }
  .vs-cons{
    background:#FDF3F0;
    border-left:1px solid var(--border);
  }
  .vs-badge{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:48px;
    height:48px;
    border-radius:50%;
    background:var(--navy);
    color:#fff;
    font-weight:700;
    font-size:13px;
    letter-spacing:1px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:4px solid #fff;
    z-index:2;
  }
  .vs-head{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:24px;
  }
  .vs-head h3{
    font-family:'Noto Serif',serif;
    font-weight:600;
    font-size:22px;
    color:var(--navy);
    margin:0;
  }
  .vs-head .decide-icon{ width:40px; height:40px; flex:0 0 40px; border-radius:12px; }
  .vs-col .decide-list li{ background:rgba(255,255,255,.6); }
  /* ---------- City compare tabs + tables (Figma scheme, DB content) ---------- */

  .cmp-tabs .filter-pills{
    display:flex;
    flex-wrap:nowrap;
    gap:4px;
    overflow-x:auto;
    border-bottom:1px solid var(--border);
    margin-bottom:0;
  }
  .cmp-tabs .filter-pill{
    appearance:none;
    border:none;
    border-bottom:2px solid transparent;
    border-radius:0;
    background:none;
    padding:14px 18px;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:15px;
    font-weight:600;
    color:var(--gray-2);
    white-space:nowrap;
    cursor:pointer;
    transition:color .2s ease,border-color .2s ease;
  }
  .cmp-tabs .filter-pill:hover{ color:var(--blue); }
  .cmp-tabs .filter-pill.active{
    color:var(--blue);
    border-bottom-color:var(--blue);
    background:none;
  }
  .cmp-tabs .facts-card{
    border:1px solid var(--border);
    border-radius:12px;
    background:#fff;
    margin-top:20px;
    overflow:hidden;
  }
  .cmp-tabs .facts-table th,
  .cmp-tabs .facts-table td{
    padding:13px 18px;
    font-size:14px;
    border-top:1px solid #EEF2F7;
  }
  .cmp-tabs .facts-table thead th{
    background:#F4F9FE;
    color:var(--navy);
    font-weight:700;
    border-top:none;
  }
  .cmp-tabs .facts-table tbody tr:nth-child(even){ background:#F8FAFC; }
  .cmp-tabs .facts-table tbody tr:nth-child(odd){ background:#fff; }
  .cmp-tabs .facts-source{
    background:#F7FBFF;
    border:1px solid var(--border);
    border-radius:12px;
    padding:14px 18px;
    font-size:13px;
    font-weight:500;
    color:var(--gray-2);
    margin-top:16px;
  }
  .cmp-tabs .facts-source a{ color:var(--blue); }
  @media (max-width:640px){
    .cmp-tabs .filter-pill{ padding:12px 14px; font-size:14px; }
  }

/* ---------- Quick Answer card (Figma) ---------- */
.qa-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  background:#F4F9FE;
  border:1px solid var(--border, #D5E5F3);
  border-radius:18px;
  padding:30px 34px;
  margin:26px 0;
}
.qa-card .qa-body{
  flex:1 1 auto;
  min-width:0;
  max-width:720px;
}
.qa-card .qa-title{
  font-family:'Noto Serif',serif;
  font-weight:700;
  font-size:21px;
  line-height:1.35;
  color:var(--navy, #12305B);
  margin:0 0 10px;
}
.qa-card .qa-text{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:15px;
  line-height:1.65;
  color:var(--gray-2, #55606C);
  margin:0;
}
.qa-card .qa-stat{
  flex:0 0 auto;
  text-align:right;
}
.qa-card .qa-stat-num{
  font-family:'Noto Serif',serif;
  font-weight:700;
  font-size:44px;
  line-height:1.1;
  color:var(--navy, #12305B);
}
.qa-card .qa-stat-label{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:13px;
  font-weight:500;
  color:var(--gray-2, #55606C);
  margin-top:4px;
}
@media (max-width:640px){
  .qa-card{
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
    padding:22px;
  }
  .qa-card .qa-stat{ text-align:left; }
  .qa-card .qa-stat-num{ font-size:34px; }
}