/* ══ MCP on a phone (≤ 760 px), round 2: mcp-m.js's hero + a tidier page under it. Loaded with
   media="(max-width: 760px)" after m.css, so a desktop never applies a rule here. The hero is .mcpm.mcpx (m.js
   then skips its older one); every class inside it is mx-*. The phone mock is tall (0.48), thin bezel, no notch;
   it stays a dark device on the light theme too. No blur anywhere: the sticky buttons fade with a plain gradient. ══ */
@media (max-width: 760px) {

/* ── the hero ── */
.mcpm.mcpx{display:flex;flex-direction:column;align-items:center;text-align:center;padding:22px 0 4px}
.mcpm.mcpx .mx-h{margin:0;max-width:13.5em;font:900 clamp(29px,8.7vw,40px)/1.02 'Inter Tight',var(--ui);letter-spacing:-.028em;text-transform:uppercase;color:var(--ink)}
.mcpm.mcpx .mx-h span{display:inline;color:inherit}   /* m.css's older .mcpm h1 span{display:block} */
.mcpm.mcpx .mx-h .mx-nw{white-space:nowrap}
.mcpm.mcpx .mx-h .mx-ai{white-space:nowrap;color:var(--sun)}
[data-theme="light"] .mcpm.mcpx .mx-h .mx-ai{color:#4a3bc4}
.mx-lg{display:inline-grid;place-items:center;width:.86em;height:.86em;margin:0 .16em 0 .04em;border-radius:.22em;vertical-align:-.1em;background:#d97757;color:#fff;box-shadow:0 0 0 1px rgba(127,127,127,.28)}
.mx-lg svg{width:74%;height:74%}
.mx-lg.gp{background:#fff;color:#0e0e11}
.mx-s{margin:12px 0 0;color:var(--muted);font:500 15px/1.4 var(--ui)}
.mx-how{display:inline-flex;align-items:center;gap:7px;min-height:44px;margin-top:4px;padding:0 6px;font:650 14.5px/1 var(--ui);color:var(--ink)}
.mx-how svg{width:18px;height:18px}

/* ── the phone: tall, thin bezel, no notch ── */
.mx-ph{width:min(300px,76vw);aspect-ratio:.48;margin:14px auto 0;padding:5px;border-radius:46px;background:linear-gradient(150deg,#45454e,#18181d 34%,#101014 66%,#34343c);box-shadow:0 0 0 1px rgba(255,255,255,.07),0 34px 70px -34px rgba(255,215,49,.4)}
.mx-scr{height:100%;border-radius:41px;background:#121215;overflow:hidden;display:flex;flex-direction:column;text-align:left;padding:12px 11px 11px;color:#f3efe6}
.mx-sb{display:flex;align-items:center;justify-content:space-between;padding:0 12px 0 16px;height:16px;font:650 11.5px/1 var(--ui)}
.mx-sb span{display:flex;align-items:center;gap:5px}
.mx-sb .sg{width:16px;height:10px;fill:#f3efe6}
.mx-sb .bt{width:21px;height:10px;border-radius:3px;border:1px solid rgba(243,239,230,.55);background:linear-gradient(#f3efe6,#f3efe6) 1px 1px/70% calc(100% - 2px) no-repeat}
.mx-hd{display:grid;grid-template-columns:28px 1fr 28px;align-items:center;height:36px;margin-top:6px;padding:0 4px}
.mx-bars{width:16px;height:11px;background:linear-gradient(#a8a49b,#a8a49b) 0 0/16px 1.6px no-repeat,linear-gradient(#a8a49b,#a8a49b) 0 100%/10px 1.6px no-repeat}
.mx-pen{justify-self:end;width:14px;height:14px;border:1.6px solid #a8a49b;border-radius:4px}
.mx-who{display:grid;justify-items:center;font:650 13px/1 var(--ui)}
.mx-who>span{grid-area:1/1;display:inline-flex;align-items:center;gap:6px;animation:mx-swap 9s ease-in-out infinite}
.mx-who>span.b{animation-delay:-4.5s}
.mx-who .mx-lg{width:17px;height:17px;margin:0;border-radius:5px;vertical-align:0}
@keyframes mx-swap{0%,44%{opacity:1}50%,94%{opacity:0}100%{opacity:1}}
.mx-chat{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:9px;padding:8px 2px 10px}
.mx-u{align-self:flex-end;max-width:84%;padding:9px 12px;border-radius:17px 17px 5px 17px;background:#2a2a31;font:500 12.5px/1.38 var(--ui)}
.mx-tool{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:5px 9px 5px 6px;border-radius:10px;border:1px solid rgba(243,239,230,.14);font:500 10.5px/1 var(--ui);color:#a8a49b}
.mx-tool img{width:16px;height:16px;border-radius:4px}
.mx-tool b{color:#f3efe6;font-weight:650}
.mx-tool em{font-style:normal;color:#55db9c;font-weight:800}
.mx-t{margin:0;font:400 12.5px/1.42 var(--ui);color:#e6e2da}
.mx-t b{font-weight:700;color:#fff}
.mx-card{border-radius:16px;overflow:hidden;background:#1d1d23;border:1px solid rgba(255,215,49,.38);flex:none}
.mx-shot{aspect-ratio:16/11;overflow:hidden;background:#f6e6d8}
.mx-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.mx-ci{display:flex;align-items:center;gap:8px;padding:9px 10px 0}
.mx-ci img{width:22px;height:22px;border-radius:6px;flex:none}
.mx-ci b{display:block;font:700 13px/1.15 var(--ui)}
.mx-ci span{display:block;font:500 10.5px/1.3 var(--ui);color:#a8a49b}
.mx-open{display:flex;align-items:center;justify-content:center;gap:5px;height:32px;margin:9px 10px 10px;border-radius:999px;background:var(--sun);color:#000;font:800 12px/1 var(--ui)}
.mx-open svg{width:13px;height:13px}
.mx-more{display:none;margin-top:auto;gap:6px;overflow:hidden}
.mx-more span{flex:none;padding:7px 10px;border-radius:999px;border:1px solid rgba(243,239,230,.16);font:600 10.5px/1 var(--ui);color:#e6e2da;white-space:nowrap}
.mx-scr{container-type:size}
@container (min-height: 575px){.mx-more{display:flex}}   /* the follow-ups only on a phone tall enough to hold them */
.mx-in{flex:none;display:flex;align-items:center;gap:8px;height:38px;padding:0 5px 0 12px;border-radius:999px;background:#1d1d23;border:1px solid rgba(243,239,230,.12);font:500 12px/1 var(--ui);color:#a8a49b}
.mx-in span{flex:1}
.mx-in i{font-style:normal;font-size:16px;line-height:1}
.mx-in i.up{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#f3efe6;color:#000;font-size:14px;font-weight:800}

/* ── Connect to Claude / ChatGPT: they ride the screen's foot while the hero is on it, then settle under the phone ── */
.mx-btns{position:sticky;bottom:0;z-index:4;align-self:stretch;display:flex;flex-direction:column;gap:8px;margin:2px -16px 0;padding:40px 16px calc(12px + env(safe-area-inset-bottom,0px));background:linear-gradient(to bottom,rgba(14,14,17,0),var(--ground) 36px)}
[data-theme="light"] .mx-btns{background:linear-gradient(to bottom,rgba(220,238,255,0),var(--ground) 36px)}
.mx-b{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:54px;border-radius:999px;border:0;background:var(--ink);color:var(--ground);font:700 16px/1 var(--ui);letter-spacing:-.01em}
.mx-b:active{transform:scale(.985)}
.mx-b .mx-lg{width:22px;height:22px;margin:0;border-radius:6px;vertical-align:0}
.mx-b .mx-lg.gp{background:#0e0e11;color:#fff}
.mx-b.ghost{height:50px;margin-top:0;background:transparent;color:var(--ink);border:1px solid var(--hair2);font-size:15px}
.mx-b.ghost svg{width:18px;height:18px}
.mx-k{align-self:stretch;margin:26px 0 8px;text-align:left;font:700 11px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.mcpx .mcpp-url{margin:0;max-width:none}
.mx-cta{display:flex;flex-direction:column;align-items:stretch;gap:8px;width:100%;margin-top:14px}
.mx-cta .hx-cta{display:flex;height:52px;font-size:16px;border-radius:999px}
.mx-cta .mcpp-ghost{display:flex;justify-content:center;height:46px;border-radius:999px;color:var(--ink);border-color:var(--hair2)}

@media (prefers-reduced-motion: reduce){
  .mx-who>span{animation:none}
  .mx-who>span.b{opacity:0}
  .mx-b:active{transform:none}
}

/* ── the page under the hero: the same sections, tidier spacing ── */
body.m-on .mcpp{padding:0 16px 64px}
body.m-on .mcpp-hero{margin-top:30px;padding:14px;border-radius:18px}
/* signed out, dark: just the three steps, no card around cards (the light theme keeps the dark card its text needs) */
html:not([data-theme="light"]) body.m-on .mcpp-hero{padding:0;background:none;border:0;border-radius:0}
html:not([data-theme="light"]) body.m-on .mcpp-hero::before{display:none}
body.m-on .mcpp-steps{gap:8px}
body.m-on .mcpp-steps li{padding:12px 14px 14px}
body.m-on .mcpp-strip{margin-top:30px;padding:14px;border-radius:18px}
body.m-on .mcpp-sec{margin-top:36px;scroll-margin-top:calc(var(--bar,52px) + 14px)}   /* a scrolled-to section clears the fixed top bar */
body.m-on .mcpp-strip{scroll-margin-top:calc(var(--bar,52px) + 14px)}
body.m-on .mcpp-sec>h2{font-size:22px;margin-bottom:6px}
body.m-on .mcpp-sub{font-size:14px;line-height:1.5;margin-bottom:14px}
body.m-on .mcpp .aibox{padding:14px;border-radius:18px}
body.m-on .mcpp .aibox>.tokrow:first-child{padding-top:0}
body.m-on .mcpp .aibox>.tokrow:last-child{border-bottom:0;padding-bottom:0}
body.m-on .mcpp-ol li{font-size:14px;padding:11px 12px 11px 40px}
body.m-on .mcpp-app{padding:14px;border-radius:18px}
body.m-on .mcpp-card{padding:16px;border-radius:18px}
body.m-on .mcpp-adv>summary{padding:14px 16px}
/* Adi's marks as images: the tile is the logo itself (Claude orange, ChatGPT black on white) */
.mx-lg{overflow:hidden;background:#fff}.mx-lg img{width:100%;height:100%;object-fit:cover;display:block}.mx-lg.cl{background:#d97757}.mx-b .mx-lg.gp{background:#fff}
}