/* ==========================================================================
   Bio-Med USA — "Crimson Authority" design system
   Built from the supplied logo. Brand crimson #A61425 sampled from the mark
   (median of the saturated red field). Every colour pair below is computed
   against WCAG 2.2 AA, not estimated.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root{
  /* brand — from the logo */
  --brand-600:#A61425;   /* PRIMARY. 7.64:1 on white, and white on it = 7.64:1 */
  --brand-700:#82101D;   /* hover — 10.29:1 on white */
  --brand-400:#E8737F;   /* ON DARK text only — 6.14:1 on ink-900 */
  --brand-050:#A614250F; /* tint fill */
  --brand-100:#F3E4E6;   /* tint surface */

  /* neutrals — warm, so they sit with crimson instead of fighting it */
  --ink-900:#16171A;     /* near-black. white on it = 17.92:1 */
  --ink-800:#23252A;     /* secondary dark surface (proof bar) */
  --ink-700:#3A3B40;     /* nav links, strong body — 10.63:1 on paper */
  --slate-600:#55575E;   /* body copy — 6.86:1 on paper */
  --label:#6A6C74;       /* small mono labels on light — 4.98:1 on paper */
  --slate-400:#9A9CA3;   /* ON DARK only — 6.54:1 on ink-900 */
  --slate-300:#A8AAB1;   /* on ink-800 — 6.61:1 */
  --line:#E4E2E0;        /* warm hairline */
  --line-2:#EFEDEB;      /* faint fill / placeholder */
  --paper:#FAF9F8;       /* warm off-white */
  --white:#FFFFFF;
  --amber:#9A6208;       /* caution callouts — 5.3:1 on white */

  /* legacy aliases so no rule silently loses its colour */
  --ink-500:var(--ink-700);
  --slate-500:var(--slate-600);
  --slate-200:var(--line);
  --slate-100:var(--line-2);
  --accent-500:var(--brand-600);
  --accent-600:var(--brand-700);
  --accent-400:var(--brand-600);
  --accent-300:var(--brand-400);
  --accent-050:var(--brand-050);

  /* type */
  --sans:"Inter Tight","Inter","Helvetica Neue",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --fs-display:clamp(2.4rem,5.2vw,4rem);
  --fs-h1:clamp(2rem,4vw,2.75rem);
  --fs-h2:clamp(1.6rem,2.8vw,2rem);
  --fs-h3:1.5rem;
  --fs-h4:1.25rem;
  --fs-body:1.0625rem;
  --fs-sm:0.9375rem;
  --fs-xs:0.8125rem;

  /* space & shape */
  --max:1320px;
  --gut:88px;
  --sec:128px;
  --radius:4px;
  --radius-sm:2px;
  --shadow:0 1px 3px rgba(22,23,26,.07);
  --shadow-lift:0 10px 28px rgba(22,23,26,.11);
  --ease:cubic-bezier(.22,.61,.36,1);
}
@media(max-width:960px){:root{--gut:32px;--sec:80px}}
@media(max-width:640px){:root{--gut:20px;--sec:64px}}

/* --- 2. Reset ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:1.65;
  color:var(--slate-500);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,video,svg{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,h5,.as-h4{color:var(--ink-900);font-weight:600;letter-spacing:-.02em;line-height:1.15;text-wrap:balance}
p{text-wrap:pretty}
a{color:var(--accent-500);text-decoration:none;transition:color .2s var(--ease)}
a:hover{color:var(--accent-600)}
ul,ol{padding-left:1.15em}
:focus-visible{outline:2px solid var(--accent-500);outline-offset:3px;border-radius:2px}
::selection{background:var(--brand-400);color:var(--ink-900)}

/* --- 3. Layout ----------------------------------------------------------- */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.wrap-narrow{max-width:820px;margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:var(--sec)}
.section--tight{padding-block:calc(var(--sec) * .6)}
.section--dark{background:var(--ink-900);color:var(--slate-300)}
/* Dark-surface treatment is shared by .section--dark, .hero and .band.
   Scoping it to .section--dark alone made headings and ghost buttons
   render ink-on-ink (invisible) inside heroes and bands. */
