/* ============================================================
   MDS Templates plugin — styles for the [mds_header] and
   [mds_footer] shortcodes (site chrome).
   Requires the DS stylesheets loaded first:
     variables.css → components.css (→ templates.css)
   Enqueued automatically by mds-templates.php.
   ============================================================ */

/*
 * Site-level custom properties, duplicated from templates.css so the
 * plugin chrome still works when templates.css is not enqueued.
 * Keep values in sync with templates.css.
 */
:root {
  --section-container: 1420px;
  /* side gutter of the page containers (*-in) and the desktop nav bar between
     the mobile 88.406% measure and the 1420 cap — without it they touch the edges */
  --section-gutter: 40px;
  --site-accent: #006afa;
  --site-accent-dark: #004097;
  --site-accent-deep: #003f94;
}

/*
 * Features-carousel bottom scrim ("Overlay-Bottom": 2573-6486 desktop,
 * 5439-40048 mobile). In Figma it is a plain black ellipse — 559x789, its
 * centre 146px from the panel's left edge and 541px from its top — under a
 * 250px layer blur, and the mobile cards reuse the SAME absolute ellipse.
 * A 250px CSS blur is expensive and would have to overhang the clipped panel,
 * so the blur is baked into a gradient instead: the stops below are Figma's
 * own render of that layer (node 2574-17835) sampled every 10% of the radius,
 * which lands within 0.02 alpha of it everywhere. Only the blob's size and
 * centre change with the panel's aspect ratio, so the profile lives here once
 * and each page passes its geometry:
 *   background: radial-gradient(<rx> <ry> at <cx> <cy>, var(--feat-scrim-stops));
 * where the blob is 736x851px centred at 146/541, in that panel's own box.
 * Note the profile is NOT the naive blurred ellipse: Figma renders the blur
 * tighter and darker than its own SVG export describes (peak 0.69, not 0.58),
 * so these numbers come from the render, not from the maths.
 */
:root {
  --feat-scrim-stops:
    rgb(0 0 0 / 0.690) 0%,
    rgb(0 0 0 / 0.661) 10%,
    rgb(0 0 0 / 0.598) 20%,
    rgb(0 0 0 / 0.501) 30%,
    rgb(0 0 0 / 0.383) 40%,
    rgb(0 0 0 / 0.267) 50%,
    rgb(0 0 0 / 0.170) 60%,
    rgb(0 0 0 / 0.097) 70%,
    rgb(0 0 0 / 0.046) 80%,
    rgb(0 0 0 / 0.014) 90%,
    rgb(0 0 0 / 0) 100%;
}

/*
 * The Figma "SM" social mark (component set 4034:53652) ships Default and Hover
 * variants that only swap two fills — the disc and the knocked-out glyph trade
 * colours, the geometry is identical. Every instance of it in this project binds
 * the disc to `currentColor` and the glyph to `--sm-glyph`, so a hover rule sets
 * both and nothing needs a second copy of the artwork:
 *   footer (.mds-footer-social)  grey disc, white glyph — only the disc moves
 *   contact (.contact-social)    white disc / blue glyph, inverted on hover
 *   job offer (.job-share)       same as contact, at 40px
 * The contact and job marks are <use href="#…"> into a <symbol>, where no
 * descendant selector can reach the glyph's fill — a custom property is the only
 * thing that inherits into the shadow tree, which is why it is a property and
 * not a class.
 * It is registered so it can be TRANSITIONED: an unregistered custom property
 * snaps, flashing a white glyph on a still-white disc halfway through the fade.
 * Registration is global, so it lives here (the one always-enqueued stylesheet)
 * rather than in mds-contact.css / mds-carrieres.css.
 */
@property --sm-glyph {
  syntax: "<color>";
  inherits: true;
  initial-value: #0c67e9;
}

