/**
 * Caminho.DEV — pages.css (MKT-PAGES)
 *
 * The shared stylesheet for the marketing pages added in September 2026: About, How we
 * work, Managed websites, Website ownership, Client portal, the service pages and the
 * proof pages. Loaded AFTER style-v3.css, which still supplies the navbar, the footer,
 * the page ground and the plan cards.
 *
 * Everything here is namespaced `mp-` so nothing reaches the navbar, the footer or any
 * page that predates this file.
 *
 * PALETTE (September 2026 pixel-match pass). This file used to run the site's muted
 * indigo so these pages sat quietly beside the homepage. The approved designs are the
 * reference now, and they are built on a near-black navy heading with a single electric
 * blue used for emphasis, icons and the primary button's gradient. That is what the
 * tokens below carry. Nothing outside `.mp-page` changed, so the navbar and footer keep
 * the site's own colours and the two still read as one brand.
 *
 * DENSITY. The designs are compact: a wider canvas, a shorter rhythm between sections
 * and bigger type on it. --mp-gap is the section rhythm; change it here, not per page.
 */

.mp-page {
  --mp-ink:      #0f1a3d;
  --mp-ink-2:    #1c2854;
  --mp-body:     #525d82;
  --mp-muted:    #697291;
  --mp-line:     #dbe1f2;
  --mp-line-2:   #e7ebf8;
  --mp-accent:   #2563eb;
  --mp-accent-2: #5b3df2;
  --mp-accent-d: #1d4ed8;
  --mp-soft:     #e8efff;
  --mp-tint:     #f1f4fd;
  --mp-tint-2:   #f4f2fd;
  --mp-card:     #ffffff;
  --mp-ok:       #16a34a;
  --mp-bad:      #e02d3c;
  --mp-radius:   16px;
  --mp-shadow:   0 12px 34px rgba(31, 45, 96, 0.07);
  --mp-gap:      62px;
  color: var(--mp-body);
  background: #fff;
}

/* Full-width section backgrounds across the public marketing pages. Keep the header
   and footer gutters, and let .mp-shell constrain the section content. */
.wrap:has(> .mp-page) { max-width: none; padding-inline: 0; }
.wrap:has(> .mp-page) > .site-header,
.wrap:has(> .mp-page) > .site-footer {
  width: min(1392px, calc(100% - 48px));
  margin-inline: auto;
}
@media (max-width: 768px) {
  .wrap:has(> .mp-page) > .site-header,
  .wrap:has(> .mp-page) > .site-footer {
    width: calc(100% - 32px);
  }
}

/* The design's canvas: ~86% of a 1440px viewport, not a column floating inside it. */
.mp-shell { width: min(1280px, 100%); margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }
.mp-sec { padding: var(--mp-gap) 0; position: relative; }
.mp-sec--tight { padding: 42px 0; }
.mp-sec--flush-top { padding-top: 0; }
.mp-sec--flush-bottom { padding-bottom: 0; }
/* The designs alternate white, very light blue and very light lavender. */
.mp-sec--tint { background: var(--mp-tint); }
.mp-sec--lav  { background: var(--mp-tint-2); }

/* Marketing pages: translucent washes over the site's lavender ground.
   Radial fades avoid hard colour changes at the section boundaries. */
.mp-page { background: transparent; }
.mp-page > .mp-hero {
  background: radial-gradient(ellipse at 72% 40%, rgba(190, 211, 255, .22), transparent 70%);
}
.mp-page > .mp-sec--tint {
  background:
    radial-gradient(ellipse at 25% 50%, rgba(176, 204, 255, .28), transparent 70%),
    radial-gradient(ellipse at 80% 55%, rgba(209, 190, 250, .23), transparent 70%);
}
.mp-page > .mp-sec--lav {
  background: radial-gradient(ellipse at center, rgba(209, 190, 250, .23), transparent 72%);
}
.mp-page .mp-cta {
  background: linear-gradient(115deg, rgba(211, 224, 255, .65), rgba(230, 217, 252, .55));
  border-color: rgba(161, 175, 220, .26);
}

/* ── Type ─────────────────────────────────────────────────────────────── */
.mp-eyebrow { display: block; margin: 0 0 12px; font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.17em; text-transform: uppercase; color: var(--mp-accent); }
/* The designs set their headings bold, tight and large against the wider canvas —
   Poppins 700 (800 read heavier than the references), which header.php loads. */
.mp-h1 { margin: 0; font-size: clamp(2.1rem, 3.15vw, 2.8rem); line-height: 1.1; font-weight: 700;
  letter-spacing: -0.028em; color: var(--mp-ink); text-wrap: pretty; }
.mp-h2 { margin: 0; font-size: clamp(1.7rem, 2.65vw, 2.4rem); line-height: 1.14; font-weight: 700;
  letter-spacing: -0.024em; color: var(--mp-ink); text-wrap: balance; }
.mp-h3 { margin: 0 0 8px; font-size: 1.02rem; font-weight: 700; color: var(--mp-ink); letter-spacing: -0.012em; }
/* Solid electric blue, as the designs emphasise — not a gradient wash. */
.mp-em { color: var(--mp-accent); }
.mp-lead { margin: 16px 0 0; max-width: 56ch; font-size: 1.01rem; line-height: 1.68; color: var(--mp-body); }
.mp-small { font-size: 0.86rem; line-height: 1.65; color: var(--mp-muted); }
.mp-page p { line-height: 1.68; }
.mp-page a.mp-link { color: var(--mp-accent); font-weight: 600; text-decoration: none; }
.mp-page a.mp-link:hover { text-decoration: underline; }

/* A section head: heading left, supporting sentence right. Collapses to one column. */
.mp-head { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr); gap: 22px 48px;
  align-items: end; margin-bottom: 30px; }
.mp-head .mp-lead { margin: 0; font-size: 0.93rem; line-height: 1.62; }
.mp-head--center { display: block; text-align: center; max-width: 760px; margin: 0 auto 34px; }
.mp-head--center .mp-lead { margin: 14px auto 0; }

/* ── Buttons ──────────────────────────────────────────────────────────── */
/* One size everywhere: the designs use a compact 46px button with a medium radius, a
   blue→violet gradient on the primary and a white/blue outline on the secondary. */
.mp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.mp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 46px; padding: 0 22px; border-radius: 11px; font: inherit; font-size: 0.9rem; font-weight: 600;
  text-decoration: none; border: 1px solid transparent; cursor: pointer; line-height: 1.2;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease, background .18s ease; }
.mp-btn svg { width: 16px; height: 16px; }
.mp-btn--p { color: #fff; background: linear-gradient(96deg, var(--mp-accent) 0%, var(--mp-accent-2) 100%);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.24); }
.mp-btn--p:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(37, 99, 235, 0.30); color: #fff; }
.mp-btn--s { color: var(--mp-accent-d); background: #fff; border-color: #c5d5fb; font-weight: 600; }
.mp-btn--s:hover { border-color: var(--mp-accent); background: var(--mp-soft); color: var(--mp-accent-d); }
.mp-btn:focus-visible, .mp-page a:focus-visible, .mp-faq summary:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.35); outline-offset: 3px; }

