/* ========================================
   /wordpress-mcp/
   Loaded after home.css, pro.css and pro-media.css. Reuses .hero-v2,
   .pro-workflow__label, the /pro/ film facade (.pro-film),
   .tiers, .home-faq, .cta and .tr-btn. This file holds the layouts that are
   specific to this page. Design tokens only (variables.css); the two dark
   colours are the ones /pro/ already uses (.pro-hero-film #121d2e,
   .pro-assistant-film #111c2e). Dashed step lines copy the homepage .plan
   track. No coloured left border or accent edge on any card or block.
   ======================================== */

.wpmcp-page {
    --wpmcp-frame: #121d2e;
    --wpmcp-band: #111c2e;
    --wpmcp-frame-line: rgba(255, 255, 255, 0.1);
    --wpmcp-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
    --wpmcp-dash: repeating-linear-gradient(90deg, var(--tr-color-primary) 0 6px, transparent 6px 12px);
    --wpmcp-dash-v: repeating-linear-gradient(180deg, var(--tr-color-primary) 0 5px, transparent 5px 10px);
}

/* Section rhythm: base, white, base, white, one dark band, white, dark
   pricing band, base, white, emerald close. */
.wpmcp-page .wpmcp-hero    { background: var(--tr-color-base); }
.wpmcp-page .wpmcp-how     { background: var(--tr-color-white); }
.wpmcp-page .wpmcp-way     { background: var(--tr-color-base); }
.wpmcp-page .wpmcp-scope   { background: var(--tr-color-white); }
.wpmcp-page .wpmcp-control { background: var(--wpmcp-band); color: var(--tr-color-white); }
.wpmcp-page .wpmcp-connect { background: var(--tr-color-white); }
.wpmcp-page .wpmcp-compare { background: var(--tr-color-base); }
.wpmcp-page .home-faq      { background: var(--tr-color-white); }

.wpmcp-how,
.wpmcp-way,
.wpmcp-scope,
.wpmcp-control,
.wpmcp-connect {
    padding: var(--tr-spacing-section) 0;
}

/* No small labels above the headings on this page (Sam, 3 Nov): every
   section opens with its h2 right at the section padding, the same as the
   .tiers, .home-faq and .cta sections below. */

/* Small labels in sentence case on this page (Sam, 3 Nov). Two shared
   styles are uppercase elsewhere and only overridden here: the pill label
   (pro.css .pro-workflow__label, also on /pro/) and the footer headings
   (global.css .footer-links h4, every page). .wpmcp-body comes from
   tamrank_wpmcp_body_class(). */
.wpmcp-page .pro-workflow__label,
.wpmcp-body .footer-links h4 {
    letter-spacing: normal;
    text-transform: none;
}

/* Section heads, the /pro/ .pro-adds__head pattern. */
.wpmcp-head {
    max-width: 760px;
    margin: 0 auto var(--tr-space-12);
}

.wpmcp-head--center {
    text-align: center;
}

.wpmcp-head h2,
.wpmcp-way__intro h2 {
    margin: 0;
    text-wrap: balance;
}

.wpmcp-head h2 em {
    font-style: italic;
    color: var(--tr-color-primary);
}

.wpmcp-lede {
    margin: var(--tr-space-4) 0 0;
    font-size: var(--tr-text-lg);
    line-height: 1.7;
    color: var(--tr-color-slate-600);
}

/* Small client icons. The ChatGPT Blossom file carries its own clear space,
   so the helper draws it at twice the size and pulls it in vertically only. */
.wpmcp-client-icon {
    display: inline-block;
    flex-shrink: 0;
    vertical-align: middle;
}

/* The hero kicker is one plain line of text (Sam, 5 Nov): no icons, normal
   word spacing, the two client names in the darker colour. */
.wpmcp-client-name {
    color: var(--tr-color-slate-900);
}

/* ── A · Hero ── */

.wpmcp-hero__layout {
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
}

.wpmcp-hero__kicker {
    margin: 0 0 var(--tr-space-5);
    font-size: var(--tr-text-sm);
    font-weight: var(--tr-font-semibold);
    letter-spacing: 0.01em;
    color: var(--tr-color-slate-600);
}