/* ============================================================
   Header / Nav-Bar (Figma nodes 4083-7639 desktop, 3253-13516 mobile)
   ------------------------------------------------------------
   Desktop ≥1024px: 72px white bar (blur + shadow), logo left,
   centered menu (P2 medium items, hover = neutrals-400 + accent,
   open = + 2px accent underline, chevron flips), "connexion"
   dropdown + 50px gradient CTA right. Mega panels are <details>
   that drop a full-width 454px white panel with a 2px accent
   top line: 3×320px columns (gap 98) + gradient promo aside.
   Mobile <1024px: 61px bar — burger / centered 24px logo / 44px
   round gradient CTA. Burger (checkbox) opens a stacked list;
   groups become native <details> accordions styled like the
   Figma mobile menu. All interaction is CSS + native elements.
   ============================================================ */

/* Type is 100% the DS classes the markup carries (.text-p2 / .text-p3 /
   .text-p4 + .fw-*): family, size, leading and weight all come from them, and
   the tokens behind them already change per breakpoint. Nothing in this file
   declares font-family, font-size, line-height or font-weight — if a piece of
   chrome should read differently, change its class in header.php / footer.php,
   not here. What lives here is layout, colour tokens and state. */
.mds-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  /* the DS pill gradient (components.css documents these as Figma component
     fills, not tokens) — reused by the open menu row on mobile */
  --mds-brand-gradient: linear-gradient(90deg, #017dc8 0%, #0064c6 100%);
  background: var(--neutrals-100-white);
  box-shadow: 0 var(--dropshadow-positioning-xs) var(--dropshadow-blur-2xs) var(--opacity-dark-8);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.mds-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  max-width: var(--section-container);
  margin: 0 auto;
}
.mds-nav-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.mds-nav-burger { display: none; }
/* burger ⇄ close: the drawer checkbox swaps the two icons the label holds
   (Figma Nav-Bar "Menu Active"). The label follows the input, so a sibling
   selector is enough — no JS, like the rest of the drawer. */
.mds-nav-burger .mds-nav-close-icon { display: none; }
.mds-nav-toggle:checked ~ .mds-nav-burger .mds-nav-burger-icon { display: none; }
.mds-nav-toggle:checked ~ .mds-nav-burger .mds-nav-close-icon { display: block; }
.mds-nav-logo {
  display: block;
  height: 44px;
  flex-shrink: 0;
}
.mds-nav-logo img,
.mds-nav-logo svg {
  height: 100%;
  width: auto;
  display: block;
}

.mds-nav-menu {
  display: flex;
  align-items: stretch;
  align-self: stretch;
}
.mds-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
}
.mds-nav-list > li { display: flex; align-items: stretch; }
.mds-nav-item { display: flex; }

.mds-nav-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-step-4);
  padding: 0 var(--spacing-step-6); /* 16px */
  border: 0;
  background: none;
  text-align: left;
  color: var(--neutrals-950);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
  border-bottom: 2px solid transparent;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.mds-nav-link::-webkit-details-marker { display: none; }
summary.mds-nav-link { list-style: none; }
.mds-nav-link:hover {
  background: var(--neutrals-400);
  color: var(--site-accent);
}
.mds-nav-chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.has-drop:hover > .mds-nav-link,
.mds-nav-item.is-open > .mds-nav-link {
  background: var(--neutrals-400);
  color: var(--site-accent);
  border-bottom-color: var(--site-accent);
}
.has-drop:hover > .mds-nav-link .mds-nav-chevron,
.mds-nav-item.is-open > .mds-nav-link .mds-nav-chevron { transform: rotate(180deg); }

/* actions cluster (connexion + CTA) */
.mds-nav-actions {
  align-self: stretch;
  display: flex;
  align-items: stretch;
  gap: 13px;
}
.mds-nav-cta {
  align-self: center;
  height: 50px;
  padding: 7px 21px 7px 7px;
  gap: 9px;
}
.mds-nav-cta .btn-icon-circle { width: 36px; height: 36px; }
.mds-nav-cta .btn-icon-circle svg { width: 16px; height: 16px; }
/* 50px lobe, constant footprint: 7+36+21 = 14+50+0 */
/* scaled-down blob lobe (50px pill → 50px lobe, right: -70% from the base) */
.mds-nav-cta .btn-icon-pop { width: 50px; height: 50px; }
.mds-nav-cta .btn-icon-pop svg { width: 22px; height: 22px; }
.mds-nav-cta:hover,
.mds-nav-cta:focus-visible {
  padding: 7px 21px;
  margin-right: 31px; /* re-reserve the freed width, footprint constant */
  border-radius: 25px;
}

