:root {
    color-scheme: light;
    --ink: #192c40;
    --ink-soft: #344b61;
    --muted: #526579;
    --gold: #d4af37;
    --gold-bright: #f2d46b;
    --teal: #176f71;
    --line: rgba(255, 255, 255, .5);
    --glass: rgba(255, 255, 255, .35);
    --deep-glass: rgba(25, 44, 64, .83);
    --shadow: 0 20px 48px rgba(31, 51, 70, .18);
}

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: 92px;
}

body {
    min-width: 320px;
    margin: 0;
    color: var(--ink);
    background: linear-gradient(135deg, #7f8da6 0%, #9099ae 48%, #a5acbb 100%);
    background-attachment: fixed;
    font-family: "DM Sans", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
}

body::before {
    position: fixed;
    z-index: -1;
    inset: 0;
    background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 11px);
    content: "";
    pointer-events: none;
}

a { color: inherit; text-decoration: none; }
button, summary { font: inherit; }
img { display: block; max-width: 100%; }

.section-wrap {
    width: min(1160px, calc(100% - 48px));
    margin-inline: auto;
}

.site-header {
    position: sticky;
    z-index: 50;
    top: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .28);
    background: rgba(106, 122, 143, .78);
    box-shadow: 0 8px 24px rgba(35, 50, 66, .08);
    backdrop-filter: blur(18px);
}

.nav-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: min(1280px, calc(100% - 48px));
    min-height: 76px;
    margin: auto;
}

.brand {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-family: Manrope, Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;
}