.wpmcp-hero__title {
    font-size: clamp(2.1rem, 3.4vw, 3.05rem);
    line-height: 1.08;
}

.wpmcp-hero__title em {
    display: inline;
    padding-right: 0.06em;
}

.wpmcp-hero__body {
    margin-bottom: 0;
    max-width: 480px;
    font-size: 1.0625rem;
    line-height: 1.7;
}

.wpmcp-steps {
    position: relative;
    display: grid;
    gap: var(--tr-space-3);
    margin: var(--tr-space-6) 0 var(--tr-space-8);
    padding: 0;
    list-style: none;
    max-width: 480px;
}

/* One dashed line through the three numbers, as on the homepage track. */
.wpmcp-steps::before {
    content: '';
    position: absolute;
    top: 16px;
    bottom: 16px;
    left: 15px;
    width: 2px;
    background: var(--wpmcp-dash-v);
    opacity: 0.45;
}

.wpmcp-steps__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--tr-space-4);
    color: var(--tr-color-slate-900);
    font-size: var(--tr-text-lg);
    font-weight: var(--tr-font-semibold);
    text-align: left;
}

.wpmcp-steps__num {
    position: relative;
    display: inline-grid;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: var(--tr-radius-md);
    background: var(--tr-color-slate-800);
    color: var(--tr-color-primary);
    font-size: var(--tr-text-xs);
    font-weight: var(--tr-font-extrabold);
    box-shadow: var(--tr-shadow-md);
}

.wpmcp-hero__fine {
    margin: 0;
    font-size: var(--tr-text-sm);
    color: var(--tr-color-slate-500);
}

/* The assistant frame. */
.wpmcp-demo {
    margin: 0;
    min-width: 0;
    overflow: hidden;
    background: var(--wpmcp-frame);
    color: var(--tr-color-white);
    border-radius: var(--tr-radius-xl);
    box-shadow: 0 24px 56px rgba(15, 23, 42, 0.14);
}

.wpmcp-demo__head {
    display: flex;
    align-items: center;
    gap: var(--tr-space-3);
    padding: 14px 20px;
    border-bottom: 1px solid var(--wpmcp-frame-line);
    font-size: var(--tr-text-sm);
    color: var(--tr-color-slate-200);
}

.wpmcp-demo__dots {
    display: inline-flex;
    gap: 6px;
}

.wpmcp-demo__dots i {
    width: 9px;
    height: 9px;
    border-radius: var(--tr-radius-full);
    background: rgba(255, 255, 255, 0.18);
}

.wpmcp-demo__app {
    font-weight: var(--tr-font-semibold);
}

.wpmcp-demo__site {
    display: inline-flex;
    align-items: center;
    gap: var(--tr-space-2);
    margin-left: auto;
    font-family: var(--wpmcp-mono);
    font-size: 0.6875rem;
    color: var(--tr-color-slate-400);
    white-space: nowrap;
}

.wpmcp-demo__live {
    width: 7px;
    height: 7px;
    border-radius: var(--tr-radius-full);
    background: var(--tr-color-primary);
}

.wpmcp-demo__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: var(--tr-space-4) var(--tr-space-5);
}

.wpmcp-demo__msg {
    padding: 10px var(--tr-space-4);
    font-size: var(--tr-text-sm);
    line-height: 1.5;
}

.wpmcp-demo__msg p {
    margin: 0;
}

.wpmcp-demo__msg p + p {
    margin-top: var(--tr-space-2);
}

.wpmcp-demo__msg--short {
    padding: var(--tr-space-2) var(--tr-space-4);
}

.wpmcp-demo__stats {
    color: rgba(255, 255, 255, 0.66);
}

.wpmcp-demo__phase {
    display: flex;
    align-items: center;
    gap: var(--tr-space-2);
    margin-top: var(--tr-space-1);
    font-size: var(--tr-text-xs);
    font-weight: var(--tr-font-bold);
    letter-spacing: normal;
    color: var(--tr-color-primary);
}

.wpmcp-demo__phase span {
    color: rgba(255, 255, 255, 0.35);
}