/* ── dropdown panel (Figma 4038-55549) — opens on hover, or tap/JS .is-open ── */
.mds-nav-item { position: relative; }
.mds-nav-drop {
  position: absolute;
  left: 0;
  top: 100%;
  width: 414px;
  background: var(--neutrals-100-white);
  border-top: 2px solid var(--site-accent);
  /* Elevation 5 so the panel reads over page content */
  box-shadow: 0 var(--dropshadow-positioning-2md) var(--dropshadow-blur-md-2)
    var(--opacity-dark-6);
  display: none;
  flex-direction: column;
  gap: 20px; /* between groups and dividers (no 20px spacing token) */
  padding: 14px 0;
  cursor: default;
}
/* One 14px band for every panel: Figma draws the three variants with 14px
   (produits 4038-55559), 17px (connexion 5232-27812) and 0 (professionnels
   3646-15603) — the produits value is the QA'd reference and reads right on
   all of them, so the inconsistency stops here. */
/* hover-open only where the full bar shows (≥1280, see the burger breakpoint) */
@media (min-width: 1280px) {
  .has-drop:hover > .mds-nav-drop { display: flex; }
  /* below 1280 the bar pads itself by 24px (see the drawer query) */
  .mds-nav-inner { width: calc(100% - 2 * var(--section-gutter)); }
}
/* components.css (theme) sets .breadcrumbs to 100% from 1024 — keep it on the page gutter */
@media (min-width: 1024px) {
  .breadcrumbs-bar .breadcrumbs { width: calc(100% - 2 * var(--section-gutter)); }
}
.mds-nav-item.is-open > .mds-nav-drop { display: flex; }

.mds-nav-drop-group {
  display: flex;
  flex-direction: column;
}
.mds-nav-drop-label {
  padding: 0 10px;
  color: var(--neutrals-700);
}
.mds-nav-drop-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-step-2); /* 4px */
  padding: 10px 10px;
  text-decoration: none;
}

/* title row: the arrow's 24px slot is always reserved, so revealing it on
   hover can't reflow the title (Figma Tier 2 3091-19768 / -19772) */
.mds-nav-drop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-step-6); /* 16px: 260 title + 16 + 24 arrow = 300 */
}
.mds-nav-drop-title {
  color: var(--neutrals-950);
  transition: color 0.2s ease;
}
.mds-nav-drop-arrow {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--site-accent);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.mds-nav-drop-item:hover .mds-nav-drop-title,
.mds-nav-drop-item:focus-visible .mds-nav-drop-title { color: var(--site-accent); }
.mds-nav-drop-item:hover .mds-nav-drop-arrow,
.mds-nav-drop-item:focus-visible .mds-nav-drop-arrow { opacity: 1; }
.mds-nav-drop-desc {
  color: var(--neutrals-800);
}
.mds-nav-drop-divider {
  height: 1px;
  width: 100%;
  background: var(--neutrals-500);
}
/* The secondary link's panel starts under its own label (Figma 5036-27972).
   A 414px panel from there runs ~56px past the 1420px container, so below the
   width that leaves room for it (1420 + 2×56) it flips to the right edge
   instead of pushing the page sideways. */
@media (max-width: 1559px) {
  .mds-nav-actions .mds-nav-drop {
    left: auto;
    right: 0;
  }
}
/* the drawer copy of the secondary link — mobile only (see the media query) */
.mds-nav-list > li.mds-nav-drawer-only { display: none; }
/* ── mobile / tablet: burger + drawer ──
   Below 1280 the bar no longer fits (six links + connexion + CTA need
   ~1280px since Figma 4083-7639 added « carrières »; it already overflowed
   1024–1279 by ~115px before), so the drawer takes over there, not at 1023. */
