/* GD-MD medical line (/gdmd/): the teal section.
   Brand law (Packaging Design (MD)\CLAUDE.md): no green in the section's own elements;
   teal #00B8CC (Pantone 319 C standing in for 319 U) for accents, deep teal #0A6570
   on light grounds and for anything carrying text, ink #373837, cream #F8F7F2.
   The site header and footer stay as they are (round 1). */

.gdmd {
  --md-teal: #00B8CC;
  --md-teal-deep: #0A6570;
  --md-teal-light: #E6F6F8;
  --md-teal-tint: #CCEFF3;
  --md-ink: #373837;
  --md-cream: #F8F7F2;
  --md-band: #EEF0F0;   /* the alternating section ground: a light tint of Cool Grey 3 C (the housing), so the teal accents and the highlighted table row stand out (2026-10-28) */
  color: var(--md-ink);
}
.gdmd a { color: var(--md-teal-deep); }
.gdmd .breadcrumb a, .gdmd .breadcrumb span { color: var(--md-ink); }
.gdmd .breadcrumb-current { color: var(--md-teal-deep); }

/* buttons */
.md-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px; border-radius: 999px; font-weight: 500; font-size: 0.98rem; text-decoration: none; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.gdmd .md-btn-primary { background: var(--md-teal-deep); color: #fff; border: 2px solid var(--md-teal-deep); }
.gdmd .md-btn-primary:hover { background: #084f58; border-color: #084f58; }
.gdmd .md-btn-ghost { background: transparent; color: var(--md-teal-deep); border: 2px solid var(--md-teal-deep); }
.gdmd .md-btn-ghost:hover { background: var(--md-teal-light); }
.md-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--space-lg); }