:is(.section--dark,.hero,.band) :is(h1,h2,h3,h4,h5,.as-h4){color:#fff}
.section--white{background:var(--white)}
.grid{display:grid;gap:32px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
@media(max-width:960px){.g3,.g4{grid-template-columns:repeat(2,1fr)}.split{grid-template-columns:1fr;gap:36px}}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* --- 4. Type helpers ---------------------------------------------------- */
.eyebrow{
  font-family:var(--mono);font-size:var(--fs-xs);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-500);
  margin-bottom:16px;display:block;
}
:is(.section--dark,.hero,.band) .eyebrow{color:var(--accent-300)}
.display{font-size:var(--fs-display);letter-spacing:-.03em;line-height:1.06}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
/* .as-h4 exists because several sub-headings sat at <h4> directly under an <h2>,
   which is a skipped level in the document outline (axe heading-order, 20 nodes across
   14 pages). They are now <h3 class="as-h4"> — correct outline, unchanged appearance.
   Keep .as-h4 AFTER the h3 rule so the smaller size wins. */
h4,.as-h4{font-size:var(--fs-h4)}
.lede{font-size:1.1875rem;line-height:1.6;color:var(--slate-500);max-width:62ch}
:is(.section--dark,.hero,.band) .lede{color:#D6D7DB}
:is(.section--dark,.band) p{color:var(--slate-300)}
.measure{max-width:68ch}
.mono{font-family:var(--mono)}
.attrib{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--label);margin-top:24px}
:is(.section--dark,.hero,.band) .attrib{color:var(--slate-300)}
.rule{height:1px;background:var(--slate-200);border:0;margin-block:48px}
.section--dark .rule{background:#ffffff1f}

/* --- 5. Buttons --------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:var(--fs-xs);font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
  padding:15px 26px;border-radius:var(--radius-sm);border:1px solid transparent;
  cursor:pointer;transition:all .2s var(--ease);white-space:nowrap;
}
.btn--primary{background:var(--accent-500);color:#fff}
.btn--primary:hover{background:var(--accent-600);color:#fff}
.btn--ghost{border-color:var(--slate-200);color:var(--ink-900);background:transparent}
.btn--ghost:hover{border-color:var(--ink-900);color:var(--ink-900);background:var(--white)}
:is(.section--dark,.hero,.band) .btn--ghost{border-color:#ffffff3d;color:#fff}
:is(.section--dark,.hero,.band) .btn--ghost:hover{border-color:#fff;background:#ffffff14;color:#fff}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}
.arrow-link{
  font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.08em;
  text-transform:uppercase;display:inline-flex;align-items:center;gap:8px;
}
.arrow-link::after{content:"→";transition:transform .2s var(--ease)}
.arrow-link:hover::after{transform:translateX(4px)}

/* --- 6. Header / nav ---------------------------------------------------- */
.site-head{
  position:sticky;top:0;z-index:100;background:#FAF9F8F2;
  backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--slate-200);
}
.site-head .wrap{display:flex;align-items:center;gap:40px;height:76px}
.brand{color:var(--ink-900);flex-shrink:0}
.brand:hover{color:var(--ink-900)}

/* legacy .brand span rule removed — it also matched the .brand-txt wrapper
   and leaked uppercase + mono + letter-spacing into the company name. */
.nav{display:flex;gap:4px;margin-left:auto;align-items:center}
/* :not(.btn) matters — `.nav a` (0,1,1) out-specifies `.btn--primary` (0,1,0),
   so without it the header CTA renders ink-on-teal at 2.49:1. */
.nav a:not(.btn){
  font-size:var(--fs-sm);font-weight:500;color:var(--ink-700);
  padding:9px 14px;border-radius:var(--radius-sm);
}
.nav a:not(.btn):hover{background:var(--slate-100);color:var(--ink-900)}
.nav a[aria-current=page]:not(.btn){color:var(--accent-500)}
.nav .btn{margin-left:12px}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--slate-200);
  padding:10px 12px;border-radius:var(--radius-sm);cursor:pointer}
