/* Shared layout system. Real reflow, not viewport-dependent body zoom.
   Canvas stays full width; every content module shares the same alignment. */
:root {
  --content: 1600px;
  --layout-gutter: clamp(20px, 4vw, 80px);
  --layout-inset: max(var(--layout-gutter), calc((100% - var(--content)) / 2));
  --pad: var(--layout-gutter);
  --section-space: clamp(64px, 6vw, 112px);
  --section-gap: clamp(28px, 3vw, 56px);
  /* Shared page rhythm: a full first screen, two content densities, a short close.
     These are minimums, never fixed heights: translated/expanded content can grow. */
  --hero-min-height: 100vh;
  --hero-top-space: clamp(140px, 10vw, 180px);
  --section-min-height: clamp(640px, 72vh, 960px);
  --section-detail-min-height: clamp(760px, 88vh, 1160px);
  --closing-min-height: clamp(320px, 38vh, 520px);
  --section-heading-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  --editorial-columns: minmax(0, .42fr) minmax(0, 1fr);
  --title-section: clamp(30px, 3.3vw, 56px);
  --copy-size: clamp(15px, 1.05vw, 18px);
  --hero-title: clamp(36px, 4.1vw, 72px);
}
@supports (height: 100svh) {
  :root {
    --hero-min-height: 100svh;
    --section-min-height: clamp(640px, 72svh, 960px);
    --section-detail-min-height: clamp(760px, 88svh, 1160px);
    --closing-min-height: clamp(320px, 38svh, 520px);
  }
}

body[data-page] { overflow-wrap: break-word; }
body[data-page] main > .section-pad {
  padding: var(--section-space) var(--layout-inset);
}
/* Only section shells get a shared footprint. Cards, text, controls and media
   keep their natural dimensions; grid content is centered as a whole group. */
body[data-page] main > :is(.section-pad, .home-product-overview),
body[data-page='home'] .hps-system-section {
  min-height: var(--section-min-height);
  align-content: center;
}
body[data-page] main > :is(.section-pad:not(.company-story), .home-product-overview),
body[data-page='home'] .hps-system-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
body[data-page] main > :is(.products, .philippines-detail, .case-study-only, .solution-questions, .home-product-overview) {
  min-height: var(--section-detail-min-height);
}
body[data-page] main > .home-product-overview { padding-block: var(--section-space); }
body[data-page] .section-pad > * { min-width: 0; }
body[data-page] :is(.page-hero, .contact-page, .privacy-hero) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 88px);
  min-height: var(--hero-min-height);
  height: auto;
  padding: var(--hero-top-space) var(--layout-inset) var(--section-space);
  align-content: center;
  align-items: center;
}
body[data-page] :is(.page-hero, .contact-page, .privacy-hero) > :not(canvas):not(.hero-grid) { min-width: 0; }
body[data-page] :is(.page-hero-copy, .contact-intro, .privacy-hero-copy) { max-width: 100%; }
body[data-page] :is(.page-hero-copy, .contact-intro, .privacy-hero-copy) h1 {
  font-size: var(--hero-title) !important;
  line-height: 1.13 !important;
  letter-spacing: -.045em !important;
  overflow-wrap: normal;
  white-space: normal;
}
body[data-page] :is(.page-hero-copy > p:last-child, .contact-intro > p:not(.eyebrow), .privacy-hero-copy > p:last-child) {
  max-width: 38em;
  margin-top: 28px;
  font-size: var(--copy-size);
  line-height: 1.8;
}
body[data-page] .eyebrow { font-size: clamp(10px, .75vw, 12px); line-height: 1.7; }
body[data-page] :is(.section-heading, .compact-heading, .future-heading, .doc-request-grid) {
  gap: var(--section-gap);
}
body[data-page] .section-heading {
  grid-template-columns: var(--section-heading-columns);
  margin-bottom: var(--section-gap);
}
body[data-page] :is(.section-heading, .compact-heading, .story-heading, .future-heading, .doc-request-grid) h2,
body[data-page] :is(.home-closing, .page-closing) h2 {
  line-height: 1.18;
  letter-spacing: -.035em;
  white-space: normal;
}
/* One type treatment for peer section headings in both languages. Hero and
   card titles are intentionally outside this scope. */