.wpmcp-demo__phase::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--wpmcp-frame-line);
}

.wpmcp-demo__tools {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tr-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.wpmcp-demo__tools li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--wpmcp-frame-line);
    border-radius: var(--tr-radius-md);
    background: rgba(255, 255, 255, 0.04);
    font-family: var(--wpmcp-mono);
    font-size: 0.6875rem;
    color: var(--tr-color-slate-300);
}

.wpmcp-demo__tools li span {
    color: var(--tr-color-primary);
}

.wpmcp-demo__plan {
    padding: var(--tr-space-3);
    border: 1px solid var(--wpmcp-frame-line);
    border-radius: var(--tr-radius-lg);
    background: rgba(255, 255, 255, 0.03);
}

.wpmcp-demo__plan-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--tr-space-2);
    font-size: var(--tr-text-xs);
    font-weight: var(--tr-font-semibold);
    color: var(--tr-color-slate-300);
}

.wpmcp-demo__plan-page {
    font-family: var(--wpmcp-mono);
    font-weight: var(--tr-font-regular);
    color: var(--tr-color-slate-400);
}

.wpmcp-demo__diff {
    margin-top: var(--tr-space-2);
    font-size: 0.6875rem;
}

.wpmcp-demo__done {
    padding-top: 0;
    border-top: 0;
}

.wpmcp-demo__caption {
    padding: 12px 20px 16px;
    border-top: 1px solid var(--wpmcp-frame-line);
    font-size: var(--tr-text-xs);
    color: var(--tr-color-slate-300);
}