/* labels */
.md-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--md-teal-deep); margin: 0 0 12px; }
.md-eyebrow::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--md-teal); }
.md-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-md); }
.md-pill { background: #fff; border: 1px solid var(--md-teal-tint); border-radius: 10px; padding: 8px 12px; font-size: 0.85rem; line-height: 1.3; }
.md-pill b { display: block; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--md-teal-deep); font-weight: 600; }
.md-region { margin-top: var(--space-md); padding: 12px 14px; border-left: 3px solid var(--md-teal); background: #fff; font-size: 0.9rem; line-height: 1.5; border-radius: 0 8px 8px 0; }

/* hero */
.md-hero { background: linear-gradient(180deg, var(--md-teal-light) 0%, var(--md-cream) 100%); padding: var(--space-xl) 0 var(--space-3xl); }
.md-hero-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); align-items: center; margin-top: var(--space-md); }
.md-hero h1 { font-weight: 300; letter-spacing: -0.02em; font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.1; margin: 0 0 var(--space-md); color: var(--md-ink); }
.md-lede { font-size: 1.08rem; line-height: 1.65; margin: 0; }
.md-hero-art { background: #fff; border-radius: 20px; padding: 16px; box-shadow: 0 1px 0 var(--md-teal-tint); }
.md-hero-art img { display: block; width: 100%; height: auto; }
@media (min-width: 900px) { .md-hero-grid { grid-template-columns: 7fr 5fr; gap: 56px; } }

/* sections */
.md-section { padding: var(--space-3xl) 0; }
.md-section--tint { background: var(--md-band); }
.md-section--cream { background: var(--md-cream); }
.md-title { font-weight: 300; letter-spacing: -0.02em; font-size: clamp(1.6rem, 3.6vw, 2.3rem); line-height: 1.15; margin: 0 0 var(--space-md); color: var(--md-ink); }
.md-body { font-size: 1rem; line-height: 1.65; max-width: 720px; margin: 0 0 var(--space-md); }
.md-note { font-size: 0.85rem; line-height: 1.5; color: #5d5e5d; max-width: 760px; }

/* steps */
.md-steps { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: var(--space-lg); counter-reset: mdstep; list-style: none; padding: 0; }
.md-steps li { background: #fff; border-radius: 14px; padding: 18px 18px 18px 60px; position: relative; line-height: 1.55; border: 1px solid var(--md-teal-tint); }
.md-steps li::before { counter-increment: mdstep; content: counter(mdstep); position: absolute; left: 16px; top: 16px; width: 30px; height: 30px; border-radius: 50%; background: var(--md-teal); color: var(--md-ink); font-weight: 600; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; }
.md-steps b { display: block; margin-bottom: 2px; }
@media (min-width: 900px) { .md-steps--3 { grid-template-columns: repeat(3, 1fr); } .md-steps--5 { grid-template-columns: repeat(5, 1fr); } .md-steps--5 li { padding: 60px 16px 18px; } .md-steps--5 li::before { top: 16px; } }

/* model cards */
.md-models { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: var(--space-lg); }
.md-model { display: flex; flex-direction: column; background: #fff; border-radius: 16px; padding: 14px 14px 16px; text-decoration: none; color: var(--md-ink); border: 2px solid transparent; transition: border-color .2s ease, transform .2s ease; }
.md-model:hover { border-color: var(--md-teal); transform: translateY(-2px); }
.md-model.is-current { border-color: var(--md-teal-deep); }
.md-model img { display: block; width: 100%; height: auto; background: var(--md-teal-light); border-radius: 12px; margin-bottom: 10px; }
.md-model-name { font-weight: 600; font-size: 1.05rem; }
.md-model-fit { font-size: 0.88rem; line-height: 1.45; margin-top: 2px; }
.gdmd .md-model-link { margin-top: auto; padding-top: 8px; font-size: 0.85rem; font-weight: 600; color: var(--md-teal-deep); }
@media (min-width: 700px) { .md-models { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .md-models { grid-template-columns: repeat(5, 1fr); gap: 16px; } .md-model { padding: 14px 14px 16px; } }

/* cards grid */
.md-cards { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: var(--space-lg); }
.md-card { background: #fff; border-radius: 14px; padding: 20px; border-top: 4px solid var(--md-teal); }
.md-card h3 { margin: 0 0 6px; font-size: 1.02rem; font-weight: 600; }
.md-card p { margin: 0; line-height: 1.55; font-size: 0.94rem; }
@media (min-width: 700px) { .md-cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .md-cards--4 { grid-template-columns: repeat(4, 1fr); } }

/* places */
.md-places { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-md); padding: 0; list-style: none; }
.md-places li { background: #fff; border: 1px solid var(--md-teal-tint); border-radius: 999px; padding: 8px 14px; font-size: 0.92rem; }

/* scope */
.md-scope { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: var(--space-lg); }
.md-scope > div { background: #fff; border-radius: 14px; padding: 20px; }
.md-scope h3 { margin: 0 0 10px; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--md-teal-deep); }
.md-scope ul { margin: 0; padding-left: 1.1em; line-height: 1.6; }
@media (min-width: 800px) { .md-scope { grid-template-columns: 1fr 1fr; } }

/* documents */
.md-docs { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: var(--space-lg); }
.md-doc { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: #fff; border-radius: 12px; padding: 14px 16px; text-decoration: none; border: 1px solid var(--md-teal-tint); }
.md-doc:hover { border-color: var(--md-teal); }
.md-doc span { color: var(--md-ink); font-weight: 500; }
.md-doc small { color: var(--md-teal-deep); font-weight: 600; white-space: nowrap; }
@media (min-width: 800px) { .md-docs { grid-template-columns: 1fr 1fr; } }

/* spec table */
.md-spec { width: 100%; border-collapse: collapse; margin-top: var(--space-lg); background: #fff; border-radius: 14px; overflow: hidden; font-size: 0.94rem; }
.md-spec th, .md-spec td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--md-teal-light); vertical-align: top; line-height: 1.45; }
.md-spec th { width: 40%; font-weight: 600; color: var(--md-teal-deep); }
.md-spec tr:last-child th, .md-spec tr:last-child td { border-bottom: 0; }
.md-spec code { font-family: inherit; overflow-wrap: anywhere; }

/* size table */
.md-sizes { width: 100%; border-collapse: collapse; margin-top: var(--space-md); background: #fff; border-radius: 14px; overflow: hidden; font-size: 0.94rem; }
.md-sizes th, .md-sizes td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--md-teal-light); }
.md-sizes thead th { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--md-teal-deep); }
.md-sizes tr.is-current td { background: var(--md-teal-light); font-weight: 600; }

/* FAQ */
.md-faq { margin-top: var(--space-lg); max-width: 820px; }
.md-faq details { background: #fff; border-radius: 12px; padding: 0 18px; margin-bottom: 10px; border: 1px solid var(--md-teal-tint); }
.md-faq summary { cursor: pointer; padding: 16px 0; font-weight: 500; list-style: none; position: relative; padding-right: 28px; }
.md-faq summary::-webkit-details-marker { display: none; }
.md-faq summary::after { content: "+"; position: absolute; right: 0; top: 13px; font-size: 1.3rem; color: var(--md-teal-deep); }
.md-faq details[open] summary::after { content: "\2212"; }
.md-faq details p { margin: 0 0 16px; line-height: 1.6; }

/* closing band */
.md-band { background: var(--md-teal-deep); color: #fff; padding: var(--space-3xl) 0; text-align: center; }
.md-band h2 { font-weight: 300; font-size: clamp(1.6rem, 3.6vw, 2.3rem); margin: 0 0 10px; color: #fff; }
.md-band p { margin: 0 auto var(--space-lg); max-width: 620px; line-height: 1.6; color: rgba(255, 255, 255, 0.88); }
.gdmd .md-band .md-btn-primary { background: #fff; color: var(--md-teal-deep); border-color: #fff; }
.gdmd .md-band .md-btn-primary:hover { background: var(--md-teal-light); }
.gdmd .md-band a:not(.md-btn) { color: #fff; }

/* model page: the gallery sits on the light teal tile; info column */
.gdmd .pdp-hero { background: linear-gradient(180deg, var(--md-teal-light) 0%, var(--md-cream) 100%); }
.gdmd .pdp-media-main { background: #fff; border-radius: 20px; }
.gdmd .pdp-thumb { background: #fff; }
.gdmd .pdp-thumb.active { border-color: var(--md-teal-deep); }
.gdmd .pdp-thumb:focus-visible { outline-color: var(--md-teal-deep); }
.gdmd .pdp-title { color: var(--md-ink); }
.md-buy { margin-top: var(--space-lg); background: #fff; border-radius: 16px; padding: 18px; border: 1px solid var(--md-teal-tint); }
.md-buy p { margin: 10px 0 0; font-size: 0.88rem; line-height: 1.5; }
.md-buy .md-btn { width: 100%; }

/* stand-in for a size with no render yet (GD-MD25) */
.md-noimg { display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1; width: 100%; background: var(--md-teal-light); border: 2px dashed var(--md-teal-tint); border-radius: 12px; margin-bottom: 10px; font-weight: 600; color: var(--md-teal-deep); font-size: 1.05rem; }
.md-noimg small { font-weight: 400; font-size: 0.78rem; color: #5d5e5d; margin-top: 4px; }
.md-noimg--main { margin: 0; border-radius: 20px; font-size: 1.6rem; }

/* ---- Medical theme for the whole page: header, buttons, footer (body.md-theme, /gdmd/ only) ----
   The site's shared colour variables are re-pointed to the medical palette for these pages only,
   so every component built on them (header, dropdowns, buttons, footer, consent chip, region
   selector) turns teal without touching styles.css. */
body.md-theme {
  --color-green-dark: #0A6570;
  --color-green-mid: #0C7C89;
  --color-green-soft: #0E8E9C;
  --color-green-light: #E6F6F8;
  --color-text-dark: #373837;
  --color-text-muted: rgba(55, 56, 55, 0.72);
  --color-border: rgba(10, 101, 112, 0.14);
}
body.md-theme .site-header { border-bottom-color: var(--md-teal-tint, #CCEFF3); }
/* the GD-MD lockup: GD-MD, a hairline, a smaller Green Drain wordmark, on one line (2026-10-28); two links since
   2026-11-03, GD-MD to /gdmd/ and the wordmark to the Green Drain home page */
body.md-theme .md-lockup { gap: 12px; }
body.md-theme .md-lockup-part { display: block; }
body.md-theme .md-lockup-img { display: block; height: 26px; width: auto; }
body.md-theme .md-lockup-rule { display: block; width: 1px; height: 22px; background: #373837; opacity: 0.35; }
/* the way back to the standard site in the phone menu (the desktop has the wordmark link) */
body.md-theme .md-home-link { display: none; }
body.md-theme .nav-links.mobile-open .md-home-link { display: block; font-size: 1.5rem; font-weight: var(--font-weight-light);
  padding: var(--space-md) 0; color: #373837; text-decoration: none; }
body.md-theme .site-footer { background: #073F46; border-top: 4px solid #00B8CC; }
body.md-theme .form-message--success { background: #E6F6F8; border-color: #00B8CC; color: #0A6570; }

/* ---- eIFU page (/gdmd/instructions) ---- */
.md-ifu { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); }
.md-toc { background: var(--md-teal-light); border-radius: 14px; padding: 16px 18px; align-self: start; }
.md-toc-title { margin: 0 0 8px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--md-teal-deep); }
.md-toc ol { margin: 0; padding-left: 1.3em; line-height: 1.9; font-size: 0.92rem; }
.md-ifu-body { max-width: 760px; }
.md-ifu-body h2 { font-weight: 400; font-size: 1.35rem; margin: var(--space-xl) 0 var(--space-sm); padding-top: var(--space-sm); border-top: 1px solid var(--md-teal-tint); scroll-margin-top: 90px; }
.md-ifu-body h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.md-ifu-body p, .md-ifu-body li { line-height: 1.65; }
.md-ifu-body ul, .md-ifu-body ol { padding-left: 1.3em; }
.md-dl { margin: 0; display: grid; gap: 10px; }
.md-dl > div { display: grid; grid-template-columns: 1fr; gap: 2px; }
.md-dl dt { font-weight: 600; color: var(--md-teal-deep); font-size: 0.88rem; }
.md-dl dd { margin: 0; }
@media (min-width: 640px) { .md-dl > div { grid-template-columns: 220px 1fr; gap: 16px; } }
.md-figure { margin: var(--space-lg) 0 0; background: #fff; border-radius: 14px; padding: 16px; border: 1px solid var(--md-teal-tint); }
.md-figure img { display: block; width: 100%; height: auto; }
.md-figure figcaption { margin-top: 10px; font-size: 0.85rem; color: #5d5e5d; }
.md-ifu-body .md-sizes code { font-family: inherit; overflow-wrap: anywhere; }
@media (min-width: 1024px) { .md-ifu { grid-template-columns: 240px 1fr; gap: 56px; } .md-toc { position: sticky; top: 96px; } }
.md-form { display: grid; gap: 14px; max-width: 720px; margin-top: var(--space-lg); background: #fff; border-radius: 16px; padding: 20px; }
.md-form label { display: grid; gap: 6px; font-size: 0.9rem; font-weight: 500; }
.md-form input, .md-form textarea { font: inherit; font-weight: 400; padding: 11px 12px; border: 1px solid #c9d6d8; border-radius: 10px; background: #fff; color: var(--md-ink); }
.md-form input:focus, .md-form textarea:focus { outline: 2px solid var(--md-teal-deep); outline-offset: 1px; border-color: var(--md-teal-deep); }
.md-form-row { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .md-form-row { grid-template-columns: 1fr 1fr; } }
.md-form .md-btn { justify-self: start; border: 0; cursor: pointer; }
@media (max-width: 600px) {
  .md-sizes th, .md-sizes td { padding: 9px 8px; font-size: 0.84rem; overflow-wrap: anywhere; }
  .md-sizes thead th { letter-spacing: 0.04em; }
}
.md-form label, .md-form-row > * { min-width: 0; } .md-form input, .md-form textarea { width: 100%; min-width: 0; box-sizing: border-box; }
.md-form > * { min-width: 0; }

/* the site's base styles strip list markers; the IFU's numbered steps and bullets must show */
.md-ifu-body ul { list-style: disc; } .md-ifu-body ol { list-style: decimal; } .md-toc ol { list-style: decimal; }
.md-ifu-body li { margin-bottom: 4px; padding-left: 2px; }
.md-form label > span b { color: var(--md-teal-deep); font-weight: 600; }

/* ---- the GD-MD inquiry form (/gdmd/inquiry, 2026-11-03): grouped, with selects and tick boxes ---- */
.md-form--wide { max-width: 860px; margin-top: 0; padding: 28px; gap: 22px; border: 1px solid var(--md-line, #d6e2e4); }
.md-form fieldset { display: grid; gap: 14px; margin: 0; padding: 0 0 22px; border: 0; border-bottom: 1px solid var(--md-line, #d6e2e4); min-width: 0; }
.md-form legend { padding: 0; margin-bottom: 4px; font-size: 1.05rem; font-weight: 600; color: var(--md-teal-deep); }
.md-form select { font: inherit; font-weight: 400; width: 100%; min-width: 0; box-sizing: border-box; padding: 11px 36px 11px 12px; border: 1px solid #c9d6d8;
  border-radius: 10px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%230A6570' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;
  color: var(--md-ink); -webkit-appearance: none; appearance: none; }
.md-form select:focus { outline: 2px solid var(--md-teal-deep); outline-offset: 1px; border-color: var(--md-teal-deep); }
.md-legend-sub { margin: 4px 0 -4px; font-size: 0.9rem; font-weight: 500; }
.md-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 16px; }
.md-form label.md-check { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; cursor: pointer; }
.md-form .md-check input { width: 18px; height: 18px; flex: 0 0 18px; margin: 2px 0 0; padding: 0; accent-color: var(--md-teal-deep); }
@media (max-width: 600px) { .md-form--wide { padding: 18px; } .md-checks { grid-template-columns: 1fr 1fr; } }

/* ---- install step cards + drain types (round 4) ---- */
.md-stepcards { list-style: none; padding: 0; margin: var(--space-lg) 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.md-stepcard { background: #fff; border-radius: 16px; padding: 12px 12px 16px; display: flex; flex-direction: column; gap: 4px; line-height: 1.5; font-size: 0.92rem; }
.md-stepcard b { font-size: 1rem; margin-top: 8px; }
.md-stepcard-art { position: relative; background: var(--md-teal-light); border-radius: 12px; overflow: hidden; }
.md-stepcard-art img { display: block; width: 100%; height: auto; }
.md-stepcard-art .md-noimg { margin: 0; border-radius: 12px; }
.md-stepcard-n { position: absolute; top: 10px; left: 10px; width: 30px; height: 30px; border-radius: 50%; background: var(--md-teal-deep); color: #fff; font-weight: 600; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; }
@media (min-width: 900px) { .md-stepcards { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
.md-ifu-body .md-stepcards { list-style: none; padding: 0; }
.md-ifu-body .md-stepcards--ifu { grid-template-columns: 1fr 1fr; }
.md-figure-details { margin-top: var(--space-md); }
.md-figure-details summary { cursor: pointer; color: var(--md-teal-deep); font-weight: 500; }
.md-drains { list-style: none; padding: 0; margin: var(--space-lg) 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.md-drains li { background: #fff; border-radius: 16px; padding: 14px; text-align: center; border: 1px solid var(--md-teal-tint); }
.md-drains img { display: block; width: 100%; height: auto; }
.md-drains span { display: block; margin-top: 6px; font-weight: 600; }
@media (min-width: 900px) { .md-drains { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
.md-stepcards--ifu .md-stepcard-n { display: none; }  /* the IFU's own step numbers are in the card titles */

/* ---- polish pass 2026-10-14 ---- */
.md-scope ul { list-style: disc; }
.md-scope li { margin-bottom: 6px; }
@media (max-width: 899px) { .md-hero { padding-bottom: var(--space-xl); } .md-hero-grid { gap: var(--space-lg); } }
.md-picker { list-style: none; padding: 0; margin: var(--space-lg) 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.md-picker a { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; align-items: baseline; background: #fff; border: 1px solid var(--md-teal-tint); border-radius: 12px; padding: 12px 14px; text-decoration: none; color: var(--md-ink); transition: border-color .2s ease; min-height: 44px; }
.md-picker a:hover { border-color: var(--md-teal); }
.md-picker b { color: var(--md-teal-deep); font-weight: 600; }
.md-picker small { color: #5d5e5d; font-size: 0.8rem; }
.md-picker span { grid-column: 1 / -1; font-size: 0.88rem; }
.md-picker a.is-current { background: var(--md-teal-deep); border-color: var(--md-teal-deep); color: #fff; }
.md-picker a.is-current b, .md-picker a.is-current small { color: #fff; }
@media (min-width: 700px) { .md-picker { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .md-picker { grid-template-columns: repeat(5, 1fr); gap: 12px; } }

/* =====================================================================
   Round 6 (2026-10-19): a landing page for healthcare specialists.
   One card style, one numeral style, header rows, sticky section menu.
   ===================================================================== */
.gdmd { --md-line: #D6ECEF; }
.gdmd .md-card { background: #fff; border: 1px solid var(--md-line); border-top: 1px solid var(--md-line); border-radius: 14px; padding: 20px; box-shadow: none; }
.gdmd .md-card h3 { margin: 0 0 6px; font-size: 1rem; font-weight: 600; color: var(--md-ink); }
.gdmd .md-card p { margin: 0; line-height: 1.6; font-size: 0.95rem; }
.md-num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--md-teal-deep); color: #fff; font-size: 0.85rem; font-weight: 600; margin-bottom: 12px; }
.md-grid { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; grid-template-columns: 1fr; }
@media (min-width: 700px) { .md-grid--2, .md-grid--4 { grid-template-columns: 1fr 1fr; } .md-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .md-grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* sections: tighter, title left / intro right */
.gdmd .md-section { padding: 72px 0; }
@media (max-width: 899px) { .gdmd .md-section { padding: 48px 0; } }
.md-head { display: grid; grid-template-columns: 1fr; gap: 10px 48px; margin-bottom: 28px; align-items: start; }
@media (min-width: 1024px) { .md-head { grid-template-columns: 5fr 7fr; } }
.gdmd .md-head .md-title { margin: 0; }
.md-head-intro p { margin: 0; line-height: 1.65; font-size: 1rem; }
.md-kicker { margin: 0 0 6px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--md-teal-deep); }
.gdmd .md-note { margin: 18px 0 0; max-width: none; }
.md-subtitle { margin: 36px 0 14px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--md-teal-deep); }
.md-compliance .md-subtitle { margin-top: 0; }

/* hero: facts row instead of boxed pills; quieter note */
.gdmd .md-hero { padding: 24px 0 56px; }
.gdmd .md-hero h1 { font-size: clamp(2rem, 4.2vw, 2.9rem); }
.md-facts { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 14px 28px; }
.md-facts li { display: flex; flex-direction: column; padding-left: 14px; border-left: 2px solid var(--md-teal); }
.md-facts b { font-size: 1rem; font-weight: 600; color: var(--md-ink); }
.md-facts span { font-size: 0.82rem; color: #5d5e5d; }
.gdmd .md-region { background: none; border: 0; padding: 0; margin-top: 18px; font-size: 0.86rem; color: #5d5e5d; }
.gdmd .md-hero-art { box-shadow: none; border: 1px solid var(--md-line); }

/* sticky section menu */
.md-subnav { position: sticky; top: var(--md-hdr, 60px); z-index: 900; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(6px); border-bottom: 1px solid var(--md-line); }
.md-subnav-inner { display: flex; align-items: center; gap: 20px; min-height: 52px; }
/* the size's name and range, left; a thin rule before the section links (2026-11-04) */
.md-subnav-name { display: inline-flex; align-items: baseline; gap: 8px; flex: none; padding-right: 20px; border-right: 1px solid var(--md-line); white-space: nowrap; }
.md-subnav-name b { font-weight: 600; font-size: 0.98rem; color: var(--md-ink); }
.md-subnav-name span { font-size: 0.86rem; color: #5d5e5d; }
@media (max-width: 699px) { .md-subnav-name { display: none; } }
.md-subnav-links { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.md-subnav-links::-webkit-scrollbar { display: none; }
.md-subnav-links a { white-space: nowrap; padding: 8px 12px; border-radius: 999px; font-size: 0.9rem; color: var(--md-ink); text-decoration: none; }
.md-subnav-links a:hover { background: var(--md-teal-light); }
.md-subnav-links a.is-active { background: var(--md-teal-light); color: var(--md-teal-deep); font-weight: 600; }
.gdmd .md-subnav-cta { padding: 9px 18px; font-size: 0.88rem; white-space: nowrap; }
@media (max-width: 699px) { .md-subnav-cta { display: none; } }
.gdmd [id] { scroll-margin-top: calc(var(--md-hdr, 60px) + 64px); }

/* size cards: the whole card is the link; range first, inch quiet */
.gdmd .md-model { padding: 14px; border: 1px solid var(--md-line); }
.gdmd .md-model:hover { border-color: var(--md-teal); transform: none; }
.md-model-name { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 1rem; color: var(--md-ink); }
.md-arrow { color: var(--md-teal-deep); transition: transform .2s ease; }
.md-model:hover .md-arrow { transform: translateX(3px); }
.gdmd .md-model-fit { font-size: 0.95rem; font-weight: 500; color: var(--md-ink); margin-top: 2px; }
.md-model-inch { font-size: 0.82rem; color: #5d5e5d; }
.gdmd .md-model-link { display: none; }

/* drain tiles, step cards, scope, docs, faq: all the one card */
.gdmd .md-drains li { text-align: center; padding: 16px; }
.gdmd .md-drains li span { display: block; margin-top: 8px; font-weight: 600; }
.gdmd .md-stepcard { padding: 14px 14px 18px; }
.gdmd .md-stepcard-art { margin-bottom: 14px; border-radius: 10px; background: var(--md-teal-light); }
.gdmd .md-stepcard .md-num { margin-bottom: 8px; }
.gdmd .md-stepcard-n { display: none; }
.gdmd .md-scope h3 { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--md-teal-deep); }
.gdmd .md-scope ul { list-style: disc; margin: 8px 0 0; padding-left: 1.1em; line-height: 1.6; }
.gdmd .md-docs { display: grid; gap: 10px; grid-template-columns: 1fr; margin: 0; }
@media (min-width: 700px) { .gdmd .md-grid--2.md-docs { grid-template-columns: 1fr 1fr; } }
.gdmd .md-doc { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; text-decoration: none; }
.gdmd .md-doc:hover { border-color: var(--md-teal); }
.gdmd .md-faq { max-width: none; margin: 0; display: grid; gap: 10px; }
.gdmd .md-faq details { margin: 0; padding: 0 20px; }

/* compliance: facts list beside the documents */
.md-compliance { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 1024px) { .md-compliance { grid-template-columns: 7fr 5fr; gap: 40px; } }
.md-facts-list { margin: 0; padding: 4px 20px; }
.md-facts-list > div { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--md-teal-light); }
.md-facts-list > div:last-child { border-bottom: 0; }
.md-facts-list dt { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--md-teal-deep); }
.md-facts-list dd { margin: 0; line-height: 1.55; font-size: 0.95rem; }
@media (min-width: 640px) { .md-facts-list > div { grid-template-columns: 170px 1fr; gap: 16px; } }
.md-code { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

/* tables in cards */
.gdmd .md-sizes, .gdmd .md-spec { margin-top: 0; border: 1px solid var(--md-line); }

/* phones: an inquiry bar on the size pages */
.md-mobilebar { display: none; }
@media (max-width: 899px) {
  .md-has-mobilebar .md-mobilebar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 950; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.97); border-top: 1px solid var(--md-line); }
  .md-has-mobilebar .md-mobilebar .md-btn { width: 100%; }
  .md-has-mobilebar { padding-bottom: 72px; }
  .md-has-mobilebar .consent-chip { bottom: 84px; }
}

@media (min-width: 1024px) { .md-head { grid-template-columns: 6fr 6fr; } }
.gdmd .md-head .md-title { font-size: clamp(1.6rem, 2.8vw, 2.15rem); text-wrap: balance; }
@media (max-width: 599px) { .gdmd .md-hero .btn { width: 100%; justify-content: center; text-align: center; } }
/* hero on plain white (Eddie, 2026-10-19): the product and the teal carry the contrast */
.gdmd .md-hero, .gdmd .pdp-hero { background: #fff; border-bottom: 1px solid var(--md-line); }
.gdmd .pdp-media-main { border: 1px solid var(--md-line); border-radius: 20px; overflow: hidden; }

/* ---- EU MDR documents (/gdmd/regulatory, moved from /medical-device 2026-10-19) ----
   The pages keep their own markup for Erik's wording; these rules give it the section's look. */
.md-hero--doc h1 { max-width: 900px; }
.md-hero--doc .md-lede { max-width: 820px; }
.md-actions--center { justify-content: center; }
.gdmd .md-btn-ghost-light { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, 0.7); }
.gdmd .md-btn-ghost-light:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; }
.gdmd .md-band .md-btn-ghost-light { color: #fff; }
.md-reg-page .gdmd .md-section > .container > .industry-section-body,
.md-reg-page .gdmd .industry-section-body { color: var(--md-ink); max-width: 820px; }
.md-reg-page .gdmd .cert-cards-grid { gap: 16px; }
.md-reg-page .gdmd .cert-card,
.md-reg-page .gdmd .mdr-fact-card,
.md-reg-page .gdmd .industry-download-card,
.md-reg-page .gdmd .regulatory-item { background: #fff; border: 1px solid var(--md-line); border-radius: 14px; box-shadow: none; }
.md-reg-page .gdmd .cert-card { padding: 24px; }
.md-reg-page .gdmd .cert-card-title { color: var(--md-ink); }
.md-reg-page .gdmd .cert-card-body, .md-reg-page .gdmd .cert-card-meta { color: rgba(55, 56, 55, 0.8); }
.md-reg-page .gdmd .cert-card-badge { background: var(--md-teal-deep) !important; }
.md-reg-page .gdmd .challenges-list { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 8px; }
@media (min-width: 768px) { .md-reg-page .gdmd .challenges-list { grid-template-columns: 1fr 1fr; } }
.md-reg-page .gdmd .challenge-item { margin: 0; padding: 22px; border: 1px solid var(--md-line); border-radius: 14px; background: #fff; }
.md-reg-page .gdmd .challenge-title { font-size: 1.05rem; font-weight: 600; color: var(--md-ink); margin: 0 0 8px; }
.md-reg-page .gdmd .challenge-desc { color: rgba(55, 56, 55, 0.82); line-height: 1.65; margin: 0; }
.md-reg-page .gdmd .mdr-fact-grid { margin: 8px 0 0; gap: 16px; }
.md-reg-page .gdmd .mdr-fact-card { padding: 20px; }
.md-reg-page .gdmd .mdr-verbatim,
.md-reg-page .gdmd .mdr-scope-callout { background: #fff; border: 1px solid var(--md-line); border-left: 4px solid var(--md-teal); border-radius: 0 14px 14px 0; margin: 0; }
.md-reg-page .gdmd .mdr-scope-list { color: var(--md-ink); }
.md-reg-page .gdmd .mdr-faq dt { color: var(--md-ink); }
.md-reg-page .gdmd .mdr-faq dd { color: rgba(55, 56, 55, 0.82); }
.md-reg-page .gdmd .mdr-meaning-grid { margin-top: 8px; gap: 16px; }
.md-reg-page .gdmd .mdr-meaning-grid > div { background: #fff; border: 1px solid var(--md-line); border-radius: 14px; padding: 22px; }
.md-reg-page .gdmd .mdr-meaning-grid h3 { color: var(--md-ink) !important; }
.md-reg-page .gdmd .industry-download-card { border-width: 1px; }
.md-reg-page .gdmd table { border: 1px solid var(--md-line); }
.md-hero--doc .breadcrumb { margin-bottom: 20px; }
.md-reg-page .gdmd .regulatory-item { padding: 20px 24px; }
.md-reg-page .gdmd a.btn-primary { color: #fff; }
.md-reg-page .gdmd a.btn-outline { display: inline-flex; justify-content: center; padding: 10px 20px; border: 2px solid var(--md-teal-deep); border-radius: 999px; color: var(--md-teal-deep); font-weight: 500; background: transparent; }
.md-reg-page .gdmd a.btn-outline:hover { background: var(--md-teal-light); }

/* ---- round 7 (2026-10-22): mission + evidence ---- */
.gdmd .md-mission { text-align: left; }
/* 2026-11-02 (Chris: the section sat narrower than the rest): full container width; the words keep a reading measure */
.gdmd .md-mission .md-kicker, .gdmd .md-mission-title, .gdmd .md-mission-body, .gdmd .md-mission-belief { max-width: 880px; }
.gdmd .md-mission-title { font-weight: 300; letter-spacing: -0.02em; font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.15; color: var(--md-ink); margin: 0 0 24px; text-wrap: balance; }
.gdmd .md-mission-body p { font-size: 1.12rem; line-height: 1.7; margin: 0 0 16px; color: var(--md-ink); }
.gdmd .md-mission-belief { margin: 28px 0 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--md-teal); font-size: 1.25rem; line-height: 1.5; font-weight: 400; color: var(--md-teal-deep); }
.gdmd .md-evidence { display: grid; grid-template-columns: 1fr; gap: 16px 40px; align-items: center; margin-top: 16px; padding: 28px; }
@media (min-width: 900px) { .gdmd .md-evidence { grid-template-columns: 4fr 8fr; } }
.gdmd .md-evidence-fig { margin: 0; }
.gdmd .md-evidence-fig b { display: block; font-size: clamp(2.6rem, 5vw, 3.6rem); font-weight: 300; letter-spacing: -0.03em; line-height: 1; color: var(--md-teal-deep); }
.gdmd .md-evidence-fig span { display: block; margin-top: 8px; font-size: 0.9rem; line-height: 1.45; color: rgba(55, 56, 55, 0.8); }
.gdmd .md-evidence-text p { margin: 0 0 10px; line-height: 1.65; }
.gdmd .md-evidence-text .md-note { margin: 0; }

/* 2026-10-22 e-commerce renders are on white: the card tile is white too */
.gdmd .md-model img { background: #fff; }

/* hub size cards: the cut-away fades in on hover or keyboard focus (Chris, 2026-10-22); touch screens just open the page */
.gdmd .md-model-art { position: relative; display: block; margin-bottom: 10px; border-radius: 12px; overflow: hidden; }
.gdmd .md-model-art img { margin-bottom: 0; }
.gdmd .md-model-art .md-model-alt { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; opacity: 0; transition: opacity .25s ease; }
@media (hover: hover) { .gdmd .md-model:hover .md-model-alt { opacity: 1; } }
.gdmd .md-model:focus-visible .md-model-alt { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .gdmd .md-model-art .md-model-alt { transition: none; } }

/* ---- hub size strip under the hero (2026-10-22): the homepage's product strip, in the medical palette ---- */
.gdmd .md-products { background: var(--md-teal-deep); }
.gdmd .md-products .md-title, .gdmd .md-products .md-head-intro p { color: #fff; }
.gdmd .md-products .md-head-intro a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.gdmd .md-products .md-model { border-color: transparent; }
.gdmd .md-products .md-model:hover, .gdmd .md-products .md-model:focus-visible { border-color: var(--md-teal); }
@media (max-width: 899px) {
  .gdmd .md-products .md-models { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px;
    margin-left: calc(-1 * var(--container-padding, 20px)); margin-right: calc(-1 * var(--container-padding, 20px));
    padding: 0 var(--container-padding, 20px) 8px; scroll-padding: 0 var(--container-padding, 20px); scrollbar-width: none; }
  .gdmd .md-products .md-models::-webkit-scrollbar { display: none; }
  .gdmd .md-products .md-model { flex: 0 0 62%; max-width: 260px; scroll-snap-align: start; }
}

/* ---- image slots (2026-10-24): the site placeholder in GD-MD teal; hidden on greendrains.com by .prod ---- */
.gdmd .md-slot { background: var(--md-teal-light); border: 2px dashed rgba(10, 101, 112, 0.35); border-radius: 12px;
  color: var(--md-teal-deep); padding: 14px; width: 100%; font-size: 0.82rem; line-height: 1.45; }
.gdmd .md-slot span { max-width: 32ch; }
.gdmd .md-slot b { display: block; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 4px; }
.gdmd .md-howcard .md-slot { margin-bottom: 16px; }
.gdmd .md-photos { margin-top: 32px; }
.gdmd .md-slot--pack { margin-top: 20px; }
.gdmd .md-plate { padding: 32px 0 0; }
@media (max-width: 899px) { .gdmd .md-photos { grid-template-columns: 1fr 1fr; } }

/* ---- brochure scenes (2026-10-24): hero cut-away fills its card; care-environment photos under the mission ---- */
.gdmd .md-hero-art { padding: 0; overflow: hidden; background: #fff; }
.gdmd .md-hero-art img { aspect-ratio: 4 / 5; object-fit: cover; }
.gdmd .md-setting { margin: 0; }
.gdmd .md-setting img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; }
.gdmd .md-setting figcaption { margin-top: 8px; font-size: 0.88rem; font-weight: 500; color: var(--md-ink); }
.gdmd .md-photos .md-slot { aspect-ratio: 1 / 1; }
.gdmd .md-slot { box-sizing: border-box; }

/* ---- phones (2026-10-24, Chris: "like the grid option on the products ... on the standard homepage ... prevents
   having to scroll for hours"): two-column grids as the homepage uses, compact rows, tighter sections ---- */
@media (max-width: 699px) {
  .gdmd .md-section { padding: 40px 0; }
  .gdmd .md-head { margin-bottom: 18px; }
  .gdmd .md-grid--4 { grid-template-columns: 1fr 1fr; gap: 10px; }
  /* the ten sizes: a two-column grid like the homepage products, not a sideways strip */
  .gdmd .md-products .md-models { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; overflow: visible;
    margin: 0; padding: 0; scroll-snap-type: none; }
  .gdmd .md-products .md-model { flex: none; max-width: none; padding: 10px; }
  .gdmd .md-model-name { font-size: 0.92rem; }
  .gdmd .md-model-fit { font-size: 0.8rem; }
  .gdmd .md-model-inch { font-size: 0.74rem; }
  /* how it works: one compact row per step, picture beside the words */
  .gdmd .md-howcard { display: grid; grid-template-columns: 104px 1fr; grid-template-rows: auto auto 1fr; column-gap: 14px; padding: 14px; }
  .gdmd .md-howcard > .md-slot, .gdmd .md-howcard > img { grid-row: 1 / span 3; margin: 0; align-self: start; }
  .gdmd .md-howcard > .md-slot { padding: 6px; font-size: 0.6rem; }
  .gdmd .md-howcard > .md-slot span { max-width: none; }
  .gdmd .md-howcard .md-num { margin-bottom: 4px; }
  .gdmd .md-howcard h3 { font-size: 0.98rem; margin: 0 0 4px; }
  .gdmd .md-howcard p { font-size: 0.88rem; margin: 0; }
  .gdmd .md-evidence { padding: 18px; }
  /* drain types and install steps: two by two */
  .gdmd .md-drains li { padding: 10px; }
  .gdmd .md-drains li span { font-size: 0.85rem; }
  .gdmd .md-stepcard { padding: 10px 10px 14px; font-size: 0.86rem; }
  .gdmd .md-stepcard h3 { font-size: 0.95rem; }
  .gdmd .md-stepcard-art { margin-bottom: 10px; }
  /* compliance: label and value on one line */
  .gdmd .md-facts-list { padding: 2px 14px; }
  .gdmd .md-facts-list > div { grid-template-columns: 104px 1fr; column-gap: 12px; padding: 10px 0; font-size: 0.88rem; }
  .gdmd .md-scope > div, .gdmd .md-scope .md-card { padding: 16px; }
  .gdmd .md-scope li { margin-bottom: 4px; font-size: 0.9rem; }
  .gdmd .md-photos { margin-top: 22px; gap: 10px; }
}

/* ---- hub hero (2026-10-25, v2): the standard homepage's hero, rule for rule (site/css/hero.css) ----
   Desktop: pinned at 640px (Chris: the homepage height "looks a lot better ... leave room for teaser"); the 3168 x 1344
   picture is height-driven, its right edge on the content column (>1200), the left faded into the page behind the copy
   with the homepage's own masks. Tablet: the picture as a band above the copy. Phone: cropped on the drain and the room. */
.gdmd .md-hero--plate { padding: 0; background: #fff; border-bottom: 0; position: relative; overflow: hidden; }
.gdmd .md-plate-img img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: 72% 50%; }
.gdmd .md-plate-copy { padding-top: 22px; padding-bottom: 28px; }
.gdmd .md-plate-copy .breadcrumb { margin-bottom: 14px; }
.gdmd .md-plate-copy h1 { margin-bottom: 14px; }
.gdmd .md-plate-copy .md-facts { margin-top: 22px; }
.gdmd .md-plate-copy .md-region { margin-top: 14px; font-size: 0.86rem; }
@media (min-width: 700px) {
  .gdmd .md-plate-img img { aspect-ratio: auto; height: 420px; object-position: 70% 50%; }
}
@media (min-width: 1024px) {
  /* min-height, not height: the language editions run longer than English and must never be clipped (2026-11-03) */
  .gdmd .md-hero--plate { min-height: 640px; }
  .gdmd .md-plate-img { position: absolute; inset: 0; }
  .gdmd .md-plate-img img { position: absolute; top: 0; right: 0; height: 100%; width: auto; max-width: none; aspect-ratio: 3168 / 1344;
    object-fit: cover;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 16%, #000 68%, #000 100%);
            mask-image: linear-gradient(to right, transparent 0%, transparent 16%, #000 68%, #000 100%); }
  .gdmd .md-plate-copy { position: relative; z-index: 1; min-height: 640px; box-sizing: border-box; display: flex; flex-direction: column;
    justify-content: center; padding-top: 68px; padding-bottom: 28px; }   /* 68px: clear of the breadcrumb above, however long the copy */
  .gdmd .md-plate-copy .breadcrumb { position: absolute; top: 22px; }
  .gdmd .md-plate-copy > :not(.breadcrumb) { max-width: 500px; }
  .gdmd .md-plate-copy h1 { font-size: clamp(2.3rem, 3.1vw, 3rem); text-wrap: balance; }
}
/* the picture sits 160px further right than the homepage's, so the room (basin, dispensers) starts where the copy
   ends; it runs off the right edge, where only the trap arm is; left fade a little firmer than the homepage's */
@media (min-width: 1024px) {
  .gdmd .md-plate-img img { right: calc(50% - 760px);
    /* left: fades behind the copy; right: dissolves into white like the homepage (Chris, 2026-10-25: wide screens showed a hard edge) */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 20%, #000 60%, #000 84%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0%, transparent 20%, #000 60%, #000 84%, transparent 100%); }
  .gdmd .md-plate-copy > :not(.breadcrumb) { max-width: min(500px, calc(50vw - 60px)); }
  .gdmd .md-products { padding-top: 44px; }
}

/* 2026-10-26: drain-type cards from the application renders; on size pages they follow the size table */
.gdmd .md-subhead { margin: var(--space-xl) 0 0; font-size: 1.05rem; font-weight: 600; }
@media (min-width: 1024px) { .md-drains[data-n="5"] { grid-template-columns: repeat(5, 1fr); } }

/* ---- section pictures (2026-11-02): how-it-works renders, packaging tiles ---- */
.gdmd .md-how-img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; margin-bottom: 16px; background: #fff; }
@media (max-width: 899px) { .gdmd .md-howcard > .md-how-img { width: 104px; } }
/* 2026-11-05: the section drawings (portrait, own cream ground) replace the square renders */
.gdmd .md-how-img--drawing { aspect-ratio: 61.74 / 73.28; background: none; border-radius: 10px; max-width: 300px; margin-left: auto; margin-right: auto; }
@media (max-width: 899px) { .gdmd .md-howcard > .md-how-img--drawing { margin: 0; } }
.gdmd .md-pack { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }
.gdmd .md-pack figure { margin: 0; }
.gdmd .md-pack img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 12px; }
.gdmd .md-pack figcaption { margin-top: 8px; font-size: 0.85rem; font-weight: 500; color: var(--md-ink); }
.md-inquiry { display: grid; gap: var(--space-xl); align-items: start; }
.md-inquiry-aside ul { margin: 0 0 18px; padding-left: 18px; list-style: disc; display: grid; gap: 10px; }
.md-inquiry-aside p, .md-inquiry-aside li { font-size: 0.95rem; line-height: 1.55; }
.md-inquiry-aside .md-subtitle { margin-top: 24px; } .md-inquiry-aside .md-subtitle:first-child { margin-top: 0; }
@media (min-width: 1024px) { .md-inquiry { grid-template-columns: minmax(0, 1fr) 300px; } .md-inquiry-aside { position: sticky; top: 96px; } }

/* ---- the way back to the standard line (2026-11-03): a slim bar above the header on every GD-MD page ---- */
.announcement-bar.md-linebar { background: #0A6570; }
.md-linebar p { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 18px; font-size: 0.8rem; color: #fff; }
.md-linebar-what { font-weight: 600; letter-spacing: 0.02em; }
.announcement-bar.md-linebar a { color: #fff; text-decoration: underline; text-underline-offset: 3px; font-weight: 400; }
.md-linebar-short { display: none; }
@media (max-width: 600px) { .md-linebar-what, .md-linebar-long { display: none; } .md-linebar-short { display: inline; } }

/* ---- inquiry + distributor pages (2026-11-03, Chris: "get right to the chase. Here's the form"): a small hero, the
   form straight after it, the picture and the supporting points in the side panel ---- */
.md-hero--compact { padding: var(--space-lg) 0 var(--space-xl); }
.md-hero--compact h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin: 4px 0 10px; }
.md-hero--compact .md-lede { max-width: 760px; }
.md-section.md-section--form { padding-top: var(--space-xl); }
.md-aside-art { margin: -4px -4px 18px; }
.md-aside-art img { display: block; width: 100%; height: auto; border-radius: 12px; }
.md-aside-steps { margin: 0 0 18px; padding-left: 20px; list-style: decimal; display: grid; gap: 10px; }
.md-aside-steps li { font-size: 0.95rem; line-height: 1.55; padding-left: 2px; }
.md-aside-steps li::marker { color: var(--md-teal-deep); font-weight: 600; }

/* a long section intro sits under its title, at a reading width (2026-11-03 layout audit) */
@media (min-width: 1024px) { .md-head.md-head--stack { grid-template-columns: 1fr; } }
.md-head--stack .md-head-intro { max-width: 760px; }

/* 2026-11-03 layout audit: card grids on the regulatory pages and the IFU steps never leave one card on its own row */
@media (min-width: 900px) {
  .md-reg-page .gdmd .challenges-list:has(> :nth-child(3):last-child),
  .md-reg-page .gdmd .cert-cards-grid:has(> :nth-child(3):last-child),
  .md-reg-page .gdmd .mdr-fact-grid:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
  .md-reg-page .gdmd .mdr-fact-grid:has(> :nth-child(5):last-child) > :last-child,
  .md-reg-page .gdmd .mdr-fact-grid:has(> :nth-child(7):last-child) > :last-child,
  .md-reg-page .gdmd .mdr-fact-grid:has(> :nth-child(9):last-child) > :last-child { grid-column: 1 / -1; }
  .md-reg-page .gdmd .challenges-list:has(> :nth-child(5):last-child) > :last-child,
  .md-reg-page .gdmd .challenges-list:has(> :nth-child(7):last-child) > :last-child { grid-column: 1 / -1; }
  .md-ifu-body .md-stepcards--ifu { grid-template-columns: repeat(3, 1fr); }
}

/* Instructions for Use: the language picker at the top, and the notice on a draft translation (2026-11-03) */
.md-langs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: var(--space-md); font-size: 0.86rem; }
.md-langs-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--md-teal-deep); margin-right: 4px; }
.gdmd .md-langs a { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--md-teal-tint); background: #fff; color: var(--md-ink); text-decoration: none; line-height: 1.3; }
.gdmd .md-langs a:hover { border-color: var(--md-teal-deep); }
.gdmd .md-langs a[aria-current="page"] { background: var(--md-teal-deep); border-color: var(--md-teal-deep); color: #fff; }
.md-ifu-draft { margin: 0 0 var(--space-md); padding: 10px 14px; border-radius: 8px; background: #FFF4D6; border: 1px solid #E8C766; font-size: 0.88rem; line-height: 1.45; }
.md-ifu-body p + p { margin-top: 0.75em; }   /* the intended purpose is four paragraphs: they ran together */
/* the draft notice on a translated legal page (instructions, regulatory), until the language is signed off */
.md-draft-bar { background: #FFF4D6; border-bottom: 1px solid #E8C766; }
.md-draft-bar p { margin: 0; padding: 10px 0; font-size: 0.86rem; line-height: 1.45; color: var(--md-ink); }
.md-trans-note { border-bottom: 1px solid var(--md-line); }
.md-trans-note p { margin: 0; padding: 8px 0; font-size: 0.82rem; line-height: 1.45; color: var(--md-ink); opacity: 0.75; }
/* long words in the spec and size tables (German compounds such as "Qualitätsmanagementsystem") hyphenate or break,
   so a table never pushes a phone screen sideways (2026-11-04 audit) */
.gdmd .md-spec th, .gdmd .md-spec td, .gdmd .md-sizes th, .gdmd .md-sizes td { overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }
/* the language editions: long compounds (Danish "Overensstemmelseserklæring", German, Swedish) hyphenate at the
   language's own break points, and a form label may break rather than widen the page (2026-11-04 audit) */
html:not([lang="en"]) .gdmd { hyphens: auto; -webkit-hyphens: auto; }
.gdmd .md-check, .gdmd .md-check span, .gdmd .md-form label > span, .gdmd legend { overflow-wrap: anywhere; }

/* the GD-MD films (scripts/gdmd_films.py): the standard player (product.css .pdp-film), with the line's button colour, no green */
.gdmd .md-film .pdp-film-pill { background: var(--md-teal-deep); color: #fff; }
.gdmd .md-film .pdp-film-play:hover .pdp-film-pill, .gdmd .md-film .pdp-film-play:focus-visible .pdp-film-pill { background: #084f58; }
.gdmd .md-film .pdp-film-play:focus-visible .pdp-film-pill { outline-color: var(--md-teal-deep); }
.gdmd .md-film figcaption strong, .gdmd .md-film .pdp-film-step { color: var(--md-ink); }
.gdmd .md-film .pdp-film-transcript summary { color: var(--md-teal-deep); }
/* the chapter bar on GD-MD: teal, no green */
.gdmd .md-film .film-chapter:hover { border-color: var(--md-teal-deep); }
.gdmd .md-film .film-chapter:focus-visible { outline-color: var(--md-teal-deep); }
.gdmd .md-film .film-chapter-fill { background: var(--md-teal-deep); }
.gdmd .md-film .film-chapter-num { background: rgba(0, 184, 204, 0.14); }
.gdmd .md-film .film-chapter.on .film-chapter-num { background: var(--md-teal-deep); color: #fff; }
.gdmd .film-jump a { color: var(--md-ink); }

/* The documents as their own pages (Chris, 2026-11-05; scripts/gdmd_docs.py): the first pages of the real PDF fanned above the
   download button, page 1 in front; page 1 alone on the hub's document cards. The pictures are links to the PDF, but the
   button stays the one control (they are hidden from screen readers and the tab order). */
.md-doc-stack { position: relative; display: block; width: min(240px, 62vw); aspect-ratio: 1 / 1.414; margin: 8px auto 0; }
.md-doc-page { display: block; width: 100%; height: auto; background: #fff; border: 1px solid var(--md-line, #d6e2e4); border-radius: 3px; }
.md-doc-stack .md-doc-page { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: top;
  box-shadow: 0 1px 2px rgba(10, 40, 46, 0.08), 0 8px 22px rgba(10, 40, 46, 0.12); transition: transform 0.25s ease; }
.md-doc-stack .md-doc-p2 { transform: translate(-16px, 8px) rotate(-5deg); }
.md-doc-stack .md-doc-p3 { transform: translate(18px, 12px) rotate(5deg); }
.md-doc-stack .md-doc-p1 { box-shadow: 0 2px 4px rgba(10, 40, 46, 0.10), 0 14px 32px rgba(10, 40, 46, 0.18); }
.md-doc-stack:hover .md-doc-p2 { transform: translate(-28px, 6px) rotate(-8deg); }
.md-doc-stack:hover .md-doc-p3 { transform: translate(30px, 10px) rotate(8deg); }
.md-doc-stack:hover .md-doc-p1 { transform: translateY(-4px); }
.md-doc-meta { margin: 22px 0 0; text-align: center; font-size: 0.85rem; color: rgba(55, 56, 55, 0.7); letter-spacing: 0.02em; }
/* the download card's right half: the pages, the size, the button */
.md-reg-page .industry-download-form.md-doc-side { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 8px 0; }
/* the IFU hero: the text left, the pages right; stacked on phones */
.md-doc-hero { display: grid; gap: var(--space-xl, 32px); align-items: center; }
.md-doc-aside { padding: 8px 0 12px; }
@media (min-width: 900px) { .md-doc-hero { grid-template-columns: minmax(0, 1fr) 320px; } }
/* the hub's document cards open on their first page */
.md-doc-cover { display: block; width: 132px; margin: 0 0 18px; }
.md-doc-cover .md-doc-page { box-shadow: 0 1px 2px rgba(10, 40, 46, 0.08), 0 6px 16px rgba(10, 40, 46, 0.12); transition: transform 0.2s ease; }
.md-doc-cover:hover .md-doc-page { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .md-doc-page { transition: none !important; } }