/* MJZ warm-neutral canvas with approved graphite / white inverse interactions.
   Loaded after site.css: preserves the existing layouts and interactions while
   replacing the former continuous blue-tinted canvas with alternating surfaces. */
:root {
  --brand-white: #ffffff;
  --brand-warm: #f5f5f3;
  --brand-ink: #202525;
  --brand-button: #202525;
  --brand-muted: #696d6d;
  --brand-rule: #dcdedb;
  /* Logo assets retain their original color; interactive UI uses mist silver. */
  --brand-accent: #454a4b;
  --brand-accent-hover: #202525;
  --brand-accent-soft: #ededeb;
  --brand-accent-line: #c9cdcd;
  --brand-shadow: 0 12px 32px rgba(32, 37, 37, .055);
  --brand-radius: 20px;
  --site-surface: var(--brand-white);
  --site-section-rule: var(--brand-rule);
  --ink: #202525;
  --ink-soft: #414646;
  --navy: var(--brand-accent);
  --navy-2: var(--brand-accent-hover);
  --paper: var(--brand-warm);
  --paper-2: #eeefeb;
  --text: var(--brand-ink);
  --muted: var(--brand-muted);
  --muted-dark: var(--brand-muted);
  --cyan: #8b9090;
  --blue: var(--brand-accent);
  --violet: #747979;
  --ice: var(--brand-accent-soft);
  --line: var(--brand-rule);
  --line-dark: var(--brand-rule);
}

html,
body[data-page],
body[data-page] main { background-color: var(--brand-white) !important; }
body[data-page] { min-width: 0; color: var(--brand-ink); }
body[data-page] ::selection { color: var(--brand-ink); background: var(--brand-accent-soft); }

/* Only top-level modules alternate; nested cards and policy sections do not. */
body[data-page] main > section:nth-of-type(odd) {
  color: var(--brand-ink);
  background-color: var(--brand-warm) !important;
  background-image: none !important;
}
body[data-page] main > section:nth-of-type(even) {
  color: var(--brand-ink);
  background-color: var(--brand-white) !important;
  background-image: none !important;
}
body[data-page] main > section + section,
body[data-page] main > astro-island + section { border-top-color: var(--brand-rule); }
body[data-page='home'] main > .home-risk-compliance { background-color: var(--brand-warm) !important; }
body[data-page='home'] main > .home-collaboration { background-color: var(--brand-white) !important; }
body[data-page='home'] main > .home-collaboration .collaboration-flow li::after { background-color: var(--brand-white); }
body[data-page='home'] main > .home-closing { background-color: var(--brand-warm) !important; }

body[data-page] main > .section-pad { padding-block: clamp(76px, 6vw, 96px); }
body[data-page] .privacy-layout { padding-block: clamp(76px, 6vw, 96px); }
body[data-page] :is(.home-closing, .page-closing) {
  min-height: 440px;
  padding-block: clamp(76px, 7vw, 108px);
}
body[data-page] .section-heading { margin-bottom: 48px; }
body[data-page] :is(.journey-console, .direction-roadmap, .future-grid) { margin-top: 56px; }
body[data-page] :is(.home-closing, .page-closing) h2 { line-height: 1.15; }
body[data-page] .page-closing .button { width: max-content; max-width: 100%; }

/* Quiet typography. Type sizes and the first module's layout stay intact. */
body[data-page] :is(.section-light, .section-dark, .top-surface-light) { color: var(--brand-ink); }
body[data-page] :is(.site-display-title, .page-hero-copy h1, .contact-intro h1,
  .privacy-hero-copy h1, .home-closing h2, .product-tab-intro h3) { color: var(--brand-ink); }
body[data-page] :is(.site-display-title, .page-hero-copy h1, .contact-intro h1) em {
  color: var(--brand-muted);
  background: none;
  -webkit-text-fill-color: currentColor;
}
body[data-page] :is(.eyebrow, .detail-index, .detail-label, .site-heading-subtitle,
  .page-hero-copy > p:last-child, .contact-intro > p:not(.eyebrow),
  .privacy-hero-copy > p:last-child, .section-heading > p:last-child,
  .home-closing-actions p, .solution-intro > p, .future-heading > p,
  .story-copy p, .doc-request-lede, .privacy-content p) { color: var(--brand-muted); }