@media (max-width: 1279px) {
  .mds-nav-inner {
    height: 61px;
    padding: 0 var(--spacing-step-7); /* fixed 24px on the mobile bar per Figma */
    position: relative;
  }
  .mds-nav-burger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: -10px;
    cursor: pointer;
    color: var(--neutrals-950);
  }
  .mds-nav-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 24px;
  }
  /* CTA collapses to the 44px round icon button */
  .mds-nav-cta {
    height: 44px;
    padding: 6px;
    gap: 0;
  }
  .mds-nav-cta .btn-icon-circle { width: 32px; height: 32px; }
  .mds-nav-cta .btn-icon-circle svg { width: 14px; height: 14px; }
  .mds-nav-cta .btn-label,
  .mds-nav-cta .btn-icon-pop { display: none; }
  .mds-nav-cta:hover,
  .mds-nav-cta:focus-visible {
    padding: 6px;
    margin-right: 0; /* compact circle CTA doesn't shrink */
  }
  .mds-nav-cta:hover .btn-icon-circle,
  .mds-nav-cta:focus-visible .btn-icon-circle {
    width: 32px;
    opacity: 1;
    margin-right: 0;
  }
  /* connexion dropdown lives in the drawer on mobile designs */
  .mds-nav-actions > .mds-nav-item { display: none; }

  /* drawer */
  .mds-nav-menu {
    display: none;
    position: absolute;
    top: 61px;
    left: 0;
    right: 0;
    background: var(--neutrals-100-white);
    max-height: calc(100vh - 61px);
    overflow-y: auto;
    /* Elevation 5 */
    box-shadow: 0 var(--dropshadow-positioning-2md) var(--dropshadow-blur-md-2)
      var(--opacity-dark-6);
  }
  .mds-nav-toggle:checked ~ .mds-nav-menu { display: block; }
  .mds-nav-list {
    flex-direction: column;
    align-items: stretch;
  }
  .mds-nav-list > li,
  .mds-nav-item { display: block; }

  .mds-nav-link {
    width: 100%;
    box-sizing: border-box;
    justify-content: space-between;
    padding: var(--spacing-md) var(--spacing-lg); /* 12px 16px on mobile */
    background: var(--neutrals-100-white);
    border-bottom: 1px solid var(--neutrals-500);
  }
  .mds-nav-link:hover { background: var(--neutrals-100-white); color: var(--neutrals-950); }
  .mds-nav-chevron { width: 16px; height: 16px; }
  .mds-nav-item.is-open > .mds-nav-link {
    background: var(--neutrals-300);
    border-bottom: 1px solid var(--neutrals-500);
  }
  .mds-nav-item.is-open > .mds-nav-link .mds-nav-label {
    background: var(--mds-brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  /* dropdown → stacked accordion rows inside the drawer */
  .mds-nav-drop {
    position: static;
    width: 100%;
    border-top: 0;
    box-shadow: none;
    padding: 0;
    gap: 0;
  }
  .mds-nav-drop-label {
    background: var(--neutrals-400);
    border-bottom: 1px solid var(--neutrals-500);
    padding: var(--spacing-sm) var(--spacing-lg); /* 8px 16px */
  }
  .mds-nav-drop-item {
    background: var(--neutrals-300);
    border-bottom: 1px solid var(--neutrals-500);
    padding: var(--spacing-sm) var(--spacing-lg);
  }
  .mds-nav-drop-divider { display: none; }
  /* connexion joins the menu rows, as the mobile frames show it */
  .mds-nav-list > li.mds-nav-drawer-only { display: block; }
}

/* ============================================================
   Footer (Figma nodes 3130-19614 desktop, 3253-14877 mobile)
   ------------------------------------------------------------
   Desktop ≥1024px: centered 1420px frame with a 1px hairline
   border — 84px logo bar, then 4 link columns (14px blue bold
   headings, P4 links, product kicker/name pairs with hairline
   dividers) | vertical rule | newsletter column (text + pill
   e-mail input with 40px blue arrow button). Below the links a
   ~422px decorative glow image, alpha-masked so it fades out
   upward. Full-width hairline, then the bottom bar: copyright
   (P3) / legal links (P4, "/" separated) / 3 social icons
   (24px, neutrals-600 → accent on hover).
   Mobile <1024px: side-bordered column — 59px logo bar, the 4
   columns collapse into checkbox accordions (blue heading +
   20px chevron, 13px gaps + hairlines; open rows are P4 12px
   with hairline row borders), newsletter, then the glow image
   full-bleed (168px) and a stacked centered bottom bar
   (social / copyright / hairline / legal).
   All interaction is CSS-only (checkbox accordions).
   ============================================================ */

.mds-footer {
  background: var(--neutrals-100-white);
}
.mds-footer a { text-decoration: none; }

/* ── top area: centers the bordered frame, full-width hairline below ── */
.mds-footer-top {
  padding: 0 var(--spacing-lg);
  border-bottom: 1px solid var(--neutrals-500);
}
.mds-footer-frame {
  max-width: var(--section-container);
  margin: 0 auto;
  /* the frame's own bottom line is the .mds-footer-top hairline */
  border: 1px solid var(--neutrals-500);
  border-bottom: 0;
  display: flex;
  flex-direction: column;
}

/* logo bar */
.mds-footer-brand {
  display: flex;
  align-items: center;
  height: 84px;
  padding: 0 var(--spacing-step-7); /* 24px */
  border-bottom: 1px solid var(--neutrals-500);
}
.mds-footer-brand a { display: block; }
.mds-footer-brand img { display: block; height: 44px; width: auto; }
.mds-footer-brand .mds-footer-logo-mobile { display: none; }

/* link columns + newsletter row */
.mds-footer-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-step-7);
  padding: var(--spacing-step-7); /* 24px */
}
.mds-footer-cols {
  display: flex;
  align-items: flex-start;
  gap: clamp(24px, 4%, 54px); /* 54px at full width, tightens before the columns wrap */
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
}
.mds-footer-col-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.mds-footer-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px; /* heading→list gap, no 26px token */
  color: var(--site-accent);
}
.mds-footer-chevron {
  display: none; /* mobile accordion affordance only */
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.mds-footer-col-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-step-5); /* 12px */
}
.mds-footer-link {
  color: var(--neutrals-950);
  transition: color 0.2s ease;
}
.mds-footer-link:hover { color: var(--site-accent); }
/* product entries: grey kicker over a semibold name, hairlines between */
.mds-footer-product + .mds-footer-product {
  border-top: 1px solid var(--neutrals-500);
  padding-top: var(--spacing-step-5);
}
.mds-footer-product a { display: block; }
.mds-footer-kicker {
  display: block;
  color: var(--neutrals-700);
  margin-bottom: var(--spacing-step-2); /* 4px */
}
.mds-footer-product-name {
  display: block;
  color: var(--neutrals-950);
  transition: color 0.2s ease;
}
.mds-footer-product a:hover .mds-footer-product-name { color: var(--site-accent); }
/* a product's own modules (Figma Footer - Desktop 3839-33500: IA clinique
   sofia / espace patient / borne d'accueil under medO alys) — .caption 12/17,
   4px rhythm, inside the product block so the hairline stays below them */
