/**
 * Membrane family typography contract.
 *
 * This stylesheet is intentionally loaded only by the Membranes landing page
 * and its five product-detail siblings. The body class lets the shared header,
 * mega-menu and footer adopt the same semantic type roles on those six routes
 * without changing any other page that reuses the site chrome.
 */

body.membrane-typography {
  --mem-type-heading-3: 25px;
  --mem-type-title-card: 20px;
  --mem-type-lead-line: 17px;
  --mem-type-body: 16px;
  --mem-type-table-heading: 16px;
  --mem-type-table-data: 16px;
  --mem-type-action: 14px;
  --mem-type-form-label: 14px;
  --mem-type-form-control: 16px;
  --mem-type-helper: 14px;
  --mem-type-nav-main: 14px;
  --mem-type-nav-mobile: 16px;
  --mem-type-nav-utility: 12px;
  --mem-type-metadata: 13px;
  --mem-type-compact: 11px;
  --mem-type-footer-link: 15px;
  --mem-type-footer-meta: 13px;

  /* Compatibility aliases used by the extracted membrane handoff CSS. */
  --type-body: var(--mem-type-body);
  --type-label: var(--mem-type-compact);
  --type-button: var(--mem-type-action);
  --type-caption: var(--mem-type-metadata);
  --type-micro: var(--mem-type-compact);
}

/* Shared header and injected mega-menu. */
body.membrane-typography #main-app-header,
body.membrane-typography #main-app-header button,
body.membrane-typography #main-app-header a {
  font-family: var(--font-display);
}

body.membrane-typography #header-utility-bar a,
body.membrane-typography #header-utility-bar button {
  font-size: var(--mem-type-nav-utility);
  font-weight: 600;
  line-height: 1.4;
}

/* The top-level menu keeps the sitewide size (typography.css, also loaded
   here), so it does not shrink from 15px to 14px on these pages. */
body.membrane-typography #header-desktop-menu > button,
body.membrane-typography #header-desktop-menu > a {
  font-size: var(--type-nav-main);
  font-weight: 600;
  line-height: 1.35;
}

body.membrane-typography #ie-mega-navigator [data-mega-tab] > span,
body.membrane-typography #ie-mega-navigator .ix-acc-sum,
body.membrane-typography #ie-mega-navigator .ix-acc-link,
body.membrane-typography #ie-mega-navigator a {
  font-family: var(--font-display);
  font-size: var(--mem-type-nav-main);
  line-height: 1.4;
}

body.membrane-typography #ie-mega-navigator > div > div > div:nth-child(2) > div > span:first-child {
  font-family: var(--font-display);
  font-size: var(--mem-type-compact);
  font-weight: 700;
  line-height: 1.3;
}

body.membrane-typography #ie-mega-navigator > div > div > div:nth-child(2) > div > p {
  font-family: var(--font-body);
  font-size: var(--mem-type-body);
  font-weight: 400;
  line-height: 1.6;
}

body.membrane-typography #ie-mega-navigator > div > div > div:nth-child(2) > div:last-child > a {
  font-family: var(--font-body);
  font-size: var(--mem-type-action);
  font-weight: 600;
  line-height: 1.4;
}

/* Shared page primitives. Display headings and approved lead copy are left at
   their established responsive values; only their semantic family is fixed. */
body.membrane-typography .page-banner__title,
body.membrane-typography .page-banner__eyebrow,
body.membrane-typography #mem-page#mem-page h2,
body.membrane-typography #mem-page#mem-page h3,
body.membrane-typography #mem-page#mem-page h4 {
  font-family: var(--font-display);
}

body.membrane-typography .page-banner__lead,
body.membrane-typography #mem-page#mem-page p,
body.membrane-typography #mem-page#mem-page li {
  font-family: var(--font-body);
}

body.membrane-typography .page-banner__eyebrow,
body.membrane-typography #mem-page#mem-page .ds-eyebrow,
body.membrane-typography #mem-page#mem-page .ds-label-system {
  font-size: var(--mem-type-compact);
}

body.membrane-typography #mem-page#mem-page .ds-caption {
  font-size: var(--mem-type-metadata);
  line-height: 1.45;
}

body.membrane-typography .page-banner__actions .btn,
body.membrane-typography #mem-page#mem-page .btn,
body.membrane-typography #mem-page#mem-page .mem-link,
body.membrane-typography #mem-page#mem-page .memtool__name,
body.membrane-typography #mem-page#mem-page .roel__cta,
body.membrane-typography #mem-page#mem-page .pnav__all,
body.membrane-typography #mem-page#mem-page .memspec__cta {
  font-family: var(--font-body);
  font-size: var(--mem-type-action);
  font-weight: 600;
  line-height: 1.4;
}

/* Landing-page cards and supporting content. */
body.membrane-typography #mem-page#mem-page .memcard__family {
  font-family: var(--font-display);
  font-size: var(--mem-type-compact);
  font-weight: 700;
  line-height: 1.3;
}

