/* =============================================================================
   pg11.css - the pages rebuilt on the homepage's v11 design (2026-10-26):
   /mcp, /plugins/figma, /chrome-extension, /partners, /partners/experts,
   /affiliates, /customer-stories, /guides, /help. Plan: tasks/pg11-plan.md.

   These pages carry body.hv-v11, so home-v11.css draws everything they share
   with the homepage (the hero frame, the proof row, the ink tab panel, the
   picture row, the AI chat, the customer story, the FAQ, the close, and the
   phone rules for all of them). This file adds only what the homepage does not
   have, prefix p11-, every rule under body.pg11.

   House rules kept: white page; ink panels and warm grey cards (#f6f5f3);
   buttons 44px; lime only as a fill; no gradients, glow or glass; hover
   changes colour only; Geist everywhere. Raw file: the routes hand its mtime
   as ?v= (cssP11).

   1. Shell  2. Hero  3. Visuals  4. Rows  5. Steps  6. Facts  7. Rows of
   cards  8. Topics, search  9. Rules, band  10. Connect, tools  11. Widths
   ============================================================================= */

/* ---- 1. Shell ---------------------------------------------------------------- */
html:root body.pg11 main .p11-s-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
html:root body.pg11 main .p11-s-top .v4-head { margin: 0; }
html:root body.pg11 main .p11-s-top .v4-head .v4-h2 { max-width: 20em; }
html:root body.pg11 main a.p11-s-more { flex: none; }
html:root body.pg11 main p.p11-after { margin: 22px 0 0; font-size: 14px; line-height: 1.5; color: #6f6d6a; }
html:root body.pg11 main p.p11-after a,
html:root body.pg11 main p.v4-sub a,
html:root body.pg11 main .p11-row-d a,
html:root body.pg11 main .v4x-q-a a,
html:root body.pg11 main .p11-band-note a,
html:root body.pg11 main .p11-con-foot a,
html:root body.pg11 main .p11-empty-d a,
html:root body.pg11 main .p11-tools-foot a,
html:root body.pg11 main .p11-hero-note a,
html:root body.pg11 main .p11-row-note a { color: #121212; text-decoration: underline; text-decoration-color: #c9c6c1; text-underline-offset: 4px; transition: text-decoration-color 150ms ease; }
@media (hover: hover) {
    html:root body.pg11 main p.p11-after a:hover, html:root body.pg11 main p.v4-sub a:hover, html:root body.pg11 main .p11-row-d a:hover,
    html:root body.pg11 main .v4x-q-a a:hover, html:root body.pg11 main .p11-band-note a:hover, html:root body.pg11 main .p11-con-foot a:hover,
    html:root body.pg11 main .p11-empty-d a:hover, html:root body.pg11 main .p11-tools-foot a:hover, html:root body.pg11 main .p11-hero-note a:hover,
    html:root body.pg11 main .p11-row-note a:hover { text-decoration-color: #121212; }
}
/* The ink button: home-next-v10.css's `body.v10 a { color: inherit }` outranks
   the kit's .v4-btn-primary colour on a page without the homepage's sheet. */
html:root:root body.pg11 main a.v4-btn-primary.h11-go { background-color: #121212; border-color: #121212; color: #ffffff; }
html:root:root body.pg11 main a.v4-btn-primary.h11-go:hover { background-color: #96ff1a; border-color: #96ff1a; color: #121212; }
html:root body.pg11 main a.h11-pane-link.p11-link--ink { color: #121212; text-decoration-color: #c9c6c1; }
@media (hover: hover) { html:root body.pg11 main a.h11-pane-link.p11-link--ink:hover { text-decoration-color: #121212; } }
html:root body.pg11 main .h11-go svg, html:root body.pg11 main .h11-go .p11-figma { flex: none; margin-right: 8px; }
html:root body.pg11 .p11-figma { display: inline-flex; align-items: center; line-height: 0; }
html:root body.pg11 main .p11-cap { margin-top: 10px; font-size: 13px; line-height: 1.4; color: #8f8d89; }
/* The questions: the title on the left, the answers on the right. */
html:root body.pg11 .hv-faq { display: grid; align-items: start; }
html:root body.pg11 .hv-faq-side { position: sticky; top: 96px; }
html:root body.pg11 main .v4x-q-a p strong { font-weight: 600; color: #121212; }

/* ---- 2. Hero ----------------------------------------------------------------- */
/* Centred: the homepage's hero, a little smaller (the titles here are longer). */
html:root body.pg11 main .p11-h1 { font-size: clamp(34px, 3.8vw, 56px); }
html:root body.pg11 .p11-amb { background-size: cover; background-position: center; }
html:root body.pg11 .p11-hero--bare .h11-frame { padding-bottom: clamp(56px, 6vw, 88px); }
html:root body.pg11 .p11-hero-stage { position: relative; z-index: 1; width: min(1120px, calc(100% - 48px)); margin: clamp(40px, 3.8vw, 56px) auto 0; padding-bottom: clamp(32px, 3.6vw, 56px); }
html:root body.pg11 main p.p11-hero-note { margin: 16px auto 0; font-size: 14px; line-height: 1.5; color: #8f8d89; }
/* Split: the words on the left, the visual on the right, inside the frame. */
html:root body.pg11 .p11-hero--split .h11-frame { padding-bottom: clamp(40px, 4.4vw, 64px); }
html:root body.pg11 .p11-hero--split .h11-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); align-items: center; gap: clamp(32px, 4.4vw, 72px); }
html:root body.pg11 .p11-hero--split .h11-head { max-width: 600px; margin: 0; text-align: left; }
html:root body.pg11 .p11-hero--split main .h11-h1, html:root body.pg11 main .p11-hero--split .h11-h1 { max-width: 12.5em; margin: 0; font-size: clamp(34px, 3.6vw, 54px); }
html:root body.pg11 main .p11-hero--split .h11-sub { max-width: 560px; margin-left: 0; margin-right: 0; text-wrap: pretty; }
html:root body.pg11 .p11-hero--split .h11-actions { justify-content: flex-start; }
html:root body.pg11 .p11-hero--split .h11-proof { flex-direction: column; align-items: flex-start; gap: 14px; }
html:root body.pg11 .p11-hero--split .h11-proof-g, html:root body.pg11 .p11-hero--split .h11-works-list, html:root body.pg11 .p11-hero--split .h11-logos { justify-content: flex-start; }
html:root body.pg11 .p11-hero--split .h11-proof-sep { display: none; }
html:root body.pg11 main .p11-hero--split p.p11-hero-note { margin-left: 0; }
html:root body.pg11 .p11-hero-vis { position: relative; z-index: 1; min-width: 0; }

/* The search on the FAQ hub. */
html:root body.pg11 main form.p11-search { position: relative; max-width: 600px; margin: 30px auto 0; }
html:root body.pg11 main .p11-search-ic { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: #8f8d89; pointer-events: none; }
html:root body.pg11 main input.p11-search-in {
    display: block; width: 100%; height: 56px; margin: 0; padding: 0 18px 0 50px; border: 1px solid #d7d4cf; border-radius: 14px;
    background-color: #ffffff; box-shadow: 0 12px 32px rgba(18, 18, 18, 0.06); font-family: inherit; font-size: 16px; color: #121212;
    -webkit-appearance: none; appearance: none; transition: border-color 150ms ease;
}
html:root body.pg11 main input.p11-search-in::placeholder { color: #8f8d89; }
html:root body.pg11 main input.p11-search-in:focus { outline: 0; border-color: #121212; }
/* The chips under the guides hero: each kind of business, one tap away. */
html:root body.pg11 main nav.p11-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 980px; margin: 28px auto 0; }
html:root body.pg11 main a.p11-chip {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 15px; border: 1px solid #e0ddd8; border-radius: 10px;
    background-color: #ffffff; font-size: 14px; font-weight: 500; line-height: 1; color: #121212; text-decoration: none; white-space: nowrap;
    transition: border-color 150ms ease, background-color 150ms ease;
}
@media (hover: hover) { html:root body.pg11 main a.p11-chip:hover { border-color: #121212; } }

/* ---- 3. Visuals ---------------------------------------------------------------- */
html:root body.pg11 .p11-v { position: relative; min-width: 0; margin: 0; }
html:root body.pg11 .p11-v img, html:root body.pg11 .p11-v video { display: block; max-width: none; margin: 0; }

/* The chat as it runs (the /mcp hero). */
html:root body.pg11 .p11-v--chat .p11-chat-win { max-width: 900px; margin: 0 auto; box-shadow: 0 30px 80px rgba(18, 18, 18, 0.14); outline: 1px solid rgba(18, 18, 18, 0.06); outline-offset: -1px; }
html:root body.pg11 .p11-chat-body { gap: 14px; padding: 22px 24px 24px; }
html:root body.pg11 .p11-chat-tool {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 7px 12px 7px 7px;
    border: 1px solid #efedea; border-radius: 10px; font-size: 13px; line-height: 1.3; color: #3d3d3c;
}
html:root body.pg11 .p11-chat-tool-ic { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background-color: #121212; color: #ffffff; }
html:root body.pg11 span.p11-chat-tool-t { font-weight: 600; color: #121212; }
html:root body.pg11 span.p11-chat-tool-n { color: #8f8d89; }
html:root body.pg11 .p11-v--chat .h11-chat-outs { gap: 12px; }
html:root body.pg11 .p11-chat-reply { font-size: 14.5px; line-height: 1.5; color: #3d3d3c; }

/* A browser frame and a real page in it. */
html:root body.pg11 .p11-site, html:root body.pg11 .p11-br, html:root body.pg11 .p11-fg {
    overflow: hidden; border-radius: 18px; background-color: #ffffff; box-shadow: 0 30px 80px rgba(18, 18, 18, 0.14);
    outline: 1px solid rgba(18, 18, 18, 0.07); outline-offset: -1px;
}
html:root body.pg11 .p11-br-bar { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-bottom: 1px solid #efedea; background-color: #fbfaf9; }
html:root body.pg11 .p11-br-bar > i { display: block; width: 9px; height: 9px; border-radius: 50%; background-color: #dcd9d4; }
html:root body.pg11 span.p11-br-url { margin-left: 10px; padding: 4px 12px; border-radius: 8px; background-color: #f1f0ee; font-size: 12px; line-height: 1.2; color: #6f6d6a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
html:root body.pg11 .p11-site-shot { aspect-ratio: 16 / 10.5; overflow: hidden; background-color: #f6f5f3; }
html:root body.pg11 .p11-site-shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }

/* Chrome: a shop admin page with the DesignerBox side panel beside it. */
html:root body.pg11 span.p11-br-ext { margin-left: auto; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background-color: #121212; }
html:root body.pg11 span.p11-br-ext img { width: 16px; height: 16px; filter: invert(1); }
html:root body.pg11 .p11-br-body { display: grid; grid-template-columns: minmax(0, 1fr) 232px; min-height: 420px; }
html:root body.pg11 .p11-br-page { display: flex; flex-direction: column; gap: 18px; padding: 22px 22px 24px; background-color: #f8f7f5; }
html:root body.pg11 .p11-br-ph { display: flex; flex-direction: column; gap: 4px; }
html:root body.pg11 span.p11-br-crumb { font-size: 11.5px; color: #8f8d89; }
html:root body.pg11 span.p11-br-title { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: #121212; }
html:root body.pg11 .p11-br-form { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 14px; background-color: #ffffff; border: 1px solid #ecebe8; }
html:root body.pg11 .p11-br-media { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
html:root body.pg11 .p11-br-m { position: relative; display: block; overflow: hidden; aspect-ratio: 1 / 1; border-radius: 10px; background-color: #f1f0ee; }
html:root body.pg11 .p11-br-m img { width: 100%; height: 100%; object-fit: cover; }
html:root body.pg11 .p11-br-m.is-new { outline: 2px solid #121212; outline-offset: 2px; }
html:root body.pg11 .p11-br-m--add { display: grid; place-items: center; border: 1px dashed #cfccc7; background-color: #ffffff; color: #8f8d89; }
html:root body.pg11 .p11-br-fields { display: flex; flex-direction: column; gap: 10px; }
html:root body.pg11 .p11-br-fl { display: flex; flex-direction: column; gap: 4px; }
html:root body.pg11 span.p11-br-fll { font-size: 11px; color: #8f8d89; }
html:root body.pg11 span.p11-br-flv { padding: 8px 10px; border: 1px solid #ecebe8; border-radius: 8px; font-size: 12.5px; color: #121212; }
html:root body.pg11 .p11-br-panel { display: flex; flex-direction: column; gap: 12px; padding: 16px 14px; border-left: 1px solid #efedea; background-color: #ffffff; }
html:root body.pg11 span.p11-br-pt { font-size: 13px; font-weight: 600; color: #121212; }
html:root body.pg11 .p11-br-tabs { display: flex; gap: 2px; padding: 3px; border-radius: 9px; background-color: #f4f3f1; }
html:root body.pg11 .p11-br-tabs > span { flex: 1 1 0; padding: 5px 0; border-radius: 7px; font-size: 11.5px; text-align: center; color: #8f8d89; }
html:root body.pg11 .p11-br-tabs > span.is-on { background-color: #ffffff; color: #121212; box-shadow: 0 1px 2px rgba(18, 18, 18, 0.08); }
html:root body.pg11 span.p11-br-ask { padding: 9px 11px; border-radius: 12px 12px 4px 12px; background-color: #121212; font-size: 12px; line-height: 1.4; color: #ffffff; }
html:root body.pg11 .p11-br-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
html:root body.pg11 .p11-br-r { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 9px; background-color: #f1f0ee; }
html:root body.pg11 .p11-br-r img { width: 100%; height: 100%; object-fit: cover; }
html:root body.pg11 .p11-br-r.is-drag { transform: rotate(-4deg) translate(-6px, -4px); box-shadow: 0 14px 30px rgba(18, 18, 18, 0.22); }
html:root body.pg11 span.p11-br-hint { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: #6f6d6a; }

/* Figma: the file's canvas with frames, the plugin panel on the right. */
html:root body.pg11 .p11-fg-bar { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border-bottom: 1px solid #efedea; }
html:root body.pg11 span.p11-fg-file { font-size: 12.5px; font-weight: 500; color: #121212; }
html:root body.pg11 span.p11-fg-sp { flex: 1 1 auto; }
html:root body.pg11 span.p11-fg-av { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background-color: #b4653e; font-size: 10px; font-weight: 600; color: #ffffff; }
html:root body.pg11 span.p11-fg-share { padding: 5px 10px; border-radius: 6px; background-color: #121212; font-size: 11px; font-weight: 500; color: #ffffff; }
html:root body.pg11 .p11-fg-body { display: grid; grid-template-columns: minmax(0, 1fr) 216px; }
html:root body.pg11 .p11-fg-canvas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); grid-template-rows: auto auto; gap: 18px 26px; align-items: start; padding: 30px 36px; overflow: hidden; background-color: #eeedeb; }
html:root body.pg11 .p11-fg-frame { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
html:root body.pg11 .p11-fg-frame--0 { grid-row: 1 / span 2; }
html:root body.pg11 span.p11-fg-fl { font-size: 10.5px; line-height: 1; color: #6f6d6a; }
html:root body.pg11 .p11-fg-fp { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; background-color: #ffffff; box-shadow: 0 2px 8px rgba(18, 18, 18, 0.08); }
html:root body.pg11 .p11-fg-frame--1 .p11-fg-fp, html:root body.pg11 .p11-fg-frame--2 .p11-fg-fp { aspect-ratio: 16 / 10; }
html:root body.pg11 .p11-fg-fp img { width: 100%; height: 100%; object-fit: cover; }
html:root body.pg11 .p11-fg-fp.is-sel { outline: 2px solid #121212; outline-offset: 0; }
html:root body.pg11 .p11-fg-panel { display: flex; flex-direction: column; gap: 10px; padding: 14px 12px; border-left: 1px solid #efedea; background-color: #ffffff; }
html:root body.pg11 .p11-fg-ph { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; color: #121212; }
html:root body.pg11 span.p11-fg-pill { padding: 3px 8px; border-radius: 999px; background-color: #f4f3f1; font-size: 10.5px; font-weight: 500; color: #3d3d3c; }
html:root body.pg11 .p11-fg-tabs { display: flex; gap: 2px; padding: 3px; border-radius: 9px; background-color: #f4f3f1; }
html:root body.pg11 .p11-fg-tabs > span { flex: 1 1 0; padding: 5px 0; border-radius: 7px; font-size: 11px; text-align: center; color: #8f8d89; }
html:root body.pg11 .p11-fg-tabs > span.is-on { background-color: #ffffff; color: #121212; box-shadow: 0 1px 2px rgba(18, 18, 18, 0.08); }
html:root body.pg11 .p11-fg-apps { display: flex; flex-direction: column; gap: 2px; }
html:root body.pg11 .p11-fg-app { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 8px; border-radius: 8px; font-size: 12px; color: #3d3d3c; }
html:root body.pg11 .p11-fg-app.is-on { background-color: #f4f3f1; color: #121212; font-weight: 500; }
html:root body.pg11 .p11-fg-in { display: flex; align-items: center; gap: 8px; padding: 6px; border: 1px solid #ecebe8; border-radius: 10px; font-size: 11.5px; color: #6f6d6a; }
html:root body.pg11 .p11-fg-in img { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; }
html:root body.pg11 span.p11-fg-run { display: grid; place-items: center; height: 34px; border-radius: 9px; background-color: #121212; font-size: 12.5px; font-weight: 500; color: #ffffff; }

/* The four-month commission card (/affiliates, /partners). */
html:root body.pg11 .p11-pay { padding: 24px; border-radius: 22px; background-color: #ffffff; box-shadow: 0 30px 80px rgba(18, 18, 18, 0.12); outline: 1px solid rgba(18, 18, 18, 0.06); outline-offset: -1px; }
html:root body.pg11 .p11-pay-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
html:root body.pg11 span.p11-pay-cap { font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #8f8d89; }
html:root body.pg11 span.p11-pay-plan { padding: 4px 10px; border-radius: 999px; background-color: #f4f3f1; font-size: 12px; font-weight: 500; color: #3d3d3c; }
html:root body.pg11 main p.p11-pay-h { margin: 10px 0 14px; font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: #121212; }
html:root body.pg11 table.p11-pay-t { width: 100%; margin: 0; border-collapse: collapse; }
html:root body.pg11 .p11-pay-t th { padding: 9px 12px; background-color: #f6f5f3; font-size: 12.5px; font-weight: 500; text-align: left; color: #6f6d6a; }
html:root body.pg11 .p11-pay-t th:first-child { border-radius: 9px 0 0 9px; }
html:root body.pg11 .p11-pay-t th:last-child { border-radius: 0 9px 9px 0; text-align: right; }
html:root body.pg11 .p11-pay-t td { padding: 12px; border-bottom: 1px solid #efedea; vertical-align: middle; }
html:root body.pg11 .p11-pay-t td:last-child { text-align: right; }
html:root body.pg11 span.p11-pay-m { display: block; font-size: 14.5px; font-weight: 500; color: #121212; }
html:root body.pg11 span.p11-pay-s { display: block; margin-top: 2px; font-size: 12.5px; color: #8f8d89; }
html:root body.pg11 span.p11-pay-yes { display: inline-block; padding: 4px 10px; border-radius: 999px; background-color: #96ff1a; font-size: 13px; font-weight: 600; color: #121212; }
html:root body.pg11 span.p11-pay-no { font-size: 13px; color: #8f8d89; }
html:root body.pg11 .p11-pay-t tr.is-off span.p11-pay-m { color: #8f8d89; }
html:root body.pg11 .p11-pay-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 16px; font-size: 13.5px; color: #6f6d6a; }
html:root body.pg11 .p11-pay-foot strong { font-size: 18px; font-weight: 600; text-align: right; color: #121212; }

/* Picture cards with a label, each a link. */
html:root body.pg11 ul.p11-v--cards { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 16px; }
html:root body.pg11 ul.p11-cards--2 { --n: 2; }
html:root body.pg11 ul.p11-cards--4 { --n: 4; }
html:root body.pg11 ul.p11-v--cards li { margin: 0; min-width: 0; }
html:root body.pg11 main a.p11-card { display: flex; flex-direction: column; gap: 4px; color: #121212; text-decoration: none; }
html:root body.pg11 .p11-card-pic { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; margin-bottom: 10px; border-radius: 18px; background-color: #f6f5f3; box-shadow: 0 20px 50px rgba(18, 18, 18, 0.1); }
html:root body.pg11 .p11-card-pic img { width: 100%; height: 100%; object-fit: cover; }
html:root body.pg11 span.p11-card-tag, html:root body.pg11 span.p11-pic-tag {
    position: absolute; left: 12px; top: 12px; padding: 4px 9px; border-radius: 7px; background-color: rgba(255, 255, 255, 0.86);
    font-size: 12px; font-weight: 500; line-height: 1.25; color: #121212;
}
html:root body.pg11 span.p11-card-t { font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
html:root body.pg11 span.p11-card-d { font-size: 14.5px; line-height: 1.45; color: #6f6d6a; }
@media (hover: hover) { html:root body.pg11 main a.p11-card:hover span.p11-card-t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } }

/* Pictures with a label under each. */
html:root body.pg11 .p11-pics { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 12px; }
html:root body.pg11 .p11-pics--2 .p11-pics { --n: 2; }
html:root body.pg11 .p11-pics--4 .p11-pics { --n: 4; }
html:root body.pg11 .p11-pic { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
html:root body.pg11 .p11-pic-i { position: relative; display: block; overflow: hidden; aspect-ratio: var(--r, 4 / 5); border-radius: 16px; background-color: #f6f5f3; }
html:root body.pg11 .p11-pic-i img { width: 100%; height: 100%; object-fit: cover; }
html:root body.pg11 span.p11-pic-l { font-size: 13px; line-height: 1.3; color: #6f6d6a; }

/* In, an arrow, out, on a warm grey panel. */
html:root body.pg11 .p11-flow { container-type: inline-size; display: flex; align-items: flex-end; gap: 14px; padding: clamp(18px, 2.4vw, 32px); border-radius: 24px; background-color: #f6f5f3; }
html:root body.pg11 .p11-flow-in { flex: 0 0 22%; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
html:root body.pg11 .p11-flow-go { flex: none; align-self: center; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background-color: #ffffff; color: #121212; box-shadow: 0 2px 8px rgba(18, 18, 18, 0.08); }
html:root body.pg11 .p11-flow-outs { flex: 1 1 auto; min-width: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }
html:root body.pg11 .p11-flow-o { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
html:root body.pg11 .p11-flow-pic { display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 14px; background-color: #ebe9e6; }
html:root body.pg11 .p11-flow-in .p11-flow-pic { border-radius: 12px; outline: 1px solid #e0ddd8; outline-offset: -1px; }
html:root body.pg11 .p11-flow-pic img { width: 100%; height: 100%; object-fit: cover; }
html:root body.pg11 span.p11-flow-l { font-size: 12.5px; line-height: 1.3; color: #6f6d6a; }

/* Four clients, four brands, one workspace. */
html:root body.pg11 .p11-board { padding: 18px; border-radius: 24px; background-color: #f6f5f3; }
html:root body.pg11 .p11-board-h { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 13.5px; font-weight: 500; color: #3d3d3c; }
html:root body.pg11 .p11-board-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
html:root body.pg11 .p11-board-c { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 6px; border-radius: 16px; background-color: #ffffff; }
html:root body.pg11 .p11-board-pic { display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 11px; }
html:root body.pg11 .p11-board-pic img { width: 100%; height: 100%; object-fit: cover; }
html:root body.pg11 .p11-board-n { display: flex; align-items: center; gap: 7px; padding: 0 4px 4px; font-size: 13px; font-weight: 500; color: #121212; }
html:root body.pg11 .p11-board-sw { display: inline-flex; }
html:root body.pg11 .p11-board-sw i { display: block; width: 11px; height: 11px; margin-right: -3px; border-radius: 50%; box-shadow: 0 0 0 2px #ffffff; }

/* Video clips in a row. */
html:root body.pg11 .p11-clips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: clamp(16px, 2vw, 24px); border-radius: 24px; background-color: #f6f5f3; }
html:root body.pg11 .p11-clip { position: relative; display: block; overflow: hidden; aspect-ratio: 9 / 16; border-radius: 16px; background-color: #ebe9e6; }
html:root body.pg11 .p11-clip img, html:root body.pg11 .p11-clip video { width: 100%; height: 100%; object-fit: cover; }
html:root body.pg11 span.p11-clip-l { position: absolute; left: 10px; bottom: 10px; padding: 4px 9px; border-radius: 7px; background-color: rgba(18, 18, 18, 0.72); font-size: 12px; font-weight: 500; color: #ffffff; }

/* A brand kit card over a picture in that brand. */
html:root body.pg11 .p11-v--brand { overflow: hidden; aspect-ratio: 5 / 4; border-radius: 24px; background-color: #f6f5f3; }
html:root body.pg11 img.p11-brand-bg { width: 100%; height: 100%; object-fit: cover; }
html:root body.pg11 .p11-brand-card {
    position: absolute; right: 5%; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; width: 236px; padding: 16px;
    border-radius: 16px; background-color: #ffffff; box-shadow: 0 18px 48px rgba(18, 18, 18, 0.16);
}
html:root body.pg11 span.p11-brand-cap { font-size: 11.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #8f8d89; }
html:root body.pg11 span.p11-brand-n { font-size: 18px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #121212; }
html:root body.pg11 .p11-brand-sw { display: flex; gap: 6px; }
html:root body.pg11 .p11-brand-sw i { display: block; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(18, 18, 18, 0.1); }
html:root body.pg11 .p11-brand-r { display: flex; align-items: center; gap: 8px; font-size: 12.5px; line-height: 1.35; color: #3d3d3c; }
html:root body.pg11 .p11-brand-r svg { flex: none; box-sizing: content-box; width: 10px; height: 10px; padding: 3px; border-radius: 50%; background-color: #96ff1a; color: #121212; }

/* ---- 4. Rows: one idea each, the sides alternating ---------------------------- */
html:root body.pg11 .p11-rows { display: flex; flex-direction: column; gap: clamp(56px, 6.4vw, 104px); }
html:root body.pg11 .p11-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(32px, 5vw, 80px); }
html:root body.pg11 .p11-row--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
html:root body.pg11 .p11-row--flip .p11-row-copy { order: 2; }
html:root body.pg11 .p11-row-copy { min-width: 0; }
html:root body.pg11 span.p11-row-n { display: block; margin-bottom: 14px; font-size: 13px; font-weight: 500; letter-spacing: 0.04em; color: #8f8d89; }
html:root body.pg11 main p.p11-row-e { margin: 0 0 12px; }
html:root body.pg11 main h3.p11-row-h { margin: 0; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.12; letter-spacing: -0.022em; color: #121212; text-wrap: balance; }
html:root body.pg11 main p.p11-row-who { margin: 10px 0 0; font-size: 16px; line-height: 1.45; color: #8f8d89; }
html:root body.pg11 main p.p11-row-d { margin: 16px 0 0; font-size: 17px; line-height: 1.55; color: #6f6d6a; text-wrap: pretty; }
html:root body.pg11 main ul.p11-checks { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
html:root body.pg11 main ul.p11-checks li { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 16px; line-height: 1.45; color: #3d3d3c; }
html:root body.pg11 main ul.p11-checks li svg { flex: none; margin-top: 2px; color: #121212; }
html:root body.pg11 .p11-row-acts, html:root body.pg11 .p11-band-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 28px; }
html:root body.pg11 .p11-row-acts a.h11-pane-link { margin-top: 0; }
html:root body.pg11 main p.p11-row-note { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: #8f8d89; }
html:root body.pg11 dl.p11-meta { display: flex; flex-wrap: wrap; gap: 14px 36px; margin: 22px 0 0; padding: 16px 0; border-top: 1px solid #e6e4e1; border-bottom: 1px solid #e6e4e1; }
html:root body.pg11 .p11-meta-i dt { margin: 0 0 4px; font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #8f8d89; }
html:root body.pg11 .p11-meta-i dd { margin: 0; font-size: 15.5px; font-weight: 500; color: #121212; }
html:root body.pg11 .p11-row-vis { min-width: 0; }

/* ---- 5. Steps ------------------------------------------------------------------ */
html:root body.pg11 ol.p11-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 16px; }
html:root body.pg11 ol.p11-steps--2 { --n: 2; }
html:root body.pg11 ol.p11-steps--4 { --n: 4; }
html:root body.pg11 li.p11-step { display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 14px 14px 24px; border-radius: 22px; background-color: #f6f5f3; }
html:root body.pg11 .p11-step-pic { display: block; overflow: hidden; aspect-ratio: 4 / 3; margin-bottom: 20px; border-radius: 14px; background-color: #ebe9e6; }
html:root body.pg11 .p11-step-pic img { width: 100%; height: 100%; object-fit: cover; }
html:root body.pg11 .p11-step-ic { display: grid; place-items: center; width: 44px; height: 44px; margin: 10px 10px 22px; border-radius: 12px; background-color: #ffffff; color: #121212; }
html:root body.pg11 span.p11-step-n, html:root body.pg11 main h3.p11-step-h, html:root body.pg11 main p.p11-step-d, html:root body.pg11 li.p11-step .p11-copy, html:root body.pg11 li.p11-step a.h11-pane-link { margin-left: 10px; margin-right: 10px; }
html:root body.pg11 span.p11-step-n { font-size: 12.5px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: #8f8d89; }
html:root body.pg11 main h3.p11-step-h { margin-top: 8px; margin-bottom: 0; font-size: 20px; line-height: 1.25; letter-spacing: -0.012em; color: #121212; }
html:root body.pg11 main p.p11-step-d { margin-top: 8px; margin-bottom: 0; font-size: 15px; line-height: 1.5; color: #6f6d6a; }
html:root body.pg11 li.p11-step a.h11-pane-link { align-self: flex-start; }
/* A value to copy: the MCP address. */
html:root body.pg11 .p11-copy { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 6px 6px 6px 12px; border: 1px solid #e0ddd8; border-radius: 11px; background-color: #ffffff; }
html:root body.pg11 code.p11-copy-v { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0; background: none; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px; color: #121212; }
html:root body.pg11 main button.p11-copy-b {
    flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; margin: 0; padding: 0 12px; border: 0; border-radius: 8px;
    background-color: #121212; font-family: inherit; font-size: 13px; font-weight: 500; color: #ffffff; cursor: pointer; transition: background-color 150ms ease, color 150ms ease;
}
@media (hover: hover) { html:root body.pg11 main button.p11-copy-b:hover { background-color: #96ff1a; color: #121212; } }
html:root body.pg11 main button.p11-copy-b.is-done { background-color: #96ff1a; color: #121212; }

/* ---- 6. Facts: a warm grey card of white tiles ----------------------------------- */
/* Ink is kept for the tab panel and the close (docs/v4/HOMEPAGE-PATTERN-2026-10-26.md). */
html:root body.pg11 .p11-facts { padding: clamp(16px, 2.2vw, 28px); border-radius: 28px; background-color: #f6f5f3; }
html:root body.pg11 .p11-facts-head { max-width: 640px; margin: 8px 8px 22px; }
html:root body.pg11 main h3.p11-facts-h { margin: 0; font-size: clamp(22px, 2vw, 28px); line-height: 1.15; color: #121212; }
html:root body.pg11 main p.p11-facts-d { margin: 10px 0 0; font-size: 16px; line-height: 1.55; color: #6f6d6a; }
html:root body.pg11 ul.p11-facts-g { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
html:root body.pg11 .p11-facts--4 ul.p11-facts-g { grid-template-columns: repeat(4, minmax(0, 1fr)); }
html:root body.pg11 .p11-facts--5 ul.p11-facts-g { grid-template-columns: repeat(5, minmax(0, 1fr)); }
html:root body.pg11 li.p11-fact { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 22px; border-radius: 18px; background-color: #ffffff; }
html:root body.pg11 .p11-fact-ic { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 10px; border-radius: 11px; background-color: #f4f3f1; color: #121212; }
html:root body.pg11 span.p11-fact-t { font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: #121212; }
html:root body.pg11 span.p11-fact-d { font-size: 14.5px; line-height: 1.5; color: #6f6d6a; }
html:root body.pg11 span.p11-fact-d strong { font-weight: 600; color: #3d3d3c; }
html:root body.pg11 span.p11-fact-d a { color: #121212; text-decoration: underline; text-decoration-color: #c9c6c1; text-underline-offset: 4px; }
html:root body.pg11 .p11-facts--stat span.p11-fact-t { font-size: clamp(34px, 3.4vw, 48px); font-weight: 550; line-height: 1.05; letter-spacing: -0.03em; }
html:root body.pg11 .p11-facts--stat li.p11-fact { gap: 10px; padding: 24px 22px 26px; }
html:root body.pg11 .p11-facts-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 18px 8px 4px; }
html:root body.pg11 .p11-facts-foot p { margin: 0; font-size: 15px; line-height: 1.5; color: #6f6d6a; }

/* The list card on a stage picture (the homepage's stage, this kit's card). */
html:root body.pg11 .p11-vl { right: 6%; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 2px; width: 268px; padding: 12px; }
html:root body.pg11 .p11-vl--left { right: auto; left: 6%; }
html:root body.pg11 .p11-vl span.h11-v-cap { padding: 2px 8px 8px; }
html:root body.pg11 .p11-vl-r { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 10px; border-radius: 10px; font-size: 14px; color: #3d3d3c; }
html:root body.pg11 .p11-vl-r.is-on { background-color: #f6f5f3; color: #121212; }
html:root body.pg11 .p11-vl-ic { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background-color: #f1f0ee; color: #121212; }
html:root body.pg11 .p11-vl-r.is-on .p11-vl-ic { background-color: #121212; color: #ffffff; }
html:root body.pg11 .p11-vl-t { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; font-weight: 600; line-height: 1.25; }
html:root body.pg11 span.p11-vl-d { font-size: 12px; font-weight: 400; color: #6f6d6a; }
html:root body.pg11 .h11-inx { margin-top: 0; }

/* How it works: one warm grey card, the steps left, a picture right. */
html:root body.pg11 .p11-how { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; gap: clamp(28px, 4.4vw, 72px); padding: clamp(24px, 3.6vw, 52px); border-radius: 28px; background-color: #f6f5f3; }
html:root body.pg11 .p11-how--solo { grid-template-columns: minmax(0, 1fr); }
html:root body.pg11 ol.p11-how-steps { margin-top: 0; }
html:root body.pg11 .p11-how-vis { min-width: 0; }
html:root body.pg11 .p11-how .p11-band-acts { margin-top: 28px; padding-left: 44px; }
html:root body.pg11 .p11-how p.p11-band-note { padding-left: 44px; }

/* ---- 7. Rows of cards: picture rows, the guides ---------------------------------- */
html:root body.pg11 .p11-ind-wrap { position: relative; }
html:root body.pg11 .p11-ind-nav { position: absolute; right: 0; bottom: calc(100% + 36px); }
html:root body.pg11 .p11-s--ind .p11-s-top { padding-right: 112px; }
html:root body.pg11 .p11-gg + .p11-gg { margin-top: clamp(56px, 6vw, 88px); }
html:root body.pg11 .p11-gg { scroll-margin-top: 88px; }
html:root body.pg11 .p11-gg-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
html:root body.pg11 .p11-gg-top .v4-head { margin: 0; }
html:root body.pg11 .p11-gg .p11-ind-wrap { display: flex; flex-direction: column; }
html:root body.pg11 .p11-gg-side { position: absolute; right: 0; bottom: calc(100% + 24px); display: flex; align-items: center; gap: 10px; }
html:root body.pg11 .p11-gg .p11-ind-nav.p11-gg-nav { position: static; }
html:root body.pg11 .p11-ind-nav[hidden] { display: none; }
html:root body.pg11 ul.p11-gcards {
    list-style: none; margin: 0; padding: 0 0 4px; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 4); gap: 16px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain;
}
html:root body.pg11 ul.p11-gcards::-webkit-scrollbar { display: none; }
html:root body.pg11 ul.p11-gcards li { margin: 0; min-width: 0; scroll-snap-align: start; }
html:root body.pg11 main a.p11-gcard { display: flex; flex-direction: column; gap: 6px; height: 100%; color: #121212; text-decoration: none; }
html:root body.pg11 .p11-gcard-pics { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; overflow: hidden; aspect-ratio: 4 / 3.6; margin-bottom: 10px; border-radius: 18px; }
html:root body.pg11 .p11-gcard-pics img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; }
html:root body.pg11 .p11-gcard-pics img:first-child { grid-row: 1 / span 2; }
html:root body.pg11 span.p11-gcard-meta { font-size: 12px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: #8f8d89; }
html:root body.pg11 span.p11-gcard-t { font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: #121212; }
html:root body.pg11 span.p11-gcard-d { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 14.5px; line-height: 1.5; color: #6f6d6a; }
html:root body.pg11 .p11-gcard-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 8px; }
html:root body.pg11 .p11-gcard-tags span { padding: 4px 9px; border-radius: 7px; background-color: #f4f3f1; font-size: 12px; color: #3d3d3c; }
@media (hover: hover) { html:root body.pg11 main a.p11-gcard:hover span.p11-gcard-t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } }
html:root body.pg11 main a.p11-gcard:focus-visible, html:root body.pg11 main a.p11-card:focus-visible { outline: 2px solid #121212; outline-offset: 3px; border-radius: 18px; }

/* ---- 8. Topics and the search ------------------------------------------------------- */
html:root body.pg11 ul.p11-topics { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
html:root body.pg11 li.p11-topic { display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 22px; border-radius: 22px; background-color: #f6f5f3; }
html:root body.pg11 li.p11-topic[hidden] { display: none; }
html:root body.pg11 .p11-topic-ic { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 16px; border-radius: 12px; background-color: #ffffff; color: #121212; }
html:root body.pg11 main h3.p11-topic-h { margin: 0; font-size: 20px; line-height: 1.25; letter-spacing: -0.012em; }
html:root body.pg11 main h3.p11-topic-h a { color: #121212; text-decoration: none; }
@media (hover: hover) { html:root body.pg11 main h3.p11-topic-h a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } }
html:root body.pg11 main p.p11-topic-d { margin: 8px 0 16px; font-size: 14.5px; line-height: 1.5; color: #6f6d6a; }
html:root body.pg11 main ul.p11-topic-l { list-style: none; margin: auto 0 0; padding: 4px 14px; border-radius: 14px; background-color: #ffffff; }
html:root body.pg11 main ul.p11-topic-l li { margin: 0; border-bottom: 1px solid #efedea; }
html:root body.pg11 main ul.p11-topic-l li:last-child { border-bottom: 0; }
html:root body.pg11 main ul.p11-topic-l li[hidden] { display: none; }
html:root body.pg11 main ul.p11-topic-l a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; font-size: 15px; font-weight: 500; color: #121212; text-decoration: none; }
html:root body.pg11 main ul.p11-topic-l a svg { flex: none; color: #8f8d89; transition: color 150ms ease; }
@media (hover: hover) { html:root body.pg11 main ul.p11-topic-l a:hover svg { color: #121212; } html:root body.pg11 main ul.p11-topic-l a:hover span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } }
html:root body.pg11 .p11-empty { margin-top: 16px; padding: 28px; border-radius: 22px; background-color: #f6f5f3; text-align: center; }
html:root body.pg11 .p11-empty[hidden] { display: none; }
html:root body.pg11 main p.p11-empty-h { margin: 0; font-size: 18px; font-weight: 600; color: #121212; }
html:root body.pg11 main p.p11-empty-d { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: #6f6d6a; }
html:root body.pg11 main details.v4x-q[hidden] { display: none; }

/* ---- 9. Rules and the band ------------------------------------------------------------ */
html:root body.pg11 .p11-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
html:root body.pg11 .p11-rules-c { padding: 26px; border-radius: 22px; background-color: #f6f5f3; }
html:root body.pg11 main h3.p11-rules-h { margin: 0 0 14px; font-size: 22px; line-height: 1.2; color: #121212; }
html:root body.pg11 .p11-rules-c ul { list-style: none; margin: 0; padding: 4px 16px; border-radius: 14px; background-color: #ffffff; }
html:root body.pg11 .p11-rules-c li { display: flex; align-items: center; gap: 12px; min-height: 52px; margin: 0; border-bottom: 1px solid #efedea; font-size: 15.5px; line-height: 1.4; color: #121212; }
html:root body.pg11 .p11-rules-c li:last-child { border-bottom: 0; }
html:root body.pg11 .p11-rules-ic { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; }
html:root body.pg11 .p11-rules-c--yes .p11-rules-ic { background-color: #96ff1a; color: #121212; }
html:root body.pg11 .p11-rules-c--no .p11-rules-ic { background-color: #121212; color: #ffffff; }
html:root body.pg11 main p.p11-rules-note { margin: 16px 0 0; font-size: 14px; color: #6f6d6a; }
html:root body.pg11 .p11-band { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(24px, 4vw, 64px); padding: clamp(26px, 3.6vw, 52px); border-radius: 28px; background-color: #f6f5f3; }
html:root body.pg11 .p11-band--pics { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
html:root body.pg11 .p11-band-copy { min-width: 0; max-width: 720px; }
html:root body.pg11 .p11-band-copy .v4-eyebrow { margin: 0 0 12px; }
html:root body.pg11 main .p11-band-copy p.v4-sub { max-width: 640px; margin: 14px 0 0; font-size: 17px; line-height: 1.55; color: #6f6d6a; }
html:root body.pg11 main p.p11-band-note { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: #8f8d89; }
html:root body.pg11 .p11-band-vis { min-width: 0; }
html:root body.pg11 .p11-band:not(.p11-band--pics) .p11-band-acts { margin-top: 24px; }

/* ---- 10. The MCP connect card and the tools ------------------------------------------- */
html:root body.pg11 .p11-con { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: clamp(28px, 4.4vw, 72px); padding: clamp(24px, 3.6vw, 52px); border-radius: 28px; background-color: #f6f5f3; }
html:root body.pg11 .p11-con .h11-tabs.p11-con-tabs { background-color: #ffffff; box-shadow: inset 0 0 0 1px #e6e4e1; }
html:root body.pg11 main .p11-con button.h11-tab { min-height: 42px; padding: 0 14px; color: #6f6d6a; font-size: 14.5px; }
html:root body.pg11 main .p11-con button.h11-tab svg { width: 16px; height: 16px; flex: none; }
@media (hover: hover) { html:root body.pg11 main .p11-con button.h11-tab:hover { color: #121212; } }
html:root body.pg11 main .p11-con button.h11-tab.is-on { background-color: #121212; color: #ffffff; }
html:root body.pg11 main .p11-con button.h11-tab.is-on svg { filter: brightness(0) invert(1); }
html.h11-kbd:root body.pg11 main .p11-con button.h11-tab:focus-visible { outline: 2px solid #121212; outline-offset: 2px; }
html:root body.pg11 ol.p11-con-steps { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
html:root body.pg11 ol.p11-con-steps > li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; margin: 0; }
html:root body.pg11 span.p11-con-n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background-color: #121212; font-size: 13.5px; font-weight: 600; color: #ffffff; }
html:root body.pg11 .p11-con-b { display: flex; flex-direction: column; min-width: 0; }
html:root body.pg11 span.p11-con-h { font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: #121212; }
html:root body.pg11 span.p11-con-d { display: block; margin-top: 5px; font-size: 15.5px; line-height: 1.5; color: #6f6d6a; }
html:root body.pg11 .p11-con-panes { display: grid; margin-top: 0; }
html:root body.pg11 .p11-con .h11-pane.p11-con-pane { display: block; transform: none; }
html:root body.pg11 main a.v4-btn-primary.h11-go.p11-con-cta { margin-top: 12px; }
html:root body.pg11 main p.p11-con-foot { margin: 24px 0 0; font-size: 14px; line-height: 1.5; color: #6f6d6a; }
html:root body.pg11 .p11-con-vis { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
html:root body.pg11 .p11-dlg { display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 18px; background-color: #ffffff; box-shadow: 0 24px 60px rgba(18, 18, 18, 0.1); }
html:root body.pg11 span.p11-dlg-h { font-size: 16px; font-weight: 600; color: #121212; }
html:root body.pg11 .p11-dlg-f { display: flex; flex-direction: column; gap: 6px; }
html:root body.pg11 span.p11-dlg-l { font-size: 12.5px; color: #6f6d6a; }
html:root body.pg11 span.p11-dlg-v { padding: 10px 12px; border: 1px solid #e0ddd8; border-radius: 9px; font-size: 14px; color: #121212; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html:root body.pg11 span.p11-dlg-v--url { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; border-color: #121212; }
html:root body.pg11 .p11-dlg-b { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
html:root body.pg11 .p11-dlg-b > span { padding: 8px 14px; border-radius: 9px; font-size: 13.5px; font-weight: 500; }
html:root body.pg11 span.p11-dlg-x { border: 1px solid #e0ddd8; color: #121212; }
html:root body.pg11 span.p11-dlg-ok { background-color: #121212; color: #ffffff; }
html:root body.pg11 .p11-dlg-after { padding: 10px; border-radius: 14px; background-color: #ffffff; }
html:root body.pg11 .p11-dlg-on { display: flex; align-items: center; gap: 10px; }
html:root body.pg11 .p11-dlg-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background-color: #121212; }
html:root body.pg11 .p11-dlg-mark img { width: 20px; height: 20px; filter: invert(1); }
html:root body.pg11 span.p11-dlg-nm { font-size: 14.5px; font-weight: 600; color: #121212; }
html:root body.pg11 span.p11-dlg-st { margin-left: auto; padding: 4px 10px; border-radius: 999px; background-color: #96ff1a; font-size: 12.5px; font-weight: 500; color: #121212; }

html:root body.pg11 .p11-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
html:root body.pg11 main p.p11-tg-p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: #6f6d6a; }
html:root body.pg11 ul.p11-tg-l { list-style: none; margin: 0; padding: 0; }
html:root body.pg11 ul.p11-tg-l li { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 11px 0; border-bottom: 1px solid #efedea; }
html:root body.pg11 ul.p11-tg-l li:last-child { border-bottom: 0; }
html:root body.pg11 ul.p11-tg-l code { padding: 0; background: none; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px; font-weight: 500; color: #121212; overflow-wrap: anywhere; }
html:root body.pg11 ul.p11-tg-l span { font-size: 14px; line-height: 1.45; color: #6f6d6a; }
html:root body.pg11 main p.p11-tools-foot { margin: 18px 0 0; font-size: 14px; line-height: 1.5; color: #6f6d6a; }

/* ---- 11. Widths --------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    html:root body.pg11 ul.p11-gcards { grid-auto-columns: calc((100% - 32px) / 3); }
    html:root body.pg11 .p11-facts--5 ul.p11-facts-g { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    html:root body.pg11 .p11-br-body { grid-template-columns: minmax(0, 1fr) 200px; }
    html:root body.pg11 .p11-fg-body { grid-template-columns: minmax(0, 1fr) 190px; }
}
@media (max-width: 1099.98px) {
    html:root body.pg11 .p11-hero--split .h11-hero-in { grid-template-columns: minmax(0, 1fr); }
    html:root body.pg11 .p11-hero--split .h11-head { max-width: 720px; }
    html:root body.pg11 ul.p11-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html:root body.pg11 .p11-facts--4 ul.p11-facts-g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899.98px) {
    html:root body.pg11 .p11-row, html:root body.pg11 .p11-row--flip { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    html:root body.pg11 .p11-row--flip .p11-row-copy { order: 0; }
    html:root body.pg11 ol.p11-steps, html:root body.pg11 ol.p11-steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html:root body.pg11 ul.p11-facts-g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html:root body.pg11 .p11-band, html:root body.pg11 .p11-band--pics, html:root body.pg11 .p11-con, html:root body.pg11 .p11-how { grid-template-columns: minmax(0, 1fr); }
    html:root body.pg11 .p11-tools { grid-template-columns: minmax(0, 1fr); }
    html:root body.pg11 .hv-faq-side { position: static; }
}
@media (max-width: 699.98px) {
    html:root body.pg11 ul.p11-v--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    html:root body.pg11 .p11-rules { grid-template-columns: minmax(0, 1fr); }
    html:root body.pg11 ul.p11-topics { grid-template-columns: minmax(0, 1fr); }
    html:root body.pg11 .p11-board-g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599.98px) {
    /* The hero on a phone: the homepage's rules stack the frame's children
       (display: contents); these place the pieces this page adds. */
    html:root body.pg11 main form.p11-search, html:root body.pg11 main p.p11-hero-note, html:root body.pg11 main nav.p11-chips { order: 4; }
    html:root body.pg11 .p11-hero-vis, html:root body.pg11 .p11-hero-stage { order: 5; }
    html:root body.pg11 main .p11-h1, html:root body.pg11 main .p11-hero--split .h11-h1 { font-size: 30px; text-align: center; margin: 0 auto; }
    html:root body.pg11 .p11-hero--split .h11-head > * { text-align: center; }
    html:root body.pg11 main .p11-hero--split .h11-sub { margin-left: auto; margin-right: auto; }
    html:root body.pg11 .p11-hero--split .h11-actions { justify-content: center; }
    html:root body.pg11 .p11-hero--split .h11-proof, html:root body.pg11 .p11-hero--split .h11-proof-g, html:root body.pg11 .p11-hero--split .h11-works-list, html:root body.pg11 .p11-hero--split .h11-logos { align-items: center; justify-content: center; }
    html:root body.pg11 .p11-hero-vis { margin: 22px 12px 0; }
    html:root body.pg11 .p11-hero-stage { width: auto; margin: 22px 12px 0; padding-bottom: 16px; }
    html:root body.pg11 .p11-hero--bare .h11-frame { padding-bottom: 0; }
    html:root body.pg11 main form.p11-search { margin: 18px 16px 0; }
    html:root body.pg11 main input.p11-search-in { height: 50px; font-size: 16px; }
    html:root body.pg11 main nav.p11-chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin: 16px 0 0; padding: 0 16px 16px; }
    html:root body.pg11 main nav.p11-chips::-webkit-scrollbar { display: none; }
    html:root body.pg11 main p.p11-hero-note { margin: 10px 0 0; font-size: 13px; }

    html:root body.pg11 main .p11-s-top { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
    html:root body.pg11 main a.p11-s-more { display: none; }
    html:root body.pg11 .p11-s--ind .p11-s-top { padding-right: 0; }
    html:root body.pg11 .p11-ind-nav { display: none; }
    html:root body.pg11 main ul.p11-ind { grid-auto-columns: 58%; gap: 10px; margin: 0 -18px; padding: 0 18px 4px; scroll-padding-left: 18px; }

    /* Visuals at phone size. */
    html:root body.pg11 .p11-v--chat .p11-chat-win { border-radius: 16px; }
    html:root body.pg11 .p11-chat-body { gap: 10px; padding: 12px; }
    html:root body.pg11 .p11-chat-tool { font-size: 11.5px; padding: 5px 9px 5px 5px; }
    html:root body.pg11 span.p11-chat-tool-n { display: none; }
    html:root body.pg11 .p11-chat-reply { font-size: 13px; }
    html:root body.pg11 .p11-site, html:root body.pg11 .p11-br, html:root body.pg11 .p11-fg { border-radius: 14px; }
    html:root body.pg11 .p11-br-bar { height: 30px; padding: 0 10px; }
    html:root body.pg11 span.p11-br-url { font-size: 10.5px; padding: 3px 8px; }
    html:root body.pg11 .p11-br-body { grid-template-columns: minmax(0, 1fr) 46%; min-height: 0; }
    html:root body.pg11 .p11-br-page { gap: 10px; padding: 12px; }
    html:root body.pg11 span.p11-br-title { font-size: 13px; }
    html:root body.pg11 .p11-br-form { gap: 10px; padding: 10px; border-radius: 10px; }
    html:root body.pg11 .p11-br-media { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
    html:root body.pg11 .p11-br-m:nth-child(n+3) { display: none; }
    html:root body.pg11 .p11-br-fl:nth-child(n+2) { display: none; }
    html:root body.pg11 span.p11-br-flv { font-size: 11px; padding: 6px 8px; }
    html:root body.pg11 .p11-br-panel { gap: 8px; padding: 10px 8px; }
    html:root body.pg11 span.p11-br-ask { font-size: 11px; padding: 7px 8px; }
    html:root body.pg11 span.p11-br-hint { display: none; }
    html:root body.pg11 .p11-fg-bar { height: 32px; padding: 0 10px; }
    html:root body.pg11 span.p11-fg-share, html:root body.pg11 span.p11-fg-av { display: none; }
    html:root body.pg11 .p11-fg-body { grid-template-columns: minmax(0, 1fr) 46%; }
    html:root body.pg11 .p11-fg-panel { gap: 7px; padding: 10px 8px; }
    html:root body.pg11 .p11-fg-app:nth-child(n+4) { display: none; }
    html:root body.pg11 .p11-fg-canvas { grid-template-columns: minmax(0, 1fr); padding: 14px; gap: 10px; }
    html:root body.pg11 .p11-fg-frame--1, html:root body.pg11 .p11-fg-frame--2 { display: none; }
    html:root body.pg11 .p11-pay { padding: 16px; border-radius: 18px; }
    html:root body.pg11 main p.p11-pay-h { font-size: 17px; }
    html:root body.pg11 .p11-pay-t td { padding: 9px 10px; }
    html:root body.pg11 .p11-pay-foot strong { font-size: 15px; }
    html:root body.pg11 .p11-card-pic { border-radius: 12px; margin-bottom: 6px; }
    html:root body.pg11 span.p11-card-tag, html:root body.pg11 span.p11-pic-tag { left: 6px; top: 6px; padding: 2px 6px; font-size: 10.5px; }
    html:root body.pg11 span.p11-card-t { font-size: 14px; }
    html:root body.pg11 span.p11-card-d { display: none; }
    html:root body.pg11 .p11-pics { gap: 8px; }
    html:root body.pg11 .p11-pic-i { border-radius: 12px; }
    html:root body.pg11 span.p11-pic-l { font-size: 12px; }
    html:root body.pg11 .p11-flow { gap: 8px; padding: 12px; border-radius: 18px; }
    html:root body.pg11 .p11-flow-in { flex-basis: 20%; }
    html:root body.pg11 .p11-flow-go { display: none; }
    html:root body.pg11 .p11-flow-outs { gap: 6px; }
    html:root body.pg11 .p11-flow-pic { border-radius: 10px; }
    html:root body.pg11 span.p11-flow-l { font-size: 11px; }
    html:root body.pg11 .p11-board { padding: 12px; border-radius: 18px; }
    html:root body.pg11 .p11-clips { gap: 8px; padding: 10px; border-radius: 18px; }
    html:root body.pg11 .p11-clip { border-radius: 12px; }
    html:root body.pg11 .p11-brand-card { right: 4%; width: 168px; padding: 10px; gap: 7px; }
    html:root body.pg11 span.p11-brand-n { font-size: 14px; }
    html:root body.pg11 .p11-brand-sw i { width: 16px; height: 16px; }
    html:root body.pg11 .p11-brand-r { font-size: 11px; }
    html:root body.pg11 .p11-brand-r:nth-of-type(n+3) { display: none; }

    /* Rows, steps, facts, topics, rules, band, connect, tools. */
    html:root body.pg11 .p11-rows { gap: 40px; }
    html:root body.pg11 span.p11-row-n { margin-bottom: 8px; font-size: 12px; }
    html:root body.pg11 main h3.p11-row-h { font-size: 22px; }
    html:root body.pg11 main p.p11-row-d { margin-top: 10px; font-size: 15px; }
    html:root body.pg11 main ul.p11-checks { margin-top: 14px; gap: 8px; }
    html:root body.pg11 main ul.p11-checks li { font-size: 14.5px; }
    html:root body.pg11 .p11-row-acts, html:root body.pg11 .p11-band-acts { margin-top: 18px; }
    html:root body.pg11 .p11-row-acts a.h11-go, html:root body.pg11 .p11-band-acts a.h11-go { flex: 1 1 100%; }
    html:root body.pg11 dl.p11-meta { gap: 10px 22px; margin-top: 16px; padding: 12px 0; }
    html:root body.pg11 .p11-meta-i dd { font-size: 14px; }
    html:root body.pg11 ol.p11-steps, html:root body.pg11 ol.p11-steps--4 {
        display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78%; gap: 10px;
        margin: 0 -18px; padding: 0 18px 4px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    }
    html:root body.pg11 ol.p11-steps::-webkit-scrollbar { display: none; }
    html:root body.pg11 li.p11-step { scroll-snap-align: start; padding: 10px 10px 18px; border-radius: 18px; }
    html:root body.pg11 .p11-step-pic { margin-bottom: 14px; border-radius: 11px; }
    html:root body.pg11 main h3.p11-step-h { font-size: 17px; }
    html:root body.pg11 main p.p11-step-d { font-size: 14px; }
    html:root body.pg11 .p11-facts { padding: 10px; border-radius: 20px; }
    html:root body.pg11 .p11-how { gap: 20px; padding: 18px; border-radius: 20px; }
    html:root body.pg11 .p11-how .p11-band-acts, html:root body.pg11 .p11-how p.p11-band-note { padding-left: 0; }
    html:root body.pg11 .p11-vl { width: 200px; padding: 8px; }
    html:root body.pg11 .p11-vl-r { min-height: 38px; gap: 8px; padding: 0 6px; font-size: 12.5px; }
    html:root body.pg11 .p11-vl-ic { width: 22px; height: 22px; }
    html:root body.pg11 span.p11-vl-d { font-size: 11px; }
    html:root body.pg11 .p11-facts-head { margin: 6px 6px 18px; }
    html:root body.pg11 main h3.p11-facts-h { font-size: 21px; }
    html:root body.pg11 main p.p11-facts-d { font-size: 14.5px; }
    html:root body.pg11 ul.p11-facts-g, html:root body.pg11 .p11-facts--4 ul.p11-facts-g, html:root body.pg11 .p11-facts--5 ul.p11-facts-g { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    html:root body.pg11 .p11-facts--stat ul.p11-facts-g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html:root body.pg11 li.p11-fact { padding: 16px; border-radius: 14px; }
    html:root body.pg11 .p11-fact-ic { width: 32px; height: 32px; margin-bottom: 4px; border-radius: 9px; }
    html:root body.pg11 span.p11-fact-t { font-size: 15.5px; }
    html:root body.pg11 span.p11-fact-d { font-size: 13.5px; }
    html:root body.pg11 .p11-facts--stat span.p11-fact-t { font-size: 30px; }
    html:root body.pg11 .p11-facts--stat li.p11-fact { padding: 16px 14px; gap: 6px; }
    html:root body.pg11 .p11-facts-foot { flex-direction: column; align-items: stretch; margin-top: 14px; padding: 14px 4px 4px; }
    html:root body.pg11 .p11-facts-foot a.h11-go { width: 100%; }
    html:root body.pg11 li.p11-topic { padding: 16px; border-radius: 18px; }
    html:root body.pg11 .p11-topic-ic { width: 36px; height: 36px; margin-bottom: 12px; border-radius: 10px; }
    html:root body.pg11 main h3.p11-topic-h { font-size: 18px; }
    html:root body.pg11 main p.p11-topic-d { margin: 6px 0 12px; font-size: 14px; }
    html:root body.pg11 main ul.p11-topic-l a { font-size: 14.5px; min-height: 44px; }
    html:root body.pg11 .p11-rules-c { padding: 16px; border-radius: 18px; }
    html:root body.pg11 main h3.p11-rules-h { font-size: 18px; }
    html:root body.pg11 .p11-rules-c li { min-height: 46px; font-size: 14.5px; }
    html:root body.pg11 .p11-band { gap: 18px; padding: 18px; border-radius: 20px; }
    html:root body.pg11 main .p11-band-copy p.v4-sub { font-size: 15px; }
    html:root body.pg11 .p11-con { gap: 20px; padding: 16px; border-radius: 20px; }
    html:root body.pg11 .p11-con .h11-tabs.p11-con-tabs { display: flex; width: 100%; overflow-x: auto; }
    html:root body.pg11 main .p11-con button.h11-tab { flex: 1 0 auto; justify-content: center; min-height: 40px; padding: 0 10px; font-size: 13px; }
    html:root body.pg11 ol.p11-con-steps { margin-top: 18px; gap: 16px; }
    html:root body.pg11 ol.p11-con-steps > li { grid-template-columns: 26px minmax(0, 1fr); gap: 10px; }
    html:root body.pg11 span.p11-con-n { width: 26px; height: 26px; font-size: 12.5px; }
    html:root body.pg11 span.p11-con-h { font-size: 16px; }
    html:root body.pg11 span.p11-con-d { font-size: 14.5px; }
    html:root body.pg11 .p11-con-vis { display: none; }
    html:root body.pg11 .p11-gg-top { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
    html:root body.pg11 .p11-gg-side { margin-right: 0; }
    html:root body.pg11 .p11-gg-side a.h11-go { height: 40px; min-height: 40px; font-size: 14px; }
    html:root body.pg11 ul.p11-gcards { grid-auto-columns: 74%; gap: 10px; margin: 0 -18px; padding: 0 18px 4px; scroll-padding-left: 18px; }
    html:root body.pg11 .p11-gcard-pics { border-radius: 14px; margin-bottom: 6px; }
    html:root body.pg11 span.p11-gcard-t { font-size: 16px; }
    html:root body.pg11 span.p11-gcard-d { font-size: 13.5px; }
    html:root body.pg11 .p11-gg + .p11-gg { margin-top: 36px; }
}
@media (prefers-reduced-motion: reduce) {
    html:root body.pg11 ul.p11-gcards, html:root body.pg11 .h11-ind { scroll-behavior: auto; }
}

/* ---- 12. Real pages: several sites, phone screens ------------------------------------ */
html:root body.pg11 .p11-sites { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 16px; }
html:root body.pg11 .p11-sites--2 { --n: 2; }
html:root body.pg11 .p11-sites-i { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
html:root body.pg11 .p11-sites .p11-site { box-shadow: 0 18px 48px rgba(18, 18, 18, 0.1); }
html:root body.pg11 .p11-sites .p11-br-bar { height: 30px; padding: 0 10px; }
html:root body.pg11 .p11-sites span.p11-br-url { font-size: 11px; padding: 3px 9px; }
html:root body.pg11 .p11-phones { display: flex; justify-content: center; gap: clamp(12px, 2vw, 28px); padding: clamp(20px, 3vw, 40px); border-radius: 24px; background-color: #f6f5f3; }
html:root body.pg11 .p11-phone { flex: 0 1 260px; min-width: 0; padding: 8px; border-radius: 30px; background-color: #121212; box-shadow: 0 20px 50px rgba(18, 18, 18, 0.16); }
html:root body.pg11 .p11-phone-scr { display: block; overflow: hidden; aspect-ratio: 9 / 18.5; border-radius: 23px; background-color: #ffffff; }
html:root body.pg11 .p11-phone-scr img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
@media (max-width: 899.98px) {
    html:root body.pg11 .p11-sites { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599.98px) {
    html:root body.pg11 .p11-sites { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 82%; gap: 10px; margin: 0 -18px; padding: 0 18px 4px; overflow-x: auto; scrollbar-width: none; }
    html:root body.pg11 .p11-phones { gap: 8px; padding: 12px; border-radius: 18px; }
    html:root body.pg11 .p11-phone { padding: 4px; border-radius: 18px; }
    html:root body.pg11 .p11-phone-scr { border-radius: 14px; }
}

/* ---- 13. The tab panel: a row of results sized from their own shapes ----------------- */
html:root body.pg11 .p11-show .h11-pane-flow > * { --oh: min(320px, calc((100cqi - 100px) / var(--osum, 2.95))); }

/* ---- 14. QA round 1 (2026-10-26) ----------------------------------------------------- */
/* A real site in the hero reads best a little narrower than the frame. */
html:root body.pg11 .p11-hero-stage .p11-v--site { max-width: 980px; margin: 0 auto; }
html:root body.pg11 .p11-v--site figcaption.p11-cap { text-align: center; }
html:root body.pg11 .p11-fg-frame--1 .p11-fg-fp, html:root body.pg11 .p11-fg-frame--2 .p11-fg-fp { aspect-ratio: 16 / 10; }
@media (max-width: 599.98px) {
    /* A bare hero (the FAQ search) keeps room under its last line. */
    html:root:root body.pg11 .p11-hero--bare .h11-frame { padding-bottom: 22px; }
    /* Picture cards in the hero: one sideways row, cards about 60% wide. */
    html:root body.pg11 .p11-hero-stage ul.p11-v--cards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62%; gap: 10px; margin: 0 -12px; padding: 0 12px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    html:root body.pg11 .p11-hero-stage ul.p11-v--cards::-webkit-scrollbar { display: none; }
    html:root body.pg11 .p11-hero-stage ul.p11-v--cards li { scroll-snap-align: start; }
    html:root body.pg11 .p11-hero-stage span.p11-card-d { display: block; font-size: 13px; }
    html:root body.pg11 .p11-hero-stage span.p11-card-t { font-size: 15.5px; }
    /* The ink panel's tabs: two columns for four tabs, words may wrap. */
    html:root body.pg11 .p11-show.p11-tabs--4 .h11-tabs, html:root body.pg11 .p11-show.p11-tabs--2 .h11-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html:root body.pg11 main .p11-show button.h11-tab { white-space: normal; text-align: center; line-height: 1.2; padding: 6px 6px; }
    /* The board: square pictures keep the four clients short. */
    html:root body.pg11 .p11-board-pic { aspect-ratio: 1 / 1; }
    html:root body.pg11 .p11-gg-side { position: static; }
    html:root body.pg11 .p11-gg .p11-ind-wrap { gap: 14px; }
}

/* ---- 15. QA round 2 (2026-10-26): reviewer findings ---------------------------------- */
/* A band with no picture: the words left, the asks right, no empty half. */
html:root body.pg11 .p11-band:not(.p11-band--pics) { grid-template-columns: minmax(0, 1fr) auto; }
html:root body.pg11 .p11-band-side { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
/* The MCP connect card: the open chat tab is a grey pill (ink is only for
   "Get started free"); Copy is a white hairline button. */
html:root body.pg11 main .p11-con button.h11-tab.is-on { background-color: #f1f0ee; color: #121212; }
html:root body.pg11 main .p11-con button.h11-tab.is-on svg { filter: none; }
html:root body.pg11 main button.p11-copy-b { background-color: #ffffff; border: 1px solid #d7d4cf; color: #121212; }
@media (hover: hover) { html:root body.pg11 main button.p11-copy-b:hover { border-color: #121212; background-color: #ffffff; color: #121212; } }
html:root body.pg11 main button.p11-copy-b.is-done { background-color: #96ff1a; border-color: #96ff1a; color: #121212; }
/* Cards with no shadow (the v4 card rule); the payout card keeps a hairline. */
html:root body.pg11 .p11-pay { box-shadow: none; outline: 0; border: 1px solid #e6e4e1; }
/* Rules: each card as tall as its own list. */
html:root body.pg11 .p11-rules { align-items: start; }
/* FAQ topics: one fixed gap under the line; cards may differ in height. */
html:root body.pg11 ul.p11-topics { align-items: start; }
html:root body.pg11 main ul.p11-topic-l { margin-top: 0; }
/* Three parts or fewer: a shorter stage, so the list fills its height. */
html:root body.pg11 .p11-parts--3 .h11-inx-stage, html:root body.pg11 .p11-parts--2 .h11-inx-stage { height: clamp(360px, 31vw, 450px); }
/* A site shot cropped to its top part (--crop is the box's shape). */
html:root body.pg11 .p11-site-shot[style*="--crop"] { aspect-ratio: var(--crop); }
html:root body.pg11 .p11-v--site figcaption.p11-cap { margin-top: 16px; }
/* The MCP tools: the FAQ's accordion, three columns. */
html:root body.pg11 .p11-tools.v4x-faq { display: block; }
html:root body.pg11 .p11-tools-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: start; }
html:root body.pg11 .p11-tools-g > details.v4x-q { margin: 0; }
html:root body.pg11 span.p11-tg-c { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background-color: #f4f3f1; font-size: 12px; font-weight: 500; vertical-align: 2px; color: #3d3d3c; }
html:root body.pg11 .p11-tools ul.p11-tg-l { margin: 0; padding: 0 2px; background: none; }
html:root body.pg11 .p11-tools main p.p11-tg-p, html:root body.pg11 .p11-tools p.p11-tg-p { margin: 0 0 8px; }
/* Guides: rows as wide as their cards; the topic name links its page. */
html:root body.pg11 ul.p11-gcards--3 { grid-auto-columns: calc((100% - 32px) / 3); }
html:root body.pg11 ul.p11-gcards--2 { grid-auto-columns: calc((100% - 16px) / 2); }
html:root body.pg11 ul.p11-gcards--2 .p11-gcard-pics { aspect-ratio: 16 / 9; }
html:root body.pg11 .p11-gcard-pics--2 img:nth-child(2) { grid-row: 1 / span 2; }
html:root body.pg11 .p11-gcard-pics--1 { grid-template-columns: 1fr; }
html:root body.pg11 main a.p11-gg-h { color: #121212; text-decoration: none; }
@media (hover: hover) { html:root body.pg11 main a.p11-gg-h:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; } }
html:root body.pg11 span.p11-gcard-d { -webkit-line-clamp: 4; }
/* The chat asking before a run. */
html:root body.pg11 .p11-ask-card { align-self: stretch; display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid #e6e4e1; border-radius: 14px; background-color: #ffffff; }
html:root body.pg11 .p11-ask-h { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; color: #121212; }
html:root body.pg11 .p11-ask-h img { flex: none; width: 24px; height: 24px; padding: 3px; border-radius: 7px; background-color: #121212; filter: invert(0); }
html:root body.pg11 span.p11-ask-d { font-size: 13.5px; line-height: 1.45; color: #6f6d6a; }
html:root body.pg11 .p11-ask-b { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
html:root body.pg11 .p11-ask-b > span { padding: 7px 14px; border-radius: 9px; font-size: 13px; font-weight: 500; }
html:root body.pg11 span.p11-ask-no { border: 1px solid #e0ddd8; color: #121212; }
html:root body.pg11 span.p11-ask-ok { background-color: #121212; color: #ffffff; }
/* The email a partner button opens. */
html:root body.pg11 .p11-mail { display: flex; flex-direction: column; overflow: hidden; border: 1px solid #e6e4e1; border-radius: 18px; background-color: #ffffff; }
html:root body.pg11 .p11-mail-top { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #efedea; background-color: #fbfaf9; }
html:root body.pg11 span.p11-mail-t { font-size: 13.5px; font-weight: 600; color: #121212; }
html:root body.pg11 .p11-mail-x { display: flex; gap: 6px; }
html:root body.pg11 .p11-mail-x > i { display: block; width: 9px; height: 9px; border-radius: 50%; background-color: #dcd9d4; }
html:root body.pg11 .p11-mail-f { display: flex; gap: 12px; padding: 11px 16px; border-bottom: 1px solid #efedea; font-size: 13.5px; }
html:root body.pg11 span.p11-mail-l { flex: none; width: 58px; color: #8f8d89; }
html:root body.pg11 span.p11-mail-v { min-width: 0; color: #121212; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html:root body.pg11 .p11-mail-body { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
html:root body.pg11 .p11-mail-ln { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: #3d3d3c; }
html:root body.pg11 .p11-mail-ln > span { flex: none; }
html:root body.pg11 .p11-mail-ln > i { display: block; flex: 1 1 auto; height: 8px; border-radius: 4px; background-color: #f1f0ee; }
html:root body.pg11 span.p11-mail-send { align-self: flex-start; margin: 4px 16px 16px; padding: 8px 16px; border-radius: 9px; background-color: #121212; font-size: 13px; font-weight: 500; color: #ffffff; }
/* A partner's card. */
html:root body.pg11 .p11-pc { overflow: hidden; border: 1px solid #e6e4e1; border-radius: 22px; background-color: #ffffff; }
html:root body.pg11 .p11-pc .p11-site { border-radius: 0; box-shadow: none; outline: 0; }
html:root body.pg11 .p11-pc-b { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px 22px; }
html:root body.pg11 span.p11-pc-tag { font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #8f8d89; }
html:root body.pg11 span.p11-pc-n { font-size: 24px; font-weight: 600; letter-spacing: -0.015em; color: #121212; }
html:root body.pg11 span.p11-pc-d { font-size: 15px; line-height: 1.5; color: #6f6d6a; }
html:root body.pg11 dl.p11-pc-meta { margin-top: 12px; }
html:root body.pg11 .p11-pc-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 16px; }
html:root body.pg11 span.p11-pc-note { font-size: 13px; color: #8f8d89; }
@media (max-width: 899.98px) {
    html:root body.pg11 .p11-tools-g { grid-template-columns: minmax(0, 1fr); }
    html:root body.pg11 .p11-band:not(.p11-band--pics) { grid-template-columns: minmax(0, 1fr); }
    html:root body.pg11 .p11-band-side { justify-content: flex-start; }
}
@media (max-width: 599.98px) {
    html:root body.pg11 .p11-band-side a.h11-go { flex: 1 1 100%; }
    html:root body.pg11 ul.p11-gcards--2, html:root body.pg11 ul.p11-gcards--3 { grid-auto-columns: 74%; }
    html:root body.pg11 ul.p11-gcards--2 .p11-gcard-pics { aspect-ratio: 4 / 3.6; }
    html:root body.pg11 .p11-pc-b { padding: 16px; }
    html:root body.pg11 span.p11-pc-n { font-size: 20px; }
    html:root body.pg11 .p11-mail-f, html:root body.pg11 .p11-mail-body { padding-left: 12px; padding-right: 12px; }
    html:root body.pg11 .p11-parts--3 .h11-inx-stage { height: 320px; }
}
@media (max-width: 599.98px) {
    /* A site shot that has its own phone picture takes that picture's shape. */
    html:root body.pg11 .p11-site-shot[style*="--crop-sm"] { aspect-ratio: var(--crop-sm); }
}

/* ---- 16. QA round 2: phone review and the kit's new pieces ----------------------------- */
/* The connect step's "Open in Claude Desktop" sits under its line. */
html:root:root body.pg11 main a.h11-go.p11-con-cta { margin-top: 12px; }
/* Desktop-only and phone-only pieces (an install link a phone cannot use). */
html:root body.pg11 .p11-phone-only { display: none; }
/* Short tab labels are for phones. */
html:root body.pg11 .p11-tab-short { display: none; }
/* A how-to card with no picture lays its steps in two columns. */
html:root body.pg11 .p11-how--solo ol.p11-how-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 56px; }
html:root body.pg11 .p11-how--solo .p11-band-acts { padding-left: 0; }
/* The close's sub breaks between words, never inside "Sign up". */
html:root body.pg11 main p.h11-end-d { text-wrap: pretty; }
/* Card tags: one line, see-through like the homepage fan's labels. */
html:root body.pg11 span.p11-card-tag { background-color: rgba(255, 255, 255, 0.8); }
@media (max-width: 899.98px) {
    html:root body.pg11 .p11-how--solo ol.p11-how-steps { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 599.98px) {
    html:root body.pg11 .p11-phone-only { display: block; }
    html:root:root:root body.pg11 main .p11-desk-only { display: none !important; }
    html:root body.pg11 .p11-tab-long { display: none; }
    html:root body.pg11 .p11-tab-short { display: inline; }
    /* The H1's two halves run on as one sentence, so a title takes 3 lines. */
    html:root body.pg11 main .p11-h1 .h11-h1-a { display: inline; }
    /* Section asks: stacked, 216 x 40, after their picture (the homepage's
       phone rule: "buttons should be after image"). */
    html:root:root body.pg11 main .p11-row-acts a.h11-go, html:root:root body.pg11 main .p11-band-acts a.h11-go, html:root:root body.pg11 main .p11-band-side a.h11-go, html:root:root body.pg11 main .p11-pc-acts a.h11-go {
        flex: none; width: 216px; max-width: 100%; height: 40px; min-height: 40px; padding: 0 14px; font-size: 14px;
    }
    html:root body.pg11 .p11-row-acts, html:root body.pg11 .p11-band-acts, html:root body.pg11 .p11-band-side { flex-direction: column; align-items: flex-start; gap: 8px; }
    html:root body.pg11 .p11-how { display: flex; flex-direction: column; align-items: stretch; }
    html:root body.pg11 .p11-how-vis, html:root body.pg11 .p11-mail { min-width: 0; max-width: 100%; }
    html:root body.pg11 .p11-how-copy { display: contents; }
    html:root body.pg11 .p11-how-steps { order: 1; }
    html:root body.pg11 .p11-how-vis { order: 2; }
    html:root body.pg11 .p11-how .p11-band-acts { order: 3; margin-top: 4px; }
    html:root body.pg11 .p11-how p.p11-band-note { order: 4; }
    html:root body.pg11 .p11-row { gap: 0; }
    html:root body.pg11 .p11-row-copy { display: contents; }
    html:root body.pg11 .p11-row-vis { order: 2; margin-top: 18px; }
    html:root body.pg11 .p11-row-acts { order: 3; }
    html:root body.pg11 main p.p11-row-note { order: 4; }
    /* The connect card: the four chat tabs in two rows, 44px each. */
    html:root body.pg11 .p11-con .h11-tabs.p11-con-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; overflow: visible; }
    html:root body.pg11 main .p11-con button.h11-tab { min-height: 44px; }
    /* Links inside a sentence stay inline (a site-wide phone rule turns
       links in "-foot" blocks into 44px boxes). */
    html:root:root body.pg11 main p[class*="-foot"] > a { display: inline !important; min-height: 0 !important; padding-block: 12px; }
    html:root:root:root body.pg11 main a.v4-btn-secondary.h11-go.p11-s-more { display: none; }
    /* Notes: 13px at least (a site-wide phone rule forces 12px on "-note"). */
    html:root:root body.pg11 main p.p11-band-note, html:root:root body.pg11 main p.p11-hero-note, html:root:root body.pg11 main p.p11-row-note { font-size: 13px !important; }
    html:root:root body.pg11 main p.p11-rules-note { font-size: 14px !important; }
    html:root body.pg11 main .p11-band-note a, html:root body.pg11 main .p11-hero-note a { padding-block: 12px; }
    /* The hero's picture cards start at the frame's padding. */
    html:root body.pg11 .p11-hero-stage ul.p11-v--cards { scroll-padding-inline: 12px; }
    /* /partners: the payout example lives on /affiliates; four client tiles in one row. */
    html:root body.pg11.pg11--partners .p11-row .p11-v--payout { display: none; }
    html:root body.pg11.pg11--partners .p11-row-vis:has(.p11-v--payout) { display: none; }
    html:root body.pg11 .p11-board-g { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
    html:root body.pg11 .p11-board-n { display: none; }
    html:root body.pg11 .p11-board-c { padding: 3px; border-radius: 10px; }
    html:root body.pg11 .p11-board-pic { aspect-ratio: 3 / 4; border-radius: 8px; }
    /* The payout table, tighter. */
    html:root body.pg11 .p11-pay-t td { padding: 7px 10px; }
    html:root body.pg11 span.p11-pay-s { display: inline; margin: 0 0 0 6px; }
    /* Guides: two lines of the topic line on a phone. */
    html:root body.pg11 .p11-gg-top .v4-sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    html:root body.pg11 .p11-gcard-tags { flex-wrap: nowrap; overflow: hidden; }
    /* FAQ topics: the icon beside the title, the line folded away. */
    html:root body.pg11 li.p11-topic { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; align-items: center; }
    html:root body.pg11 .p11-topic-ic { margin: 0; }
    html:root body.pg11 main p.p11-topic-d { display: none; }
    html:root body.pg11 main ul.p11-topic-l { grid-column: 1 / -1; margin-top: 12px; }
    html:root body.pg11 main h3.p11-topic-h a { display: block; padding-block: 10px; margin-block: -10px; }
}

/* ---- 17. QA round 2, second pass ------------------------------------------------------- */
/* Guide cards: the title is an h3 and the line a p (for search engines); they
   keep the card's own sizes. */
html:root body.pg11 main h3.p11-gcard-t { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: #121212; }
html:root body.pg11 main p.p11-gcard-d { margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 14.5px; line-height: 1.5; color: #6f6d6a; }
@media (hover: hover) { html:root body.pg11 main a.p11-gcard:hover h3.p11-gcard-t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } }
/* A split hero's title fits its half: two lines at 1440. */
html:root body.pg11 main .p11-hero--split .h11-h1 { font-size: clamp(32px, 3.2vw, 48px); max-width: none; }
@media (max-width: 599.98px) {
    html:root body.pg11 main h3.p11-gcard-t { font-size: 16px; }
    html:root body.pg11 main p.p11-gcard-d { font-size: 13.5px; }
    html:root body.pg11 main .p11-hero--split .h11-h1 { font-size: 30px; }
}
@media (max-width: 599.98px) {
    /* A band with a picture: the words, the picture, then the asks. */
    html:root body.pg11 .p11-band--pics { display: flex; flex-direction: column; align-items: stretch; }
    html:root body.pg11 .p11-band--pics .p11-band-copy { display: contents; }
    html:root body.pg11 .p11-band--pics .p11-band-vis { order: 2; }
    html:root body.pg11 .p11-band--pics .p11-band-acts { order: 3; margin-top: 0; }
    html:root body.pg11 .p11-band--pics p.p11-band-note { order: 4; margin-top: 0; }
}