/* Block Theme MCP product page: only what the shared w4-product-* pieces do not cover. */

.w4-product-page--btm h2{text-wrap:balance}

/* Split sections: equal columns, a wider one for a screenshot, and room between the heading and the text under it. */
.w4-product-page--btm .w4-product-split h2{margin:.5rem 0 1rem}
.w4-product-page--btm .w4-product-split .wp-block-column>p:not([class]){margin:0 0 1rem;color:var(--wp--preset--color--muted);line-height:1.7}
@media(min-width:901px){
.w4-product-page--btm .w4-product-split>.wp-block-column{flex:1 1 0}
.w4-product-page--btm .w4-product-split>.w4-btm-media{flex-grow:1.3}
}
/* Two columns need more room than a tablet has: stack the hero and the splits earlier than the shared 700px. */
@media(max-width:900px){
.w4-product-page--btm .w4-product-hero .wp-block-columns,.w4-product-page--btm .w4-product-split{display:flex;flex-direction:column;align-items:stretch!important}
.w4-btm-split--media-first>.wp-block-column:first-child{order:2}
}

/* Hero terminal: the Claude Code command and what happens next. */
.w4-product-page--btm .w4-product-mini-list strong{flex:none}
.w4-btm-terminal{overflow:hidden;border-radius:var(--wp--custom--border--radius-md);background:var(--wp--custom--color--dark-navy-strong);box-shadow:var(--wp--custom--shadow--card)}
.w4-btm-terminal__bar{display:flex;gap:.4rem;margin:0;padding:.7rem .9rem;border-bottom:1px solid color-mix(in srgb,var(--wp--preset--color--background) 10%,transparent)}
.w4-btm-terminal__bar span{width:.6rem;height:.6rem;border-radius:50%;background:color-mix(in srgb,var(--wp--preset--color--background) 24%,transparent)}
.w4-btm-terminal__body{margin:0;padding:1.1rem 1rem 1.25rem;overflow-x:auto;border:0;background:transparent;color:var(--wp--preset--color--background);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:.82rem;line-height:1.7;white-space:pre-wrap;word-break:normal;overflow-wrap:normal}
.w4-btm-terminal__body code{padding:0;background:transparent;color:inherit;font:inherit}
.w4-btm-terminal__prompt{color:var(--wp--custom--color--mint-bright);font-weight:700;user-select:none}
.w4-btm-terminal__comment{color:var(--wp--custom--color--on-dark-subtle)}
.w4-btm-nowrap{white-space:nowrap}

/* Long check items: hang the wrapped lines under the text, not under the tick. */
.w4-btm-checks li{position:relative;padding-left:1.7rem;line-height:1.6}
.w4-btm-checks li:before{position:absolute;left:0;margin-right:0}
.w4-btm-checks li strong{color:var(--wp--preset--color--foreground)}

/* Inline code on a light section. */
.w4-product-page--btm :is(p,li,td,summary,figcaption)>code{padding:.1em .35em;border-radius:var(--wp--custom--border--radius-sm);background:color-mix(in srgb,var(--product-accent) 9%,var(--wp--preset--color--background));color:var(--wp--preset--color--foreground);font-size:.88em;white-space:nowrap}

/* Code sample: the tool name above its arguments. Long lines scroll inside the box. */
.w4-btm-code{margin:0;overflow-x:auto;line-height:1.7;white-space:pre;word-break:normal;overflow-wrap:normal}
.w4-btm-code code{padding:0;background:transparent;color:inherit;font-size:inherit}
.w4-btm-code__label{display:block;margin-bottom:.9rem;padding-bottom:.8rem;border-bottom:1px solid color-mix(in srgb,var(--wp--preset--color--background) 12%,transparent);color:var(--wp--preset--color--background);font-weight:700}