/* The row of ticked assurances under a hero: filled blue discs on one line, as designed. */
.mp-ticks { display: flex; flex-wrap: wrap; gap: 9px 20px; margin: 22px 0 0; padding: 0; list-style: none; }
.mp-ticks li { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--mp-ink-2); font-weight: 500; white-space: nowrap; }
.mp-ticks svg { width: 18px; height: 18px; flex: none; color: #fff; background: var(--mp-accent); border-radius: 50%; padding: 3.5px; }
/* Where the design shows the icons outlined rather than filled (About, How we work). */
.mp-ticks--plain svg { color: var(--mp-accent); background: none; border-radius: 0; padding: 0; width: 18px; height: 18px; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.mp-hero { padding: 52px 0 46px; }
.mp-hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.mp-hero .mp-lead { font-size: 0.98rem; max-width: 50ch; line-height: 1.66; }
/* The designs run a soft blue wash behind the hero and bleed the artwork off the right
   edge of the viewport, so the picture reaches the glass rather than stopping short of
   it. The negative margin is exactly the gutter the shell leaves at this viewport. */
/* The /managed-websites hero background is the template for every service hero: one
   soft blue glow behind the picture and a small lilac one at the top right. */
.mp-hero--wash { background:
    radial-gradient(ellipse 46% 62% at 76% 44%, rgba(176, 204, 255, .30), transparent 72%),
    radial-gradient(ellipse 30% 40% at 94% 16%, rgba(209, 190, 250, .24), transparent 72%); }
/* Where the service-page hero's margin note sits. Presentation, so it is here and not a
   style attribute written into a copy file. Scoped to .mp-note--hero rather than to any
   note inside .mp-hero-art: About puts a second note in its hero and positions it from
   the bottom, and a `top` set here would win over an inline `bottom` and pin it to the
   top of the block instead. */
/* The site header floats over the top of the page and is ~92px tall, so a note set
   ABOVE the hero artwork — where the reference puts it, under a much shorter bar —
   disappears behind it. These sit just inside the top of the art column instead, which
   reads the same and cannot collide. */
.mp-note--hero { right: -8px; top: 12px; }
/* The service template's intro note, above the mock-up's top-right corner. */
.mp-note.mp-note--intro { right: -4px; top: -72px; transform: rotate(-4deg); }
.mp-hero-art--ba .mp-note--hero { left: 1%; right: auto; top: 16px; }
/* A note over a PHOTOGRAPH. The drawn scenes are pale and the note hangs just off their
   right edge; a photograph both bleeds to the glass — so `right: -8px` is off screen —
   and is busy enough that plain blue handwriting stops being readable. So: bring it back
   inside the picture, and give it the white backing the reference photographs get by
   having the line lettered onto a bright part of the shot. */
.mp-hero-art--photo .mp-note--hero { right: 5%; top: 16px; }
@media (max-width: 920px) { .mp-hero-art--photo .mp-note--hero { right: 3%; } }
/* The backing itself, for any hero note that ends up over a photograph — the swapped
   hero art above, and the notes the collage pages deliberately overlap onto the corner
   of a picture (:has(.mp-shot) is "this column holds a real photograph, not a drawn
   scene"). Harmless where a note happens to sit on the pale wash instead: white on
   near-white is invisible. Browsers without :has() simply get today's flat note. */
.mp-hero-art--photo .mp-note,
.mp-hero-art:has(.mp-shot) .mp-note {
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.95), 0 0 14px rgba(255, 255, 255, 0.9),
               0 0 28px rgba(255, 255, 255, 0.75); }
.mp-hero-art--bleed { margin-right: calc(-1 * max(0px, (100vw - 1280px) / 2 + 24px)); }
.mp-hero-art--bleed .mp-workspace, .mp-hero-art--bleed .mp-ba { border-radius: 20px 0 0 20px; }
@media (max-width: 1328px) { .mp-hero-art--bleed { margin-right: -24px; } }
@media (max-width: 920px) { .mp-hero-art--bleed { margin-right: 0; }
  .mp-hero-art--bleed .mp-workspace, .mp-hero-art--bleed .mp-ba { border-radius: 20px; } }
.mp-hero-art { position: relative; min-width: 0; }
/* A hero PHOTOGRAPH gets the larger share of the row, as the designs give it; the drawn
   mock-ups keep the narrower column they were composed for. */
@media (min-width: 921px) { .mp-hero-grid:has(> .mp-hero-art--photo) { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .mp-hero-grid:has(> .mp-hero-art--photo) .mp-h1 { font-size: clamp(2rem, 2.85vw, 2.55rem); } }
.mp-hero--center { text-align: center; }
.mp-hero--center .mp-lead { margin-left: auto; margin-right: auto; }
.mp-hero--center .mp-actions, .mp-hero--center .mp-ticks { justify-content: center; }
.mp-crumbs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; padding: 0; list-style: none;
  font-size: 0.8rem; color: var(--mp-muted); }
.mp-crumbs a { color: var(--mp-accent); text-decoration: none; font-weight: 600; }
.mp-crumbs li + li::before { content: '/'; margin-right: 8px; color: #b3b9d3; }

/* Handwritten margin note — part of the brand identity in every reference design.
   Decorative, so aria-hidden wherever it is used. */
.mp-note { position: absolute; font-family: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  font-size: 1.42rem; font-weight: 600; line-height: 1.12; color: #2f5fe8; transform: rotate(-5deg);
  pointer-events: none; white-space: nowrap; z-index: 6; }
.mp-note svg { display: block; width: 52px; height: 38px; margin-top: 2px; color: #4a78ee; }
.mp-note--sm { font-size: 1.18rem; }
/* Inline (non-absolute) annotation, where the design sets one in the flow of a column. */
.mp-note--flow { position: static; white-space: normal; display: block; }
/* Arrow to the left of the words rather than under them (copy: 'note_arrow' => 'side'). */
.mp-note--side { display: flex; align-items: center; gap: 6px; }
.mp-note--side svg { flex: none; margin-top: 18px; }

/* ── Cards, strips, grids ─────────────────────────────────────────────── */
.mp-grid { display: grid; gap: 18px; }
.mp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mp-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mp-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mp-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.mp-grid--7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }

/* Filter chips, as the portal's ticket panel shows them. */
.mp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.mp-chip { font-size: 0.68rem; font-weight: 600; color: var(--mp-muted); background: #f5f6fb; border-radius: 999px; padding: 5px 10px; }
.mp-chip.on { background: linear-gradient(92deg, var(--mp-accent), var(--mp-accent-2)); color: #fff; }
/* A small square avatar beside a ticket row. */
.mp-sq { width: 22px; height: 22px; border-radius: 7px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.mp-sq svg { width: 12px; height: 12px; color: #fff; }
/* A thumbnail of the customer's own site inside a portal card. */
.mp-thumb { width: 74px; height: 52px; border-radius: 9px; overflow: hidden; flex: none; }

.mp-card { background: var(--mp-card); border: 1px solid var(--mp-line-2); border-radius: 14px;
  padding: 20px 22px; box-shadow: 0 2px 6px rgba(31, 45, 96, 0.035); }
.mp-card p { margin: 0; font-size: 0.89rem; line-height: 1.6; color: var(--mp-body); }
.mp-card .mp-h3 { font-size: 1rem; line-height: 1.34; }
.mp-card--row { display: flex; gap: 14px; align-items: flex-start; }
.mp-card--row .mp-ico { margin: 0; }
.mp-card-num { font-size: 0.82rem; font-weight: 700; color: var(--mp-accent); margin-right: 7px; }
.mp-ico { width: 40px; height: 40px; border-radius: 11px; background: var(--mp-soft); color: var(--mp-accent);
  display: inline-flex; align-items: center; justify-content: center; flex: none; margin-bottom: 13px; }
.mp-ico svg { width: 20px; height: 20px; }
.mp-ico--lg { width: 52px; height: 52px; border-radius: 15px; }
.mp-ico--lg svg { width: 24px; height: 24px; }
/* A bare blue line icon with no tile behind it, as several reference rows draw them. */
.mp-ico--bare { background: none; width: auto; height: auto; border-radius: 0; }
/* Six across with the icon beside the words is a narrow card: the icon gets out of the
   way so the title still has room to breathe, as it does in the About reference. */
.mp-grid--6 .mp-card--row { gap: 11px; padding: 18px 16px; }
.mp-grid--6 .mp-card--row .mp-ico { width: 30px; height: 30px; border-radius: 9px; }
.mp-grid--6 .mp-card--row .mp-ico svg { width: 16px; height: 16px; }
.mp-grid--6 .mp-card .mp-h3 { font-size: 0.88rem; line-height: 1.28; margin: 0; }
.mp-grid--6 .mp-card p { font-size: 0.82rem; line-height: 1.55; }
/* Six across is too narrow for a column of text beside the icon, so the designs put the
   icon and title on one line and let the text run the full card width underneath.
   display:contents lifts the title and text out of their wrapper into this grid. */
.mp-grid--6 .mp-card--row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; align-content: start; column-gap: 11px; }
.mp-grid--6 .mp-card--row > div { display: contents; }
.mp-grid--6 .mp-card--row p { grid-column: 1 / -1; margin-top: 10px; }
/* Five across, likewise (How we work's after-launch row). */
.mp-grid--5 .mp-card--row { gap: 12px; padding: 18px 18px; }
.mp-grid--5 .mp-card--row .mp-ico { width: 34px; height: 34px; border-radius: 10px; }
.mp-grid--5 .mp-card--row .mp-ico svg { width: 17px; height: 17px; }
.mp-grid--5 .mp-card .mp-h3 { font-size: 0.9rem; line-height: 1.3; }
.mp-grid--5 .mp-card p { font-size: 0.79rem; }
/* An icon sitting inline in a line of text. Without a box of its own an SVG with no
   width/height stretches to fill its flex parent — which is how the local-SEO search
   bar briefly rendered a magnifying glass the size of the illustration. */
.mp-ico-inline { display: inline-flex; flex: none; width: 18px; height: 18px; color: var(--mp-accent); }
.mp-ico-inline svg { width: 100%; height: 100%; }

/* Five or six one-line capabilities in a single band, divided by hairlines. The designs
   give it a big blue line icon and a compact two-line label. */
.mp-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); background: #fff;
  border: 1px solid var(--mp-line-2); border-radius: 16px; padding: 24px 8px; box-shadow: var(--mp-shadow); }
.mp-strip-item { text-align: center; padding: 0 18px; }
.mp-strip-item + .mp-strip-item { border-left: 1px solid var(--mp-line-2); }
.mp-strip-item svg { width: 30px; height: 30px; color: var(--mp-accent); margin-bottom: 11px; }
.mp-strip-item strong { display: block; font-size: 0.875rem; font-weight: 700; color: var(--mp-ink); line-height: 1.38; }
.mp-strip-item span { display: block; margin-top: 3px; font-size: 0.78rem; color: var(--mp-muted); line-height: 1.42; }

.mp-panel { background: #fff; border: 1px solid var(--mp-line-2); border-radius: 18px; padding: 28px; box-shadow: var(--mp-shadow); }
.mp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; align-items: center; }
.mp-split--top { align-items: start; }

/* ── Lists ────────────────────────────────────────────────────────────── */
.mp-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 11px; }
.mp-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.9rem; color: var(--mp-body); line-height: 1.55; }
.mp-list svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.mp-list--ok svg { color: #fff; background: var(--mp-accent); border-radius: 50%; padding: 3.5px; }
.mp-list--bad svg { color: #fff; background: var(--mp-bad); border-radius: 50%; padding: 3.5px; }
/* The redesign design sets its "a modern website can help you" list in green against the
   red problem list beside it — the contrast is the point of that section. */
.mp-list--good svg { color: #fff; background: var(--mp-ok); border-radius: 50%; padding: 3.5px; }
.mp-list--plain svg { color: var(--mp-accent); }
.mp-list--lg { gap: 14px; }
.mp-list--lg li { font-size: 0.94rem; }
.mp-list--lg svg { width: 23px; height: 23px; padding: 4.5px; }
.mp-list--tight { gap: 8px; }
.mp-list--tight li { font-size: 0.85rem; }

/* ── Process steps ────────────────────────────────────────────────────── */
/* The eight-step journey on How we work: a numbered badge sitting on the card's top
   edge, an icon tile, a title and a sentence — with a drawn arrow in each gap. */
.mp-steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 26px; counter-reset: mpstep; }
.mp-step { position: relative; background: #fff; border: 1px solid var(--mp-line-2); border-radius: 14px;
  padding: 24px 14px 18px; text-align: center; box-shadow: 0 2px 6px rgba(31, 45, 96, 0.035); }
.mp-step-n { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); width: 26px; height: 26px;
  border-radius: 50%; background: var(--mp-accent); color: #fff;
  font-size: 0.74rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 5px 12px rgba(37, 99, 235, 0.32); }
.mp-step .mp-ico { margin: 6px auto 10px; }
.mp-step h3 { font-size: 0.88rem; margin: 0 0 6px; color: var(--mp-ink); line-height: 1.3; }
.mp-step p { margin: 0; font-size: 0.76rem; color: var(--mp-muted); line-height: 1.5; }
/* The connector: a line and a head, drawn in the gap between two cards. */
.mp-step + .mp-step::before { content: ''; position: absolute; left: -19px; top: 46px; width: 12px; height: 2px;
  background: #9fb8f4; }
.mp-step + .mp-step::after { content: ''; position: absolute; left: -11px; top: 46px; width: 7px; height: 7px;
  border-top: 2px solid #9fb8f4; border-right: 2px solid #9fb8f4; transform: translateY(-2.5px) rotate(45deg); }

/* The simpler horizontal numbered rail — number and title on one line with a hairline
   running out to the right of it, and the sentence beneath. As the designs draw it. */
.mp-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 28px; }
.mp-rail-item { position: relative; }
.mp-rail-head { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.mp-rail-head::after { content: ''; flex: 1; height: 1px; background: var(--mp-line); }
.mp-rail-n { display: inline-flex; width: 28px; height: 28px; border-radius: 50%; align-items: center; justify-content: center;
  background: var(--mp-accent); color: #fff; font-weight: 700; font-size: 0.8rem; flex: none;
  box-shadow: 0 5px 12px rgba(37, 99, 235, 0.28); }
.mp-rail-item h3 { font-size: 0.95rem; margin: 0; color: var(--mp-accent-d); font-weight: 700; white-space: nowrap; }
.mp-rail-item p { margin: 0; font-size: 0.83rem; line-height: 1.55; color: var(--mp-muted); }
/* Vertical dividers instead of trailing rules, as the redesign timeline draws them. */
.mp-rail--div { gap: 0; }
.mp-rail--div .mp-rail-item { padding: 0 26px; }
.mp-rail--div .mp-rail-item:first-child { padding-left: 0; }
.mp-rail--div .mp-rail-item + .mp-rail-item { border-left: 1px solid var(--mp-line); }
.mp-rail--div .mp-rail-head::after { display: none; }

/* ── Callout: the one proposition a page must not bury ────────────────── */
/* "Built first. Pay once you approve it." — the design gives it a full-width panel with
   the proposition set large on the left and the supporting block on the right. */
.mp-callout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 34px; align-items: center;
  background: #fff; border: 1px solid #d5e0fb; border-radius: 18px; padding: 32px 34px;
  box-shadow: 0 14px 40px rgba(37, 99, 235, 0.07); position: relative; overflow: hidden; }
.mp-callout::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: linear-gradient(180deg, var(--mp-accent), var(--mp-accent-2)); }
.mp-callout .mp-h2 { font-size: clamp(1.6rem, 2.75vw, 2.25rem); }
.mp-callout p { margin: 12px 0 0; font-size: 0.94rem; line-height: 1.66; }
.mp-callout-facts { background: var(--mp-tint); border-radius: 14px; padding: 20px 22px; }
.mp-callout-facts h3 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: .14em; color: var(--mp-accent); margin: 0 0 12px; }
.mp-fineprint { margin: 13px 0 0; font-size: 0.78rem; color: var(--mp-muted); }
.mp-fineprint a { color: var(--mp-accent); }

/* ── Comparison table ─────────────────────────────────────────────────── */
/* The managed/one-off comparison, as the design draws it: feature names down the left,
   the two options centred beside them, and the recommended column tinted and outlined
   from the header to the last row. */
.mp-table-wrap { overflow-x: auto; border-radius: 16px; border: 1px solid var(--mp-line); background: #fff; box-shadow: var(--mp-shadow); }
.mp-table { width: 100%; border-collapse: collapse; min-width: 620px; font-size: 0.84rem; }
.mp-table th, .mp-table td { padding: 12px 16px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--mp-line-2); }
.mp-table thead th { font-size: 0.9rem; font-weight: 700; color: var(--mp-ink); background: #fff; vertical-align: bottom; padding-top: 18px; padding-bottom: 14px; }
.mp-table thead th small { display: block; font-weight: 500; color: var(--mp-muted); font-size: 0.74rem; margin-top: 2px; }
.mp-table tbody th { font-weight: 500; color: var(--mp-ink-2); }
.mp-table td { color: var(--mp-body); text-align: center; }
.mp-table thead th + th { text-align: center; }
/* tbody only: the header row is also its section's last row, and used to lose its line. */
.mp-table tbody tr:last-child th, .mp-table tbody tr:last-child td { border-bottom: 0; }
/* The recommended column: tint plus a side border that runs the height of the table. */
.mp-table .mp-col-hi { background: #f2f6ff; border-left: 1px solid #bed2fb; border-right: 1px solid #bed2fb; }
.mp-table thead .mp-col-hi { border-top: 1px solid #bed2fb; color: var(--mp-accent-d); }
.mp-table tbody tr:last-child .mp-col-hi { border-bottom: 1px solid #bed2fb; }
.mp-table .mp-yes { color: var(--mp-ok); font-weight: 600; }
.mp-table .mp-inc { color: var(--mp-accent-d); font-weight: 600; }
.mp-table .mp-tick svg { width: 19px; height: 19px; color: var(--mp-ok); vertical-align: -4px; stroke-width: 2.4; }
.mp-table-head-ico { display: flex; gap: 10px; align-items: center; justify-content: center; }
.mp-table-head-ico .mp-ico { margin: 0; width: 32px; height: 32px; border-radius: 9px; }
.mp-table-head-ico .mp-ico svg { width: 17px; height: 17px; }
.mp-table-head-ico > span:last-child { text-align: left; }

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.mp-faq-grid { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.48fr); gap: 48px; align-items: start; }
.mp-faq { display: grid; gap: 9px; }
.mp-faq--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 16px; align-items: start; }
.mp-faq details { background: #fff; border: 1px solid var(--mp-line-2); border-radius: 11px; }
.mp-faq summary { list-style: none; cursor: pointer; padding: 15px 46px 15px 18px; font-size: 0.875rem; font-weight: 600;
  color: var(--mp-ink-2); position: relative; line-height: 1.45; }
.mp-faq summary::-webkit-details-marker { display: none; }
.mp-faq summary::after { content: ''; position: absolute; right: 20px; top: 50%; width: 8px; height: 8px;
  border-right: 2px solid var(--mp-accent); border-bottom: 2px solid var(--mp-accent); transform: translateY(-70%) rotate(45deg);
  transition: transform .2s ease; }
.mp-faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.mp-faq details > div { padding: 0 20px 18px; font-size: 0.88rem; color: var(--mp-body); line-height: 1.7; }
.mp-faq details > div p { margin: 0 0 10px; }
.mp-faq details > div p:last-child { margin: 0; }
.mp-faq details > div a { color: var(--mp-accent); font-weight: 600; }

/* ── Closing CTA ──────────────────────────────────────────────────────── */
/* The service designs close on a soft blue panel with a gift mark on the left, the line
   in the middle and the button on the right. */
.mp-cta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px 34px; align-items: center;
  background: linear-gradient(115deg, #eef2fe 0%, #eef4ff 55%, #f3f0fe 100%); border: 1px solid #d9e2fb;
  border-radius: 18px; padding: 30px 36px; }
/* The closing call-to-action card spans the same width as the footer under it (see
   assets/css/footer.css): the page content width, up to 1244px, never narrower than its
   section. Centred on the section with a negative margin, so the reveal animation's
   transform is left alone. */
.mp-cta:not(.mp-cta--band) {
  --mp-cta-w: min(calc(100vw - 48px), max(100%, min(1244px, 82vw)));
  width: var(--mp-cta-w);
  margin-left: calc((100% - var(--mp-cta-w)) / 2);
}
.mp-cta .mp-h2 { font-size: clamp(1.45rem, 2.4vw, 1.95rem); }
.mp-cta p { margin: 8px 0 0; font-size: 0.93rem; }
.mp-cta .mp-actions { margin: 0; }
.mp-cta-mark { width: 74px; height: 74px; border-radius: 50%; background: #fff; color: var(--mp-accent);
  display: flex; align-items: center; justify-content: center; flex: none; box-shadow: 0 8px 22px rgba(37, 99, 235, 0.12); }
.mp-cta-mark svg { width: 32px; height: 32px; }
.mp-cta-assure { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.mp-cta-assure li { font-size: 0.8rem; color: var(--mp-muted); display: flex; gap: 6px; align-items: center; }
.mp-cta-assure svg { width: 14px; height: 14px; color: var(--mp-accent); }
/* How we work and About close on a full-width lavender band instead of a panel. */
.mp-cta--band { border-radius: 0; border: 0; border-top: 1px solid #e2e5fa; background: linear-gradient(115deg, #eceffd 0%, #eff1fe 60%, #f4f1fe 100%);
  padding: 46px 0; grid-template-columns: minmax(0, 1.25fr) auto auto; gap: 26px 44px; }
.mp-cta--band > * { max-width: 100%; }
.mp-cta-band-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) auto auto; gap: 26px 44px; align-items: center; }
.mp-cta-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.mp-cta-ticks li { display: flex; align-items: center; gap: 9px; font-size: 0.88rem; color: var(--mp-ink-2); }
.mp-cta-ticks svg { width: 18px; height: 18px; flex: none; color: #fff; background: var(--mp-accent); border-radius: 50%; padding: 3.5px; }
@media (max-width: 920px) { .mp-cta-band-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; } }

/* ── Quote / founder ──────────────────────────────────────────────────── */
.mp-founder { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 26px; align-items: start; }
.mp-avatar { width: 150px; height: 150px; border-radius: 22px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, #dfe3ff 0%, #ece3ff 100%); color: var(--mp-accent); font-size: 3.2rem; font-weight: 700;
  letter-spacing: -0.04em; overflow: hidden; }
.mp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mp-avatar--sm { width: 64px; height: 64px; border-radius: 16px; font-size: 1.5rem; }
.mp-avatar--xs { width: 44px; height: 44px; border-radius: 50%; font-size: 1.05rem; flex: none; }
.mp-founder-panel { display: grid; grid-template-columns: 180px minmax(0, 1.3fr) minmax(0, 0.9fr); gap: 32px; align-items: start; }

/* The team hero collage: staggered portrait tiles with a card over them. */
.mp-team-collage { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px; max-width: 430px; margin-left: auto; }
.mp-team-collage > .mp-team-tile:nth-child(odd) { transform: translateY(18px); }
.mp-team-tile { position: relative; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden;
  background: linear-gradient(140deg, #dfe3ff 0%, #ece3ff 100%);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 16px 36px rgba(47, 57, 103, 0.14); }
.mp-team-initial { font-size: 2.6rem; font-weight: 700; color: var(--mp-accent); letter-spacing: -0.04em; }
.mp-team-name { position: absolute; left: 10px; bottom: 10px; font-size: 0.72rem; font-weight: 600; color: #fff;
  background: rgba(28, 33, 69, 0.55); backdrop-filter: blur(2px); padding: 4px 9px; border-radius: 999px; }
.mp-team-card { right: -18px; top: 42%; max-width: 210px; }
@media (max-width: 640px) { .mp-team-collage { max-width: none; } .mp-team-card { display: none; } }
.mp-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 18px; font-size: 0.84rem; color: var(--mp-body); }
.mp-meta span { display: inline-flex; align-items: center; gap: 7px; }
.mp-meta svg { width: 16px; height: 16px; color: var(--mp-accent); }

.mp-quote { margin: 0; background: #fff; border: 1px solid var(--mp-line-2); border-radius: 18px; padding: 24px; }
.mp-quote blockquote { margin: 0; font-size: 0.95rem; line-height: 1.7; color: var(--mp-ink-2); }
.mp-quote figcaption { margin-top: 14px; font-size: 0.82rem; color: var(--mp-muted); }
.mp-quote figcaption strong { color: var(--mp-ink-2); display: block; font-size: 0.88rem; }

/* ── Chips / tags / status ────────────────────────────────────────────── */
.mp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.mp-tag { font-size: 0.72rem; font-weight: 600; color: #4f58c2; background: var(--mp-soft); border-radius: 999px; padding: 5px 11px; }
.mp-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 700; border-radius: 999px; padding: 4px 10px; }
.mp-pill--ok   { color: #0f7a3a; background: #e6f7ec; }
.mp-pill--wait { color: #9a5b00; background: #fff3dc; }
.mp-pill--info { color: #3a47b8; background: #e9ecff; }
.mp-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ── Brand pair (About: CaminhoIT and Caminho.DEV) ────────────────────── */
.mp-brand-card { background: #fff; border: 1px solid var(--mp-line-2); border-radius: 20px; padding: 26px; }
.mp-brand-card--hi { background: linear-gradient(160deg, #f4f2ff 0%, #eef3ff 100%); border-color: rgba(145, 150, 240, 0.45); }
.mp-brand-name { font-size: 1.28rem; font-weight: 700; color: var(--mp-ink); letter-spacing: -0.02em; }
.mp-brand-name b { color: var(--mp-accent); font-weight: 700; }
.mp-brand-sub { margin: 4px 0 16px; font-size: 0.84rem; color: var(--mp-muted); }

/* ── Photograph slots and drawn scenes ────────────────────────────────── */
/* mp_photo() renders an <img> when a real file exists and a drawn scene when it does
   not — the same box either way, so dropping a photograph in changes nothing else. */
.mp-shot { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.mp-scene { overflow: hidden; background: #eef1fb; }
.mp-scene svg { display: block; width: 100%; height: 100%; }

/* The About hero collage: photo cards and floating labels, as the reference lays them out. */
.mp-collage { position: relative; width: 100%; padding-top: 74%; }
.mp-collage > * { position: absolute; }
.mp-collage-card { border-radius: 16px; overflow: hidden; background: #fff;
  box-shadow: 0 22px 48px rgba(47, 57, 103, 0.16); border: 4px solid #fff; }
.mp-collage-card .mp-shot { border-radius: 12px; }
.mp-collage .mp-float { position: absolute; }

/* A stylised locator map — Portugal and the UK, with the route between them. */
.mp-map { width: 100%; max-width: 420px; }
.mp-map svg { width: 100%; height: auto; display: block; }

/* ── Illustrative UI mock-ups ─────────────────────────────────────────── */
/* Every one of these is built from boxes, not screenshots, and none shows a real
   customer's data. Where one could be mistaken for a real screen, the markup carries a
   visible "Illustration" label. */
.mp-mock-label { position: absolute; left: 14px; bottom: -28px; font-size: 0.72rem; color: var(--mp-muted); }
.mp-browser { position: relative; background: #fff; border-radius: 16px; border: 1px solid var(--mp-line);
  box-shadow: 0 30px 70px rgba(47, 57, 103, 0.16); overflow: hidden; }
.mp-browser-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--mp-line-2); background: #fbfbff; }
.mp-browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: #e3e5f0; }
.mp-browser-bar i:nth-child(1) { background: #ff6b63; } .mp-browser-bar i:nth-child(2) { background: #ffc043; } .mp-browser-bar i:nth-child(3) { background: #37c95a; }
.mp-browser-url { margin-left: 10px; flex: 1; height: 20px; border-radius: 6px; background: #f0f1f8; font-size: 0.66rem; color: #9aa0bb;
  display: flex; align-items: center; padding: 0 10px; }
.mp-browser-body { position: relative; }

/* A generic small-business site, drawn. */
.mp-site { display: grid; grid-template-rows: auto 1fr; min-height: 300px; }
.mp-site-nav { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; font-size: 0.66rem; color: #6d7597; }
.mp-site-nav b { font-size: 0.78rem; color: #1f5f45; display: flex; align-items: center; gap: 6px; }
.mp-site-nav b::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: currentColor; opacity: .85; }
.mp-site-nav span { display: flex; gap: 12px; }
.mp-site-nav em { font-style: normal; background: #1f7a52; color: #fff; padding: 4px 9px; border-radius: 6px; }
.mp-site-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 0; }
.mp-site-copy { padding: 26px 18px 26px 22px; }
.mp-site-copy h4 { margin: 0 0 8px; font-family: Georgia, "Times New Roman", serif; font-size: 1.35rem; line-height: 1.12; color: #1b2340; font-weight: 700; }
.mp-site-copy p { margin: 0 0 12px; font-size: 0.66rem; line-height: 1.5; color: #737a95; }
.mp-site-btns { display: flex; gap: 6px; }
.mp-site-btns span { font-size: 0.6rem; font-weight: 700; padding: 6px 10px; border-radius: 6px; background: #1f7a52; color: #fff; }
.mp-site-btns span + span { background: #fff; color: #1f7a52; border: 1px solid #cfe3d8; }
.mp-site-pic { min-height: 190px; background:
    radial-gradient(circle at 70% 30%, rgba(255,255,255,0.7) 0 14%, transparent 15%),
    linear-gradient(160deg, #f5ede3 0%, #e7d8c6 55%, #d8c3aa 100%); position: relative; }
.mp-site-pic::before { content: ''; position: absolute; left: 18%; bottom: 18%; width: 46%; height: 34%; border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, #fff 0%, #f1ebe4 100%); box-shadow: 0 8px 18px rgba(80,60,40,.15); }
.mp-site-pic::after { content: ''; position: absolute; right: 16%; bottom: 18%; width: 16%; height: 52%; border-radius: 40% 40% 8px 8px;
  background: linear-gradient(180deg, #6f9a73 0%, #4c7a55 100%); }
.mp-site-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px 18px 16px; }
.mp-site-strip span { font-size: 0.6rem; color: #6d7597; background: #f6f7fb; border-radius: 8px; padding: 8px; }
.mp-site-strip b { display: block; color: #2b3354; font-size: 0.64rem; margin-bottom: 2px; }

/* Variant palettes for the drawn site. */
.mp-site--blue .mp-site-nav b { color: #2c4bc7; } .mp-site--blue .mp-site-nav em, .mp-site--blue .mp-site-btns span { background: #3552d4; }
.mp-site--blue .mp-site-btns span + span { background: #fff; color: #3552d4; border-color: #cdd6fb; }
.mp-site--blue .mp-site-pic { background: linear-gradient(160deg, #cfe3f7 0%, #a9c9ea 45%, #7fa6d3 100%); }
.mp-site--blue .mp-site-pic::before { background: linear-gradient(180deg, #fbfbfd 0%, #e8edf5 100%); }
.mp-site--blue .mp-site-pic::after { background: linear-gradient(180deg, #e9d7b8 0%, #c9aa7c 100%); border-radius: 6px; }
.mp-site--warm .mp-site-nav b { color: #9a4b22; } .mp-site--warm .mp-site-nav em, .mp-site--warm .mp-site-btns span { background: #b5562a; }
.mp-site--warm .mp-site-btns span + span { background: #fff; color: #b5562a; border-color: #f0d5c6; }
.mp-site--warm .mp-site-pic { background: linear-gradient(160deg, #fde7cf 0%, #f4c59a 50%, #d98f5c 100%); }
.mp-site--dim { filter: grayscale(0.85) contrast(0.85) brightness(1.02); opacity: 0.8; }
.mp-site--dim .mp-site-copy h4 { font-family: "Times New Roman", serif; font-weight: 400; color: #666; }

/* A laptop, for the mock-ups the designs show on one (the portal, the managed-website
   hero). The screen holds whatever is put inside it; the base is drawn. */
.mp-laptop { position: relative; }
.mp-laptop-screen { border: 10px solid #2b3350; border-radius: 16px; background: #2b3350; overflow: hidden;
  box-shadow: 0 30px 64px rgba(47, 57, 103, 0.22); }
/* The screen's own bezel colour must not show through whatever is put on it. */
.mp-laptop-screen > * { border-radius: 8px; overflow: hidden; background: #fff; }
.mp-laptop-base { position: relative; height: 13px; margin: 0 -7%; border-radius: 0 0 14px 14px;
  background: linear-gradient(180deg, #e3e7f2 0%, #b8c0d6 60%, #97a1bb 100%); }
.mp-laptop-base::after { content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 16%; height: 5px; border-radius: 0 0 6px 6px; background: #8b95b1; }

/* The intro composition: the site on a desktop window, the phone standing in front of
   it at the right, and planting behind — the arrangement the references draw. */
.mp-suite { position: relative; padding: 0 74px 34px 0; }
.mp-suite-site { position: relative; z-index: 2; }
.mp-suite .mp-phone { right: 6px; bottom: -6px; z-index: 3; width: 112px; padding: 5px; }
.mp-suite .mp-phone-screen { min-height: 196px; }
.mp-suite .mp-phone-screen .mp-site-pic { min-height: 74px; }
.mp-suite-plant { position: absolute; right: -18px; bottom: 4px; width: 96px; height: auto; z-index: 1; }
@media (max-width: 640px) { .mp-suite { padding: 0; } .mp-suite-plant { display: none; } }

/* The photographed workspace the service and managed heroes sit in: a drawn desk scene
   (mp_workspace_bg) with the laptop and the mug composited over it. */
.mp-workspace { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3;
  box-shadow: 0 18px 46px rgba(31, 45, 96, 0.10); }
.mp-workspace-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* A real photograph of the whole scene, rather than a backdrop with a drawn laptop on
   top of it. It keeps its own shape instead of being cropped into the 4/3 the drawn
   composition needs — these are photographed wide, and cropping to 4/3 cuts the phone
   off the right-hand edge of every one of them. */
.mp-workspace--photo { aspect-ratio: auto; }
.mp-workspace--photo .mp-workspace-bg { position: static; height: auto; }
/* A transparent PNG cut-out of the devices alone (mp_service_photo_is_cutout()): the
   picture IS the object, so no card, shadow or rounded corner around it. */
.mp-workspace--cutout, .mp-hero-art--bleed .mp-workspace--cutout { border-radius: 0; box-shadow: none; overflow: visible; background: none; }
.mp-workspace-stage { position: absolute; left: 13%; right: 25%; bottom: 12%; z-index: 2; }
.mp-workspace .mp-laptop-screen { border-width: 8px; border-radius: 12px; }
.mp-workspace .mp-site { min-height: 0; }
.mp-workspace .mp-site-hero { min-height: 172px; }
.mp-workspace .mp-site-copy { padding: 18px 14px 18px 16px; }
.mp-workspace .mp-site-copy h4 { font-size: 1.12rem; }
/* A phone inside the scene is a small prop, not a full-height mock-up. */
.mp-workspace .mp-phone { right: -4%; bottom: -14%; width: 104px; padding: 5px; }
.mp-workspace .mp-phone-screen { min-height: 0; }
.mp-workspace .mp-phone-screen .mp-site-copy { padding: 10px 9px 8px; }
.mp-workspace .mp-phone-screen .mp-site-copy h4 { font-size: 0.7rem; margin-bottom: 5px; }
.mp-workspace .mp-phone-screen .mp-site-copy p { font-size: 0.46rem; margin-bottom: 7px; }
.mp-workspace .mp-phone-screen .mp-site-btns span { font-size: 0.44rem; padding: 4px 7px; }
.mp-workspace .mp-phone-screen .mp-site-pic { min-height: 58px; }
/* The redesign hero: the old site set back and left, the new one large in front. */
.mp-workspace--ba .mp-workspace-stage { left: 27%; right: 12%; bottom: 15%; }
.mp-workspace--ba .mp-phone { right: 3%; bottom: 13%; z-index: 4; }
.mp-ba-old { position: absolute; left: 1%; bottom: 20%; width: 30%; z-index: 1; opacity: .95; }
.mp-ba-old .mp-browser { border-radius: 8px; box-shadow: 0 14px 30px rgba(31, 45, 96, 0.18); }
.mp-ba-old .mp-site { min-height: 0; }
.mp-ba-old .mp-site-hero { min-height: 88px; }
.mp-ba-old .mp-site-nav span, .mp-ba-old .mp-site-strip { display: none; }
.mp-ba-old .mp-site-copy { padding: 10px 10px 12px; }
.mp-ba-old .mp-site-copy h4 { font-size: 0.72rem; }
.mp-ba-old .mp-site-copy p { font-size: 0.48rem; }
.mp-ba-old .mp-browser-bar { padding: 5px 8px; }
.mp-ba-old .mp-ba-label { position: absolute; left: 0; top: -26px; z-index: 3; font-size: 0.7rem; font-weight: 700;
  color: #fff; background: #3b4256; padding: 4px 11px; border-radius: 7px; }
@media (max-width: 640px) { .mp-ba-old { display: none; } .mp-workspace--ba .mp-workspace-stage { left: 8%; right: 8%; } }
/* The mug the reference letters the handwritten line onto. */
.mp-mug { position: absolute; right: 5%; bottom: 9%; width: 96px; }
.mp-mug svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 14px rgba(90, 70, 45, 0.28)); }
.mp-mug-note { position: absolute; left: 13%; top: 30%; width: 62%; font-family: "Caveat", "Segoe Print", cursive;
  font-size: 0.82rem; font-weight: 600; line-height: 1.08; color: #2f5fe8; transform: rotate(-4deg); }
/* On a phone the scene stops being a fixed-ratio picture and grows to whatever the
   laptop inside it needs — at 390px a 4/3 box is shorter than the mock-up, and the
   frame's overflow:hidden was cropping the screen rather than scaling it. */
@media (max-width: 640px) {
  .mp-mug { display: none; }
  .mp-workspace { aspect-ratio: auto; }
  .mp-workspace-stage { position: relative; left: auto; right: auto; bottom: auto; margin: 16% 9% 13%; }
  .mp-workspace .mp-site-copy { padding: 14px 12px; }
  .mp-workspace .mp-site-copy h4 { font-size: 0.98rem; }
  .mp-workspace .mp-site-pic { min-height: 84px; }
  .mp-workspace--ba .mp-workspace-stage { left: auto; right: auto; }
}

.mp-phone { position: absolute; width: 132px; border-radius: 22px; background: #11152b; padding: 7px;
  box-shadow: 0 24px 50px rgba(20, 24, 60, 0.28); }
.mp-phone-screen { background: #fff; border-radius: 16px; overflow: hidden; min-height: 240px; }
.mp-phone-screen .mp-site-copy { padding: 16px 12px; }
.mp-phone-screen .mp-site-copy h4 { font-size: 0.98rem; }
.mp-phone-screen .mp-site-pic { min-height: 96px; }
.mp-phone-notch { width: 44px; height: 5px; border-radius: 4px; background: #2b3050; margin: 4px auto 6px; }

/* Floating status card over a mock ("Updated · backups complete"). */
.mp-float { position: absolute; background: #fff; border: 1px solid var(--mp-line-2); border-radius: 14px; padding: 12px 14px;
  box-shadow: 0 16px 36px rgba(47, 57, 103, 0.14); font-size: 0.72rem; color: var(--mp-body); display: flex; gap: 10px; align-items: center; }
.mp-float b { display: block; color: var(--mp-ink-2); font-size: 0.78rem; }
.mp-float .mp-dot-ok { width: 26px; height: 26px; border-radius: 50%; background: #e6f7ec; color: var(--mp-ok);
  display: flex; align-items: center; justify-content: center; flex: none; }
.mp-float .mp-dot-ok svg { width: 15px; height: 15px; }

/* The portal dashboard, drawn. */
.mp-portal { display: grid; grid-template-columns: 138px minmax(0, 1fr); min-height: 320px; font-size: 0.7rem; }
.mp-portal-nav { background: #fafbff; border-right: 1px solid var(--mp-line-2); padding: 14px 10px; display: grid; gap: 3px; align-content: start; }
.mp-portal-nav span { padding: 7px 9px; border-radius: 8px; color: #8d94b3; display: flex; gap: 8px; align-items: center; }
.mp-portal-nav span svg { width: 13px; height: 13px; }
.mp-portal-nav span.on { background: linear-gradient(92deg, var(--mp-accent), var(--mp-accent-2)); color: #fff; font-weight: 600; }
.mp-portal-main { padding: 16px; }
.mp-portal-main h4 { margin: 0; font-size: 0.95rem; color: var(--mp-ink); }
.mp-portal-main > p { margin: 2px 0 12px; color: var(--mp-muted); font-size: 0.66rem; }
.mp-portal-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.mp-portal-stat { border: 1px solid var(--mp-line-2); border-radius: 10px; padding: 8px; }
.mp-portal-stat small { display: block; color: var(--mp-muted); font-size: 0.6rem; }
.mp-portal-stat b { display: block; color: var(--mp-ink-2); font-size: 0.82rem; margin-top: 2px; }
.mp-portal-stat i { font-style: normal; font-size: 0.58rem; color: var(--mp-ok); }
.mp-portal-row { display: grid; grid-template-columns: 1.2fr 1fr; gap: 8px; }
.mp-portal-box { border: 1px solid var(--mp-line-2); border-radius: 10px; padding: 10px; }
.mp-portal-box small { color: var(--mp-muted); font-size: 0.6rem; }
.mp-portal-box svg.mp-spark { width: 100%; height: 70px; display: block; margin-top: 6px; }
.mp-portal-line { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border-bottom: 1px dashed var(--mp-line-2); font-size: 0.64rem; }
.mp-portal-line:last-child { border-bottom: 0; }

/* A portal "window" card on the portal page. */
.mp-win { background: #fff; border: 1px solid var(--mp-line-2); border-radius: 18px; padding: 20px; box-shadow: 0 10px 28px rgba(47,57,103,0.06); }
.mp-win-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.mp-win-head h3 { margin: 0; font-size: 0.95rem; color: var(--mp-ink-2); display: flex; gap: 9px; align-items: center; }
.mp-win-head h3 svg { width: 18px; height: 18px; color: var(--mp-accent); }
.mp-win-head span { font-size: 0.74rem; color: var(--mp-accent); font-weight: 600; }
.mp-win table { width: 100%; border-collapse: collapse; font-size: 0.76rem; }
.mp-win th { text-align: left; font-weight: 600; color: var(--mp-muted); font-size: 0.68rem; padding: 0 0 8px; }
.mp-win td { padding: 7px 0; border-top: 1px solid var(--mp-line-2); color: var(--mp-body); }
.mp-win td:first-child { color: var(--mp-accent); font-weight: 600; }
.mp-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mp-timeline li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 0.78rem; color: var(--mp-ink-2); }
.mp-timeline li small { display: block; color: var(--mp-muted); font-size: 0.7rem; }
.mp-tl-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #cfd4ee; background: #fff; display: flex; align-items: center; justify-content: center; }
.mp-tl-dot svg { width: 12px; height: 12px; }
.mp-tl-done .mp-tl-dot { background: var(--mp-ok); border-color: var(--mp-ok); color: #fff; }
.mp-tl-now .mp-tl-dot { border-color: var(--mp-accent); box-shadow: inset 0 0 0 4px var(--mp-accent); }
.mp-kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 0.78rem; }
.mp-kv dt { color: var(--mp-muted); } .mp-kv dd { margin: 0; color: var(--mp-ink-2); text-align: right; }

/* Shop, booking and menu mock contents. */
.mp-shop { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 16px; }
.mp-shop-item { border: 1px solid var(--mp-line-2); border-radius: 10px; overflow: hidden; font-size: 0.64rem; }
.mp-shop-item i { display: block; height: 70px; background: linear-gradient(160deg, #f4ede4, #e2d3c0); position: relative; }
.mp-shop-item i::after { content: ''; position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); width: 34%; height: 58%;
  border-radius: 45% 45% 12% 12%; background: linear-gradient(180deg, #d9b893, #b98f62); }
.mp-shop-item:nth-child(2) i::after { border-radius: 8px; width: 42%; height: 40%; background: linear-gradient(180deg, #cfd6c9, #9fae98); }
.mp-shop-item:nth-child(3) i::after { border-radius: 50%; width: 38%; height: 44%; background: linear-gradient(180deg, #eadfd2, #c9b59e); }
.mp-shop-item span { display: block; padding: 6px 8px 8px; color: var(--mp-ink-2); }
.mp-shop-item b { display: block; color: var(--mp-accent); font-size: 0.66rem; }
.mp-cal { padding: 16px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; }
.mp-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; font-size: 0.6rem; text-align: center; }
.mp-cal-grid span { padding: 6px 0; border-radius: 6px; color: var(--mp-ink-2); background: #f6f7fb; }
.mp-cal-grid span.h { background: none; color: var(--mp-muted); font-weight: 700; }
.mp-cal-grid span.x { color: #c3c7d9; background: none; }
.mp-cal-grid span.on { background: var(--mp-accent); color: #fff; font-weight: 700; }
.mp-cal-slots { display: grid; gap: 6px; align-content: start; font-size: 0.64rem; }
.mp-cal-slots span { border: 1px solid var(--mp-line); border-radius: 8px; padding: 7px; text-align: center; color: var(--mp-ink-2); }
.mp-cal-slots span.on { border-color: var(--mp-accent); color: var(--mp-accent); font-weight: 700; background: var(--mp-soft); }
.mp-menu { padding: 16px 20px; display: grid; gap: 8px; font-size: 0.68rem; }
.mp-menu h5 { margin: 4px 0 2px; font-family: Georgia, serif; font-size: 0.86rem; color: #7a3d1c; }
.mp-menu div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dotted #e7d9cc; padding-bottom: 5px; color: #4a3b33; }

/* Before / after pair. */
.mp-ba { display: grid; grid-template-columns: 1fr 1fr; border-radius: 20px; overflow: hidden; border: 1px solid var(--mp-line); box-shadow: var(--mp-shadow); }
.mp-ba > div { position: relative; background: #fff; }
.mp-ba > div + div { border-left: 1px solid var(--mp-line); }
.mp-ba-label { position: absolute; top: 12px; left: 12px; z-index: 2; font-size: 0.72rem; font-weight: 700; color: #fff;
  background: #4a4f68; padding: 5px 11px; border-radius: 8px; }
.mp-ba > div + div .mp-ba-label { left: auto; right: 12px; background: var(--mp-accent); }
.mp-ba .mp-site { min-height: 260px; }
.mp-ba .mp-site-nav { padding-top: 44px; }
.mp-ba .mp-site-nav span { display: none; }
.mp-ba .mp-site-hero { grid-template-columns: minmax(0, 1fr); }
.mp-ba .mp-site-copy { padding: 14px 16px 12px; }
.mp-ba .mp-site-copy h4 { font-size: 1.1rem; }
.mp-ba .mp-site-pic { min-height: 120px; }

/* ── About: the founder / quote / sustainability band ────────────────── */
.mp-brandband { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.86fr) minmax(0, 1.05fr);
  gap: 34px; align-items: start; }
.mp-brandband .mp-founder { grid-template-columns: 118px minmax(0, 1fr); gap: 20px; }
.mp-brandband .mp-avatar { width: 118px; height: 118px; border-radius: 18px; font-size: 2.6rem; }
.mp-quote--big { position: relative; background: #fff; border: 1px solid var(--mp-line-2); border-radius: 16px;
  padding: 26px 26px 24px; align-self: center; }
.mp-quote-mark { position: absolute; left: 20px; top: 6px; font-size: 2.6rem; line-height: 1; color: #b9cbf7; }
.mp-quote--big blockquote { margin: 14px 0 0; font-size: 0.98rem; line-height: 1.62; font-style: italic; color: var(--mp-ink-2); }
.mp-quote--big figcaption { margin-top: 16px; font-size: 0.8rem; color: var(--mp-muted); }
.mp-quote--big figcaption strong { display: block; color: var(--mp-ink); font-size: 0.9rem; font-style: normal; }
.mp-sustain { position: relative; background: #fff; border: 1px solid #d7e6dd; border-radius: 16px; padding: 24px 26px; }
.mp-sustain .mp-ico { background: #e6f5ec; color: #17864a; }
.mp-sustain .mp-eyebrow { color: #17864a; margin-bottom: 6px; }
.mp-sustain-pic { margin: 18px 0 0; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; }
.mp-sustain-pic .mp-shot, .mp-sustain-pic .mp-scene { height: 100%; }
.mp-sustain .mp-actions { margin-top: 18px; }
.mp-sustain .mp-btn--s { color: #17864a; border-color: #b7ddc6; }
.mp-sustain .mp-btn--s:hover { border-color: #17864a; background: #eefaf2; color: #0f6a39; }
@media (max-width: 1080px) { .mp-brandband { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mp-sustain { grid-column: 1 / -1; } }
@media (max-width: 760px) { .mp-brandband { grid-template-columns: minmax(0, 1fr); } }

/* ── How we work: the hero's four stacked step cards ─────────────────── */
.mp-steps-hero { display: grid; grid-template-columns: 150px minmax(0, 1fr) 178px; gap: 18px; align-items: start; }
.mp-steps-hero > .mp-note { position: relative; left: auto !important; top: auto !important; align-self: center; }
.mp-steplist { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.mp-steplist li { padding: 15px 17px; box-shadow: var(--mp-shadow); position: relative; }
.mp-steplist .mp-ico { width: 42px; height: 42px; }
.mp-steplist li p { font-size: 0.8rem; }
/* The arrow the design draws in each gap. */
.mp-steplist li + li::before { content: ''; position: absolute; left: 50%; top: -19px; width: 2px; height: 10px; background: #9fb8f4; }
.mp-steplist li + li::after { content: ''; position: absolute; left: 50%; top: -13px; width: 7px; height: 7px;
  border-right: 2px solid #9fb8f4; border-bottom: 2px solid #9fb8f4; transform: translateX(-50%) rotate(45deg); }
.mp-steps-photo { position: relative; align-self: center; }
@media (max-width: 1180px) { .mp-steps-hero { grid-template-columns: minmax(0, 1fr) 170px; }
  .mp-steps-hero > .mp-note { display: none; } }
@media (max-width: 700px) { .mp-steps-hero { grid-template-columns: minmax(0, 1fr); } }

/* ── Managed websites: the plan row and the one-off card beside it ────── */
/* The approved design separates its cards; the homepage joins them into one comparison
   surface. Both are right for their page, so this is scoped to .mp-page and the
   homepage's grid is untouched. */
.mp-plans-row { display: grid; gap: 18px; align-items: stretch; }
.mp-plans-row--aside { grid-template-columns: minmax(0, 3fr) minmax(0, 1.02fr); }
.mp-page .hv2-pricing .mp-plans-row .pricing-cards { max-width: none; margin: 0; gap: 16px; }
.mp-page .hv2-pricing .mp-plans-row .plan { border-radius: 14px; }
.mp-page .hv2-pricing .mp-plans-row .plan + .plan { margin-left: 0; }
.mp-page .hv2-pricing .mp-plans-row .plan.left,
.mp-page .hv2-pricing .mp-plans-row .plan.right,
.mp-page .hv2-pricing .mp-plans-row .plan.mid { border-radius: 14px; }
.mp-oneoff { display: flex; flex-direction: column; padding: 22px 24px; }
.mp-oneoff .mp-actions { margin-top: auto; padding-top: 16px; }
.mp-plans-row--aside .mp-oneoff .mp-btn { width: 100%; }
/* More managed plans than fit beside the card: it drops under the grid, and reads as
   two columns there rather than one very wide one. */
.mp-plans-row:not(.mp-plans-row--aside) .mp-oneoff { display: grid; gap: 4px 34px;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; padding: 24px 26px; }
.mp-plans-row:not(.mp-plans-row--aside) .mp-oneoff > div:first-child,
.mp-plans-row:not(.mp-plans-row--aside) .mp-oneoff > p { grid-column: 1; }
.mp-plans-row:not(.mp-plans-row--aside) .mp-oneoff > .mp-list { grid-column: 2; grid-row: 1 / span 2; margin-top: 4px; }
.mp-plans-row:not(.mp-plans-row--aside) .mp-oneoff > .mp-actions { grid-column: 2; margin-top: 4px; padding-top: 12px; }
@media (max-width: 760px) { .mp-plans-row:not(.mp-plans-row--aside) .mp-oneoff { grid-template-columns: minmax(0, 1fr); }
  .mp-plans-row:not(.mp-plans-row--aside) .mp-oneoff > * { grid-column: 1 !important; grid-row: auto !important; } }
@media (max-width: 1080px) { .mp-plans-row--aside { grid-template-columns: minmax(0, 1fr); } }

/* The four-step flow the managed design sets beside its heading. */
.mp-flow { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 30px;
  background: var(--mp-tint); border: 1px solid #e2e8fa; border-radius: 16px; padding: 24px 26px; }
.mp-flow-step { position: relative; }
.mp-flow-marks { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.mp-flow-marks .mp-ico { width: 34px; height: 34px; border-radius: 10px; background: #fff; }
.mp-flow-marks .mp-ico svg { width: 17px; height: 17px; }
.mp-flow-marks .mp-rail-n { width: 24px; height: 24px; font-size: 0.72rem; }
.mp-flow-step h3 { font-size: 0.92rem; margin: 0 0 5px; }
.mp-flow-step p { margin: 0; font-size: 0.78rem; line-height: 1.5; color: var(--mp-muted); }
.mp-flow-step + .mp-flow-step::before { content: ''; position: absolute; left: -21px; top: 16px;
  width: 12px; height: 12px; border-top: 2px solid #9fb8f4; border-right: 2px solid #9fb8f4;
  transform: rotate(45deg) scale(0.8); }
@media (max-width: 1080px) { .mp-flow { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-flow-step + .mp-flow-step::before { display: none; } }
@media (max-width: 560px) { .mp-flow { grid-template-columns: minmax(0, 1fr); } }

/* The redesign page's problem/solution row: problems, benefits, margin note. */
.mp-problems { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 0.42fr);
  gap: 34px; align-items: start; }
.mp-good-card { background: linear-gradient(165deg, #f2f6ff 0%, #f4f2fe 100%); border: 1px solid #d9e3fb;
  border-radius: 16px; padding: 24px 26px; }
.mp-problems-aside { display: grid; gap: 30px; padding-top: 6px; }
.mp-problems-aside .mp-note { font-size: 1.24rem; line-height: 1.25; }
.mp-problems-aside .mp-note svg { margin-left: auto; }
.mp-problems-aside .mp-note--side { justify-content: flex-end; gap: 4px; }
.mp-problems-aside .mp-note--side span { white-space: nowrap; }
.mp-problems-aside .mp-note--side svg { margin-left: 0; width: 40px; height: 30px; }
@media (max-width: 1080px) { .mp-problems { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mp-problems-aside { grid-column: 1 / -1; grid-auto-flow: column; align-items: center; }
  /* Under the lists now, a down-left arrow would point at nothing. */
  .mp-problems-aside .mp-note--side svg { display: none; } }
@media (max-width: 920px) { .mp-problems { grid-template-columns: minmax(0, 1fr); }
  .mp-problems-aside { grid-auto-flow: row; } }

/* ── The before/after wipe (redesign page) ────────────────────────────── */
.mp-ba2 { position: relative; }
.mp-ba2-frame { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--mp-line);
  box-shadow: 0 18px 46px rgba(31, 45, 96, 0.12); aspect-ratio: 16 / 5.6; min-height: 300px; background: #fff; touch-action: pan-y; cursor: ew-resize; }
.mp-ba2-layer { position: absolute; inset: 0; }
.mp-ba2-layer .mp-browser { border: 0; border-radius: 0; box-shadow: none; height: 100%; display: flex; flex-direction: column; }
.mp-ba2-layer .mp-browser-body { flex: 1; }
.mp-ba2-layer .mp-site { height: 100%; }
.mp-ba2-layer .mp-site-hero { height: 100%; }
.mp-ba2-layer .mp-site-copy { padding: 30px 26px; }
.mp-ba2-layer .mp-site-copy h4 { font-size: 1.5rem; }
.mp-ba2-layer .mp-site-copy p { font-size: 0.78rem; }
.mp-ba2-layer .mp-site-btns span { font-size: 0.72rem; padding: 8px 14px; border-radius: 8px; }
/* Blown up to half the canvas, the site's picture area needs more in it than a card and
   a plant or it reads as a flat colour block. Extra depth comes from background layers,
   so there is no more markup in the mock than before. */
.mp-ba2-layer .mp-site-pic { background-image:
    radial-gradient(closest-side at 76% 22%, rgba(255,255,255,.85), rgba(255,255,255,0) 100%),
    radial-gradient(closest-side at 22% 12%, rgba(255,255,255,.45), rgba(255,255,255,0) 100%),
    linear-gradient(0deg, rgba(70,55,40,.16) 0 16%, rgba(70,55,40,0) 16%),
    linear-gradient(160deg, #cfe3f7 0%, #a9c9ea 45%, #7fa6d3 100%); }
.mp-ba2-layer .mp-site-pic::before { left: 14%; bottom: 16%; width: 40%; height: 30%; }
.mp-ba2-layer .mp-site-pic::after { right: 14%; bottom: 16%; width: 13%; height: 46%; }
/* With a photograph in hand, both mock sites carry it: in full on the new site, faded
   and flattened on the old one, so the wipe reads as a real before and after rather
   than as two colour blocks. */
.mp-ba2-layer .mp-site-pic { background: url("../images/pages/about-coast.jpg") center / cover no-repeat; }
.mp-ba2-layer .mp-site-pic::before, .mp-ba2-layer .mp-site-pic::after { display: none; }
.mp-ba2-layer--before .mp-site-pic { filter: grayscale(.85) contrast(.8) brightness(1.08); opacity: .7; }
/* The old site is revealed from the left edge to the handle. */
.mp-ba2-layer--before { clip-path: inset(0 calc(100% - var(--mp-x)) 0 0); }
.mp-ba2-layer--before::after { content: ''; position: absolute; inset: 0 0 0 calc(var(--mp-x) - 3px); width: 3px; background: #fff; }
.mp-ba2-tag { position: absolute; top: 14px; z-index: 4; font-size: 0.74rem; font-weight: 700; color: #fff;
  padding: 5px 12px; border-radius: 8px; }
.mp-ba2-tag--b { left: 14px; background: #3b4256; }
.mp-ba2-tag--a { right: 14px; background: var(--mp-accent); }
.mp-ba2-knob { position: absolute; top: 50%; left: var(--mp-x); z-index: 5; transform: translate(-50%, -50%);
  width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--mp-accent);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(31, 45, 96, 0.26); }
.mp-ba2-knob svg { width: 20px; height: 20px; }
/* The real control, laid over the picture: keyboard-operable, and invisible but for its
   thumb, which sits under the drawn knob above. Pointers go to the frame (see
   mp_ba_script) so a drag works anywhere on the picture, on touch screens too. */
.mp-ba2-range { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; margin: 0;
  -webkit-appearance: none; appearance: none; background: none; cursor: ew-resize; pointer-events: none; }
.mp-ba2-frame, .mp-ba2-frame * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.mp-ba2-range::-webkit-slider-runnable-track { background: none; height: 100%; }
.mp-ba2-range::-moz-range-track { background: none; height: 100%; }
.mp-ba2-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 44px; height: 44px;
  border-radius: 50%; background: transparent; border: 0; cursor: ew-resize; }
.mp-ba2-range::-moz-range-thumb { width: 44px; height: 44px; border-radius: 50%; background: transparent; border: 0; cursor: ew-resize; }
.mp-ba2-range:focus-visible { outline: 3px solid rgba(37, 99, 235, 0.45); outline-offset: 3px; }
.mp-ba2-note { left: 14px; bottom: -26px; }
.mp-ba2-ctrl { position: absolute; right: 0; bottom: -52px; display: flex; align-items: center; gap: 8px; }
.mp-ba2-btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--mp-line); background: #fff;
  color: var(--mp-ink-2); display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color .18s ease, color .18s ease; }
.mp-ba2-btn:hover { border-color: var(--mp-accent); color: var(--mp-accent); }
.mp-ba2-btn svg { width: 17px; height: 17px; }
.mp-ba2-count { font-size: 0.82rem; color: var(--mp-muted); margin-left: 4px; }
@media (max-width: 920px) { .mp-ba2-frame { aspect-ratio: 16 / 10; }
  .mp-ba2-ctrl { position: static; margin-bottom: 14px; justify-content: flex-end; } }
@media (max-width: 640px) { .mp-ba2-frame { aspect-ratio: 4 / 3; }
  .mp-ba2-layer .mp-site-copy { padding: 18px 16px; } .mp-ba2-layer .mp-site-copy h4 { font-size: 1.05rem; } }

/* The quality hero: a photograph with the check card, the ring and the badge over it. */
.mp-qa-frame { position: relative; border-radius: 22px; overflow: visible; }
.mp-qa-photo { border-radius: 22px; overflow: hidden; aspect-ratio: 16 / 11; box-shadow: var(--mp-shadow); }
.mp-qa-photo .mp-shot, .mp-qa-photo .mp-scene { height: 100%; }
.mp-qa-card { position: absolute; left: 4%; top: 8%; width: 62%; padding: 20px 22px; }
.mp-qa-ring { position: absolute; right: 8%; top: 10%; width: 92px; height: 92px; border-radius: 50%;
  background: radial-gradient(closest-side, #fff 72%, transparent 73% 100%), conic-gradient(var(--mp-ok) 0 100%, #e8ebf5 0);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  box-shadow: 0 12px 26px rgba(47, 57, 103, 0.16); }
.mp-qa-ring span { width: 30px; height: 30px; display: inline-flex; color: #fff; background: var(--mp-ok); border-radius: 50%; padding: 6px; }
.mp-qa-ring small { font-size: 0.56rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mp-muted); margin-top: 4px; line-height: 1.2; max-width: 66px; }
.mp-qa-badge { right: 6%; bottom: 8%; }
/* The dark results band the service designs run under the intro — full-bleed, edge to
   edge, exactly as the reference draws it. In the reference it holds four statistics
   ("50+ websites launched", "<2s average load time"); ours holds four things the
   Website Plan Terms actually commit to, because the statistics had no source. */
.mp-band-sec { background: linear-gradient(115deg, #111c44 0%, #16225a 55%, #1d2c74 100%); padding: 36px 0 38px; }
.mp-band-sec .mp-eyebrow { color: rgba(255, 255, 255, 0.66); margin-bottom: 20px; }
.mp-band { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
/* Centred, as both reference bands are. */
.mp-band-item { padding: 0 26px; text-align: center; }
.mp-band-item + .mp-band-item { border-left: 1px solid rgba(255, 255, 255, 0.14); }
.mp-band-item b { display: block; color: #fff; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; }
.mp-band-item span { display: block; margin-top: 6px; color: rgba(255, 255, 255, 0.66); font-size: 0.81rem; line-height: 1.5; }
.mp-band-item svg { width: 24px; height: 24px; color: #8fabff; margin-bottom: 10px; }
/* The ongoing-support panel: picture, copy, list — as the service references arrange it. */
.mp-support-panel { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 30px; align-items: center; padding: 26px; }
.mp-support-photo { border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; }
.mp-support-photo .mp-shot, .mp-support-photo .mp-scene { height: 100%; }
@media (max-width: 1080px) { .mp-support-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mp-support-photo { grid-column: 1 / -1; aspect-ratio: 21 / 8; } }
@media (max-width: 640px) { .mp-support-panel { grid-template-columns: minmax(0, 1fr) !important; } }

/* The light variant, as the e-commerce reference draws it. */
.mp-band-sec--light { background: linear-gradient(115deg, #eef2fe 0%, #eaf1fe 100%); border-block: 1px solid #dfe5fa; }
.mp-band-sec--light .mp-eyebrow { color: var(--mp-accent); }
.mp-band-sec--light .mp-band-item b { color: var(--mp-ink); }
.mp-band-sec--light .mp-band-item span { color: var(--mp-muted); }
.mp-band-sec--light .mp-band-item svg { color: var(--mp-accent); }
.mp-band-sec--light .mp-band-item + .mp-band-item { border-left-color: rgba(120, 129, 159, 0.2); }

@media (max-width: 920px) { .mp-band { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .mp-band-item + .mp-band-item { border-left: 0; } }
@media (max-width: 640px) { .mp-band { grid-template-columns: minmax(0, 1fr); } .mp-band-item { padding: 0; } }

/* A monitor bezel, for the featured case study's screenshot. */
.mp-monitor { border: 12px solid #1d2340; border-radius: 18px; overflow: hidden; background: #1d2340;
  box-shadow: 0 28px 60px rgba(29, 35, 64, 0.24); }
.mp-monitor > *, .mp-monitor img { display: block; width: 100%; border-radius: 6px; overflow: hidden; }
.mp-monitor .mp-browser { border: 0; border-radius: 6px; box-shadow: none; }

/* A headline set over a photograph, as the ownership hero does. */
.mp-photo-copy { position: absolute; left: 7%; top: 10%; display: grid; gap: 2px;
  font-size: clamp(1.05rem, 1.9vw, 1.5rem); font-weight: 700; letter-spacing: -0.02em; color: var(--mp-ink);
  text-shadow: 0 2px 14px rgba(255, 255, 255, 0.85); }
.mp-photo-tag { position: absolute; right: 7%; bottom: 7%; font-size: 0.64rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 8px rgba(20, 24, 60, 0.45); }
@media (max-width: 640px) {
  .mp-qa-card { position: static; width: auto; margin-top: -40px; }
  .mp-qa-ring, .mp-qa-badge { display: none; }
}

/* The quality score dial. */
.mp-score { width: 118px; height: 118px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column;
  background: radial-gradient(closest-side, #fff 78%, transparent 79% 100%), conic-gradient(var(--mp-ok) 0 100%, #e8ebf5 0);
  color: var(--mp-ink); font-weight: 700; font-size: 1.9rem; }
.mp-score small { font-size: 0.6rem; letter-spacing: .12em; color: var(--mp-muted); }
.mp-qa-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mp-qa-list li { display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: center; font-size: 0.78rem; color: var(--mp-ink-2); }
.mp-qa-list li svg { width: 18px; height: 18px; color: #fff; background: var(--mp-ok); border-radius: 50%; padding: 3px; }
.mp-qa-list li em { font-style: normal; font-size: 0.7rem; color: var(--mp-ok); font-weight: 600; }

/* Location band (About / Team). */
.mp-places { display: flex; flex-wrap: wrap; gap: 18px 36px; }
.mp-place { display: flex; gap: 12px; align-items: flex-start; }
.mp-place svg { width: 22px; height: 22px; color: var(--mp-accent); flex: none; margin-top: 2px; }
.mp-place strong { display: block; color: var(--mp-ink-2); font-size: 0.95rem; }
.mp-place span { font-size: 0.82rem; color: var(--mp-muted); }

/* A route between two places, drawn — used where the reference had two photographs. */
.mp-route { position: relative; border-radius: 24px; overflow: hidden; min-height: 420px;
  background: linear-gradient(165deg, #e8f0ff 0%, #f1ecff 55%, #fdf3ea 100%); border: 1px solid var(--mp-line); }
.mp-route svg.mp-route-line { position: absolute; inset: 0; width: 100%; height: 100%; }
.mp-route-card { position: absolute; background: #fff; border-radius: 16px; border: 1px solid var(--mp-line-2);
  box-shadow: 0 16px 36px rgba(47, 57, 103, 0.12); padding: 13px 15px; font-size: 0.76rem; line-height: 1.45; color: var(--mp-body); max-width: 44%; }
.mp-route-card strong { display: block; color: var(--mp-ink); font-size: 0.95rem; margin-bottom: 2px; }
.mp-route-card .mp-ico { width: 36px; height: 36px; border-radius: 11px; margin: 0 0 8px; }
.mp-route-card .mp-ico svg { width: 18px; height: 18px; }

/* ── Draft preview banner ─────────────────────────────────────────────── */
.mp-draft { background: #fff7e6; border-bottom: 1px solid #f5d48f; color: #7a4d00; font-size: 0.84rem; line-height: 1.55; }
.mp-draft .mp-shell { padding-top: 12px; padding-bottom: 12px; }
.mp-draft strong { color: #5c3a00; }
.mp-draft ul { margin: 6px 0 0; padding-left: 18px; }

/* ── Reveal (opt-in; without JS everything is simply visible) ─────────── */
.mp-js .mp-reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.mp-js .mp-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .mp-js .mp-reveal { opacity: 1; transform: none; transition: none; }
  .mp-btn, .mp-faq summary::after { transition: none; }
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .mp-grid--5, .mp-grid--6, .mp-grid--7 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mp-steps { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 26px; }
  /* Four to a row: the connector belongs between cards in the same row, never hanging
     off the left edge of the one that starts a new one. */
  .mp-step + .mp-step::before { display: none; }
  .mp-steps .mp-step:nth-child(4n+1)::after { display: none; }
  .mp-strip { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 22px; }
  .mp-strip-item + .mp-strip-item { border-left: 0; }
}
@media (max-width: 920px) {
  /* !important because several pages set a two-column ratio inline on these grids, and
     an inline style otherwise beats this query and keeps two columns on a phone. */
  .mp-hero-grid, .mp-split, .mp-callout, .mp-faq-grid, .mp-cta, .mp-head, .mp-founder-panel { grid-template-columns: minmax(0, 1fr) !important; }
  .mp-hero-art { max-width: 620px; }
  .mp-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-rail { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
  .mp-rail-item + .mp-rail-item::before { display: none; }
  .mp-faq--2col { grid-template-columns: minmax(0, 1fr); }
  .mp-note { display: none; }
  .mp-cta { padding: 32px 28px; }
}
@media (max-width: 640px) {
  .mp-sec { padding: 60px 0; }
  .mp-shell { padding: 0 18px; }
  .mp-hero { padding: 40px 0 36px; }
  .mp-grid--2, .mp-grid--3, .mp-grid--4, .mp-grid--5, .mp-grid--6, .mp-grid--7 { grid-template-columns: minmax(0, 1fr); }
  .mp-steps { grid-template-columns: minmax(0, 1fr); }
  .mp-steps .mp-step::after { display: none; }
  .mp-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 22px 4px; }
  .mp-rail { grid-template-columns: minmax(0, 1fr); }
  .mp-founder { grid-template-columns: minmax(0, 1fr); }
  .mp-callout { padding: 30px 24px; }
  .mp-panel { padding: 24px; }
  .mp-portal { grid-template-columns: minmax(0, 1fr); }
  .mp-portal-nav { display: none; }
  .mp-portal-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-site-hero { grid-template-columns: minmax(0, 1fr); }
  .mp-site-pic { min-height: 120px; }
  .mp-phone { display: none; }
  .mp-ba { grid-template-columns: minmax(0, 1fr); }
  .mp-ba > div + div { border-left: 0; border-top: 1px solid var(--mp-line); }
  .mp-route { min-height: 300px; }
  .mp-float { display: none; }
}

/* A whole card that is one link — the case-study cards a service page draws when there
   is real work to show (the `work` block in includes/service-page.php). Focus is styled
   rather than removed: the card is the tab stop, so it has to be visible when it has it. */
.mp-card--link { display: block; text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s, transform .15s; }
.mp-card--link:hover { border-color: var(--mp-accent); box-shadow: 0 8px 22px rgba(31, 45, 96, 0.09); transform: translateY(-2px); }
.mp-card--link:focus-visible { outline: 3px solid var(--mp-accent); outline-offset: 3px; }
.mp-card-more { display: inline-block; margin-top: 12px; font-size: 0.82rem; font-weight: 700; color: var(--mp-accent); }
@media (prefers-reduced-motion: reduce) { .mp-card--link { transition: none; } .mp-card--link:hover { transform: none; } }

/* Breadcrumb wrapper — the <ol> itself is already styled above; this only keeps the
   trail clear of the eyebrow that follows it in the hero. */
.mp-crumbs-nav { margin-bottom: 4px; }

/* ── The development-page illustrations ───────────────────────────────────────
   Three drawn compositions for the five /development service pages: an internal
   application (.mp-app), an automation running by itself (.mp-flow), and two systems
   exchanging data (.mp-api). Every one is aria-hidden in the markup, and none of them
   carries a figure — the tiles read "—" on purpose, because a number drawn on an
   illustration is still a number a visitor will read as ours. */
.mp-app { display: grid; grid-template-columns: 132px minmax(0, 1fr); border-radius: 15px; overflow: hidden;
  border: 1px solid var(--mp-line-2); background: var(--mp-card); box-shadow: 0 14px 34px rgba(31, 45, 96, 0.11); }
.mp-app-side { background: #0f1a3d; color: #cdd5f2; padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; }
.mp-app-side b { color: #fff; font-size: 0.82rem; margin-bottom: 12px; display: block; }
.mp-app-side span { display: flex; align-items: center; gap: 8px; font-size: 0.72rem; padding: 7px 9px; border-radius: 8px; }
.mp-app-side span.on { background: rgba(255, 255, 255, 0.12); color: #fff; font-weight: 600; }
.mp-app-side svg { width: 13px; height: 13px; }
.mp-app-main { padding: 15px 17px 17px; min-width: 0; }
.mp-app-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.mp-app-top h4 { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--mp-ink); }
.mp-app-top em { font-style: normal; font-size: 0.7rem; font-weight: 700; color: #fff;
  background: var(--mp-accent); border-radius: 999px; padding: 5px 12px; }
.mp-app-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-bottom: 13px; }
.mp-app-tile { background: var(--mp-tint); border-radius: 11px; padding: 10px 11px; }
.mp-app-tile span { display: block; font-size: 0.66rem; color: var(--mp-muted); }
.mp-app-tile b { font-size: 1.1rem; color: var(--mp-ink); }
.mp-app-rows { display: flex; flex-direction: column; gap: 6px; }
.mp-app-row { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 9px;
  border: 1px solid var(--mp-line); font-size: 0.74rem; color: var(--mp-body); }
.mp-app-row > i { width: 7px; height: 7px; border-radius: 50%; background: var(--mp-accent); flex: none; }
.mp-app-row > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-app-row em { font-style: normal; flex: none; }

.mp-flow { display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap; }
.mp-flow-node { flex: 1 1 118px; background: var(--mp-card); border: 1px solid var(--mp-line-2); border-radius: 13px;
  padding: 14px 13px; box-shadow: 0 4px 14px rgba(31, 45, 96, 0.05); }
.mp-flow-node .mp-ico { width: 32px; height: 32px; margin-bottom: 9px; }
.mp-flow-node .mp-ico svg { width: 16px; height: 16px; }
.mp-flow-node b { display: block; font-size: 0.84rem; color: var(--mp-ink); }
.mp-flow-node span { display: block; font-size: 0.72rem; line-height: 1.45; color: var(--mp-muted); margin-top: 2px; }
.mp-flow-arrow { display: flex; align-items: center; color: var(--mp-accent); flex: none; }
.mp-flow-arrow svg { width: 17px; height: 17px; }

.mp-api { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.mp-api-node { background: var(--mp-card); border: 1px solid var(--mp-line-2); border-radius: 14px; padding: 18px 16px;
  text-align: center; box-shadow: 0 6px 18px rgba(31, 45, 96, 0.06); }
.mp-api-node .mp-ico { margin: 0 auto 10px; }
.mp-api-node b { font-size: 0.86rem; color: var(--mp-ink); }
.mp-api-wire { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--mp-accent); }
.mp-api-wire svg { width: 26px; height: 16px; }
.mp-api-wire .mp-api-back { transform: rotate(180deg); }
.mp-api-wire em { font-style: normal; font-size: 0.66rem; font-weight: 700; color: var(--mp-muted); white-space: nowrap; }
.mp-api-log { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 4px; }
.mp-api-log span { display: inline-flex; align-items: center; gap: 6px; font-size: 0.7rem; color: var(--mp-muted);
  background: var(--mp-tint); border-radius: 999px; padding: 6px 12px; }
.mp-api-log svg { width: 12px; height: 12px; }

@media (max-width: 700px) {
  .mp-app { grid-template-columns: minmax(0, 1fr); }
  .mp-app-side { flex-direction: row; align-items: center; overflow-x: auto; }
  .mp-app-side b { margin: 0 8px 0 0; }
  .mp-flow-arrow { transform: rotate(90deg); margin: 0 auto; }
  .mp-flow { flex-direction: column; }
  .mp-api { grid-template-columns: minmax(0, 1fr); }
  .mp-api-wire { flex-direction: row; }
  .mp-api-wire svg { transform: rotate(90deg); }
  .mp-api-wire .mp-api-back { transform: rotate(270deg); }
}

/* ── Guides (GUIDE-001) ───────────────────────────────────────────────────── */
/* The category chips are <button>s here rather than the static spans elsewhere, so they
   need the control reset — and a focus ring, because they are operable. */
.mp-chips button.mp-chip { border: 0; cursor: pointer; font: inherit; font-size: 0.72rem; font-weight: 600;
  line-height: 1.2; display: inline-flex; align-items: center; gap: 7px; }
.mp-chips button.mp-chip:focus-visible { outline: 3px solid var(--mp-accent); outline-offset: 2px; }
.mp-chip-n { font-variant-numeric: tabular-nums; opacity: 0.65; }

.mp-guide-card { display: flex; flex-direction: column; gap: 12px; }
.mp-guide-shot { display: block; border-radius: 11px; overflow: hidden; background: var(--mp-tint); }
.mp-guide-shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.mp-guide-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 10px;
  font-size: 0.72rem; color: var(--mp-muted); }
.mp-guide-card .mp-tag { margin-bottom: 8px; }

/* One guide. The body is staff-authored markup rendered through the blog's sanitiser,
   so it is styled by element rather than by class. */
.mp-prose { max-width: 72ch; }
.mp-prose h2 { font-size: clamp(1.25rem, 2.1vw, 1.5rem); font-weight: 800; color: var(--mp-ink);
  margin: 38px 0 12px; scroll-margin-top: 110px; }
.mp-prose h3 { font-size: 1.06rem; font-weight: 700; color: var(--mp-ink-2); margin: 26px 0 10px;
  scroll-margin-top: 110px; }
.mp-prose p { margin: 0 0 15px; font-size: 0.95rem; line-height: 1.72; color: var(--mp-body); }
/* Markers stated explicitly: style-v3.css resets list-style on lists inside the page
   shell, so a guide's bullets rendered as unmarked indented lines. */
.mp-prose ul { margin: 0 0 18px; padding-left: 22px; list-style: disc outside; }
.mp-prose ol { margin: 0 0 18px; padding-left: 24px; list-style: decimal outside; }
.mp-prose li::marker { color: var(--mp-accent); }
.mp-prose li { margin-bottom: 7px; font-size: 0.95rem; line-height: 1.68; color: var(--mp-body); }
.mp-prose a { color: var(--mp-accent-d); font-weight: 600; }
.mp-prose img { border-radius: 12px; }
.mp-prose blockquote { margin: 0 0 18px; padding: 12px 18px; border-left: 3px solid var(--mp-accent);
  background: var(--mp-tint); border-radius: 0 10px 10px 0; }
.mp-prose table { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin: 0 0 18px; }
.mp-prose th, .mp-prose td { border: 1px solid var(--mp-line); padding: 9px 12px; text-align: left; }
.mp-prose th { background: var(--mp-tint); font-weight: 700; color: var(--mp-ink-2); }
/* A wide table must scroll inside its own box rather than widening the page. */
.mp-prose-scroll { overflow-x: auto; }

.mp-guide-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 44px; align-items: start; }
.mp-toc { position: sticky; top: 104px; font-size: 0.82rem; }
.mp-toc h2 { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--mp-muted);
  margin: 0 0 10px; font-weight: 800; }
.mp-toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--mp-line); }
.mp-toc li { margin: 0; }
.mp-toc li.lvl3 { padding-left: 12px; }
.mp-toc a { display: block; padding: 5px 12px; color: var(--mp-muted); text-decoration: none; line-height: 1.45; }
.mp-toc a:hover { color: var(--mp-accent-d); }
.mp-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  font-size: 0.8rem; color: var(--mp-muted); margin-top: 16px; }
.mp-byline b { color: var(--mp-ink-2); font-weight: 700; }

@media (max-width: 900px) {
  .mp-guide-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .mp-toc { position: static; }
}

/* ── Managed websites — October 2026 target pass ──────────────────────────────
   /managed-websites only (main.mp-page--managed). The approved target is denser than
   the other marketing pages: a shorter section rhythm, a bigger hero, a wider table,
   a clearly marked Pro plan, and the one-off route as a single strip. Nothing here
   reaches another page, the navbar, the footer or the homepage's plan grid. */
.mp-page--managed { --mp-gap: 44px; --mp-radius: 14px; }
.mp-page--managed > .mp-hero {
  padding: 36px 0 30px;
  background:
    radial-gradient(ellipse 46% 62% at 76% 44%, rgba(176, 204, 255, .30), transparent 72%),
    radial-gradient(ellipse 30% 40% at 94% 16%, rgba(209, 190, 250, .24), transparent 72%);
}
.mp-page--managed .mp-btn { border-radius: 9px; min-height: 48px; }
.mp-page--managed .mp-btn--p { background: var(--mp-accent); box-shadow: 0 8px 18px rgba(37, 99, 235, 0.24); }
.mp-page--managed .mp-btn--p:hover { background: var(--mp-accent-d); }
.mp-page--managed .mp-lead { font-size: 1rem; color: #47517a; }
.mp-page--managed .mp-h2 { font-size: clamp(1.75rem, 2.75vw, 2.5rem); }

/* Hero: the headline dominates the first screen; the device picture fills its half. */
/* The same proportions as /website-redesign's hero: a narrower copy column and the
   picture larger, bleeding toward the right edge. */
.mp-page--managed .mp-hero-grid { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 28px; }
.mp-page--managed .mp-hero { padding-bottom: 18px; }
.mp-page--managed .mw-hero-art { margin-right: -24px; }
.mp-page--managed .mp-hero .mp-h1 { font-size: clamp(2.35rem, 3.75vw, 3.4rem); line-height: 1.04; letter-spacing: -0.034em; }
.mp-page--managed .mp-hero .mp-lead { margin-top: 18px; max-width: 52ch; font-size: 1.02rem; line-height: 1.64; }
.mp-page--managed .mp-hero .mp-actions { margin-top: 24px; }
.mp-page--managed .mp-hero .mp-ticks { margin-top: 20px; gap: 10px 16px; }
.mp-page--managed .mp-hero .mp-ticks li { font-size: 0.8rem; gap: 6px; }
.mw-hero-art { padding: 6px 0 22px; }
.mw-hero-photo {
  display: block; width: calc(100% + 56px); max-width: none; height: auto; margin: -18px -28px -26px;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(180deg, transparent, #000 5%, #000 93%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(180deg, transparent, #000 5%, #000 93%, transparent);
  mask-composite: intersect;
}
.mw-hero-note { right: -4px; top: -26px; }
.mw-hero-float { left: -18px; top: -4px; max-width: 230px; }
/* Live (status-float.js): a fixed width so the card does not jump between steps, a
   spinner while a job runs, a progress bar under the jobs that have one. */
.mw-hero-float.is-live { width: 238px; max-width: none; transition: box-shadow .3s; }
.mw-float-txt { min-width: 0; }
.mw-float-txt > span { display: block; }
.mw-float-bar { display: none; height: 4px; margin-top: 7px; border-radius: 99px; background: #eef1f7; overflow: hidden; }
.mw-float-bar > i { display: block; width: 0; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #4f7dff, var(--mp-accent)); }
.mw-hero-float.has-bar .mw-float-bar { display: block; }
.mw-hero-float .mp-dot-ok { position: relative; transition: background .3s, color .3s; }
.mw-hero-float.is-spin .mp-dot-ok { background: #eaf0fe; color: var(--mp-accent); }
.mw-hero-float.is-spin .mp-dot-ok svg { opacity: 0; }
.mw-hero-float.is-spin .mp-dot-ok::after { content: ''; position: absolute; inset: 5px; border-radius: 50%;
  border: 2px solid rgba(37, 99, 235, .22); border-top-color: var(--mp-accent); animation: mwSpin .8s linear infinite; }
.mw-hero-float.is-ok .mp-dot-ok svg { animation: mwPop .4s cubic-bezier(.3, 1.7, .5, 1); }
.mw-hero-float.is-ok { box-shadow: 0 0 0 4px rgba(22, 163, 74, .08), 0 16px 36px rgba(47, 57, 103, 0.14); }
.mw-float-txt.is-swap { animation: mwSwap .35s ease; }
@keyframes mwSpin { to { transform: rotate(360deg); } }
@keyframes mwPop { from { transform: scale(.3); } to { transform: none; } }
@keyframes mwSwap { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.mw-hero-art .mw-hero-label { bottom: 0; left: 6px; font-size: 0.68rem; opacity: .8; }
@media (max-width: 1180px) { .mw-hero-note { top: -34px; right: 0; } }
@media (max-width: 920px) {
  .mw-hero-photo { width: 100%; margin: 0; }
  .mw-hero-float { left: 0; }
}

/* The strip sits straight under the hero and ties it to the rest of the page. */
.mw-strip-sec { position: relative; padding: 0 0 4px; }
.mp-page--managed .mp-strip { padding: 26px 6px; border-radius: 14px; border-color: var(--mp-line); }
.mp-page--managed .mp-strip-item svg { width: 28px; height: 28px; margin-bottom: 10px; stroke-width: 1.9; }
.mp-page--managed .mp-strip-item strong { font-size: 0.92rem; }
.mp-page--managed .mp-strip-item span { font-size: 0.82rem; color: var(--mp-body); }

/* Managed vs one-off: a narrower intro and a wider, easier-to-read table. */
.mw-compare { grid-template-columns: minmax(0, 0.76fr) minmax(0, 1.4fr); gap: 44px; }
/* Two lines, as the design sets it: "Managed subscription / or one-off ownership?" */
.mw-compare .mp-h2 { font-size: clamp(1.7rem, 2.35vw, 2.1rem); }
.mw-compare .mp-lead { max-width: 46ch; }
.mw-compare-link { margin: 20px 0 0; }
.mp-page--managed .mw-table-wrap { border-radius: 14px; }
.mp-page--managed .mw-table { font-size: 0.875rem; }
.mp-page--managed .mw-table th, .mp-page--managed .mw-table td { padding: 12px 16px; line-height: 1.48; }
.mp-page--managed .mw-table thead th:first-child { width: 25%; }
.mp-page--managed .mw-table thead th { font-size: 0.96rem; padding-top: 18px; padding-bottom: 15px; }
.mp-page--managed .mw-table thead th small { font-size: 0.76rem; }
.mp-page--managed .mw-table tbody th { font-weight: 600; color: var(--mp-ink); }
.mp-page--managed .mw-table td { color: #47517a; }
.mp-page--managed .mw-table td.mp-col-hi { color: var(--mp-ink-2); }
.mp-page--managed .mw-table .mp-tick svg { width: 21px; height: 21px; }

/* Polish (desktop table only — the phone layout below restacks it). The recommended
   column reads as a raised card: accent bar on top, a deeper header tint, a soft glow;
   rows highlight on hover; ticks sit in a small green badge. */
@media (min-width: 641px) {
  .mp-page--managed .mw-table-wrap { overflow: hidden; }
  .mp-page--managed .mw-table thead th { vertical-align: middle; border-bottom: 1px solid var(--mp-line); }
  .mp-page--managed .mw-table thead th:first-child { color: var(--mp-muted); font-size: 0.74rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em; }
  .mp-page--managed .mw-table thead .mp-col-hi { background: linear-gradient(180deg, #e7efff, #f2f6ff);
    box-shadow: inset 0 3px 0 var(--mp-accent); border-bottom-color: #bed2fb; }
  .mp-page--managed .mw-table .mp-col-hi { position: relative; box-shadow: 0 0 0 0 transparent; }
  .mp-page--managed .mw-table tbody .mp-col-hi { box-shadow: inset 0 0 0 9999px rgba(242, 246, 255, 0); }
  .mp-page--managed .mw-table tbody tr { transition: background-color .15s ease; }
  .mp-page--managed .mw-table tbody tr:hover > th,
  .mp-page--managed .mw-table tbody tr:hover > td:not(.mp-col-hi) { background: #fafbff; }
  .mp-page--managed .mw-table tbody tr:hover > td.mp-col-hi { background: #e9f0ff; }
  .mp-page--managed .mw-table tbody th .mp-ico-inline { display: inline-grid; place-items: center; width: 28px; height: 28px;
    border-radius: 8px; background: #f2f6ff; color: var(--mp-accent); flex: none; }
  .mp-page--managed .mw-table tbody th .mp-ico-inline svg { width: 15px; height: 15px; }
  .mp-page--managed .mw-table .mp-tick { display: inline-grid; place-items: center; width: 28px; height: 28px;
    border-radius: 50%; background: #e3f7ec; }
  .mp-page--managed .mw-table .mp-tick svg { width: 16px; height: 16px; vertical-align: 0; }
}

/* Pricing: toggle on the heading line, bigger cards, a clearly marked Pro plan. */
.mp-page--managed .hv2-head-split { flex-wrap: nowrap; align-items: flex-end; }
.mp-page--managed .hv2-head { max-width: 680px; }
.mp-page--managed .mp-plans-row { margin-top: 30px; gap: 22px; }
.mp-page--managed .hv2-pricing .pricing-toggle-wrap { flex: none; border-color: var(--mp-line); border-radius: 10px; }
.mp-page--managed .hv2-pricing .pricing-toggle-btn { height: 36px; padding: 0 18px; font-size: 0.86rem; color: var(--mp-ink-2); }
.mp-page--managed .hv2-pricing .pricing-toggle-btn.active { background: var(--mp-accent); box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25); }
.mp-page--managed .hv2-pricing .pricing-save-pill { color: var(--mp-accent-d); background: var(--mp-soft); }
/* Room above the row for the Pro card's bar, and between rows when they wrap. */
.mp-page--managed .hv2-pricing .mp-plans-row .pricing-cards { padding-top: 28px; gap: 46px 18px; }
.mp-page--managed .hv2-pricing .plan {
  border-color: var(--mp-line); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(31, 45, 96, 0.04), 0 10px 26px rgba(31, 45, 96, 0.06);
}
.mp-page--managed .hv2-pricing .inner { padding: 28px 26px 0; }
.mp-page--managed .hv2-pricing .name { font-size: 1.3rem; color: var(--mp-ink); }
.mp-page--managed .hv2-pricing .price { margin-top: 12px; color: var(--mp-ink); }
.mp-page--managed .hv2-pricing .amount { font-size: 2.9rem; }
.mp-page--managed .hv2-pricing .suffix { font-size: 0.82rem; color: var(--mp-muted); }
.mp-page--managed .hv2-pricing .price-billed { font-size: 0.82rem; color: var(--mp-ink-2); }
.mp-page--managed .hv2-pricing .price-setup { font-size: 0.82rem; color: var(--mp-muted); }
.mp-page--managed .hv2-pricing .rule { margin: 20px 0 18px; }
.mp-page--managed .hv2-pricing .features { gap: 10px; padding-bottom: 90px; }
.mp-page--managed .hv2-pricing .features li { font-size: 0.9rem; color: var(--mp-ink-2); }
.mp-page--managed .hv2-pricing .features li::before { color: var(--mp-accent); }
.mp-page--managed .hv2-pricing .bottom { height: 80px; padding: 0 26px 6px; }
.mp-page--managed .hv2-pricing .cta {
  height: 46px; border-radius: 9px; font-size: 0.92rem;
  background: var(--mp-accent); box-shadow: 0 6px 14px rgba(37, 99, 235, 0.22);
}
.mp-page--managed .hv2-pricing .plan.featured {
  border: 1.5px solid var(--mp-accent); border-radius: 0 0 14px 14px;
  background: linear-gradient(180deg, #f2f5ff 0%, #ffffff 58%);
  box-shadow: 0 16px 36px rgba(37, 99, 235, 0.14);
}
/* The label is a bar across the top of the card, sitting just above the row. */
.mp-page--managed .hv2-pricing .plan.featured .badge {
  top: -28px; left: -1.5px; right: -1.5px; transform: none; width: auto; height: 28px;
  display: flex; align-items: center; justify-content: center; padding: 0 12px;
  border-radius: 12px 12px 0 0; box-shadow: none;
  background: linear-gradient(96deg, var(--mp-accent) 0%, var(--mp-accent-2) 100%);
  font-size: 10.5px; letter-spacing: 0.16em;
}
.mp-page--managed .hv2-pricing .plan.featured .cta {
  background: linear-gradient(96deg, var(--mp-accent) 0%, var(--mp-accent-2) 100%);
  box-shadow: 0 8px 18px rgba(64, 76, 235, 0.28);
}

/* The one-off route: one compact strip — pitch, three points, button. */
.mw-oneoff-intro { display: flex; gap: 16px; align-items: flex-start; }
.mw-oneoff-intro .mp-ico { margin: 2px 0 0; }
.mw-oneoff-intro .mp-h3 { margin: 0 0 5px; font-size: 1.1rem; }
.mw-oneoff-intro p { font-size: 0.88rem; }
.mw-oneoff .mp-list li { color: var(--mp-ink-2); }
.mp-page--managed .mp-plans-row:not(.mp-plans-row--aside) .mw-oneoff {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) auto; gap: 18px 40px; align-items: center; padding: 22px 28px;
}
.mp-page--managed .mp-plans-row:not(.mp-plans-row--aside) .mw-oneoff > .mw-oneoff-intro { grid-column: 1; }
.mp-page--managed .mp-plans-row:not(.mp-plans-row--aside) .mw-oneoff > .mp-list { grid-column: 2; grid-row: auto; margin: 0; }
.mp-page--managed .mp-plans-row:not(.mp-plans-row--aside) .mw-oneoff > .mp-actions { grid-column: 3; margin: 0; padding: 0; }
@media (max-width: 1080px) and (min-width: 761px) {
  .mp-page--managed .mp-plans-row:not(.mp-plans-row--aside) .mw-oneoff { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mp-page--managed .mp-plans-row:not(.mp-plans-row--aside) .mw-oneoff > .mp-actions { grid-column: 1 / -1; }
}
.mw-footnote { text-align: center; margin: 24px auto 0; max-width: 72ch; font-size: 0.8rem; }
.mw-footnote a { color: var(--mp-accent); font-weight: 600; }

/* How it works: one white panel, four equal steps divided by hairlines. */
.mp-page--managed .mp-head { margin-bottom: 24px; }
.mw-process { padding: 26px 30px; border-radius: 14px; }
.mw-process .mp-rail-n { width: 30px; height: 30px; font-size: 0.84rem; }
.mw-process .mp-rail-item h3 { font-size: 1rem; color: var(--mp-ink); }
.mw-process .mp-rail-item p { font-size: 0.86rem; color: #47517a; padding-left: 41px; }
.mw-process-link { margin: 26px 0 0; text-align: center; }

/* FAQ: a wider accordion in one bordered container, rows divided by hairlines. */
.mp-page--managed .mp-faq-grid { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.55fr); gap: 56px; }
.mp-page--managed .mp-faq { gap: 0; background: #fff; border: 1px solid var(--mp-line); border-radius: 14px;
  box-shadow: var(--mp-shadow); overflow: hidden; }
.mp-page--managed .mp-faq details { border: 0; border-radius: 0; }
.mp-page--managed .mp-faq details + details { border-top: 1px solid var(--mp-line-2); }
.mp-page--managed .mp-faq summary { padding: 16px 54px 16px 22px; font-size: 0.93rem; color: var(--mp-ink); }
.mp-page--managed .mp-faq summary:focus-visible { outline-offset: -3px; }
.mp-page--managed .mp-faq details > div { padding: 0 22px 18px; font-size: 0.9rem; color: #47517a; }

/* Closing panel, sitting close above the footer. */
.mp-page--managed > section:last-child { padding-bottom: 12px; }
.mp-page--managed .mp-cta { padding: 30px 40px; border-radius: 16px; }
.mp-page--managed .mp-cta .mp-h2 { font-size: clamp(1.5rem, 2.5vw, 2.1rem); }

@media (max-width: 920px) {
  .mp-page--managed .mp-hero-grid { gap: 28px; }
  .mw-process .mp-rail--div { row-gap: 22px; }
  .mw-process .mp-rail--div .mp-rail-item { padding: 0 18px 0 0; border-left: 0; }
}
@media (max-width: 760px) {
  .mp-page--managed .hv2-head-split { flex-wrap: wrap; }
  .mp-page--managed .mp-plans-row:not(.mp-plans-row--aside) .mw-oneoff { grid-template-columns: minmax(0, 1fr); padding: 22px; }
  .mp-page--managed .mp-plans-row:not(.mp-plans-row--aside) .mw-oneoff > .mp-actions .mp-btn { width: 100%; }
}
@media (max-width: 640px) {
  .mp-page--managed .mp-sec { padding: 36px 0; }
  .mp-page--managed > .mp-hero { padding: 28px 0 26px; }
  /* Keeps the three designed lines on a phone. */
  .mp-page--managed .mp-hero .mp-h1 { font-size: clamp(1.75rem, 8vw, 2.35rem); }
  .mp-page--managed .mp-hero .mp-actions .mp-btn { flex: 1 1 100%; }
  .mp-page--managed .mp-hero .mp-ticks li { white-space: normal; }
  .mw-process { padding: 8px 20px; }
  .mw-process .mp-rail--div .mp-rail-item { padding: 16px 0; }
  .mw-process .mp-rail--div .mp-rail-item + .mp-rail-item { border-top: 1px solid var(--mp-line-2); }
  .mp-page--managed .mp-cta { padding: 26px 22px; }
  .mp-page--managed .mp-cta .mp-actions .mp-btn { flex: 1 1 100%; }
  /* The table restacks: one feature per block, each answer labelled with its option. */
  .mw-table-wrap { overflow: visible; }
  .mp-page--managed .mw-table { min-width: 0; }
  .mw-table thead { display: none; }
  .mw-table, .mw-table tbody, .mw-table tr, .mp-page--managed .mw-table th, .mp-page--managed .mw-table td { display: block; }
  .mw-table tr { padding: 14px 16px; border-bottom: 1px solid var(--mp-line-2); }
  .mw-table tr:last-child { border-bottom: 0; }
  .mp-page--managed .mw-table tbody th { padding: 0 0 8px; border: 0; }
  .mp-page--managed .mw-table td { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 12px;
    text-align: left; padding: 7px 10px; border: 0; background: none; }
  .mp-page--managed .mw-table td.mp-col-hi { background: #f2f6ff; border: 0; border-radius: 8px; }
  .mw-table td::before { content: attr(data-label); font-size: 0.78rem; font-weight: 600; color: var(--mp-ink-2); }
}

/* ── Website design — October 2026 target pass ────────────────────────────────
   /website-design only (main.mp-page--website-design, set by includes/service-page.php).
   The other pages on the service template keep their proportions until their own
   designs are approved. Same rhythm as /managed-websites: a shorter section gap, a
   bigger hero, a larger photograph and mock-up, a taller commitments band. */
.mp-page--website-design { --mp-gap: 40px; }
.mp-page--website-design .mp-btn { border-radius: 9px; min-height: 48px; }
.mp-page--website-design .mp-btn--p { background: var(--mp-accent); box-shadow: 0 8px 18px rgba(37, 99, 235, 0.24); }
.mp-page--website-design .mp-btn--p:hover { background: var(--mp-accent-d); }
.mp-page--website-design .mp-lead { color: #47517a; }
.mp-page--website-design .mp-h2 { font-size: clamp(1.75rem, 2.75vw, 2.45rem); line-height: 1.1; }

/* Hero: a three-line headline and a photograph that runs off the right edge. */
.mp-page--website-design > .mp-hero {
  padding: 30px 0 26px;
  background:
    radial-gradient(ellipse 46% 62% at 76% 44%, rgba(176, 204, 255, .30), transparent 72%),
    radial-gradient(ellipse 30% 40% at 94% 16%, rgba(209, 190, 250, .24), transparent 72%);
}
.mp-page--website-design .mp-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px; }
.mp-page--website-design .mp-hero .mp-h1 { font-size: clamp(2.35rem, 3.7vw, 3.3rem); line-height: 1.04; letter-spacing: -0.034em; }
.mp-page--website-design .mp-hero .mp-lead { margin-top: 18px; max-width: 50ch; font-size: 1.02rem; line-height: 1.62; }
.mp-page--website-design .mp-hero .mp-actions { margin-top: 24px; }
.mp-page--website-design .mp-hero .mp-ticks { margin-top: 20px; gap: 10px 14px; }
.mp-page--website-design .mp-hero .mp-ticks li { font-size: 0.8rem; gap: 6px; }
/* Sized and framed like the /managed-websites hero: inside the content grid, no card,
   no shadow, the photograph's edges fading into the wash instead of a hard box. */
.mp-page--website-design .mp-hero-art { max-width: 600px; justify-self: end; width: 100%; }
.mp-page--website-design .mp-hero-art .mp-workspace { border-radius: 0; box-shadow: none; overflow: visible; }
.mp-page--website-design .mp-hero-art .mp-workspace-bg {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(180deg, transparent, #000 7%, #000 92%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(180deg, transparent, #000 7%, #000 92%, transparent);
  mask-composite: intersect;
}
.mp-page--website-design .mp-hero-art .mp-note--hero { top: -22px; right: 6%; }

/* Capability strip: straight under the hero, a little taller. */
.mp-page--website-design > .mp-hero + .mp-sec--tight { padding-bottom: 6px; }
.mp-page--website-design .mp-strip { padding: 26px 6px; border-radius: 14px; border-color: var(--mp-line); }
.mp-page--website-design .mp-strip-item svg { width: 28px; height: 28px; margin-bottom: 10px; }
.mp-page--website-design .mp-strip-item strong { font-size: 0.92rem; }
.mp-page--website-design .mp-strip-item span { font-size: 0.82rem; color: var(--mp-body); }

/* Built-around-your-business: a wider text column and a larger mock-up. */
.mp-page--website-design .mp-split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; }
.mp-page--website-design .mp-split .mp-lead { max-width: 54ch; font-size: 1rem; }
.mp-page--website-design .mp-split .mp-list { margin-top: 20px; gap: 10px; }
.mp-page--website-design .mp-split .mp-list li { font-size: 0.94rem; color: var(--mp-ink-2); }
/* The site window grows; the phone keeps its size and stands at the window's corner. */
.mp-page--website-design .mp-suite { padding: 0 70px 34px 0; }
.mp-page--website-design .mp-suite-site .mp-site { min-height: 340px; }
.mp-page--website-design .mp-suite-site .mp-site-pic { min-height: 230px; }
.mp-page--website-design .mp-suite-site .mp-site-copy h4 { font-size: 1.55rem; }
.mp-page--website-design .mp-suite-site .mp-site-copy p { font-size: 0.74rem; }
.mp-page--website-design .mp-suite .mp-phone { width: 126px; right: 0; bottom: 0; }
.mp-page--website-design .mp-note.mp-note--intro { top: -58px; right: 2px; }

/* The commitments band: taller, bigger icons, clearer type. */
.mp-page--website-design .mp-band-sec { padding: 40px 0 44px; }
.mp-page--website-design .mp-band-sec .mp-eyebrow { margin-bottom: 24px; }
.mp-page--website-design .mp-band-item svg { width: 30px; height: 30px; margin-bottom: 12px; }
.mp-page--website-design .mp-band-item b { font-size: 1.1rem; }
.mp-page--website-design .mp-band-item span { font-size: 0.86rem; color: rgba(255, 255, 255, 0.74); max-width: 30ch; margin-inline: auto; }

/* Process: numbered steps joined by a dotted line, as the design draws them. */
.mp-page--website-design .mp-head { margin-bottom: 22px; }
.mp-page--website-design .mp-rail-n { width: 30px; height: 30px; font-size: 0.84rem; }
.mp-page--website-design .mp-rail-item h3 { font-size: 1rem; }
.mp-page--website-design .mp-rail-head::after { height: 0; background: none; border-top: 2px dotted #b8c7f1; }
.mp-page--website-design .mp-rail-item p { font-size: 0.88rem; color: #47517a; }

/* Ongoing support: the larger white card. */
.mp-page--website-design .mp-support-panel { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.2fr) minmax(0, 0.85fr);
  gap: 34px; padding: 22px 30px 22px 22px; border-radius: 14px; }
.mp-page--website-design .mp-support-photo { aspect-ratio: 16 / 11; border-radius: 12px; }
.mp-page--website-design .mp-support-panel .mp-list li { font-size: 0.92rem; color: var(--mp-ink-2); }
.mp-page--website-design > section:has(.mp-support-panel) { padding-bottom: 14px; }

/* FAQ, related services and the closing panel, closer together. */
.mp-page--website-design .mp-faq-grid { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.5fr); gap: 52px; }
.mp-page--website-design .mp-faq { gap: 8px; }
.mp-page--website-design .mp-faq summary { padding: 14px 46px 14px 18px; font-size: 0.9rem; color: var(--mp-ink); }
.mp-page--website-design .mp-faq details { border-color: var(--mp-line); border-radius: 10px; }
.mp-page--website-design .mp-tags .mp-tag { border: 1px solid #d3dffc; color: var(--mp-accent-d); background: #eef3ff;
  transition: background .15s ease, border-color .15s ease; }
.mp-page--website-design .mp-tags .mp-tag:hover { background: #e2eaff; border-color: var(--mp-accent); }
.mp-page--website-design > section:last-child { padding-bottom: 12px; }
.mp-page--website-design .mp-cta { padding: 26px 36px; border-radius: 16px; }
.mp-page--website-design .mp-cta .mp-h2 { font-size: clamp(1.5rem, 2.5vw, 2.05rem); }

@media (max-width: 1080px) {
  .mp-page--website-design .mp-support-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 920px) {
  .mp-page--website-design .mp-hero-art { max-width: none; justify-self: stretch; }
}
@media (max-width: 640px) {
  .mp-page--website-design .mp-sec { padding: 36px 0; }
  .mp-page--website-design .mp-hero .mp-h1 { font-size: clamp(1.9rem, 8.4vw, 2.35rem); }
  .mp-page--website-design .mp-hero .mp-actions .mp-btn,
  .mp-page--website-design .mp-cta .mp-actions .mp-btn { flex: 1 1 100%; }
  .mp-page--website-design .mp-hero .mp-ticks li { white-space: normal; }
  .mp-page--website-design .mp-suite { padding: 0; }
  .mp-page--website-design .mp-suite .mp-site { min-height: 0; }
  .mp-page--website-design .mp-cta { padding: 24px 20px; }
}

/* ── Website maintenance — October 2026 target pass ───────────────────────────
   /website-maintenance only (main.mp-page--website-maintenance). Same rhythm and type
   as /website-design. What is particular to this page: the maintenance log stands in
   front of a drawn laptop and phone ('device' on the hero art), the status panel has
   small cards beside it ('aside'), the commitments band sets its icons beside the words,
   the included/quoted cards are told apart by colour, and the process steps are joined
   by arrows. The markup hooks are opt-in from the copy file, so /website-hosting, which
   shares the 'maint' and 'status' art, is untouched. */
.mp-page--website-maintenance { --mp-gap: 40px; }
.mp-page--website-maintenance .mp-btn { border-radius: 9px; min-height: 48px; }
.mp-page--website-maintenance .mp-btn--p { background: var(--mp-accent); box-shadow: 0 8px 18px rgba(37, 99, 235, 0.24); }
.mp-page--website-maintenance .mp-btn--p:hover { background: var(--mp-accent-d); }
.mp-page--website-maintenance .mp-lead { color: #47517a; }
.mp-page--website-maintenance .mp-h2 { font-size: clamp(1.75rem, 2.75vw, 2.45rem); line-height: 1.1; }
.mp-page--website-maintenance .mp-head { margin-bottom: 24px; }
/* A section head with no supporting sentence gives the heading the whole row. */
.mp-page--website-maintenance .mp-head:not(:has(> .mp-lead)) { grid-template-columns: minmax(0, 1fr); }

/* Hero: a bigger headline, and the log in front of the site it looks after. */
.mp-page--website-maintenance > .mp-hero {
  padding: 34px 0 28px;
  background:
    radial-gradient(ellipse 46% 62% at 76% 44%, rgba(176, 204, 255, .30), transparent 72%),
    radial-gradient(ellipse 30% 40% at 94% 16%, rgba(209, 190, 250, .24), transparent 72%);
}
.mp-page--website-maintenance .mp-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 36px; }
.mp-page--website-maintenance .mp-hero .mp-h1 { font-size: clamp(2.3rem, 3.6vw, 3.3rem); line-height: 1.03; letter-spacing: -0.034em; }
.mp-page--website-maintenance .mp-hero .mp-lead { margin-top: 18px; max-width: 52ch; font-size: 1.02rem; line-height: 1.64; }
.mp-page--website-maintenance .mp-hero .mp-actions { margin-top: 24px; }
.mp-page--website-maintenance .mp-hero .mp-ticks { margin-top: 20px; gap: 10px 12px; }
.mp-page--website-maintenance .mp-hero .mp-ticks li { font-size: 0.79rem; gap: 6px; }
.mp-page--website-maintenance .mp-hero .mp-ticks svg { width: 17px; height: 17px; padding: 3px; }
.mp-page--website-maintenance .mp-hero-art .mp-note--hero { top: -26px; right: 0; }
.mp-page--website-maintenance .mp-hero-art .mp-mock-label { left: 0; }

.mp-maint-scene { position: relative; padding-top: 34px; }
.mp-maint-scene::before { content: ''; position: absolute; inset: 0 -4% -8% 12%; z-index: 0; border-radius: 50%;
  background: radial-gradient(ellipse at 55% 55%, rgba(176, 204, 255, .34), transparent 68%); }
.mp-maint-device { position: relative; z-index: 1; margin-left: 28%; padding: 0 50px 26px 0; }
.mp-maint-device .mp-laptop-screen { box-shadow: 0 22px 46px rgba(31, 45, 96, 0.18); }
.mp-maint-device .mp-browser { border: 0; box-shadow: none; border-radius: 0; }
.mp-maint-device .mp-site { min-height: 0; }
.mp-maint-device .mp-site-strip { display: none; }
.mp-maint-device .mp-site-nav { padding: 10px 14px; }
.mp-maint-device .mp-site-nav span { display: none; }
.mp-maint-device .mp-site-hero { min-height: 196px; }
.mp-maint-device .mp-site-copy { padding: 20px 14px 18px 18px; }
.mp-maint-device .mp-site-copy h4 { font-size: 1.12rem; }
.mp-maint-device .mp-phone { right: 0; bottom: 0; width: 112px; padding: 5px; z-index: 3;
  box-shadow: 0 16px 34px rgba(17, 21, 43, 0.28); }
.mp-maint-device .mp-phone-screen { min-height: 0; }
.mp-maint-device .mp-phone-screen .mp-site-copy { padding: 10px 9px 8px; }
.mp-maint-device .mp-phone-screen .mp-site-copy h4 { font-size: 0.72rem; margin-bottom: 5px; }
.mp-maint-device .mp-phone-screen .mp-site-copy p { font-size: 0.48rem; margin-bottom: 7px; }
.mp-maint-device .mp-phone-screen .mp-site-btns span { font-size: 0.46rem; padding: 4px 7px; }
.mp-maint-device .mp-phone-screen .mp-site-pic { min-height: 64px; }
.mp-maint-log { position: absolute; left: 0; top: 4px; z-index: 4; width: min(262px, 42%); padding: 16px 18px;
  border-radius: 14px; border-color: var(--mp-line); box-shadow: 0 18px 40px rgba(31, 45, 96, 0.14); }
.mp-maint-log .mp-h3 { font-size: 0.95rem; }
.mp-maint-log .mp-timeline { gap: 11px; }
.mp-maint-log .mp-timeline li { font-size: 0.78rem; }

/* Hero art 'monitor': the live status console (assets/js/monitor-demo.js plays it).
   States on each row: ok · scan (spinner) · bad (red) · fix (amber, progress bar) · done
   (green flash). The pill, the feed and the toast follow the same five colours. */
.mp-mon-scene { --mon-ok: #16a34a; --mon-bad: #e02d3c; --mon-fix: #d97706; --mon-info: var(--mp-accent);
  position: relative; padding: 30px 22px 34px 0; }
.mp-mon-scene::before { content: ''; position: absolute; inset: -6% -10% -4% 6%; z-index: 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(96, 141, 255, .22), transparent); filter: blur(8px); pointer-events: none; }
.mp-mon { position: relative; z-index: 1; border-radius: 16px; overflow: hidden; background: #fff;
  border: 1px solid rgba(219, 225, 242, .9);
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 30px 60px -18px rgba(31, 45, 96, .32), 0 10px 22px rgba(31, 45, 96, .08); }
.mp-mon-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #f6f8fe; border-bottom: 1px solid var(--mp-line-2); }
.mp-mon-bar > i { width: 9px; height: 9px; border-radius: 50%; background: #dfe4f3; }
.mp-mon-bar > i:nth-child(1) { background: #ff8a80; } .mp-mon-bar > i:nth-child(2) { background: #ffd166; } .mp-mon-bar > i:nth-child(3) { background: #7bd88f; }
.mp-mon-url { display: inline-flex; align-items: center; gap: 5px; margin: 0 auto; padding: 3px 12px; border-radius: 99px;
  background: #fff; border: 1px solid var(--mp-line-2); font-size: .66rem; color: var(--mp-muted); }
.mp-mon-url svg { width: 10px; height: 10px; color: var(--mon-ok); }
.mp-mon-live { display: inline-flex; align-items: center; gap: 5px; font-size: .62rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--mon-ok); }
.mp-mon-live b { width: 7px; height: 7px; border-radius: 50%; background: var(--mon-ok); box-shadow: 0 0 0 0 rgba(22,163,74,.5); animation: mpMonPulse 1.8s infinite; }
.mp-mon-body { display: grid; grid-template-columns: 128px minmax(0, 1fr); }
.mp-mon-side { background: linear-gradient(180deg, #13204a, #0c1636); padding: 14px 9px; display: flex; flex-direction: column; gap: 2px; }
.mp-mon-side span { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 8px; font-size: .68rem; color: #aab5dc; }
.mp-mon-side span.on { background: rgba(255,255,255,.1); color: #fff; font-weight: 600; box-shadow: inset 2px 0 0 #60a5fa; }
.mp-mon-side svg { width: 13px; height: 13px; flex: none; }
.mp-mon-main { padding: 14px 16px 14px; min-width: 0; }
.mp-mon-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.mp-mon-head h4 { margin: 0; font-size: .95rem; font-weight: 700; color: var(--mp-ink); letter-spacing: -.01em; }
.mp-mon-checked { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; font-size: .62rem; color: var(--mp-muted); }
.mp-mon-checked svg { width: 10px; height: 10px; }
.mp-mon-checked.is-spin svg { animation: mpMonSpin .9s linear infinite; color: var(--mon-info); }

.mp-mon-pill { --c: var(--mon-ok); display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 5px 11px; border-radius: 99px;
  font-style: normal; font-size: .66rem; font-weight: 700; color: var(--c);
  background: color-mix(in srgb, var(--c) 11%, #fff); border: 1px solid color-mix(in srgb, var(--c) 24%, #fff);
  transition: color .3s, background-color .3s, border-color .3s; }
.mp-mon-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); transition: background-color .3s; }
.mp-mon-pill[data-state="scan"] { --c: var(--mon-info); }
.mp-mon-pill[data-state="scan"] i { animation: mpMonBlink .8s ease-in-out infinite alternate; }
.mp-mon-pill[data-state="bad"]  { --c: var(--mon-bad); animation: mpMonShake .4s ease 1; }
.mp-mon-pill[data-state="fix"]  { --c: var(--mon-fix); }
.mp-mon-pill[data-state="fix"] i { animation: mpMonBlink .5s ease-in-out infinite alternate; }

.mp-mon-scan { position: relative; height: 2px; margin: 11px 0 9px; border-radius: 2px; background: var(--mp-line-2); overflow: hidden; }
.mp-mon-scan span { position: absolute; inset: 0; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, #60a5fa, var(--mon-info)); }
.mp-mon-scan.is-run span { animation: mpMonScan 1.95s cubic-bezier(.4,.1,.3,1) forwards; }
.mp-mon:not(.is-scanning) .mp-mon-scan.is-run span { animation: none; transform: scaleX(1); opacity: 0; transition: opacity .5s; }

.mp-mon-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.mp-mon-rows li { --c: var(--mon-ok); position: relative; overflow: hidden; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 20px;
  align-items: center; gap: 9px; padding: 6px 9px 6px 7px; border-radius: 10px; border: 1px solid var(--mp-line-2); background: #fff;
  transition: background-color .35s, border-color .35s, box-shadow .35s; }
.mp-mon-ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--mp-tint); color: var(--mp-accent); }
.mp-mon-ic svg { width: 14px; height: 14px; }
.mp-mon-txt { min-width: 0; line-height: 1.25; }
.mp-mon-txt b { display: block; font-size: .72rem; color: var(--mp-ink); }
.mp-mon-txt small { display: block; font-size: .6rem; color: var(--mp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-mon-tag { font-style: normal; font-size: .6rem; font-weight: 700; padding: 3px 8px; border-radius: 99px; white-space: nowrap; color: var(--c);
  background: color-mix(in srgb, var(--c) 11%, #fff); transition: color .3s, background-color .3s; }
.mp-mon-st { position: relative; width: 20px; height: 20px; }
.mp-mon-st > span { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; opacity: 0; transform: scale(.5);
  transition: opacity .25s, transform .35s cubic-bezier(.3,1.6,.5,1); color: #fff; }
.mp-mon-st svg { width: 11px; height: 11px; stroke-width: 2.6; }
.mp-mon-st-ok  { background: var(--mon-ok); }
.mp-mon-st-bad { background: var(--mon-bad); }
.mp-mon-st-fix { background: var(--mon-fix); }
.mp-mon-st-fix svg { animation: mpMonWrench .7s ease-in-out infinite alternate; }
.mp-mon-st > .mp-mon-st-spin { border: 2px solid var(--mp-line); border-top-color: var(--mon-info); background: none; animation: mpMonSpin .7s linear infinite; }
.mp-mon-rows li:is([data-state="ok"], [data-state="done"]) .mp-mon-st-ok,
.mp-mon-rows li[data-state="bad"] .mp-mon-st-bad,
.mp-mon-rows li[data-state="fix"] .mp-mon-st-fix,
.mp-mon-rows li[data-state="scan"] .mp-mon-st-spin { opacity: 1; transform: none; }
.mp-mon-rows li[data-state="scan"] { --c: var(--mon-info); background: #f7f9ff; }
.mp-mon-rows li[data-state="scan"]::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(96,165,250,.16) 50%, transparent 70%); animation: mpMonSheen .9s linear infinite; }
.mp-mon-rows li[data-state="bad"] { --c: var(--mon-bad); background: #fff5f5; border-color: #f8c9cd; box-shadow: 0 0 0 3px rgba(224,45,60,.08); }
.mp-mon-rows li[data-state="bad"] .mp-mon-ic { background: #ffe3e5; color: var(--mon-bad); }
.mp-mon-rows li[data-state="bad"] .mp-mon-st-bad { animation: mpMonPing 1s ease-out infinite; }
.mp-mon-rows li[data-state="fix"] { --c: var(--mon-fix); background: #fffaf0; border-color: #f6dcae; }
.mp-mon-rows li[data-state="fix"] .mp-mon-ic { background: #fdefd6; color: var(--mon-fix); }
.mp-mon-bar-fix { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--mon-fix); }
.mp-mon-rows li[data-state="fix"] .mp-mon-bar-fix { animation: mpMonFill 3.4s cubic-bezier(.3,.1,.3,1) forwards; }
.mp-mon-rows li[data-state="done"] { background: #f2fbf5; border-color: #bfe8cc; animation: mpMonDone 1.2s ease-out 1; }
.mp-mon-rows li[data-state="done"] .mp-mon-ic { background: #dcf5e4; color: var(--mon-ok); }

.mp-mon-feed { margin-top: 11px; padding-top: 10px; border-top: 1px dashed var(--mp-line); }
.mp-mon-feed h5 { margin: 0 0 6px; font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mp-muted); }
.mp-mon-feed ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; height: 62px; overflow: hidden; align-content: start; }
.mp-mon-feed li { --c: var(--mon-ok); display: grid; grid-template-columns: 7px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  font-size: .63rem; color: var(--mp-body); max-height: 18px; transition: opacity .4s, transform .45s cubic-bezier(.2,.8,.3,1), max-height .4s; }
.mp-mon-feed li.is-new { opacity: 0; transform: translateY(-8px); max-height: 0; }
.mp-mon-feed li i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.mp-mon-feed li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-mon-feed li time { font-variant-numeric: tabular-nums; font-size: .58rem; color: var(--mp-muted); }
.mp-mon-feed li[data-kind="bad"]  { --c: var(--mon-bad); color: #b42330; font-weight: 600; }
.mp-mon-feed li[data-kind="fix"]  { --c: var(--mon-fix); }
.mp-mon-feed li[data-kind="info"] { --c: var(--mon-info); }

/* The floating cards: the "team notified" toast slides in from the right; the backup chip sits bottom-left. */
.mp-mon-toast { --c: var(--mon-info); position: absolute; z-index: 3; right: -4px; bottom: 74px; display: flex; align-items: center; gap: 10px;
  width: 236px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.94); backdrop-filter: blur(10px);
  border: 1px solid var(--mp-line-2); box-shadow: 0 18px 40px -12px rgba(31,45,96,.35);
  opacity: 0; transform: translate(24px, -6px) scale(.96); transition: opacity .35s, transform .5s cubic-bezier(.2,1.3,.4,1); pointer-events: none; }
.mp-mon-toast.is-on { opacity: 1; transform: none; }
.mp-mon-toast[data-kind="ok"] { --c: var(--mon-ok); }
.mp-mon-toast i { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; color: #fff;
  background: var(--c); box-shadow: 0 6px 14px -4px var(--c); transition: background-color .3s; }
.mp-mon-toast i svg { width: 15px; height: 15px; stroke-width: 2.2; }
.mp-mon-toast b { display: block; font-size: .74rem; color: var(--mp-ink); }
.mp-mon-toast small { display: block; font-size: .62rem; line-height: 1.35; color: var(--mp-muted); }
.mp-mon-chip { position: absolute; z-index: 3; left: -26px; bottom: 6px; display: flex; align-items: center; gap: 9px; padding: 9px 13px 9px 10px;
  border-radius: 13px; background: #fff; border: 1px solid var(--mp-line-2); box-shadow: 0 16px 34px -12px rgba(31,45,96,.3);
  animation: mpMonFloat 6s ease-in-out infinite; }
.mp-mon-chip > svg { width: 26px; height: 26px; padding: 6px; border-radius: 8px; background: #dcf5e4; color: var(--mon-ok); }
.mp-mon-chip small { display: block; font-size: .58rem; color: var(--mp-muted); }
.mp-mon-chip b { display: block; font-size: .72rem; color: var(--mp-ink); }

@keyframes mpMonPulse { 70% { box-shadow: 0 0 0 7px rgba(22,163,74,0); } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } }
@keyframes mpMonSpin  { to { transform: rotate(360deg); } }
@keyframes mpMonBlink { from { opacity: .35; } to { opacity: 1; } }
@keyframes mpMonScan  { to { transform: scaleX(1); } }
@keyframes mpMonSheen { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes mpMonFill  { to { width: 100%; } }
@keyframes mpMonWrench { from { transform: rotate(-18deg); } to { transform: rotate(18deg); } }
@keyframes mpMonPing  { 0% { box-shadow: 0 0 0 0 rgba(224,45,60,.5); } 100% { box-shadow: 0 0 0 8px rgba(224,45,60,0); } }
@keyframes mpMonShake { 25% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 75% { transform: translateX(-2px); } }
@keyframes mpMonDone  { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,.45); } 100% { box-shadow: 0 0 0 10px rgba(22,163,74,0); } }
@keyframes mpMonFloat { 50% { transform: translateY(-5px); } }

@media (max-width: 640px) {
  .mp-mon-scene { padding: 0 0 26px; }
  .mp-mon-body { grid-template-columns: minmax(0, 1fr); }
  .mp-mon-side { display: none; }
  .mp-mon-toast { bottom: -6px; right: 8px; width: min(236px, 80%); }
  .mp-mon-chip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mp-mon-scene *, .mp-mon-scene *::before, .mp-mon-scene *::after { animation: none !important; transition: none !important; }
}

/* Capability strip: straight under the hero, a little taller. */
.mp-page--website-maintenance > .mp-hero + .mp-sec--tight { padding-bottom: 6px; }
.mp-page--website-maintenance .mp-strip { padding: 26px 6px; border-radius: 14px; border-color: var(--mp-line); }
.mp-page--website-maintenance .mp-strip-item svg { width: 28px; height: 28px; margin-bottom: 10px; }
.mp-page--website-maintenance .mp-strip-item strong { font-size: 0.92rem; }
.mp-page--website-maintenance .mp-strip-item span { font-size: 0.82rem; color: var(--mp-body); }

/* Someone whose job it is: copy left, the status panel and its cards right. */
.mp-page--website-maintenance .mp-split { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); gap: 52px; }
.mp-page--website-maintenance .mp-split .mp-lead { max-width: 54ch; font-size: 1rem; }
.mp-page--website-maintenance .mp-split .mp-list { margin-top: 20px; gap: 10px; }
.mp-page--website-maintenance .mp-split .mp-list li { font-size: 0.94rem; color: var(--mp-ink-2); }
.mp-page--website-maintenance .mp-note.mp-note--intro { top: -72px; right: 2px; }
.mp-status-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 196px); gap: 16px; align-items: center; }
.mp-status-wrap .mp-status { padding: 24px 26px; border-radius: 14px; border-color: var(--mp-line); }
.mp-status-wrap .mp-qa-list { gap: 11px; }
.mp-status-wrap .mp-qa-list li { font-size: 0.86rem; }
.mp-status-wrap .mp-qa-list li em { font-size: 0.76rem; }
.mp-status-aside { display: grid; gap: 12px; }
.mp-status-aside .mp-card { padding: 14px 16px; gap: 12px; align-items: center; border-radius: 12px;
  border-color: var(--mp-line); box-shadow: 0 6px 18px rgba(31, 45, 96, 0.06); }
.mp-status-aside .mp-ico { width: 36px; height: 36px; border-radius: 10px; }
.mp-status-aside .mp-ico svg { width: 18px; height: 18px; }
.mp-status-aside b { display: block; font-size: 0.9rem; color: var(--mp-ink); line-height: 1.3; }
.mp-status-aside span:not(.mp-ico) { display: block; margin-top: 2px; font-size: 0.76rem; color: var(--mp-muted); line-height: 1.4; }

/* The commitments band: icon beside the words, as the design sets it. */
.mp-page--website-maintenance .mp-band-sec { padding: 34px 0 38px; }
.mp-page--website-maintenance .mp-band-sec .mp-eyebrow { margin-bottom: 22px; }
.mp-page--website-maintenance .mp-band-item { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px;
  align-items: start; text-align: left; padding: 4px 26px; }
.mp-page--website-maintenance .mp-band-item:first-child { padding-left: 0; }
.mp-page--website-maintenance .mp-band-item svg { grid-row: span 2; width: 32px; height: 32px; margin: 2px 0 0; }
.mp-page--website-maintenance .mp-band-item b { font-size: 1.02rem; }
.mp-page--website-maintenance .mp-band-item span { margin-top: 4px; font-size: 0.84rem; color: rgba(255, 255, 255, 0.74); }
.mp-page--website-maintenance .mp-band-item + .mp-band-item { border-left-color: rgba(255, 255, 255, 0.16); }

/* Included / quoted separately: blue ticks on white, red crosses on a faint warm tint. */
.mp-page--website-maintenance .mp-grid--2:has(> .mp-inc) { gap: 22px; }
.mp-page--website-maintenance .mp-inc { padding: 24px 28px; border-radius: 14px; border-color: var(--mp-line);
  box-shadow: 0 8px 24px rgba(31, 45, 96, 0.05); }
.mp-page--website-maintenance .mp-inc--no { background: linear-gradient(160deg, #fff8f8 0%, #fdf2f3 100%); border-color: #f4d6d9; }
.mp-page--website-maintenance .mp-inc .mp-h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.mp-page--website-maintenance .mp-inc .mp-list { gap: 10px; }
.mp-page--website-maintenance .mp-inc .mp-list li { font-size: 0.92rem; color: var(--mp-ink-2); }
.mp-page--website-maintenance .mp-inc--no .mp-list svg { background: #e5484d; }
.mp-inc-mark { display: inline-flex; flex: none; }
.mp-inc-mark svg { width: 26px; height: 26px; padding: 5px; border-radius: 50%; color: #fff; background: var(--mp-accent); }
.mp-inc--no .mp-inc-mark svg { background: #e5484d; }
.mp-page--website-maintenance .mp-inc + .mp-small, .mp-page--website-maintenance .mp-grid--2:has(> .mp-inc) + .mp-small {
  max-width: 110ch; font-size: 0.82rem; }
.mp-page--website-maintenance .mp-small a { color: var(--mp-accent); font-weight: 600; }

/* Why it matters: four even cards. */
.mp-page--website-maintenance .mp-grid--4 { gap: 16px; }
.mp-page--website-maintenance .mp-grid--4 .mp-card { padding: 20px 22px; border-color: var(--mp-line); border-radius: 12px;
  box-shadow: 0 6px 18px rgba(31, 45, 96, 0.05); }
.mp-page--website-maintenance .mp-grid--4 .mp-ico { width: 42px; height: 42px; margin-bottom: 14px; }
.mp-page--website-maintenance .mp-grid--4 .mp-h3 { font-size: 1.02rem; }
.mp-page--website-maintenance .mp-grid--4 .mp-card p { font-size: 0.88rem; }

/* Process: four steps joined by arrows rather than trailing rules. */
.mp-page--website-maintenance .mp-rail { gap: 64px; }
.mp-page--website-maintenance .mp-rail-head::after { display: none; }
.mp-page--website-maintenance .mp-rail-n { width: 32px; height: 32px; font-size: 0.84rem; }
.mp-page--website-maintenance .mp-rail-item h3 { font-size: 1rem; color: var(--mp-ink); white-space: normal; }
.mp-page--website-maintenance .mp-rail-item p { padding-left: 43px; font-size: 0.88rem; color: #47517a; max-width: 34ch; }
.mp-page--website-maintenance .mp-rail-item + .mp-rail-item::before { content: ''; position: absolute; left: -46px; top: 15px;
  width: 26px; height: 2px; background: #9fb8f4; }
.mp-page--website-maintenance .mp-rail-item + .mp-rail-item::after { content: ''; position: absolute; left: -27px; top: 12px;
  width: 7px; height: 7px; border-top: 2px solid #9fb8f4; border-right: 2px solid #9fb8f4; transform: rotate(45deg); }

/* Ongoing support: the wide white card. */
.mp-page--website-maintenance .mp-support-panel { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 0.9fr);
  gap: 34px; padding: 22px 30px 22px 22px; border-radius: 14px; border-color: var(--mp-line); }
.mp-page--website-maintenance .mp-support-photo { aspect-ratio: 16 / 11; border-radius: 12px; }
.mp-page--website-maintenance .mp-support-panel .mp-list li { font-size: 0.92rem; color: var(--mp-ink-2); }
.mp-page--website-maintenance > section:has(.mp-support-panel) { padding-bottom: 14px; }

/* FAQ, related services and the closing panel, closer together. */
.mp-page--website-maintenance .mp-faq-grid { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.55fr); gap: 56px; }
.mp-page--website-maintenance .mp-faq { gap: 8px; }
.mp-page--website-maintenance .mp-faq details { border-color: var(--mp-line); border-radius: 10px; transition: border-color .15s ease; }
.mp-page--website-maintenance .mp-faq details:hover { border-color: #b9cbf7; }
.mp-page--website-maintenance .mp-faq summary { padding: 15px 46px 15px 20px; font-size: 0.92rem; color: var(--mp-ink); }
.mp-page--website-maintenance .mp-faq details > div { color: #47517a; }
.mp-page--website-maintenance .mp-tags .mp-tag { border: 1px solid #d3dffc; color: var(--mp-accent-d); background: #eef3ff;
  transition: background .15s ease, border-color .15s ease; }
.mp-page--website-maintenance .mp-tags .mp-tag:hover { background: #e2eaff; border-color: var(--mp-accent); }
.mp-page--website-maintenance > section:last-child { padding-bottom: 12px; }
.mp-page--website-maintenance .mp-cta { padding: 26px 36px; border-radius: 16px; }
.mp-page--website-maintenance .mp-cta .mp-h2 { font-size: clamp(1.5rem, 2.5vw, 2.05rem); }

@media (max-width: 1180px) {
  .mp-status-wrap { grid-template-columns: minmax(0, 1fr); }
  .mp-status-aside { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mp-status-aside .mp-card { padding: 12px; }
  .mp-page--website-maintenance .mp-rail { gap: 48px; }
  .mp-page--website-maintenance .mp-rail-item p { padding-left: 0; }
  .mp-page--website-maintenance .mp-rail-item + .mp-rail-item::before { left: -38px; width: 20px; }
  .mp-page--website-maintenance .mp-rail-item + .mp-rail-item::after { left: -25px; }
}
@media (max-width: 1080px) {
  .mp-page--website-maintenance .mp-support-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mp-page--website-maintenance .mp-band-item { padding: 4px 16px; }
}
@media (max-width: 920px) {
  .mp-page--website-maintenance .mp-hero-art { max-width: 640px; margin-top: 8px; }
  .mp-page--website-maintenance .mp-rail { gap: 26px 32px; }
  .mp-page--website-maintenance .mp-rail-item + .mp-rail-item::before,
  .mp-page--website-maintenance .mp-rail-item + .mp-rail-item::after { display: none; }
  .mp-page--website-maintenance .mp-band-item,
  .mp-page--website-maintenance .mp-band-item:first-child { padding: 0; border-left: 0; }
}
@media (max-width: 640px) {
  .mp-page--website-maintenance .mp-sec { padding: 36px 0; }
  .mp-page--website-maintenance .mp-hero .mp-h1 { font-size: clamp(2rem, 9vw, 2.45rem); }
  .mp-page--website-maintenance .mp-hero .mp-actions .mp-btn,
  .mp-page--website-maintenance .mp-cta .mp-actions .mp-btn { flex: 1 1 100%; }
  .mp-page--website-maintenance .mp-hero .mp-ticks li { white-space: normal; }
  .mp-maint-scene { padding-top: 0; }
  .mp-maint-log { position: relative; width: auto; }
  .mp-maint-device { margin: 16px 0 0; padding: 0 7% 14px; }
  .mp-page--website-maintenance .mp-hero-art .mp-mock-label { right: 0; }
  .mp-status-aside { grid-template-columns: minmax(0, 1fr); }
  .mp-page--website-maintenance .mp-inc { padding: 22px 20px; }
  .mp-page--website-maintenance .mp-rail-item p { padding-left: 0; }
  .mp-page--website-maintenance .mp-cta { padding: 24px 20px; }
}

/* ── Local SEO — October 2026 target pass ─────────────────────────────────────
   /local-seo only (main.mp-page--local-seo). Same rhythm and type as /website-design
   and /website-maintenance. The hero and intro pictures are plain placeholder boxes
   (.mp-art-ph, the 'placeholder' art type) until hero-local-seo.jpg and
   intro-local-seo.jpg are dropped into assets/images/pages/, which then replace them. */
.mp-art-ph { width: 100%; border-radius: 14px; border: 1px dashed #b9cbf7;
  background: linear-gradient(160deg, #eef3ff 0%, #e5ecfb 100%); }

.mp-page--local-seo { --mp-gap: 44px; }
.mp-page--local-seo .mp-btn { border-radius: 9px; min-height: 48px; }
.mp-page--local-seo .mp-btn--p { background: var(--mp-accent); box-shadow: 0 8px 18px rgba(37, 99, 235, 0.24); }
.mp-page--local-seo .mp-btn--p:hover { background: var(--mp-accent-d); }
.mp-page--local-seo .mp-lead { color: #47517a; }
.mp-page--local-seo .mp-h2 { font-size: clamp(1.75rem, 2.75vw, 2.45rem); line-height: 1.1; }
.mp-page--local-seo .mp-head { margin-bottom: 24px; }

/* Hero: a bigger headline, and the search/map picture beside it. */
.mp-page--local-seo > .mp-hero {
  padding: 34px 0 28px;
  background:
    radial-gradient(ellipse 46% 62% at 76% 44%, rgba(176, 204, 255, .30), transparent 72%),
    radial-gradient(ellipse 30% 40% at 94% 16%, rgba(209, 190, 250, .24), transparent 72%);
}
.mp-page--local-seo .mp-hero-grid { grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr); gap: 40px; align-items: center; }
.mp-page--local-seo .mp-hero .mp-h1 { font-size: clamp(2.4rem, 3.9vw, 3.45rem); line-height: 1.03; letter-spacing: -0.034em; }
.mp-page--local-seo .mp-hero .mp-lead { margin-top: 18px; max-width: 52ch; font-size: 1.02rem; line-height: 1.64; }
.mp-page--local-seo .mp-hero .mp-actions { margin-top: 24px; }
.mp-page--local-seo .mp-hero .mp-ticks { margin-top: 20px; gap: 10px 18px; }
.mp-page--local-seo .mp-hero .mp-ticks li { font-size: 0.82rem; gap: 7px; }
.mp-page--local-seo .mp-hero-art { position: relative; padding-top: 8px; }
.mp-page--local-seo .mp-hero-art .mp-art-ph { aspect-ratio: 16 / 10; box-shadow: 0 18px 44px rgba(31, 45, 96, 0.1); }
.mp-page--local-seo .mp-hero-art .mp-workspace-bg { min-height: 380px; object-fit: cover; }
/* Clear of the floating site header, which hid the first line at -30px. */
.mp-page--local-seo .mp-hero-art .mp-note--hero { top: 14px; right: -6px; z-index: 2; }

/* Capability strip: straight under the hero, a little taller. */
.mp-page--local-seo > .mp-hero + .mp-sec--tight { padding-bottom: 6px; }
.mp-page--local-seo .mp-strip { padding: 26px 6px; border-radius: 14px; border-color: var(--mp-line); }
.mp-page--local-seo .mp-strip-item svg { width: 28px; height: 28px; margin-bottom: 10px; }
.mp-page--local-seo .mp-strip-item strong { font-size: 0.92rem; }
.mp-page--local-seo .mp-strip-item span { font-size: 0.82rem; color: var(--mp-body); }

/* Being found starts with a site that works: copy left, the larger picture right. */
.mp-page--local-seo .mp-split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 52px; align-items: center; }
.mp-page--local-seo .mp-split .mp-lead { max-width: 54ch; font-size: 1rem; }
.mp-page--local-seo .mp-split .mp-list { margin-top: 20px; gap: 10px; }
.mp-page--local-seo .mp-split .mp-list li { font-size: 0.94rem; color: var(--mp-ink-2); }
.mp-page--local-seo .mp-split .mp-art-ph { aspect-ratio: 16 / 9.5; }
.mp-page--local-seo .mp-note.mp-note--intro { top: -58px; right: 2px; }

/* The commitments band: taller, bigger icons, clearer type. */
.mp-page--local-seo .mp-band-sec { padding: 36px 0 40px; }
.mp-page--local-seo .mp-band-sec .mp-eyebrow { margin-bottom: 22px; }
.mp-page--local-seo .mp-band-item svg { width: 30px; height: 30px; margin-bottom: 12px; }
.mp-page--local-seo .mp-band-item b { font-size: 1.05rem; }
.mp-page--local-seo .mp-band-item span { font-size: 0.85rem; color: rgba(255, 255, 255, 0.74); max-width: 30ch; margin-inline: auto; }
.mp-page--local-seo .mp-band-item + .mp-band-item { border-left-color: rgba(255, 255, 255, 0.16); }

/* What we do / what we won't: blue ticks on white, red crosses on a faint warm tint. */
.mp-page--local-seo .mp-grid--2:has(> .mp-inc) { gap: 22px; }
.mp-page--local-seo .mp-inc { padding: 24px 28px; border-radius: 14px; border-color: var(--mp-line);
  box-shadow: 0 8px 24px rgba(31, 45, 96, 0.05); }
.mp-page--local-seo .mp-inc--no { background: linear-gradient(160deg, #fff8f8 0%, #fdf2f3 100%); border-color: #f4d6d9; }
.mp-page--local-seo .mp-inc .mp-h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.mp-page--local-seo .mp-inc .mp-list { gap: 10px; }
.mp-page--local-seo .mp-inc .mp-list li { font-size: 0.92rem; color: var(--mp-ink-2); }
.mp-page--local-seo .mp-inc--no .mp-list svg { background: #e5484d; }
.mp-page--local-seo .mp-grid--2:has(> .mp-inc) + .mp-small { max-width: 110ch; font-size: 0.82rem; }
.mp-page--local-seo .mp-small a { color: var(--mp-accent); font-weight: 600; }

/* Foundations first: four even, short cards. */
.mp-page--local-seo .mp-grid--4 { gap: 16px; }
.mp-page--local-seo .mp-grid--4 .mp-card { padding: 20px 22px; border-color: var(--mp-line); border-radius: 12px;
  box-shadow: 0 6px 18px rgba(31, 45, 96, 0.05); }
.mp-page--local-seo .mp-grid--4 .mp-ico { width: 42px; height: 42px; margin-bottom: 14px; }
.mp-page--local-seo .mp-grid--4 .mp-h3 { font-size: 1.02rem; }
.mp-page--local-seo .mp-grid--4 .mp-card p { font-size: 0.88rem; }

/* Process: four steps joined by arrows rather than trailing rules. */
.mp-page--local-seo .mp-rail { gap: 64px; }
.mp-page--local-seo .mp-rail-head::after { display: none; }
.mp-page--local-seo .mp-rail-n { width: 32px; height: 32px; font-size: 0.84rem; }
.mp-page--local-seo .mp-rail-item h3 { font-size: 1rem; color: var(--mp-ink); white-space: normal; }
.mp-page--local-seo .mp-rail-item p { padding-left: 43px; font-size: 0.88rem; color: #47517a; max-width: 34ch; }
.mp-page--local-seo .mp-rail-item + .mp-rail-item::before { content: ''; position: absolute; left: -46px; top: 15px;
  width: 26px; height: 2px; background: #9fb8f4; }
.mp-page--local-seo .mp-rail-item + .mp-rail-item::after { content: ''; position: absolute; left: -27px; top: 12px;
  width: 7px; height: 7px; border-top: 2px solid #9fb8f4; border-right: 2px solid #9fb8f4; transform: rotate(45deg); }

/* Ongoing support: the wide white card. */
.mp-page--local-seo .mp-support-panel { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 0.9fr);
  gap: 34px; padding: 22px 30px 22px 22px; border-radius: 14px; border-color: var(--mp-line); }
.mp-page--local-seo .mp-support-photo { aspect-ratio: 16 / 11; border-radius: 12px; }
.mp-page--local-seo .mp-support-panel .mp-list li { font-size: 0.92rem; color: var(--mp-ink-2); }
.mp-page--local-seo > section:has(.mp-support-panel) { padding-bottom: 14px; }

/* FAQ, related services and the closing panel, closer together. */
.mp-page--local-seo .mp-faq-grid { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.55fr); gap: 56px; }
.mp-page--local-seo .mp-faq { gap: 8px; }
.mp-page--local-seo .mp-faq details { border-color: var(--mp-line); border-radius: 10px; transition: border-color .15s ease; }
.mp-page--local-seo .mp-faq details:hover { border-color: #b9cbf7; }
.mp-page--local-seo .mp-faq summary { padding: 15px 46px 15px 20px; font-size: 0.92rem; color: var(--mp-ink); }
.mp-page--local-seo .mp-faq details > div { color: #47517a; }
.mp-page--local-seo .mp-tags .mp-tag { border: 1px solid #d3dffc; color: var(--mp-accent-d); background: #eef3ff;
  transition: background .15s ease, border-color .15s ease; }
.mp-page--local-seo .mp-tags .mp-tag:hover { background: #e2eaff; border-color: var(--mp-accent); }
.mp-page--local-seo > section:last-child { padding-bottom: 12px; }
.mp-page--local-seo .mp-cta { padding: 26px 36px; border-radius: 16px; }
.mp-page--local-seo .mp-cta .mp-h2 { font-size: clamp(1.5rem, 2.5vw, 2.05rem); }

@media (max-width: 1180px) {
  .mp-page--local-seo .mp-rail { gap: 48px; }
  .mp-page--local-seo .mp-rail-item + .mp-rail-item::before { left: -38px; width: 20px; }
  .mp-page--local-seo .mp-rail-item + .mp-rail-item::after { left: -25px; }
}
@media (max-width: 1080px) {
  .mp-page--local-seo .mp-support-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 920px) {
  .mp-page--local-seo .mp-hero-art { max-width: 640px; margin-top: 8px; }
  .mp-page--local-seo .mp-rail { gap: 26px 32px; }
  .mp-page--local-seo .mp-rail-item + .mp-rail-item::before,
  .mp-page--local-seo .mp-rail-item + .mp-rail-item::after { display: none; }
}
@media (max-width: 640px) {
  .mp-page--local-seo .mp-sec { padding: 36px 0; }
  .mp-page--local-seo .mp-hero .mp-h1 { font-size: clamp(2rem, 9vw, 2.45rem); }
  .mp-page--local-seo .mp-hero .mp-actions .mp-btn,
  .mp-page--local-seo .mp-cta .mp-actions .mp-btn { flex: 1 1 100%; }
  .mp-page--local-seo .mp-hero .mp-ticks li { white-space: normal; }
  .mp-page--local-seo .mp-hero-art .mp-note--hero { display: none; }
  .mp-page--local-seo .mp-inc { padding: 22px 20px; }
  .mp-page--local-seo .mp-rail-item p { padding-left: 0; }
  .mp-page--local-seo .mp-cta { padding: 24px 20px; }
}

/* ── Custom software — October 2026 target pass ───────────────────────────────
   /custom-software and /web-applications (shared, via :is()); the heading-beside-the-rail
   process layout stays /custom-software only, and the web-applications additions follow
   this block. Same rhythm, buttons and card
   language as /local-seo and /website-maintenance, plus the two drawings only this page
   uses: the application window in the hero (.mp-dash, art type 'dashboard') and the
   inputs → system → outcomes diagram in the intro (.mp-hub, art type 'hub').
   Two sections set their heading beside the content rather than above it (inclusions,
   process) — that, not smaller type, is where most of the saved height came from. */
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) { --mp-gap: 36px; }
@media (min-width: 1600px) { :is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-shell { width: min(1360px, 100%); } }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-btn { border-radius: 9px; min-height: 48px; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-btn--p { background: var(--mp-accent); box-shadow: 0 8px 18px rgba(37, 99, 235, 0.24); }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-btn--p:hover { background: var(--mp-accent-d); }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-lead { color: #47517a; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-h2 { font-size: clamp(1.75rem, 2.75vw, 2.45rem); line-height: 1.1; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-head { margin-bottom: 24px; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-small a { color: var(--mp-accent); font-weight: 600; }

/* Hero: bigger, tighter headline; the application window beside it at full size. */
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) > .mp-hero {
  padding: 30px 0 26px;
  background:
    radial-gradient(ellipse 46% 62% at 76% 44%, rgba(176, 204, 255, .30), transparent 72%),
    radial-gradient(ellipse 30% 40% at 94% 16%, rgba(209, 190, 250, .24), transparent 72%);
}
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); gap: 44px; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-hero .mp-h1 { font-size: clamp(2.4rem, 3.7vw, 3.25rem); line-height: 1.03; letter-spacing: -0.034em; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-hero .mp-lead { margin-top: 18px; max-width: 52ch; font-size: 1rem; line-height: 1.64; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-hero .mp-actions { margin-top: 24px; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-hero .mp-ticks { margin-top: 20px; gap: 10px 18px; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-hero .mp-ticks li { font-size: 0.8rem; gap: 7px; }
/* Room under the window for the "Illustration" label rather than printing it over it. */
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-hero-art { padding-bottom: 22px; }

/* The application window. Sample counts, said so in its own header chip. */
.mp-dash { display: grid; grid-template-columns: 150px minmax(0, 1fr); border-radius: 14px; overflow: hidden;
  background: #fff; border: 1px solid var(--mp-line-2); box-shadow: 0 24px 60px rgba(31, 45, 96, 0.14); }
.mp-dash-side { background: #0f1a3d; padding: 18px 12px; display: flex; flex-direction: column; gap: 3px; }
.mp-dash-side b { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 0.84rem; margin: 0 0 16px 4px; }
.mp-dash-side b::before { content: ''; width: 18px; height: 18px; border-radius: 6px; flex: none;
  background: linear-gradient(135deg, #5b8cff, #2563eb); }
.mp-dash-side span { display: flex; align-items: center; gap: 9px; font-size: 0.74rem; color: #b9c3e6;
  padding: 8px 10px; border-radius: 8px; }
.mp-dash-side span.on { background: var(--mp-accent); color: #fff; font-weight: 600; }
.mp-dash-side svg { width: 14px; height: 14px; flex: none; }
.mp-dash-main { padding: 18px 20px 20px; min-width: 0; }
.mp-dash-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.mp-dash-top h4 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--mp-ink); }
.mp-dash-top em { font-style: normal; font-size: 0.66rem; font-weight: 600; color: var(--mp-muted);
  border: 1px solid var(--mp-line); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.mp-dash-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mp-dash-tile { position: relative; border: 1px solid var(--mp-line-2); border-radius: 10px; padding: 11px 12px 12px; }
.mp-dash-tile span { display: block; font-size: 0.64rem; color: var(--mp-muted); line-height: 1.3; padding-right: 4px; }
.mp-dash-tile b { display: block; margin-top: 8px; font-size: 1.32rem; line-height: 1; color: var(--mp-ink); letter-spacing: -0.02em; }
.mp-dash-tile i { position: absolute; right: 10px; bottom: 10px; width: 26px; height: 26px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; background: var(--mp-soft); color: var(--mp-accent); }
.mp-dash-tile:nth-child(2) i { background: #e6f7ec; color: var(--mp-ok); }
.mp-dash-tile:nth-child(3) i { background: #efeafe; color: #6d4ae6; }
.mp-dash-tile i svg { width: 14px; height: 14px; }
.mp-dash-row { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 10px; margin-top: 12px; }
.mp-dash-card { border: 1px solid var(--mp-line-2); border-radius: 10px; padding: 12px 14px; min-width: 0; }
.mp-dash-card h5 { margin: 0 0 10px; font-size: 0.74rem; font-weight: 700; color: var(--mp-ink); }
.mp-dash-chart { display: block; width: 100%; height: 132px; }
.mp-dash-months { display: flex; justify-content: space-between; margin-top: 6px; font-size: 0.6rem; color: var(--mp-muted); }
.mp-dash-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.mp-dash-card li { display: flex; align-items: center; gap: 9px; min-width: 0; }
.mp-dash-card li > span { min-width: 0; font-size: 0.62rem; color: var(--mp-muted); line-height: 1.35; }
.mp-dash-card li b { display: block; font-size: 0.7rem; color: var(--mp-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-dash-dot { width: 26px; height: 26px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; }
.mp-dash-dot svg { width: 13px; height: 13px; }
.mp-dash-dot--0 { background: #e6f7ec; color: var(--mp-ok); }
.mp-dash-dot--1 { background: var(--mp-soft); color: var(--mp-accent); }
.mp-dash-dot--2 { background: #efeafe; color: #6d4ae6; }
.mp-dash-dot--3 { background: #eef1f7; color: var(--mp-muted); }

/* Capability strip: straight under the hero. */
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) > .mp-hero + .mp-sec--tight { padding-bottom: 4px; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-strip { padding: 24px 6px; border-radius: 14px; border-color: var(--mp-line); }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-strip-item svg { width: 28px; height: 28px; margin-bottom: 10px; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-strip-item strong { font-size: 0.92rem; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-strip-item span { font-size: 0.82rem; color: var(--mp-body); }

/* A system that fits: copy left, the diagram right. */
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--business-automation, .mp-page--api-integrations) .mp-split { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 56px; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--business-automation, .mp-page--api-integrations) .mp-split .mp-lead { max-width: 60ch; font-size: 0.95rem !important; line-height: 1.62; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--business-automation, .mp-page--api-integrations) .mp-split .mp-list { margin-top: 16px; gap: 7px; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--business-automation, .mp-page--api-integrations) .mp-split .mp-list li { font-size: 0.92rem; color: var(--mp-ink-2); }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--business-automation, .mp-page--api-integrations) .mp-split .mp-actions { margin-top: 22px; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--business-automation, .mp-page--api-integrations) .mp-note.mp-note--intro { top: -54px; right: -2px; }

/* The inputs → system → outcomes diagram, on a faint dot grid. */
.mp-hub { padding: 24px 22px; border-radius: 16px; border: 1px solid var(--mp-line-2);
  background-color: rgba(255, 255, 255, 0.7);
  background-image: radial-gradient(circle, #d3dcf5 1px, transparent 1.3px); background-size: 16px 16px; }
.mp-hub-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.mp-hub-wire { display: block; width: 100%; height: auto; margin: 3px 0; overflow: visible; }
.mp-hub-core { display: flex; justify-content: center; }
.mp-hub-node { display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 1px solid var(--mp-line-2);
  border-radius: 12px; padding: 12px 13px; box-shadow: 0 6px 16px rgba(31, 45, 96, 0.06); min-width: 0; }
.mp-hub-node .mp-ico { width: 32px; height: 32px; border-radius: 9px; margin: 0; }
.mp-hub-node .mp-ico svg { width: 16px; height: 16px; }
.mp-hub-node b { display: block; font-size: 0.82rem; line-height: 1.3; color: var(--mp-ink); }
.mp-hub-node div > span { display: block; margin-top: 2px; font-size: 0.7rem; line-height: 1.4; color: var(--mp-muted); }
.mp-hub-node--core { width: min(330px, 64%); align-items: center; padding: 16px 18px; border-color: #bcd0fb;
  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.16); }
.mp-hub-node--core .mp-ico { width: 44px; height: 44px; border-radius: 50%; background: var(--mp-accent); color: #fff; }
.mp-hub-node--core .mp-ico svg { width: 20px; height: 20px; }
.mp-hub-node--core b { font-size: 1.02rem; color: var(--mp-accent-d); }
.mp-hub-node--o0 { background: #f3fbf6; border-color: #d3ecdc; }
.mp-hub-node--o0 .mp-ico { background: #e1f4e8; color: var(--mp-ok); }
.mp-hub-node--o1 { background: #f4f7ff; border-color: #d6e1fb; }
.mp-hub-node--o2 { background: #f7f4ff; border-color: #e1d9fb; }
.mp-hub-node--o2 .mp-ico { background: #ece6fe; color: #6d4ae6; }

/* The signs: the heading across the top, then the pain points in a soft red card and the
   answer in the green one beside it, the same height; the note and its small card at the
   right. display:contents lifts the heading column's children into this grid so the
   heading can span both cards without a change to the shared markup. */
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--business-automation, .mp-page--api-integrations) .mp-problems { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.36fr);
  gap: 0 22px; align-items: stretch; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--business-automation, .mp-page--api-integrations) .mp-problems > div:first-child { display: contents; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--business-automation, .mp-page--api-integrations) .mp-problems > div:first-child > :not(ul) { grid-column: 1 / 3; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--business-automation, .mp-page--api-integrations) .mp-problems > div:first-child > ul { grid-column: 1; grid-row: 4; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--business-automation, .mp-page--api-integrations) .mp-good-card { grid-column: 2; grid-row: 4; margin-top: 22px; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--business-automation, .mp-page--api-integrations) .mp-problems-aside { grid-column: 3; grid-row: 1 / 5; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--business-automation, .mp-page--api-integrations) .mp-problems .mp-lead { margin-top: 10px; max-width: 72ch; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--business-automation, .mp-page--api-integrations) .mp-problems .mp-list--bad { margin-top: 22px; padding: 22px 24px; border-radius: 14px;
  background: linear-gradient(160deg, #fff8f8 0%, #fdf1f2 100%); border: 1px solid #f4d6d9; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--business-automation, .mp-page--api-integrations) .mp-problems .mp-list--bad svg { background: #e5484d; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--business-automation, .mp-page--api-integrations) .mp-problems .mp-list--lg { gap: 12px; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--business-automation, .mp-page--api-integrations) .mp-problems .mp-list--lg li { font-size: 0.9rem; color: var(--mp-ink-2); }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--business-automation, .mp-page--api-integrations) .mp-good-card { padding: 24px 26px; border-radius: 14px;
  background: linear-gradient(160deg, #f3fbf6 0%, #f1f6ff 100%); border-color: #d3e6e0; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--business-automation, .mp-page--api-integrations) .mp-problems-aside { align-content: center; gap: 16px; padding-top: 0; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--business-automation, .mp-page--api-integrations) .mp-problems-aside .mp-card { text-align: center; padding: 22px 16px; border-color: var(--mp-line);
  box-shadow: 0 10px 26px rgba(31, 45, 96, 0.07); }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--business-automation, .mp-page--api-integrations) .mp-problems-aside .mp-ico { width: 52px; height: 52px; border-radius: 14px; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--business-automation, .mp-page--api-integrations) .mp-problems-aside .mp-ico svg { width: 26px; height: 26px; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--business-automation, .mp-page--api-integrations) .mp-problems-aside .mp-card p { font-size: 0.92rem; }

/* The kinds of system: six even cards, icon beside the words. */
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-grid--3 { gap: 16px; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-grid--3 .mp-card,
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-grid--4 .mp-card { padding: 18px 20px; border-color: var(--mp-line); border-radius: 12px;
  box-shadow: 0 6px 18px rgba(31, 45, 96, 0.05); }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-card--row .mp-ico { width: 44px; height: 44px; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-card .mp-h3 { margin-bottom: 6px; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-card p { font-size: 0.86rem; line-height: 1.55; }

/* Inclusions: the heading at the left, the two lists side by side to its right. */
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-shell:has(> .mp-grid > .mp-inc) { display: grid;
  grid-template-columns: minmax(0, 0.66fr) minmax(0, 2fr); gap: 0 40px; align-items: start; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-shell:has(> .mp-grid > .mp-inc) > .mp-head { grid-template-columns: minmax(0, 1fr); margin: 0; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-shell:has(> .mp-grid > .mp-inc) .mp-h2,
.mp-page--custom-software .mp-shell:has(> .mp-rail) .mp-h2 { font-size: clamp(1.6rem, 2.3vw, 2.1rem); }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-shell:has(> .mp-grid > .mp-inc) > :not(.mp-head) { grid-column: 2; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-grid--2:has(> .mp-inc) { gap: 18px; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-inc { padding: 22px 24px; border-radius: 14px; border-color: var(--mp-line);
  box-shadow: 0 8px 24px rgba(31, 45, 96, 0.05); }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-inc--no { background: linear-gradient(160deg, #fff8f8 0%, #fdf2f3 100%); border-color: #f4d6d9; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-inc .mp-h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-inc .mp-list { gap: 7px; margin-top: 14px; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-inc .mp-list li { font-size: 0.87rem; line-height: 1.5; color: var(--mp-ink-2); }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-inc--no .mp-list svg { background: #e5484d; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-grid--2:has(> .mp-inc) + .mp-small { font-size: 0.82rem; }

/* Built to be run: four reassurance cards in one row. */
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-grid--4 { gap: 16px; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-grid--4 .mp-card--row { gap: 14px; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-grid--4 .mp-h3 { font-size: 0.98rem; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-grid--4 .mp-card p { font-size: 0.84rem; }

/* Process: the heading at the left, six numbered steps joined by arrows to its right. */
.mp-page--custom-software .mp-shell:has(> .mp-rail) { display: grid; grid-template-columns: minmax(0, 215px) minmax(0, 1fr);
  gap: 0 36px; align-items: start; }
.mp-page--custom-software .mp-shell:has(> .mp-rail) > .mp-head { grid-template-columns: minmax(0, 1fr); margin: 0; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-rail { gap: 22px; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-rail-head { flex-direction: column; align-items: flex-start; gap: 12px; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-rail-head::after { display: none; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-rail-n { width: 32px; height: 32px; font-size: 0.84rem; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-rail-item h3 { font-size: 0.92rem; line-height: 1.3; color: var(--mp-ink); white-space: normal; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-rail-item p { font-size: 0.82rem; color: #47517a; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-rail-item:not(:last-child)::before { content: ''; position: absolute; top: 15px; left: 42px;
  right: -12px; height: 1.5px; background: #a9bff5; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-rail-item:not(:last-child)::after { content: ''; position: absolute; top: 12px; right: -12px;
  width: 7px; height: 7px; border-top: 1.5px solid #a9bff5; border-right: 1.5px solid #a9bff5; transform: rotate(45deg); }

/* Ongoing support: the wide white card. */
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-support-panel { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.2fr) minmax(0, 0.9fr);
  gap: 34px; padding: 22px 30px 22px 22px; border-radius: 14px; border-color: var(--mp-line); align-items: center; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-support-photo { aspect-ratio: 16 / 11; border-radius: 12px; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-support-panel .mp-list li { font-size: 0.92rem; color: var(--mp-ink-2); }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) > section:has(.mp-support-panel) { padding-bottom: 14px; }

/* FAQ, related services and the closing panel, closer together. */
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-faq-grid { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.55fr); gap: 56px; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-faq { gap: 8px; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-faq details { border-color: var(--mp-line); border-radius: 10px; transition: border-color .15s ease; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-faq details:hover { border-color: #b9cbf7; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-faq summary { padding: 14px 46px 14px 20px; font-size: 0.92rem; color: var(--mp-ink); }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-faq details > div { color: #47517a; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-tags .mp-tag { border: 1px solid #d3dffc; color: var(--mp-accent-d); background: #eef3ff;
  transition: background .15s ease, border-color .15s ease; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-tags .mp-tag:hover { background: #e2eaff; border-color: var(--mp-accent); }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) > section:last-child { padding-bottom: 12px; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-cta { padding: 26px 36px; border-radius: 16px; }
:is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-cta .mp-h2 { font-size: clamp(1.5rem, 2.5vw, 2.05rem); }

@media (max-width: 1240px) {
  .mp-dash { grid-template-columns: 124px minmax(0, 1fr); }
  .mp-dash-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-rail { gap: 18px; }
  :is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-rail-item:not(:last-child)::before,
  :is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-rail-item:not(:last-child)::after { right: -10px; }
}
@media (max-width: 1180px) {
  /* The window's sidebar drops to icons, and the trust cards go two by two. */
  .mp-dash { grid-template-columns: 54px minmax(0, 1fr); }
  .mp-dash-side { padding: 18px 9px; }
  .mp-dash-side b, .mp-dash-side span { font-size: 0; gap: 0; justify-content: center; margin-left: 0; }
  :is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  /* Signs: two columns, the note and its card in a row underneath. */
  :is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--business-automation, .mp-page--api-integrations) .mp-problems { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  :is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--business-automation, .mp-page--api-integrations) .mp-problems > div:first-child > :not(ul) { grid-column: 1 / -1; }
  :is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--business-automation, .mp-page--api-integrations) .mp-problems-aside { grid-column: 1 / -1; grid-row: 5; margin-top: 22px; align-items: center; }
  /* Under the list, beside its card, a down-left arrow would point at nothing. */
  :is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--business-automation, .mp-page--api-integrations) .mp-problems-aside .mp-note--side svg { display: none; }
  /* The diagram needs the full width to stay legible. */
  :is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--business-automation, .mp-page--api-integrations) .mp-split { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  :is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--business-automation, .mp-page--api-integrations) .mp-split .mp-hub { max-width: 720px; }
  :is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--business-automation, .mp-page--api-integrations) .mp-note.mp-note--intro { display: none; }
  :is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-support-photo { aspect-ratio: 21 / 6; }
  :is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-shell:has(> .mp-grid > .mp-inc),
  .mp-page--custom-software .mp-shell:has(> .mp-rail) { display: block; }
  :is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-shell:has(> .mp-grid > .mp-inc) > .mp-head,
  .mp-page--custom-software .mp-shell:has(> .mp-rail) > .mp-head { margin-bottom: 24px; }
  :is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-rail { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 26px; }
  :is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-rail-item:nth-child(3n)::before,
  :is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-rail-item:nth-child(3n)::after { display: none; }
  :is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--business-automation, .mp-page--api-integrations) .mp-problems-aside { grid-template-columns: auto minmax(0, 320px); justify-content: start; }
  :is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-support-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 920px) {
  :is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-hero-art { max-width: 680px; margin-top: 8px; }
  :is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--business-automation, .mp-page--api-integrations) .mp-problems { grid-template-columns: minmax(0, 1fr); }
  :is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--business-automation, .mp-page--api-integrations) .mp-problems > div:first-child > ul { grid-column: 1; grid-row: 4; }
  :is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--business-automation, .mp-page--api-integrations) .mp-good-card { grid-column: 1; grid-row: 5; }
  :is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--business-automation, .mp-page--api-integrations) .mp-problems-aside { grid-row: 6; }
}
@media (max-width: 700px) {
  /* A vertical timeline: the number on the left, a line running down to the next one. */
  :is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-rail { grid-template-columns: minmax(0, 1fr); gap: 0; }
  :is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-rail-item { padding: 0 0 20px 48px; }
  :is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-rail-head { display: block; margin-bottom: 4px; }
  :is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-rail-n { position: absolute; left: 0; top: 0; }
  :is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-rail-item h3 { padding-top: 6px; }
  :is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-rail-item:nth-child(n)::before { display: block; top: 38px; bottom: 4px; left: 15px; right: auto;
    width: 1.5px; height: auto; }
  :is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-rail-item:nth-child(n)::after,
  :is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-rail-item:last-child::before { display: none; }
}
@media (max-width: 640px) {
  :is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-sec { padding: 36px 0; }
  :is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-hero .mp-h1 { font-size: clamp(2rem, 9vw, 2.45rem); }
  :is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-hero .mp-actions .mp-btn,
  :is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-cta .mp-actions .mp-btn { flex: 1 1 100%; }
  :is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-hero .mp-ticks li { white-space: normal; }
  .mp-dash { grid-template-columns: minmax(0, 1fr); }
  .mp-dash-side { display: none; }
  .mp-dash-main { padding: 14px; }
  .mp-dash-row { grid-template-columns: minmax(0, 1fr); }
  .mp-dash-chart { height: 96px; }
  .mp-hub { padding: 16px 12px; }
  .mp-hub-row { gap: 8px; }
  .mp-hub-node { flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 10px 6px; }
  .mp-hub-node b { font-size: 0.72rem; }
  .mp-hub-node div > span { display: none; }
  .mp-hub-node--core { flex-direction: row; text-align: left; width: min(280px, 86%); padding: 12px 14px; }
  .mp-hub-node--core b { font-size: 0.92rem; }
  .mp-hub-node--core div > span { display: block; }
  :is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--business-automation, .mp-page--api-integrations) .mp-problems-aside { grid-template-columns: minmax(0, 1fr); }
  :is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-inc { padding: 20px; }
  :is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-grid--4 { grid-template-columns: minmax(0, 1fr); }
  :is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-card--row > div { min-width: 0; }
  :is(.mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-cta { padding: 24px 20px; }
}

/* ── Web applications — October 2026 target pass ──────────────────────────────
   /web-applications only. Everything shared with /custom-software is in the block above;
   these are the parts only this page draws: the margin note over the hero window, the
   six kinds of application beside the intro ('kinds'), the security cards condensed
   into a band with the heading beside them, the process as five steps under its heading,
   and the ticked lines beside the closing buttons. */

/* Hero: room above the window for the note, which sits over its top-right corner. */
:is(.mp-page--web-applications, .mp-page--client-portals) .mp-hero-art { padding-top: 34px; }
:is(.mp-page--web-applications, .mp-page--client-portals) .mp-hero-art .mp-note--hero { top: -18px; right: 2%; z-index: 2; transform: rotate(-5deg); }
:is(.mp-page--web-applications, .mp-page--client-portals) .mp-hero-art .mp-note--hero svg { margin-left: auto; transform: scaleX(-1); }
/* A 'side' note keeps its arrow on the left, curling down-left at the picture: not mirrored. */
:is(.mp-page--web-applications, .mp-page--client-portals) .mp-hero-art .mp-note--hero.mp-note--side svg { margin-left: 0; transform: none; }

/* What we build: copy left, the six kinds of application right. */
.mp-kinds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.mp-kinds .mp-card { display: flex; flex-direction: column; gap: 4px; padding: 18px 18px 20px; border-color: var(--mp-line);
  border-radius: 12px; box-shadow: 0 6px 18px rgba(31, 45, 96, 0.05); }
.mp-kinds .mp-ico { width: 40px; height: 40px; border-radius: 10px; margin: 0 0 10px; }
.mp-kinds .mp-ico svg { width: 20px; height: 20px; }
.mp-kinds b { font-size: 0.94rem; line-height: 1.3; color: var(--mp-ink); }
.mp-kinds span:not(.mp-ico) { font-size: 0.8rem; line-height: 1.5; color: var(--mp-body); }
.mp-page--web-applications .mp-split { align-items: center; }
.mp-page--web-applications .mp-note.mp-note--intro { top: -64px; right: 0; }

/* Use cases: six even cards, icon beside the words, not too tall. */
.mp-page--web-applications .mp-sec--b-cards .mp-card { padding: 18px 20px; }
.mp-page--web-applications .mp-sec--b-cards .mp-card--row .mp-ico { width: 42px; height: 42px; }

/* Security and reliability: the heading beside six compact cards — technical reassurance,
   set smaller than the business sections around it. */
:is(.mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-sec--b-commit .mp-shell { display: grid; grid-template-columns: minmax(0, 0.66fr) minmax(0, 2fr);
  gap: 0 40px; align-items: start; }
:is(.mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-sec--b-commit .mp-head { grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; }
:is(.mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-sec--b-commit .mp-h2 { font-size: clamp(1.6rem, 2.3vw, 2.1rem); }
:is(.mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-sec--b-commit .mp-grid--3 { gap: 12px; }
:is(.mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-sec--b-commit .mp-card { padding: 14px 16px; gap: 12px; box-shadow: none; background: #fff; }
:is(.mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-sec--b-commit .mp-card--row .mp-ico { width: 36px; height: 36px; border-radius: 10px; }
:is(.mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-sec--b-commit .mp-ico svg { width: 18px; height: 18px; }
:is(.mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-sec--b-commit .mp-h3 { font-size: 0.9rem; margin-bottom: 3px; }
:is(.mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-sec--b-commit .mp-card p { font-size: 0.8rem; line-height: 1.5; }

/* Process: the heading above, five steps across, joined by the arrows from the block above. */
:is(.mp-page--web-applications, .mp-page--client-portals, .mp-page--api-integrations) .mp-shell:has(> .mp-rail) > .mp-head { margin-bottom: 30px; }
:is(.mp-page--web-applications, .mp-page--client-portals, .mp-page--api-integrations) .mp-rail { gap: 30px; }
:is(.mp-page--web-applications, .mp-page--client-portals, .mp-page--api-integrations) .mp-rail-item:not(:last-child)::before { right: -18px; }
:is(.mp-page--web-applications, .mp-page--client-portals, .mp-page--api-integrations) .mp-rail-item:not(:last-child)::after { right: -18px; }

/* Closing panel: mark, line, buttons, then the ticked lines in their own column. */
:is(.mp-page--web-applications, .mp-page--client-portals, .mp-page--api-integrations) .mp-cta { grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 22px 36px; }
:is(.mp-page--web-applications, .mp-page--client-portals, .mp-page--api-integrations) .mp-cta .mp-cta-ticks { gap: 7px; }
:is(.mp-page--web-applications, .mp-page--client-portals, .mp-page--api-integrations) .mp-cta .mp-cta-ticks li { font-size: 0.84rem; white-space: nowrap; }

@media (max-width: 1240px) {
  :is(.mp-page--web-applications, .mp-page--client-portals, .mp-page--api-integrations) .mp-cta { grid-template-columns: auto minmax(0, 1fr) auto; }
  :is(.mp-page--web-applications, .mp-page--client-portals, .mp-page--api-integrations) .mp-cta .mp-cta-ticks { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 8px 22px; }
}
@media (max-width: 1080px) {
  .mp-page--web-applications .mp-split .mp-kinds { max-width: 760px; }
  :is(.mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-sec--b-commit .mp-shell { display: block; }
  :is(.mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-sec--b-commit .mp-head { margin-bottom: 22px; }
  :is(.mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-sec--b-commit .mp-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 920px) {
  :is(.mp-page--web-applications, .mp-page--client-portals) .mp-hero-art .mp-note--hero { display: none; }
  :is(.mp-page--web-applications, .mp-page--client-portals) .mp-hero-art { padding-top: 0; }
  .mp-page--web-applications .mp-sec--b-cards .mp-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  :is(.mp-page--web-applications, .mp-page--client-portals, .mp-page--api-integrations) .mp-cta { grid-template-columns: minmax(0, 1fr); }
  :is(.mp-page--web-applications, .mp-page--client-portals, .mp-page--api-integrations) .mp-cta .mp-cta-ticks { grid-column: auto; }
  :is(.mp-page--web-applications, .mp-page--client-portals, .mp-page--api-integrations) .mp-cta > div[style] { justify-items: start !important; }
}
@media (max-width: 640px) {
  .mp-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mp-kinds .mp-card { padding: 14px; }
  .mp-page--web-applications .mp-sec--b-cards .mp-grid--3,
  :is(.mp-page--web-applications, .mp-page--client-portals, .mp-page--business-automation, .mp-page--api-integrations) .mp-sec--b-commit .mp-grid--3 { grid-template-columns: minmax(0, 1fr); }
  :is(.mp-page--web-applications, .mp-page--client-portals, .mp-page--api-integrations) .mp-cta .mp-cta-ticks li { white-space: normal; }
}

/* ── Client portals — October 2026 target pass ────────────────────────────────
   /client-portals only. Shares the custom-software / web-applications pass above (rhythm,
   buttons, strip, inclusions, condensed security block, five-step process, closing ticks),
   minus that pass's problems restack: this page keeps the three-column row — problems
   and their button at the left, the green card in the middle, note and card at the right.
   What only this page draws: the example portal in the hero (art type 'portal'), with the
   same portal on a phone in front of its corner, and the use-case row of four. */

/* The example portal: the application window, a request feed with status pills in place
   of the chart, and the phone overlapping its lower-right corner. */
.mp-portal-scene { position: relative; padding: 0 96px 34px 0; }
.mp-dash--portal { grid-template-columns: 158px minmax(0, 1fr); }
.mp-dash--portal .mp-dash-side { gap: 2px; }
.mp-dash--portal .mp-dash-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mp-dash--portal .mp-dash-tile b { font-size: 1.5rem; }
.mp-dash--portal .mp-dash-card { margin-top: 12px; padding: 14px 16px 6px; }
.mp-portal-feed { gap: 0 !important; }
.mp-portal-feed li { padding: 10px 0; border-top: 1px solid var(--mp-line-2); }
.mp-portal-feed li:first-child { border-top: 0; padding-top: 2px; }
.mp-portal-feed li > span { flex: 1 1 auto; }
.mp-portal-feed .mp-pill { flex: none; font-style: normal; font-size: 0.62rem; padding: 3px 9px; }
.mp-portal-phone { right: 0; bottom: 0; width: 134px; z-index: 2; }
.mp-portal-phone .mp-phone-screen { min-height: 0; padding-bottom: 10px; }
.mp-portal-phone-top { display: flex; align-items: center; justify-content: space-between; padding: 4px 11px 8px;
  border-bottom: 1px solid var(--mp-line-2); }
.mp-portal-phone-top b { font-size: 0.7rem; color: var(--mp-ink); white-space: nowrap; }
.mp-portal-phone-top i { width: 16px; height: 16px; border-radius: 50%; background: var(--mp-soft); border: 1px solid #cfdcfb; }
.mp-portal-phone ul { list-style: none; margin: 0; padding: 8px 8px 0; display: grid; gap: 6px; }
.mp-portal-phone li { display: flex; align-items: center; gap: 8px; padding: 8px 9px; border: 1px solid var(--mp-line-2);
  border-radius: 9px; font-size: 0.64rem; font-weight: 600; color: var(--mp-ink-2); }
.mp-portal-phone li svg { width: 13px; height: 13px; flex: none; color: var(--mp-accent); }
.mp-page--client-portals .mp-hero-art .mp-note--hero { top: -12px; right: -14px; }
.mp-page--client-portals .mp-hero .mp-mock-label { left: 2px; }

/* Why a client portal: problems at the left, the answer beside them, note and card right. */
.mp-page--client-portals .mp-problems { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr) minmax(0, 0.42fr); gap: 36px; align-items: center; }
.mp-page--client-portals .mp-problems .mp-lead { margin-top: 12px; max-width: 58ch; font-size: 0.95rem !important; line-height: 1.62; }
.mp-page--client-portals .mp-problems .mp-list--bad { margin-top: 18px; }
.mp-page--client-portals .mp-problems .mp-list--bad svg { background: #e5484d; }
.mp-page--client-portals .mp-problems .mp-list--lg { gap: 10px; }
.mp-page--client-portals .mp-problems .mp-list--lg li { font-size: 0.9rem; color: var(--mp-ink-2); }
.mp-page--client-portals .mp-problems .mp-actions { margin-top: 24px; }
.mp-page--client-portals .mp-good-card { padding: 26px 28px; border-radius: 14px; background: #fff; border-color: var(--mp-line);
  box-shadow: 0 14px 34px rgba(31, 45, 96, 0.08); }
.mp-page--client-portals .mp-good-card .mp-h3 { margin-bottom: 16px; }
.mp-page--client-portals .mp-problems-aside { gap: 18px; padding-top: 0; }
.mp-page--client-portals .mp-problems-aside .mp-note { font-size: 1.2rem; }
.mp-page--client-portals .mp-problems-aside .mp-card { padding: 22px 18px; border-color: var(--mp-line); box-shadow: 0 10px 26px rgba(31, 45, 96, 0.07); }
.mp-page--client-portals .mp-problems-aside .mp-ico { width: 46px; height: 46px; border-radius: 12px; }
.mp-page--client-portals .mp-problems-aside .mp-card p { font-size: 0.9rem; margin: 12px 0 0; }

/* Key features and use cases: even cards, icon beside the words. */
.mp-page--client-portals .mp-sec--b-cards .mp-card { height: 100%; }
.mp-page--client-portals .mp-sec--b-cards .mp-card--row .mp-ico { width: 42px; height: 42px; }
.mp-page--client-portals .mp-sec--b-cards .mp-small { max-width: 92ch; }

@media (max-width: 1240px) {
  .mp-page--client-portals .mp-problems { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mp-page--client-portals .mp-problems-aside { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 360px);
    grid-auto-flow: row; justify-content: start; align-items: center; gap: 28px; }
  /* The note now sits under the list, beside its card: a down-left arrow would point at nothing. */
  .mp-page--client-portals .mp-problems-aside .mp-note--side svg { display: none; }
}
@media (max-width: 1180px) {
  /* The window keeps three tiles where the shared rule drops to two; its sidebar goes to icons. */
  .mp-dash--portal { grid-template-columns: 54px minmax(0, 1fr); }
  .mp-dash--portal .mp-dash-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mp-portal-phone { width: 112px; }
  .mp-portal-phone li { padding: 7px; gap: 6px; }
  .mp-page--client-portals .mp-hero-art .mp-note--hero { display: none; }
  .mp-page--client-portals .mp-hero-art { padding-top: 0; }
}
@media (max-width: 920px) {
  .mp-page--client-portals .mp-problems { grid-template-columns: minmax(0, 1fr); }
  .mp-page--client-portals .mp-sec--b-cards .mp-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .mp-portal-scene { padding: 0 0 24px; }
  .mp-dash--portal { grid-template-columns: minmax(0, 1fr); }
  .mp-dash--portal .mp-dash-tile b { font-size: 1.2rem; }
  .mp-dash--portal .mp-dash-tile i { display: none; }
  .mp-portal-feed li > span b { white-space: normal; }
  .mp-portal-phone { display: none; }
  .mp-page--client-portals .mp-problems-aside { grid-template-columns: minmax(0, 1fr); }
  .mp-page--client-portals .mp-sec--b-cards .mp-grid--3,
  .mp-page--client-portals .mp-sec--b-commit .mp-grid--3 { grid-template-columns: minmax(0, 1fr); }
}

/* ── About — October 2026 target pass ─────────────────────────────────────────
   /about only (main.mp-page--about). Same story and copy as before; the target makes it
   more visual and less boxy: a bigger hero collage, the two brands joined by a "+",
   photo / story / quote for the founder beside a secondary sustainability card, a real
   team strip, five values in a row, and the location band as open layout with a map.
   Cards are kept for the story steps, the brand pair, the values and sustainability;
   the hero, company explanation, founder story and location are open typography. */
.mp-page--about { --mp-gap: 64px; }
@media (min-width: 1600px) { .mp-page--about .mp-shell { width: min(1360px, 100%); } }
.mp-page--about .mp-btn { border-radius: 9px; min-height: 48px; }
.mp-page--about .mp-btn--p { background: var(--mp-accent); box-shadow: 0 8px 18px rgba(37, 99, 235, 0.24); }
.mp-page--about .mp-btn--p:hover { background: var(--mp-accent-d); }
.mp-page--about .mp-lead { color: #47517a; }
.mp-page--about .mp-h2 { font-size: clamp(1.75rem, 2.7vw, 2.45rem); line-height: 1.1; }
.mp-page--about .mp-head { margin-bottom: 26px; }
/* One continuous soft wash behind the page rather than banded sections. */
.mp-page--about {
  background:
    radial-gradient(ellipse 50% 900px at 82% 260px, rgba(190, 211, 255, .26), transparent 72%),
    radial-gradient(ellipse 40% 700px at 6% 1500px, rgba(209, 190, 250, .18), transparent 72%),
    radial-gradient(ellipse 45% 800px at 94% 2700px, rgba(190, 211, 255, .20), transparent 72%);
}
.mp-page--about > .mp-hero { background: none; padding: 34px 0 28px; }

/* Hero: a larger, tighter headline; the collage given the bigger half. */
.mp-page--about .mp-hero-grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 48px; }
.mp-page--about .mp-hero .mp-h1 { font-size: clamp(2.45rem, 3.9vw, 3.5rem); line-height: 1.03; letter-spacing: -0.034em; }
.mp-page--about .mp-hero .mp-lead { margin-top: 20px; max-width: 54ch; font-size: 1.02rem; line-height: 1.66; color: var(--mp-ink-2); }
.mp-page--about .mp-hero .mp-actions { margin-top: 26px; }
.mp-page--about .mp-hero .mp-ticks { margin-top: 24px; gap: 10px 22px; }

.ab-hero-art { padding: 46px 0 34px; }
.ab-collage { padding-top: 76%; }
.ab-pic { border-radius: 18px; border-width: 5px; }
.ab-pic .mp-shot { border-radius: 13px; }
.ab-pic--coast { left: 0;   top: 15%; width: 64%; height: 62%; z-index: 2; }
.ab-pic--city  { right: 0;  top: 52%; width: 42%; height: 46%; z-index: 3; }
.ab-float { gap: 12px; padding: 14px 16px; border-radius: 14px; font-size: 0.76rem; line-height: 1.45; align-items: flex-start; }
.ab-float b { font-size: 0.86rem; line-height: 1.3; margin-bottom: 3px; color: var(--mp-ink); }
.ab-float-ico { width: 36px; height: 36px; border-radius: 11px; background: var(--mp-soft); color: var(--mp-accent);
  display: flex; align-items: center; justify-content: center; flex: none; }
.ab-float-ico svg { width: 18px; height: 18px; }
.ab-float--team  { right: 0;   top: 2%;  width: 34%; z-index: 5; }
.ab-float--web   { left: 58%;  top: 29%; width: 30%; z-index: 5; }
.ab-float--route { left: -4%;  top: 66%; width: 40%; z-index: 6; }
.ab-note-pt   { left: 2%; top: -16px; transform: rotate(-6deg); white-space: normal; width: 210px; }
.ab-note-pt svg { margin-left: 36px; }
.ab-note-same { right: -6px; bottom: -34px; transform: rotate(-4deg); }
.ab-note-same svg { margin: 0 0 2px auto; }

/* Our story: bigger cards, number and title on one line, equal heights. */
.ab-story .mp-card { padding: 24px 24px 26px; border-radius: 16px; box-shadow: 0 10px 28px rgba(31, 45, 96, 0.06); }
.ab-story .mp-ico { width: 46px; height: 46px; border-radius: 13px; margin-bottom: 16px; }
.ab-story .mp-ico svg { width: 22px; height: 22px; }
.ab-story .mp-h3 { font-size: 1.06rem; margin-bottom: 10px; }
.ab-story .mp-card-num { font-size: 1.06rem; }
.ab-story .mp-card p { font-size: 0.9rem; color: #47517a; }

/* CaminhoIT / Caminho.DEV: one soft panel, explanation left, joined brand cards right. */
.ab-group { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 48px; align-items: center;
  padding: 40px 44px; border-radius: 22px; border: 1px solid #e3e7fa;
  background: linear-gradient(120deg, rgba(240, 244, 255, .9) 0%, rgba(245, 243, 255, .9) 100%); }
.ab-group-copy p { margin: 14px 0 0; max-width: 60ch; font-size: 0.95rem; color: #47517a; }
.ab-group-copy .mp-h2 { margin-bottom: 4px; }
.ab-group-copy p.ab-group-link { margin-top: 18px; }
.ab-group-copy .mp-fineprint { margin-top: 22px; font-size: 0.74rem; }
.ab-brands { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px; align-items: stretch; }
.ab-brands .mp-brand-card { padding: 26px 24px; border-radius: 18px; box-shadow: 0 14px 34px rgba(31, 45, 96, 0.08); }
.ab-brands .mp-brand-card--hi { border-color: rgba(120, 132, 240, 0.45); }
.ab-brands .mp-brand-sub { padding-bottom: 16px; border-bottom: 1px solid var(--mp-line-2); margin-bottom: 4px; }
.ab-brands .mp-list li { font-size: 0.88rem; color: var(--mp-ink-2); }
.ab-brands-plus { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: 38px; height: 38px; border-radius: 50%; background: var(--mp-accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 600; line-height: 1;
  box-shadow: 0 0 0 6px #f1f3fe, 0 8px 18px rgba(37, 99, 235, 0.3); }
.ab-note-brands { right: -14px; top: -44px; transform: rotate(-5deg); }
.ab-note-brands svg { margin-left: auto; }

/* Founder: photo / story / quote, with sustainability as a secondary card beside it. */
.ab-band { display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.ab-founder-wrap .mp-h2 { margin-bottom: 24px; }
.ab-founder { display: grid; grid-template-columns: minmax(170px, 0.82fr) minmax(0, 1.05fr) minmax(0, 0.9fr); gap: 28px; align-items: start; }
.ab-founder-photo { aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; box-shadow: 0 18px 40px rgba(47, 57, 103, 0.14); }
.ab-founder-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-founder-photo--initial { display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, #dfe6ff 0%, #ebe3ff 100%); color: var(--mp-accent);
  font-size: 4.2rem; font-weight: 700; letter-spacing: -0.04em; }
.ab-founder-story p { margin: 0 0 13px; font-size: 0.93rem; line-height: 1.68; color: var(--mp-ink-2); }
.ab-founder-story p:first-child { font-weight: 600; color: var(--mp-ink); }
.ab-quote { position: relative; align-self: center; padding: 34px 26px 26px; border-radius: 18px; border-color: #dde5fb;
  background: linear-gradient(160deg, #f3f6ff 0%, #f1efff 100%); }
.ab-quote-mark { position: absolute; left: 24px; top: 8px; font-size: 3rem; line-height: 1; font-weight: 700; color: var(--mp-accent); }
.ab-quote blockquote { margin: 12px 0 0; font-size: 1.08rem; line-height: 1.55; font-style: italic; color: var(--mp-ink); }
.ab-quote figcaption { margin-top: 18px; font-size: 0.8rem; color: var(--mp-muted); }
.ab-quote figcaption strong { display: block; color: var(--mp-ink); font-size: 0.92rem; }
.ab-founder-meta { margin-top: 20px; gap: 10px 28px; }

.ab-sustain { margin-top: 22px; padding: 26px; border-radius: 18px; box-shadow: 0 14px 34px rgba(31, 45, 96, 0.06); }
.ab-sustain .mp-ico { margin-bottom: 14px; }
.ab-sustain .mp-h2 { font-size: clamp(1.35rem, 2vw, 1.7rem); }
.ab-sustain > p { margin: 12px 0 0; font-size: 0.89rem; color: #47517a; }
.ab-note-sustain { right: 4px; top: -58px; transform: rotate(-5deg); }
.ab-note-sustain svg { width: 40px; height: 28px; margin-left: auto; }

/* Team: a proper strip — faces, words, button. */
.ab-team { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px 28px; align-items: center;
  padding: 22px 28px; border-radius: 18px; background: #fff; border: 1px solid var(--mp-line); box-shadow: var(--mp-shadow); }
.ab-team-faces { display: flex; padding-left: 12px; }
.ab-team-faces img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; margin-left: -12px;
  border: 3px solid #fff; box-shadow: 0 4px 12px rgba(31, 45, 96, 0.14); }
.ab-team-faces .mp-ico { margin: 0 0 0 -12px; }
.ab-team-copy .mp-h3 { margin: 0 0 4px; font-size: 1.08rem; }
.ab-team-copy p { margin: 0; max-width: 64ch; font-size: 0.9rem; color: #47517a; }
.ab-team .mp-actions { margin: 0; }
.ab-team-name { margin-top: 14px; }
.ab-team-role { color: var(--mp-accent); font-weight: 600; font-size: 0.84rem; margin: 0 0 8px; }

/* Values: wider, more readable cards in one row. */
.ab-values .mp-card--row { padding: 22px 20px; gap: 14px; border-radius: 16px; box-shadow: 0 10px 26px rgba(31, 45, 96, 0.05); }
.ab-values .mp-card--row .mp-ico { width: 40px; height: 40px; border-radius: 11px; }
.ab-values .mp-card--row .mp-ico svg { width: 20px; height: 20px; }
.ab-values .mp-card .mp-h3 { font-size: 0.95rem; line-height: 1.3; margin-bottom: 8px; }
.ab-values .mp-card p { font-size: 0.85rem; line-height: 1.58; color: #47517a; }

/* Where we work: copy on the left; the interactive Europe map (assets/css/europe-map.css)
   on the right with the place cards floating over its right edge. */
.ab-where { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr); gap: 28px; align-items: center; }
.ab-where .mp-lead { font-size: 0.97rem; max-width: 54ch; }
.ab-map-wrap { position: relative; min-height: 420px; }
.ab-map { width: 86%; margin-left: -4%; }
.ab-places { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px;
  position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: min(270px, 42%); z-index: 2; }
.ab-places li { display: flex; gap: 14px; align-items: flex-start; padding: 18px 18px 18px 20px; border-radius: 16px;
  background: #fff; box-shadow: 0 18px 40px -22px rgba(31, 45, 96, 0.35), 0 0 0 1px rgba(31, 45, 96, 0.05);
  cursor: default; outline: none; transition: transform .2s ease, box-shadow .2s ease; }
.ab-places li:hover, .ab-places li:focus-visible { transform: translateX(-4px);
  box-shadow: 0 22px 44px -20px rgba(45, 85, 230, 0.4), 0 0 0 2px rgba(61, 99, 239, 0.25); }
.ab-place-ico { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: #e8eeff; color: var(--mp-accent); box-shadow: 0 0 0 3px #fff, 0 4px 10px rgba(31, 45, 96, 0.16); }
.ab-places svg { width: 17px; height: 17px; color: var(--mp-accent); flex: none; }
.ab-flag { width: 30px; height: 30px; flex: none; border-radius: 50%; background-size: cover;
  box-shadow: 0 0 0 3px #fff, 0 4px 10px rgba(31, 45, 96, 0.16); }
.ab-places strong { display: block; color: var(--mp-ink); font-size: 1rem; margin-bottom: 2px; }
.ab-places span:not(.fi) { font-size: 0.86rem; line-height: 1.55; color: var(--mp-muted); }

/* Closing band. */
.mp-page--about .mp-cta--band .mp-h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.mp-page--about .mp-cta--band p { max-width: 58ch; }
.mp-page--about .mp-cta-band-grid { grid-template-columns: minmax(0, 1.3fr) auto auto; gap: 26px 56px; }

@media (max-width: 1180px) {
  .ab-founder { grid-template-columns: minmax(150px, 0.7fr) minmax(0, 1.2fr); }
  .ab-quote { grid-column: 1 / -1; }
  .ab-float { gap: 9px; padding: 10px 12px; font-size: 0.7rem; }
  .ab-float b { font-size: 0.78rem; }
  .ab-float-ico { width: 28px; height: 28px; border-radius: 9px; }
  .ab-float-ico svg { width: 15px; height: 15px; }
  .ab-float--team  { width: 40%; }
  .ab-float--web   { left: 52%; width: 38%; }
  .ab-float--route { width: 46%; }
  .ab-group { padding: 34px; gap: 36px; }
}
@media (max-width: 1080px) {
  .ab-band { grid-template-columns: minmax(0, 1fr); }
  .ab-sustain { margin-top: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); column-gap: 28px; }
  .ab-sustain > * { grid-column: 1; }
  .ab-sustain .mp-sustain-pic { grid-column: 2; grid-row: 1 / span 5; margin: 0; align-self: center; }
  .ab-note-sustain { display: none; }
  .ab-group { grid-template-columns: minmax(0, 1fr); }
  .ab-where { grid-template-columns: minmax(0, 1fr); }
  .ab-map-wrap { max-width: 860px; }
  .mp-page--about .mp-cta-band-grid { grid-template-columns: minmax(0, 1fr) auto; }
  .mp-page--about .mp-cta-band-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 920px) {
  .mp-page--about .mp-hero-art { max-width: 640px; }
  .ab-hero-art { padding: 8px 0 0; }
  .ab-float--route { left: 0; }
  .mp-page--about .mp-cta-band-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .ab-founder { grid-template-columns: minmax(0, 1fr); }
  .ab-founder-photo { max-width: 280px; }
  .ab-sustain { display: block; }
  .ab-sustain .mp-sustain-pic { margin-top: 18px; }
  .ab-team { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .ab-where { grid-template-columns: minmax(0, 1fr); }
  .ab-map-wrap { min-height: 0; }
  .ab-map { width: 100%; margin-left: 0; padding-left: 16px; box-sizing: border-box; }
  .ab-places { position: static; transform: none; width: auto; margin-top: -8px; }
  .ab-places li:hover, .ab-places li:focus-visible { transform: none; }
}
@media (max-width: 640px) {
  .mp-page--about .mp-sec { padding: 44px 0; }
  .mp-page--about .mp-sec--flush-top { padding-top: 0; }
  .mp-page--about > .mp-hero { padding: 26px 0 30px; }
  .mp-page--about .mp-hero .mp-h1 { font-size: clamp(2.05rem, 9.2vw, 2.5rem); }
  .mp-page--about .mp-hero .mp-actions .mp-btn,
  .mp-page--about .mp-cta .mp-actions .mp-btn,
  .ab-team .mp-actions, .ab-team .mp-btn { flex: 1 1 100%; width: 100%; }
  .mp-page--about .mp-hero .mp-ticks li { white-space: normal; }
  .ab-collage { padding-top: 92%; }
  .ab-pic--coast { top: 14%; width: 76%; height: 58%; }
  .ab-pic--city  { top: 56%; width: 50%; height: 42%; }
  .ab-group { padding: 24px 20px; border-radius: 18px; }
  .ab-brands { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}

/* ── Website redesign — October 2026 target pass ──────────────────────────────
   /website-redesign only (main.mp-page--website-redesign). Same rhythm, buttons and card
   language as /website-design and /website-maintenance. What is particular to this page:
   the hero photograph is set frameless and larger, with the ticked card over it ('checks'
   in the copy file); the before/after wipe is the widest thing on the page and its new
   site carries its picture full-bleed; the five process steps are a row of numbered
   cards joined by arrows (.mp-grid--5), and the benefits row under them is bare icons
   and words, no boxes (.mp-grid--4) — lighter than the showcase above it. */
.mp-page--website-redesign { --mp-gap: 42px; }
@media (min-width: 1600px) { .mp-page--website-redesign .mp-shell { width: min(1360px, 100%); } }
.mp-page--website-redesign .mp-btn { border-radius: 9px; min-height: 48px; }
.mp-page--website-redesign .mp-btn--p { background: var(--mp-accent); box-shadow: 0 8px 18px rgba(37, 99, 235, 0.24); }
.mp-page--website-redesign .mp-btn--p:hover { background: var(--mp-accent-d); }
.mp-page--website-redesign .mp-lead { color: #47517a; }
.mp-page--website-redesign .mp-h2 { font-size: clamp(1.75rem, 2.75vw, 2.45rem); line-height: 1.1; }
.mp-page--website-redesign .mp-head { margin-bottom: 26px; }

/* Hero: a bigger headline, and the photograph larger and without a frame, so the laptop
   and phone stand on the page's wash rather than inside a box. */
.mp-page--website-redesign > .mp-hero {
  padding: 30px 0 18px;
  background:
    radial-gradient(ellipse 46% 62% at 76% 44%, rgba(176, 204, 255, .30), transparent 72%),
    radial-gradient(ellipse 30% 40% at 94% 16%, rgba(209, 190, 250, .24), transparent 72%);
}
.mp-page--website-redesign .mp-hero-grid { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 28px; }
.mp-page--website-redesign .mp-hero .mp-h1 { font-size: clamp(2.4rem, 3.75vw, 3.4rem); line-height: 1.04; letter-spacing: -0.034em; }
.mp-page--website-redesign .mp-hero .mp-lead { margin-top: 18px; max-width: 52ch; font-size: 1.02rem; line-height: 1.64; }
.mp-page--website-redesign .mp-hero .mp-actions { margin-top: 24px; }
.mp-page--website-redesign .mp-hero .mp-ticks { margin-top: 20px; gap: 10px 16px; }
.mp-page--website-redesign .mp-hero .mp-ticks li { font-size: 0.8rem; gap: 6px; }
.mp-page--website-redesign .mp-hero-art { margin-right: -24px; }
.mp-page--website-redesign .mp-hero-art .mp-workspace--photo {
  border-radius: 0; box-shadow: none; background: none;
  /* Two fades, intersected: the photograph's own pale backdrop dissolves into the wash at
     every edge instead of ending in a hard-edged rectangle. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%),
                      linear-gradient(180deg, transparent 0, #000 8%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%),
                      linear-gradient(180deg, transparent 0, #000 8%, #000 90%, transparent 100%);
          mask-composite: intersect;
}
.mp-page--website-redesign .mp-hero-art .mp-mock-label { left: auto; right: 24px; bottom: 2px !important; }
/* The ticked card over the picture, below the "Before" thumbnail at the left. */
.mp-hero-checks { position: absolute; left: 3%; bottom: 9%; z-index: 5; margin: 0; padding: 14px 18px 14px 14px;
  list-style: none; display: grid; gap: 8px; background: #fff; border: 1px solid var(--mp-line);
  border-radius: 12px; box-shadow: 0 16px 36px rgba(31, 45, 96, 0.14); }
.mp-hero-checks li { display: flex; align-items: center; gap: 8px; font-size: 0.76rem; font-weight: 500;
  color: var(--mp-ink-2); line-height: 1.3; white-space: nowrap; }
.mp-hero-checks svg { width: 16px; height: 16px; flex: none; padding: 3px; border-radius: 50%; color: #fff; background: var(--mp-ok); }

/* Capability strip: straight under the hero, a little taller. */
.mp-page--website-redesign > .mp-hero + .mp-sec--tight { padding-bottom: 6px; }
.mp-page--website-redesign .mp-strip { padding: 26px 6px; border-radius: 14px; border-color: var(--mp-line); }
.mp-page--website-redesign .mp-strip-item svg { width: 28px; height: 28px; margin-bottom: 10px; }
.mp-page--website-redesign .mp-strip-item strong { font-size: 0.92rem; }
.mp-page--website-redesign .mp-strip-item span { font-size: 0.82rem; color: var(--mp-body); }

/* Problem / solution: the red list, the white solution card, then the note and its card. */
.mp-page--website-redesign .mp-problems { grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr) minmax(0, 0.42fr); gap: 40px; }
.mp-page--website-redesign .mp-problems .mp-lead { max-width: 48ch; }
.mp-page--website-redesign .mp-problems .mp-list--lg { gap: 11px; margin-top: 20px; }
.mp-page--website-redesign .mp-problems .mp-list--lg li { font-size: 0.93rem; color: var(--mp-ink-2); }
.mp-page--website-redesign .mp-problems .mp-list--lg svg { width: 21px; height: 21px; padding: 4px; }
.mp-page--website-redesign .mp-good-card { margin-top: 26px; padding: 26px 30px 28px; background: #fff;
  border-color: var(--mp-line); border-radius: 14px; box-shadow: 0 12px 32px rgba(31, 45, 96, 0.07); }
.mp-page--website-redesign .mp-good-card .mp-h3 { margin-bottom: 4px; }
.mp-page--website-redesign .mp-problems-aside { padding-top: 20px; gap: 22px; }
.mp-page--website-redesign .mp-problems-aside .mp-card { padding: 18px 18px 20px; border-color: var(--mp-line); border-radius: 12px;
  box-shadow: 0 10px 26px rgba(31, 45, 96, 0.07); }
.mp-page--website-redesign .mp-problems-aside .mp-card p { font-size: 0.9rem; color: var(--mp-ink); }

/* Before / after: wider and shorter, the main picture on the page. The new site sets its
   photograph full-bleed under the headline; the old one keeps its pale split layout. */
.mp-page--website-redesign .mp-ba2-frame { aspect-ratio: 19 / 6; min-height: 320px; border-radius: 14px;
  border-color: var(--mp-line); box-shadow: 0 22px 54px rgba(31, 45, 96, 0.13); }
/* isolation keeps the headline's z-index inside its own layer, under the old site. */
.mp-page--website-redesign .mp-ba2-layer:not(.mp-ba2-layer--before) { isolation: isolate; }
.mp-page--website-redesign .mp-ba2-layer:not(.mp-ba2-layer--before) .mp-site-hero { position: relative; display: block; }
.mp-page--website-redesign .mp-ba2-layer:not(.mp-ba2-layer--before) .mp-site-pic { position: absolute; inset: 0; min-height: 0;
  background: linear-gradient(90deg, rgba(12, 22, 54, 0) 0%, rgba(12, 22, 54, 0) 46%, rgba(12, 22, 54, 0.5) 72%, rgba(12, 22, 54, 0.12) 100%),
              url("../images/pages/about-coast.jpg") center 60% / cover no-repeat; }
.mp-page--website-redesign .mp-ba2-layer:not(.mp-ba2-layer--before) .mp-site-copy { position: relative; z-index: 1;
  width: 44%; margin-left: 52%; padding: 42px 30px 30px; }
.mp-page--website-redesign .mp-ba2-layer:not(.mp-ba2-layer--before) .mp-site-copy h4 { color: #fff; font-family: inherit;
  font-size: clamp(1.3rem, 2.2vw, 1.85rem); letter-spacing: -0.02em; text-shadow: 0 2px 14px rgba(8, 16, 40, 0.35); }
.mp-page--website-redesign .mp-ba2-layer:not(.mp-ba2-layer--before) .mp-site-copy p { color: rgba(255, 255, 255, 0.9); }
.mp-page--website-redesign .mp-ba2-layer:not(.mp-ba2-layer--before) .mp-site-btns span + span { background: rgba(255, 255, 255, 0.92); }
/* The old site is drawn faded (.mp-site--dim); without a solid backing the new site's
   headline, which now sits in the same place, shows through it. */
.mp-page--website-redesign .mp-ba2-layer--before { background: #fff; }
.mp-page--website-redesign .mp-ba2-knob { width: 46px; height: 46px; box-shadow: 0 8px 22px rgba(31, 45, 96, 0.3); }
/* The tags sit at the foot of the frame, clear of the drawn address bar along its top. */
.mp-page--website-redesign .mp-ba2-tag { top: auto; bottom: 16px; font-size: 0.76rem; padding: 6px 13px; }
.mp-page--website-redesign .mp-head:has(+ .mp-reveal > .mp-ba2) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.mp-page--website-redesign .mp-sec:has(.mp-ba2) { padding-bottom: 64px; }

/* How we work: the five process steps as numbered cards, joined by arrows. */
.mp-page--website-redesign .mp-grid--5 { gap: 26px; }
.mp-page--website-redesign .mp-grid--5 .mp-card { position: relative; padding: 22px 18px 18px; border-color: var(--mp-line);
  border-radius: 12px; box-shadow: 0 6px 18px rgba(31, 45, 96, 0.05); }
.mp-page--website-redesign .mp-grid--5 .mp-card--row .mp-ico { width: 40px; height: 40px; border-radius: 10px; }
.mp-page--website-redesign .mp-grid--5 .mp-card--row .mp-ico svg { width: 19px; height: 19px; }
.mp-page--website-redesign .mp-grid--5 .mp-h3 { font-size: 0.95rem; margin-bottom: 4px; }
.mp-page--website-redesign .mp-grid--5 .mp-card p { font-size: 0.82rem; line-height: 1.5; color: #47517a; }
/* mp_cards() prints "01" as text; on a 24px disc the design shows the step number alone,
   so the text is sized out and the number drawn from the card's position. */
.mp-page--website-redesign .mp-grid--5 { counter-reset: mpredesign; }
.mp-page--website-redesign .mp-grid--5 .mp-card { counter-increment: mpredesign; }
.mp-page--website-redesign .mp-grid--5 .mp-card-num { position: absolute; top: -12px; left: 18px; margin: 0;
  width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 0; color: #fff; background: var(--mp-accent); box-shadow: 0 5px 12px rgba(37, 99, 235, 0.3); }
.mp-page--website-redesign .mp-grid--5 .mp-card-num::after { content: counter(mpredesign); font-size: 0.74rem; font-weight: 700; }
.mp-page--website-redesign .mp-grid--5 .mp-card + .mp-card::before { content: ''; position: absolute; left: -21px; top: 50%;
  width: 9px; height: 9px; border-top: 2px solid #9fb8f4; border-right: 2px solid #9fb8f4; transform: translateY(-50%) rotate(45deg); }

/* The benefits: icon, heading and a line, with no card behind them. */
.mp-page--website-redesign .mp-grid--4 { gap: 22px 34px; }
.mp-page--website-redesign .mp-grid--4 .mp-card { padding: 0; background: none; border: 0; box-shadow: none; }
.mp-page--website-redesign .mp-grid--4 .mp-ico { width: 34px; height: 34px; border-radius: 50%; color: #fff; background: var(--mp-accent);
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.24); }
.mp-page--website-redesign .mp-grid--4 .mp-ico svg { width: 17px; height: 17px; }
.mp-page--website-redesign .mp-grid--4 .mp-h3 { font-size: 1rem; margin: 6px 0 6px; }
.mp-page--website-redesign .mp-grid--4 .mp-card p { font-size: 0.87rem; color: #47517a; }

/* Ongoing support: the wide white card. */
.mp-page--website-redesign .mp-support-panel { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 0.85fr);
  gap: 34px; padding: 22px 30px 22px 22px; border-radius: 14px; border-color: var(--mp-line); }
.mp-page--website-redesign .mp-support-photo { aspect-ratio: 16 / 11; border-radius: 12px; }
.mp-page--website-redesign .mp-support-panel .mp-list { gap: 10px; margin-top: 0; }
.mp-page--website-redesign .mp-support-panel .mp-list li { font-size: 0.92rem; color: var(--mp-ink-2); }
.mp-page--website-redesign > section:has(.mp-support-panel) { padding-bottom: 14px; }

/* FAQ, related services and the closing panel, closer together. */
.mp-page--website-redesign .mp-faq-grid { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.55fr); gap: 56px; }
.mp-page--website-redesign .mp-faq { gap: 8px; }
.mp-page--website-redesign .mp-faq details { border-color: var(--mp-line); border-radius: 10px; transition: border-color .15s ease; }
.mp-page--website-redesign .mp-faq details:hover { border-color: #b9cbf7; }
.mp-page--website-redesign .mp-faq summary { padding: 15px 46px 15px 20px; font-size: 0.92rem; color: var(--mp-ink); }
.mp-page--website-redesign .mp-faq details > div { color: #47517a; }
.mp-page--website-redesign .mp-tags .mp-tag { border: 1px solid #d3dffc; color: var(--mp-accent-d); background: #eef3ff;
  transition: background .15s ease, border-color .15s ease; }
.mp-page--website-redesign .mp-tags .mp-tag:hover { background: #e2eaff; border-color: var(--mp-accent); }
.mp-page--website-redesign > section:last-child { padding-bottom: 12px; }
.mp-page--website-redesign .mp-cta { grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 22px 36px;
  padding: 24px 36px; border-radius: 16px; }
.mp-page--website-redesign .mp-cta .mp-h2 { font-size: clamp(1.5rem, 2.5vw, 2.05rem); }
.mp-page--website-redesign .mp-cta .mp-h2 .mp-em { white-space: nowrap; }
.mp-page--website-redesign .mp-cta .mp-cta-ticks { gap: 7px; }
.mp-page--website-redesign .mp-cta .mp-cta-ticks li { font-size: 0.84rem; white-space: nowrap; }

@media (max-width: 1180px) {
  .mp-page--website-redesign .mp-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mp-page--website-redesign .mp-hero .mp-h1 { font-size: clamp(2.2rem, 3.6vw, 2.6rem); }
  .mp-page--website-redesign .mp-grid--5 { gap: 22px; }
  .mp-page--website-redesign .mp-grid--5 .mp-card--row { display: block; }
  .mp-page--website-redesign .mp-grid--5 .mp-card--row .mp-ico { margin-bottom: 12px; }
  .mp-page--website-redesign .mp-grid--5 .mp-card + .mp-card::before { left: -18px; }
  .mp-page--website-redesign .mp-cta { grid-template-columns: auto minmax(0, 1fr) auto; }
  .mp-page--website-redesign .mp-cta .mp-cta-ticks { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 8px 22px; }
}
@media (max-width: 1080px) {
  .mp-page--website-redesign .mp-problems { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mp-page--website-redesign .mp-support-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mp-page--website-redesign .mp-support-photo { aspect-ratio: 21 / 8; }
  .mp-page--website-redesign .mp-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
  .mp-page--website-redesign .mp-grid--5 .mp-card { padding: 20px 14px 16px; }
  .mp-page--website-redesign .mp-grid--5 .mp-card + .mp-card::before { left: -14px; width: 7px; height: 7px; }
  .mp-page--website-redesign .mp-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Below the desktop row the steps become a vertical timeline: one card per line, the
   arrow turned to point down the gap between them. */
@media (max-width: 920px) {
  .mp-page--website-redesign .mp-hero-art { margin: 8px 0 0; max-width: 680px; }
  .mp-page--website-redesign .mp-good-card { margin-top: 0; }
  .mp-page--website-redesign .mp-grid--5 { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .mp-page--website-redesign .mp-grid--5 .mp-card--row { display: flex; padding: 18px 18px 16px 22px; }
  .mp-page--website-redesign .mp-grid--5 .mp-card--row .mp-ico { margin: 0; }
  .mp-page--website-redesign .mp-grid--5 .mp-card-num { top: -10px; left: -8px; }
  .mp-page--website-redesign .mp-grid--5 .mp-card + .mp-card::before { left: 38px; top: -17px;
    transform: rotate(135deg); }
  .mp-page--website-redesign .mp-ba2-frame { aspect-ratio: 16 / 9; }
  .mp-page--website-redesign .mp-ba2-layer:not(.mp-ba2-layer--before) .mp-site-copy { width: 52%; margin-left: 46%; padding: 30px 22px; }
  .mp-page--website-redesign .mp-sec:has(.mp-ba2) { padding-bottom: 48px; }
  .mp-page--website-redesign .mp-cta { grid-template-columns: minmax(0, 1fr) !important; }
  .mp-page--website-redesign .mp-cta .mp-cta-ticks { grid-column: auto; }
  .mp-page--website-redesign .mp-cta > div[style] { justify-items: start !important; }
}
@media (max-width: 640px) {
  .mp-page--website-redesign .mp-sec { padding: 36px 0; }
  .mp-page--website-redesign .mp-sec--flush-top { padding-top: 0; }
  .mp-page--website-redesign > .mp-hero { padding: 26px 0 22px; }
  .mp-page--website-redesign .mp-hero .mp-h1 { font-size: clamp(2rem, 9vw, 2.45rem); }
  .mp-page--website-redesign .mp-hero .mp-actions .mp-btn,
  .mp-page--website-redesign .mp-cta .mp-actions .mp-btn { flex: 1 1 100%; }
  .mp-page--website-redesign .mp-hero .mp-ticks li { white-space: normal; }
  .mp-page--website-redesign .mp-hero-art { margin: 4px -6px 0; }
  .mp-hero-checks { position: relative; left: auto; bottom: auto; margin: -6px 12px 0; }
  .mp-hero-checks li { white-space: normal; }
  .mp-page--website-redesign .mp-hero-art .mp-mock-label { position: static; display: block; margin-top: 8px; text-align: right; }
  .mp-page--website-redesign .mp-problems { grid-template-columns: minmax(0, 1fr); }
  .mp-page--website-redesign .mp-good-card { padding: 22px 20px; }
  .mp-page--website-redesign .mp-ba2-frame { aspect-ratio: 4 / 3; min-height: 0; }
  .mp-page--website-redesign .mp-ba2-layer:not(.mp-ba2-layer--before) .mp-site-copy { width: auto; margin: 0; padding: 22px 18px; }
  .mp-page--website-redesign .mp-ba2-layer:not(.mp-ba2-layer--before) .mp-site-pic {
    background: linear-gradient(180deg, rgba(12, 22, 54, 0.55) 0%, rgba(12, 22, 54, 0.1) 70%),
                url("../images/pages/about-coast.jpg") center 60% / cover no-repeat; }
  .mp-page--website-redesign .mp-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .mp-page--website-redesign .mp-cta { padding: 24px 20px; }
  .mp-page--website-redesign .mp-cta .mp-cta-ticks li { white-space: normal; }
}

/* ── Business automation — October 2026 target pass ───────────────────────────
   /business-automation. Shares the custom-software / web-applications pass above (rhythm,
   buttons, hero type, strip, the problems restack, row cards, support, FAQ and CTA) and
   the condensed reliability block (heading beside six cards). What only this page draws:
   one example process ticked off top to bottom in the hero (.mp-proc, art type
   'process'), the automations table beside the intro (.mp-auto, art type 'automations'),
   the use cases four across, and the will / will-not cards under a full-width heading.
   Both drawings are labelled "Example" in their own header and carry no outcome figure. */

/* Hero: the process card, with the note and the small log card beside it. */
.mp-proc { display: grid; grid-template-columns: minmax(0, 1fr) 172px; gap: 18px; align-items: end; }
.mp-proc-card { background: #fff; border: 1px solid var(--mp-line-2); border-radius: 14px; padding: 16px 18px 18px;
  box-shadow: 0 24px 60px rgba(31, 45, 96, 0.14); min-width: 0; }
.mp-proc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.mp-proc-top b { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--mp-ink); }
.mp-proc-top b svg { width: 18px; height: 18px; color: var(--mp-accent); flex: none; }
.mp-proc-top em { font-style: normal; font-size: 0.66rem; font-weight: 600; color: var(--mp-muted);
  border: 1px solid var(--mp-line); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.mp-proc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.mp-proc li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--mp-line-2); border-radius: 11px; background: #fbfcff; }
/* The connector between two steps: a short line and a head, pointing down. */
.mp-proc li + li::before { content: ''; position: absolute; left: 31px; top: -16px; width: 1.5px; height: 13px; background: #a9bff5; }
.mp-proc li + li::after { content: ''; position: absolute; left: 28.5px; top: -8px; width: 5px; height: 5px;
  border-right: 1.5px solid #a9bff5; border-bottom: 1.5px solid #a9bff5; transform: rotate(45deg); }
.mp-proc-ico { width: 40px; height: 40px; border-radius: 10px; background: var(--mp-soft); color: var(--mp-accent);
  display: flex; align-items: center; justify-content: center; }
.mp-proc-ico svg { width: 19px; height: 19px; }
.mp-proc-txt { min-width: 0; font-size: 0.72rem; line-height: 1.4; color: var(--mp-muted); }
.mp-proc-txt b { display: block; font-size: 0.86rem; color: var(--mp-ink); }
.mp-proc-txt b i { font-style: normal; color: var(--mp-accent); margin-right: 7px; }
.mp-proc-ok { width: 26px; height: 26px; border-radius: 50%; background: #e3f6ea; color: var(--mp-ok);
  display: flex; align-items: center; justify-content: center; }
.mp-proc-ok svg { width: 14px; height: 14px; stroke-width: 2.4; }
.mp-proc-aside { display: flex; flex-direction: column; gap: 3px; margin-bottom: 30px; padding: 16px; background: #fff;
  border: 1px solid var(--mp-line-2); border-radius: 14px; box-shadow: 0 14px 34px rgba(31, 45, 96, 0.1); }
.mp-proc-aside .mp-ico { width: 36px; height: 36px; border-radius: 10px; margin-bottom: 8px; }
.mp-proc-aside .mp-ico svg { width: 18px; height: 18px; }
.mp-proc-aside b { font-size: 0.86rem; line-height: 1.3; color: var(--mp-ink); }
.mp-proc-aside > span:not(.mp-ico) { font-size: 0.72rem; line-height: 1.45; color: var(--mp-muted); }
/* Four ticked runs, as a strip of green bars: the shape of a log, with no number on it. */
.mp-proc-dots { display: flex; gap: 5px; margin-top: 10px; }
.mp-proc-dots i { flex: 1; height: 6px; border-radius: 3px; background: #bfe8cd; }
.mp-page--business-automation .mp-hero-art .mp-note--hero { top: -4px; right: 2px; font-size: 1.3rem; }

/* What automation is: copy left, the automations table right. */
.mp-auto { display: grid; grid-template-columns: 146px minmax(0, 1fr); border-radius: 14px; overflow: hidden;
  background: #fff; border: 1px solid var(--mp-line-2); box-shadow: 0 24px 60px rgba(31, 45, 96, 0.14); }
.mp-auto-main { padding: 18px 20px 20px; min-width: 0; }
.mp-auto-table { border: 1px solid var(--mp-line-2); border-radius: 10px; overflow: hidden; }
.mp-auto-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 0.75fr) 88px; gap: 8px;
  align-items: center; padding: 11px 14px; border-top: 1px solid var(--mp-line-2); font-size: 0.7rem; color: var(--mp-body); }
.mp-auto-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-auto-row b { font-size: 0.74rem; font-weight: 600; color: var(--mp-ink); }
.mp-auto-row--h { border-top: 0; background: #f6f8fe; font-size: 0.64rem; font-weight: 600; color: var(--mp-muted); padding-top: 9px; padding-bottom: 9px; }
.mp-auto-row .mp-pill { font-style: normal; font-size: 0.62rem; padding: 3px 8px; gap: 4px; }
.mp-auto-row .mp-pill svg { width: 11px; height: 11px; stroke-width: 2.4; }
.mp-page--business-automation .mp-split { align-items: center; }

/* Use cases: four across, icon beside the words, even heights. */
.mp-page--business-automation .mp-sec--b-cards .mp-card { height: 100%; }
.mp-page--business-automation .mp-sec--b-cards .mp-card--row .mp-ico { width: 40px; height: 40px; }

/* How we do it: the heading across the top, the two cards side by side under it — the
   shared pass puts this heading at the left, which this design does not. */
.mp-page--business-automation .mp-shell:has(> .mp-grid > .mp-inc) { display: block; }
.mp-page--business-automation .mp-shell:has(> .mp-grid > .mp-inc) > .mp-head { margin-bottom: 24px; }
.mp-page--business-automation .mp-inc--yes { background: linear-gradient(160deg, #f6f9ff 0%, #eff4ff 100%); border-color: #d6e1fb; }
.mp-page--business-automation .mp-inc .mp-h3 { font-size: 1.08rem !important; }
.mp-inc-mark { display: inline-flex; width: 28px; height: 28px; border-radius: 50%; align-items: center; justify-content: center;
  flex: none; background: var(--mp-accent); color: #fff; }
.mp-inc--no .mp-inc-mark { background: #e5484d; }
.mp-inc-mark svg { width: 15px; height: 15px; stroke-width: 2.4; }

@media (max-width: 1180px) {
  .mp-auto { grid-template-columns: 54px minmax(0, 1fr); }
}
@media (max-width: 1080px) {
  .mp-page--business-automation .mp-split .mp-auto { max-width: 760px; }
}
@media (max-width: 920px) {
  .mp-page--business-automation .mp-hero-art { max-width: 640px; }
}
@media (max-width: 640px) {
  .mp-auto { grid-template-columns: minmax(0, 1fr); }
  .mp-auto-main { padding: 14px; }
  .mp-auto-row { grid-template-columns: minmax(0, 1fr) auto; }
  .mp-auto-row > span:nth-child(2), .mp-auto-row > span:nth-child(3) { display: none; }
  .mp-auto-row > span:last-child { overflow: visible; }
}
@media (max-width: 560px) {
  .mp-proc { grid-template-columns: minmax(0, 1fr); }
  .mp-proc-aside { margin-bottom: 0; }
  .mp-proc li { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; }
  .mp-proc-ico { width: 34px; height: 34px; }
  .mp-proc li + li::before { left: 28px; }
  .mp-proc li + li::after { left: 25.5px; }
}

/* ── API integrations — October 2026 target pass ──────────────────────────────
   /api-integrations. Shares the custom-software / web-applications pass above (rhythm,
   widescreen shell, buttons, hero type, strip, problems restack, row cards, inclusions,
   condensed reliability block, five-step process, support card, FAQ, ticked CTA). What
   only this page draws: the connected-systems map in the hero (.mp-sysmap, art type 'map'),
   the example flow beside the intro (the business-automation .mp-proc card, tinted per
   step), a titled "manual way" card, and the pre-quote checks as one band (block 'strip').
   Every system in the drawings is a category icon with a product name in text — no logos. */

/* Hero: the note above the map's top-right corner. */
.mp-page--api-integrations .mp-hero-art { padding-top: 30px; }
.mp-page--api-integrations .mp-hero-art .mp-note--hero { top: -16px; right: 0; z-index: 2; font-size: 1.3rem; transform: rotate(-5deg); }
.mp-page--api-integrations .mp-hero .mp-ticks svg { padding: 4px; }

/* The map: a fixed 3:2 drawing, cards placed by percentage on the ends of the wires. */
.mp-sysmap { position: relative; width: 100%; aspect-ratio: 3 / 2; container-type: inline-size; }
.mp-sysmap::before { content: ''; position: absolute; inset: 4% 6%; z-index: 0;
  background-image: radial-gradient(circle, #d6def5 1px, transparent 1.3px); background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 40%, transparent 100%); }
.mp-sysmap-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mp-sysmap-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 16.67%; aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: #fff;
  border: 1px solid #bcd0fb; border-radius: 20px; box-shadow: 0 0 0 9px rgba(37, 99, 235, 0.06), 0 18px 40px rgba(37, 99, 235, 0.18); }
.mp-sysmap-core span { width: 42%; aspect-ratio: 1; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #4f7dff, var(--mp-accent)); color: #fff; }
.mp-sysmap-core span svg { width: 52%; height: 52%; stroke-width: 2.2; }
.mp-sysmap-core b { font-size: 0.66rem; line-height: 1.2; color: var(--mp-accent-d); text-align: center; padding: 0 6px; }
.mp-sysmap-node { position: absolute; transform: translate(-50%, -50%); width: 26%; display: flex; align-items: center; gap: 9px;
  padding: 10px 11px; background: #fff; border: 1px solid var(--mp-line-2); border-radius: 12px;
  box-shadow: 0 10px 26px rgba(31, 45, 96, 0.09); }
.mp-sysmap-node > span:last-child { min-width: 0; font-size: 0.66rem; line-height: 1.3; color: var(--mp-muted); }
.mp-sysmap-node b { display: block; font-size: 0.8rem; line-height: 1.25; color: var(--mp-ink); }
.mp-sysmap-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: var(--mp-soft); color: var(--mp-accent); }
.mp-sysmap-ico svg { width: 18px; height: 18px; }
.mp-sysmap-node--0 .mp-sysmap-ico { background: #efeafe; color: #6d4ae6; }
.mp-sysmap-node--1 .mp-sysmap-ico { background: #e2f3fb; color: #0e7fb8; }
.mp-sysmap-node--2 .mp-sysmap-ico { background: #fff0e5; color: #e2661c; }
.mp-sysmap-node--3 .mp-sysmap-ico { background: #fbe9f2; color: #c03d7e; }
.mp-sysmap-node--4 .mp-sysmap-ico { background: #e6f7ec; color: var(--mp-ok); }
@container (max-width: 540px) {
  .mp-sysmap-node { flex-direction: column; text-align: center; gap: 5px; padding: 8px 6px; }
  .mp-sysmap-ico { width: 30px; height: 30px; }
  .mp-sysmap-node b { font-size: 0.72rem; }
  .mp-sysmap-node > span:last-child { font-size: 0.6rem; }
  .mp-sysmap-core b { font-size: 0.58rem; }
}

/* Why integrations: copy left; the example flow with its outcome card right. */
.mp-page--api-integrations .mp-split { align-items: center; }
.mp-page--api-integrations .mp-split .mp-proc { grid-template-columns: minmax(0, 1fr) 176px; align-items: center; }
.mp-page--api-integrations .mp-split .mp-proc-card { box-shadow: 0 18px 44px rgba(31, 45, 96, 0.11); }
.mp-page--api-integrations .mp-split .mp-proc-aside { margin: 46px 0 0; padding: 18px 16px; }
.mp-page--api-integrations .mp-split .mp-proc-aside b { font-size: 0.9rem; line-height: 1.42; }
.mp-page--api-integrations .mp-proc li:nth-child(1) .mp-proc-ico { background: #efeafe; color: #6d4ae6; }
.mp-page--api-integrations .mp-proc li:nth-child(2) .mp-proc-ico { background: #e2f3fb; color: #0e7fb8; }
.mp-page--api-integrations .mp-proc li:nth-child(3) .mp-proc-ico { background: #e6f7ec; color: var(--mp-ok); }
.mp-page--api-integrations .mp-proc li:nth-child(4) .mp-proc-ico { background: #fbe9f2; color: #c03d7e; }
.mp-page--api-integrations .mp-note.mp-note--intro { top: -8px; right: 0; }

/* Popular tools: six even cards, icon beside the words. */
.mp-page--api-integrations .mp-sec--b-cards .mp-card { height: 100%; }
.mp-page--api-integrations .mp-sec--b-cards .mp-card--row .mp-ico { width: 44px; height: 44px; }
.mp-page--api-integrations .mp-sec--b-cards .mp-card p { color: var(--mp-body); }

/* Manual vs integrated: the problem list in its own titled card, beside the green one. */
.mp-page--api-integrations .mp-problems > div:first-child > .mp-bad-card { grid-column: 1; grid-row: 4; margin-top: 22px;
  padding: 24px 26px; border-radius: 14px; background: linear-gradient(160deg, #fff8f8 0%, #fdf1f2 100%); border: 1px solid #f4d6d9; }
.mp-page--api-integrations .mp-bad-card .mp-h3 { font-size: 1.12rem; color: var(--mp-ink); }
.mp-page--api-integrations .mp-bad-card .mp-list--bad { margin: 0; padding: 0; background: none; border: 0; }

/* Before we quote: one band of six checks under its heading — a credibility point, not
   a chapter, so the section is tighter than its neighbours. */
.mp-page--api-integrations .mp-sec--b-strip { padding: 44px 0; }
.mp-page--api-integrations .mp-sec--b-strip .mp-strip { padding: 20px 6px; border-radius: 14px; border-color: var(--mp-line); box-shadow: 0 6px 18px rgba(31, 45, 96, 0.05); }
.mp-page--api-integrations .mp-sec--b-strip .mp-strip-item { padding: 0 14px; }
.mp-page--api-integrations .mp-sec--b-strip .mp-strip-item svg { width: 24px; height: 24px; margin-bottom: 8px; }

/* Project scope: the two cards marked with a tick and a cross, the "yes" card tinted blue. */
.mp-page--api-integrations .mp-inc--yes { background: linear-gradient(160deg, #f6f9ff 0%, #eff4ff 100%); border-color: #d6e1fb; }

@media (max-width: 1180px) {
  .mp-page--api-integrations .mp-split .mp-proc { grid-template-columns: minmax(0, 1fr) 156px; }
}
@media (max-width: 1080px) {
  .mp-page--api-integrations .mp-split .mp-proc { max-width: 720px; }
}
@media (max-width: 920px) {
  .mp-page--api-integrations .mp-hero-art { padding-top: 0; max-width: 640px; }
}
/* Phones: the map becomes the integration with its systems in two columns beneath it. */
@media (max-width: 560px) {
  .mp-sysmap { aspect-ratio: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mp-sysmap::before { display: none; }
  /* The wires are redrawn for this layout by map-demo.js (two lanes up the middle gap:
     the left column feeds in, the right column is fed); without it there are none. */
  .mp-sysmap:not(.is-live) .mp-sysmap-wires { display: none; }
  .mp-sysmap-wires { z-index: 0; pointer-events: none; }
  .mp-sysmap-core { position: static; transform: none; grid-column: 1 / -1; width: auto; aspect-ratio: auto;
    flex-direction: row; gap: 10px; padding: 12px 14px; justify-content: flex-start; box-shadow: 0 10px 26px rgba(37, 99, 235, 0.14); }
  .mp-sysmap-core span { width: 42px; }
  .mp-sysmap-core b { font-size: 1rem; font-weight: 700; padding: 0; }
  .mp-sysmap { gap: 14px 34px; }
  .mp-sysmap-core { padding: 16px 18px; margin-bottom: 6px; border-width: 2px; }
  .mp-sysmap-node { position: static; transform: none; width: auto; flex-direction: row; text-align: left; gap: 10px; padding: 12px;
    box-shadow: 0 10px 24px -10px rgba(31, 45, 96, 0.28); }
  .mp-sysmap-ico { width: 36px; height: 36px; }
  .mp-sysmap-node b { font-size: 0.86rem; font-weight: 700; }
  .mp-sysmap-node > span:last-child { font-size: 0.7rem; }
  .mp-page--api-integrations .mp-split .mp-proc { grid-template-columns: minmax(0, 1fr); }
  .mp-page--api-integrations .mp-split .mp-proc-aside { margin: 0; }
}

/* ── How we work — October 2026 target pass ───────────────────────────────────
   /how-we-work only (main.mp-page--how-we-work). Wider canvas, a shorter rhythm (every
   section after the journey is flush-top, so --mp-gap is the whole space between two),
   a bigger hero, the first four steps as a numbered column joined by one line, the
   eight-step journey as the widest row on the page, and the closing panel with its
   reassurances ticked beside the buttons. Nothing here reaches another page. */
.mp-page--how-we-work { --mp-gap: 76px; }
@media (min-width: 1600px) { .mp-page--how-we-work .mp-shell { width: min(1360px, 100%); } }
.mp-page--how-we-work .mp-btn { border-radius: 9px; min-height: 48px; }
.mp-page--how-we-work .mp-btn--p { background: var(--mp-accent); box-shadow: 0 8px 18px rgba(37, 99, 235, 0.24); }
.mp-page--how-we-work .mp-btn--p:hover { background: var(--mp-accent-d); }
.mp-page--how-we-work .mp-lead { color: #47517a; }
.mp-page--how-we-work .mp-h2 { font-size: clamp(1.75rem, 2.75vw, 2.45rem); }
.mp-page--how-we-work .mp-card { border-radius: 12px; border-color: var(--mp-line); }

/* Hero: copy left, the process preview right. */
.mp-page--how-we-work > .mp-hero { padding: 44px 0 30px; }
.mp-page--how-we-work .mp-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: 48px; }
.mp-page--how-we-work .mp-hero .mp-h1 { font-size: clamp(2.3rem, 3.55vw, 3.25rem); line-height: 1.05; letter-spacing: -0.034em; }
.mp-page--how-we-work .mp-hero .mp-lead { margin-top: 20px; max-width: 54ch; font-size: 1.02rem; }
.mp-page--how-we-work .mp-hero .mp-ticks { gap: 10px 20px; }
.hw-hero-art { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr); gap: 26px; align-items: center; }
/* One dashed line runs behind the cards from the first circle to the last; the cards
   are opaque, so it only shows in the gaps between them. */
.hw-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; position: relative; }
.hw-flow::before { content: ''; position: absolute; left: 34px; top: 32px; bottom: 32px; width: 2px;
  background: repeating-linear-gradient(180deg, #9fb8f4 0 5px, transparent 5px 9px); }
.hw-flow li { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 14px;
  align-items: center; padding: 14px 18px 14px 15px; box-shadow: var(--mp-shadow); }
.hw-flow-n { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--mp-soft); border: 1px solid #c9d8fb; color: var(--mp-accent-d); font-size: 0.8rem; font-weight: 700; }
.hw-flow .mp-h3 { margin: 0 0 2px; font-size: 0.98rem; }
.hw-flow p { font-size: 0.82rem; line-height: 1.5; }
.hw-photo { position: relative; padding-top: 86px; }
.hw-photo-note { top: 0; right: 4px; width: 132px; white-space: normal; transform: rotate(-3deg); }
.hw-photo-card { padding: 0; overflow: hidden; box-shadow: var(--mp-shadow); }
.hw-photo-pic { aspect-ratio: 4 / 3; }
.hw-photo-ticks { margin: 0; padding: 12px 14px 14px; gap: 7px; }
.hw-photo-ticks li { font-size: 0.8rem; font-weight: 700; color: var(--mp-ink); align-items: center; gap: 8px; }
.hw-photo-ticks svg { width: 17px; height: 17px; padding: 3px; margin: 0; }

/* The journey: the widest row on the page, eight across where it fits. */
.hw-journey { padding: 40px 0 var(--mp-gap); }
.hw-journey .mp-shell { width: min(1380px, 100%); }
@media (min-width: 1600px) { .mp-page--how-we-work .hw-journey .mp-shell { width: min(1480px, 100%); } }
.mp-page--how-we-work .mp-steps { gap: 22px; }
.mp-page--how-we-work .mp-step { padding: 26px 12px 18px; border-radius: 12px; border-color: var(--mp-line);
  box-shadow: 0 6px 18px rgba(31, 45, 96, 0.05); }
.mp-page--how-we-work .mp-step-n { width: 28px; height: 28px; top: -14px; font-size: 0.7rem; }
.mp-page--how-we-work .mp-step .mp-ico { width: 44px; height: 44px; border-radius: 50%; margin: 6px auto 12px; }
.mp-page--how-we-work .mp-step h3 { font-size: 0.92rem; }
.mp-page--how-we-work .mp-step p { font-size: 0.78rem; color: var(--mp-body); }
/* Keeps "8-step" whole: a phone would otherwise break it at the hyphen. */
.hw-journey .mp-h2 .mp-em { white-space: nowrap; }
.mp-page--how-we-work .mp-step + .mp-step::before { left: -18px; top: 53px; width: 10px; }
.mp-page--how-we-work .mp-step + .mp-step::after { left: -11px; top: 53px; }

/* Why it feels easy, and after launch: round icon tiles, equal heights. */
.mp-page--how-we-work .mp-grid--4 .mp-card--row,
.mp-page--how-we-work .mp-grid--5 .mp-card--row { height: 100%; }
.mp-page--how-we-work .mp-grid--4 .mp-card--row { padding: 22px 20px; }
.mp-page--how-we-work .mp-card--row .mp-ico { border-radius: 50%; }
.mp-page--how-we-work .mp-grid--4 .mp-card .mp-h3 { font-size: 0.98rem; margin-bottom: 6px; }
.mp-page--how-we-work .mp-grid--4 .mp-card p { font-size: 0.86rem; }

/* Built first: the strongest block on the page. */
.mp-page--how-we-work .mp-callout { grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); gap: 40px; padding: 36px 40px;
  border-radius: 14px; border-color: #cfdcfb; }
.mp-page--how-we-work .mp-callout .mp-h2 { font-size: clamp(1.6rem, 2.2vw, 2rem); text-wrap: pretty; }
.mp-page--how-we-work .mp-callout p { font-size: 0.97rem; color: #47517a; }
.mp-page--how-we-work .mp-callout .mp-fineprint { font-size: 0.82rem; }
.mp-page--how-we-work .mp-callout-facts { padding: 24px 26px; border-radius: 12px; }
.mp-page--how-we-work .mp-callout-facts .mp-list li { font-size: 0.9rem; color: var(--mp-ink-2); }

/* FAQ: a narrower intro, the questions given the room. */
.mp-page--how-we-work .mp-faq-grid { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.55fr); gap: 56px; }
.mp-page--how-we-work .mp-faq-grid .mp-lead { font-size: 0.95rem; }
.mp-page--how-we-work .mp-faq details { border-radius: 10px; border-color: var(--mp-line); }

/* Closing panel: gift mark, copy, buttons, and the three reassurances ticked. */
.mp-page--how-we-work > .mp-sec--tight { padding: 0 0 64px; }
.mp-page--how-we-work .mp-cta { grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 22px 30px; padding: 30px 36px; border-radius: 16px; }
.mp-page--how-we-work .mp-cta .mp-h2 { font-size: clamp(1.45rem, 2.1vw, 1.85rem); }
.mp-page--how-we-work .mp-cta-mark { width: 64px; height: 64px; border-radius: 16px; }
.mp-page--how-we-work .mp-cta-mark svg { width: 28px; height: 28px; }
.mp-page--how-we-work .mp-cta .mp-cta-ticks li { white-space: nowrap; }

@media (max-width: 1180px) {
  /* Eight across stops fitting: four and four, joined only within a row. */
  .mp-page--how-we-work .mp-steps { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 30px; }
  .mp-page--how-we-work .mp-step + .mp-step::before { display: block; }
  .mp-page--how-we-work .mp-steps .mp-step:nth-child(4n+1)::before,
  .mp-page--how-we-work .mp-steps .mp-step:nth-child(4n+1)::after { display: none; }
  .mp-page--how-we-work .mp-cta { grid-template-columns: auto minmax(0, 1fr) auto; }
  .mp-page--how-we-work .mp-cta-ticks { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 8px 22px; }
}
@media (max-width: 1080px) {
  .hw-hero-art { grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr); gap: 18px; }
  .mp-page--how-we-work .mp-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-page--how-we-work .mp-callout { gap: 30px; padding: 32px 30px; }
}
@media (max-width: 920px) {
  .mp-page--how-we-work .mp-hero-grid { gap: 32px; }
  .mp-page--how-we-work .mp-hero-art { max-width: 640px; }
  .hw-photo { padding-top: 0; }
  .mp-page--how-we-work .mp-faq-grid { gap: 24px; }
  .mp-page--how-we-work .mp-cta-ticks { grid-column: auto; }
  /* The panel's button column is right-aligned inline for the wide layout. */
  .mp-page--how-we-work .mp-cta > div { justify-items: start !important; }
}
@media (max-width: 640px) {
  .mp-page--how-we-work .mp-sec { padding: 0 0 52px; }
  .mp-page--how-we-work .hw-journey { padding: 28px 0 52px; }
  .mp-page--how-we-work > .mp-sec--tight { padding: 0 0 40px; }
  .mp-page--how-we-work > .mp-hero { padding: 28px 0 26px; }
  .mp-page--how-we-work .mp-hero .mp-h1 { font-size: clamp(2rem, 9vw, 2.45rem); }
  .mp-page--how-we-work .mp-hero .mp-actions .mp-btn,
  .mp-page--how-we-work .mp-cta .mp-actions .mp-btn { flex: 1 1 100%; }
  .mp-page--how-we-work .mp-hero .mp-ticks li { white-space: normal; }
  .hw-hero-art { grid-template-columns: minmax(0, 1fr); }
  .hw-photo { display: none; }
  /* The journey becomes a vertical timeline: the numbers down a line on the left, each
     card beside its number. */
  .mp-page--how-we-work .mp-steps { grid-template-columns: minmax(0, 1fr); row-gap: 12px; position: relative; padding-top: 0 !important; }
  .mp-page--how-we-work .mp-steps::before { content: ''; position: absolute; left: 14px; top: 20px; bottom: 20px; width: 2px; background: #c9d8fb; }
  .mp-page--how-we-work .mp-step { margin-left: 44px; text-align: left; padding: 14px 16px; display: grid;
    grid-template-columns: 38px minmax(0, 1fr); column-gap: 12px; align-items: start; }
  .mp-page--how-we-work .mp-step-n { left: -44px; top: 14px; transform: none; }
  .mp-page--how-we-work .mp-step .mp-ico { grid-row: 1 / span 2; width: 38px; height: 38px; margin: 0; }
  .mp-page--how-we-work .mp-step .mp-ico svg { width: 18px; height: 18px; }
  .mp-page--how-we-work .mp-step h3 { margin: 2px 0 3px; }
  .mp-page--how-we-work .mp-steps .mp-step::before,
  .mp-page--how-we-work .mp-steps .mp-step::after { display: none; }
  .mp-page--how-we-work .mp-grid--5 { grid-template-columns: minmax(0, 1fr); }
  .mp-page--how-we-work .mp-callout { padding: 26px 20px; }
  .mp-page--how-we-work .mp-cta { padding: 26px 22px; }
  .mp-page--how-we-work .mp-cta-ticks { display: grid; }
  .mp-page--how-we-work .mp-cta .mp-cta-ticks li { white-space: normal; }
}

/* ── Team — October 2026 target pass ──────────────────────────────────────────
   /team only (main.mp-page--team, the `tm-` classes). The target is a layout reference:
   its four faces are not real people, so every person-shaped slot here is filled from
   team_people() and nothing else (see team.php). Founder centre-stage in the hero with
   skill tiles beside him until there are colleagues to show; one horizontal founder
   card; four "working with us" cards; a team grid only once there is a team; location
   as copy + compact panel; four approach cards; the shared lavender closing band. */
.mp-page--team { --mp-gap: 46px; }
@media (min-width: 1600px) { .mp-page--team .mp-shell { width: min(1360px, 100%); } }
.mp-page--team {
  background:
    radial-gradient(ellipse 50% 800px at 84% 220px, rgba(190, 211, 255, .26), transparent 72%),
    radial-gradient(ellipse 40% 700px at 6% 1400px, rgba(209, 190, 250, .16), transparent 72%),
    radial-gradient(ellipse 45% 800px at 94% 2500px, rgba(190, 211, 255, .18), transparent 72%);
}
.mp-page--team .mp-btn { border-radius: 9px; min-height: 48px; }
.mp-page--team .mp-btn--p { background: var(--mp-accent); box-shadow: 0 8px 18px rgba(37, 99, 235, 0.24); }
.mp-page--team .mp-btn--p:hover { background: var(--mp-accent-d); }
.mp-page--team .mp-lead { color: #47517a; }
.mp-page--team .mp-h2 { font-size: clamp(1.75rem, 2.7vw, 2.45rem); line-height: 1.1; }
.mp-page--team .mp-head { margin-bottom: 24px; align-items: end; }

/* Hero. */
.mp-page--team > .mp-hero { background: none; padding: 34px 0 40px; }
.mp-page--team .mp-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; }
.mp-page--team .mp-hero .mp-h1 { font-size: clamp(2.3rem, 3.3vw, 3.15rem); line-height: 1.04; letter-spacing: -0.034em; }
.mp-page--team .mp-hero .mp-lead { max-width: 54ch; font-size: 1rem; }
.mp-page--team .mp-hero .tm-sub { margin-top: 20px; font-weight: 600; color: var(--mp-ink); }
.mp-page--team .mp-hero .tm-sub + .mp-lead { margin-top: 10px; }
.mp-page--team .mp-hero .mp-actions { margin-top: 26px; }
.mp-page--team .mp-hero .mp-ticks { margin-top: 24px; gap: 10px 22px; }

.tm-hero-art { display: flex; align-items: center; gap: 18px; padding: 64px 0 40px; }
.tm-collage { flex: 1 1 auto; min-width: 0; display: grid; align-items: center;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr) minmax(0, 0.62fr); }
.tm-tile { position: relative; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden;
  background: linear-gradient(150deg, #dfe6ff 0%, #ebe3ff 100%);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 16px 36px rgba(47, 57, 103, 0.13); }
.tm-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tm-tile--main { z-index: 2; border: 5px solid #fff; box-shadow: 0 22px 48px rgba(47, 57, 103, 0.18); }
.tm-tile--left  { z-index: 1; margin-right: -16px; transform: translateY(14px); }
.tm-tile--right { z-index: 1; margin-left: -16px; transform: translateY(-18px); }
.tm-tile-initial { font-size: clamp(3rem, 6vw, 4.6rem); font-weight: 700; color: var(--mp-accent); letter-spacing: -0.04em; }
.tm-tile--left .tm-tile-initial, .tm-tile--right .tm-tile-initial { font-size: clamp(2rem, 3.4vw, 2.8rem); }
.tm-tile-cap { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 9px 12px; border-radius: 11px;
  background: rgba(24, 30, 66, 0.82); color: #fff; font-size: 0.72rem; line-height: 1.3; }
.tm-tile-cap b { display: block; font-size: 0.9rem; font-weight: 600; }
.tm-tile-cap span { opacity: .8; }
.tm-tile--left .tm-tile-cap, .tm-tile--right .tm-tile-cap { left: 7px; right: 7px; bottom: 7px; padding: 6px 8px; }
.tm-tile--left .tm-tile-cap b, .tm-tile--right .tm-tile-cap b { font-size: 0.74rem; }
/* A slot with no real person in it: what the team does, as a quiet card. */
.tm-tile--skill { flex-direction: column; gap: 12px; padding: 14px; text-align: center;
  background: linear-gradient(160deg, #f5f7ff 0%, #efedff 100%); border: 1px solid #e3e7fa; box-shadow: 0 12px 28px rgba(47, 57, 103, 0.08);
  font-size: 0.82rem; font-weight: 600; color: var(--mp-ink-2); line-height: 1.3; }
.tm-tile--skill .mp-ico { width: 46px; height: 46px; border-radius: 13px; background: #fff; box-shadow: 0 6px 14px rgba(47, 57, 103, 0.08); }
.tm-tile--skill .mp-ico svg { width: 22px; height: 22px; }
.tm-hero-card { flex: none; list-style: none; margin: 0; padding: 14px 16px; display: grid; gap: 8px; align-self: center;
  background: #fff; border: 1px solid var(--mp-line-2); border-radius: 14px; box-shadow: 0 16px 36px rgba(47, 57, 103, 0.12); }
.tm-hero-card li { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 600; color: var(--mp-ink); white-space: nowrap; }
.tm-hero-card svg { width: 17px; height: 17px; flex: none; color: #fff; background: var(--mp-accent); border-radius: 50%; padding: 3px; }
.tm-note-small  { left: 4%; top: 0; transform: rotate(-5deg); }
.tm-note-small svg { margin-left: 18px; }
.tm-note-skills { right: 2%; top: -4px; transform: rotate(-3deg); text-align: right; }
.tm-note-skills svg { margin: 2px 0 0 auto; transform: scaleX(-1); }

/* Founder: one horizontal card — photo, story, responsibilities. */
.tm-founder { position: relative; grid-template-columns: 190px minmax(0, 1.35fr) minmax(0, 0.9fr); gap: 34px;
  padding: 30px 32px; border-radius: 18px; box-shadow: 0 14px 36px rgba(31, 45, 96, 0.07); }
.tm-founder-photo { width: 190px; height: 220px; border-radius: 16px; font-size: 4rem; }
.tm-founder .mp-h2 { font-size: clamp(1.7rem, 2.4vw, 2.1rem); }
.tm-role { margin: 4px 0 14px; font-size: 0.88rem; color: var(--mp-muted); }
.tm-bio { margin: 0; font-size: 0.94rem; line-height: 1.68; color: var(--mp-ink-2); max-width: 62ch; }
.tm-more { margin: 14px 0 0; }
.tm-founder .mp-meta { margin-top: 16px; }
.tm-founder .mp-callout-facts { padding: 22px 24px; border-radius: 14px; }
.tm-founder .mp-list li { font-size: 0.88rem; color: var(--mp-ink-2); }
.tm-note-founder { left: -6px; top: -54px; }
/* Room above the founder card for its margin note, clear of the hero ticks. */
.mp-page--team > .mp-hero + .mp-sec--flush-top { padding-top: 34px; }

/* Four-across cards (working with us; approach). */
.mp-page--team .mp-grid--4 { gap: 18px; }
.tm-working .mp-card { padding: 24px 22px; border-radius: 14px; box-shadow: 0 10px 26px rgba(31, 45, 96, 0.05); }
.tm-working .mp-ico { width: 44px; height: 44px; border-radius: 12px; margin-bottom: 16px; }
.tm-working .mp-ico svg { width: 22px; height: 22px; }
.tm-working .mp-h3, .tm-approach .mp-h3 { font-size: 1.02rem; margin-bottom: 8px; }
.tm-working .mp-card p, .tm-approach .mp-card p { font-size: 0.88rem; line-height: 1.6; color: #47517a; }
.tm-approach .mp-card--row { padding: 22px 20px; gap: 14px; border-radius: 14px; box-shadow: 0 10px 26px rgba(31, 45, 96, 0.05); }
.tm-approach .mp-ico { width: 42px; height: 42px; border-radius: 12px; }
.tm-approach .mp-ico svg { width: 21px; height: 21px; }

/* The team grid: portrait (or initial) over name, role and responsibilities. */
.tm-person { padding: 0; overflow: hidden; border-radius: 14px; box-shadow: 0 10px 26px rgba(31, 45, 96, 0.05); }
.tm-person-photo { aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: linear-gradient(150deg, #e6ebff 0%, #eee8ff 100%); color: var(--mp-accent); font-size: 3rem; font-weight: 700; letter-spacing: -0.04em; }
.tm-person-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.tm-person-body { padding: 18px 20px 22px; }
.tm-person-body .mp-h3 { margin: 0 0 3px; font-size: 1.04rem; }
.tm-person-role { margin: 0 0 10px; font-size: 0.84rem; color: var(--mp-muted); }
.tm-person-body p { font-size: 0.88rem; color: #47517a; }
.tm-person-body .mp-meta { margin-top: 12px; }

/* Where we are: copy left, compact places panel right. */
.tm-where { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 48px; align-items: center; }
.tm-where .mp-lead { margin-top: 14px; font-size: 0.97rem; max-width: 56ch; }
.tm-places { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 24px; padding: 26px 28px; border-radius: 16px; }

/* Closing band. */
.mp-page--team .mp-cta--band { margin-top: 10px; }
.mp-page--team .mp-cta--band .mp-h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.mp-page--team .mp-cta-band-grid { grid-template-columns: minmax(0, 1.3fr) auto auto; gap: 26px 56px; }

@media (max-width: 1180px) {
  .tm-hero-art { flex-wrap: wrap; justify-content: center; }
  .tm-collage { flex-basis: 100%; }
  .tm-hero-card { grid-auto-flow: column; gap: 18px; }
  .tm-founder { grid-template-columns: 170px minmax(0, 1fr); }
  .tm-founder-photo { width: 170px; height: 200px; }
  .tm-founder .mp-callout-facts { grid-column: 1 / -1; }
  .tm-places { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1080px) {
  .mp-page--team .mp-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-page--team .mp-cta-band-grid { grid-template-columns: minmax(0, 1fr) auto; }
  .mp-page--team .mp-cta-band-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 920px) {
  .mp-page--team .mp-hero-art { max-width: 560px; }
  .tm-hero-art { padding: 8px 0 0; }
  .tm-where { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .tm-places { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mp-page--team .mp-cta-band-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .mp-page--team .mp-sec { padding: 40px 0; }
  .mp-page--team .mp-sec--flush-top { padding-top: 0; }
  .mp-page--team > .mp-hero { padding: 26px 0 30px; }
  .mp-page--team .mp-hero .mp-h1 { font-size: clamp(2.05rem, 9.2vw, 2.5rem); }
  .mp-page--team .mp-hero .mp-actions .mp-btn,
  .mp-page--team .mp-cta .mp-actions .mp-btn { flex: 1 1 100%; width: 100%; }
  .mp-page--team .mp-hero .mp-ticks li { white-space: normal; }
  .mp-page--team .mp-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .tm-hero-card { grid-auto-flow: row; }
  .tm-founder { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; gap: 22px; }
  .tm-founder-photo { width: 140px; height: 160px; font-size: 3rem; }
  .tm-places { grid-template-columns: minmax(0, 1fr); padding: 22px; }
}

/* ── Reviews — October 2026 target pass ───────────────────────────────────────
   /reviews only (main.mp-page--reviews, the `rv-` classes). The target is a layout
   reference: its reviewers, headshots and business-type tiles are not real, so every
   quote comes from Ops → Testimonials and every project from the published portfolio
   (see reviews.php). Hero in three columns — copy, our real project on a laptop, the
   "how these reviews work" card; one four-value panel; featured quote cards that carry
   their project when there is one; the businesses behind our projects; four "working
   with us" cards; any further quotes; FAQ; the shared closing panel with ticks. */
.mp-page--reviews { --mp-gap: 76px; }
@media (min-width: 1600px) { .mp-page--reviews .mp-shell { width: min(1360px, 100%); } }
.mp-page--reviews {
  background:
    radial-gradient(ellipse 50% 800px at 84% 200px, rgba(190, 211, 255, .26), transparent 72%),
    radial-gradient(ellipse 40% 700px at 6% 1300px, rgba(209, 190, 250, .16), transparent 72%),
    radial-gradient(ellipse 45% 800px at 94% 2400px, rgba(190, 211, 255, .18), transparent 72%);
}
.mp-page--reviews .mp-btn { border-radius: 9px; min-height: 48px; }
.mp-page--reviews .mp-btn--p { background: var(--mp-accent); box-shadow: 0 8px 18px rgba(37, 99, 235, 0.24); }
.mp-page--reviews .mp-btn--p:hover { background: var(--mp-accent-d); }
.mp-page--reviews .mp-lead { color: #47517a; }
.mp-page--reviews .mp-h2 { font-size: clamp(1.75rem, 2.7vw, 2.45rem); line-height: 1.1; }
.mp-page--reviews .mp-head { margin-bottom: 24px; align-items: end; }

/* Hero. */
.mp-page--reviews > .mp-hero { background: none; padding: 34px 0 36px; }
.rv-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr) minmax(0, 0.6fr); gap: 36px; align-items: center; }
.rv-hero--noart { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.7fr); }
.rv-hero .mp-h1 { font-size: clamp(2.3rem, 3.3vw, 3.15rem); line-height: 1.04; letter-spacing: -0.034em; }
.rv-hero .mp-lead { font-size: 1rem; max-width: 46ch; }
.rv-hero .mp-actions { margin-top: 26px; }
.rv-hero .mp-ticks { margin-top: 24px; gap: 10px 20px; }
.rv-hero-art { position: relative; min-width: 0; padding-top: 70px; }
.rv-note { left: 2%; top: -2px; transform: rotate(-6deg); font-size: 1.3rem; }
.rv-note svg { margin-left: 64px; width: 42px; height: 30px; }
.rv-devices { position: relative; margin: 0; padding-right: 8%; }
.rv-devices .mp-laptop-screen { border-width: 8px; border-radius: 12px; }
.rv-devices .mp-laptop-screen img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; }
.rv-window { position: absolute; right: 0; bottom: 26px; width: 38%; border-radius: 10px; overflow: hidden; z-index: 2;
  border: 4px solid #fff; background: #fff; box-shadow: 0 18px 38px rgba(47, 57, 103, 0.2); }
.rv-window img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 0; }
.rv-devices-cap { margin-top: 16px; font-size: 0.8rem; color: var(--mp-muted); text-align: center; }
.rv-devices-cap a { color: var(--mp-ink-2); font-weight: 600; text-decoration: none; }
.rv-devices-cap a:hover { color: var(--mp-accent); }
.rv-how { padding: 24px 22px; border-radius: 14px; box-shadow: 0 16px 36px rgba(47, 57, 103, 0.1); }
.rv-how .mp-eyebrow { margin-bottom: 14px; }
.rv-how .mp-list { margin: 0; gap: 12px; }
.rv-how .mp-list li { font-size: 0.86rem; line-height: 1.5; color: var(--mp-ink-2); }
.rv-how-link { margin: 16px 0 0; font-size: 0.86rem; }

/* The four values: one wide panel. */
.rv-strip { padding-bottom: 0; }
.rv-strip .mp-strip { padding: 26px 6px; border-radius: 14px; border-color: var(--mp-line); box-shadow: 0 10px 26px rgba(31, 45, 96, 0.05); }
.rv-strip .mp-strip-item svg { width: 28px; height: 28px; margin-bottom: 10px; }
.rv-strip .mp-strip-item strong { font-size: 0.92rem; }
.rv-strip .mp-strip-item span { font-size: 0.82rem; color: var(--mp-body); }

/* Quote cards. Equal height: the quote grows, so names and projects line up. */
.rv-grid { display: grid; gap: 20px; }
.rv-grid--featured { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rv-grid--more { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; }
.rv-quote { margin: 0; display: flex; flex-direction: column; gap: 16px; background: #fff; border: 1px solid var(--mp-line-2);
  border-radius: 14px; padding: 26px 26px 24px; box-shadow: 0 10px 26px rgba(31, 45, 96, 0.05); }
.rv-quote-mark { width: 38px; height: 38px; border-radius: 11px; background: var(--mp-soft); color: var(--mp-accent);
  display: inline-flex; align-items: center; justify-content: center; flex: none; }
.rv-quote-mark svg { width: 20px; height: 20px; fill: currentColor; }
.rv-quote blockquote { flex: 1 1 auto; margin: 0; font-size: 1.02rem; line-height: 1.66; color: var(--mp-ink-2); }
.rv-who { display: flex; gap: 12px; align-items: center; margin: 0; }
.rv-who strong { display: block; font-size: 0.96rem; color: var(--mp-ink); }
.rv-who small { display: block; margin-top: 2px; font-size: 0.83rem; color: var(--mp-muted); }
.rv-proj { display: flex; gap: 14px; align-items: center; padding: 10px; border: 1px solid var(--mp-line-2); border-radius: 11px;
  background: #f8f9ff; text-decoration: none; transition: border-color .15s ease, background .15s ease; }
.rv-proj:hover { border-color: #c9d6fb; background: #f3f6ff; }
.rv-proj-thumb { flex: none; width: 88px; aspect-ratio: 16 / 10; border-radius: 7px; overflow: hidden; background: var(--mp-tint); }
.rv-proj-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rv-proj b { display: flex; align-items: center; gap: 6px; font-size: 0.88rem; color: var(--mp-ink); }
.rv-proj b svg { width: 14px; height: 14px; color: var(--mp-accent); }
.rv-proj small { display: block; margin-top: 2px; font-size: 0.8rem; color: var(--mp-muted); }
/* The smaller cards: the mark beside the quote, the name underneath. */
.rv-quote--sm { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 16px; align-content: start; padding: 22px; }
.rv-quote--sm blockquote { font-size: 0.95rem; }
.rv-quote--sm .rv-who { grid-column: 2; }

/* The businesses behind our published projects. */
.rv-head-note { position: relative; }
.rv-note-clients { position: absolute; right: 0; bottom: 30px; transform: rotate(-4deg); text-align: right; white-space: nowrap; font-size: 1.24rem; }
.rv-clients { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.rv-client { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); gap: 18px; align-items: center; max-width: 660px;
  padding: 12px; background: #fff; border: 1px solid var(--mp-line-2); border-radius: 14px; text-decoration: none;
  box-shadow: 0 10px 26px rgba(31, 45, 96, 0.05); transition: border-color .15s ease, transform .15s ease; }
a.rv-client:hover { border-color: #c9d6fb; transform: translateY(-2px); }
.rv-client-shot { display: block; aspect-ratio: 16 / 10; border-radius: 9px; overflow: hidden; background: var(--mp-tint); }
.rv-client-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rv-client-body { display: block; padding-right: 8px; }
.rv-client-body strong { display: block; font-size: 1.04rem; color: var(--mp-ink); }
.rv-client-body small { display: block; margin-top: 3px; font-size: 0.85rem; color: var(--mp-muted); }
.rv-client-body em { display: block; margin-top: 14px; font-style: normal; font-size: 0.85rem; font-weight: 600; color: var(--mp-accent); }

/* Why clients stay. */
.mp-page--reviews .rv-why .mp-grid--4 { gap: 18px; }
.rv-why .mp-card { padding: 24px 22px; border-radius: 14px; box-shadow: 0 10px 26px rgba(31, 45, 96, 0.05); }
.rv-why .mp-ico { width: 44px; height: 44px; border-radius: 12px; margin-bottom: 16px; }
.rv-why .mp-ico svg { width: 22px; height: 22px; }
.rv-why .mp-h3 { font-size: 1.02rem; margin-bottom: 8px; }
.rv-why .mp-card p { font-size: 0.88rem; line-height: 1.6; color: #47517a; }

/* FAQ: one bordered accordion, rows divided by hairlines. */
.mp-page--reviews .mp-faq-grid { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.55fr); gap: 56px; }
.mp-page--reviews .mp-faq-grid .mp-lead { margin-top: 12px; }
.mp-page--reviews .mp-faq { gap: 0; background: #fff; border: 1px solid var(--mp-line); border-radius: 14px;
  box-shadow: var(--mp-shadow); overflow: hidden; }
.mp-page--reviews .mp-faq details { border: 0; border-radius: 0; }
.mp-page--reviews .mp-faq details + details { border-top: 1px solid var(--mp-line-2); }
.mp-page--reviews .mp-faq summary { padding: 16px 54px 16px 22px; font-size: 0.93rem; color: var(--mp-ink); }
.mp-page--reviews .mp-faq summary:focus-visible { outline-offset: -3px; }
.mp-page--reviews .mp-faq details > div { padding: 0 22px 18px; font-size: 0.9rem; color: #47517a; }

/* Closing panel: mark, copy, buttons, ticks — one row on a wide screen. */
.mp-page--reviews > section:last-child { padding-top: 0; padding-bottom: 12px; }
.mp-page--reviews .mp-cta { grid-template-columns: auto minmax(0, 1fr) auto auto; padding: 28px 36px; border-radius: 16px; }
.mp-page--reviews .mp-cta .mp-h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.mp-page--reviews .mp-cta-ticks li { white-space: nowrap; }

@media (max-width: 1180px) {
  .rv-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rv-how { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 32px; align-items: center; }
  .rv-how .mp-eyebrow { margin: 0; }
  .rv-how .mp-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
  .rv-how-link { grid-column: 2; margin-top: 4px; }
  .mp-page--reviews .mp-cta { grid-template-columns: auto minmax(0, 1fr) auto; }
  .mp-page--reviews .mp-cta-ticks { grid-column: 2 / -1; grid-auto-flow: column; justify-content: start; gap: 9px 24px; }
}
@media (max-width: 1080px) {
  .mp-page--reviews .mp-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rv-grid--featured, .rv-grid--more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-page--reviews .rv-why .mp-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 920px) {
  .rv-hero, .rv-hero--noart { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .rv-hero-art { max-width: 560px; padding-top: 0; }
  .rv-how { display: block; }
  .rv-how .mp-eyebrow { margin-bottom: 14px; }
  .mp-page--reviews .mp-cta-ticks { grid-column: 1 / -1; }
  .mp-page--reviews .mp-faq-grid { gap: 26px; }
}
@media (max-width: 640px) {
  .mp-page--reviews .mp-sec { padding: 44px 0; }
  .mp-page--reviews .mp-sec--flush-top { padding-top: 0; }
  .mp-page--reviews > .mp-hero { padding: 26px 0 30px; }
  .rv-hero .mp-h1 { font-size: clamp(2.05rem, 9.2vw, 2.5rem); }
  .mp-page--reviews .mp-hero .mp-actions .mp-btn,
  .mp-page--reviews .mp-cta .mp-actions .mp-btn { flex: 1 1 100%; width: 100%; }
  .rv-hero .mp-ticks li { white-space: normal; }
  .rv-devices { padding-right: 0; }
  .rv-window { display: none; }
  .rv-how .mp-list { grid-template-columns: minmax(0, 1fr); }
  .mp-page--reviews .mp-strip { grid-template-columns: minmax(0, 1fr); padding: 8px 18px; }
  .mp-page--reviews .mp-strip-item { padding: 16px 0; }
  .mp-page--reviews .mp-strip-item + .mp-strip-item { border-top: 1px solid var(--mp-line-2); }
  .rv-grid--featured, .rv-grid--more, .mp-page--reviews .rv-why .mp-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .rv-quote { padding: 22px 20px; }
  .rv-clients { grid-template-columns: minmax(0, 1fr); }
  .rv-client { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .rv-client-body { padding: 0 6px 6px; }
  .mp-page--reviews .mp-cta { padding: 26px 22px; }
  .mp-page--reviews .mp-cta-ticks { grid-auto-flow: row; }
}

/* ── Service heroes: no blue glow — October 2026 ─────────────────────────────
   Matches /managed-websites: the hero picture sits on the wash with no navy-tinted
   drop shadow or radial glow around it. Cards that float over something else keep a
   tight neutral shadow so they still read as lifted; everything else relies on its
   1px border. */
:is(.mp-page--website-redesign, .mp-page--website-maintenance, .mp-page--local-seo,
    .mp-page--custom-software, .mp-page--web-applications, .mp-page--client-portals,
    .mp-page--business-automation, .mp-page--api-integrations) .mp-hero-art :is(
    .mp-dash, .mp-proc-card, .mp-proc-aside, .mp-sysmap-node, .mp-panel, .mp-art-ph,
    .mp-laptop-screen) { box-shadow: none; }
:is(.mp-page--website-redesign, .mp-page--website-maintenance) .mp-hero-art :is(.mp-hero-checks, .mp-maint-log) {
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08); }
.mp-page--website-maintenance .mp-hero-art .mp-phone { box-shadow: 0 6px 16px rgba(15, 23, 42, 0.16); }
.mp-page--website-maintenance .mp-hero-art .mp-maint-scene::before { display: none; }
/* The redesign photograph's pale grey backdrop multiplies into the wash, as the
   managed photograph does, instead of reading as a lighter box behind the laptop. */
.mp-page--website-redesign .mp-hero-art .mp-workspace-bg { mix-blend-mode: multiply; }

/* API-integrations map: real logos from assets/images/ico/ in place of the drawn icons.
   The logo brings its own colour, so the tinted chip behind the icon is dropped. */
.mp-sysmap-ico.is-logo { background: none !important; padding: 0; }
.mp-sysmap-ico.is-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.mp-sysmap-core span.is-logo { background: none; }
.mp-sysmap-core span.is-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* ── Handwritten notes on phones and tablets ───────────────────────────────────
   Below 920px the side-by-side layouts stack, and a note placed in the margin beside
   a picture has no margin left to sit in — they used to be hidden outright, so phones
   lost every one. Instead each note is set in the flow, above the thing it was
   annotating. The desktop arrows point sideways at a picture beside the note, which on
   a phone sits BELOW it, so they pointed at nothing (or away from the content). Here
   every note gets the same arrow instead: under the text, curling down at what follows.
   Last in the file, and !important, because page rules hide or place notes (and their
   arrows) at narrower widths. */
@media (max-width: 920px) {
  .mp-page .mp-note { display: block !important; position: relative !important; inset: auto !important;
    transform: rotate(-3deg) !important; white-space: normal !important; width: auto !important; max-width: 100%;
    margin: 0 0 10px !important; font-size: 1.3rem !important; text-align: left !important; z-index: 1; }
  .mp-page .mp-note svg { display: none !important; }
  .mp-page .mp-note::after { content: ''; display: block; width: 30px; height: 34px; margin: 4px 0 0 26px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 44' fill='none' stroke='%234a78ee' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3c-5 12-2 26 12 36'/%3E%3Cpath d='M20 39l-10-1'/%3E%3Cpath d='M20 39l-1-10'/%3E%3C/svg%3E") no-repeat center / contain; }
}
}

/* ── Room under the hero margin notes ─────────────────────────────────────────
   The note cannot move up (the floating header is there), so the picture moves down
   a little instead, leaving a clear gap between the note's arrow and the artwork. */
@media (min-width: 921px) {
  .mp-page--managed .mw-hero-photo { margin-top: 12px; }
  .mp-page--website-maintenance .mp-hero-art .mp-workspace { margin-top: 30px; }
  .mp-page--web-applications .mp-hero-art .mp-dash { margin-top: 34px; }
}
/* Website design: the margin note that carries the mug's line now the hero is a photo.
   Custom software: its first hero note, placed as on /web-applications. */
@media (min-width: 921px) {
  .mp-page--website-design .mp-hero-art .mp-note--hero { top: -6px; right: 4%; z-index: 2; }
  .mp-page--website-design .mp-hero-art .mp-workspace { margin-top: 84px; }
  .mp-page--custom-software .mp-hero-art .mp-note--hero { top: -4px; right: 2%; z-index: 2; transform: rotate(-5deg); }
  .mp-page--custom-software .mp-hero-art .mp-dash { margin-top: 82px; }
}