.mds-footer-subs {
  list-style: none;
  margin: var(--spacing-step-2) 0 0; /* 4px */
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-step-2);
}
.mds-footer-sub {
  display: block;
  color: var(--neutrals-950);
  text-decoration: none;
  transition: color 0.2s ease;
}
.mds-footer-sub:hover { color: var(--site-accent); }

/* contact info row under the columns (Figma 6335-37456): 24/16 padding,
   blocks 24px either side of a 1px hairline, first block hugs its copy and
   the rest share the remaining width; icon + 4px + title, body 13px below */
.mds-footer-info {
  border-top: 1px solid var(--neutrals-500);
  padding: var(--spacing-step-7) var(--spacing-step-6); /* 24px 16px */
  color: var(--neutrals-950);
}
.mds-footer-info-head { display: none; } /* mobile accordion label only */
.mds-footer-info-row {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-step-7); /* 24px */
}
.mds-footer-info-item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 13px; /* Figma title→body gap, no token */
}
.mds-footer-info-item:first-child { flex: 0 0 auto; } /* hugs "494, rue du Commodore Lévis, QC, G7A 4Y8" */
.mds-footer-info-vr {
  width: 1px;
  align-self: stretch;
  flex-shrink: 0;
  background: var(--neutrals-500);
}
.mds-footer-info-title {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-step-2); /* 4px */
  margin: 0;
  color: var(--site-accent);
}
/* the exported Figma glyphs in their Figma boxes */
.mds-footer-info-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
}
.mds-footer-info-icon--send { width: 21px; height: 21px; }
.mds-footer-info-icon--pin {
  width: 19.333px;
  height: 26.667px;
  padding: 4.167px 2.167px; /* 15×18.5 glyph inside the 19.33×26.67 frame */
}
.mds-footer-info-icon img {
  display: block;
  width: 100%;
  height: 100%;
}
.mds-footer-info-body p { margin: 0; }
.mds-footer-info-body a {
  color: inherit;
  transition: color 0.2s ease;
}
.mds-footer-info-body a:hover { color: var(--site-accent); }

