.mcp-page { color: #1d2a30; font-size: 16px; line-height: 1.7; }
.mcp-container { width: min(1200px, calc(100% - 48px)); margin-inline: auto; }
.mcp-page h1, .mcp-page h2, .mcp-page h3 { font-weight: 800; line-height: 1.12; letter-spacing: -.035em; }
.mcp-page h1 { font-size: clamp(2.6rem, 5.4vw, 4.7rem); }
.mcp-page h2 { font-size: clamp(1.9rem, 3.3vw, 2.8rem); margin-bottom: 22px; }
.mcp-page h3 { font-size: 1.6rem; margin: 20px 0 14px; }
.mcp-page p + p { margin-top: 16px; }
.mcp-page a:not(.mcp-button):not(.mcp-back) { text-decoration-thickness: 1px; text-underline-offset: 4px; }
.mcp-page p a, .mcp-troubleshooting a { color: #073a47; text-decoration: underline; }
.mcp-page code { font-size: .88em; overflow-wrap: anywhere; }
.mcp-page :focus-visible { outline: 3px solid #073a47; outline-offset: 4px; }
.mcp-eyebrow { color: #073a47; text-transform: uppercase; letter-spacing: .12em; font-size: .73rem; font-weight: 800; margin-bottom: 18px; }
.mcp-hero { background: #073a47; color: #fff; padding: 82px 0 76px; }
.mcp-hero-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 65px; align-items: center; }
.mcp-hero .mcp-eyebrow { color: #c6d7dc; }
.mcp-lead { font-size: 1.15rem; line-height: 1.65; max-width: 650px; margin: 24px 0; color: #d5e3e4; }
.mcp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 22px; }
.mcp-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 22px; background: #fff; border: 1px solid #fff; color: #073a47; border-radius: 999px; padding: 13px 23px; font-size: .92rem; font-weight: 750; text-decoration: none; }
.mcp-hero :focus-visible, .mcp-code :focus-visible { outline-color: #fff; }
.mcp-button:hover { background: #f1f4f4; }
.mcp-button-outline { color: white; border-color: #ffffff66; background: transparent; }
.mcp-button-outline:hover { background: #164b54; }
.mcp-small { font-size: .84rem; line-height: 1.7; color: #57676b; }
.mcp-hero .mcp-small { color: #b6cdcf; }
.mcp-example { background: #fff; color: #073a47; border-radius: 10px; box-shadow: 0 25px 65px #001e2840; overflow: hidden; }
.mcp-example-top { display: flex; align-items: center; gap: 9px; border-bottom: 1px solid #dbe3e3; padding: 19px 25px; font-size: .76rem; font-weight: 650; }
.mcp-dot { width: 8px; height: 8px; border-radius: 50%; background: #073a47; }
.mcp-example-prompt { padding: 23px 25px 10px; font-size: 1.3rem; line-height: 1.5; font-weight: 650; letter-spacing: -.02em; }
.mcp-example-call { display: flex; align-items: center; gap: 16px; margin: 15px 25px; padding: 14px; border: 1px solid #dbe3e3; border-radius: 5px; }
.mcp-example-call > span { font-size: .73rem; color: #5f6b70; }
.mcp-example-call strong, .mcp-example-call code { display: block; font-size: .82rem; }
.mcp-example-call code { color: #5f6b70; font-size: .73rem; }
.mcp-example .mcp-example-note { margin: 0; padding: 4px 25px 24px; font-size: .73rem; line-height: 1.65; color: #5f6b70; }
.mcp-section { padding: 76px 0; }
.mcp-section-soft { background: #f1f4f4; }
.mcp-intro { color: #5f6b70; max-width: 760px; margin-bottom: 32px; }
.mcp-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.mcp-card { border: 1px solid #dbe3e3; padding: 32px; border-radius: 7px; }
.mcp-badge { display: inline-block; background: #f1f4f4; color: #073a47; padding: 5px 10px; border-radius: 4px; font-size: .73rem; font-weight: 750; }
.mcp-card p, .mcp-card ul { color: #5f6b70; font-size: .94rem; }
.mcp-card ul { padding-left: 19px; list-style: disc; margin: 20px 0 27px; }
.mcp-card li + li { margin-top: 6px; }
.mcp-text-link { color: #073a47; font-weight: 750; text-decoration: underline; }
.mcp-client-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mcp-client { display: flex; flex-direction: column; background: white; border: 1px solid #dbe3e3; border-radius: 6px; padding: 24px; }
.mcp-client h3 { font-size: 1.3rem; margin-top: 10px; }
.mcp-client p { color: #5f6b70; font-size: .86rem; }
.mcp-client .mcp-client-status { font-size: .65rem; font-weight: 750; color: #073a47; text-transform: uppercase; letter-spacing: .04em; }
.mcp-client-links { display: flex; gap: 16px; flex-wrap: wrap; margin-top: auto; padding-top: 25px; font-size: .8rem; font-weight: 750; color: #073a47; }
.mcp-client-links a { text-decoration: underline; }
.mcp-compatibility { margin-top: 22px; }
.mcp-process { counter-reset: mcp-step; list-style: none; padding: 0 0 0 20px; }
.mcp-process li { position: relative; padding: 0 0 25px 50px; counter-increment: mcp-step; }
.mcp-process li::before { content: counter(mcp-step, decimal-leading-zero); position: absolute; left: 0; top: 0; color: #073a47; font-size: .9rem; font-weight: 800; }
.mcp-process p { font-size: .93rem; color: #5f6b70; margin-top: 5px; }
.mcp-faq details { border-bottom: 1px solid #dbe3e3; padding: 17px 0; }
.mcp-page summary { cursor: pointer; font-weight: 700; }
.mcp-faq p { color: #5f6b70; padding-top: 12px; font-size: .93rem; }
.mcp-guide-hero { padding: 43px 0 55px; }
.mcp-back { display: inline-block; font-size: .85rem; color: #c6d7dc; text-decoration: underline; margin-bottom: 26px; }
.mcp-guide-hero .mcp-back:last-child { margin-bottom: 0; }
.mcp-guide-layout { display: grid; grid-template-columns: 215px minmax(0, 1fr); gap: 65px; padding-block: 55px 30px; }
.mcp-guide-nav { align-self: start; position: sticky; top: 95px; border-left: 2px solid #dbe3e3; padding-left: 20px; }
.mcp-guide-nav a { display: block; padding: 6px 0; font-size: .85rem; color: #073a47; }
.mcp-guide-nav a:hover { text-decoration: underline; }
.mcp-guide-content { min-width: 0; max-width: 850px; }
.mcp-guide-content > section { padding-bottom: 42px; margin-bottom: 36px; border-bottom: 1px solid #dbe3e3; }
.mcp-guide-content h2 { font-size: 2rem; }
.mcp-guide-content .mcp-eyebrow { margin-bottom: 10px; }
.mcp-guide-content p { color: #526368; }
.mcp-notice { padding: 20px 23px; border-left: 3px solid #073a47; background: #f1f4f4; border-radius: 0 5px 5px 0; margin: 23px 0; font-size: .93rem; }
.mcp-code { position: relative; background: #073a47; color: #fff; margin: 18px 0 23px; border-radius: 6px; }
.mcp-code pre { padding: 56px 21px 22px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.8; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; }
.mcp-copy { position: absolute; top: 12px; right: 13px; color: #fff; border: 1px solid #ffffff66; border-radius: 4px; font: inherit; font-size: .72rem; padding: 4px 12px; background: #164b54; cursor: pointer; }
.mcp-copy:hover { background: #205561; }
.mcp-copy[hidden] { display: none; }
.mcp-copy-status { min-height: 28px; font-size: .85rem; color: #073a47; margin-bottom: 20px; }
.mcp-config { border: 1px solid #dbe3e3; padding: 16px; border-radius: 6px; margin-block: 20px; }
.mcp-config p { margin-top: 16px; font-size: .9rem; }
.mcp-troubleshooting dt { font-weight: 750; margin-top: 22px; }
.mcp-troubleshooting dd { margin: 5px 0 20px; color: #526368; }
@media (max-width: 1050px) {
  .mcp-hero-grid { gap: 35px; }
  .mcp-client-grid { grid-template-columns: repeat(2, 1fr); }
  .mcp-guide-layout { grid-template-columns: 175px minmax(0, 1fr); gap: 35px; }
}
@media (max-width: 720px) {
  .mcp-container { width: calc(100% - 36px); }
  .mcp-hero { padding-block: 45px; }
  .mcp-hero-grid, .mcp-two-col, .mcp-guide-layout { grid-template-columns: 1fr; }
  .mcp-section { padding-block: 46px; }
  .mcp-guide-layout { gap: 35px; padding-top: 30px; }
  .mcp-guide-nav { position: static; display: flex; flex-wrap: wrap; gap: 4px 17px; }
  .mcp-guide-nav .mcp-eyebrow { width: 100%; margin-bottom: 5px; }
  .mcp-card { padding: 24px; }
  .mcp-process { padding: 0; }
  .mcp-client-grid { grid-template-columns: 1fr; }
  .mcp-actions { flex-direction: column; align-items: stretch; }
}
.mcp-hero:not(.mcp-guide-hero) { padding-block: 64px; }
.mcp-hero:not(.mcp-guide-hero) h1 { font-size: clamp(2.6rem, 4.6vw, 4rem); }
.mcp-hero .mcp-small a, .mcp-final a:not(.mcp-button) { color: #fff; }
.mcp-client-strip img, .mcp-client-logo, .mcp-guide-logo { object-fit: contain; flex-shrink: 0; }
.mcp-client-logo { margin-bottom: 12px; }
.mcp-section-nav { display: flex; flex-wrap: wrap; gap: 10px 25px; padding-block: 24px; border-bottom: 1px solid #dbe3e3; font-size: .8rem; color: #073a47; font-weight: 700; }
.mcp-section-nav a:hover { text-decoration: underline; }
.mcp-prose p { color: #526368; }
.mcp-workflow-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.mcp-card .mcp-prompt { color: #073a47; font-size: 1.05rem; line-height: 1.6; font-weight: 600; margin-bottom: 18px; }
.mcp-brand-note { margin-top: 23px; }
.mcp-table-wrap { overflow-x: auto; border: 1px solid #dbe3e3; border-radius: 7px; }
.mcp-table { width: 100%; border-collapse: collapse; text-align: left; font-size: .9rem; }
.mcp-table caption { text-align: left; padding: 18px 24px; font-weight: 700; color: #073a47; background: #f1f4f4; }
.mcp-table th, .mcp-table td { padding: 18px 24px; border-top: 1px solid #dbe3e3; vertical-align: top; }
.mcp-table thead { color: #073a47; }
.mcp-table tbody th { width: 22%; }
.mcp-table code { display: block; color: #526368; line-height: 1.9; }
.mcp-table-wrap + .mcp-small { margin-top: 20px; }
.mcp-faq-wide { max-width: 900px; }
.mcp-final { background: #073a47; color: #fff; }
.mcp-final .mcp-eyebrow, .mcp-final .mcp-small { color: #c6d7dc; }
.mcp-final :focus-visible { outline-color: #fff; }
.mcp-guide-title { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.mcp-guide-title h2 { margin: 0; }
.mcp-guide-content ul { list-style: disc; padding-left: 22px; margin-block: 18px; color: #526368; }
.mcp-guide-content li + li { margin-top: 8px; }
@media (max-width: 1050px) {
  .mcp-hero:not(.mcp-guide-hero) h1 { font-size: 3.2rem; }
}
@media (max-width: 720px) {
  .mcp-hero:not(.mcp-guide-hero) { padding-block: 44px; }
  .mcp-hero:not(.mcp-guide-hero) h1 { font-size: clamp(2.5rem, 8vw, 3.2rem); }
  .mcp-workflow-grid { grid-template-columns: 1fr; }
  .mcp-table { min-width: 650px; }
  .mcp-table th, .mcp-table td { padding: 14px 18px; }
}
.mcp-client-logo-wide { width: 180px; height: 32px; max-width: 100%; }
.mcp-guide-title:has(.mcp-client-logo-wide) { flex-wrap: wrap; }
.mcp-brand-strip { background: #fff; border-bottom: 1px solid #dbe3e3; padding-block: 8px; }
.mcp-brand-strip .mcp-container { max-width: 820px; padding-block: 16px; }
.mcp-brand-strip section + section .mcp-container { border-top: 1px solid #edf1f2; }
.mcp-brand-row { display: flex; justify-content: center; align-items: center; gap: 16px; }
.mcp-brand-row > a, .mcp-brand-row > div { display: flex; align-items: center; justify-content: center; flex: 0 1 132px; min-width: 0; min-height: 52px; }
.mcp-brand-row img { display: block; object-fit: contain; max-width: 100%; }
.mcp-network-strip img { height: 44px; }
.mcp-voucher-strip img { height: 42px; }
.mcp-brand-row .mcp-voucher-shoprite { object-fit: cover; }
.mcp-client-strip .mcp-brand-row > a { flex-basis: 84px; border-radius: 6px; }
.mcp-client-strip .mcp-brand-row img { width: 44px; height: 44px; }
.mcp-client-strip .mcp-brand-row > .mcp-client-copilot { flex-basis: 156px; }
.mcp-client-strip .mcp-client-copilot img { width: 150px; }
.mcp-client-strip .mcp-client-antigravity img { width: 56px; height: 56px; }
.mcp-client-strip a:hover { background: #f3f6f7; }
.mcp-logo-dots { display: none; }
@media (min-width: 721px) {
  .mcp-brand-strip .mcp-container { max-width: none; }
  .mcp-brand-row { justify-content: space-between; }
  .mcp-brand-row > a, .mcp-brand-row > div { min-height: 72px; }
  .mcp-client-strip .mcp-brand-row > a { flex-basis: 80px; }
  .mcp-client-strip .mcp-brand-row img { width: 56px; height: 56px; }
  .mcp-client-strip .mcp-client-copilot img { width: 156px; }
  .mcp-client-strip .mcp-client-antigravity img { width: 72px; height: 72px; }
  .mcp-client-strip .mcp-client-n8n img { width: 75px; }
  .mcp-network-strip .mcp-brand-row > div, .mcp-voucher-strip .mcp-brand-row > div { flex-basis: 190px; }
  .mcp-brand-row .mcp-network-vodacom { display: none; }
  .mcp-network-strip img { width: 170px; height: 60px; }
  .mcp-voucher-strip img { width: 180px; height: 56px; }
  .mcp-voucher-strip img[alt="Woolworths"] { width: 190px; }
}
@media (max-width: 720px) {
  .mcp-brand-row .mcp-desktop-logo { display: none; }
  .mcp-brand-strip .mcp-container { padding-block: 12px; }
  .mcp-brand-row { justify-content: flex-start; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .mcp-brand-row::-webkit-scrollbar { display: none; }
  .mcp-brand-row > div, .mcp-client-strip .mcp-brand-row > a, .mcp-client-strip .mcp-brand-row > .mcp-client-copilot { flex: 0 0 calc((100% - 24px) / 3); min-height: 48px; scroll-snap-align: start; }
  .mcp-client-strip .mcp-brand-row img { width: 36px; height: 36px; }
  .mcp-client-strip .mcp-client-copilot img { width: 100%; }
  .mcp-client-strip .mcp-client-antigravity img { width: 46px; height: 46px; }
  .mcp-network-strip img:not(.mcp-network-vodacom), .mcp-voucher-strip img { width: 90%; max-height: 36px; }
  .mcp-network-vodacom { width: 36px; height: 36px; }
  .mcp-logo-dots { display: flex; justify-content: center; gap: 2px; margin-top: 4px; }
  .mcp-logo-dots[hidden] { display: none; }
  .mcp-logo-dots button { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; padding: 0; background: transparent; border-radius: 50%; cursor: pointer; }
  .mcp-logo-dots button::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #c6d3d7; }
  .mcp-logo-dots button[aria-current="true"]::before { background: #073a47; }
}
.mcp-faq-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.mcp-faq-columns .mcp-faq { min-width: 0; }
.mcp-architecture, .mcp-agent-flow { margin: 34px 0 0; border: 1px solid #dbe3e3; border-radius: 10px; padding: 32px; background: #fff; }
.mcp-auth-lane { display: flex; gap: 16px; align-items: center; max-width: 760px; margin: 0 auto 32px; padding: 18px 22px; border: 1px dashed #b5c8ce; border-radius: 6px; background: #f7f9fa; }
.mcp-auth-lane > span { font-size: 1.45rem; }
.mcp-auth-lane p { font-size: .83rem; line-height: 1.65; color: #526368; margin: 4px 0 0; }
.mcp-architecture-nodes, .mcp-agent-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; list-style: none; padding: 0; margin: 0; }
.mcp-architecture-nodes > li, .mcp-agent-stages > li { position: relative; border: 1px solid #cad8dc; border-radius: 7px; padding: 24px; background: #f7f9fa; }
.mcp-architecture-nodes > li:not(:last-child)::after, .mcp-agent-stages > li:not(:last-child)::after { content: '→'; position: absolute; left: calc(100% + 9px); top: calc(50% - 20px); color: #073a47; font-size: 1.6rem; font-weight: 700; }
.mcp-flow-number { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #dfe9ec; color: #073a47; font-size: .75rem; font-weight: 800; margin-bottom: 16px; }
.mcp-architecture-nodes h3 { font-size: 1.3rem; margin: 0 0 12px; }
.mcp-architecture-nodes p, .mcp-agent-stages p { color: #526368; font-size: .87rem; line-height: 1.65; }
.mcp-flow-tag { font-size: .72rem; font-weight: 700; border-top: 1px solid #cad8dc; margin-top: 20px; padding-top: 14px; color: #073a47; }
.mcp-architecture-nodes .mcp-flow-server { background: #073a47; color: #fff; border-color: #073a47; }
.mcp-flow-server p, .mcp-flow-server .mcp-flow-tag { color: #d5e3e4; }
.mcp-flow-server .mcp-flow-tag { border-color: #ffffff40; }
.mcp-return-path { display: flex; align-items: center; gap: 18px; justify-content: center; margin-top: 28px; border-bottom: 1px dashed #b5c8ce; padding: 10px 0 20px; }
.mcp-return-path > span { color: #073a47; font-size: 1.6rem; }
.mcp-return-path p { font-size: .85rem; color: #526368; }
.mcp-architecture figcaption, .mcp-agent-flow figcaption { margin-top: 22px; font-size: .8rem; line-height: 1.7; color: #526368; }
.mcp-agent-flow { background: #f1f4f4; }
.mcp-agent-stages { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 26px; }
.mcp-agent-stages > li { padding: 18px; background: white; }
.mcp-agent-stages > li:not(:last-child)::after { left: calc(100% + 3px); font-size: 1.3rem; }
.mcp-agent-stages strong { display: block; font-size: .95rem; line-height: 1.4; margin-bottom: 12px; }
.mcp-agent-stages p { font-size: .78rem; }
.mcp-agent-stages .mcp-agent-approval { border: 2px solid #073a47; }
.mcp-agent-approval .mcp-flow-number { background: #073a47; color: white; }
.mcp-flow-outcomes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin-top: 26px; padding-top: 24px; border-top: 1px dashed #b5c8ce; }
.mcp-flow-outcomes p { font-size: .8rem; color: #526368; }
.mcp-flow-outcomes strong { color: #073a47; }
.mcp-agent-notes { margin-top: 28px; }
.mcp-agent-reference { margin-top: 24px; }
@media (max-width: 1050px) {
  .mcp-agent-stages { grid-template-columns: 1fr; gap: 30px; }
  .mcp-agent-stages > li:not(:last-child)::after { left: calc(50% - 8px); top: calc(100% + 1px); transform: rotate(90deg); }
  .mcp-agent-stages > li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0 15px; }
  .mcp-agent-stages .mcp-flow-number { grid-row: span 2; margin-bottom: 0; }
  .mcp-agent-stages strong { margin-bottom: 4px; }
}
@media (max-width: 720px) {
  .mcp-faq-columns { grid-template-columns: 1fr; gap: 0; }
  .mcp-architecture, .mcp-agent-flow { padding: 22px; }
  .mcp-auth-lane { padding: 16px; align-items: flex-start; }
  .mcp-architecture-nodes { grid-template-columns: 1fr; gap: 32px; }
  .mcp-architecture-nodes > li:not(:last-child)::after { left: calc(50% - 10px); top: calc(100% - 4px); transform: rotate(90deg); }
  .mcp-flow-outcomes { grid-template-columns: 1fr; gap: 16px; }
}
.mcp-page section[id], .mcp-client[id] { scroll-margin-top: 120px; }
.mcp-page .mcp-flow-outcomes p { margin: 0; }
@media (max-width: 720px) {
  .mcp-page section[id], .mcp-client[id] { scroll-margin-top: 140px; }
}
.mcp-client .mcp-client-logo-wide { height: 48px; }