/* Demo head: the two tested clients, small. */
.wpmcp-demo__clients {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* The three phases arrive one after another; static without motion. */
.wpmcp-demo__step {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media (prefers-reduced-motion: no-preference) {
    .wpmcp-demo__step {
        animation: wpmcp-step-in 500ms ease both;
        animation-delay: calc(500ms + var(--wpmcp-i, 0) * 350ms);
    }
}

@keyframes wpmcp-step-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* ── B · How it works: rows that alternate text and image ── */

.wpmcp-story {
    display: grid;
    gap: clamp(56px, 7vw, 104px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.wpmcp-story__row {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: center;
    gap: clamp(32px, 6vw, 88px);
}

.wpmcp-story__row--flip {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.wpmcp-story__row--flip .wpmcp-story__copy {
    order: 2;
}

.wpmcp-story__topline {
    display: flex;
    align-items: center;
    gap: var(--tr-space-4);
    margin-bottom: var(--tr-space-4);
}

.wpmcp-story__num {
    color: var(--tr-color-slate-300);
    font-size: var(--tr-text-4xl);
    font-weight: var(--tr-font-extrabold);
    letter-spacing: -0.04em;
    line-height: 1;
}

.wpmcp-story__copy h3 {
    margin: 0 0 var(--tr-space-6);
    font-size: clamp(1.5rem, 2.3vw, 2rem);
    font-weight: var(--tr-font-extrabold);
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: var(--tr-color-slate-900);
}

/* Every image sits on a warm base tile, like the product shots on /pro/. */
.wpmcp-story__media {
    margin: 0;
    padding: clamp(14px, 2.4vw, 32px);
    border-radius: var(--tr-radius-2xl);
    background: var(--tr-color-base);
}

.wpmcp-shot img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--tr-color-surface);
    border-radius: var(--tr-radius-lg);
    box-shadow: 0 16px 48px rgba(15, 23, 42, 0.07);
}

.wpmcp-story__film {
    max-width: none;
}

.wpmcp-story__film .pro-film__stage {
    box-shadow: 0 16px 48px rgba(15, 23, 42, 0.12);
}

.wpmcp-story__film figcaption {
    margin-top: var(--tr-space-3);
}

.wpmcp-list {
    display: flex;
    flex-direction: column;
    gap: var(--tr-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.wpmcp-list li {
    display: flex;
    gap: var(--tr-space-3);
    color: var(--tr-color-slate-600);
    font-size: var(--tr-text-base);
    line-height: 1.6;
}

.wpmcp-list .pro-check,
.wpmcp-need__list .pro-check,
.wpmcp-fit .pro-check {
    flex-shrink: 0;
    color: var(--tr-color-primary);
    font-weight: var(--tr-font-bold);
}

/* ── C · A way of working: a sticky intro next to an open list ── */

.wpmcp-way__layout {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
    gap: clamp(40px, 6vw, 96px);
}

.wpmcp-way__intro {
    position: sticky;
    top: 132px;
}

.wpmcp-way__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wpmcp-way__item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: var(--tr-space-5);
    padding: var(--tr-space-6) 0;
    border-top: 1px solid var(--tr-color-slate-200);
}

.wpmcp-way__item:first-child {
    padding-top: 0;
    border-top: 0;
}

.wpmcp-way__icon {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: var(--tr-radius-lg);
    background: var(--tr-color-white);
    color: var(--tr-color-primary-hover);
    box-shadow: var(--tr-shadow-md);
}

.wpmcp-way__icon svg {
    width: 22px;
    height: 22px;
}

.wpmcp-way__text h3 {
    margin: 0 0 var(--tr-space-2);
    font-size: var(--tr-text-xl);
    font-weight: var(--tr-font-bold);
    color: var(--tr-color-slate-900);
}

.wpmcp-way__text p {
    margin: 0;
    color: var(--tr-color-slate-600);
    font-size: var(--tr-text-base);
    line-height: 1.7;
}

.wpmcp-way__text p + p {
    margin-top: var(--tr-space-1);
}

/* ── D · Scope: an open list next to one panel ── */

.wpmcp-scope__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(32px, 5vw, 72px);
}

.wpmcp-scope__reads {
    padding-top: var(--tr-space-6);
}

.wpmcp-scope__reads h3,
.wpmcp-scope__panel-head h3 {
    margin: 0 0 var(--tr-space-5);
    font-size: var(--tr-text-2xl);
    font-weight: var(--tr-font-extrabold);
    letter-spacing: -0.02em;
    color: var(--tr-color-slate-900);
}

.wpmcp-scope__panel {
    overflow: hidden;
    border: 1px solid var(--tr-color-surface);
    border-radius: var(--tr-radius-2xl);
    background: var(--tr-color-base);
}

.wpmcp-scope__panel-head {
    padding: var(--tr-space-6) var(--tr-space-6) 0;
}

.wpmcp-scope__changes {
    display: grid;
    gap: var(--tr-space-2);
    margin: 0;
    padding: 0 var(--tr-space-4) var(--tr-space-4);
    list-style: none;
}

.wpmcp-scope__changes li {
    display: flex;
    gap: var(--tr-space-3);
    padding: var(--tr-space-4);
    border-radius: var(--tr-radius-lg);
    background: var(--tr-color-white);
    box-shadow: var(--tr-shadow-sm);
    color: var(--tr-color-slate-600);
    font-size: var(--tr-text-base);
    line-height: 1.6;
}

.wpmcp-scope__tick {
    display: inline-grid;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: var(--tr-radius-full);
    background: var(--tr-color-primary-light);
    color: var(--tr-color-primary-hover);
    font-size: var(--tr-text-xs);
    font-weight: var(--tr-font-bold);
}

.wpmcp-scope__item-label {
    display: block;
    margin-bottom: 2px;
    color: var(--tr-color-slate-900);
    font-weight: var(--tr-font-semibold);
}

.wpmcp-scope__stops {
    padding: var(--tr-space-5) var(--tr-space-6) var(--tr-space-6);
    background: var(--tr-color-surface);
    color: var(--tr-color-slate-700);
    font-size: var(--tr-text-base);
    line-height: 1.6;
}

.wpmcp-scope__stops-title {
    margin: 0 0 var(--tr-space-2);
    font-size: var(--tr-text-base);
    font-weight: var(--tr-font-bold);
    color: var(--tr-color-slate-900);
}

.wpmcp-scope__stops p {
    margin: 0;
}

.wpmcp-scope__stops p + p {
    margin-top: var(--tr-space-1);
}

/* A plain note: surface background, no accent edge. */
.wpmcp-note {
    max-width: 760px;
    margin: var(--tr-space-8) auto 0;
    padding: var(--tr-space-5) var(--tr-space-6);
    border-radius: var(--tr-radius-lg);
    background: var(--tr-color-surface);
    color: var(--tr-color-slate-700);
    font-size: var(--tr-text-base);
    line-height: 1.6;
}

.wpmcp-note__title {
    margin: 0 0 var(--tr-space-2);
    font-size: var(--tr-text-base);
    font-weight: var(--tr-font-bold);
    color: var(--tr-color-slate-900);
}

.wpmcp-note p {
    margin: 0;
}

.wpmcp-note p + p {
    margin-top: var(--tr-space-1);
}

/* ── E · Control: the dark /pro/ band, four steps on one dashed line ──
   One 4-column grid on the container width. Number, title and text are
   centred per column; the line runs from the centre of the first number to
   the centre of the last, so every segment between two blocks is the same
   length. The note below spans the same width as the grid. */

.wpmcp-control .wpmcp-head h2 {
    color: var(--tr-color-white);
}

.wpmcp-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--tr-space-8);
    margin: 0;
    padding: 0;
    list-style: none;
}

.wpmcp-timeline::before {
    content: '';
    position: absolute;
    top: 23px;
    left: calc((100% - 3 * var(--tr-space-8)) / 8);
    right: calc((100% - 3 * var(--tr-space-8)) / 8);
    height: 2px;
    background: var(--wpmcp-dash);
    opacity: 0.6;
}

.wpmcp-timeline__step {
    position: relative;
    text-align: center;
}

.wpmcp-timeline__num {
    position: relative;
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    margin: 0 auto var(--tr-space-6);
    border: 1px solid var(--tr-color-slate-700);
    border-radius: var(--tr-radius-md);
    background: var(--tr-color-slate-800);
    color: var(--tr-color-primary);
    font-size: var(--tr-text-lg);
    font-weight: var(--tr-font-extrabold);
    box-shadow: var(--tr-shadow-lg);
}

.wpmcp-timeline__step h3 {
    margin: 0 0 var(--tr-space-3);
    color: var(--tr-color-white);
    font-size: var(--tr-text-xl);
    font-weight: var(--tr-font-bold);
}

.wpmcp-timeline__step p {
    margin: 0;
    color: var(--tr-color-slate-300);
    font-size: var(--tr-text-base);
    line-height: 1.7;
}

.wpmcp-timeline__step p + p {
    margin-top: var(--tr-space-2);
}

.wpmcp-note--dark {
    max-width: none;
    margin: var(--tr-space-12) 0 0;
    border: 1px solid var(--wpmcp-frame-line);
    background: rgba(255, 255, 255, 0.05);
    color: var(--tr-color-slate-300);
}

.wpmcp-note--dark .wpmcp-note__title {
    color: var(--tr-color-white);
}

/* ── F · Connect: per client, three real screens on one dashed track ── */

.wpmcp-url {
    margin-bottom: var(--tr-space-12);
}

.wpmcp-clients__tabs {
    display: flex;
    gap: var(--tr-space-1);
    width: max-content;
    max-width: 100%;
    margin: 0 auto var(--tr-space-10);
    padding: 5px;
    border: 1px solid var(--tr-color-surface);
    border-radius: var(--tr-radius-full);
    background: var(--tr-color-base);
}

.wpmcp-clients__tabs[hidden] {
    display: none;
}

.wpmcp-clients__tab {
    display: inline-flex;
    align-items: center;
    gap: var(--tr-space-2);
    min-height: 44px;
    padding: 0 var(--tr-space-6);
    border: 0;
    border-radius: var(--tr-radius-full);
    background: transparent;
    color: var(--tr-color-slate-600);
    font: inherit;
    font-size: var(--tr-text-base);
    font-weight: var(--tr-font-semibold);
    cursor: pointer;
    transition: background var(--tr-transition-fast), color var(--tr-transition-fast), box-shadow var(--tr-transition-fast);
}

.wpmcp-clients__tab:hover {
    color: var(--tr-color-slate-900);
}

.wpmcp-clients__tab[aria-selected="true"] {
    background: var(--tr-color-white);
    color: var(--tr-color-slate-900);
    box-shadow: var(--tr-shadow-md);
}

.wpmcp-clients__tab:focus-visible {
    outline: 3px solid var(--tr-color-primary);
    outline-offset: 2px;
}

.wpmcp-client {
    display: grid;
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    align-items: start;
    gap: clamp(28px, 4vw, 48px);
}

.wpmcp-client + .wpmcp-client {
    margin-top: var(--tr-space-16);
}

.wpmcp-client[hidden] {
    display: none;
}

/* With tabs on, only one client shows: no gap above the visible one. */
.wpmcp-clients.is-tabbed .wpmcp-client + .wpmcp-client {
    margin-top: 0;
}

.wpmcp-client__card {
    padding: var(--tr-space-6);
    border: 1px solid var(--tr-color-surface);
    border-radius: var(--tr-radius-xl);
    background: var(--tr-color-base);
}

.wpmcp-client__name {
    display: flex;
    align-items: center;
    gap: var(--tr-space-3);
    margin-bottom: var(--tr-space-3);
}

.wpmcp-client__name h3 {
    margin: 0;
    font-size: var(--tr-text-2xl);
    font-weight: var(--tr-font-extrabold);
    color: var(--tr-color-slate-900);
}

.wpmcp-client__card p {
    margin: 0 0 var(--tr-space-2);
    color: var(--tr-color-slate-600);
    font-size: var(--tr-text-base);
    line-height: 1.7;
}

.wpmcp-client__card .wpmcp-link {
    display: inline-block;
    margin-top: var(--tr-space-3);
}

.wpmcp-connect-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--tr-space-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

.wpmcp-connect-steps::before {
    content: '';
    position: absolute;
    top: 17px;
    left: 18px;
    right: calc((100% - 2 * var(--tr-space-6)) / 3 - 18px);
    height: 2px;
    background: var(--wpmcp-dash);
    opacity: 0.6;
}

.wpmcp-connect-step {
    position: relative;
    min-width: 0;
}

.wpmcp-connect-step__num {
    position: relative;
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    margin-bottom: var(--tr-space-4);
    border-radius: var(--tr-radius-md);
    background: var(--tr-color-slate-800);
    color: var(--tr-color-primary);
    font-weight: var(--tr-font-extrabold);
    box-shadow: var(--tr-shadow-lg);
}

.wpmcp-connect-step__shot {
    margin: 0 0 var(--tr-space-4);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--tr-color-slate-200);
    border-radius: var(--tr-radius-lg);
    background: var(--tr-color-base);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07);
}

