/* ═══════════════════════════════════════════
   MOBILE RESPONSIVE — shared, max-width:768px
   Additive only. No desktop rules are altered.
   ═══════════════════════════════════════════ */

/* Hamburger + overlay chrome (hidden on desktop) */
#nav-hamburger{display:none}
#mnav-overlay{display:none}
.hero-stat-mobile{display:none}
.cmp-swipe{display:none}
.sell-head-mobile{display:none}

@media(max-width:768px){

/* ── 1. OVERFLOW GUARDS ── */
html{overflow-x:hidden}
img,svg,video,iframe,canvas,table,pre{max-width:100%}
img{height:auto}

/* ── 2. NAV ── */
nav,nav.site-nav,#mainNav{padding-left:20px;padding-right:20px;height:60px}
nav .nav-links,nav .nav-cta,nav .nav-back{display:none}
#nav-hamburger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;margin-left:auto;padding:0 10px;background:transparent;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
#nav-hamburger span{display:block;height:2px;width:100%;background:var(--black,#0D0D0D);border-radius:2px;transition:transform .3s,opacity .2s}
#nav-hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
#nav-hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
#nav-hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

#mnav-overlay{display:block;position:fixed;inset:0;z-index:999;background:#0D0D0D;color:#fff;overflow-y:auto;-webkit-overflow-scrolling:touch;opacity:0;visibility:hidden;transform:translateX(100%);transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .3s,visibility .3s}
html.mnav-open #mnav-overlay{opacity:1;visibility:visible;transform:translateX(0)}
html.mnav-open,html.mnav-open body{overflow:hidden}
#mnav-close{position:absolute;top:10px;right:12px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#fff;font-family:inherit;font-size:30px;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent}
#mnav-list{list-style:none;margin:0;padding:76px 0 0}
#mnav-list li{margin:0}
#mnav-list a{display:block;font-family:var(--serif,Georgia,serif);font-size:28px;font-weight:500;letter-spacing:-.01em;color:#fff;text-decoration:none;padding:20px 32px;border-bottom:1px solid rgba(255,255,255,0.08)}
#mnav-list a:active{background:rgba(255,255,255,0.05)}
#mnav-cta{display:flex;align-items:center;justify-content:center;min-height:56px;margin:28px 32px 44px;background:var(--gold,#c9a24c);color:#111;font-family:var(--sans,system-ui,sans-serif);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;text-align:center;padding:16px 20px}

#top-rating-bar{top:60px;font-size:10px;padding:0 12px;height:30px;text-align:center}

/* ── 3. HERO ── */
#hero{grid-template-columns:minmax(0,1fr);padding:80px 0 0;min-height:auto}
/* No hero video on mobile — also removes the crossed-out play placeholder */
.hero-video,.hero-video-overlay{display:none}
/* Drop the 80px grid-square backdrop behind the hero graphic */
.hero-bg-lines{display:none}
.hero-left,.hero-right{min-width:0}
.hero-overline,.hero-sub,.hero-title{white-space:normal;overflow-wrap:break-word}
.hero-overline{flex-wrap:wrap;row-gap:8px}
.hero-overline span[style]{white-space:normal!important}
.hero-left{padding:32px 20px 28px}
.hero-title{font-size:clamp(32px,8vw,42px);line-height:1.08}
.hero-sub{font-size:14px;max-width:100%}
.hero-actions{flex-direction:column;gap:12px}
.hero-actions .btn-primary,.hero-actions .btn-ghost{width:100%;text-align:center;padding:16px 20px}
.hero-stats{gap:24px;flex-wrap:wrap}
.hero-stat-num{font-size:26px}
.hero-stat-label{font-size:9px}
/* Hero stats: one sentence each, stacked */
.hero-stats{flex-direction:column;align-items:flex-start;gap:10px}
.hero-stat-div{display:none}
.hero-stats>div{width:100%}
.hero-stats .hero-stat-num,.hero-stats .hero-stat-label,.hero-stats>div>div[style]{display:none}
.hero-stat-mobile{display:block;font-size:12px;font-weight:300;line-height:1.5;color:#fff;margin:0;max-width:34ch}
.hero-stat-mobile b{font-weight:700}
.hero-stat-mobile em{font-style:italic;color:rgba(255,255,255,.62)}
.hero-right{margin:0 16px 40px;padding:24px 20px;border-radius:16px}
.check-burst{margin-left:0}
.money-check{width:100%;max-width:100%}

/* ── 4. STATS BAR ── */
.stats-bar{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:24px 20px;gap:20px}
.stats-bar-item{border-right:none;padding:0 8px}
.stats-bar-num{font-size:24px}
.stats-bar-label{font-size:9px}

/* ── 5. SECTION PADDING ── */
section{padding-left:20px;padding-right:20px;padding-top:56px;padding-bottom:56px}
.section-title{font-size:clamp(26px,6vw,36px)}
.section-sub{font-size:14px;margin-bottom:32px}

/* ── 6. GRIDS → SINGLE COLUMN ── */
.sell-grid,.invest-layout{grid-template-columns:minmax(0,1fr);gap:32px}
/* Sell: heading above the graphic; 105% stat tucked beside "Offers vary" */
.sell-head-mobile{display:block;margin-bottom:-8px}
.sell-content>.section-tag:first-child,.sell-grid>div:not(.sell-img-block):not(.sell-head-mobile)>.section-tag:first-child,.sell-grid>div:not(.sell-img-block):not(.sell-head-mobile)>.section-title{display:none}
.sell-img-block{display:grid;grid-template-columns:1fr auto;grid-template-areas:"img img" "note badge";align-items:baseline;column-gap:12px}
.sell-img{grid-area:img}
.sell-img-note{grid-area:note;text-align:left;margin-top:8px}
.sell-badge{grid-area:badge;position:static;top:auto;right:auto;display:flex;align-items:baseline;gap:5px;background:transparent;color:var(--grey);padding:0;margin:8px 0 0;text-align:right}
.sell-badge-num{font-size:13px;font-weight:700;color:var(--black);line-height:1}
.sell-badge-lbl{font-size:9px;letter-spacing:.1em;color:var(--grey);margin-top:0}
.how-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1px}
.services-grid,.testi-grid,.calc-grid{grid-template-columns:minmax(0,1fr)}
/* Service-card reveal panels: fit their copy inside the card on small screens */
.service-card{padding:28px 22px;min-height:270px}
.sc-anim{padding:22px}
.sc-anim-title{font-size:16px}
.sc-anim-copy{font-size:11.5px;line-height:1.5;margin-top:9px}
.sc-anim-link .scene-img{height:58px;margin-top:9px}
.sc-foot{font-size:9px}
.calc-grid-2,.perks,#faqList,.inv-grid-2,.lf-grid{grid-template-columns:minmax(0,1fr)}
.footer-top,.fl-top{grid-template-columns:minmax(0,1fr);gap:32px}
.freq-row{grid-template-columns:minmax(0,1fr)}
.sell-grid>*,.invest-layout>*,.footer-top>*,.fl-top>*,.calc-grid-2>*,.lf-grid>*,.inv-grid-2>*,.perks>*{min-width:0}

/* ── 7. FORMS ── */
.f-row,.f-row-3{grid-template-columns:minmax(0,1fr)}
.ds-grid{grid-template-columns:minmax(0,1fr)}
.f-group input,.f-group select,.f-group textarea,.ds-input,.ds-select,.ds-textarea,input[type="text"],input[type="tel"],input[type="email"],input[type="number"],select,textarea{font-size:16px}
.f-group input,.f-group select,.f-group textarea,.ds-input,.ds-select,.ds-textarea{padding:12px 14px}
.form-submit,.ds-submit{padding:16px;font-size:13px}
.ds-footer{flex-direction:column;align-items:flex-start}
.ds-submit{width:100%;text-align:center}
.ds-tab{padding:18px 16px}
.ds-tab h4{font-size:16px}
.ds-form{padding:24px 16px 20px}

/* ── 8. FOOTER ── */
footer,.imre-footer{padding-left:20px;padding-right:20px}
footer{padding-top:40px;padding-bottom:24px}
.footer-cols,.fl-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
.footer-lead{max-width:100%}
.footer-bottom,.fl-bottom{flex-direction:column;gap:12px;align-items:flex-start}

/* ── 9. COOKIE BAR ── */
#cookie-bar{flex-direction:column;padding:16px 20px;gap:12px;align-items:flex-start}
.cookie-btn{width:100%;text-align:center}

/* ── 10. MISC ── */
/* Scroll reveals: swap horizontal entrances for vertical so nothing waits off-canvas */
[data-anim="fade-left"],[data-anim="fade-right"]{transform:translateY(32px)}
.review-item{padding:16px 0}
.reviews-bar{grid-template-columns:1fr}
.btn-primary,.btn-ghost{min-height:48px;display:inline-flex;align-items:center;justify-content:center}
.loi-head,.loi-body{padding-left:20px;padding-right:20px}

/* Comparison table \u2014 scroll horizontally rather than squash */
.cmp-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp-table th,.cmp-table td{padding:11px 10px!important}
.cmp-th-benefit,.cmp-benefit{width:116px;min-width:116px;max-width:116px;white-space:normal;font-size:12px;line-height:1.35;padding-left:12px!important;padding-right:8px!important}
.cmp-col-h,.cmp-cell,.cmp-foot-cell{width:150px;min-width:150px;max-width:170px}
.cmp-col-h h3{font-size:15px}
.cmp-tag{font-size:8px;letter-spacing:.12em;padding:3px 7px;margin-bottom:7px;white-space:normal}
.cmp-close{font-size:10px}
.cmp-btn{font-size:10px;padding:12px 8px;white-space:normal;line-height:1.25;display:flex;align-items:center;justify-content:center;text-align:center;min-height:44px;text-indent:.14em}
.cmp-swipe{display:flex;align-items:center;justify-content:flex-end;gap:8px;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);margin-bottom:10px}
.cmp-swipe b{color:var(--black)}
.cmp-swipe i{font-style:normal;font-size:14px;color:var(--gold);animation:cmpNudge 1.6s ease-in-out infinite}
@keyframes cmpNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}

