/* Phone layer for every page. Loaded with media="(max-width:720px)", so nothing in here can reach tablet or desktop.
   sitewrite.with_mobile() links it and adds the menu; the homepage, topic pages and notes mark mobile-only bits with
   [hidden][data-m], which this file shows again. */

/* mobile-only elements: hidden everywhere else by the attribute */
[data-m][hidden]{display:block!important}

/* reveal: no fade-in on phones, a fast flick must never land on an empty screen */
.rv{opacity:1!important;transform:none!important;transition:none!important}

/* nav: brand, scan button, menu. The language switch moves into the menu */
.nav .lng,.nav .lang,.nav .quiet,.nav-right>.lang{display:none!important}
.nav-in{height:60px!important;gap:10px}
.brand{white-space:nowrap}
.nav .nav-links,.nav .nav-right{gap:8px!important}
.nav .btn,.nav .xbtn{min-height:44px!important;padding:0 16px!important;white-space:nowrap}
.mm-btn[hidden]{display:inline-grid!important}
.mm-btn{place-items:center;width:44px;height:44px;margin-right:-8px;padding:0;border:0;border-radius:12px;background:transparent;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mm-btn svg{display:block}
.mm-btn .x{display:none}.mm-btn[aria-expanded="true"] .o{display:none}.mm-btn[aria-expanded="true"] .x{display:block}
.mm{position:fixed;left:0;right:0;top:60px;bottom:0;z-index:49;overflow-y:auto;overscroll-behavior:contain;padding:8px 20px 32px;background:#F6F4EE;color:#141619;font-family:'Soehne',system-ui,-apple-system,sans-serif;border-top:1px solid rgba(20,22,25,.08)}
.mm:not([hidden]){display:block}
.mm a,.mm .mm-row{display:flex;align-items:center;justify-content:space-between;min-height:56px;border-bottom:1px solid rgba(20,22,25,.08);font-size:19px;font-weight:500;letter-spacing:-.01em;color:#141619;text-decoration:none}
.mm a:after{content:"\2192";font-size:17px;color:#65696E}
.mm small{display:block;margin:22px 0 2px;font-family:'Soehne Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#65696E}
.mm .mm-row{font-size:17px;color:#54585D}
.mm .mm-row span{display:flex;gap:4px}
.mm .mm-row span a{min-height:44px;min-width:44px;justify-content:center;border:0;font-size:17px;color:#65696E}
.mm .mm-row span a:after{display:none}
.mm .mm-row span a.on{color:#141619}
.mm .mm-cta{justify-content:center;margin-top:24px;min-height:52px;border:0;border-radius:999px;background:#141619;color:#F6F4EE;font-size:16px}
.mm .mm-cta:after{display:none}
html.mm-open,html.mm-open body{overflow:hidden}
html.mm-open .nav{background:#F6F4EE!important;color:#141619!important;border-bottom-color:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html.mm-open .nav .brand img{filter:none!important}
html.mm-open .mm-btn,html.mm-open .nav .brand{color:#141619!important}

/* tap targets and type floor */
.nav .brand{min-height:44px;display:flex;align-items:center}
.nav-right .btn,.nav-in>.btn{padding:0 14px!important;font-size:14px!important}
.nav .brand span,.nav .brand{font-size:15.5px}
.foot .links{gap:0 18px!important}
.foot .links a{display:inline-flex;align-items:center;min-height:44px}
.foot .links a.li{min-width:44px;justify-content:center;margin-left:-12px}
.footer .links,.foot .links{flex-wrap:wrap}
.faq details{padding:6px 0!important}
.faq summary{min-height:48px;align-items:center;padding:8px 0;font-size:17px!important}
.faq p{margin:4px 0 16px!important}
.how summary{min-height:48px}

/* consent banner: compact sheet on the first layer, the settings layer keeps its full size */
#wwc .wwc-card:has(.wwc-l2[hidden]){padding:16px 16px 14px!important}
#wwc .wwc-card:has(.wwc-l2[hidden]) h2{font-size:16px!important;margin:0 0 6px!important}
#wwc .wwc-card:has(.wwc-l2[hidden]) #wwc-b p{font-size:14px!important;line-height:1.45!important;margin:0!important}
#wwc .wwc-card:has(.wwc-l2[hidden]) .wwc-links{display:inline;margin:0!important;font-size:14px}
#wwc .wwc-card:has(.wwc-l2[hidden]) .wwc-left{display:block}
#wwc .wwc-card:has(.wwc-l2[hidden]) .wwc-btns{margin:12px 0 0!important;padding:0!important;box-shadow:none!important;position:static!important;gap:8px!important}
#wwc .wwc-card:has(.wwc-l2[hidden]) .wwc-btns button{min-height:44px!important}
#wwc .wwc-card:has(.wwc-l2[hidden]) .wwc-btns [data-a="custom"]{min-height:36px!important}

/* ---------- homepage ---------- */
#top>section{padding:48px 0;scroll-margin-top:60px}
#top .hero .wrap,#top .hero-grid>div{width:calc(100% - 40px)!important}
#top .wrap,.nav .wrap{width:calc(100% - 40px)}
#top h2{font-size:31px;line-height:1.08}

/* hero: headline, promise and CTA in the first screen; the scan card keeps score and impact */
#top .hero{margin-top:-61px!important;padding-top:84px!important}
#top .hero h1{font-size:40px!important}
#top .hero .lead{font-size:16.5px!important;line-height:1.5;margin:18px 0 22px!important}
#top .hero .actions .btn{width:100%}
#top .hero-logos{margin-top:8px!important}
#top .hero-logos.logos-in{gap:10px!important;padding:14px 0!important}
#top .hero-logos .track{gap:48px}
#top .hero-card{margin-top:28px!important}
#top .hero-card .wombat{display:none}
#top .hero .scan-list{display:none!important}
#top .si small{font-size:12px!important}
#top .si b{font-size:19px!important}
#top .scan-tag{position:relative}
#top .scan-tag:before{content:"";position:absolute;inset:-11px -6px}
#top .scan-cta small{font-size:12.5px!important}

/* problems: one swipe row instead of four stacked cards */
#top .pains-head{margin-bottom:22px!important}
#top .pains-head p{display:none}
#top .scenes{display:flex!important;gap:12px!important;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -20px;padding:0 20px 4px;scroll-padding:0 20px}
#top .scenes::-webkit-scrollbar{display:none}
#top .scene{flex:0 0 84%;scroll-snap-align:start}
#top .scene .stage{height:200px!important}
#top .scene .stage .ui{transform:scale(.86);transform-origin:center}
#top .scene .txt{padding:16px 18px 20px!important}
#top .scene h3{font-size:21px!important;margin-bottom:6px}
#top .scene .txt p{font-size:15.5px!important;line-height:1.45}
#top .scene .txt .more{display:inline-flex;align-items:center;min-height:44px;margin-top:4px;border-bottom:0;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(46,95,138,.35)}
#top .sticky-note{font-size:12.5px}
#top .m-swipe{margin:12px 0 0;font-size:13px;color:#8C949C}
#top .m-swipe:after{content:" \2192"}
#top .scan-strip{margin-top:18px!important;padding:18px!important;font-size:16.5px!important;gap:14px!important}
#top .scan-strip .btn{padding:0 14px!important;font-size:15px!important;gap:8px!important}

/* proof */
#top .rec{margin-top:24px!important;padding:22px 20px 18px!important}
#top .rec-q{font-size:21px!important;padding-top:30px!important}
#top .rec-q:before{font-size:64px!important;top:-14px!important}
#top .rec-who{margin-top:20px!important;padding-top:16px!important;gap:12px!important}
#top .rec-av{width:44px!important;height:44px!important;font-size:15px!important}
#top .rec-who small{font-size:13px!important}
#top .rec-who a{margin-left:56px!important;display:inline-flex;align-items:center;min-height:44px;border-bottom:0!important;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(46,95,138,.35)}
#top .m-stack{margin:22px 0 0;font-size:15px;line-height:1.45;color:#54585D}
#top .m-notes{display:flex!important;align-items:center;justify-content:space-between;min-height:52px;margin-top:8px;font-size:17px;font-weight:500;color:#8EC5F0}
#top .m-notes:after{content:"\2192"}

/* cut on phones: stack grid, ownership, fit, notes (all still on tablet and desktop) */
#top #stack,#top #ownership,#top #fit,#top #notes{display:none!important}

/* calculator */
#top .calc-head{margin-bottom:22px!important}
#top .calc .calc-box{padding:16px 16px 20px!important}
#top .cb-body{margin-top:18px!important;gap:18px!important}
#top .dots{max-width:250px!important;gap:5px!important}
#top .dkey{font-size:12.5px}
#top .seen-n{margin-top:6px!important}
#top .seen-n b{font-size:52px!important}
#top .seen-why{min-height:0!important;margin:8px 0 14px!important}
#top .calc-cta{width:100%}
#top .calc-box .how{margin-top:18px!important}
#top .tab{min-height:44px;display:flex!important;align-items:center;justify-content:center}

/* outcomes */
#top .ba{margin-top:22px!important}
#top .ba-list li{padding:12px 16px!important;gap:4px!important}
#top .ba-list .was{font-size:14px!important}
#top .ba-list .now{font-size:16.5px!important}
#top .cmp-cta{margin-top:20px!important;gap:10px!important}
#top .cmp-cta .btn{width:100%}
#top .cmp-cta span:last-child{font-size:14px}

/* method: a compact timeline, step name and outcome only */
#top .method p[style]{font-size:16px!important;margin-top:14px!important}
#top .stairs-wrap{margin-top:26px!important}
#top .stairs{gap:0!important}
#top .stair-in{display:grid!important;grid-template-columns:auto 1fr;column-gap:12px;align-items:baseline;padding:14px 0 14px 18px!important;border:0!important;border-left:2px solid rgba(142,197,240,.35)!important;border-radius:0!important;background:none!important;box-shadow:none!important}
#top .stair:first-child .stair-in{border-left-color:#8EC5F0!important}
#top .stair .ico,#top .stair .sub,#top .stair .mk{display:none!important}
#top .stair .k{grid-column:1;font-size:12px}
#top .stair h3{grid-column:2;font-size:19px!important;margin:0!important}
#top .stair .out{grid-column:2;margin:2px 0 0!important;font-size:15.5px!important;font-weight:400!important;color:#C3C9CF!important}
#top .stair-go{grid-column:2;margin-top:4px!important;min-height:44px;display:inline-flex!important;align-items:center}
#top .result-line{margin-top:22px!important;padding:16px 18px!important;font-size:16.5px!important}

/* founder: portrait beside the name, text, numbers; the law tiles stay, the map goes */
#top .founder-grid{gap:20px!important}
#top .founder .photo{width:120px!important;max-width:120px!important;border-radius:50%!important;aspect-ratio:1}
#top .founder .photo img{height:100%;object-fit:cover;object-position:50% 20%}
#top .founder .photo figcaption{display:none}
#top .founder p{font-size:16px!important}
#top .stats{margin:22px 0 0!important}
#top .stats div{padding:14px 12px!important}
#top .stats span{font-size:13px!important;line-height:1.3;display:block}
#top .regs{margin-top:28px!important;padding:18px 16px!important}
#top .regs-head span{display:none}
#top .regs-head h3{font-size:18px!important}
#top .regs .wm{display:none}
#top .regs-body{margin-top:14px!important}
#top .reg-grid b{font-size:13.5px}
#top .reg-grid span{font-size:12px!important}

/* faq + final */
#top .faq-grid{gap:16px!important}
#top .final-grid{gap:0!important}
#top .steps3{display:none!important}
#top .final p{font-size:16px!important}
#top .domain{margin-top:22px!important}
#top .domain input{font-size:16px!important}
#top .final .alt{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px}
#top .final .alt a{display:inline-flex;align-items:center;min-height:44px}

/* ---------- topic pages and notes ---------- */
.m-cta{margin:24px 0 8px;padding:16px 18px;border-radius:14px;background:#141619;color:#F6F4EE!important;text-decoration:none!important;font-size:17px;font-weight:500;line-height:1.3}
.m-cta{position:relative;padding-right:48px!important}
.m-cta:after{content:"\2192";position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:20px}
.m-cta small{display:block;margin-top:4px;font-size:13.5px;font-weight:400;color:rgba(246,244,238,.7)}
.ndomain input,.domain input{font-size:16px!important}
@media (max-width:380px){.nav-right .btn,.nav-in>.btn{padding:0 11px!important;font-size:13.5px!important}.nav .nav-right{gap:0!important}}
.plink{display:inline-flex!important;align-items:center;min-height:44px}