.wpmcp-connect-step__shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.wpmcp-connect-step h4 {
    margin: 0 0 var(--tr-space-1);
    font-size: var(--tr-text-lg);
    font-weight: var(--tr-font-bold);
    color: var(--tr-color-slate-900);
}

.wpmcp-connect-step p {
    margin: 0;
    color: var(--tr-color-slate-600);
    font-size: var(--tr-text-base);
    line-height: 1.6;
}

.wpmcp-connect-step p + p {
    margin-top: var(--tr-space-1);
}

.wpmcp-connect__after {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--tr-space-6) var(--tr-space-12);
    margin-top: var(--tr-space-12);
    padding-top: var(--tr-space-8);
    border-top: 1px solid var(--tr-color-slate-200);
}

.wpmcp-connect__other h3 {
    margin: 0 0 var(--tr-space-2);
    font-size: var(--tr-text-lg);
    font-weight: var(--tr-font-bold);
    color: var(--tr-color-slate-900);
}

.wpmcp-connect__other p {
    margin: 0;
    color: var(--tr-color-slate-600);
    font-size: var(--tr-text-base);
    line-height: 1.6;
}

.wpmcp-connect__notes {
    display: grid;
    gap: var(--tr-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.wpmcp-connect__notes li {
    display: flex;
    gap: var(--tr-space-3);
    color: var(--tr-color-slate-600);
    font-size: var(--tr-text-base);
    line-height: 1.6;
}

.wpmcp-connect__notes .pro-check {
    flex-shrink: 0;
    color: var(--tr-color-primary);
    font-weight: var(--tr-font-bold);
}

.wpmcp-url {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tr-space-3);
    max-width: 560px;
    margin: 0 auto var(--tr-space-10);
    padding: var(--tr-space-2) var(--tr-space-2) var(--tr-space-2) var(--tr-space-5);
    border: 1px solid var(--tr-color-slate-200);
    border-radius: var(--tr-radius-lg);
    background: var(--tr-color-base);
}

.wpmcp-url__value {
    min-width: 0;
    overflow-wrap: anywhere;
    font-family: var(--wpmcp-mono);
    font-size: var(--tr-text-base);
    color: var(--tr-color-slate-900);
    background: none;
}

.wpmcp-url__copy {
    flex-shrink: 0;
}

.wpmcp-link {
    display: inline-block;
    margin-top: var(--tr-space-2);
    color: var(--tr-color-primary-hover);
    font-weight: var(--tr-font-semibold);
    text-decoration: none;
}

.wpmcp-link:hover {
    color: var(--tr-color-slate-900);
}

/* ── G · What you need, inside the dark .tiers band ── */

.wpmcp-need .tiers__head {
    margin-bottom: var(--tr-space-10);
}

.wpmcp-need__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--tr-space-4) var(--tr-space-10);
    max-width: 920px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.wpmcp-need__list li {
    display: flex;
    gap: var(--tr-space-3);
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.6;
}