.brand strong { color: #ffe08a; }

.brand-mark,
.mini-mark {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    color: #25384b;
    background: linear-gradient(145deg, #f5dc83, #d4af37);
    box-shadow: 0 5px 12px rgba(36, 38, 34, .18);
}

.brand-mark { width: 38px; height: 38px; border-radius: 11px; }
.brand-mark i { font-size: 17px; }

.desktop-nav,
.nav-actions {
    display: flex;
    align-items: center;
}

.desktop-nav { gap: 24px; }
.desktop-nav a,
.login-link { color: rgba(255, 255, 255, .94); font-size: 14px; font-weight: 600; }
.desktop-nav a:hover,
.login-link:hover { color: #ffe08a; }
.nav-actions { gap: 18px; }
.mobile-nav { display: none; }

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.button:hover { transform: translateY(-2px); }
.button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #fff1af; outline-offset: 3px; }
.button-small { min-height: 42px; padding-inline: 15px; font-size: 14px; }

.button-gold {
    color: #2e2b1c;
    background: linear-gradient(135deg, #f1d46b, #d4af37);
    border-color: rgba(255, 245, 198, .7);
    box-shadow: 0 9px 20px rgba(96, 75, 15, .2);
}

.button-gold:hover { box-shadow: 0 13px 24px rgba(96, 75, 15, .28); }

.button-glass {
    color: #fff;
    background: rgba(255, 255, 255, .13);
    border-color: rgba(255, 255, 255, .48);
    backdrop-filter: blur(10px);
}

.button-glass:hover { background: rgba(255, 255, 255, .23); }
.button-dark { color: #fff; background: #24384d; box-shadow: 0 9px 19px rgba(33, 45, 59, .22); }
.button-dark:hover { background: #172b3e; }

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(440px, .94fr);
    align-items: center;
    gap: 60px;
    min-height: 670px;
    padding-top: 62px;
    padding-bottom: 72px;
}

.hero-copy { position: relative; z-index: 1; animation: rise-in .7s ease both; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 15px; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: uppercase; }
.eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 0 4px rgba(242, 212, 107, .18); }

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: Manrope, "DM Sans", Arial, sans-serif; }

.hero h1 {
    max-width: 650px;
    margin-bottom: 20px;
    color: #fff;
    font-size: 56px;
    font-weight: 800;
    line-height: 1.08;
}

.hero h1 span { color: #ffe08a; }
.hero-lede { max-width: 600px; margin-bottom: 26px; color: rgba(255, 255, 255, .91); font-size: 18px; line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.benefit-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px 18px;
    max-width: 570px;
    margin: 27px 0 0;
    padding: 0;
    color: rgba(255, 255, 255, .94);
    font-size: 13px;
    font-weight: 600;
    list-style: none;
}

.benefit-list li { display: flex; align-items: center; gap: 8px; }
.benefit-list i { color: #ffe08a; }

.hero-visual { position: relative; display: grid; min-height: 440px; place-items: center; animation: rise-in .8s .1s ease both; }
.visual-orbit { position: absolute; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; transform: rotate(-18deg); }
.orbit-one { width: 490px; height: 300px; }
.orbit-two { width: 530px; height: 360px; transform: rotate(24deg); }

.board-window {
    position: relative;
    z-index: 1;
    width: min(100%, 500px);
    padding: 20px;
    overflow: hidden;
    color: #f8fbff;
    background: linear-gradient(155deg, rgba(34, 54, 75, .95), rgba(26, 43, 61, .92));
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 15px;
    box-shadow: 0 30px 70px rgba(24, 37, 52, .36), inset 0 1px rgba(255, 255, 255, .2);
    backdrop-filter: blur(18px);
    transform: perspective(1200px) rotateY(-4deg) rotateX(2deg);
}

.board-topbar,
.board-brand,
.board-heading,
.board-stats,
.board-label,
.pickup-row,
.board-foot { display: flex; align-items: center; }
.board-topbar { justify-content: space-between; padding-bottom: 15px; border-bottom: 1px solid rgba(255, 255, 255, .13); font-size: 12px; font-weight: 700; }
.board-brand { gap: 8px; }
.mini-mark { width: 27px; height: 27px; border-radius: 7px; font-size: 12px; }
.live-status { display: inline-flex; align-items: center; gap: 6px; color: #97e7c8; font-size: 10px; letter-spacing: 0; }
.live-status span { width: 7px; height: 7px; border-radius: 50%; background: #73d5a9; box-shadow: 0 0 0 4px rgba(115, 213, 169, .12); }
.board-heading { justify-content: space-between; gap: 12px; padding: 18px 0 14px; }
.board-kicker { color: #b4c2d1; font-size: 11px; }
.board-heading h2 { margin: 2px 0 0; font-size: 20px; }
.board-time { color: #d7e0eb; font-size: 12px; white-space: nowrap; }
.board-time i { margin-right: 4px; color: #f1d46b; }
.board-stats { gap: 9px; margin-bottom: 16px; }
.board-stats div { display: flex; flex: 1; flex-direction: column; gap: 2px; padding: 9px 11px; background: rgba(255, 255, 255, .075); border: 1px solid rgba(255, 255, 255, .09); border-radius: 7px; }
.board-stats span { color: #c1cedb; font-size: 10px; }
.board-stats strong { color: #fff; font-family: Manrope, sans-serif; font-size: 18px; }
.board-label { justify-content: space-between; padding: 0 4px 7px; color: #aebdca; font-size: 9px; font-weight: 700; letter-spacing: 0; }
.pickup-row { gap: 10px; min-height: 43px; padding: 5px 8px; border-top: 1px solid rgba(255, 255, 255, .09); }
.vehicle-tag { min-width: 60px; padding: 5px 7px; border-radius: 5px; color: #15283c; font-size: 11px; font-weight: 800; text-align: center; }
.tag-teal { background: #79dfcc; }
.tag-gold { background: #f2d46b; }
.tag-blue { background: #a8c0ff; }
.pickup-spot { flex: 1; color: #e3eaf2; font-size: 11px; }
.pickup-spot i { margin-right: 4px; color: #84dccc; }
.row-state { color: #9ee5cb; font-size: 10px; font-weight: 700; }
.row-waiting { color: #f3dc88; }
.board-foot { gap: 7px; margin-top: 12px; padding-top: 12px; color: #bac6d2; border-top: 1px solid rgba(255, 255, 255, .13); font-size: 10px; }
.board-foot i { color: #82ded1; }

.floating-note {
    position: absolute;
    z-index: 2;
    right: -16px;
    bottom: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 15px;
    color: #fff;
    background: rgba(39, 60, 78, .94);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 9px;
    box-shadow: 0 14px 28px rgba(25, 40, 55, .24);
    animation: note-in .8s .5s ease both;
}

.note-icon { display: grid; width: 29px; height: 29px; place-items: center; color: #14392f; background: #8be1bf; border-radius: 50%; font-size: 12px; }
.floating-note strong, .floating-note small { display: block; }
.floating-note strong { font-size: 12px; }
.floating-note small { color: #c5d3df; font-size: 10px; }

.trust-strip { border-block: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .19); backdrop-filter: blur(12px); }
.trust-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; min-height: 82px; color: #fff; }
.trust-inner > span { color: rgba(255, 255, 255, .8); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.trust-inner div { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; }
.trust-inner i { color: #ffe08a; font-size: 17px; }

.problem-section { padding-top: 100px; padding-bottom: 105px; }
.section-heading { max-width: 760px; margin-bottom: 36px; }
.section-heading .eyebrow, .district-copy .eyebrow, .trial-copy .eyebrow, .final-cta .eyebrow { color: #fff7d7; }
.section-heading h2, .district-copy h2, .trial-copy h2, .final-cta h2 { margin-bottom: 14px; font-size: 40px; font-weight: 800; line-height: 1.15; }
.section-heading h2 span { color: #fff4c5; }
.section-heading > p:last-child { max-width: 650px; margin-bottom: 0; color: rgba(255, 255, 255, .9); font-size: 17px; }
.compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.compare-panel { padding: 26px; background: var(--glass); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); backdrop-filter: blur(15px); }
.panel-title { display: flex; align-items: center; gap: 13px; margin-bottom: 17px; }
.panel-title h3 { margin: 0; font-size: 20px; }
.panel-icon { display: grid; flex: 0 0 auto; width: 39px; height: 39px; place-items: center; color: #fff; background: rgba(30, 52, 72, .74); border-radius: 9px; }
.compare-panel ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.compare-panel li { display: flex; align-items: flex-start; gap: 11px; color: #24384d; }
.problem-panel li i { color: #9c635d; }
.solution-panel { background: rgba(223, 255, 244, .48); border-color: rgba(218, 255, 242, .65); }
.solution-panel .panel-icon { color: #153f3b; background: #9ae2ce; }
.solution-panel li i { color: #16826e; }

.features-section { padding: 92px 0 100px; background: rgba(31, 52, 72, .84); border-block: 1px solid rgba(255, 255, 255, .22); }
.centered-heading { margin-right: auto; margin-left: auto; text-align: center; }
.centered-heading .eyebrow { justify-content: center; }
.centered-heading > p:last-child { margin-right: auto; margin-left: auto; }
.centered-heading h2 { color: #fff; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.feature-card { min-height: 210px; padding: 23px; color: #fff; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .16); border-radius: 11px; transition: transform .18s ease, background .18s ease; }
.feature-card:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .14); }
.feature-icon { display: grid; width: 43px; height: 43px; margin-bottom: 18px; place-items: center; color: #192c40; border-radius: 9px; font-size: 18px; }
.feature-teal .feature-icon { background: #82dfd0; }
.feature-gold .feature-icon { background: #f2d46b; }
.feature-blue .feature-icon { background: #a9c1ff; }
.feature-rose .feature-icon { background: #f4a9b2; }
.feature-purple .feature-icon { background: #c8b5f0; }
.feature-green .feature-icon { background: #a9dfac; }
.feature-card h3 { margin-bottom: 7px; font-size: 18px; }
.feature-card p { margin: 0; color: rgba(255, 255, 255, .78); font-size: 14px; }

.steps-section { padding-top: 96px; padding-bottom: 105px; }
.steps-grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.steps-grid::before { position: absolute; top: 35px; right: 16%; left: 16%; height: 1px; background: rgba(255, 255, 255, .52); content: ""; }
.step-card { position: relative; z-index: 1; padding: 24px 23px; color: #20354a; background: rgba(255, 255, 255, .4); border: 1px solid rgba(255, 255, 255, .58); border-radius: 12px; box-shadow: 0 15px 34px rgba(34, 52, 70, .14); backdrop-filter: blur(12px); }
.step-number { position: absolute; top: 22px; right: 22px; color: rgba(31, 51, 71, .28); font-family: Manrope, sans-serif; font-size: 18px; font-weight: 800; }
.step-icon { display: grid; width: 49px; height: 49px; margin-bottom: 20px; place-items: center; color: #24384d; background: linear-gradient(145deg, #f4dc87, #d4af37); border-radius: 12px; font-size: 20px; box-shadow: 0 7px 14px rgba(124, 94, 22, .17); }
.step-card h3 { margin-bottom: 8px; font-size: 18px; }
.step-card p { margin: 0; color: #53677b; font-size: 14px; }

.trial-section { position: relative; overflow: hidden; padding: 76px 0; background: linear-gradient(110deg, #ead071 0%, #d4af37 46%, #c79d26 100%); }
.trial-section::before { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .1) 0 1px, transparent 1px 14px); content: ""; pointer-events: none; }
.trial-inner { position: relative; display: grid; grid-template-columns: 180px minmax(0, 1fr) 250px; align-items: center; gap: 38px; }
.trial-stamp { display: flex; align-items: center; justify-content: center; gap: 5px; width: 160px; height: 160px; color: #fff; border: 1px solid rgba(255, 255, 255, .75); border-radius: 50%; box-shadow: inset 0 0 0 8px rgba(255, 255, 255, .16), 0 12px 26px rgba(96, 70, 11, .14); transform: rotate(-8deg); }
.trial-stamp > span { font-family: Manrope, sans-serif; font-size: 62px; font-weight: 800; line-height: 1; }
.trial-stamp small { font-size: 12px; font-weight: 700; line-height: 1.15; text-transform: uppercase; }
.trial-copy .eyebrow { color: #594711; }
.trial-copy h2 { margin-bottom: 11px; color: #283448; font-size: 42px; }
.trial-copy h2 span { color: #fff; }
.trial-copy > p:not(.eyebrow) { margin-bottom: 22px; color: #51451f; }
.trial-details { display: grid; gap: 14px; padding-left: 25px; border-left: 1px solid rgba(59, 47, 12, .2); }
.trial-details div { display: flex; align-items: center; gap: 10px; color: #413a24; font-size: 13px; font-weight: 700; }
.trial-details i { color: #fff; }

.district-section { display: grid; grid-template-columns: .9fr 1fr; align-items: center; gap: 90px; padding-top: 106px; padding-bottom: 106px; }
.district-copy h2 { color: #fff; }
.district-copy > p:not(.eyebrow) { max-width: 510px; margin-bottom: 23px; color: rgba(255, 255, 255, .9); font-size: 17px; }
.district-art { position: relative; min-height: 265px; border: 1px solid rgba(255, 255, 255, .36); border-radius: 14px; background: rgba(255, 255, 255, .2); box-shadow: var(--shadow); backdrop-filter: blur(12px); }
.district-art::before { position: absolute; top: 50%; left: 50%; width: 2px; height: 115px; background: rgba(255, 255, 255, .58); content: ""; transform: translate(-50%, -50%); }
.district-art::after { position: absolute; top: 50%; left: 50%; width: 58%; height: 2px; background: rgba(255, 255, 255, .58); content: ""; transform: translate(-50%, -50%); }
.district-hub, .district-branch { position: absolute; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 11px 13px; color: #fff; background: #283d53; border: 1px solid rgba(255, 255, 255, .4); border-radius: 8px; box-shadow: 0 8px 18px rgba(28, 43, 60, .22); font-size: 12px; font-weight: 700; }
.district-hub { top: 50%; left: 50%; background: #5a4b1c; transform: translate(-50%, -50%); }
.district-hub i { color: #ffe08a; }
.district-branch i { color: #84dfd0; }
.branch-one { top: 15%; left: 8%; }
.branch-two { top: 15%; right: 8%; }
.branch-three { right: 8%; bottom: 15%; }

.testimonial-section { padding: 89px 0 84px; background: rgba(31, 52, 72, .82); border-block: 1px solid rgba(255, 255, 255, .2); }
.testimonial-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
.quote-card { position: relative; margin: 0; padding: 44px 26px 26px; color: #fff; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .17); border-radius: 11px; }
.quote-mark { position: absolute; top: 14px; left: 24px; color: #f2d46b; font-family: Georgia, serif; font-size: 54px; line-height: 1; opacity: .35; }
.quote-card blockquote { position: relative; z-index: 1; margin: 0 0 22px; font-family: Manrope, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.5; }
.quote-card figcaption { display: flex; align-items: center; gap: 10px; }
.quote-avatar { display: grid; width: 36px; height: 36px; place-items: center; color: #24384d; background: #f2d46b; border-radius: 50%; }
.quote-card figcaption strong, .quote-card figcaption small { display: block; }
.quote-card figcaption strong { font-size: 12px; }
.quote-card figcaption small { color: #becbd7; font-size: 11px; }
.sample-note { margin: 15px 0 0; color: rgba(255, 255, 255, .68); font-size: 11px; text-align: center; }

.faq-section { padding-top: 96px; padding-bottom: 104px; }
.faq-list { width: min(780px, 100%); margin-inline: auto; }
.faq-list details { margin-bottom: 10px; padding: 0 19px; color: #20354a; background: rgba(255, 255, 255, .43); border: 1px solid rgba(255, 255, 255, .56); border-radius: 9px; box-shadow: 0 9px 20px rgba(32, 51, 68, .1); backdrop-filter: blur(12px); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 60px; cursor: pointer; font-family: Manrope, sans-serif; font-size: 15px; font-weight: 700; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-plus { display: grid; flex: 0 0 auto; width: 27px; height: 27px; place-items: center; color: #253a4f; background: rgba(212, 175, 55, .45); border-radius: 50%; font-size: 11px; transition: transform .18s ease; }
.faq-list details[open] .faq-plus { transform: rotate(45deg); }
.faq-list details p { margin: -2px 35px 17px 0; color: #53677b; font-size: 14px; }

.final-cta { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-bottom: 86px; padding: 35px 38px; color: #fff; background: linear-gradient(115deg, rgba(32, 53, 74, .94), rgba(38, 67, 88, .87)); border: 1px solid rgba(255, 255, 255, .3); border-radius: 13px; box-shadow: 0 20px 42px rgba(29, 45, 63, .2); }
.final-cta-copy { max-width: 600px; }
.final-cta h2 { margin-bottom: 8px; font-size: 30px; }
.final-cta-copy > p:last-child { margin: 0; color: rgba(255, 255, 255, .78); }
.final-cta-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 10px; }

.site-footer { color: rgba(255, 255, 255, .84); background: rgba(25, 42, 59, .92); border-top: 1px solid rgba(255, 255, 255, .18); }
.footer-main { display: grid; grid-template-columns: 1.2fr 1fr auto; align-items: start; gap: 34px; padding-top: 39px; padding-bottom: 34px; }
.footer-brand p { max-width: 290px; margin: 12px 0 0; color: #bfccd7; font-size: 13px; }
.footer-links, .footer-legal { display: flex; flex-wrap: wrap; gap: 13px 20px; padding-top: 10px; font-size: 13px; }
.footer-links a:hover, .footer-legal a:hover { color: #ffe08a; }
.footer-legal { flex-direction: column; gap: 9px; padding-top: 8px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 15px; padding-top: 15px; padding-bottom: 18px; color: #adbdca; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 11px; }

@keyframes rise-in {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes note-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1100px) {
    .visual-orbit { display: none; }
}

@media (max-width: 1100px) {
    .desktop-nav { gap: 15px; }
    .nav-wrap { gap: 16px; }
    .hero { grid-template-columns: minmax(0, 1fr); gap: 26px; min-height: auto; }
    .hero-copy { max-width: 800px; }
    .hero-visual { min-height: 420px; }
    .hero h1 { font-size: 48px; }
    .trial-inner { grid-template-columns: 140px minmax(0, 1fr); gap: 28px; }
    .trial-stamp { width: 135px; height: 135px; }
    .trial-stamp > span { font-size: 54px; }
    .trial-details { grid-column: 2; grid-template-columns: repeat(3, 1fr); padding: 0; border: 0; }
    .district-section { gap: 48px; }
}

@media (max-width: 760px) {
    .section-wrap, .nav-wrap { width: min(100% - 36px, 600px); }
    .visual-orbit { display: none; }
    .desktop-nav, .nav-actions { display: none; }
    .mobile-nav { position: relative; display: block; margin-left: auto; }
    .mobile-nav summary { display: grid; width: 42px; height: 42px; place-items: center; color: #fff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .35); border-radius: 8px; cursor: pointer; list-style: none; }
    .mobile-nav summary::-webkit-details-marker { display: none; }
    .mobile-nav-panel { position: absolute; top: 51px; right: 0; display: grid; width: 230px; gap: 2px; padding: 9px; background: rgba(37, 55, 74, .97); border: 1px solid rgba(255, 255, 255, .25); border-radius: 9px; box-shadow: 0 15px 34px rgba(24, 40, 56, .28); backdrop-filter: blur(16px); }
    .mobile-nav-panel a { padding: 10px 11px; color: #fff; border-radius: 6px; font-size: 14px; }
    .mobile-nav-panel a:hover { background: rgba(255, 255, 255, .11); }
    .mobile-nav-panel .mobile-trial { color: #282819; background: var(--gold-bright); font-weight: 700; }
    .hero { grid-template-columns: 1fr; gap: 30px; min-height: auto; padding-top: 58px; padding-bottom: 62px; }
    .hero h1 { max-width: 650px; font-size: 46px; }
    .hero-lede { max-width: 640px; font-size: 17px; }
    .hero-visual { min-height: 390px; }
    .board-window { width: min(100%, 520px); transform: none; }
    .floating-note { right: 0; bottom: 6px; }
    .trust-inner { justify-content: flex-start; padding-block: 17px; }
    .trust-inner > span { width: 100%; }
    .problem-section, .steps-section, .faq-section { padding-block: 72px; }
    .section-heading h2, .district-copy h2 { font-size: 34px; }
    .compare-grid { grid-template-columns: 1fr; }
    .features-section, .testimonial-section { padding-block: 72px; }
    .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .steps-grid { grid-template-columns: 1fr; gap: 13px; }
    .steps-grid::before { top: 35px; bottom: 35px; left: 47px; width: 1px; height: auto; }
    .step-card { min-height: 158px; padding-left: 87px; }
    .step-icon { position: absolute; top: 22px; left: 20px; width: 47px; height: 47px; }
    .step-number { top: 18px; right: 18px; }
    .trial-section { padding-block: 56px; }
    .trial-inner { grid-template-columns: 105px minmax(0, 1fr); gap: 20px; }
    .trial-stamp { width: 102px; height: 102px; }
    .trial-stamp > span { font-size: 43px; }
    .trial-stamp small { font-size: 9px; }
    .trial-copy h2 { font-size: 34px; }
    .trial-details { grid-column: 1 / -1; }
    .district-section { grid-template-columns: 1fr; gap: 35px; padding-block: 76px; }
    .district-art { order: 2; min-height: 235px; }
    .testimonial-grid { grid-template-columns: 1fr; }
    .final-cta { align-items: flex-start; flex-direction: column; margin-bottom: 62px; padding: 27px; }
    .footer-main { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
    .section-wrap, .nav-wrap { width: calc(100% - 30px); }
    .nav-wrap { min-height: 66px; }
    .brand { gap: 8px; font-size: 15px; }
    .brand-mark { width: 34px; height: 34px; }
    .hero { padding-top: 44px; }
    .hero h1 { font-size: 36px; }
    .hero-lede { font-size: 15px; }
    .hero-actions { align-items: stretch; flex-direction: column; }
    .hero-actions .button { width: 100%; }
    .benefit-list { grid-template-columns: 1fr; gap: 9px; font-size: 12px; }
    .hero-visual { min-height: 355px; margin-inline: -4px; }
    .board-window { padding: 14px; border-radius: 11px; }
    .board-heading h2 { font-size: 17px; }
    .board-time { font-size: 10px; }
    .board-stats { gap: 5px; }
    .board-stats div { padding: 7px; }
    .board-stats span { font-size: 9px; }
    .board-stats strong { font-size: 16px; }
    .pickup-row { gap: 7px; }
    .vehicle-tag { min-width: 52px; font-size: 10px; }
    .pickup-spot { font-size: 10px; }
    .row-state { font-size: 9px; }
    .board-foot { font-size: 9px; }
    .floating-note { right: 0; bottom: -4px; padding: 8px 11px; }
    .trust-inner div { width: calc(50% - 14px); font-size: 12px; }
    .section-heading h2, .district-copy h2 { font-size: 30px; }
    .section-heading > p:last-child, .district-copy > p:not(.eyebrow) { font-size: 15px; }
    .compare-panel { padding: 19px; }
    .panel-title h3 { font-size: 17px; }
    .compare-panel li { font-size: 14px; }
    .feature-grid { grid-template-columns: 1fr; }
    .feature-card { min-height: 0; }
    .trial-inner { grid-template-columns: 1fr; gap: 21px; }
    .trial-stamp { position: absolute; top: 0; right: 0; width: 76px; height: 76px; }
    .trial-stamp > span { font-size: 32px; }
    .trial-stamp small { font-size: 8px; }
    .trial-copy { padding-right: 70px; }
    .trial-copy h2 { font-size: 30px; }
    .trial-copy > p:not(.eyebrow) { font-size: 14px; }
    .trial-copy .button { width: 100%; padding-inline: 10px; font-size: 13px; }
    .trial-details { grid-column: auto; grid-template-columns: 1fr; gap: 10px; }
    .district-art { min-height: 205px; }
    .district-branch, .district-hub { gap: 6px; padding: 9px; font-size: 10px; }
    .branch-one { left: 4%; }
    .branch-two, .branch-three { right: 4%; }
    .quote-card { padding: 34px 21px 21px; }
    .quote-card blockquote { font-size: 16px; }
    .faq-list details { padding-inline: 14px; }
    .faq-list summary { font-size: 14px; }
    .final-cta { padding: 22px; }
    .final-cta h2 { font-size: 26px; }
    .final-cta-actions { width: 100%; flex-direction: column; }
    .final-cta-actions .button { width: 100%; }
    .footer-main { grid-template-columns: 1fr; gap: 17px; }
    .footer-brand { grid-column: auto; }
    .footer-links { gap: 10px 17px; }
    .footer-legal { flex-direction: row; }
    .footer-bottom { flex-direction: column; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}