body[data-page] :is(.text-link, .contact-email, .journey-result a, .privacy-content a) { color: var(--brand-accent); }
body[data-page] :is(.text-link, .contact-email, .journey-result a, .privacy-content a):is(:hover, :focus-visible) { color: var(--brand-accent-hover); }
body[data-page] :is(.text-link i, .contact-email i) { color: var(--brand-accent); }
body[data-page] .top-surface-light::after { background: var(--brand-rule); }
body[data-page] .top-surface-light #network-canvas { opacity: .2; }
/* Legacy ambient layers are decorative, not brand assets: keep them silver too. */
body[data-page] :is(.soft-aurora, .vault-atmosphere) { filter: grayscale(1); }
body[data-page] .contact-glow { background: radial-gradient(ellipse, rgba(130, 134, 134, .1), transparent 70%); }
body[data-page] .progress span { background: var(--brand-accent); }
body[data-page] .home-closing.section-light .home-closing-actions p:hover {
  color: var(--brand-muted);
  text-shadow: none;
  transform: none;
}

/* Existing inner-page navigation remains in place, with the same neutral finish. */
body[data-page] .site-header.site-header-light {
  color: var(--brand-ink);
  background: rgba(255, 255, 255, .96);
  border-color: var(--brand-rule);
  box-shadow: none;
}
body[data-page] .site-header.site-header-light.is-scrolled { box-shadow: 0 4px 18px rgba(32, 37, 37, .035); }
body[data-page] .site-header-light :is(.site-nav a, .header-docs, .language) { color: var(--brand-muted); }
body[data-page] .site-header-light :is(.site-nav a, .header-docs):is(:hover, :focus-visible, .is-active, [aria-current='page']) { color: var(--brand-ink); }
body[data-page] .site-header-light :is(.site-nav a, .header-docs)::after { background: var(--brand-ink); }
body[data-page] .header-tools { gap: 18px; }
body[data-page] .site-header-light .language { border-color: var(--brand-rule); }

/* Black button bodies invert to white; text links retain readable graphite. */
body[data-page] .button {
  min-height: 48px;
  border-radius: 999px;
  padding-inline: 24px 20px;
  letter-spacing: 0;
}
body[data-page] :is(.button-primary, .button-dark) {
  color: #fff;
  border-color: var(--brand-button);
  background: var(--brand-button);
  /* One reversible fade, including on reveal / magnetic buttons. The legacy
     sliding overlay otherwise hides the hover-in background transition. */
  transition: background-color .35s ease, color .35s ease, border-color .35s ease,
    opacity .85s var(--ease), transform .28s var(--spring);
}
body[data-page] :is(.button-primary, .button-dark)::before { background: var(--brand-white); content: none; }
body[data-page] :is(.button-primary, .button-dark):is(:hover, :focus-visible) { color: var(--brand-button); border-color: var(--brand-button); background: var(--brand-white); }
body[data-page] .button-quiet { color: var(--brand-accent); border-color: var(--brand-rule); background: #fff; }
body[data-page] .button-quiet::before { background: var(--brand-button); }
body[data-page] .button-quiet:is(:hover, :focus-visible) { color: var(--brand-white); border-color: var(--brand-button); background: var(--brand-button); }
body[data-page] :is(a, button, summary):focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 4px; }