/* vertical rule between links and newsletter */
.mds-footer-vr {
  width: 1px;
  align-self: stretch;
  flex-shrink: 0;
  background: var(--neutrals-500);
}

/* newsletter */
.mds-footer-news {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-step-6); /* 16px */
  flex: 0 1 294px; /* Figma newsletter column width — the intro text wraps to two lines */
  min-width: 260px;
}
.mds-footer-news-title,
.mds-footer-news-text {
  padding: 0 var(--spacing-step-4); /* 8px */
  color: var(--neutrals-950);
}
/* the optional title sits tight above the text, not a full 16px away */
.mds-footer-news-title + .mds-footer-news-text { margin-top: calc(var(--spacing-step-4) - var(--spacing-step-6)); }
/* Submit feedback for the HubSpot-backed newsletter box: the form is hidden and
   one of these takes its place. Type comes from the DS class in the markup. */
.mds-footer-news-done,
.mds-footer-news-error {
  padding: 0 var(--spacing-step-4); /* 8px, like the text above it */
  margin: 0;
}
.mds-footer-news-done { color: var(--neutrals-950); }
.mds-footer-news-notice {
  padding: 0 var(--spacing-step-4);
  margin: var(--spacing-step-4) 0 0;
  color: var(--neutrals-700);
}
.mds-footer-news-notice a { color: inherit; text-decoration: underline; }
.mds-footer-news-error { color: #b42318; }
.mds-footer-news-form {
  display: flex;
  align-items: center;
  gap: var(--spacing-step-4);
  padding: var(--spacing-step-4) var(--spacing-step-4) var(--spacing-step-4)
    var(--spacing-step-6); /* 8px, 16px left */
  border: 1px solid var(--neutrals-500);
  border-radius: 200px;
}
.mds-footer-news-input {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--neutrals-950);
}
.mds-footer-news-input::placeholder { color: var(--neutrals-600); }
.mds-footer-news-input:focus { outline: none; }
.mds-footer-news-form:focus-within { border-color: var(--site-accent); }
.mds-footer-news-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: var(--site-accent);
  color: var(--neutrals-100-white);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.mds-footer-news-btn:hover,
.mds-footer-news-btn:focus-visible { background: var(--site-accent-dark); }
.mds-footer-news-btn svg { width: 18px; height: 18px; }

/* decorative glow band (video, image as poster/fallback). Figma 6335-37380:
   the art is a 356.33px band under the info row (rows ~27%→72% of our 16:9
   poster at frame width) and alpha-masked so it fades out upward —
   opaque up to 42.5% of the band, gone 33.6% above its top. */