body[data-page] :is(
  .section-heading, .compact-heading, .story-heading, .future-heading,
  .doc-request-grid, .home-closing, .page-closing, .hps-section-intro,
  .home-product-overview-heading, .home-risk-heading, .collaboration-heading,
  .shared-foundation-heading, .solution-intro-editorial, .solution-case-heading,
  .company-principles-heading, .privacy-content
) h2 {
  font-size: var(--title-section) !important;
  font-family: var(--sans);
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: -.035em !important;
  color: var(--brand-ink, #202525) !important;
}
body[data-page] main h2[data-continuous-title] {
  max-width: 100% !important;
  white-space: normal;
  text-wrap: wrap;
}
body[data-page] main h2[data-continuous-title] :is(span, em) {
  display: inline;
  color: inherit !important;
  font: inherit;
  -webkit-text-fill-color: currentColor;
}
body[data-page] :is(.section-heading > p:last-child, .future-heading > p, .doc-request-lede) {
  font-size: var(--copy-size);
  line-height: 1.85;
}
body[data-page] :is(.home-closing, .page-closing) {
  min-height: var(--closing-min-height);
  padding: var(--section-space) var(--layout-inset);
}
body[data-page] :is(.home-closing, .page-closing) > :not(.contact-glow):not(.soft-aurora) { max-width: var(--content); }
body[data-page] .home-closing-actions { grid-template-columns: minmax(0, 1fr); margin-top: 32px; gap: var(--section-gap); }
body[data-page] .home-closing-actions .button { justify-self: end; }
body[data-page] .page-closing h2 { max-width: 24ch !important; }
body[data-page] .page-closing .button { margin-top: 32px; }
/* A bounded reading measure must not re-center an otherwise left-aligned CTA. */
body[data-page] .page-closing { align-items: flex-start; text-align: left; }
body[data-page] .page-closing > :is(.eyebrow, h2, .button) { margin-inline: 0; }
body[data-page] .page-closing[data-closing-action="right"] > .button {
  align-self: flex-end;
  margin-inline-start: auto;
  margin-inline-end: 0;
  max-width: 100%;
}

/* The globe and company artwork are bounded by their columns, not the screen. */
body[data-page] .solution-world-map { width: min(100%, 580px); margin: 0; justify-self: center; }
body[data-page] .about-compute-visual {
  width: min(100%, 640px);
  max-height: 580px;
  aspect-ratio: 1.12;
  justify-self: center;
}
body[data-page] .about-partnership-stack { width: min(100%, 520px); justify-self: center; }
/* The company profile keeps its editorial layout: introduction on the left,
   supporting notes on the right. Only the section footprint and title/body
   typography are shared with other modules, not their three-column layout. */
body[data-page] .company-story {
  grid-template-columns: minmax(0, 3fr) minmax(200px, 1fr);
  grid-template-areas: "heading index" "copy copy";
  align-items: start;
  column-gap: clamp(32px, 4vw, 64px);
  row-gap: var(--section-gap);
}
body[data-page] .story-heading {
  grid-area: heading;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "eyebrow" "title";
  align-items: start;
  row-gap: var(--module-kicker-gap);
  margin-inline: 0;
}
body[data-page] .story-heading > :is(.eyebrow, h2) { margin: 0; }
body[data-page] .story-heading > .eyebrow { grid-area: eyebrow; }
body[data-page] .story-heading > h2 { grid-area: title; }
body[data-page] .story-index {
  grid-area: index;
  align-self: end;
  justify-self: end;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0 0 6px;
  border: 0;
  text-align: right;
}
body[data-page] .story-index > span {
  padding-top: 0;
  border-top: 0;
  font-size: clamp(13px, .95vw, 16px);
  line-height: 1.85;
  letter-spacing: 0;
}
body[data-page] .story-market { display: inline-block; white-space: nowrap; }
body[data-page] .company-story .story-index > span { color: var(--brand-ink); }
body[data-page] .story-copy {
  grid-area: copy;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: start;
  column-gap: clamp(48px, 6vw, 112px);
  justify-self: start;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-top: clamp(32px, 3vw, 48px);
  border-top: 1px solid var(--brand-rule);
}
body[data-page] .story-copy :is(.story-introduction, .story-details, .story-detail) { min-width: 0; }
body[data-page] .story-details { display: grid; gap: 32px; }
body[data-page] .story-detail + .story-detail {
  padding-top: 28px;
  border-top: 1px solid var(--brand-rule);
}
body[data-page] .future-heading { grid-template-columns: var(--section-heading-columns); }
body[data-page] .future-grid { margin-top: var(--section-gap); }
body[data-page] .future-projects.section-light .future-grid article { min-height: 0; padding: clamp(24px, 3vw, 44px); }
body[data-page] .future-grid b { font-size: clamp(24px, 2vw, 34px) !important; line-height: 1.25; }
body[data-page] .future-grid article > p { font-size: var(--copy-size); line-height: 1.8; margin-top: 24px; }
body[data-page] .future-grid small { font-size: 12px; line-height: 1.7; margin-top: 28px; }

/* Developer and enquiry pages retain readable copy at both extremes. */
body[data-page] .docs-page-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
html[lang='zh-CN'] body[data-page] .docs-page-hero .page-hero-copy-long h1 {
  font-size: clamp(28px, 7.4cqi, 56px) !important;
  line-height: 1.22 !important;
  white-space: normal;
}
body[data-page] .docs-terminal { width: 100%; max-width: 640px; min-width: 0; justify-self: end; }
body[data-page] .docs-terminal p { padding: clamp(18px, 2vw, 28px); overflow-x: auto; font-size: clamp(12px, .95vw, 15px); }
body[data-page] .docs-terminal > div { flex-wrap: wrap; gap: 10px; font-size: 10px; }
body[data-page] .docs-terminal small { font-size: 12px; }
body[data-page] .access-grid article { min-height: 0; padding: clamp(24px, 3vw, 44px); }
body[data-page] .access-grid h3 { margin-top: clamp(32px, 4vw, 64px); font-size: clamp(24px, 2vw, 32px); }
body[data-page] .access-grid p { font-size: var(--copy-size); line-height: 1.75; }
body[data-page] .doc-request-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); }
body[data-page] .doc-package-list > span { font-size: var(--copy-size); line-height: 1.7; }
body[data-page] .contact-page { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); align-items: start; }
body[data-page] .contact-intro { padding-top: 24px; }
body[data-page] .contact-email { font-size: clamp(15px, 1.3vw, 21px); overflow-wrap: anywhere; }
body[data-page] .contact-topics span { font-size: 11px; letter-spacing: 0; }
body[data-page] .contact-form-card form { padding: clamp(24px, 3vw, 44px); }
body[data-page] .contact-form-card label > span { font-size: 11px; line-height: 1.6; }
body[data-page] .contact-form-card :is(input, select, textarea) { min-width: 0; font-size: 16px; }
body[data-page] .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body[data-page] .form-submit { align-items: flex-start; flex-wrap: wrap; gap: 20px; }
body[data-page] .form-submit p { font-size: 12px; }
body[data-page] .form-card-head { flex-wrap: wrap; gap: 10px; line-height: 1.6; }