.burger span{display:block;width:18px;height:2px;background:var(--ink-900);margin:3px 0}
@media(max-width:1080px){
  .nav{position:fixed;inset:76px 0 auto;flex-direction:column;align-items:stretch;
    background:var(--white);border-bottom:1px solid var(--slate-200);
    padding:16px var(--gut) 28px;gap:2px;display:none;box-shadow:var(--shadow-lift)}
  .nav.open{display:flex}
  .nav a{padding:13px 0;border-bottom:1px solid var(--slate-100)}
  .nav .btn{margin:16px 0 0;justify-content:center}
  .burger{display:block}
}

/* --- 7. Hero ------------------------------------------------------------ */
.hero{position:relative;background:var(--ink-900);overflow:hidden;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img,.hero__media video{width:100%;height:100%;object-fit:cover}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,#16171AF7 0%,#16171AE0 44%,#16171A66 100%);
}
.hero__inner{padding-block:clamp(96px,15vh,168px);position:relative;max-width:44rem}
.hero .display{color:#fff}
.hero .lede{margin-top:24px}
.hero--page .hero__inner{padding-block:clamp(72px,11vh,120px)}

/* --- 8. Proof bar ------------------------------------------------------- */
.proof{background:var(--ink-800);border-top:1px solid #ffffff14}
.proof .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.proof div{padding:34px 28px;border-right:1px solid #ffffff17}
.proof div:last-child{border-right:0}
.proof b{display:block;font-family:var(--mono);font-size:1.75rem;font-weight:500;
  color:#fff;letter-spacing:-.02em;line-height:1.1;margin-bottom:6px}
.proof span{font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--slate-300)}
@media(max-width:860px){
  .proof .wrap{grid-template-columns:repeat(2,1fr)}
  .proof div{border-bottom:1px solid #ffffff17;padding:26px 20px}
  .proof div:nth-child(2n){border-right:0}
}

/* --- 9. Cards ----------------------------------------------------------- */
.card{
  background:var(--white);border:1px solid var(--slate-200);
  border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;
  transition:border-color .22s var(--ease),box-shadow .22s var(--ease),transform .22s var(--ease);
}
/* Cards are anchors, so they inherit the global link colour — reset it or every
   card blurb renders teal instead of body-copy slate. */
a.card{color:inherit}
a.card:hover{border-color:var(--accent-300);box-shadow:var(--shadow-lift);transform:translateY(-3px)}
.card__media{aspect-ratio:3/2;background:var(--slate-100);overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
a.card:hover .card__media img{transform:scale(1.035)}
.card__body{padding:26px 28px 30px;flex:1;display:flex;flex-direction:column}
.card__body h3{margin-bottom:10px;font-size:1.3125rem}
.card__body p{font-size:var(--fs-sm);flex:1;color:var(--slate-500)}
.card__meta{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--label);margin-bottom:12px}
.card__foot{margin-top:22px;font-family:var(--mono);font-size:var(--fs-xs);
  letter-spacing:.08em;text-transform:uppercase;color:var(--accent-500)}
.card__foot::after{content:" →"}
.count-pill{display:inline-block;font-family:var(--mono);font-size:var(--fs-xs);
  background:var(--accent-050);color:var(--accent-500);padding:3px 9px;border-radius:var(--radius-sm)}

/* --- 10. Spec strip (device pages) -------------------------------------- */
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  background:var(--white);border:1px solid var(--slate-200);border-radius:var(--radius)}
.specs div{padding:22px 26px;border-right:1px solid var(--slate-200)}
.specs div:last-child{border-right:0}
.specs dt{font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--label);margin-bottom:7px}
.specs dd{font-family:var(--mono);font-size:1.0625rem;color:var(--ink-900);margin:0;font-weight:500}
@media(max-width:640px){.specs div{border-right:0;border-bottom:1px solid var(--slate-200)}
  .specs div:last-child{border-bottom:0}}

/* --- 11. Feature & indication lists ------------------------------------ */
.ticks{list-style:none;padding:0;display:grid;gap:14px}
.ticks li{position:relative;padding-left:30px;font-size:var(--fs-sm)}
.ticks li::before{
  content:"";position:absolute;left:0;top:.58em;width:12px;height:7px;
  border-left:2px solid var(--accent-500);border-bottom:2px solid var(--accent-500);
  transform:rotate(-45deg);
}
.ticks--2{grid-template-columns:repeat(2,1fr);gap:14px 40px}
@media(max-width:640px){.ticks--2{grid-template-columns:1fr}}
.numbered{list-style:none;padding:0;counter-reset:n;display:grid;gap:28px}
.numbered li{counter-increment:n;padding-left:64px;position:relative}
.numbered li::before{
  content:counter(n,decimal-leading-zero);position:absolute;left:0;top:-2px;
  font-family:var(--mono);font-size:.9375rem;color:var(--accent-500);
  border:1px solid var(--slate-200);border-radius:var(--radius-sm);
  width:40px;height:40px;display:grid;place-items:center;background:var(--white);
}
.numbered :is(h4,.as-h4){margin-bottom:6px}
.numbered p{font-size:var(--fs-sm)}

/* --- 12. Compliance panel ---------------------------------------------- */
.panel{background:var(--white);border:1px solid var(--slate-200);
  border-left:3px solid var(--accent-400);border-radius:var(--radius);padding:30px 34px}
.panel--note{border-left-color:var(--amber);background:#FFFCF5}
.panel :is(h4,.as-h4){margin-bottom:10px}
.panel p{font-size:var(--fs-sm)}
.panel dl{display:grid;grid-template-columns:auto 1fr;gap:10px 24px;margin-top:18px;font-size:var(--fs-sm)}
.panel dt{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.08em;
  text-transform:uppercase;color:var(--label)}
.panel dd{margin:0;color:var(--ink-900);font-family:var(--mono);font-size:var(--fs-sm)}

/* --- 13. Media blocks -------------------------------------------------- */
.figure{border-radius:var(--radius);overflow:hidden;background:var(--slate-100);border:1px solid var(--slate-200)}
.figure img{width:100%;height:100%;object-fit:cover}
.ar-21x9{aspect-ratio:21/9}
.ar-16x9{aspect-ratio:16/9}
.ar-3x2{aspect-ratio:3/2}
.ar-4x5{aspect-ratio:4/5}
.ar-1x1{aspect-ratio:1/1}
.band{position:relative;overflow:hidden;background:var(--ink-900)}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.28}
.band .wrap{position:relative;padding-block:var(--sec)}

/* --- 14. Breadcrumb ---------------------------------------------------- */
.crumb{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.08em;
  text-transform:uppercase;color:var(--label);padding-top:26px}
.crumb a{color:var(--label)}
.crumb a:hover{color:var(--accent-500)}
.crumb span{margin-inline:9px;opacity:.55}

/* --- 15. Table --------------------------------------------------------- */
/* Tables are wrapped in .table-scroll. A 3-column table has a min-content width
   larger than a 390px viewport minus gutters, so without this the whole DOCUMENT
   scrolls sideways (caught by the mobile overflow check: 441px vs 390px).
   The wrapper confines that scroll to the table. tabindex=0 is NOT needed on the
   wrapper here because every row contains a focusable link, so keyboard users can
   already reach the overflowed content. */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--slate-200);border-radius:var(--radius);background:var(--white)}