.mds-footer-glow {
  position: relative;
  aspect-ratio: 1420 / 356.33;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to top, #000 42.5%, transparent 133.6%);
  mask-image: linear-gradient(to top, #000 42.5%, transparent 133.6%);
}
.mds-footer-glow img,
.mds-footer-glow video {
  position: absolute;
  left: 0;
  top: -64.3%; /* of the band: calibrated against the Figma render (the Figma rect is not a centred crop of the 16:9 poster) */
  width: 100%;
  height: auto;
}

/* ── bottom bar ── */
.mds-footer-bar {
  padding: 15px var(--spacing-lg); /* 15px vertical, no token */
  border-bottom: 1px solid var(--neutrals-500);
}
.mds-footer-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-step-7);
  max-width: var(--section-container);
  margin: 0 auto;
  padding: 0 var(--spacing-step-7); /* clusters sit 24px inside the container */
}
.mds-footer-copy {
  color: var(--neutrals-800);
}
.mds-footer-legal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 18px; /* no 18px token */
  color: var(--neutrals-950); /* the "/" separators */
}
.mds-footer-legal a {
  color: var(--neutrals-700);
  transition: color 0.2s ease;
}
.mds-footer-legal a:hover { color: var(--site-accent); }
.mds-footer-social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-step-4); /* 8px */
}
.mds-footer-social a {
  display: block;
  color: var(--neutrals-600);
  transition: color 0.2s ease;
}
/* Figma "SM" hover (4034:53657/68/85): the disc goes primary/Default and the
   glyph stays knocked out white — which is already the footer's glyph fill, so
   only the circle changes. The blue is --primary-default (#0c67e9), NOT
   --site-accent (#006afa). */
.mds-footer-social a:hover,
.mds-footer-social a:focus-visible { color: var(--primary-default); }
.mds-footer-social svg,
.mds-footer-social img { display: block; width: 24px; height: 24px; }
/* an uploaded icon can't inherit currentColor — dim it to match, lift on hover */
.mds-footer-social img { opacity: 0.75; transition: opacity 0.2s ease; }
.mds-footer-social a:hover img { opacity: 1; }
.mds-footer-bar-divider { display: none; }