/* Products: preserve the floating-tab choreography, soften the physical frame. */
body[data-page] .capabilities.section-light .capability-console {
  min-height: 480px;
  color: var(--brand-ink);
  border-color: var(--brand-rule);
  border-radius: var(--brand-radius);
  background: #fff;
  box-shadow: var(--brand-shadow);
  overflow: hidden;
}
body[data-page] .capabilities.section-light .capability-row {
  color: var(--brand-muted);
  border-color: var(--brand-rule);
  background: #fff;
}
body[data-page] .capabilities.section-light .capability-row::after { background: var(--brand-accent-soft); }
body[data-page] .capabilities.section-light .capability-row:is(:hover, :focus-visible, .is-active) { color: var(--brand-accent); }
body[data-page] .capabilities.section-light .capability-detail {
  color: var(--brand-ink);
  border-color: var(--brand-rule);
  background: var(--brand-warm);
}
body[data-page] .capabilities.section-light :is(.capability-row span, .detail-index, .detail-label, .capability-detail > p:not(.detail-label)) { color: var(--brand-muted); }
body[data-page] .product-tab {
  min-height: 50px;
  color: var(--brand-muted);
  border-color: var(--brand-rule);
  background: #fff;
  box-shadow: none;
}
body[data-page] .product-tab:is(:hover, :focus-visible) { color: var(--brand-white); border-color: var(--brand-button); background: var(--brand-button); box-shadow: none; }
body[data-page] .product-tab.is-active { color: #fff; }
body[data-page] .product-tab-active { background: var(--brand-button); box-shadow: none; }
body[data-page] .product-tab.is-active:is(:hover, :focus-visible) { color: var(--brand-button); border-color: var(--brand-button); background: var(--brand-white); }
body[data-page] .product-tab.is-active:is(:hover, :focus-visible) .product-tab-active { background: var(--brand-white); }
body[data-page] .product-tab-panel {
  min-height: 500px;
  border-color: var(--brand-rule);
  border-radius: var(--brand-radius);
  background: #fff;
  box-shadow: var(--brand-shadow);
}
body[data-page] .product-tab-stage::before,
body[data-page] .product-tab-stage::after { border-color: var(--brand-rule); background: #eeefeb; box-shadow: 0 12px 28px rgba(32, 37, 37, .035); }
body[data-page] :is(.product-tab-intro, .product-tab-details) { padding: clamp(32px, 3.5vw, 52px); border-color: var(--brand-rule); }
body[data-page] .product-tab-intro h3 { margin-top: 34px; }
body[data-page] .product-tab-details { background: #fafaf8; }
body[data-page] :is(.product-tab-status, .product-tab-details div) { border-color: var(--brand-rule); }
body[data-page] :is(.product-tab-status, .product-tab-intro > p, .product-tab-details dt, .product-tab-details dd) { color: var(--brand-muted); }
body[data-page] :is(.product-tab-modes span, .detail-tags span, .contact-topics span, .request-context span) {
  color: var(--brand-muted);
  border-color: var(--brand-rule);
  border-radius: 6px;
  background: rgba(255, 255, 255, .75);
}

/* Solution journeys and case studies: operational states retain their meaning. */
body[data-page] .philippines-detail.section-light .journey-console {
  color: var(--brand-ink);
  border-color: var(--brand-rule);
  border-radius: var(--brand-radius);
  background: #fff;
  box-shadow: var(--brand-shadow);
}
body[data-page] .philippines-detail.section-light :is(.journey-header, .journey-step, .journey-result, .journey-toggle, .journey-toggle button) { border-color: var(--brand-rule); }
/* Round the individual choices as well as the group. The inset leaves room
   for keyboard focus without clipping it against the outer pill. */
body[data-page] .journey-toggle { gap: 4px; padding: 4px; border-radius: 999px; overflow: visible; }
body[data-page] .philippines-detail.section-light .journey-toggle button { color: var(--brand-muted); min-height: 44px; border: 0; border-radius: 999px; }
body[data-page] .philippines-detail.section-light .journey-toggle button.is-active { color: #fff; background: var(--brand-button); }
body[data-page] .philippines-detail.section-light .journey-toggle button:is(:hover, :focus-visible) { color: #fff; background: var(--brand-button); }
body[data-page] .philippines-detail.section-light .journey-toggle button.is-active:is(:hover, :focus-visible) { color: var(--brand-button); background: var(--brand-white); box-shadow: inset 0 0 0 1px var(--brand-button); }
body[data-page] .philippines-detail.section-light .journey-toggle button:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }
body[data-page] .philippines-detail.section-light .journey-line { background: var(--brand-rule); }
body[data-page] .philippines-detail.section-light .journey-step > span { color: var(--brand-muted); border-color: var(--brand-accent-line); background: #fff; }
body[data-page] .philippines-detail.section-light .journey-step.is-live > span { color: var(--brand-ink); border-color: var(--brand-accent); box-shadow: 0 0 0 5px var(--brand-accent-soft); }
body[data-page] .philippines-detail.section-light :is(.journey-step small, .journey-step p, .journey-result p) { color: var(--brand-muted); }
body[data-page] .bank-answer { border-color: var(--brand-rule); border-radius: var(--brand-radius); overflow: hidden; background: #fff; }
body[data-page] :is(.bank-question, .bank-compare article) { border-color: var(--brand-rule); background: #fff; }
body[data-page] .bank-compare article:last-child { background: #eeefeb; }
body[data-page] .bank-compare article:last-child b { color: var(--brand-ink); }
body[data-page] :is(.bank-question > p:last-child, .bank-question .case-copy p, .bank-compare article span, .bank-compare article p) { color: var(--brand-muted); }

/* Accordions still open, close and signal focus; remove only colored decoration. */
body[data-page] .faq-atmosphere { opacity: .2; filter: grayscale(1); }
body[data-page] .question-list[data-faq] .faq-item {
  border-color: var(--brand-rule);
  border-radius: 14px;
  background: #fff;
  box-shadow: none;
}
body[data-page] .question-list[data-faq] .faq-item:is(:hover, :focus-within, .is-open) { border-color: var(--brand-accent-line); background: #fff; box-shadow: var(--brand-shadow); }
body[data-page] .question-list[data-faq] .faq-item::before { background: var(--brand-accent); }
body[data-page] .question-list[data-faq] .faq-item::after { background: linear-gradient(90deg, transparent, var(--brand-accent-line), transparent); }
body[data-page] .solution-questions[data-faq-section] .section-heading::after { background: linear-gradient(90deg, var(--brand-accent-line), #dcdedb 65%, transparent 92%); }
body[data-page] :is(.faq-trigger, .faq-question) { color: var(--brand-ink); }
body[data-page] :is(.faq-index, .faq-item:hover .faq-index, .question-list[data-faq] .faq-panel p) { color: var(--brand-muted); }
body[data-page] .faq-toggle { border-color: var(--brand-rule); }
body[data-page] .faq-toggle i { background: var(--brand-accent); }
body[data-page] .faq-item.is-open .faq-toggle { border-color: var(--brand-accent-line); background: var(--brand-accent-soft); }

/* About: natural image color is retained, framing follows the warm palette. */
body[data-page] .about-stack-canvas { color: var(--brand-ink); border: 1px solid var(--brand-rule); border-radius: var(--brand-radius); background: #eeefeb; box-shadow: var(--brand-shadow); }
body[data-page] .about-partnership-stack:hover .about-stack-canvas { box-shadow: 0 20px 48px rgba(32, 37, 37, .09); }
body[data-page] .about-stack-stage { border-radius: 10px; background: #e4e7df; box-shadow: 0 10px 24px rgba(32, 37, 37, .07); }
body[data-page] :is(.about-stack-header, .about-stack-canvas figcaption, .about-stack-canvas figcaption b, .story-index > span) { color: var(--brand-muted); border-color: var(--brand-rule); }
body[data-page] .direction.section-light :is(.direction-roadmap, .direction-roadmap article) { border-color: var(--brand-rule); }
body[data-page] .direction.section-light :is(.direction-roadmap article > span, .direction-roadmap small, .direction-roadmap p) { color: var(--brand-muted); }
body[data-page] .direction.section-light .direction-roadmap h3 { color: var(--brand-ink); }
body[data-page] .direction-panel { border: 0; background: transparent; }
body[data-page] .direction-toggle { border-color: var(--brand-rule); }
body[data-page] .direction-toggle::before,
body[data-page] .direction-toggle::after { background: var(--brand-accent); }
body[data-page] .future-projects.section-light .future-grid { border-color: var(--brand-rule); border-radius: var(--brand-radius); overflow: hidden; }
body[data-page] .future-projects.section-light .future-grid article { min-height: 400px; border-color: var(--brand-rule); background: #fff; padding: clamp(30px, 3vw, 48px); }
body[data-page] .future-projects.section-light .future-grid article:hover { border-color: var(--brand-accent-line); background: #fafaf8; }
body[data-page] .future-projects.section-light .future-grid b { color: var(--brand-ink); }
body[data-page] .future-projects.section-light :is(.future-grid span, .future-grid article > p, .future-grid small) { color: var(--brand-muted); border-color: var(--brand-rule); }
body[data-page] .future-grid article > p { margin-top: 30px; }

/* Documentation and contact: keep syntax, validation and success colors distinct. */
body[data-page] .top-surface-light :is(.docs-terminal, .contact-form-card) {
  border-color: var(--brand-rule);
  border-radius: var(--brand-radius);
  background: #fff;
  box-shadow: var(--brand-shadow);
  overflow: hidden;
}
body[data-page] .top-surface-light :is(.docs-terminal > div, .docs-terminal p, .form-card-head) { color: var(--brand-muted); border-color: var(--brand-rule); }
body[data-page] .top-surface-light .docs-terminal p { color: var(--brand-ink); }
body[data-page] .docs-terminal .code-token-function { color: #2969ae; }
body[data-page] .docs-terminal .code-token-comment { color: #527789; }
body[data-page] .top-surface-light :is(.docs-terminal small, .contact-form-card label > span, .form-submit p) { color: var(--brand-muted); }
body[data-page] :is(.docs-terminal > div i, .form-card-head i) { color: #3d775b; }
body[data-page] .access-grid { border-color: var(--brand-rule); border-radius: var(--brand-radius); overflow: hidden; }
body[data-page] .access-grid article { min-height: 300px; border-color: var(--brand-rule); background: var(--brand-warm); }
body[data-page] .access-grid article:hover { color: var(--brand-accent); background: var(--brand-accent-soft); transform: translateY(-3px); }
body[data-page] .access-grid h3 { margin-top: 100px; }
body[data-page] .access-grid :is(article > span, p),
body[data-page] .access-grid article:hover p { color: var(--brand-muted); }
body[data-page] .access-grid svg { stroke: var(--brand-accent); }
body[data-page] .doc-request.section-light :is(.doc-package-list, .doc-package-list > span) { color: var(--brand-muted); border-color: var(--brand-rule); }
body[data-page] .doc-request.section-light .doc-package-list > span b { color: var(--brand-accent); }
body[data-page] .doc-package-list[data-doc-index]::before { background: linear-gradient(180deg, transparent, var(--brand-accent-line), transparent); }
body[data-page] .doc-package-list[data-doc-index] > span::after { background: linear-gradient(90deg, var(--brand-accent), transparent); }
body[data-page] .top-surface-light .contact-form-card :is(input, select, textarea) { color: var(--brand-ink); border-color: var(--brand-accent-line); }
body[data-page] .top-surface-light .contact-form-card :is(input, select, textarea):focus { outline: 2px solid var(--brand-accent); outline-offset: 3px; border-color: var(--brand-accent); background-color: #fafaf8; }
body[data-page] .top-surface-light .contact-form-card :is(input, textarea)::placeholder { color: var(--brand-muted); }
body[data-page] .form-submit [data-form-status] a { color: var(--brand-accent); }
/* Status feedback must win over the neutral form-copy rule above. */
body[data-page] .top-surface-light .contact-form-card form.is-error [data-form-status] { color: #b34536; }
body[data-page] .top-surface-light .contact-form-card form.is-submitted [data-form-status] { color: #26725c; }

body[data-page] :is(.privacy-meta, .privacy-meta div, .privacy-index, .privacy-index > p,
  .privacy-index a, .privacy-content, .privacy-content > section) { border-color: var(--brand-rule); }
body[data-page] :is(.privacy-meta dt, .privacy-meta dd, .privacy-index a, .privacy-index a b, .privacy-content > section > span) { color: var(--brand-muted); }
body[data-page] .privacy-index a:is(:hover, :focus-visible, [aria-current]) { color: var(--brand-accent); }
body[data-page] .privacy-content h2 { color: var(--brand-ink); }
body[data-page] .site-footer { color: var(--brand-muted); border-color: var(--brand-rule); background-color: var(--brand-warm) !important; }
body[data-page] main:has(> section:last-of-type:nth-of-type(odd)) + .site-footer { background-color: var(--brand-white) !important; }
body[data-page] .footer-policy { color: var(--brand-muted); }
body[data-page] .footer-policy:is(:hover, :focus-visible, .is-active) { color: var(--brand-accent); }

@media (hover: hover) and (pointer: fine) {
  body[data-page] .site-display-title.is-pointer-hovered,
  body[data-page] .home-closing.section-light h2.is-pointer-hovered {
    color: var(--brand-ink) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor;
    text-shadow: none;
  }
  body[data-page] .site-display-title.is-pointer-hovered em { color: inherit !important; background: none !important; -webkit-text-fill-color: currentColor; }
  body[data-page] .site-heading-subtitle.is-pointer-hovered { color: var(--brand-ink) !important; text-shadow: none; }
  body[data-page] .doc-package-list[data-doc-index] > span:hover { color: var(--brand-accent); background: var(--brand-accent-soft); }
}

@media (max-width: 820px) {
  body[data-page] main > .section-pad,
  body[data-page] .privacy-layout { padding-block: 60px; }
  body[data-page] :is(.home-closing, .page-closing) { min-height: 340px; padding-block: 64px; }
  body[data-page] .section-heading { margin-bottom: 36px; }
  body[data-page] :is(.journey-console, .direction-roadmap, .future-grid) { margin-top: 36px; }
  body[data-page] .site-header-light .site-nav { width: 100%; border-color: var(--brand-rule); background: #fff; }
  body[data-page] .site-header-light .site-nav a { border-color: var(--brand-rule); }
  body[data-page] .site-header-light .menu-toggle { border-radius: 999px; border-color: var(--brand-accent); background: var(--brand-accent); }
  body[data-page] .site-header-light .menu-toggle span { background: #fff; }
  body[data-page] .header-tools { gap: 6px; }
  body[data-page] .product-tab-panel { min-height: 0; }
  body[data-page] :is(.product-tab-intro, .product-tab-details) { padding: 30px 24px; }
  body[data-page] .product-tab-intro h3 { margin-top: 28px; }
  body[data-page] .access-grid article { min-height: 250px; }
  body[data-page] .access-grid h3 { margin-top: 80px; }
  body[data-page] .future-projects.section-light .future-grid article { min-height: 0; }
}

@media (max-width: 540px) {
  body[data-page] main > .section-pad,
  body[data-page] .privacy-layout { padding-block: 48px; }
  body[data-page] :is(.home-closing, .page-closing) { min-height: 300px; padding-block: 56px; }
  body[data-page] .home-closing-actions { margin-top: 30px; gap: 28px; }
  body[data-page] .home-closing h2 { white-space: normal; }
  body[data-page] .capabilities.section-light .capability-detail { min-height: 360px; padding: 30px 24px; }
}

@media (max-width: 360px) {
  /* Keep both Docs and the 44px language target on narrow inner-page headers. */
  body[data-page]:not([data-page='home']) .site-header.site-header-light { padding-inline: 14px; gap: 8px; }
  body[data-page]:not([data-page='home']) .site-header .brand-image img { width: 116px; }
}

@media (forced-colors: active) {
  body[data-page] .button,
  body[data-page] .product-tab,
  body[data-page] .philippines-detail.section-light .journey-toggle button { border: 1px solid ButtonText; }
  body[data-page] .philippines-detail.section-light .journey-toggle button.is-active { border-color: Highlight; }
  body[data-page] .product-tab.is-active { outline: 2px solid Highlight; }
}