/* Policy copy has a reading measure instead of filling a cinema-wide column. */
body[data-page] .privacy-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, .75fr); }
body[data-page] .privacy-layout {
  grid-template-columns: minmax(220px, .32fr) minmax(0, 1fr);
  gap: var(--section-gap);
  padding: var(--section-space) var(--layout-inset);
}
body[data-page] .privacy-content p { max-width: 75ch; font-size: var(--copy-size); line-height: 1.9; }
body[data-page] .privacy-content h2 { line-height: 1.25; }
body[data-page] .privacy-content > section { padding-block: clamp(32px, 3vw, 52px); gap: 24px; grid-template-columns: 32px minmax(0, 1fr); }
body[data-page] .privacy-index a { font-size: 13px; }
body[data-page] .privacy-meta dd { overflow-wrap: anywhere; }
body[data-page] .site-footer { padding: 32px var(--layout-inset); }

@media (max-width: 959px) {
  :root {
    --hero-top-space: 132px;
    --section-min-height: 0px;
    --section-detail-min-height: 0px;
    --closing-min-height: 0px;
  }
  body[data-page] :is(.page-hero, .contact-page, .privacy-hero) {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
  body[data-page] :is(.page-hero-copy, .contact-intro, .privacy-hero-copy) { max-width: 760px; }
  body[data-page] .solution-world-map { width: min(64vw, 430px); }
  body[data-page] .about-compute-visual { width: min(100%, 540px); aspect-ratio: 1.3; }
  body[data-page] .docs-terminal { max-width: 760px; justify-self: start; }
  body[data-page] :is(.section-heading, .future-heading, .doc-request-grid) { grid-template-columns: minmax(0, 1fr); }
  body[data-page] .section-heading > p:last-child { max-width: 48em; margin: 0; }
  body[data-page] .company-story {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "heading" "index" "copy";
    row-gap: 28px;
  }
  body[data-page] .story-heading {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "eyebrow" "title";
  }
  body[data-page] .story-index {
    align-self: start;
    justify-self: start;
    padding: 0;
    text-align: left;
  }
  body[data-page] .story-copy {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    padding-top: 28px;
  }
  body[data-page] .story-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    padding-top: 28px;
    border-top: 1px solid var(--brand-rule);
  }
  body[data-page] .story-detail + .story-detail {
    padding-top: 0;
    border-top: 0;
  }
  body[data-page] .privacy-layout { grid-template-columns: minmax(0, 1fr); }
  body[data-page] .privacy-index { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-page] .privacy-index > p { grid-column: 1 / -1; }
  body[data-page] .contact-intro { padding-top: 0; }
}

