/* MCP-first home page (home-mcp.html, draft 2026-10-13).
   Loads after style.css, v2.css, mcp.css and dark.css, and uses their tokens.
   Only this page loads it; the other pages do not change. */

/* ---------- H1 Hero: the home hero layout with the MCP message ---------- */
.mcp-home .hero h1 { font-size: clamp(30px, 4.9vw, 72px); line-height: 1.22; }
.mcp-home .hero-cta { flex-wrap: wrap; gap: 12px; }
.mcp-home .hero-cta .btn-outline { box-shadow: none; }
/* Download for Mac is the action of the hero and the closing card; the Terminal command is the second path. */
.mcp-home .hero .dl-cta { margin-top: clamp(18px, 3.6vh, 34px); }
.dl-cta { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; max-width: 100%; }
.dl-btn .dl-apple { width: 17px; height: 20px; margin-top: -3px; }
.dl-meta { margin: 0; font-size: 13.5px; color: var(--muted); text-align: center; }
.dl-dev { display: flex; flex-direction: column; align-items: center; min-width: 0; max-width: 100%; }
.dl-dev-label { margin: 0 0 12px; font-size: 14px; color: var(--text); text-align: center; }
.dl-dev .install-box { box-shadow: none; }
.end-card .dl-cta { grid-column: 1 / -1; align-items: flex-start; }
.end-card .dl-meta, .end-card .dl-dev-label { text-align: left; }
.end-card .dl-dev { align-items: flex-start; }
@media (max-width: 760px) { .end-card .dl-cta, .end-card .dl-dev { align-items: center; } .end-card .dl-meta, .end-card .dl-dev-label { text-align: center; } .dl-btn { width: min(100%, 320px); } }
.install-cta { min-width: 0; max-width: 100%; flex-direction: column; align-items: center; gap: 10px; }
.install-box { display: flex; align-items: center; gap: 10px; max-width: min(100%, 620px); padding: 7px 7px 7px 18px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--card); box-shadow: var(--shadow); }
.install-box code { min-width: 0; overflow-x: auto; white-space: nowrap; font: 13.5px/1.5 var(--code); color: var(--text); scrollbar-width: none; }
.install-box code::-webkit-scrollbar { display: none; }
.install-box .btn { flex: none; box-shadow: none; }
.install-note { margin: 0; font-size: 14px; color: var(--muted); text-align: center; }
.install-note a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.install-note a:hover { color: var(--accent); }
.plan-fine { margin: 10px 0 0; text-align: center; font-size: 13px; color: var(--muted); }
/* In-page links land below the fixed nav. */
.mcp-home main section[id] { scroll-margin-top: 88px; }

/* Atu as a round avatar inside the headline (muse.ai pattern), not a dog on its own row.
   The video is square, cut to the circle (288 px: ears, face, badge, vest; from scene-commute-loop
   at x 15, y 115, 360 px) and opaque: the dog is drawn on the logo tile colour, one file per theme.
   iPhone Safari drew the transparent version with ghosting and a light haze (owner report
   2026-10-18), so the avatar uses no alpha. home-mcp.js starts the shown video after a theme change. */
.h-ava { --d: 1.24em; position: relative; display: inline-block; width: var(--d); height: var(--d); margin-left: .22em;
  vertical-align: -.34em; border-radius: 50%; overflow: hidden; background: var(--logo-tile, #ece5dc); isolation: isolate; -webkit-mask-image: -webkit-radial-gradient(white, black); }
.h-ava video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 50%; }
.h-ava .ava-dark, [data-theme="dark"] .h-ava .ava-light { display: none; }
[data-theme="dark"] .h-ava .ava-dark { display: block; }
.h-ava::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-2); pointer-events: none; }
/* The AI app name is the variable of the line: it is in the accent colour (owner review 2026-10-19) and changes
   like the home page word ("from your phone", app.js), with the app logo after it. */
.mcp-home .hero #place-word { min-width: 0; }
.mcp-home .hero #app-word { display: inline-block; }
.hero .word-img.app-logo.on { height: .72em; margin-left: .24em; vertical-align: -.04em; filter: none; }
[data-theme="dark"] .hero .word-img.app-logo.mono { filter: invert(1); }
/* Chinese line "在手机上用 Claude": a small gap before the Latin name, not the wide mono space. */
html[lang^="zh"] .mcp-home .hero #app-word { margin-left: .2em; }
/* The nav fits one line on phones: the brand and the buttons do not wrap. */
.mcp-home .nav .brand span, .mcp-home .nav .btn-sm, .lang-sw { white-space: nowrap; }
@media (max-width: 400px) {
  .mcp-home .nav .btn-sm .glyph { display: none; }
  .mcp-home .nav .btn-sm { padding: 6px 12px; }
}
/* The narrowest phones: the logo alone, so the waitlist button fits. */
@media (max-width: 359px) { .mcp-home .nav .brand span { display: none; } }

@media (min-width: 900px) {
  .mcp-home .hero h1 { font-size: clamp(32px, min(5.4vw, 8vh), 72px); }
}
/* The hero is only as tall as its copy, so the next section (the AI apps) shows on the first screen. */
@media (min-width: 900px) and (min-height: 700px) {
  .mcp-home .hero { min-height: 0; padding-top: 130px; padding-bottom: 0; }
}
@media (max-width: 640px) {
  .mcp-home .hero h1 { font-size: clamp(24px, 7.4vw, 30px); }
  .mcp-home .hero-cta .btn-lg { width: min(100%, 320px); }
  .h-ava { --d: 1.6em; vertical-align: -.42em; }
}

/* ---------- H2 Demo: closer to the hero than on the MCP page ---------- */
.mcp-home .m-demo { margin-top: 56px; }

/* ---------- H3 Set up: two command lines in step 1 ---------- */
.m-cmd { display: grid; gap: 6px; margin-top: 20px; padding: 12px 14px; border-radius: 14px; background: var(--bg-alt); }
.m-cmd code { display: block; font: 12px var(--code); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-cmd b { font-weight: 400; color: var(--faint); margin-right: 4px; }

/* ---------- H6 Pricing on this page ---------- */
.mcp-home .sp-price { margin-top: 104px; }

/* ---------- H7 Next: the iPhone app ---------- */
.hm-next-card { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 32px; align-items: center; padding: 40px 44px; border-radius: 28px; background: linear-gradient(120deg, var(--card) 0%, var(--bg-alt) 100%); }
.hm-next h2 { font-size: clamp(26px, 3vw, 38px); }
.hm-next-copy > p:not(.eyebrow-s) { max-width: 520px; margin: 14px 0 0; }
.hm-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 24px 0 26px; padding: 0; list-style: none; }
.hm-feats li { padding: 14px 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.hm-feats b { display: block; font-size: 14.5px; color: var(--text-2); }
.hm-feats span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.hm-next-art { position: relative; display: grid; place-items: center; }
.hm-next-art img { width: min(100%, 260px); filter: drop-shadow(0 24px 30px rgba(90, 60, 30, .22)); }
.hm-soon { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); padding: 6px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--line-2); font: 11px var(--pixel); letter-spacing: .04em; color: var(--accent); white-space: nowrap; }
@media (max-width: 900px) {
  .hm-next-card { grid-template-columns: minmax(0, 1fr); padding: 28px 22px; }
  .hm-next-art { order: -1; }
  .hm-next-art img { width: 180px; }
}
@media (max-width: 640px) {
  .hm-feats { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- H8 Questions ---------- */
.mcp-home #faq .aside-links { margin-top: 22px; }

/* ---------- Dark mode for the parts that only this page has ---------- */
[data-theme="dark"] .hm-next-card { background: linear-gradient(120deg, var(--card) 0%, var(--bg-alt) 100%); }
[data-theme="dark"] .hm-next-art img { filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .5)); }

