:root{--brand:var(--orange);--brand-dark:var(--orange-dark);--brand-soft:var(--orange-soft);--header:72px}
html,body{background:var(--surface-soft)}
.mobile-brand{color:var(--orange);letter-spacing:.05em;font-size:1rem}
.mobile-brand .logo-mark{width:35px;height:32px;color:#f5a400}
.mobile-header-inner{gap:8px;padding-inline:12px}
.header-tools{margin-left:auto;gap:4px}
.language-toggle,.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 44px;border:1px solid var(--line);border-radius:50%;color:var(--ink);background:var(--surface)}
.mobile-header-inner .header-cta{display:none}
.button-primary{color:#111827!important;background:var(--orange)!important}
.button-secondary{background:var(--surface)!important}
.mobile-app :is(.product-window,.hero-panel,.info-panel,.lead-form,.price-card,.mock-form,.table-mock,.checker-card,.map-panel,.content-card,.step-card,.problem-card,.boundary-card,.factor,.contact-option){background:var(--surface)!important}
.mobile-app .mock-summary{background:#0a192b!important;color:white}
.mock-confirm{padding:12px;text-align:center;border-radius:12px;background:var(--orange);color:#111827;font-weight:800}
.drawer-close{width:44px;height:44px}
.mobile-app .section-dark{color:#f7f8fa}
[data-theme="dark"] :is(.mobile-header,.mobile-drawer,.drawer-close,.menu-button,.sticky-conversion,.map-chip,.map-summary,.proof-line span,.hero-facts span,.faq-list details,.footer-accordions details){background:var(--surface);border-color:var(--line);color:var(--ink)}
[data-theme="dark"] .mobile-app :is(.hero,.page-hero,.price-hero){background:radial-gradient(circle at 85% 8%,#2c2415,transparent 34%),var(--cream)}
[data-theme="dark"] .mobile-app .field :is(input,select,textarea){background:var(--surface);color:var(--ink);border-color:var(--line)}
.mobile-app main{overflow-wrap:anywhere}
.mobile-app :is(.hero-facts,.proof-line) span{max-width:100%;white-space:normal}
@media(max-width:360px){.mobile-brand{font-size:.85rem;gap:5px}.mobile-brand .logo-mark{width:28px}.mobile-header-inner{gap:5px;padding-inline:10px}}
.mobile-footer{background:#0a192b;color:#f7f8fa}
.mobile-footer p,.mobile-footer .footer-bottom{color:#a9b6ca}
[data-theme="dark"] .mobile-app .price-card{color:var(--ink)}
@media(max-width:360px){.mobile-header-inner>a:not(.mobile-brand){display:none}}

/* Compact feature cards wrap into rows instead of clipping off-screen. */
.mobile-app :is(.fact-grid,.service-strip-grid){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;overflow:visible!important;padding:12px 0!important}
.mobile-app :is(.fact-grid>div,.service-strip-item){min-width:0;min-height:0;display:flex!important;flex-direction:column;align-items:flex-start;gap:5px;padding:12px!important;border-radius:12px!important;background:var(--surface)!important}
.mobile-app :is(.fact-icon,.service-strip-item .icon-box){width:28px;height:28px;border-radius:9px;margin-bottom:2px}
.mobile-app :is(.fact-icon,.service-strip-item .icon-box) svg{width:16px;height:16px}
.mobile-app :is(.fact-grid b,.service-strip-item strong){font-size:.82rem;line-height:1.35;white-space:normal;overflow-wrap:break-word;text-wrap:balance}
.mobile-app :is(.fact-grid small,.service-strip-item small){font-size:.72rem;line-height:1.45;white-space:normal;overflow-wrap:break-word}
[data-theme="dark"] .mobile-app :is(.fact-strip,.service-strip){background:var(--surface)}

/* Four-step summaries fit in a compact two-by-two layout. */
.mobile-app .steps-grid:has(> .step-card:nth-child(4):last-child){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
.mobile-app .steps-grid:has(> .step-card:nth-child(4):last-child)>.step-card{min-width:0;padding:48px 12px 14px!important;border-radius:14px!important;gap:8px}
.mobile-app .steps-grid:has(> .step-card:nth-child(4):last-child)>.step-card::before{top:12px;left:12px;width:26px;height:26px}
.mobile-app .steps-grid:has(> .step-card:nth-child(4):last-child) h3{font-size:.95rem;line-height:1.3;letter-spacing:-.02em;text-wrap:balance}
.mobile-app .steps-grid:has(> .step-card:nth-child(4):last-child) p{font-size:.8rem;line-height:1.5}

/* Business cards: two columns, with every option visible. */
.mobile-app .card-grid-three{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;overflow:visible!important;margin-inline:0!important;padding:0!important}
.mobile-app .card-grid-three>.content-card{min-width:0;padding:12px!important;gap:9px;border-radius:14px!important}
.mobile-app .card-grid-three .card-icon{width:30px;height:30px;border-radius:9px}
.mobile-app .card-grid-three .card-icon svg{width:18px;height:18px}
.mobile-app .card-grid-three h3{font-size:.95rem;line-height:1.3;text-wrap:balance}
.mobile-app .card-grid-three p{font-size:.8rem;line-height:1.5}
.mobile-app .card-grid-three .inline-link{font-size:.8rem;gap:6px;min-height:44px;padding-top:4px;flex-wrap:wrap}

/* Account action aligned with the footer logo. */
.mobile-footer .footer-brand-row{margin-bottom:16px}
.mobile-footer .footer-login{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;min-height:44px;margin-top:0;margin-left:auto;flex-shrink:0;padding:10px 16px;border:1px solid #f5a400;border-radius:12px;background:#17243a;color:#f5a400;font-size:.85rem;font-weight:750;text-decoration:none}
.mobile-footer .footer-login:hover{background:#223147;border-color:#f5a400}
.mobile-footer .footer-login:focus-visible{outline:2px solid #f5a400;outline-offset:4px}

/* Pricing card owns its text colors instead of inheriting the dark section. */
.mobile-app .price-card{color:var(--ink);padding:20px!important}
.mobile-app .price-card>.eyebrow{color:var(--orange-dark);margin-bottom:12px}
.mobile-app .price-card .price-zero{font-size:2.8rem!important;letter-spacing:-.04em;line-height:1.1!important}
.mobile-app .price-card>small{display:block;color:var(--muted);font-size:.85rem;margin-top:6px}
.mobile-app .price-card .price-points{gap:12px;margin:20px 0 0;padding-top:16px;border-top:1px solid var(--line)}
.mobile-app .price-card .price-points>div{display:flex;align-items:flex-start;gap:10px;color:var(--ink-2);font-size:.85rem;line-height:1.5}
.mobile-app .price-card .price-points .icon{width:18px;height:18px;flex:0 0 18px;margin-top:1px;color:var(--orange-dark)}
/* Dark sections keep a dark background in both themes. */
.mobile-app :is(.section-dark,.section-cta){background:#0a192b!important}
.mobile-app .price-card>small{color:var(--muted)!important}

/* Subtle section separation in dark mode, with darker cards above it. */
[data-theme="dark"] .mobile-app .section-soft{background:#111e30!important}
[data-theme="dark"] .mobile-app :is(.section-dark,.section-cta){background:#152438!important;border-block:1px solid #24344b}