/* The endpoint line under the three ways to connect. */
.w4-btm-endpoint{display:flex;flex-direction:column;gap:.4rem;margin-top:1.5rem}
.w4-btm-endpoint span{color:var(--wp--preset--color--muted);font-size:.75rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.w4-product-page--btm .w4-btm-endpoint>code{display:block;padding:.75rem .9rem;overflow-x:auto;border:1px solid var(--wp--preset--color--border);background:var(--wp--preset--color--background);font-size:.85rem;white-space:nowrap;word-break:normal;overflow-wrap:normal}

/* Screenshots: full column width, natural height, a readable caption. */
.w4-product-page--btm .w4-product-screenshot{margin:0}
.w4-product-page--btm .w4-product-screenshot img{display:block;width:100%;height:auto}
.w4-product-page--btm .w4-product-screenshot figcaption{margin:.9rem .25rem .15rem;color:var(--wp--preset--color--muted);font-size:.85rem;line-height:1.55;text-align:left}

/* Tool groups table. */
.w4-btm-groups{overflow:hidden;border:1px solid var(--wp--preset--color--border);border-radius:var(--wp--custom--border--radius-lg);background:var(--wp--preset--color--background);box-shadow:var(--wp--custom--shadow--soft)}
.w4-btm-groups table{width:100%;margin:0;border-collapse:collapse;font-size:.92rem}
.w4-btm-groups th,.w4-btm-groups td{padding:.85rem 1.1rem;border:0;border-top:1px solid var(--wp--preset--color--border);text-align:left;vertical-align:top}
.w4-btm-groups thead th{border-top:0;color:var(--wp--preset--color--muted);font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.w4-btm-groups tbody th[scope=row]{width:17rem;color:var(--wp--preset--color--foreground);font-weight:700}
.w4-btm-groups td{color:var(--wp--preset--color--muted);line-height:1.6}
.w4-btm-groups td[data-label=Tools]{width:5rem;color:var(--wp--preset--color--foreground);font-weight:700;white-space:nowrap}
.w4-btm-groups td[data-label=Starts]{width:5.5rem}
.w4-btm-groups__set th{padding-block:.6rem;background:var(--wp--preset--color--surface-soft);color:var(--product-accent-dark);font-size:.75rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.w4-btm-pill{display:inline-block;min-width:2.6rem;padding:.14rem .55rem;border:1px solid var(--wp--preset--color--border);border-radius:var(--wp--custom--border--pill);background:var(--wp--preset--color--surface);color:var(--wp--preset--color--muted);font-size:.72rem;font-weight:800;letter-spacing:.04em;text-align:center}
.w4-btm-pill.is-on{border-color:color-mix(in srgb,var(--product-accent) 35%,var(--wp--preset--color--border));background:color-mix(in srgb,var(--product-accent) 11%,var(--wp--preset--color--background));color:var(--product-accent-dark)}

/* FAQ answers sit a little below their question. */
.w4-product-page--btm .w4-product-faq details>p{margin:.6rem 0 0}

/* Get the plugin. */
.w4-btm-download{scroll-margin-top:var(--wp--custom--layout--header-height)}
.w4-btm-requirements{display:flex;flex-direction:column;justify-content:center;padding:clamp(1.5rem,3vw,2.25rem)}
.w4-btm-requirements h3{margin-bottom:.4rem}
.w4-btm-requirements .w4-btm-checks{margin:0}

@media(max-width:782px){
.w4-btm-groups thead{display:none}
.w4-btm-groups table,.w4-btm-groups tbody,.w4-btm-groups tr,.w4-btm-groups th,.w4-btm-groups td{display:block;width:auto}
.w4-btm-groups tbody tr:not(.w4-btm-groups__set){display:grid;grid-template-columns:1fr auto;gap:.35rem .75rem;padding:1rem 1.1rem;border-top:1px solid var(--wp--preset--color--border)}
.w4-btm-groups tbody tr:not(.w4-btm-groups__set)>*{padding:0;border:0}
.w4-btm-groups tbody th[scope=row]{grid-column:1;grid-row:1;width:auto}
.w4-btm-groups td[data-label=Starts]{grid-column:2;grid-row:1;width:auto}
.w4-btm-groups td[data-label=Tools]{grid-column:1/-1;grid-row:2;width:auto;color:var(--wp--preset--color--muted);font-size:.8rem;font-weight:600}
.w4-btm-groups td[data-label=Tools]:before{content:attr(data-label) ": "}
.w4-btm-groups td:last-child{grid-column:1/-1;grid-row:3}
}
@media(min-width:901px) and (max-width:1180px){.w4-btm-terminal__body{font-size:.74rem}}
@media(max-width:480px){
.w4-product-page--btm .w4-product-visual{padding:1rem}
.w4-product-page--btm .w4-product-screenshot{padding:.6rem}
.w4-btm-terminal__body{font-size:.74rem}
.w4-btm-code{font-size:.78rem}
}