.table{width:100%;min-width:34rem;border-collapse:collapse;font-size:var(--fs-sm);
  background:var(--white)}
.table th,.table td{padding:15px 20px;text-align:left;border-bottom:1px solid var(--slate-200)}
.table th{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--label);background:var(--paper);font-weight:500}
.table tr:last-child td{border-bottom:0}
.table td:first-child{color:var(--ink-900);font-weight:500}

/* --- 16. Form --------------------------------------------------------- */
.form{display:grid;gap:20px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:640px){.form .row{grid-template-columns:1fr}}
.field label{display:block;font-family:var(--mono);font-size:var(--fs-xs);
  letter-spacing:.1em;text-transform:uppercase;color:var(--label);margin-bottom:8px}
.field input,.field select,.field textarea{
  width:100%;padding:14px 16px;background:var(--white);
  border:1px solid var(--slate-200);border-radius:var(--radius-sm);
  font-size:var(--fs-body);color:var(--ink-900);transition:border-color .2s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--accent-500);outline:none;box-shadow:0 0 0 3px var(--accent-050)}
.field textarea{min-height:140px;resize:vertical}
.form-note{font-size:var(--fs-xs);color:var(--label)}

/* --- 17. Footer ------------------------------------------------------- */
.site-foot{background:var(--ink-900);color:var(--slate-400);font-size:var(--fs-sm)}
.site-foot .top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:44px;
  padding-block:72px 56px}