/* ---------- H1b Hub: one connector, every AI app ---------- */
.nav-soon { margin-left: 4px; padding: 2px 6px; border-radius: 999px; background: var(--bg-alt); font: 10px var(--pixel); color: var(--accent); vertical-align: 1px; }
.hub { margin-top: 72px; }
.hub-map { max-width: 920px; margin: 44px auto 0; }
.hub-apps, .hub-targets { display: grid; margin: 0; padding: 0; list-style: none; }
.hub-apps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.hub-apps li { display: grid; justify-items: center; gap: 10px; font-size: 13.5px; color: var(--muted); text-align: center; }
.hub-ic { position: relative; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 18px; background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow); font: 22px var(--code); color: var(--text-2); }
.hub-ic img { width: 32px; height: 32px; }
.hub-ic i { position: absolute; right: -6px; bottom: -6px; padding: 2px 5px; border-radius: 7px; background: var(--text-2); color: var(--bg); font: 10px var(--code); font-style: normal; }
.hub-any .hub-ic { background: transparent; border: 1.5px dashed var(--line-2); box-shadow: none; color: var(--faint); }
.hub-lines { display: block; width: 100%; height: 90px; overflow: visible; }
.hub-lines path { fill: none; stroke: var(--line-2); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 4 8; animation: hub-flow 1.6s linear infinite; }
.hub-lines path.dash { opacity: .6; }
.hub-bot { height: 70px; }
@keyframes hub-flow { to { stroke-dashoffset: -24; } }
@media (prefers-reduced-motion: reduce) { .hub-lines path { animation: none; } }
.hub-core { display: grid; justify-items: center; gap: 4px; text-align: center; }
/* No accent outline here (owner review 2026-10-19): it looks too sharp. A soft shadow lifts the tile. */
.hub-logo { display: grid; place-items: center; width: 104px; height: 104px; margin-bottom: 10px; border-radius: 28px; background: var(--card); box-shadow: 0 24px 50px -20px rgba(217, 128, 58, .45); }
.hub-logo { background: var(--logo-tile); }
.hub-logo img.atu-logo { width: 58px; height: auto; padding: 0; background: none; }
/* The colour logo inside the AI app pictures: on the white surfaces of the apps it gets the same grey tile. */
.cl-tool img, .gp-tool img, .gp-chip img, .mb-ask-ic { box-sizing: border-box; object-fit: contain; background: #ece5dc !important; border-radius: 5px; }
.cl-tool img, .gp-tool img { padding: 2px; }
.gp-chip img { padding: 2px; border-radius: 50%; }
.mb-ask-ic { padding: .35em !important; }
.hub-core b { font-size: 20px; color: var(--text-2); }
.hub-core small { font-size: 14px; color: var(--muted); }
/* The iPhone app is text, not a button: the one action on this page is the waitlist. */
.hub-targets { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
/* Third layer: tasks that Atu does on the computer. */
.hub-targets li { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 10px 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--line-2); font-size: 14.5px; line-height: 1.35; color: var(--text-2); text-align: left; }
.hub-targets b { flex: none; font: 15px var(--code); color: var(--accent); }
.hub-m { display: none; }
@media (max-width: 640px) {
  .hub-top { height: 64px; }
  .hub-ic { width: 56px; height: 56px; border-radius: 15px; }
  .hub-d { display: none; }
  .hub-m { display: block; height: 48px; }
  .hub-targets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .hub-targets li { justify-content: flex-start; padding: 10px 12px; font-size: 13.5px; }
}
[data-theme="dark"] .hub-ic img.mono { filter: invert(1); }

/* ---------- Language switch (EN / 中文) ---------- */
.lang-sw { padding: 5px 10px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 12.5px; color: var(--text-2); }
.lang-sw:hover { border-color: var(--accent); color: var(--accent); }
html[lang^="zh"] .mcp-home .hero h1, html[lang^="zh"] .m-title { letter-spacing: 0; }
.nav nav > a.lang-sw { color: var(--text-2); }
@media (max-width: 900px) { .nav nav > a.lang-sw { display: inline-block; } }

/* ---------- H7 art: iPhone mockup + App Store badge (replaces the latte dog) ---------- */
.hm-next-art { gap: 18px; }
.hm-phone { width: 248px; aspect-ratio: 9 / 19; padding: 9px; border-radius: 44px; background: #1d1b19; box-shadow: inset 0 0 0 2px #3a3633, 0 30px 60px -24px rgba(60, 40, 20, .45); }
.hm-screen { position: relative; height: 100%; padding: 12px 14px 0; border-radius: 36px; background: #fbf8f4; overflow: hidden; font-family: var(--sans); color: #2a2622; }
.hm-sb { display: flex; align-items: center; justify-content: space-between; height: 22px; font-size: 11px; }
.hm-sb span { font-size: 7px; letter-spacing: 1px; }
.hm-island { width: 68px; height: 20px; border-radius: 12px; background: #1d1b19; }
.hm-app-t { margin: 14px 0 10px; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.hm-ask { display: flex; gap: 9px; align-items: center; padding: 10px; border-radius: 14px 14px 0 0; background: #fff; border: 1px solid rgba(60,40,20,.08); border-bottom: 0; }
.hm-ask img { width: 26px; height: 26px; }
.hm-ask b, .hm-row b { display: block; font-size: 11.5px; line-height: 1.3; }
.hm-ask small, .hm-row small { display: block; margin-top: 2px; font-size: 10px; color: #8a8178; }
.hm-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 10px 10px; border-radius: 0 0 14px 14px; background: #fff; border: 1px solid rgba(60,40,20,.08); border-top: 0; }
.hm-btns span { padding: 6px 0; border-radius: 9px; background: #f2ede6; text-align: center; font-size: 11px; }
.hm-btns .ok { background: #2a2622; color: #fff; }
.hm-sec { margin: 14px 0 6px; font-size: 10.5px; font-weight: 600; color: #8a8178; text-transform: uppercase; letter-spacing: .06em; }
.hm-row { display: flex; gap: 9px; align-items: center; padding: 9px 2px; border-bottom: 1px solid rgba(60,40,20,.07); }
.hm-row i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.hm-row i.g { background: #2f9e5b; }
.hm-tab { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; padding: 10px 0 16px; background: rgba(255,255,255,.92); border-top: 1px solid rgba(60,40,20,.07); font-size: 10px; color: #a39a90; }
.hm-tab .on { color: var(--accent); font-weight: 600; }
/* "Coming soon on the App Store" in the usual App Store badge form (owner 2026-10-18): a black
   rounded badge, the Apple mark, a small line over "App Store". Not a link until the app is live. */
.hm-store { display: inline-flex; align-items: center; gap: 9px; height: 52px; padding: 0 18px 0 14px; border-radius: 12px; background: #000; box-shadow: 0 0 0 1px #a6a6a6; color: #fff; cursor: default; }
.hm-store svg { width: 24px; height: 29px; fill: currentColor; }
.hm-store > span { display: grid; text-align: left; line-height: 1; }
.hm-store small { font: 500 11px/1.1 -apple-system, system-ui, sans-serif; letter-spacing: .01em; }
.hm-store b { font: 600 21px/1.1 -apple-system, system-ui, sans-serif; letter-spacing: -.02em; }
[data-theme="dark"] .hm-store { box-shadow: 0 0 0 1px #5a5a5a; }
[data-theme="dark"] .hm-phone { box-shadow: inset 0 0 0 2px #4a4541, 0 30px 60px -24px rgba(0,0,0,.7); }
@media (max-width: 900px) { .hm-phone { width: 210px; } }
.hm-next .hm-screen p.hm-app-t { margin: 14px 0 10px; font-size: 22px; line-height: 1.1; font-weight: 700; color: #2a2622; }
.hm-next .hm-screen p.hm-sec { margin: 14px 0 4px; font-size: 10.5px; line-height: 1.2; font-weight: 600; color: #8a8178; }

/* ---------- Use cases grouped by who asks ---------- */
.m-uses-p b { display: block; margin-bottom: 4px; font: 11px var(--pixel); letter-spacing: .04em; color: var(--accent); }

/* ---------- H7 v2: three app screens (mockup/site-app-screens, app as of 2026-10-18), the Agent chat in front ---------- */
.hm-next-card { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 0; padding: 48px 44px 44px; }
.hm-next-copy > p:not(.eyebrow-s) { margin-left: auto; margin-right: auto; }
.hm-trio { display: flex; justify-content: center; align-items: center; margin: 40px 0 26px; }
.hm-ph { flex: none; padding: 7px; border-radius: 42px; background: #1d1b19; box-shadow: inset 0 0 0 2px #3a3633, 0 30px 60px -24px rgba(60, 40, 20, .45); }
.hm-ph img { display: block; width: 100%; height: auto; border-radius: 35px; }
.hm-ph.main { position: relative; z-index: 2; width: 260px; }
.hm-ph.side { width: 214px; opacity: .92; }
.hm-ph.side:first-child { margin-right: -34px; transform: rotate(-5deg) translateY(18px); }
.hm-ph.side:last-child { margin-left: -34px; transform: rotate(5deg) translateY(18px); }
.hm-next-foot { width: 100%; margin-top: 34px; }
.hm-next-foot .hm-feats { grid-template-columns: repeat(5, minmax(0, 1fr)); text-align: left; margin-top: 0; }
@media (max-width: 1000px) { .hm-next-foot .hm-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .hm-next-card { padding: 30px 18px; }
  /* The three phones stay fanned on phones too (owner 2026-10-18), scaled to the card width. */
  .hm-trio { margin: 28px 0 20px; }
  .hm-ph { padding: 4px; border-radius: 26px; }
  .hm-ph img { border-radius: 22px; }
  .hm-ph.main { width: 40vw; max-width: 200px; }
  .hm-ph.side { width: 33vw; max-width: 165px; }
  .hm-ph.side:first-child { margin-right: -11vw; transform: rotate(-5deg) translateY(12px); }
  .hm-ph.side:last-child { margin-left: -11vw; transform: rotate(5deg) translateY(12px); }
  .hm-next-foot .hm-feats { grid-template-columns: minmax(0, 1fr); }
}
[data-theme="dark"] .hm-ph { box-shadow: inset 0 0 0 2px #4a4541, 0 30px 60px -24px rgba(0, 0, 0, .7); }

/* ---------- H2 Demo v2: the left window looks like the real desktop apps ----------
   Look-alikes, not screenshots, so the demo can play. References (2026-10): the Claude desktop
   app (sidebar, Claude/Code switch, beige bubble, serif answer, spark) and Codex inside the
   ChatGPT desktop app (icon rail, "Codex" sidebar, "Called heyatu.ls" lines). Each app keeps
   its own colours in light and dark, so the page theme does not repaint them. */
.mcp-home .m-demo { max-width: 1240px; }
.m-appsw { display: flex; justify-content: center; gap: 6px; width: max-content; margin: 26px auto 0; padding: 4px; border-radius: 999px; background: var(--bg-alt); border: 1px solid var(--line); }
.m-appsw button { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 16px 0 12px; border: 0; border-radius: 999px; background: none; font: 500 14px var(--sans); color: var(--muted); cursor: pointer; }
.m-appsw button img { width: 18px; height: 18px; }
.m-appsw button.on { background: var(--card, #fff); color: var(--text); box-shadow: 0 1px 3px rgba(40, 30, 20, .12); }
.mcp-home .m-stage-app { grid-template-columns: minmax(0, 1.3fr) 48px minmax(0, 1.2fr); margin-top: 26px; }
.mcp-home .m-stage-app .m-app { height: 530px; }

.m-app { --bg: #faf9f5; --side: #f5f4ee; --ln: #e8e6dc; --tx: #141413; --tx2: #3d3d3a; --mu: #85837c; --bub: #f0eee6; --ip: #fff;
  position: relative; padding: 0; background: var(--bg) !important; border-color: rgba(31, 30, 29, .14); color: var(--tx); font-family: -apple-system, "SF Pro Text", "PingFang SC", system-ui, sans-serif; }
.m-app[data-app="chatgpt"] { --bg: #fff; --side: #f9f9f9; --ln: #ececec; --tx: #0d0d0d; --tx2: #2f2f2f; --mu: #8f8f8f; --bub: #f3f3f3; --ip: #fff; }
[data-theme="dark"] .m-app { --bg: #262624; --side: #1f1e1d; --ln: #3a3935; --tx: #faf9f5; --tx2: #dedcd1; --mu: #9c9a92; --bub: #141413; --ip: #30302e; border-color: #3a3935; }
[data-theme="dark"] .m-app[data-app="chatgpt"] { --bg: #212121; --side: #181818; --ln: #2f2f2f; --tx: #ececec; --tx2: #d4d4d4; --mu: #8f8f8f; --bub: #303030; --ip: #2a2a2a; }
.m-app .ap { display: none; height: 100%; }
.m-app[data-app="claude"] .ap-claude, .m-app[data-app="chatgpt"] .ap-chatgpt { display: flex; }
.m-app .ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ap-lights { display: inline-flex; gap: 7px; margin-right: 6px; }
.ap-lights i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; } .ap-lights i:nth-child(2) { background: #febc2e; } .ap-lights i:nth-child(3) { background: #28c840; }
.ap-side { display: flex; flex-direction: column; gap: 1px; width: 168px; flex: none; padding: 12px 8px; background: var(--side); border-right: 1px solid var(--ln); font-size: 12.5px; color: var(--tx2); overflow: hidden; }
.ap-item { display: flex; align-items: center; gap: 8px; min-height: 28px; padding: 0 8px; border-radius: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-item .ic { color: var(--mu); }
.ap-item.on { background: rgba(0, 0, 0, .055); color: var(--tx); }
[data-theme="dark"] .ap-item.on { background: rgba(255, 255, 255, .07); }
.ap-h { margin: 12px 8px 4px; font-size: 11.5px; color: var(--mu); }
.ap-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg); }
.ap-thread { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 9px; padding: 14px 22px; overflow: hidden; }
.ap-thread > * { flex-shrink: 0; animation: msg-in .35s cubic-bezier(.2, .8, .2, 1) both; }
.ap-ph { display: block; font-size: 13.5px; color: var(--mu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Claude desktop */
.ap-top { display: flex; align-items: center; gap: 10px; height: 22px; padding: 0 4px 0 6px; margin-bottom: 10px; color: var(--mu); }
.ap-top .ic:first-of-type { margin-left: auto; }
.cl-switch { display: grid; grid-template-columns: 1fr 1fr; margin: 0 2px 10px; padding: 3px; border-radius: 9px; background: rgba(0, 0, 0, .05); font-size: 12px; text-align: center; }
[data-theme="dark"] .cl-switch { background: rgba(255, 255, 255, .06); }
.cl-switch b { padding: 3px 0; border-radius: 7px; background: var(--ip); font-weight: 500; color: var(--tx); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.cl-switch span { padding: 3px 0; color: var(--mu); }
.cl-new { color: var(--tx); font-weight: 500; }
.cl-plus { display: grid; place-items: center; width: 20px; height: 20px; margin-left: -2px; border-radius: 50%; background: #c6613f; color: #fff; }
.cl-plus .ic { width: 13px; height: 13px; color: #fff; stroke-width: 2.2; }
.ap-user { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 8px 6px 0; border-top: 1px solid var(--ln); }
.ap-user i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #3d3d3a; color: #fff; font: 600 12px/1 var(--sans); font-style: normal; }
[data-theme="dark"] .ap-user i { background: #dedcd1; color: #262624; }
.ap-user span { display: flex; flex-direction: column; font-size: 12.5px; color: var(--tx); }
.ap-user small { font-size: 11px; color: var(--mu); }
.ap-head { display: flex; align-items: center; gap: 6px; height: 46px; flex: none; padding: 0 18px; font-size: 13.5px; color: var(--tx2); }
.ap-head b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-head .ic { color: var(--mu); }
.cl-me { align-self: flex-end; max-width: 84%; padding: 9px 14px; border-radius: 14px; background: var(--bub); font-size: 13.5px; line-height: 1.5; color: var(--tx); }
.cl-ai { align-self: stretch; font: 14.5px/1.6 ui-serif, Charter, "Bitstream Charter", Georgia, "PingFang SC", serif; font-variant-numeric: lining-nums; color: var(--tx); }
.cl-ai ul { margin: 4px 0 0; padding-left: 20px; }
.cl-tool { display: flex; align-items: center; gap: 8px; max-width: 100%; height: 30px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--ln); font-size: 12.5px; color: var(--mu); }
.cl-tool img { width: 16px; height: 16px; flex: none; }
.cl-tool span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--code); font-size: 12px; }
.cl-tool b { font-weight: 600; color: var(--tx2); }
.cl-tool em { flex: none; margin-left: auto; font-style: normal; font-size: 11.5px; }
.cl-tool:not(.ok) em { background: linear-gradient(90deg, var(--mu) 30%, var(--tx) 50%, var(--mu) 70%) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ap-shim 1.2s linear infinite; }
.cl-tool .ic { width: 14px; height: 14px; margin-right: -2px; }
.cl-spark { width: 22px; height: 22px; margin-top: -2px; }
.cl-input { flex: none; margin: 0 16px 14px; padding: 12px 14px 10px; border-radius: 18px; background: var(--ip); border: 1px solid var(--ln); box-shadow: 0 4px 16px -8px rgba(0, 0, 0, .12); }
.cl-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; color: var(--mu); }
.cl-row em { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; font-style: normal; font-size: 12.5px; color: var(--tx2); }
.cl-row em .ic { width: 13px; height: 13px; }
.cl-send { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #c6613f; color: #fff; opacity: .55; }
.cl-send .ic { width: 15px; height: 15px; stroke-width: 2.2; }
@keyframes ap-shim { to { background-position: -200% 0; } }

/* Narrow windows: the real apps hide the sidebar; so does the demo. */
@media (max-width: 1060px) { .ap-claude .ap-side { display: none; } }
@media (max-width: 860px) {
  .mcp-home .m-stage-app { grid-template-columns: minmax(0, 1fr); }
  .mcp-home .m-stage-app .m-app { height: 560px; }
  .mcp-home .m-stage-app .m-arrow small { white-space: nowrap; }
  .ap-head { padding: 0 14px; }
  .ap-thread { padding: 12px 14px; }
  .cl-input, .gp-input { margin: 0 10px 10px; }
}

/* ---------- H2 Demo: the computer as a MacBook Pro ----------
   Drawn in CSS so the log and the approval keep playing. Sizes follow the laptop width (.mb is a
   size container); the screen uses em from one clamped font size. Silver in light, space black in dark. */
.mb { container-type: inline-size; align-self: center; width: 100%; filter: drop-shadow(0 26px 30px rgba(60, 40, 20, .18)); }
.mb-lid { position: relative; width: 88cqw; margin: 0 auto; padding: 1.5cqw 1.5cqw 2.1cqw; border-radius: 3.4cqw 3.4cqw 1cqw 1cqw; background: #0b0b0c;
  box-shadow: 0 0 0 1.5px #c3c5c9, 0 0 0 2.5px #a4a7ac; }
.mb-screen { position: relative; aspect-ratio: 16 / 10.4; overflow: hidden; border-radius: 1.9cqw 1.9cqw .3cqw .3cqw; font-size: clamp(9px, 2.45cqw, 12.5px); line-height: 1.35;
  background: radial-gradient(120% 90% at 85% 10%, #ffd9a8 0%, transparent 55%), linear-gradient(160deg, #f6b98a 0%, #e5875e 40%, #b8607a 70%, #6d4aa8 100%);
  font-family: -apple-system, "SF Pro Text", "PingFang SC", system-ui, sans-serif; color: #1d1d1f; }
.mb-menu { position: relative; display: flex; align-items: center; gap: 1em; height: 1.85em; padding: 0 .9em; font-size: .92em; background: rgba(255, 255, 255, .3); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.mb-menu b { font-weight: 700; }
.mb-apple { width: .9em; height: 1.05em; fill: currentColor; }
.mb-notch { position: absolute; left: 50%; top: 0; width: 15%; height: 100%; transform: translateX(-50%); border-radius: 0 0 .5em .5em; background: #0b0b0c; }
.mb-r { display: flex; align-items: center; gap: .8em; margin-left: auto; }
.mb-r img { width: 1.15em; height: 1.15em; }
.mb-wifi { width: 1.1em; height: 1.1em; fill: currentColor; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.mb-wifi path { fill: none; }
.mb-win { position: absolute; left: 6.5%; right: 6.5%; top: 3em; bottom: 6.5%; display: flex; flex-direction: column; overflow: hidden; border-radius: .95em; background: rgba(255, 255, 255, .97);
  box-shadow: 0 1.4em 2.6em -1.2em rgba(40, 10, 30, .55), 0 0 0 .5px rgba(0, 0, 0, .18); }
.mb-tb { display: flex; align-items: center; gap: .55em; height: 2.4em; flex: none; padding: 0 .9em; border-bottom: 1px solid rgba(0, 0, 0, .07); }
.mb .ap-lights { gap: .5em; margin-right: .3em; }
.mb .ap-lights i { width: .9em; height: .9em; }
.mb-tb b { font-weight: 600; }
.mb-tb #m-state { margin-left: auto; font-size: .9em; color: #8e8e93; }
.mb .m-log { flex: 1; gap: .45em; padding: .7em; }
.mb .m-log li { grid-template-columns: 3.4em minmax(0, 1fr) auto; gap: .6em; padding: .5em .75em; border-radius: .6em; background: rgba(0, 0, 0, .04); font-size: 1em; }
.mb .m-log li.grant { grid-template-columns: 1fr auto; background: rgba(47, 158, 91, .1); }
.mb .m-log code { font-size: .95em; }
.mb .m-log span, .mb .m-log li.grant span { font-size: .92em; }
.mb .m-log em { font-size: .88em; }
/* The approval is a macOS notification that slides in from the right. */
.mb .m-ask { left: auto; right: .7em; top: 2.5em; width: 62%; display: grid; grid-template-columns: 2.3em minmax(0, 1fr); column-gap: .7em; padding: .8em .9em; border-radius: 1.15em;
  background: rgba(246, 246, 248, .9); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); border: .5px solid rgba(0, 0, 0, .12);
  box-shadow: 0 .9em 2em -.7em rgba(30, 10, 30, .5); font-size: 1em; color: #1d1d1f; opacity: 0; transform: translateX(115%); transition: transform .45s cubic-bezier(.2, .9, .2, 1), opacity .3s; }
.mb .m-ask.show { opacity: 1; transform: none; }
.mb-ask-ic { width: 2.3em; height: 2.3em; padding: .3em; border-radius: .6em; background: #fff; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .1); }
.mb .mb-ask-t { font-weight: 600; }
.mb .m-ask .code { margin-top: .2em; font-size: .95em; color: #6e6e73; }
.mb .m-ask .code span { font: 600 1em var(--code); letter-spacing: .1em; color: #1d1d1f; }
.mb .m-ask-b { grid-column: 1 / -1; gap: .45em; margin-top: .75em; }
.mb .m-ask-b span { flex: 1; padding: .38em 0; border-radius: .55em; background: rgba(0, 0, 0, .07); text-align: center; font-size: .95em; }
.mb .m-ask-b .ok { background: #0a84ff; color: #fff; }
.mb-base { position: relative; height: 2.5cqw; margin-top: -1px; border-radius: .5cqw .5cqw 50% 50% / .5cqw .5cqw 100% 100%; background: linear-gradient(#eceef0, #c9cbcf 45%, #9ea1a6); }
.mb-base i { position: absolute; left: 50%; top: 0; width: 15cqw; height: .9cqw; transform: translateX(-50%); border-radius: 0 0 1cqw 1cqw; background: linear-gradient(#a9acb1, #cdd0d3); }
[data-theme="dark"] .mb { filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .5)); }
[data-theme="dark"] .mb-lid { box-shadow: 0 0 0 1.5px #3b3c3f, 0 0 0 2.5px #2a2b2d; }
[data-theme="dark"] .mb-base { background: linear-gradient(#4a4b4f, #2f3033 45%, #1c1c1e); }
[data-theme="dark"] .mb-base i { background: linear-gradient(#1f1f21, #2c2d30); }
[data-theme="dark"] .mb-screen { color: #f5f5f7; background: radial-gradient(120% 90% at 85% 10%, #7a4a3a 0%, transparent 55%), linear-gradient(160deg, #5a3a34 0%, #6b3348 45%, #2e2350 75%, #15142a 100%); }
[data-theme="dark"] .mb-menu { background: rgba(0, 0, 0, .28); }
[data-theme="dark"] .mb-r img { filter: invert(1); }
[data-theme="dark"] .mb-win { background: rgba(30, 30, 32, .97); box-shadow: 0 1.4em 2.6em -1.2em rgba(0, 0, 0, .7), 0 0 0 .5px rgba(255, 255, 255, .14); }
[data-theme="dark"] .mb-tb { border-color: rgba(255, 255, 255, .08); }
[data-theme="dark"] .mb .m-log li { background: rgba(255, 255, 255, .05); }
[data-theme="dark"] .mb .m-log li.grant { background: rgba(63, 185, 80, .14); }
[data-theme="dark"] .mb .m-ask { background: rgba(44, 44, 46, .9); border-color: rgba(255, 255, 255, .12); color: #f5f5f7; }
[data-theme="dark"] .mb .m-ask .code { color: #a1a1a6; }
[data-theme="dark"] .mb .m-ask .code span { color: #f5f5f7; }
[data-theme="dark"] .mb .m-ask-b span { background: rgba(255, 255, 255, .12); }
[data-theme="dark"] .mb .m-ask-b .ok { background: #0a84ff; color: #fff; }
.mcp-home .m-stage-app .m-arrow small { left: -24px; right: -24px; white-space: nowrap; }
/* Small laptops: menu items would run under the notch, and the window needs a little more room. */
@container (max-width: 360px) {
  .mb-menu > span:not(.mb-r) { display: none; }
  .mb-win { left: 4%; right: 4%; top: 2.6em; bottom: 4%; }
  .mb .m-log { gap: .35em; padding: .5em; }
  .mb .m-log li { padding: .4em .6em; }
  .mb .m-ask { width: 74%; }
}
@media (max-width: 860px) {
  .mb { width: min(100%, 540px); margin: 0 auto; }
  .mb-lid { width: 92cqw; }
}

/* The scrolled nav is solid on this page. At 80 % opacity, headings and cards showed through it,
   and iOS 26 Safari only tints the status-bar strip above a fixed header whose colour is opaque. */
.mcp-home .nav.scrolled, [data-theme="dark"] .mcp-home .nav.scrolled { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
/* iOS 26 Safari tints the status-bar strip with the colour of the fixed header as the page loads,
   and keeps that colour (checked in the iOS 26.5 Simulator, 2026-10-18). A header that is clear at
   load and solid only after a scroll leaves the strip see-through, so page text shows above the nav.
   The nav is therefore solid from the start, in the page colour; only the line below it waits for a
   scroll. home-mcp.js makes Safari read the colour again after a theme change.
   Safari reads the top-most fixed layer, so the full-page grain (style.css body::after, z-index 100)
   sits under the nav on this page; otherwise Safari sees the clear grain and tints nothing. */
.mcp-home .nav, [data-theme="dark"] .mcp-home .nav { background: var(--bg); transition: box-shadow .2s; }
body.mcp-home::after { z-index: 40; }

/* ---------- H2 Demo v3: the remote story (2026-10-17) ----------
   Default is the Claude phone app; Claude desktop and Codex are "another computer".
   The scene line under the switch says where the person is. */
.m-scene { margin: 12px 0 0; text-align: center; font: 12.5px var(--pixel); letter-spacing: .02em; color: var(--accent); }
.m-app[data-app="phone"] .ap-phone { display: flex; }
.m-app[data-app="phone"] { background: transparent !important; border-color: transparent; box-shadow: none; overflow: visible; }
.ap-phone { justify-content: center; align-items: center; }
.mph { box-sizing: border-box; flex: none; height: 100%; width: 248px; max-width: 100%; padding: 9px; border-radius: 50px; background: #121214;
  box-shadow: 0 0 0 1.5px #3a3a3d, 0 0 0 3px #c9cbcf, 0 34px 50px -26px rgba(60, 40, 20, .5); }
[data-theme="dark"] .mph { box-shadow: 0 0 0 1.5px #3a3a3d, 0 0 0 3px #2b2c2f, 0 34px 50px -26px rgba(0, 0, 0, .7); }
.mph-scr { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 41px; background: var(--bg); }
.mph-status { position: relative; display: flex; align-items: center; justify-content: space-between; height: 44px; flex: none; padding: 6px 15px 0 28px; color: var(--tx); }
.mph-status b { font: 600 14px -apple-system, system-ui, sans-serif; }
.mph-status span { display: flex; align-items: center; gap: 4px; }
.mph-status svg { height: 10px; width: auto; fill: currentColor; }
.mph-status .ic { width: 14px; height: 14px; fill: none; stroke-width: 2.2; }
.mph-status svg[viewBox="0 0 27 13"] { height: 11px; }
.mph-island { position: absolute; left: 50%; top: 10px; width: 72px; height: 22px; border-radius: 15px; background: #000; transform: translateX(-50%); }
.mph-top { display: flex; align-items: center; gap: 8px; height: 40px; flex: none; padding: 0 16px; color: var(--mu); }
.mph-top b { flex: 1; min-width: 0; text-align: center; font-size: 13.5px; font-weight: 600; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mph-top .ic { width: 19px; height: 19px; }
.ap-phone .ap-thread { gap: 7px; padding: 6px 13px 8px; }
.ap-phone .cl-me { max-width: 88%; padding: 7px 11px; border-radius: 16px; font-size: 12.5px; }
.ap-phone .cl-ai { font-size: 13px; line-height: 1.5; }
.ap-phone .cl-tool { height: 27px; gap: 6px; padding: 0 8px; }
.ap-phone .cl-tool span { font-size: 10.5px; }
.ap-phone .cl-tool img { width: 14px; height: 14px; }
.ap-phone .cl-tool em { font-size: 10.5px; }
.ap-phone .cl-tool .ic { display: none; }
.ap-phone .cl-spark { width: 18px; height: 18px; }
.mph-input { display: flex; align-items: center; gap: 8px; flex: none; margin: 2px 10px 6px; padding: 6px 6px 6px 12px; border-radius: 24px; background: var(--ip); border: 1px solid var(--ln); color: var(--mu); }
.mph-input .ap-ph { flex: 1; min-width: 0; font-size: 13px; }
.mph-input .cl-send { width: 30px; height: 30px; border-radius: 50%; }
.mph-home { display: block; flex: none; width: 36%; height: 5px; margin: 3px auto 8px; border-radius: 3px; background: var(--tx); opacity: .85; }
@media (max-width: 440px) {
  .m-appsw { gap: 2px; }
  .m-appsw button { gap: 5px; height: 32px; padding: 0 11px; font-size: 13px; }
  .m-appsw button img { display: none; }
}

/* H4 Uses: scene cards. */
.m-scenes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 36px 0 0; padding: 0; list-style: none; }
.m-scenes li { display: flex; flex-direction: column; padding: 20px 22px; border-radius: 20px; }
.sc-tag { font: 11.5px var(--pixel); letter-spacing: .04em; color: var(--accent); }
.m-scenes q { display: block; margin-top: 10px; font-size: 16.5px; line-height: 1.45; font-weight: 600; color: var(--text); quotes: "“" "”"; }
.m-scenes p { margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed var(--line-2); font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.m-toolstrip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 8px; max-width: 760px; margin: 22px auto 0; font-size: 13px; color: var(--muted); }
.m-toolstrip .ts-h { width: 100%; margin-bottom: 2px; text-align: center; font-size: 12.5px; color: var(--faint); }
.m-toolstrip .ts-g { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; }
.m-toolstrip .dot { width: 8px; height: 8px; border-radius: 50%; }
.m-toolstrip .dot.look { background: var(--green); } .m-toolstrip .dot.act { background: var(--accent); }
.m-toolstrip code { padding: 3px 8px; border-radius: 7px; background: var(--bg-alt); font: 12px var(--code); color: var(--text-2); }
.m-fine code { font: 12px var(--code); color: var(--text-2); }
.m-faq p code { font: 13px var(--code); }

@media (max-width: 900px) { .m-scenes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .m-scenes { grid-template-columns: minmax(0, 1fr); }
}
/* The phone is 9:19.2 of the window height (530 px; 560 px on narrow screens). A fixed width
   centres it in every engine; height plus aspect-ratio did not centre in Chromium. */
@media (max-width: 860px) { .mph { width: 262px; } }
@media (max-width: 360px) { .m-appsw button { padding: 0 4px; font-size: 12px; white-space: nowrap; } }

/* ChatGPT on the web (chatgpt.com in a browser window): sidebar, "ChatGPT" model menu,
   grey user bubble, plain answer, Hey Atu call cards, the Hey Atu plugin chip in the composer. */
.ap-chatgpt, .ap-claude { flex-direction: column; }
.gp-bar { display: flex; align-items: center; gap: 10px; height: 40px; flex: none; padding: 0 14px; border-bottom: 1px solid var(--ln); background: var(--side); color: var(--mu); }
.gp-url { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: min(46%, 260px); height: 26px; margin: 0 auto; transform: translateX(-30px); border-radius: 8px; background: rgba(0, 0, 0, .05); font-size: 12.5px; color: var(--tx2); }
[data-theme="dark"] .gp-url { background: rgba(255, 255, 255, .07); }
.gp-lock { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }
.gp-body { flex: 1; min-height: 0; display: flex; }
.gp-h { display: flex; align-items: center; justify-content: space-between; padding: 0 6px 10px; color: var(--mu); }
.gp-logo { width: 22px; height: 22px; }
[data-theme="dark"] .gp-logo, [data-theme="dark"] .m-appsw img.mono { filter: invert(1); }
.ap-chatgpt .ap-user i { background: #0d0d0d; }
[data-theme="dark"] .ap-chatgpt .ap-user i { background: #ececec; color: #212121; }
.gp-head { display: flex; align-items: center; gap: 4px; height: 46px; flex: none; padding: 0 16px; font-size: 15px; color: var(--tx); }
.gp-head b { font-weight: 500; }
.gp-head .ic { color: var(--mu); }
.gp-me { align-self: flex-end; max-width: 80%; padding: 9px 14px; border-radius: 18px; background: var(--bub); font-size: 13.5px; line-height: 1.5; color: var(--tx); }
.gp-ai { font-size: 14px; line-height: 1.6; color: var(--tx); }
.gp-ai ul { margin: 4px 0 0; padding-left: 20px; }
.gp-tool { display: flex; align-items: center; gap: 8px; max-width: 100%; height: 32px; padding: 0 12px 0 8px; border-radius: 12px; border: 1px solid var(--ln); font-size: 12.5px; color: var(--mu); }
.gp-tool img { width: 18px; height: 18px; flex: none; padding: 2px; border-radius: 5px; background: #fff; box-shadow: 0 0 0 1px var(--ln); }
.gp-tool span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--code); font-size: 12px; }
.gp-tool b { margin-right: 4px; font-family: -apple-system, system-ui, sans-serif; font-weight: 600; color: var(--tx); }
.gp-tool em { flex: none; margin-left: auto; font-style: normal; font-size: 11.5px; }
.gp-tool.ok em { color: var(--green); }
.gp-tool:not(.ok) em { background: linear-gradient(90deg, var(--mu) 30%, var(--tx) 50%, var(--mu) 70%) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ap-shim 1.2s linear infinite; }
.gp-input { flex: none; margin: 0 16px 14px; padding: 12px 12px 10px 16px; border-radius: 26px; background: var(--ip); border: 1px solid var(--ln); box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .12); }
.gp-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; color: var(--mu); }
.gp-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 6px; border-radius: 13px; background: rgba(10, 132, 255, .1); font-style: normal; font-size: 12.5px; color: #0a6fdc; }
[data-theme="dark"] .gp-chip { background: rgba(10, 132, 255, .18); color: #7ab7ff; }
.gp-chip img { width: 16px; height: 16px; }
.gp-send { display: grid; place-items: center; width: 30px; height: 30px; margin-left: auto; border-radius: 50%; background: var(--tx); color: var(--bg); opacity: .35; }
.gp-send .ic { width: 15px; height: 15px; stroke-width: 2.2; }
@media (max-width: 1060px) { .ap-chatgpt .ap-side { display: none; } .gp-url { transform: none; } }
@media (max-width: 860px) { .gp-url { width: auto; padding: 0 12px; } }
/* Four app buttons: two rows of two on narrow screens. */
@media (max-width: 600px) {
  .m-appsw { display: grid; grid-template-columns: 1fr 1fr; width: min(100%, 380px); border-radius: 20px; }
  .m-appsw button { justify-content: center; }
}

/* Demo v4 (2026-10-17): the launch-plan entry scenarios. Computer first (ChatGPT and Claude on the
   web, S3), then the Claude phone app; Codex is not a core user (S4) and is not in the demo. */
.cl-word { font: 600 17px ui-serif, Georgia, serif; color: var(--tx); }
.ap-claude .ap-top { margin-bottom: 12px; }
.ap-claude .ap-top .ic:first-of-type { margin-left: auto; }
.m-appsw { gap: 4px; }
.sw-g { display: inline-flex; align-items: center; gap: 2px; }
.sw-g + .sw-g { padding-left: 6px; margin-left: 2px; border-left: 1px solid var(--line-2); }
.sw-l { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px 0 8px; font: 11px var(--pixel); letter-spacing: .03em; color: var(--faint); white-space: nowrap; }
.sw-l svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 600px) {
  .m-appsw { display: flex; flex-direction: column; align-items: stretch; width: min(100%, 360px); gap: 4px; border-radius: 20px; }
  .sw-g { display: grid; grid-template-columns: 64px 1fr 1fr; }
  .sw-g + .sw-g { padding: 4px 0 0; margin: 0; border-left: 0; border-top: 1px solid var(--line-2); }
  .sw-g:last-child { grid-template-columns: 64px 1fr; }
  .sw-l { padding: 0 4px; }
}
/* Uses: two groups, at the desk and away from it. */
.m-scg2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 36px; }
.scg-h { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 17px; color: var(--text); }
.scg-h i { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 11px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.scg-h svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.scg-h small { display: block; font-size: 12.5px; font-weight: 400; color: var(--muted); }
.m-scg .m-scenes { grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0; }
.m-scg .m-scenes li { padding: 16px 18px; }
.m-scg .m-scenes q { margin-top: 6px; font-size: 15.5px; }
.m-scg .m-scenes p { margin-top: 8px; padding-top: 8px; }
@media (max-width: 760px) { .m-scg2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 380px) {
  .cl-input, .gp-input { padding: 9px 12px 8px; }
  .cl-row, .gp-row { margin-top: 8px; }
  .m-app .ap-thread { gap: 7px; }
}

/* ---------- Pictures in the text sections (2026-10-17) ----------
   From the iOS home page: small UI pictures in cards (Details), the three-node flow (Security). */

/* Uses: text left, a small picture of the result right. */
.m-scg .m-scenes li { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 16px; align-items: center; }
.sc-txt { min-width: 0; }
.sv { display: grid; gap: 5px; align-content: center; min-height: 86px; padding: 10px; border-radius: 12px; background: var(--bg-alt); font-size: 11.5px; color: var(--text-2); }
.sv code { display: block; font: 10.5px/1.45 var(--code); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-fold span { display: flex; align-items: center; gap: 6px; padding: 3px 7px; border-radius: 7px; background: var(--card); }
.sv-fold svg { width: 14px; height: 14px; flex: none; fill: color-mix(in srgb, var(--accent) 25%, transparent); stroke: var(--accent); stroke-width: 1.5; }
.sv-fold em { margin-left: auto; font-style: normal; color: var(--faint); }
.sv-term { background: #1d1b19; color: #d9d3cc; }
.sv-term .bad { color: #ff7b72; } .sv-term .good { color: #56d364; } .sv-term .dim { color: #8b847c; }
.sv-ren code:nth-child(odd) { color: var(--faint); }
.sv-ren code:nth-child(even) { margin-bottom: 3px; color: var(--green); }
.sv-num span { display: flex; align-items: center; gap: 5px; color: var(--muted); }
.sv-num svg { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; }
.sv-num b { font: 400 22px/1.1 var(--pixel); color: var(--accent); }
.sv-tab { gap: 2px; }
.m-scenes .sv-tab p { display: flex; justify-content: space-between; margin: 0; padding: 0; border: 0; font-size: 11.5px; color: var(--text-2); }
.sv-tab p span:last-child { font-family: var(--code); font-size: 10.5px; }
.m-scenes .sv-tab p.t { margin-top: 3px; padding-top: 4px; border-top: 1px solid var(--line-2); font-weight: 600; color: var(--text); }
.sv-git { grid-template-columns: repeat(5, auto); justify-content: space-between; align-items: center; position: relative; padding: 14px 16px 10px; }
.sv-git::before { content: ""; position: absolute; left: 20px; right: 20px; top: 20px; height: 2px; background: color-mix(in srgb, var(--accent) 35%, transparent); }
.sv-git i { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 2.5px var(--accent); }
.sv-git small { grid-column: 1 / -1; margin-top: 10px; text-align: center; font-size: 11px; color: var(--muted); }
@media (max-width: 420px) {
  .m-scg .m-scenes li { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .sv { min-height: 0; }
}

/* Setup: each step ends in a picture of what the person sees. */
.m-steps-v li { display: flex; flex-direction: column; }
.m-steps-v .mk { margin-top: auto; padding-top: 18px; }
.mk-term > *, .mk-add > *, .mk-alert { box-sizing: border-box; }
.mk-term { display: block; }
.mk-term .mk-tb, .mk-term code { background: #1d1b19; }
.mk-tb { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 12px 12px 0 0; border-bottom: 1px solid #2e2b28; }
.mk-tb i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; } .mk-tb i:nth-child(2) { background: #febc2e; } .mk-tb i:nth-child(3) { background: #28c840; }
.mk-tb span { margin-left: auto; margin-right: auto; transform: translateX(-16px); font-size: 11px; color: #8b847c; }
.mk-term code { display: block; padding: 2px 12px; font: 11px/1.6 var(--code); color: #d9d3cc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-term code:nth-of-type(1) { padding-top: 10px; } .mk-term code:last-child { padding-bottom: 10px; border-radius: 0 0 12px 12px; }
.mk-term code b { font-weight: 400; color: #8b847c; } .mk-term .dim { color: #8b847c; } .mk-term .good { color: #56d364; }
.mk-add { display: grid; gap: 8px; }
.mk-add .m-addr { margin-top: 0; }
.mk-app { display: flex; align-items: center; gap: 10px; margin: 0; padding: 9px 12px; border-radius: 12px; background: var(--bg-alt); }
.mk-app img { width: 22px; height: 22px; flex: none; }
[data-theme="dark"] .mk-app img.mono { filter: invert(1); }
.mk-app span { min-width: 0; flex: 1; }
.mk-app b { display: block; font-size: 13px; color: var(--text); }
.mk-app small { display: block; font-size: 11.5px; line-height: 1.4; color: var(--muted); }
.mk-app em { flex: none; padding: 2px 8px; border-radius: 99px; background: var(--card); font: 10.5px var(--pixel); font-style: normal; color: var(--accent); }
.mk-alert { display: flex; flex-direction: column; align-items: center; margin-top: auto; padding: 16px 14px 12px; border-radius: 16px; background: #ecebea; text-align: center; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .35), inset 0 0 0 .5px rgba(0, 0, 0, .12); color: #1d1d1f; font-family: -apple-system, "SF Pro Text", "PingFang SC", system-ui, sans-serif; }
.m-steps-v .mk-alert { margin-top: auto; }
.m-steps-v li > p + .mk-alert { margin-top: auto; }
.mk-alert img { width: 40px; height: 40px; }
.mk-alert b { margin-top: 8px; font-size: 13px; }
.mk-alert small { margin-top: 3px; font-size: 11px; color: #6e6e73; }
.mk-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; margin-top: 12px; }
.mk-btns span { padding: 5px 0; border-radius: 7px; background: #fff; font-size: 12px; box-shadow: 0 .5px 1px rgba(0, 0, 0, .15); }
.mk-btns .ok { background: #0a84ff; color: #fff; }
[data-theme="dark"] .mk-alert { background: #2c2c2e; color: #f5f5f7; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .7), inset 0 0 0 .5px rgba(255, 255, 255, .14); }
[data-theme="dark"] .mk-alert small { color: #a1a1a6; }
[data-theme="dark"] .mk-btns span { background: #48484a; }
[data-theme="dark"] .mk-btns .ok { background: #0a84ff; }
.m-steps-v .mk-alert { padding-top: 16px; }

/* Security: AI app → relay → your computer. A call goes right, its result comes back. */
.m-flow { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 860px; margin: 36px auto 0; padding: 66px 22px 24px; text-align: center; }
.fl-track { position: absolute; left: calc(100% / 6 + 22px); right: calc(100% / 6 + 22px); top: 92px; height: 2px; }
.fl-line { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--line-2) 0 6px, transparent 6px 12px); }
.fl-pkt { position: absolute; top: -60px; left: 0; padding: 3px 9px; border-radius: 99px; background: var(--text); color: var(--bg); white-space: nowrap; opacity: 0; transform: translateX(-50%); }
.fl-pkt code { font: 10.5px var(--code); }
.fl-pkt.back { background: var(--green); color: #fff; }
.fl-pkt.go { animation: fl-go 6s cubic-bezier(.45, .05, .3, 1) infinite; }
.fl-pkt.back { animation: fl-back 6s cubic-bezier(.45, .05, .3, 1) infinite; }
@keyframes fl-go { 0% { left: 0; transform: translateX(0); opacity: 0; } 6% { opacity: 1; } 40% { left: 100%; transform: translateX(-100%); opacity: 1; } 46%, 100% { left: 100%; transform: translateX(-100%); opacity: 0; } }
@keyframes fl-back { 0%, 50% { left: 100%; transform: translateX(-100%); opacity: 0; } 56% { opacity: 1; } 90% { left: 0; transform: translateX(0); opacity: 1; } 96%, 100% { left: 0; transform: translateX(0); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fl-pkt.go { animation: none; left: 50%; transform: translateX(-50%); opacity: 1; } .fl-pkt.back { display: none; } }
.fl-node { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 0 6px; }
.fl-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--card); box-shadow: 0 0 0 1px var(--line-2), 0 6px 16px -10px rgba(60, 40, 20, .4); color: var(--text-2); }
.fl-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fl-apps { gap: 0; grid-auto-flow: column; width: 72px; border-radius: 26px; }
.fl-apps img { width: 22px; height: 22px; }
[data-theme="dark"] .fl-apps img.mono { filter: invert(1); }
.fl-node.relay .fl-ic { border: 1.5px dashed var(--line-2); box-shadow: none; background: var(--bg); color: var(--muted); }
.fl-node.me .fl-ic { background: color-mix(in srgb, var(--accent) 12%, var(--card)); box-shadow: 0 0 0 1.5px var(--accent); color: var(--accent); }
.fl-node b { margin-top: 12px; font-size: 15px; color: var(--text); }
.fl-node small { margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.fl-node em { margin-top: 8px; padding: 3px 10px; border-radius: 99px; background: var(--bg-alt); font: 11px var(--pixel); font-style: normal; letter-spacing: .02em; color: var(--text-2); }
.fl-node.me em { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.ctl-ic { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 12px; border-radius: 11px; background: var(--bg-alt); color: var(--accent); }
.ctl-ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 640px) {
  .m-flow { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 24px 18px; }
  .fl-track { top: 76px; }
  .fl-track { left: 50%; right: auto; top: 76px; bottom: 120px; width: 2px; height: auto; }
  .fl-line { background: repeating-linear-gradient(180deg, var(--line-2) 0 6px, transparent 6px 12px); }
  .fl-pkt { display: none; }
  .fl-node { padding: 0; }
  .fl-node .fl-ic, .fl-node b, .fl-node small, .fl-node em { position: relative; z-index: 1; }
  .fl-node small, .fl-node b { padding: 0 8px; background: var(--card); }
}

/* ---------- Micro motion for the small pictures (home-mcp.js adds html.mo and .in) ----------
   Only with html.mo do the first frames hide anything, so no script or reduced motion shows the
   finished pictures. Each picture plays once when it enters the view and again when it comes back. */
.mo .sv-fold span, .mo .sv-term code, .mo .sv-ren code:nth-child(even), .mo .sv-tab p, .mo .sv-num span, .mo .sv-git small,
.mo .mk-term code:not(:first-of-type), .mo .mk-app { opacity: 0; transform: translateY(5px); transition: opacity .35s ease, transform .35s ease; }
.mo .in .sv-fold span, .mo .in.sv-term code, .mo .in.sv-ren code:nth-child(even), .mo .in.sv-tab p, .mo .in.sv-num span, .mo .in.sv-git small,
.mo .in.mk-term code, .mo .in .mk-app, .mo .in.sv-fold span { opacity: 1; transform: none; }
.mo .sv-fold.in span:nth-child(2) { transition-delay: .12s; } .mo .sv-fold.in span:nth-child(3) { transition-delay: .24s; }
/* Tests: fail, the edit, then pass, with a cursor on the last line. */
.mo .sv-term.in code:nth-child(2) { transition-delay: .55s; } .mo .sv-term.in code:nth-child(3) { transition-delay: 1.15s; }
.mo .sv-term.in code.good::after { content: "▍"; margin-left: 3px; color: #8b847c; animation: mo-blink 1s steps(1) 1.5s infinite; }
@keyframes mo-blink { 50% { opacity: 0; } }
/* Rename: each old name is struck through, then the new name appears. */
.mo .sv-ren s { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 55% / 0 1px no-repeat; transition: background-size .45s ease; }
.mo .sv-ren.in s { background-size: 100% 1px; }
.mo .sv-ren.in code:nth-child(3) s { transition-delay: .7s; }
.mo .sv-ren.in code:nth-child(2) { transition-delay: .4s; } .mo .sv-ren.in code:nth-child(4) { transition-delay: 1.1s; }
/* Invoices: rows one by one, then the total counts up. */
.mo .sv-tab.in p:nth-child(2) { transition-delay: .12s; } .mo .sv-tab.in p:nth-child(3) { transition-delay: .24s; } .mo .sv-tab.in p.t { transition-delay: .4s; }
/* Thesis: the line draws, the five commits pop in. */
.mo .sv-git::before { transform: scaleX(0); transform-origin: left; transition: transform .9s ease; }
.mo .sv-git.in::before { transform: none; }
.mo .sv-git i { transform: scale(0); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.mo .sv-git.in i { transform: none; }
.mo .sv-git.in i:nth-child(2) { transition-delay: .18s; } .mo .sv-git.in i:nth-child(3) { transition-delay: .36s; }
.mo .sv-git.in i:nth-child(4) { transition-delay: .54s; } .mo .sv-git.in i:nth-child(5) { transition-delay: .72s; }
.mo .sv-git.in small { transition-delay: .95s; }
/* Setup 1: the command types itself, then the sign-in line and the check. */
.mo .mk-term code:first-of-type { clip-path: inset(0 100% 0 0); }
.mo .mk-term.in code:first-of-type { clip-path: inset(0 0 0 0); transition: clip-path 1.3s steps(34); }
.mo .mk-term.in code:nth-of-type(2) { transition-delay: 1.5s; } .mo .mk-term.in code:nth-of-type(3) { transition-delay: 2.4s; }
/* Setup 2: Copy is pressed, then the two apps slide in. */
.mo .mk-add.in .m-addr span { animation: mo-press .5s ease .35s; }
@keyframes mo-press { 40% { transform: scale(.9); background: color-mix(in srgb, var(--accent) 20%, var(--card)); } }
.mo .mk-add.in .mk-app:nth-of-type(1) { transition-delay: .7s; } .mo .mk-add.in .mk-app:nth-of-type(2) { transition-delay: .85s; }
/* Setup 3: the window pops up, then Allow is pressed. */
.mo .mk-alert { opacity: 0; transform: translateY(8px) scale(.94); transition: opacity .35s ease, transform .45s cubic-bezier(.2, 1.3, .4, 1); }
.mo .mk-alert.in { opacity: 1; transform: none; }
.mo .mk-alert.in .ok { animation: mo-allow .6s ease 1.3s; }
@keyframes mo-allow { 35% { transform: scale(.92); filter: brightness(.85); } 70% { box-shadow: 0 0 0 5px rgba(10, 132, 255, .25); } }
/* The dark pictures need an edge on dark cards. */
[data-theme="dark"] .sv-term, [data-theme="dark"] .mk-term { border-radius: 12px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }

/* ---------- 2026-10-17 owner review ---------- */
/* Hub: each task has a 3D picture (generated, same style as the home page words). */
.hub-targets li { flex-direction: column; gap: 8px; min-height: 0; padding: 16px 12px 14px; text-align: center; transition: transform .25s ease, box-shadow .25s ease; }
.hub-targets li img { width: 76px; height: 76px; object-fit: contain; filter: drop-shadow(0 10px 12px rgba(90, 60, 30, .18)); transition: transform .35s cubic-bezier(.3, 1.5, .5, 1); }
.hub-targets li:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -20px rgba(90, 60, 30, .45); }
.hub-targets li:hover img { transform: translateY(-3px) rotate(-4deg) scale(1.05); }
[data-theme="dark"] .hub-targets li img { filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .5)); }
@media (max-width: 640px) {
  .hub-targets li { justify-content: center; padding: 12px 8px; }
  .hub-targets li img { width: 60px; height: 60px; }
}

/* Demo: two phones (Claude app, ChatGPT app) and the Mac at home. */
.mcp-home .m-stage-remote { grid-template-columns: 300px 80px minmax(0, 1fr); max-width: 1000px; margin-left: auto; margin-right: auto; }
.m-col { display: grid; justify-items: center; gap: 14px; min-width: 0; }
.m-col .mb { width: 100%; }
.m-where { display: flex; align-items: center; gap: 8px; margin: 0; font: 12px var(--pixel); letter-spacing: .03em; color: var(--muted); }
.m-where img { width: 34px; height: 34px; object-fit: contain; }
.m-where b { font-weight: 400; color: var(--accent); }
.sw-soon { margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, transparent); font: 10px var(--pixel); color: var(--accent); }
.m-app[data-app="gphone"] { --bg: #fff; --side: #f9f9f9; --ln: #ececec; --tx: #0d0d0d; --tx2: #2f2f2f; --mu: #8f8f8f; --bub: #f4f4f4; --ip: #fff;
  background: transparent !important; border-color: transparent; box-shadow: none; overflow: visible; }
[data-theme="dark"] .m-app[data-app="gphone"] { --bg: #212121; --side: #181818; --ln: #2f2f2f; --tx: #ececec; --tx2: #d4d4d4; --mu: #9b9b9b; --bub: #303030; --ip: #303030; }
.m-app[data-app="gphone"] .ap-gphone { display: flex; }
.ap-gphone { justify-content: center; align-items: center; }
.ap-gphone .mph-scr { font-family: -apple-system, "SF Pro Text", "PingFang SC", system-ui, sans-serif; }
/* ChatGPT for iOS (2026-10): sidebar icon, "ChatGPT ›" title, new-chat icon; grey bubble; plain answer;
   a round composer with +, the app chip, mic and the black voice button. */
.gph-top { display: flex; align-items: center; justify-content: space-between; height: 40px; flex: none; padding: 0 16px; color: var(--tx); }
.gph-top b { display: inline-flex; align-items: center; gap: 1px; font-size: 15px; font-weight: 600; }
.gph-top b .ic { width: 14px; height: 14px; color: var(--mu); stroke-width: 2.2; }
.gph-top > .ic { width: 20px; height: 20px; stroke-width: 1.8; }
.ap-gphone .ap-thread { gap: 7px; padding: 6px 13px 8px; }
.ap-gphone .gp-me { max-width: 86%; padding: 8px 12px; border-radius: 18px; font-size: 12.5px; }
.ap-gphone .gp-ai { font-size: 13px; line-height: 1.5; }
.ap-gphone .gp-ai ul { padding-left: 17px; }
.ap-gphone .gp-tool { height: 28px; gap: 6px; padding: 0 9px 0 6px; border-radius: 10px; }
.ap-gphone .gp-tool span { font-size: 10.5px; }
.ap-gphone .gp-tool em { font-size: 10.5px; }
.ap-gphone .gp-tool img { width: 16px; height: 16px; }
.gph-input { flex: none; margin: 2px 9px 6px; padding: 9px 9px 7px 13px; border-radius: 24px; background: var(--ip); border: 1px solid var(--ln); box-shadow: 0 2px 10px -4px rgba(0, 0, 0, .12); }
.gph-input .ap-ph { font-size: 13px; }
.gph-row { display: flex; align-items: center; gap: 7px; margin-top: 8px; color: var(--tx2); }
.gph-plus { display: grid; place-items: center; width: 26px; height: 26px; margin-left: -4px; border-radius: 50%; border: 1px solid var(--ln); }
.gph-plus .ic { width: 14px; height: 14px; }
.gph-row .gp-chip { height: 24px; padding: 0 8px 0 4px; font-size: 11.5px; }
.gph-mic { width: 17px !important; height: 17px !important; margin-left: auto; color: var(--tx2); }
.gph-voice { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--tx); color: var(--bg); }
.gph-voice .ic { width: 15px; height: 15px; stroke-width: 2.2; }
@media (max-width: 860px) {
  .mcp-home .m-stage-remote { grid-template-columns: minmax(0, 1fr); }
  .mcp-home .m-stage-remote .m-app { height: 540px; }
}

/* Pricing, shown once: the plan card carries the early-access badge, the trial line and the dog. */
.plan-wrap { position: relative; padding-top: 0; }
.plan-dog { position: absolute; z-index: 0; right: 32px; top: -118px; width: 130px; filter: drop-shadow(0 18px 24px rgba(90, 60, 30, .2)); pointer-events: none; }
.plan-wrap .plan { position: relative; z-index: 1; }
.plan-wrap .badge { top: 18px; right: 18px; }
.plan-wrap .plan-name, .plan-wrap .plan-price { padding-right: 84px; }
.plan-was { margin-right: 6px; font-size: 24px; font-weight: 500; color: var(--faint); text-decoration-thickness: 2px; }
.plan-trial { display: inline-block; margin: 14px 0 0; padding: 5px 12px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent); font-size: 13.5px; color: var(--text-2); }
.plan-trial b { font: 400 13.5px var(--pixel); color: var(--accent); }
.plan-more { margin: 14px 0 0; text-align: center; font-size: 14px; }
.plan-more a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.plan-more a:hover { color: var(--accent); }
.mcp-home .sp-price { margin-top: 160px; }
@media (max-width: 900px) { .plan-wrap { margin-top: 110px; } .mcp-home .sp-price { margin-top: 104px; } }
@media (max-width: 420px) { .plan-wrap .plan-name, .plan-wrap .plan-price { padding-right: 0; } .plan-wrap .plan-price { padding-right: 76px; } }
/* The two captions sit on one line: each column fills the row, the picture centres, the caption ends it. */
.m-stage-remote .m-col { align-self: stretch; grid-template-rows: minmax(0, 1fr) auto; align-items: center; }
@media (max-width: 860px) { .m-stage-remote .m-col { grid-template-rows: auto auto; } }
/* One group of two phone apps: one row on narrow screens too. */
@media (max-width: 600px) {
  .mcp-home .m-appsw { width: min(100%, 380px); }
  .mcp-home .m-appsw .sw-g, .mcp-home .m-appsw .sw-g:last-child { grid-template-columns: auto 1fr 1fr; }
  .mcp-home .m-appsw .sw-l { padding: 0 6px 0 8px; }
}
@media (max-width: 400px) { .mcp-home .m-appsw .sw-l { display: none; } .mcp-home .m-appsw .sw-g, .mcp-home .m-appsw .sw-g:last-child { grid-template-columns: 1fr 1fr; } }
.ap-gphone .gp-tool b { display: none; }

/* Demo phones (owner review 2026-10-18): everyday requests. The question is typed into the
   composer and sent; each Hey Atu step reads as plain words, not a command (mcp.js T.scenes). */
.cl-tool.say span, .gp-tool.say span { font-family: -apple-system, system-ui, "PingFang SC", sans-serif; font-size: 11.5px; color: var(--tx2); }
.ap-phone .cl-tool.say span, .ap-gphone .gp-tool.say span { font-size: 11px; }
.cl-tool.say.ok em::before, .gp-tool.say.ok em::before { content: "✓ "; color: var(--green); }
.gp-tool.say.ok em::before { content: ""; }
.mph-input.typing .ap-ph, .gph-input.typing .ap-ph { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; color: var(--tx); line-height: 1.4; }
.mph-input .cl-send, .gph-voice { transition: transform .15s ease, background .2s; }
.mph-input.typing .cl-send { opacity: 1; }
.mph-input.send .cl-send, .gph-input.send .gph-voice { transform: scale(.82); }



/* App Store icons (owner 2026-10): the full official tile fills the square, no extra card padding. */
.hub-ic.app { overflow: hidden; padding: 0; border-color: rgba(0,0,0,.08); }
.hub-ic.app img { width: 100%; height: 100%; display: block; }
[data-theme="dark"] .hub-ic.app { box-shadow: 0 0 0 1px rgba(255,255,255,.12); }

/* Questions: heading beside the list on wide screens. */
.faq-head .aside-links { margin-top: 14px; text-align: center; }
@media (min-width: 860px) {
  .mcp-home #faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 56px; align-items: start; }
  .mcp-home #faq .faq-head { position: sticky; top: 96px; }
  .mcp-home #faq .faq-head .m-title, .mcp-home #faq .faq-head .m-sub, .mcp-home #faq .faq-head .aside-links { text-align: left; }
  .mcp-home #faq .faq-head .m-sub { margin-left: 0; font-size: 15.5px; }
  .mcp-home #faq .m-faq { max-width: none; margin: 0; border-top: 1px solid var(--line-2); }
}

/* Closing call to action. */
.end-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 32px; align-items: center; padding: 48px 52px 36px; border-radius: 28px; background: var(--logo-tile); }
.end-copy h2 { margin: 0; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; font-weight: 700; letter-spacing: -.03em; color: var(--text); }
.end-copy p { margin: 12px 0 0; font-size: 16px; line-height: 1.6; color: var(--text-2); }
.end-card .install-cta { grid-column: 1 / -1; display: flex; align-items: flex-start; }
.end-card .install-box { box-shadow: none; }
.end-apps { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 0; padding: 22px 0 0; border-top: 1px solid color-mix(in srgb, var(--text) 12%, transparent); list-style: none; }
.end-apps li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; background: color-mix(in srgb, var(--card) 70%, transparent); font-size: 13.5px; color: var(--text-2); }
.end-apps img { width: 26px; height: 26px; border-radius: 7px; }
@media (max-width: 720px) {
  .end-card { grid-template-columns: 1fr; padding: 32px 22px 24px; text-align: center; }
  .end-card .install-cta { align-items: center; }
  .end-apps { justify-content: center; }
}