.wpmcp-need__cta {
    margin-top: var(--tr-space-10);
    text-align: center;
}

/* ── H · Compare ── */

.wpmcp-table-wrap {
    overflow: hidden;
    border: 1px solid var(--tr-color-slate-200);
    border-radius: var(--tr-radius-xl);
    background: var(--tr-color-white);
    box-shadow: var(--tr-shadow-sm);
}

.wpmcp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--tr-text-base);
    line-height: 1.6;
}

.wpmcp-table th,
.wpmcp-table td {
    padding: var(--tr-space-4) var(--tr-space-5);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--tr-color-slate-100);
}

.wpmcp-table tbody tr:last-child th,
.wpmcp-table tbody tr:last-child td {
    border-bottom: 0;
}

.wpmcp-table thead th {
    font-size: var(--tr-text-sm);
    font-weight: var(--tr-font-bold);
    color: var(--tr-color-slate-900);
    background: var(--tr-color-slate-100);
}

.wpmcp-table thead th:first-of-type {
    color: var(--tr-color-primary-hover);
}

.wpmcp-table thead td {
    background: var(--tr-color-slate-100);
}

.wpmcp-table tbody th {
    width: 20%;
    font-weight: var(--tr-font-semibold);
    color: var(--tr-color-slate-900);
}