/* ── mobile ── */
@media (max-width: 1023px) {
  .mds-footer-top {
    padding: 0 var(--spacing-step-7); /* fixed 24px like the mobile nav bar */
    border-bottom: 0;
  }
  .mds-footer-frame {
    border-width: 0 1px; /* side hairlines only */
  }
  .mds-footer-brand { height: 59px; }
  .mds-footer-brand img { height: 24px; }
  .mds-footer-brand .mds-footer-logo-desktop { display: none; }
  .mds-footer-brand .mds-footer-logo-mobile { display: block; }

  .mds-footer-main {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-step-7); /* 24px between accordions and newsletter */
    padding: var(--spacing-step-7) var(--spacing-step-5); /* 24px 12px */
  }
  .mds-footer-cols {
    flex-direction: column;
    gap: 13px; /* Figma accordion rhythm, no token */
  }
  .mds-footer-col {
    border-bottom: 1px solid var(--neutrals-500);
    padding-bottom: 13px;
    width: 100%;
  }
  .mds-footer-col-head {
    margin-bottom: 0;
    cursor: pointer;
  }
  .mds-footer-chevron { display: block; }
  .mds-footer-col-toggle:checked ~ .mds-footer-col-head .mds-footer-chevron {
    transform: rotate(180deg);
  }

  /* hardcoded 14px on mobile (client request) — the responsive p4 alias
     would drop these to 12px; !important so nothing overrides the footer
     type on the live site */
  .mds-footer-col-head > span,
  .mds-footer-col-list,
  .mds-footer-col-list li,
  .mds-footer-col-list .mds-footer-link,
  .mds-footer-kicker,
  .mds-footer-product-name {
    font-size: var(--typography-size-step-3) !important; /* 14px */
    line-height: var(--typography-line-height-height-step3) !important; /* 21px */
  }

  /* sub-links stay a step under the 14px rows (.caption alone would be 10px here) */
  .mds-footer-sub {
    font-size: var(--typography-size-step-2) !important; /* 12px */
    line-height: var(--typography-line-height-height-step2) !important; /* 17px */
  }

  /* accordion body: closed by default, hairline rows when open */
  .mds-footer-col-list { display: none; }
  .mds-footer-col-toggle:checked ~ .mds-footer-col-list {
    display: flex;
    gap: 0;
  }
  .mds-footer-col-list > li { border-bottom: 1px solid var(--neutrals-500); }
  .mds-footer-col-list > li:last-child { border-bottom: 0; }
  .mds-footer-col-list > li > .mds-footer-link {
    display: block;
    padding: var(--spacing-step-4) 0; /* 8px */
  }
  .mds-footer-product + .mds-footer-product {
    border-top: 0;
    padding-top: 0;
  }
  .mds-footer-kicker {
    margin-bottom: 0;
    padding: var(--spacing-step-4) 0;
    border-bottom: 1px solid var(--neutrals-500);
  }
  .mds-footer-product-name {
    padding: var(--spacing-step-4) 0;
  }

  /* contact info: one more accordion under the newsletter (Figma
     6335-37637 / 37511) — hairline, 13px, label, 13px, hairline; open body
     13px / blocks with 16px around each hairline / 13px, hairline; 24px to
     the glow. Type is the Figma mobile 14/17. */
  .mds-footer-info {
    margin: 0 var(--spacing-step-5) var(--spacing-step-7); /* 0 12px 24px */
    padding: 0;
  }
  .mds-footer-info-head {
    display: flex;
    padding: 13px 0;
    border-bottom: 1px solid var(--neutrals-500);
    cursor: pointer;
  }
  .mds-footer-info-row {
    display: none;
    flex-direction: column;
    gap: var(--spacing-step-6); /* 16px */
    padding: 13px 0;
    border-bottom: 1px solid var(--neutrals-500);
  }
  .mds-footer-col-toggle:checked ~ .mds-footer-info-row { display: flex; }
  .mds-footer-info-item,
  .mds-footer-info-item:first-child {
    flex: none;
    width: 100%;
  }
  .mds-footer-info-vr {
    width: 100%;
    height: 1px;
    align-self: auto;
  }
  .mds-footer-info-title > span,
  .mds-footer-info-body {
    font-size: var(--typography-size-step-3) !important; /* 14px */
    line-height: var(--typography-line-height-height-step2) !important; /* 17px */
  }
  .mds-footer-vr { display: none; }
  .mds-footer-news {
    flex-basis: auto;
    width: 100%;
  }
  .mds-footer-news-text { padding: 0; }

  /* glow goes full-bleed under the frame's side borders: a 168px band, the
     16:9 media centred in it (Figma fill crop), no fade */
  .mds-footer-glow {
    aspect-ratio: auto;
    height: 168px;
    margin: 0 calc(-1 * var(--spacing-step-7) - 1px);
    -webkit-mask-image: none;
    mask-image: none;
  }
  .mds-footer-glow img,
  .mds-footer-glow video {
    top: 50%;
    transform: translateY(-50%);
  }

  /* stacked, centered bottom bar */
  .mds-footer-bar {
    padding: var(--spacing-step-4) var(--spacing-step-7); /* 8px 24px */
    border-bottom-color: var(--neutrals-400);
  }
  .mds-footer-bar-inner {
    flex-direction: column;
    gap: 10px; /* Figma bar rhythm, no token */
    padding: 0;
  }
  .mds-footer-social { order: 1; }
  .mds-footer-copy { order: 2; }
  .mds-footer-bar-divider {
    display: block;
    order: 3;
    width: 100%;
    height: 1px;
    background: var(--neutrals-400);
  }
  .mds-footer-legal { order: 4; }
}

/* ============================================================
   IN-PAGE ANCHORS
   Some hero CTAs jump to a section further down the same page
   (see mds_link_map() — the '#anchor' entries). The nav is
   sticky, so without a landing offset the section title arrives
   underneath the bar. One rule for every anchored section.
   ============================================================ */
:root { --mds-nav-h: 72px; }
@media (max-width: 1279px) { /* the bar is 61px wherever the burger shows */
  :root { --mds-nav-h: 61px; }
}
section[id] {
  scroll-margin-top: calc(var(--mds-nav-h) + var(--spacing-step-7));
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}