body.membrane-typography #mem-page#mem-page .memcard {
  /* The card footprint stays unchanged. Only the internal image/text split is
     rebalanced so the larger semantic type remains fully visible. */
  --mem-panel: clamp(228px, 17vw, 240px);
}

body.membrane-typography #mem-page#mem-page .memcard__name,
body.membrane-typography #mem-page#mem-page .memapp__name,
body.membrane-typography #mem-page#mem-page .pvarcard__name,
body.membrane-typography #mem-page#mem-page .papp__name,
body.membrane-typography #mem-page#mem-page .pben__head,
body.membrane-typography #mem-page#mem-page .pnav__product {
  font-family: var(--font-display);
  font-size: var(--mem-type-title-card);
  font-weight: 600;
  line-height: 1.3;
}

/* The pillar name is each pillar's heading (client review, 29 Oct), on the
   site's h3 scale; the number beside the icon stays quiet. */
body.membrane-typography #mem-page#mem-page .mwhy__kind {
  font-family: var(--font-display);
  font-size: var(--mem-type-heading-3);
  font-weight: 500;
  line-height: 1.25;
}

/* The pillar headline carries a full sentence rather than a two-word card
   title, so it sits a step below the card-title scale and reads as a lead
   line instead of shouting. */
body.membrane-typography #mem-page#mem-page .mwhy__name {
  font-family: var(--font-display);
  font-size: var(--mem-type-lead-line);
  font-weight: 500;
  line-height: 1.45;
}

body.membrane-typography #mem-page#mem-page .memcard__body,
body.membrane-typography #mem-page#mem-page .memapp__body,
body.membrane-typography #mem-page#mem-page .mwhy__body,
body.membrane-typography #mem-page#mem-page .pover__body p,
body.membrane-typography #mem-page#mem-page .pvarcard__body p,
body.membrane-typography #mem-page#mem-page .pvarcard__text,
body.membrane-typography #mem-page#mem-page .papp__body,
body.membrane-typography #mem-page#mem-page .pben__body,
body.membrane-typography #mem-page#mem-page .roel__lead,
body.membrane-typography #mem-page#mem-page .roel__note,
body.membrane-typography #mem-page#mem-page .rochem li {
  font-family: var(--font-body);
  font-size: var(--mem-type-body);
  font-weight: 400;
  line-height: 1.6;
}

body.membrane-typography #mem-page#mem-page .memcard__cta {
  font-family: var(--font-body);
  font-size: var(--mem-type-action);
  font-weight: 600;
  line-height: 1.4;
}

body.membrane-typography #mem-page#mem-page .memcard__name {
  min-height: calc(1.3em * 2);
}

body.membrane-typography #mem-page#mem-page .memcard__body {
  min-height: calc(1.6em * 3);
}

body.membrane-typography #mem-page#mem-page .mem-video__label {
  font-family: var(--font-body);
  font-size: var(--mem-type-action);
  font-weight: 600;
}

body.membrane-typography #mem-page#mem-page .mem-video__time,
body.membrane-typography #mem-page#mem-page .impact__label,
body.membrane-typography #mem-page#mem-page .metric__label {
  font-family: var(--font-display);
  font-size: var(--mem-type-metadata);
  font-weight: 600;
  line-height: 1.45;
}

/* Product-family cards, tables and sibling navigation. */
body.membrane-typography #mem-page#mem-page .pvarcard__no,
body.membrane-typography #mem-page#mem-page .pvarcard__count,
body.membrane-typography #mem-page#mem-page .roel__no,
body.membrane-typography #mem-page#mem-page .papp__no,
body.membrane-typography #mem-page#mem-page .pben__label,
body.membrane-typography #mem-page#mem-page .pnav__dir {
  font-family: var(--font-display);
  font-size: var(--mem-type-compact);
  font-weight: 700;
  line-height: 1.3;
}

body.membrane-typography #mem-page#mem-page .roel__tabs .pvarcard[aria-selected="true"] .pvarcard__count {
  font-size: 0;
}

body.membrane-typography #mem-page#mem-page .roel__tabs .pvarcard[aria-selected="true"] .pvarcard__count::after {
  font-size: var(--mem-type-compact);
}

body.membrane-typography #mem-page#mem-page .roel__table {
  font-family: var(--font-body);
  font-size: var(--mem-type-table-data);
  font-weight: 400;
  line-height: 1.5;
}

body.membrane-typography #mem-page#mem-page .roel__table thead th {
  font-family: var(--font-display);
  font-size: var(--mem-type-table-heading);
  font-weight: 600;
  line-height: 1.4;
}

body.membrane-typography #mem-page#mem-page .roel__table tbody th,
body.membrane-typography #mem-page#mem-page .roel__seg {
  font-size: var(--mem-type-table-data);
}

/* Approved compact exception from the audit. */
body.membrane-typography #mem-page#mem-page .roel__doc {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.1em;
}

/* Membrane contact modal. */
body.membrane-typography #mem-page#mem-page .pmodal__eyebrow {
  font-size: var(--mem-type-compact);
  line-height: 1.3;
}