.wpmcp-table td {
    color: var(--tr-color-slate-600);
}

.wpmcp-fit {
    margin-top: var(--tr-space-8);
}

/* ── J · CTA ── */

.wpmcp-cta__buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--tr-space-5);
}

.wpmcp-cta__link {
    color: var(--tr-color-white);
    font-weight: var(--tr-font-semibold);
    text-decoration: none;
}

.wpmcp-cta__link:hover {
    text-decoration: underline;
}

.cta .wpmcp-cta__fine {
    margin: var(--tr-space-5) 0 0;
    font-size: var(--tr-text-sm);
    color: rgba(255, 255, 255, 0.85);
}

/* ── Responsive ── */

@media (max-width: 1024px) {
    .wpmcp-client {
        grid-template-columns: 1fr;
    }

    .wpmcp-timeline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: var(--tr-space-10);
    }

    .wpmcp-timeline::before {
        display: none;
    }
}

@media (max-width: 900px) {
    .wpmcp-hero__layout {
        grid-template-columns: 1fr;
        gap: var(--tr-space-10);
    }

    .wpmcp-story__row,
    .wpmcp-story__row--flip,
    .wpmcp-way__layout,
    .wpmcp-scope__layout,
    .wpmcp-connect__after,
    .wpmcp-need__list {
        grid-template-columns: 1fr;
    }

    .wpmcp-story__row--flip .wpmcp-story__copy {
        order: 0;
    }

    .wpmcp-way__intro {
        position: static;
    }

    .wpmcp-scope__reads {
        padding-top: 0;
    }

    /* Table rows become stacked cards; each cell carries its column name. */
    .wpmcp-table thead {
        display: none;
    }

    .wpmcp-table,
    .wpmcp-table tbody,
    .wpmcp-table tr,
    .wpmcp-table th,
    .wpmcp-table td {
        display: block;
        width: 100%;
    }

    .wpmcp-table tbody tr {
        padding: var(--tr-space-2) 0;
        border-bottom: 1px solid var(--tr-color-slate-200);
    }

    .wpmcp-table tbody tr:last-child {
        border-bottom: 0;
    }

    .wpmcp-table th,
    .wpmcp-table td {
        border-bottom: 0;
        padding: var(--tr-space-2) var(--tr-space-5);
    }

    .wpmcp-table td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        font-size: var(--tr-text-xs);
        font-weight: var(--tr-font-bold);
        letter-spacing: normal;
        color: var(--tr-color-slate-500);
    }
}