@media (max-width: 600px) {
  :root {
    --hero-title: clamp(32px, 8.2vw, 44px);
    --hero-top-space: 120px;
    --section-space: 56px;
  }
  body[data-page] :is(.page-hero, .contact-page, .privacy-hero) { gap: 28px; }
  body[data-page] :is(.page-hero-copy > p:last-child, .contact-intro > p:not(.eyebrow), .privacy-hero-copy > p:last-child) { margin-top: 22px; }
  body[data-page] :is(.home-closing-actions, .compact-heading) { grid-template-columns: minmax(0, 1fr); }
  body[data-page] .home-closing-actions .button { justify-self: start; }
  body[data-page] .solution-world-map { width: min(88%, 340px); }
  body[data-page] .future-grid { grid-template-columns: minmax(0, 1fr); }
  body[data-page] .story-details { grid-template-columns: minmax(0, 1fr); }
  body[data-page] .story-detail + .story-detail {
    padding-top: 28px;
    border-top: 1px solid var(--brand-rule);
  }
  body[data-page] .form-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  body[data-page] .contact-form-card form { padding: 24px 20px; }
  body[data-page] .contact-form-card label { min-width: 0; }
  body[data-page] .privacy-index { grid-template-columns: minmax(0, 1fr); }
  body[data-page] .privacy-index a:nth-child(n) { padding-inline: 0; border-right: 0; }
  body[data-page] .privacy-content > section { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  body[data-page] .site-footer.mjz-site-footer { gap: 12px; }
  body[data-page] .mjz-footer-links { flex-wrap: wrap; gap: 12px 22px; }
}