/* ══ PHONE — the shell at ≤ 760 px (docs/MOBILE-PLAN.md). Loaded with media="(max-width: 760px)": a desktop never
   applies a rule here. Every rule that hides or moves a desktop part is keyed on body.m-on (set by m.js), so if the
   script never ran the desktop bar still works. Higgsfield's patterns on our tokens: black ground, the sun as the
   one action colour, 44 px touch targets, safe-area insets, no hover-only affordances. ══ */
@media (max-width: 760px) {

body.m-on{--bar:calc(52px + env(safe-area-inset-top,0px));--mside:16px}
body.m-on #bar,body.m-on #mega,body.m-on #runsmenu{display:none!important}
body.m-lock{overflow:hidden}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body.m-on{overflow-x:hidden}
body.m-on #page{overflow-x:clip}   /* a safety net: nothing the shell draws scrolls the page sideways */

/* ── the top bar ── */
#mbar{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--bar);padding:env(safe-area-inset-top,0px) 8px 0;display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:4px;background:var(--ground)}
#mbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--hair);opacity:.6}
body.staged #mbar::after{opacity:1}
.mb-menu{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;color:var(--ink)}
.mb-menu svg{width:24px;height:24px}
.mb-menu:active{background:var(--card)}
.mb-mid{min-width:0;display:flex;justify-content:center}
.mb-t{font:700 16px/1.2 var(--ui);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.mb-logo{display:inline-flex;align-items:center;gap:8px;min-height:44px}
.mb-logo img{width:26px;height:26px;border-radius:7px}
.mb-logo .bcw{font-family:'Permanent Marker','Marker Felt',cursive;font-size:20px;line-height:1;padding-top:2px;color:var(--ink);white-space:nowrap}
.mb-r{display:flex;justify-content:flex-end;min-width:52px}
.mb-up{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 12px 0 10px;border-radius:999px;background:var(--sun);color:#000;font:800 13px/1 var(--ui);letter-spacing:-.005em;position:relative}
.mb-up::before{content:"";position:absolute;inset:-6px -2px}   /* a 44 px touch target around a 32 px pill */
.mb-up svg{width:14px;height:14px;fill:#000;stroke:none}
.mb-who{position:relative;width:44px;height:44px;display:grid;place-items:center;padding:0;border-radius:50%}
.mb-who .wface.wf-bar{width:36px;height:36px}

/* ── the drawer ── */
#mdrawer{position:fixed;inset:0;z-index:96}
.md-scrim{position:absolute;inset:0;background:rgba(0,0,0,.6);opacity:0;transition:opacity .22s}
.md-panel{position:absolute;top:0;bottom:0;left:0;width:min(86vw,330px);display:flex;flex-direction:column;background:#0b0b0e;border-right:1px solid var(--hair);transform:translateX(-102%);transition:transform .24s cubic-bezier(.2,.8,.2,1);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px)}
#mdrawer.on .md-scrim{opacity:1}
#mdrawer.on .md-panel{transform:none}
.md-head{display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 6px 0 16px;flex:none}
.md-x{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;color:var(--muted)}
.md-x svg{width:22px;height:22px}
.md-x:focus{outline:none}.md-x:focus-visible,.ms-x:focus-visible,.mb-menu:focus-visible{outline:2px solid var(--sun);outline-offset:-4px}
.md-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:4px 8px 12px;display:flex;flex-direction:column;gap:2px}
.md-i{display:flex;align-items:center;gap:14px;min-height:48px;padding:0 12px;border-radius:12px;font:600 16px/1.2 var(--ui);color:var(--ink);text-align:left;width:100%}
.md-i>svg{width:22px;height:22px;flex:none;color:var(--muted)}
.md-i span{flex:1;min-width:0}
.md-i:active{background:var(--card)}
.md-i.on{background:var(--card)}
.md-i.on>svg{color:var(--sun)}
.md-create{background:rgba(255,215,49,.1);color:var(--sun)}
.md-create>svg{color:var(--sun)}
.md-car{display:grid;place-items:center;width:24px;height:24px;color:var(--muted);transition:transform .18s}
.md-car svg{width:18px;height:18px}
.md-grp[aria-expanded="true"] .md-car{transform:rotate(90deg)}
.md-sub{display:flex;flex-direction:column;margin:0 0 4px 30px;padding-left:12px;border-left:1px solid var(--hair)}
.md-s{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:10px;font:500 15px/1.2 var(--ui);color:var(--muted)}
.md-s.on{color:var(--ink);background:var(--card)}
.md-s:active{background:var(--card)}
.md-pill{font-style:normal;flex:none;height:28px;display:inline-flex;align-items:center;padding:0 12px;border-radius:999px;background:var(--sun);color:#000;font:800 12.5px/1 var(--ui)}
.md-foot{flex:none;padding:10px 10px 12px;border-top:1px solid var(--hair)}
.md-acc{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:8px 10px;border-radius:14px;background:var(--card);text-align:left}
.md-acc>svg{width:18px;height:18px;color:var(--muted);flex:none}
.md-face{position:relative;width:44px;height:44px;display:grid;place-items:center;flex:none;padding:0;border-radius:50%}
.md-face .wface.wf-bar{width:40px;height:40px}
.md-id{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.md-id b{font:700 15px/1.2 var(--ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md-id span{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md-id .md-cr{color:var(--sun);font-weight:600}
.md-in{display:flex;flex-direction:column;gap:6px;padding:6px 6px 2px}
.md-in b{font:700 15px/1.25 var(--ui)}
.md-in>span{font-size:13px;line-height:1.4;color:var(--muted)}
.md-login{display:flex;align-items:center;justify-content:center;height:48px;margin-top:8px;border-radius:999px;background:#fff;color:#000;font:700 15px/1 var(--ui)}
.md-join{display:flex;align-items:center;justify-content:center;gap:5px;min-height:44px;font-size:13.5px;color:var(--muted)}
.md-join u{color:var(--ink);text-underline-offset:3px}

/* ── the floating bottom bar ── */
#mdock{position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:58;display:none}
body.m-dock #mdock{display:block}
body.m-lock #mdock{display:none}
/* solid, not glass (nothing scrolls through it), and its line centred like the rest of the phone home */
.mk-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:50px;padding:0 16px;border-radius:16px;background:#1e1e24;border:1px solid var(--hair);color:var(--muted);font:500 16px/1 var(--ui);text-align:center;box-shadow:0 12px 30px -10px rgba(0,0,0,.7)}
[data-theme="light"] .mk-btn{background:#fff}
.mk-btn svg{width:20px;height:20px;flex:none}
.mk-btn span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.m-dock #page{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
body.m-dock #runpop{bottom:calc(72px + env(safe-area-inset-bottom,0px))}
body.m-dock .vbanner,body.m-dock .authnote{bottom:calc(72px + env(safe-area-inset-bottom,0px))}
body.m-on #runpop{left:12px;max-width:calc(100vw - 24px)}

/* ── the Create sheet ── */
#msheet{position:fixed;inset:0;z-index:97}
.ms-scrim{position:absolute;inset:0;background:rgba(0,0,0,.6);opacity:0;transition:opacity .22s}
.ms-panel{position:absolute;left:0;right:0;bottom:0;max-height:min(88dvh,calc(100dvh - 40px));display:flex;flex-direction:column;background:#141418;border:1px solid var(--hair);border-bottom:0;border-radius:22px 22px 0 0;transform:translateY(104%);transition:transform .26s cubic-bezier(.2,.8,.2,1);padding-bottom:env(safe-area-inset-bottom,0px)}
#msheet.on .ms-scrim{opacity:1}
#msheet.on .ms-panel{transform:none}
.ms-grab{display:flex;justify-content:center;padding:8px 0 2px;touch-action:none}
.ms-grab i{width:40px;height:5px;border-radius:3px;background:var(--hair2)}
.ms-head{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;padding:0 8px;touch-action:none}
.ms-head h2{grid-column:2;margin:0;text-align:center;font:700 16px/1.2 var(--ui)}
.ms-x{grid-column:3;width:44px;height:44px;display:grid;place-items:center;border-radius:12px;color:var(--muted)}
.ms-x svg{width:20px;height:20px}
.ms-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:6px 12px 12px;display:flex;flex-direction:column;gap:10px}
.ms-card{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:16px;background:var(--card);border:1px solid var(--hair)}
.ms-k{margin:0;font:600 12.5px/1.2 var(--ui);color:var(--muted)}
.ms-prompt textarea{width:100%;min-height:84px;resize:none;border:0;outline:0;background:transparent;color:var(--ink);font:500 16px/1.45 var(--ui);padding:0}
.ms-prompt:focus-within{border-color:rgba(255,215,49,.55)}
.ms-res .ms-k{margin:4px 2px 8px}
.ms-tools{display:flex;flex-direction:column;gap:6px}
.ms-tool{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 12px;border-radius:14px;background:var(--card);border:1px solid var(--hair);text-align:left}
.ms-tool:active{border-color:var(--hair2)}
.ms-ti{width:36px;height:36px;border-radius:10px;background:var(--card2);display:grid;place-items:center;font-size:18px;flex:none}
.ms-tool>span:last-child{display:flex;flex-direction:column;min-width:0}
.ms-tool b{font:600 15px/1.25 var(--ui)}
.ms-tool span span{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-foot{flex:none;display:grid;grid-template-columns:1fr 1.3fr;gap:8px;padding:10px 12px 12px;border-top:1px solid var(--hair)}
.ms-btn{height:52px;border-radius:999px;font:800 15px/1 var(--ui)}
.ms-btn.sun{background:var(--sun);color:#000}
.ms-btn.ghost{border:1px solid var(--hair2);color:var(--ink)}
.ms-btn:disabled{opacity:.4}

/* ── the credits card (bar.js) as a bottom sheet ── */
#umenu.wcard.m-sheet{top:auto;left:0;right:0;bottom:0;width:100%;max-width:none;max-height:86dvh;border-radius:22px 22px 0 0;border-bottom:0;padding:16px 12px calc(12px + env(safe-area-inset-bottom,0px));z-index:97;box-shadow:0 0 0 100vmax rgba(0,0,0,.6);overscroll-behavior:contain}
#umenu.wcard.m-sheet::before{content:"";display:block;width:40px;height:5px;border-radius:3px;background:var(--hair2);margin:-8px auto 10px}
#umenu.m-sheet .mi{min-height:44px;display:flex;align-items:center;font-size:15px}
#umenu.m-sheet .wc-acts .btn{min-height:44px;justify-content:center;flex:1}
#umenu.m-sheet .wc-pack{min-height:64px}
#umenu.m-sheet .wc-packs{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-columns:auto;overflow:visible;scroll-snap-type:none}

/* ── engines: the frame fills the space under the bar ── */
body.m-on #stage{top:var(--bar);height:auto;bottom:0}
body.m-on.staged{overscroll-behavior:none}

/* ── HOME ── */
body.m-on #page>[data-blk="top"],body.m-on #page>[data-blk="home"],body.m-on #page>[data-blk="site"]{display:none}
body.m-on .hero{padding:10px 12px 0}
/* the hero is a solid card (Adi, Oct 17: "the hero is transparent, solidify it"). Its lockup ground (#0b0b0e) sat on
   the page's #0e0e11 and its hairline + glow are box-shadows the hero's own clip-path cuts off, so on a phone the
   card had no surface and no edge: BUILDER CULT and its cards floated on the page. Here it gets a ground a step up
   from the page, an edge drawn over it from outside the clip, and every see-through layer on it (the chapter rail,
   the Building pill, the App Store note) goes opaque. */
html:not([data-theme="light"]) body.m-on .hs{--hs-bg:#17171c}
body.m-on .hs[data-field="bg"]{--rl-bg:#212128}
[data-theme="light"] body.m-on .hs[data-field="bg"]{--rl-bg:#fdfcf9}
body.m-on .hs[data-field="ideate"]{--rl-bg:#d7eaff}
body.m-on .hs[data-field="mint"]{--rl-bg:#cbf5e3}
body.m-on .hs[data-field="sun"]{--rl-bg:#ffe783}
body.m-on .hs[data-field="violet"]{--rl-bg:#372a8f}
body.m-on .hero{position:relative}
body.m-on .hero::after{content:"";position:absolute;top:10px;left:12px;right:12px;bottom:0;border-radius:24px;box-shadow:inset 0 0 0 1px rgba(243,239,230,.18);pointer-events:none;z-index:2}
[data-theme="light"] body.m-on .hero::after{box-shadow:inset 0 0 0 1px rgba(11,11,14,.14)}
@media (min-width: 741px) { body.m-on .hero::after{border-radius:30px} }   /* 741–760: the hero is still its wide self */
body.m-on .hs .bstat{background:#dcf9ec}
body.m-on .hs .note{background:#fff}
/* centred on the phone canvas (720 wide, centre 360): "Building n%" / Launch-ready with its check, and the scan's
   "Scanning n apps" bar. Both sat left of centre, where the old pause button (gone since Oct 15) needed room. */
body.m-on .hs[data-m="m"] .bstat.ab,body.m-on .hs[data-m="m"] .rhead.ab{left:360px!important}
body.m-on .hs[data-m="m"] .ab[data-k="ocheck"]{left:530px!important}

.mh{padding:0 0 8px}
.mh-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:14px 12px 6px}
.mh-tile{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0}
.mh-sq{position:relative;display:block;width:100%;aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--card);border:1px solid var(--hair);isolation:isolate}
.mh-tl{font:600 12.5px/1.2 var(--ui);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.mh-tile:active .mh-sq{transform:scale(.97)}
/* a tile's frames (m.js): stacked, one on show, a crossfade between them. Square tiles: nothing moves the layout */
.mh-f{position:absolute;inset:0;display:block;opacity:0;transition:opacity .6s ease}
.mh-f.on{opacity:1}
.mh-cov{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.t-idea .mh-sq{background:#bcdcff}
.mh-score{position:absolute;right:5px;bottom:5px;font:800 10.5px/1 var(--ui);font-style:normal;background:#ffd731;color:#000;border-radius:999px;padding:3px 6px}
/* Ideate: the apps the scan reads, one icon at a time, big and centred, with what it makes a month */
.mh-aic{position:absolute;left:50%;top:44%;width:54%;aspect-ratio:1;translate:-50% -50%;border-radius:23%;background-size:800% 800%;background-repeat:no-repeat;box-shadow:0 8px 16px -8px rgba(18,62,120,.55)}
.mh-tiles.live .mh-aic{background-image:url(/hero/apps-sprite.webp?v=2)}   /* fetched only once the tiles start moving */
.mh-rev{position:absolute;left:50%;bottom:6px;translate:-50% 0;font:800 10px/1 var(--ui);font-style:normal;background:#fff;color:#0b0b0e;border-radius:999px;padding:3px 6px;white-space:nowrap;box-shadow:0 2px 6px -2px rgba(18,62,120,.4)}
/* Build an app: a built app's own screen in a small iPhone (or a web app in a browser), centred on its own glass */
.t-build .mh-sq{background:#0b0b0e}
.mh-bg{position:absolute;inset:-14%;width:128%;height:128%;object-fit:cover;filter:blur(9px) brightness(.5) saturate(1.2);display:block}
.mh-ph{position:absolute;left:50%;top:50%;height:86%;aspect-ratio:9/19.5;translate:-50% -50%;padding:2px;border-radius:11px;background:#0b0b0e;box-shadow:0 0 0 1px rgba(255,255,255,.24),0 8px 16px -6px rgba(0,0,0,.7)}
.mh-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 0;border-radius:9px;display:block}
.mh-ph::after{content:"";position:absolute;top:5px;left:50%;translate:-50% 0;width:30%;height:4px;border-radius:3px;background:#000}
.mh-web{position:absolute;left:50%;top:50%;width:86%;translate:-50% -50%;border-radius:6px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.24),0 8px 16px -6px rgba(0,0,0,.7)}
.mh-web i{display:block;height:7px;background:radial-gradient(circle at 5px 3.5px,#ff5f57 1.3px,transparent 1.7px),radial-gradient(circle at 10px 3.5px,#febc2e 1.3px,transparent 1.7px),radial-gradient(circle at 15px 3.5px,#28c840 1.3px,transparent 1.7px),#ecebe6}
.mh-web img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:50% 0}
.t-mcp .mh-sq{background:radial-gradient(120% 90% at 0% 0%,rgba(255,215,49,.38),transparent 55%),#0b0b0e;border:2px solid var(--sun);box-shadow:0 0 18px -4px rgba(255,215,49,.55)}
.mh-mcp{position:absolute;inset:0;display:grid;place-items:center;color:var(--sun)}
.mh-mcp svg{width:46%;height:46%}
.t-mcp .mh-tl{color:var(--sun)}
.mh-made{padding-top:14px}
.mh-hd{padding:0 16px 10px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.mh-k{display:inline-flex;align-items:center;gap:5px;font:600 12.5px/1 var(--ui);color:var(--sun)}
.mh-k svg{width:13px;height:13px;fill:var(--sun);stroke:none}
.mh-hd h2{margin:0;font:800 22px/1.1 'Inter Tight',var(--ui);letter-spacing:-.02em}
/* centred when the chips fit; when they don't, the row scrolls from 16 px in and ends 16 px from the edge (the two
   spacers' auto margins share the free space, and are 0 once the row overflows) */
.mh-chips{display:flex;gap:6px;overflow-x:auto;padding:0 0 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.mh-chips::-webkit-scrollbar{display:none}
.mh-chips::before,.mh-chips::after{content:"";flex:0 0 10px}
.mh-chips::before{margin-left:auto}
.mh-chips::after{margin-right:auto}
.mh-chip{flex:none;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--hair);color:var(--muted);font:600 13.5px/1 var(--ui);position:relative}
.mh-chip::before{content:"";position:absolute;inset:-4px 0}
.mh-chip.on{background:#fff;color:#000;border-color:#fff}
.mh-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;align-items:start}
.mh-col{display:flex;flex-direction:column;gap:2px;min-width:0}
.mh-it{position:relative;margin:0;overflow:hidden;background:var(--card);border-radius:4px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mh-it .mh-m,.mh-it video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.mh-it figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 9px 8px;display:flex;flex-direction:column;gap:2px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.72));pointer-events:none}
.mh-it figcaption em{font:700 10.5px/1 var(--ui);font-style:normal;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.mh-it figcaption b{font:600 12.5px/1.25 var(--ui);color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mh-it.k-web{background:#101014}
.mh-empty{padding:20px 16px;color:var(--muted);font-size:14px}
.mh-legal{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 14px;padding:22px 16px 6px;font-size:12.5px;color:var(--muted)}
.mh-legal a{min-height:32px;display:inline-flex;align-items:center}

/* ── MCP: the phone hero on top, the rest one column ── */
body.m-on .mcpp{padding:0 16px 56px}
.mcpm{display:flex;flex-direction:column;align-items:center;text-align:center;padding:26px 0 8px}
.mcpm h1{margin:12px 0 8px;font:900 clamp(30px,9.4vw,40px)/.98 'Inter Tight',var(--ui);letter-spacing:-.025em;text-transform:uppercase}
.mcpm h1 span{display:block;color:var(--sun)}
.mcpm-s{margin:0 auto;max-width:32ch;color:var(--muted);font-size:14.5px;line-height:1.45}
.mcpm-how{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:6px;font:600 14px/1 var(--ui);color:var(--ink)}
.mcpm-how svg{width:18px;height:18px}
.mcpm-ph{width:min(250px,68vw);margin:10px auto 18px;padding:9px;border-radius:40px;background:#1c1c22;border:1px solid var(--hair2);box-shadow:0 30px 60px -30px rgba(255,215,49,.35),0 0 0 6px #0b0b0e}
.mcpm-scr{border-radius:31px;background:#0b0b0e;padding:12px 10px 10px;display:flex;flex-direction:column;gap:9px;text-align:left;min-height:330px}
.mcpm-top{display:flex;align-items:center;justify-content:space-between;padding:0 4px;font:700 10.5px/1 var(--ui);color:var(--muted)}
.mcpm-top i{width:16px;height:16px;border-radius:50%;background:var(--card2)}
.mcpm-u{align-self:flex-end;max-width:84%;padding:8px 10px;border-radius:14px 14px 4px 14px;background:var(--card2);font-size:11.5px;line-height:1.35}
.mcpm-a{display:flex;flex-direction:column;gap:7px}
.mcpm-tag{display:inline-flex;align-items:center;gap:5px;font:700 10px/1 var(--ui);color:var(--muted)}
.mcpm-tag img{width:14px;height:14px;border-radius:4px}
.mcpm-card{display:grid;grid-template-columns:34px 1fr;gap:4px 8px;align-items:center;padding:8px;border-radius:12px;background:#1b1b20;border:1px solid rgba(255,215,49,.35)}
.mcpm-card img{width:34px;height:34px;border-radius:9px}
.mcpm-card b{display:block;font-size:12px}
.mcpm-card span{display:block;font-size:10px;color:var(--muted)}
.mcpm-card em{grid-column:1/-1;font:800 10.5px/1 var(--ui);font-style:normal;background:var(--sun);color:#000;border-radius:999px;padding:5px 8px;justify-self:start}
.mcpm-row{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.mcpm-row img{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:6px;display:block}
.mcpm-in{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding:7px 7px 7px 11px;border-radius:999px;background:#1b1b20;border:1px solid var(--hair);font-size:10.5px;color:var(--muted)}
.mcpm-in i{width:20px;height:20px;border-radius:50%;background:#fff;color:#000;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:11px}
.mcpm-btns{display:flex;flex-direction:column;gap:8px;width:100%}
.mcpm-b{display:flex;align-items:center;justify-content:center;gap:8px;height:54px;border-radius:999px;background:#fff;color:#000;font:700 16px/1 var(--ui)}
.mcpm-b svg{width:16px;height:16px;fill:#000;stroke:none}
.mcpm-b.ghost{background:transparent;color:var(--ink);border:1px solid var(--hair2);height:50px;font-size:15px}
.mcpm-k{margin:22px 0 8px;font:700 11px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:rgba(243,239,230,.55)}
.mcpm .mcpp-url{margin:0 0 6px;max-width:none}
.mcpm-cta{display:flex;flex-direction:column;align-items:stretch;gap:6px;width:100%;margin-top:14px}
.mcpm-cta .hx-cta{display:flex;justify-content:center;align-items:center;min-height:52px}
.mcpm-cta .mcpp-ghost{display:flex;justify-content:center;align-items:center;min-height:44px}
body.m-on .mcpp-hero{padding:18px 16px;margin-top:18px}
body.m-on .mcpp-hero .mcpp-hin{display:none}
body.m-on .mcpp-steps{grid-template-columns:1fr!important}
body.m-on .mcpp-strip .mcpp-sl{display:none}
body.m-on .mcpp-strip{margin-top:18px}
body.m-on .mcpp .tokrow{grid-template-columns:minmax(0,1fr) auto}
body.m-on .mcpp .tokrow .m{white-space:normal;overflow-wrap:anywhere}
body.m-on .mcpp .tokrow .pill{min-height:40px}
body.m-on .mcpp-apps{grid-template-columns:1fr}
body.m-on .mcpp-grid{grid-template-columns:1fr}
body.m-on .mcpp-sec{margin-top:30px}
body.m-on .mcpp .aitabs{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:6px;padding-bottom:4px}
body.m-on .mcpp .aitabs::-webkit-scrollbar{display:none}
body.m-on .mcpp .aitabs .pill{flex:none;min-height:40px}
body.m-on .mcpp .aicode{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12.5px}
body.m-on .mcpp-app>.pill{min-height:40px}
body.m-on .mcpp input,body.m-on .mcpp textarea{font-size:16px}

/* ── readable at 375: the pages the shell draws ── */
body.m-on input,body.m-on select,body.m-on textarea{font-size:16px}
body.m-on .wrap{padding-left:16px;padding-right:16px}
body.m-on .learn{grid-template-columns:1fr!important}   /* Academy: three columns inline on desktop, one on a phone */
body.m-on .guide summary{min-height:44px;align-items:center}

}