/* Deal calculator card — tighter on mobile (inline styles need !important) */
a[href="/deal-calc"][style]{padding:22px 18px!important}
a[href="/deal-calc"][style] h4{font-size:16px!important;margin-bottom:6px!important}
a[href="/deal-calc"][style] p{font-size:12px!important;line-height:1.55!important;margin-bottom:12px!important}
a[href="/deal-calc"][style] span{font-size:9px!important}
a[href="/deal-calc"][style]>div:first-child{width:32px!important;height:32px!important;margin-bottom:12px!important}

/* Wrapping — long inline items must not force tracks wider than the viewport */
.faq-section-title{flex-wrap:wrap;row-gap:10px}
.faq-guide-link{white-space:normal}

/* Deal Analyzer pro forma */
.pf-dash{position:static}
.pf-dash-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.pf-g2,.pf-g3,.pf-g4,.pf-chart,.pf-src,.pf-sum{grid-template-columns:minmax(0,1fr)}
.pf-sec{padding:20px 16px 22px}
.pf-verdict{flex-direction:column;align-items:flex-start}
.pf-tbl input,.pf-tbl select,.pf-f input,.pf-f select{font-size:16px}
.wrap{padding-left:20px;padding-right:20px}

/* Guides */
.guide-layout{grid-template-columns:minmax(0,1fr)}
.guide-content{padding-left:0;min-width:0}
.duo,.hh-stats,.score-grid{grid-template-columns:minmax(0,1fr)}
.cards-grid,.tools-grid{grid-template-columns:minmax(0,1fr)}
}

/* ── 11. EXTRA SMALL — 390px ── */
@media(max-width:390px){
.hero-title{font-size:30px}
.section-title{font-size:26px}
.hero-stats{gap:16px}
.stats-bar,.footer-cols,.fl-cols,.pf-dash-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
#mnav-list a{font-size:24px;padding:17px 24px}
}