/* Phone layout of the public site. Loaded last; everything here applies only up to 760px.
   Long stacks become swipe rails (mobile.js adds .m-rail and the dots), type and air are tuned for one hand. */
.nav-login,.m-dots,.m-cta{display:none}
@media (max-width:760px){
 html{-webkit-text-size-adjust:100%}
 html.m-lock{overflow:hidden}
 /* While the menu is open the header loses its blur: a backdrop filter would trap the fixed menu inside the 64px header */
 html.m-lock .header{-webkit-backdrop-filter:none;backdrop-filter:none;background:#fff;transform:none}
 body{-webkit-tap-highlight-color:transparent}

 /* Header and menu */
 .header{height:64px;padding:0 16px 0 20px;transition:transform .28s ease}
 .header.m-hide{transform:translateY(-100%)}
 .header-actions .button{min-height:40px;padding:0 14px}
 .header .menu{width:44px;height:44px;place-items:center}
 .header nav{position:fixed;top:64px;bottom:0;left:0;right:0;height:auto;padding:12px 20px calc(24px + env(safe-area-inset-bottom));gap:0;overflow-y:auto;overscroll-behavior:contain;border:0;border-top:1px solid var(--line);background:#fff;z-index:30}
 .header nav.open{display:flex;animation:m-sheet .22s ease}
 .header nav a{padding:14px 0;font:500 22px/1.2 var(--display);letter-spacing:-.4px;color:var(--ink);border-bottom:1px solid var(--line)}
 .header nav a.active{color:var(--blue)}
 .header nav .nav-login{display:block;margin-top:auto;min-height:52px;border:1px solid var(--line);border-radius:10px;background:#fff;font:600 16px var(--body);color:var(--ink)}
 .header nav{scrollbar-width:none}
 /* Animations rest while their section is off screen */
 .m-off,.m-off *{animation-play-state:paused!important}
.header nav::-webkit-scrollbar{display:none}
 @keyframes m-sheet{from{opacity:0;transform:translateY(-8px)}}

 /* Type and spacing */
 .section{padding:44px 0}
 .section:not(.dark):not(.soft):not(.free-section)+.section:not(.dark):not(.soft):not(.free-section){padding-top:8px}
 .container{padding:0 20px}
 h2{font-size:clamp(28px,8.2vw,40px);letter-spacing:-1px}
 .split-title{gap:12px;margin-bottom:22px}
 .split-title p,.lead{font-size:16px;line-height:1.55}
 .eyebrow{font-size:11px;letter-spacing:1.6px}

 /* Start free lives in one bar pinned to the bottom of the screen; the page scrolls under it */
 .m-cta{display:flex;align-items:center;gap:12px;position:fixed;left:0;right:0;bottom:0;z-index:25;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:#ffffffeb;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-top:1px solid var(--line);transition:transform .28s ease}
 .m-cta small{flex:1;font-size:13px;line-height:1.3;color:var(--muted)}
 .m-cta .button{min-height:50px;padding:0 22px;border-radius:12px;font-size:16px;flex-shrink:0}
 .m-cta.m-away{transform:translateY(110%)}
 body.in-app .m-cta{display:none}
 body:not(.in-app){padding-bottom:calc(72px + env(safe-area-inset-bottom))}
 .header-actions>.button{display:none}
 .hero .actions,.hero .fine{display:none}

 /* Hero: headline, promise and the button fit the first screen; the phone sits a little smaller under it */
 .hero{padding:28px 0 8px}
 .hero h1{font-size:clamp(38px,11.8vw,60px);line-height:1.02;letter-spacing:-2px}
 .hero .lead{font-size:16px;margin-top:16px}
 .hero .actions{margin-top:22px}
 .hero .actions .button{min-height:52px;width:100%;justify-content:center}
 .hero .fine{text-align:center;margin-top:10px}
 .hero-grid{gap:0}
 .deck-stage{zoom:.86;margin-top:0} /* first paint; mobile.js fits these mock-ups to the screen width */

 /* Swipe rails */
 .m-rail{display:flex!important;grid-template-columns:none!important;gap:12px!important;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:20px;margin-left:-20px!important;margin-right:-20px!important;padding:14px 20px 4px!important;max-width:none!important;align-items:stretch!important;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 .m-rail::-webkit-scrollbar{display:none}
 .m-rail>*{flex:0 0 min(84%,360px);min-width:0;scroll-snap-align:start;margin:0!important}
 .m-dots{display:flex;justify-content:center;gap:6px;margin:14px 0 4px}
 .m-dots i{width:6px;height:6px;border-radius:3px;background:#cfd4dc;transition:width .25s ease,background .25s ease}
 .m-dots i.on{width:20px;background:var(--ink)}

 /* Pain points */
 .pain-section{padding-bottom:36px}
 .pain-section h2{margin-bottom:4px}
 .pain-grid.m-rail{margin-top:10px!important;margin-bottom:0!important}
 .pain-grid.m-rail article{border:1px solid var(--line);border-radius:16px;padding:22px 20px;background:#fafbfc}
 .pain-grid.m-rail .pain-label{margin:16px 0 8px}
 .pain-grid.m-rail h3{font-size:21px}
 .pain-grid.m-rail article>p:last-child{font-size:15px;margin:10px 0 0}
 .pain-section .text-button{display:inline-flex;margin-top:18px;min-height:44px;align-items:center}

 .market-proof{padding:28px 0}
 .proof-inner{gap:8px}
 .proof-inner>strong{font-size:60px;letter-spacing:-4px;line-height:1}
 .proof-inner h3{font-size:21px}

 /* Rewards gallery */
 .program-tabs,.moment-tabs,#ai-agent .tabs,.growth-panel .tabs{max-width:calc(100% + 40px);margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px;border-radius:0;background:none;gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-mask:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
 .program-tabs::-webkit-scrollbar,.moment-tabs::-webkit-scrollbar,#ai-agent .tabs::-webkit-scrollbar,.growth-panel .tabs::-webkit-scrollbar{display:none}
 .program-tabs button,.moment-tabs button,#ai-agent .tabs button,.growth-panel .tabs button{flex:0 0 auto;min-height:40px;border:1px solid var(--line);border-radius:999px;background:#fff;padding:0 16px}
 .program-tabs button[aria-pressed=true],.moment-tabs button[aria-pressed=true],#ai-agent .tabs button[aria-pressed=true],.growth-panel .tabs button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
 .program-tabs button[aria-pressed=true] .tab-label,.moment-tabs button[aria-pressed=true] .tab-label,.program-tabs button[aria-pressed=true] *,.moment-tabs button[aria-pressed=true] *,#ai-agent .tabs button[aria-pressed=true] *,.growth-panel .tabs button[aria-pressed=true] *{color:#fff}
 .program-tabs.m-end,.moment-tabs.m-end,#ai-agent .tabs.m-end,.growth-panel .tabs.m-end,.d-tabs.m-end,.docs-sidebar.m-end{-webkit-mask:none;mask:none}
 .collection-caption{margin:14px 0 0;font-size:14px}
 .wallet-gallery.m-rail>*{flex-basis:min(80%,320px)}
 .wallet-gallery.m-rail .wallet-display{padding:16px 14px 0!important;border-radius:16px}
 .wallet-gallery.m-rail figcaption{padding:14px 2px 16px}
 /* Cards keep the designed proportions: drawn at the desktop size (337px) and scaled whole by mobile.js, never stretched */
 .wallet-gallery .gallery-card{width:337px}
 .wallet-gallery .gallery-card>.pass:not(.poster){height:475px}
 /* Rewards: every tab has the same rows (chips, one caption line, cards, dots); Mosaic puts its button in the caption row */
 #showcase-view{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:center}
 #showcase-view>*{grid-column:1/-1}
 #showcase-view>.program-tabs{grid-row:1}
 #showcase-view>.collection-caption{grid-row:2}
 #showcase-view>.wallet-gallery{grid-row:3}
 #showcase-view>.m-dots{grid-row:4}
 #showcase-view:has(.mosaic-controls)>.collection-caption{display:none}
 .mosaic-controls{display:contents}
 .mosaic-controls p{grid-column:1;grid-row:2;margin:14px 0 0;font-size:14px;line-height:1.4}
 .mosaic-controls .button{grid-column:2;grid-row:2;margin-top:14px;min-height:44px;padding:0 14px;font-size:0;white-space:nowrap;gap:6px}
 .mosaic-controls .button::before{content:attr(data-short);font-size:13.5px} /* short label on phones: Next piece / Replay */

 /* AI agent */
 .ai-details.m-rail{border-top:0;margin-top:26px!important}
 .ai-details.m-rail article{border:1px solid var(--line);border-radius:16px;padding:20px;background:#fafbfc}
 .ai-details.m-rail h3{font-size:19px;margin:10px 0 8px}

 /* Owner app teaser: the phone is already in their hand, so it shows a little smaller */
 .store-badges{gap:10px}

 /* Pricing */
 .billing-switch{width:100%}
 .price-grid.m-rail{padding-top:22px!important}
 .price-grid.m-rail>.price{flex-basis:min(82%,360px);scroll-snap-align:center;display:flex;flex-direction:column;padding:22px 20px}
 .price-grid.m-rail .price ul{flex:1;margin-bottom:22px}
 .price-grid.m-rail .price .button{min-height:50px}

 #dialog .metric-row strong{white-space:nowrap;font-size:26px}
 #dialog .metric-row span{display:block;line-height:1.3;margin-top:4px}
 .dialog-close:focus:not(:focus-visible),#dialog [data-action=close]:focus:not(:focus-visible){outline:none;box-shadow:none}

 /* Docs: the section list scrolls sideways like the other chips */
 .docs-sidebar{scrollbar-width:none;margin-right:-20px;padding-right:28px;-webkit-mask:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
 .docs-sidebar::-webkit-scrollbar{display:none}
 .docs-sidebar>.eyebrow{display:none}
 .docs-sidebar a{min-height:40px;display:inline-flex;align-items:center}

 /* How it works: the whole scene a little smaller; colour swatches get a finger-sized touch area */
 .wf .wf-scene-wrap{zoom:.86}
 .wf [data-phase=create] .wf-phone{opacity:1;transform:none} /* the card is built straight into a Wallet phone, like the later steps */
 .wf [data-phase=create] .wf-camera{opacity:0}
 .wf [data-phase=create] .wf-wallet-title{opacity:1}
 .wf .wf-swatches{gap:16px}
 .wf .wf-swatches button{position:relative}
 .wf .wf-swatches button::after{content:"";position:absolute;inset:-12px}

 /* Notifications: shorter copy block and map */
 .moment-copy h3{font-size:24px;letter-spacing:-.6px}
 .moment-copy p{font-size:15px}
 .moment-rule{display:none}
 .moment-canvas{min-height:330px}

 /* Card links: the four links are a swipe rail, the phone a little smaller */
 .card-links-layout{grid-template-columns:minmax(0,1fr)}
 .card-links-layout>*,.split-title>*,.ai-layout>*,.mobile-story>*{min-width:0}
 .link-features.m-rail{margin-top:18px!important}
 .link-features.m-rail li{flex-direction:column;gap:10px;border:1px solid var(--line);border-radius:16px;padding:18px;background:#fff}
 .link-features.m-rail>li{flex-basis:min(72%,300px)}
 .links-iphone{zoom:.78}

 /* AI agent: compact evidence card */
 .evidence{padding:18px}
 .agent-reason h3{font-size:19px}
 .scenario-copy h2{font-size:28px;letter-spacing:-.8px}
 .agent-reason p{font-size:14px}

 /* Growth chart */
 .growth-panel{padding:28px 0;gap:20px}

 /* Owner app: store badges side by side, the phone smaller */
 .store-badges{flex-wrap:nowrap;margin:20px 0}
 .store-badge{flex:1 1 0;min-width:0;padding:8px 10px;justify-content:center}
 .store-badge strong{font-size:15px}
 .mobile-section .owner-phone{zoom:.68}

 /* One vertical rhythm on phones: eyebrow 10 · heading 12 · lead 20 · demo, tabs 16 above their content.
    Tabbed blocks are pinned to their tallest tab; spare height goes inside the demo, never between text and picture. */
 #showcase-view,#moment-scene,#scenario-view,#growth-view{align-content:start}
 .tabs,.moment-tabs,.program-tabs{margin-bottom:16px}
 .moment-scene{min-height:0;grid-template-rows:auto 1fr;border-radius:18px}
 .moment-copy{align-self:start;padding:22px 20px 18px}
 .moment-copy .eyebrow{display:block;margin-bottom:10px}
 .moment-copy h3{margin:0 0 10px}
 .moment-canvas{min-height:330px;height:100%}
 .invitation-composer{padding:20px 18px 120px}
 .moment-canvas>.invitation-composer{zoom:.8}
 #scenario-view{display:flex;flex-direction:column}
 .ai-layout{flex:1;display:flex;flex-direction:column;gap:18px}
 .scenario-copy{padding:0}
 .scenario-copy .eyebrow{margin-bottom:10px}
 .scenario-copy .lead{margin-top:12px}
 .evidence{flex:1;display:flex;flex-direction:column}
 .evidence>.line-chart{min-height:150px;display:flex;flex-direction:column;justify-content:center}
 .evidence>.insight-bars{min-height:150px;align-content:center}
 .evidence>.button{margin-top:auto}
 /* spare height of a shorter tab spreads between the evidence lines instead of one hole */
 .evidence>.agent-reason{margin:6px 0 18px}
 .agent-reason small{display:block;margin:20px 0 8px}
 .agent-reason small:first-child{margin-top:0}
 .agent-reason h3{margin:0 0 6px}
 .agent-reason p{margin:0}
 .evidence>.line-chart,.evidence>.insight-bars{flex:1 0 auto}
 .insight-bars{margin:8px 0}
 /* bar charts: one shared label column, so every bar starts at the same x and the tracks compare */
 .insight-bars{display:grid;grid-template-columns:max-content minmax(0,1fr) auto;column-gap:12px;row-gap:24px;align-items:center}
 .insight-bars>div{display:contents}
 .insight-bars span{white-space:nowrap}
 .analytics-chart{min-height:130px;align-content:center}
 /* Growth: a shorter tab keeps its spare height inside the chart zone, not as a hole under the block */
 #growth-view{display:flex;flex-direction:column}
 .growth-panel{flex:1;display:flex;flex-direction:column}
 .growth-panel>.analytics-view{flex:1;display:flex;flex-direction:column}
 .growth-panel .analytics-chart{flex:1 0 auto}
 /* charts drawn on a ~600-unit canvas: labels sized so they read at 10px or more on a phone */
 :is(.evidence,.growth-panel) .line-chart text{font-size:14px}
 .ai-details.m-rail{margin-top:20px!important}
 /* the store badges come after the owner phone */
 .mobile-story>div:first-child{display:contents}
 .mobile-story>.owner-phone{order:1}
 .mobile-story .store-badges{order:2}
 .mobile-section .store-badges{margin:20px 0 0}
 .mobile-story{gap:0}
 .mobile-story .eyebrow{margin-bottom:10px}
 .mobile-story h2{margin-bottom:0}
 .mobile-story .lead{margin:12px 0 0}
 .mobile-story .mobile-benefits{margin:20px 0 0}
 .mobile-story>.owner-phone{margin-top:28px}
 .owner-phone .line-chart text{font-size:22px} /* the mini chart in the owner phone reads about 9px */

 /* Notifications: the art and the notification stack (no card over the picture's text); only the map stays a backdrop */
 .moment-canvas:not(.nearby){display:flex;flex-direction:column;justify-content:space-between}
 .moment-canvas:not(.nearby)>.moment-notice{position:relative;inset:auto;transform:none;width:auto;margin:0 16px 16px}
 .moment-canvas:not(.nearby)>:not(.moment-notice){position:relative;flex:none;margin-block:auto}
 .moment-canvas .moment-notice{margin-bottom:16px}
 .moment-canvas.nearby>.moment-notice{bottom:16px;margin-bottom:0}
 .invitation-composer{padding-bottom:16px}
 .eyebrow{text-wrap:balance}
 .billing-switch em{white-space:nowrap}

 /* FAQ and footer */
 .faq details summary,.faq summary{min-height:52px}
 footer nav a{display:inline-flex;align-items:center;min-height:44px}
 .footer-top nav{flex:1 1 100%;gap:0 22px}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){
 .header{transition:none}.header nav.open{animation:none}.m-dots i{transition:none}
}
@media (max-width:360px){
 .scenario-copy h2{font-size:24px}
 .store-badge{padding:8px;gap:6px}
 .store-badge small{font-size:9.5px;white-space:nowrap}
 .store-badge strong{font-size:14px;white-space:nowrap}
 .billing-switch em{font-size:10px;padding:3px 6px}
 .billing-switch button{font-size:13px}
 .m-rail>*{flex-basis:88%}
 .wallet-gallery.m-rail>*{flex-basis:84%}
}

/* ---------- Owner workspace on a phone ---------- */
.d-tabbar{display:none}
@media (max-width:700px){
 /* The workspace scrolls inside its own pane, like an app: the browser bars never collapse, so the top bar and
    the tab bar stay perfectly still while scrolling (mobile.js points window.scrollTo / scrollY at this pane) */
 html:has(body.in-app .d-main),body.in-app:has(.d-main){height:100%;overflow:hidden} /* only pages with the pane; setup scrolls the page */
 body.in-app .dash{height:100dvh;min-height:0}
 body.in-app .d-main{height:100dvh;overflow-y:auto;display:block;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
 body.in-app .d-main::-webkit-scrollbar{display:none}
 .dash.nav-open .d-main,.dash.show-preview .d-main,.dash:has(.d-drawer.open) .d-main{overflow:hidden}

 /* Tab bar: Home, Customers, Scan, Bookings, More (the full menu) */
 .d-tabbar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:42;padding:4px 6px calc(4px + env(safe-area-inset-bottom));background:#ffffffeb;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-top:1px solid var(--d-line)}
 .d-tabbar>a,.d-tabbar>button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:52px;padding:0 2px;border:0;background:none;color:var(--d-muted);font:500 11px/1.1 var(--body);cursor:pointer}
 .d-tabbar span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .d-tabbar svg.lucide{width:22px!important;height:22px!important;stroke-width:1.9}
 .d-tabbar .on{color:var(--d-ink)}
 .d-tabbar .on svg.lucide{color:var(--d-blue)}
 .d-tabbar .d-tabbar-scan{color:var(--d-ink)}
 .d-tabbar .d-tabbar-scan svg.lucide{box-sizing:content-box;width:24px!important;height:24px!important;padding:11px;margin-top:-20px;border-radius:18px;background:var(--d-blue);color:#fff;box-shadow:0 8px 20px #234ee955}
 .d-tabbar .d-count{position:absolute;top:3px;left:calc(50% + 6px);margin:0;min-width:18px;height:18px;font-size:10.5px;background:var(--d-blue);color:#fff}
 .d-tabbar-dot{position:absolute;top:8px;left:calc(50% + 8px);width:8px;height:8px;border-radius:50%;background:var(--d-blue);box-shadow:0 0 0 2px #fff}
 .dash.d-typing .d-tabbar{display:none}
 /* The tab bar has Scan and More, so the top bar keeps only the title, search and Demo */
 .d-top .d-burger,.d-top .d-scan-btn{display:none!important}
 .d-top{height:64px;flex-shrink:0;padding:0 12px 0 20px;position:sticky;top:0;z-index:30} /* same height as the public header */
 .d-top .d-search{display:none!important} /* no search in the phone top bar */
 .d-top .d-demo-toggle{margin-left:auto}
 .d-top .d-crumb{display:none} /* the page heading names the section; the bar shows the logo like the public header */
 .d-top .d-top-brand{display:flex!important;flex-direction:row;align-items:center}
 .d-top .d-top-brand .d-brand-name{font-size:28px;line-height:1}
 .d-content{padding-bottom:calc(120px + env(safe-area-inset-bottom))}
 .d-fab{bottom:calc(76px + env(safe-area-inset-bottom))}
 .d-savebar{bottom:calc(76px + env(safe-area-inset-bottom))}
 .d-savebar.pinned{bottom:calc(72px + env(safe-area-inset-bottom))}
 .dash.d-typing .d-fab{display:none}
 .dash.d-typing .d-savebar{bottom:12px}

 /* Side menu opened from More: full height sheet from the left with roomy rows */
 .d-side{width:min(320px,86vw)}
 .d-side nav a{min-height:46px}

 /* Tabs inside a page scroll sideways with a soft edge, never a bar */
 .d-tabs{-webkit-mask:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask:linear-gradient(90deg,#000 calc(100% - 32px),transparent);margin-right:-16px;padding-right:24px}
 .d-tabs::-webkit-scrollbar{display:none}
 .d-tabs a{min-height:44px;display:inline-flex;align-items:center}

 /* Tables become stacked cards */
 .d-stack thead{display:none}
 .d-stack,.d-stack tbody{display:block}
 .d-stack tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;padding:14px 16px;border-bottom:1px solid var(--d-line2)}
 .d-stack tbody tr:last-child{border-bottom:0}
 .d-stack td{display:block;padding:0!important;border:0!important;min-width:0}
 .d-stack td[data-label]::before{content:attr(data-label);display:block;margin-bottom:3px;font-size:11.5px;color:var(--d-muted);font-weight:500}
 .d-stack td:first-child{grid-column:1/-1}
 .d-stack td:first-child::before,.d-stack td.d-row-actions::before,.d-stack td[colspan]::before{display:none}
 .d-stack td[colspan]{grid-column:1/-1}
 .d-stack td.d-row-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start}
 .d-stack td.d-row-actions:empty{display:none}
 .d-stack td.d-row-actions .d-btn{min-height:40px;flex:1 1 auto;justify-content:center}

 /* Customers: name and group on top; under them the wallet logo below the avatar, card progress, visits and last visit in fixed columns */
 .d-cust-table tr{position:relative;grid-template-columns:36px minmax(0,1fr) 62px 80px;grid-template-areas:"p p p g" "w c v l";gap:8px 10px;padding:12px 16px}
 .d-cust-table td::before{display:none!important}
 .d-cust-table td:nth-child(1){grid-area:p}
 .d-cust-table td:nth-child(2){grid-area:w;display:flex;align-items:center;justify-content:center}
 .d-cust-table td:nth-child(2) .d-pill{position:absolute;top:40px;right:16px;margin:0;font-size:11px}
 .d-cust-table .d-wallet{font-size:0;gap:0}
 .d-cust-table tr:has(td:nth-child(2) .d-pill){row-gap:24px}
 .d-cust-table td:nth-child(3){grid-area:c;font-size:13px}
 .d-cust-table td:nth-child(4){grid-area:v;font-size:13px;color:var(--d-muted);text-align:right}
 .d-cust-table td:nth-child(4)::after{content:" visits"}
 .d-cust-table td:nth-child(5){grid-area:l;font-size:13px;color:var(--d-muted);text-align:right}
 .d-cust-table td:last-child:not(:first-child){grid-area:g;justify-self:end;align-self:start}
 .d-cust-table td:nth-child(6):not(:last-child){display:none}
 .d-cust-table td[colspan]{grid-area:auto;grid-column:1/-1}

 /* Analytics tables stay tables: they compare numbers across columns, so the first column sticks while the rest slides */
 .d-content .d-table-wrap:not(:has(.d-stack)){-webkit-mask:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
 .d-content .d-table:not(.d-stack) th:first-child,.d-content .d-table:not(.d-stack) td:first-child{position:sticky;left:0;background:#fff;z-index:1}
 .d-content .d-table:not(.d-stack) th:first-child{background:#fafbfc}

 /* Windows open as bottom sheets */
 #dialog.d-dialog{margin:auto 0 0;width:100%;max-width:100%;max-height:92dvh;border-radius:20px 20px 0 0;padding:26px 18px calc(22px + env(safe-area-inset-bottom))}
 #dialog.d-dialog[open]{animation:m-up .24s ease}
 #dialog.d-dialog.d-dialog-sm{margin:auto;width:auto;max-width:calc(100vw - 32px);border-radius:18px}
 #dialog.d-dialog[open]:has(.d-scan){height:min(88dvh,700px);min-height:0}
 .d-drawer{width:100vw}
 @keyframes m-up{from{transform:translateY(40px);opacity:.4}}

 /* Fields: 16px text so iPhone does not zoom in, and finger-sized controls */
 .dash input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),.dash select,.dash textarea,#dialog input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),#dialog select,#dialog textarea{font-size:16px}
 .dash .d-btn{min-height:40px}
 .dash .d-btn.sm{min-height:36px}
}
@media (max-width:700px) and (prefers-reduced-motion:reduce){#dialog.d-dialog[open]{animation:none}}

/* Workspace sheets (under 1100px the side menu, the customer drawer and the editor preview slide over the page) */
.d-sheet-x{display:none}
@media (max-width:1100px){
 html:has(.dash.nav-open),html:has(.d-drawer.open),html:has(.dash.show-preview){overflow:hidden}
 .d-editor-side,.d-preview{padding-top:30px!important;overscroll-behavior:contain}
 .d-editor-side::before,.d-preview::before{content:"";position:absolute;top:9px;left:50%;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:#d5d9e0}
 .d-editor-side .d-preview-head,.d-preview .d-preview-head,.d-editor-side>.d-sheet-x+.d-card-head,.d-preview>.d-sheet-x+.d-card-head{padding-right:48px}
 .d-sheet-x{display:grid;place-items:center;position:absolute;top:8px;right:10px;z-index:3;width:40px;height:40px;border:0;border-radius:50%;background:#f1f3f6;color:var(--d-ink);cursor:pointer}
 .d-sheet-x svg.lucide{width:18px!important;height:18px!important}
}
@media (min-width:1101px){.d-sheet-x{display:none!important}}
@media (max-width:1100px) and (prefers-reduced-motion:reduce){.d-side,.d-drawer,.d-editor-side,.d-preview{transition:none!important}}
@media (max-width:700px){
 /* Save bar: one full-width bar above the tab bar; the Preview button moves up out of its way */
 .d-savebar:not(:empty),.d-savebar.pinned{position:fixed;left:0;right:0;width:auto;bottom:calc(76px + env(safe-area-inset-bottom));margin:0;padding:0 12px}
 .d-savebar-in{width:100%;gap:8px;padding:8px 8px 8px 14px;font-size:13px}
 .d-savebar-in span{flex:1;min-width:0;margin-right:0;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 .d-savebar-in .d-btn{min-height:40px;flex-shrink:0}
 .dash:has(.d-savebar-in) .d-fab{bottom:calc(144px + env(safe-area-inset-bottom))}

 /* Search opens from the top, so typing never pushes the field under the keyboard */
 #dialog.d-dialog:has(.d-palette){margin:0 0 auto;border-radius:0 0 20px 20px;max-height:85dvh;padding-top:18px;animation-name:m-down}
 #dialog.d-dialog:has(.d-palette) .d-pal-results{min-height:min(420px,55dvh)}
 .d-palette>.d-hint{display:none}
 .d-pal-results{align-content:start}
 @keyframes m-down{from{transform:translateY(-40px);opacity:.4}}

 /* Every field 16px: iPhone zooms into anything smaller */
 body.in-app input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),body.in-app select,body.in-app textarea,body.in-app .d-select.sm{font-size:16px!important}
 body.in-app .d-select.sm{height:40px}
 body.in-app #toast{bottom:calc(136px + env(safe-area-inset-bottom))}

 /* Window footers stay in reach at the bottom of the sheet with full-width buttons */
 #dialog.d-dialog .d-modal-actions{position:sticky;bottom:calc(-22px - env(safe-area-inset-bottom));z-index:2;margin:18px -18px calc(-22px - env(safe-area-inset-bottom));padding:12px 18px calc(12px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--d-line2);flex-wrap:wrap}
 #dialog.d-dialog .d-modal-actions>span:empty{display:none}
 #dialog.d-dialog .d-modal-actions .d-btn{flex:1 1 auto;min-height:46px;justify-content:center}

 /* Customers: groups in one sliding row, filters in one sliding row under the search */
 .d-content>.d-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-16px;padding-right:24px;-webkit-mask:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
 .d-content>.d-chips::-webkit-scrollbar{display:none}
 .d-content>.d-chips>*{flex-shrink:0}
 .d-toolbar-filters{display:flex;gap:8px;width:calc(100% + 16px);margin-right:-16px;padding-right:16px;overflow-x:auto;scrollbar-width:none;-webkit-mask:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
 .d-toolbar-filters::-webkit-scrollbar{display:none}
 .d-toolbar-filters .d-select{flex:0 0 auto;width:auto;min-width:0}
 .d-toolbar .d-search-field{flex-basis:100%}
 .d-cust-table .d-person{min-width:0}
 .d-cust-table .d-person>span{min-width:0}
 .d-cust-table .d-person .d-link{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .d-cust-table td:nth-child(4),.d-cust-table td:nth-child(5){white-space:nowrap}

 /* Programs list slides with a soft edge */
 .d-prog-tabs{scrollbar-width:none;margin-right:-16px;padding-right:24px;-webkit-mask:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
 .d-prog-tabs::-webkit-scrollbar{display:none}

 /* Analytics chart drawn at phone width */
 .d-an-chart{min-width:0}
 .d-an-chart text{font-size:13px}
 .d-an-chart-wrap{-webkit-mask:none;mask:none}

 /* Three small numbers sit in one row */
 .d-kpis.three,.d-kpis.sm.three{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .d-kpis.three>:last-child{grid-column:auto}
 .d-kpis.three .d-kpi{padding:12px 10px}
 .d-kpis.three .d-kpi strong{font-size:20px}

 /* Finger-sized small controls */
 .dash .d-text-btn{min-height:40px;display:inline-flex;align-items:center}
 body.in-app .d-seg button{min-height:38px}
 /* Switches wrap instead of widening the page */
 /* Switches never widen the page: equal columns, four options as a 2 x 2 grid */
 body.in-app .d-seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);width:100%}
 body.in-app .d-seg:has(>:nth-child(4)){grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
 body.in-app .d-seg>*{min-width:0;white-space:normal;text-align:center}
 body.in-app .d-seg.wrap{display:flex;flex-wrap:wrap}
 body.in-app :is(.d-preview-head,.d-card-head,.d-head,.d-sec-head) .d-seg{width:auto;flex-shrink:0}
 body.in-app :is(.d-preview-head,.d-card-head) .d-seg button{padding:6px 14px}
 /* Sign-up fields: the label above, the switch full width */
 .d-form-row{flex-direction:column;align-items:stretch;gap:8px}
 /* A save bar plus the lifted Preview button need more room at the end of the page */
 .dash:has(.d-savebar-in):has(.d-fab) .d-content{padding-bottom:calc(210px + env(safe-area-inset-bottom))}
 .d-editor,.d-designer,.d-editor-main{grid-template-columns:minmax(0,1fr)}
 .d-editor-main>*,.d-designer>*,.d-link-row,.d-link-line{min-width:0}
 .d-link-main small{white-space:normal}
 .dash textarea{min-height:96px}
 .dash .d-icon-btn{min-width:40px;min-height:40px}
 .d-demo-toggle{min-height:44px}
}
/* Touch screens: a window opening focuses its close button, which should not draw a keyboard ring */
@media (hover:none){#dialog .dialog-close:focus-visible,#dialog [data-action=close]:focus-visible,.d-sheet-x:focus-visible{outline:none;box-shadow:none}}
/* Tablet: search shrinks to an icon so the page title has room */
@media (min-width:701px) and (max-width:900px){
 .d-search{width:auto;margin-left:auto;padding:0 10px;border-color:transparent;background:none}
 .d-search span,.d-search kbd{display:none}
}
/* Chart labels: the charts are drawn on a 600-unit canvas, so the label size steps with the phone width to read 10–14px */
@media (max-width:480px){:is(.evidence,.growth-panel) .line-chart text{font-size:26px}.line-chart.tall text{font-size:24px}}
@media (min-width:601px) and (max-width:760px){:is(.evidence,.growth-panel) .line-chart text{font-size:12px}}
/* Footer links: one row or one column */
footer nav.m-measure{flex-wrap:nowrap!important}
footer nav.m-measure>*{flex-shrink:0}
footer nav a{white-space:nowrap}
footer nav.m-stack{flex-direction:column;align-items:flex-start;gap:0!important}
/* Language: globe in the header on wide screens, a full-width row inside the menu above Log in on phones */
@media (max-width:760px){
 .header-actions .lang-pick{display:none}
 .header nav .nav-lang{display:block;align-self:stretch;margin:auto 0 12px}
 .header nav .nav-lang .lang-btn{width:100%;height:48px;padding:0 4px;font-size:16px;font-weight:500}
 .header nav .nav-lang .lang-chev{margin-left:auto}
 .header nav .nav-lang .lang-list{top:auto;bottom:calc(100% + 6px);left:0;right:0;transform-origin:bottom center}
 .header nav .nav-lang .lang-list li{height:48px;font-size:16px;padding:0 12px}
 .header nav .nav-lang+.nav-login{margin-top:0}
}