@media (max-width: 760px) {
    /* Connect steps stack: number, screen and text in one row each. */
    .wpmcp-connect-steps {
        grid-template-columns: 1fr;
        gap: var(--tr-space-8);
    }

    .wpmcp-connect-steps::before {
        top: 18px;
        bottom: 18px;
        left: 17px;
        right: auto;
        width: 2px;
        height: auto;
        background: var(--wpmcp-dash-v);
    }

    .wpmcp-connect-step {
        padding-left: 56px;
    }

    .wpmcp-connect-step__num {
        position: absolute;
        top: 0;
        left: 0;
    }
}

@media (max-width: 640px) {
    .wpmcp-how,
    .wpmcp-way,
    .wpmcp-scope,
    .wpmcp-control,
    .wpmcp-connect {
        padding: var(--tr-spacing-section-mobile) 0;
    }

    .wpmcp-head {
        margin-bottom: var(--tr-space-8);
    }

    .wpmcp-lede {
        font-size: var(--tr-text-base);
    }

    .wpmcp-steps__item {
        font-size: var(--tr-text-base);
    }

    .wpmcp-story__num {
        font-size: var(--tr-text-3xl);
    }

    /* One column: the number in a left gutter, title and text on one left
       edge beside it, a vertical dashed line from number to number. */
    .wpmcp-timeline {
        grid-template-columns: 1fr;
        row-gap: var(--tr-space-8);
    }

    .wpmcp-timeline__step {
        padding-left: 68px;
        min-height: 48px;
        text-align: left;
    }

    .wpmcp-timeline__num {
        position: absolute;
        top: 0;
        left: 0;
        margin: 0;
    }

    .wpmcp-timeline__step h3 {
        padding-top: 11px;
    }

    .wpmcp-timeline__step:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 56px;
        bottom: calc(-1 * var(--tr-space-8) + 8px);
        left: 23px;
        width: 2px;
        background: var(--wpmcp-dash-v);
        opacity: 0.6;
    }

    .wpmcp-note--dark {
        margin-top: var(--tr-space-10);
    }

    .wpmcp-demo__site {
        display: none;
    }

    .wpmcp-demo__body {
        padding: var(--tr-space-4);
    }

    .wpmcp-url {
        flex-direction: column;
        align-items: stretch;
        padding: var(--tr-space-3);
    }

    .wpmcp-url__value {
        font-size: var(--tr-text-sm);
        text-align: center;
    }

    .wpmcp-clients__tabs {
        width: 100%;
    }

    .wpmcp-clients__tab {
        flex: 1;
        justify-content: center;
        padding: 0 var(--tr-space-3);
    }

    .wpmcp-scope__panel-head {
        padding: var(--tr-space-5) var(--tr-space-5) 0;
    }

    .wpmcp-scope__changes {
        padding: 0 var(--tr-space-3) var(--tr-space-3);
    }

    .wpmcp-scope__stops {
        padding: var(--tr-space-5);
    }
}