/* Footer column titles are <h2> inside the contentinfo landmark: the footer follows
   <main>, whose last heading is often an h2 or h3, so an <h5> here skipped levels.
   h2 inside a separate landmark is correct and the visual style is unchanged. */
.site-foot h2{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.12em;
  text-transform:uppercase;color:#fff;margin-bottom:18px;font-weight:500}
.site-foot ul{list-style:none;padding:0;display:grid;gap:11px}
.site-foot a{color:var(--slate-300)}
.site-foot a:hover{color:var(--accent-300)}
.site-foot .brand b{color:#fff}
.site-foot .brand span{color:var(--slate-400)}
.site-foot .blurb{margin-top:18px;max-width:34ch;color:var(--slate-400)}
.site-foot .bottom{border-top:1px solid #ffffff17;padding-block:26px;
  display:flex;gap:20px;flex-wrap:wrap;font-size:var(--fs-xs);font-family:var(--mono);
  letter-spacing:.04em;color:var(--slate-400)}
.site-foot .bottom .sp{margin-left:auto}
@media(max-width:860px){.site-foot .top{grid-template-columns:1fr 1fr;gap:36px}}
@media(max-width:560px){.site-foot .top{grid-template-columns:1fr}}

/* --- 18. Scroll reveal ------------------------------------------------ */
.reveal{opacity:0;transform:translateY(12px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .card__media img{transition:none}
  a.card:hover{transform:none}
}

/* --- 19. Utility ----------------------------------------------------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--accent-500);color:#fff;
  padding:12px 20px;z-index:200;border-radius:0 0 var(--radius-sm) 0}
.skip:focus{left:0;color:#fff}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mt-0{margin-top:0}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
.mt-32{margin-top:32px}.mt-48{margin-top:48px}.mt-64{margin-top:64px}
.mb-24{margin-bottom:24px}.mb-32{margin-bottom:32px}.mb-48{margin-bottom:48px}
.center{text-align:center}
.head-block{max-width:68ch;margin-bottom:56px}
.head-block.center{margin-inline:auto}


/* --- 20. Brand: logo lockup ---------------------------------------------- */
.brand{display:flex;align-items:center;gap:14px}
.brand img{width:44px;height:44px;border-radius:2px;flex-shrink:0}
.brand-txt{display:flex;flex-direction:column;line-height:1.05}
.brand-txt b{font-family:var(--sans);font-size:1.125rem;font-weight:600;
  letter-spacing:-.025em;text-transform:none;color:var(--ink-900)}
.brand-txt span{font-family:var(--mono);font-size:.5938rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--label);margin-top:4px}
.site-foot .brand img{width:56px;height:56px}
.site-foot .brand-txt b{color:#fff}
.site-foot .brand-txt span{color:var(--slate-400)}
@media(max-width:640px){.brand img{width:34px;height:34px}.brand-txt b{font-size:.9375rem}}

/* --- 21. Brand motif: the arch, measured off the logo -------------------- */
/* True circle, centre (0.500,0.681) r 0.563 of the mark, clipped square.
   Used oversized and low-contrast as a watermark — never as decoration
   competing with content. */
.arch{
  position:absolute;pointer-events:none;color:#fff;opacity:.055;
  width:min(58vw,760px);aspect-ratio:1;z-index:-1;
}
.arch--hero{right:-6%;top:50%;transform:translateY(-50%)}
.arch--band{left:-8%;bottom:-46%}
.arch--light{color:var(--brand-600);opacity:.06}
.hero,.band{isolation:isolate}
@media(max-width:860px){.arch{width:88vw;opacity:.04}}

/* A crimson keyline that echoes the logo's divider rule */
.brand-rule{height:3px;background:var(--brand-600);border:0;width:64px;margin-bottom:26px}
:is(.section--dark,.hero,.band) .brand-rule{background:var(--brand-400)}

/* Section-heading arch tick — small, structural, from the same geometry */
.head-block .eyebrow{position:relative}

/* --- 22. Form: honeypot, status, error state ---------------------------- */
/* Honeypot must be genuinely invisible but NOT display:none — some bots skip
   display:none fields, and some screen readers would still announce it. It is
   also aria-hidden and tabindex=-1 in the markup. */
.hp{position:absolute!important;left:-9999px!important;top:auto!important;
  width:1px!important;height:1px!important;overflow:hidden!important}
.form-status{font-size:var(--fs-sm);min-height:1.5em;margin-top:-4px}
.form-status.is-ok{color:var(--brand-600);font-weight:500}
.form-status.is-error{color:var(--brand-700);font-weight:500}
.field.has-error input,.field.has-error select,.field.has-error textarea{
  border-color:var(--brand-600);box-shadow:0 0 0 3px var(--brand-050)}
.field.has-error label{color:var(--brand-600)}
button[type=submit]:disabled{opacity:.65;cursor:progress}

/* --- 23. Product photography ------------------------------------------- */
/* Real manufacturer photography. The compliance rule rules out AI-generated
   device imagery, so these are the only legitimate device shots — they get
   prime position on the page rather than being buried in a gallery. */
.split--product{grid-template-columns:1.05fr 1fr;align-items:start}
@media(max-width:960px){.split--product{grid-template-columns:1fr}}

/* fit-content on the FIGURE (not the card) so the card hugs a small photo and the
   caption stays flush with the card's left edge — the IPL System's best manufacturer
   shot is only 179px wide, and a full-width card left it adrift in white space. */
.product-main{margin:0;width:fit-content;max-width:100%;margin-inline:auto;
  position:sticky;top:104px}
@media(max-width:960px){.product-main{position:static}}
.product-main a{display:block;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;transition:border-color .2s var(--ease)}
.product-main a:hover{border-color:var(--brand-600)}
/* width:auto (not 100%) is deliberate — see the imageSize() note in build.js.
   OEM shots range from 179px to 1402px wide; stretching the small ones to fill the
   column made them visibly soft. They now render at native size, centred on the
   white card. max-height caps the one 930x2837 brochure-page shot. */
.product-main img{width:auto;max-width:100%;height:auto;max-height:560px;
  display:block;margin-inline:auto;object-fit:contain;background:var(--white);padding:18px}
.product-main figcaption{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.06em;
  text-transform:uppercase;color:var(--label);margin-top:12px}

.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.gitem{display:block;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;
  transition:border-color .2s var(--ease),transform .2s var(--ease)}
.gitem:hover{border-color:var(--brand-600);transform:translateY(-2px)}
.gitem img{width:100%;height:100%;object-fit:contain;padding:12px;background:var(--white)}
@media(max-width:640px){.gallery{grid-template-columns:repeat(2,1fr);gap:11px}
  .gitem img{padding:7px}}