body.membrane-typography #mem-page#mem-page .pmodal__lead {
  font-family: var(--font-body);
  font-size: var(--mem-type-body);
  font-weight: 400;
  line-height: 1.6;
}

body.membrane-typography #mem-page#mem-page .pfield label {
  font-family: var(--font-display);
  font-size: var(--mem-type-form-label);
  font-weight: 600;
  line-height: 1.4;
}

body.membrane-typography #mem-page#mem-page .pfield input,
body.membrane-typography #mem-page#mem-page .pfield select {
  font-family: var(--font-body);
  font-size: var(--mem-type-form-control);
  font-weight: 400;
  line-height: 1.5;
}

body.membrane-typography #mem-page#mem-page .pfield__err,
body.membrane-typography #mem-page#mem-page .pmodal__captcha:empty::before,
body.membrane-typography #mem-page#mem-page .pmodal__note,
body.membrane-typography #mem-page#mem-page .pmodal__status {
  font-family: var(--font-body);
  font-size: var(--mem-type-helper);
  font-weight: 400;
  line-height: 1.45;
}

/* Product specification drawer. */
body.membrane-typography #mem-page#mem-page .memspec__kicker {
  font-size: var(--mem-type-compact);
  line-height: 1.3;
}

body.membrane-typography #mem-page#mem-page .memspec__flag {
  font-size: var(--mem-type-metadata);
  line-height: 1.45;
}

body.membrane-typography #mem-page#mem-page .memspec__sec-h {
  font-family: var(--font-display);
  font-size: var(--mem-type-table-heading);
  font-weight: 600;
  line-height: 1.4;
}

body.membrane-typography #mem-page#mem-page .memspec__row dt,
body.membrane-typography #mem-page#mem-page .memspec__row dd,
body.membrane-typography #mem-page#mem-page .memspec__notes li {
  font-family: var(--font-body);
  font-size: var(--mem-type-table-data);
  line-height: 1.5;
}

/* Shared footer, scoped to these six routes. */
body.membrane-typography #contact h2,
body.membrane-typography #contact h3,
body.membrane-typography #contact h4 {
  font-family: var(--font-display);
}

body.membrane-typography #contact p,
body.membrane-typography #contact input,
body.membrane-typography #contact select,
body.membrane-typography #contact button,
body.membrane-typography #footer-columns a {
  font-family: var(--font-body);
}

body.membrane-typography #impact-metrics-row > div > div > div:last-child,
body.membrane-typography #impact-metrics-row > div:last-child > div:last-child {
  font-family: var(--font-display);
  font-size: var(--mem-type-footer-meta);
  font-weight: 600;
  line-height: 1.45;
}

body.membrane-typography #contact-form-widget p,
body.membrane-typography #footer-directory > div:first-child > p {
  font-size: var(--mem-type-body);
  font-weight: 400;
  line-height: 1.6;
}

body.membrane-typography #contact-form-widget input,
body.membrane-typography #contact-form-widget select,
body.membrane-typography #newsletter-segment input {
  font-size: var(--mem-type-form-control);
  font-weight: 400;
  line-height: 1.5;
}

body.membrane-typography #contact-form-widget button,
body.membrane-typography #newsletter-segment button {
  font-size: var(--mem-type-action);
  font-weight: 600;
  line-height: 1.4;
}

body.membrane-typography #consultation-form > p,
body.membrane-typography #newsletter-segment > span {
  font-family: var(--font-body);
  font-size: var(--mem-type-helper);
  font-weight: 400;
  line-height: 1.45;
}

body.membrane-typography #newsletter-segment > div,
body.membrane-typography #footer-columns h4,
body.membrane-typography #footer-presence-bar,
body.membrane-typography #footer-licensing {
  font-family: var(--font-display);
  font-size: var(--mem-type-footer-meta);
  font-weight: 600;
  line-height: 1.45;
}

body.membrane-typography #footer-columns a {
  font-size: var(--mem-type-footer-link);
  font-weight: 400;
  line-height: 1.5;
}

body.membrane-typography #footer-presence-bar span,
body.membrane-typography #footer-licensing span,
body.membrane-typography #footer-licensing a {
  font-size: inherit;
  line-height: inherit;
}

body.membrane-typography #footer-presence-bar > div:last-child {
  font-size: var(--mem-type-footer-meta);
  line-height: 1.45;
}

@media (max-width: 1023px) {
  body.membrane-typography #ie-mega-navigator [data-mega-tab] > span,
  body.membrane-typography #ie-mega-navigator .ix-acc-sum,
  body.membrane-typography #ie-mega-navigator .ix-acc-link,
  body.membrane-typography #ie-mega-navigator a {
    font-size: var(--mem-type-nav-mobile);
  }

  body.membrane-typography #ie-mega-navigator > div > div > div:nth-child(2) > div:last-child > a {
    font-size: var(--mem-type-action);
  }
}

@media (max-width: 620px) {
  body.membrane-typography {
    --mem-type-heading-3: 20px;
    --mem-type-title-card: 18px;
    --mem-type-lead-line: 16px;
  }
}