/* ==========================================================================
   RK Group — site-specific layer on top of base.css (shared design system).
   3D hero, product line-up, product pages (hotspots, 3D viewer, size finder),
   HCP gate, forms. Scroll-driven parts read --p (0..1) set by site.js.
   ========================================================================== */

[hidden] { display: none !important; }

/* In-page anchors (#form, #sizes …) land below the sticky header, not under it */
html { scroll-padding-top: calc(var(--header-h) + 24px); }
#form, [id] { scroll-margin-top: calc(var(--header-h) + 24px); }

/* ---------- Brand ---------- */
.brand--rk { color: var(--brand-deep); }
.site-header[data-theme="dark"] .brand--rk, .site-footer .brand--rk, .dark .brand--rk { color: #fff; }
.brand__logo { height: 26px; width: auto; }
.site-footer .brand__logo { height: 34px; }
.btn--line { --bg: transparent; --fg: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.btn--line:hover { box-shadow: inset 0 0 0 1px var(--brand); }
.muted-on-dark { color: var(--muted-on-dark); }
em.new, .pcard__new { font-style: normal; color: var(--signal); }

/* 38-FZ warning: must be readable, not small print */
.med-warning {
  margin: 0 0 clamp(36px, 5vw, 56px); padding: 18px 22px; border-radius: 16px;
  font-size: clamp(.95rem, 1.4vw, 1.12rem); font-weight: 560; letter-spacing: -.01em; line-height: 1.45;
  color: #fff; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.med-warning--light { color: var(--text); background: var(--pearl); box-shadow: inset 0 0 0 1px var(--line); margin: 0; }

/* Six sections + language + CTA: drop the CTA (it is in the menu and every page) before the nav wraps */
@media (max-width: 1320px) { .header-cta { display: none; } }
@media (max-width: 1240px) and (min-width: 1101px) { .nav__link { padding: 0 10px; font-size: .9rem; } }

/* ---------- Mega menu: product tiles ---------- */
.mega__products { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; padding-block: 28px 30px; }
.mega-prod { display: grid; gap: 6px; padding: 12px 12px 16px; border-radius: 18px; transition: background-color .3s, transform .5s var(--ease-out); }
.mega-prod:hover { background: var(--pearl); transform: translateY(-3px); }
.mega-prod__img { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 12px; background: radial-gradient(circle at 50% 55%, #eef0fb, #f6f7fb 70%); overflow: hidden; }
.mega-prod__img img { width: 86%; height: 86%; object-fit: contain; transition: transform .7s var(--ease-out); }
.mega-prod:hover .mega-prod__img img { transform: scale(1.07) rotate(-2deg); }
.mega-prod__kind { font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); line-height: 1.3; margin-top: 4px; }
.mega-prod__kind em { font-style: normal; color: var(--signal); }
.mega-prod b { font-size: 1.06rem; letter-spacing: -.02em; font-weight: 640; }
.drawer__prods { list-style: none; padding: 0 0 12px; margin: 0; display: grid; gap: 2px; }
.drawer__prods a { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 8px 0; font-weight: 560; }
.drawer__prods small { font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; opacity: .6; text-align: right; }

/* ==========================================================================
   HERO 3D
   ========================================================================== */
.hero3d { position: relative; height: 470vh; background: var(--ink); color: #fff; }
.hero3d__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.hero3d__bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(55% 50% at 68% 46%, rgba(59, 59, 196, calc(.42 + var(--p, 0) * .2)), transparent 70%),
    radial-gradient(40% 40% at 20% 85%, rgba(224, 113, 79, calc(.08 + var(--p, 0) * .2)), transparent 70%),
    linear-gradient(180deg, #07071a, #0b0b28 60%, #09091f);
}
.hero3d__canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; opacity: 0; transition: opacity .25s var(--ease-out); }
.hero3d.is-3d .hero3d__canvas, .viewer.is-3d canvas { opacity: 1; }
.hero3d__poster { position: absolute; right: 4vw; top: 50%; width: min(46vw, 640px); transform: translateY(-46%) rotate(-12deg); opacity: .9; filter: drop-shadow(0 40px 60px rgba(0,0,0,.6)); transition: opacity .8s; pointer-events: none; }
/* The photo is only a fallback for browsers without WebGL — never a placeholder that flashes. */
.hero3d__poster { display: none; }
.hero3d.no-3d:not(.is-3d) .hero3d__poster { display: block; }
.hero3d__scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(9, 9, 31, .92) 0%, rgba(9, 9, 31, .7) 28%, rgba(9, 9, 31, 0) 52%); }
@media (max-width: 860px) and (orientation: portrait) {
  .hero3d__scrim { background: linear-gradient(0deg, rgba(9, 9, 31, .94) 0%, rgba(9, 9, 31, .6) 45%, rgba(9, 9, 31, 0) 62%); }
}
.hero3d__ch { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding-top: var(--header-h); pointer-events: none; }
.hero3d__ch a, .hero3d__ch button { pointer-events: auto; }
.hero3d__ch--1 {
  --a: clamp(0, calc(1 - (var(--p, 0) - .07) * 14), 1);
  opacity: var(--a); transform: translateY(calc((1 - var(--a)) * -8vh)); filter: blur(calc((1 - var(--a)) * 10px));
}
.hero3d__ch--1 .hero__title { max-width: 9.5ch; }
.hero3d__ch--2, .hero3d__ch--3, .hero3d__ch--4, .hero3d__ch--5 { text-align: left; }
.hero3d__ch h2 { font-size: var(--fs-d2); line-height: 1.02; letter-spacing: -.045em; font-weight: 640; max-width: 13ch; margin-top: 18px; text-shadow: 0 4px 40px rgba(9,9,31,.9); }
.hero3d__ch .eyebrow { color: rgba(255, 255, 255, .72); }
.hero3d__ch p { margin-top: 18px; color: var(--muted-on-dark); font-size: var(--fs-lead); max-width: 34ch; }
/* each chapter shows between its --s and --e scroll positions, in step with the film in rk3d.js */
.hero3d__ch--2, .hero3d__ch--3, .hero3d__ch--4, .hero3d__ch--5 {
  --a: clamp(0, calc((var(--p, 0) - var(--s)) * 16), 1); --b: clamp(0, calc((var(--p, 0) - var(--e)) * 16), 1);
  opacity: calc(var(--a) - var(--b)); transform: translateY(calc((1 - var(--a)) * 36px + var(--b) * -28px));
}
.hero3d__ch--2 { --s: .14; --e: .30; }
.hero3d__ch--3 { --s: .33; --e: .50; }
.hero3d__ch--4 { --s: .55; --e: .72; }
.hero3d__ch--5 { --s: .77; --e: 9; }
.hero3d__ch--2 .wrap, .hero3d__ch--3 .wrap, .hero3d__ch--4 .wrap, .hero3d__ch--5 .wrap { display: flex; flex-direction: column; align-items: flex-start; }

/* ==========================================================================
   LINE-UP — sticky product switcher (rk.js sets data-active)
   ========================================================================== */
.lineup { position: relative; height: calc(var(--n, 6) * 60vh + 50vh); background: var(--paper); }
.lineup__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: clamp(14px, 3vh, 36px); padding-top: var(--header-h); overflow: hidden; }
.lineup__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.lineup__head .h2 { font-size: clamp(1.9rem, 3.6vw, 3.2rem); }
.lineup__tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.lineup__tabs a { padding: 9px 14px; border-radius: 999px; font-size: .86rem; font-weight: 560; box-shadow: inset 0 0 0 1px var(--line); transition: background-color .3s, color .3s, box-shadow .3s; }
.lineup__tabs a:hover { box-shadow: inset 0 0 0 1px var(--brand); }
.lineup__tabs a.is-active { background: var(--ink); color: #fff; box-shadow: none; }
.lineup__body { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 64px); align-items: center; flex: 0 1 auto; min-height: 0; }
.lineup__copy { position: relative; min-height: clamp(320px, 54vh, 500px); }
.lineup__item { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px;
  opacity: 0; transform: translateY(26px); transition: opacity .6s var(--ease-out), transform .8s var(--ease-out); pointer-events: none; }
.lineup__item.is-active { opacity: 1; transform: none; pointer-events: auto; }
.lineup__idx { font-family: var(--mono); font-size: .85rem; color: var(--signal); letter-spacing: .1em; }
.lineup__idx small { color: var(--muted); }
.lineup__item h3 { font-size: clamp(2.6rem, 6vw, 5.4rem); line-height: .92; letter-spacing: -.055em; font-weight: 680; }
.lineup__sub { font-size: var(--fs-lead); line-height: 1.35; letter-spacing: -.015em; max-width: 30ch; }
.lineup__sum { color: var(--muted); max-width: 46ch; }
.lineup__chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 8px; }
.lineup__chips .spec-chip { position: static; transform: none; opacity: 1; padding: 10px 14px; border-radius: 14px; min-width: 0; }
.lineup__chips .spec-chip b { font-size: 1.1rem; }
.lineup__chips .spec-chip span { font-size: .7rem; letter-spacing: .06em; }
.lineup__visual { position: relative; height: min(62vh, 620px); display: grid; place-items: center; cursor: pointer; touch-action: pan-y; }
.lineup__halo { position: absolute; inset: 6% 8%; border-radius: 50%; background: radial-gradient(circle, rgba(59,59,196,.18), rgba(224,113,79,.06) 55%, transparent 70%); transform: scale(calc(.9 + var(--p, 0) * .2)); }
.lineup__img { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.86) rotate(-6deg); filter: blur(8px);
  transition: opacity .7s var(--ease-out), transform 1.1s var(--ease-out), filter .7s; }
.lineup__img.is-active { opacity: 1; transform: none; filter: none; }
.lineup__img.is-past { transform: scale(1.12) rotate(5deg); }
.lineup__img img { width: auto; height: auto; max-width: 92%; max-height: 92%; object-fit: contain; filter: drop-shadow(0 40px 50px rgba(39, 39, 116, .28)); }
.lineup__word { position: absolute; inset: auto 0 2% 0; text-align: center; pointer-events: none; }
.lineup__word span { position: absolute; left: 0; right: 0; bottom: 0; font-size: clamp(4rem, 11vw, 10rem); font-weight: 760; letter-spacing: -.06em; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(39,39,116,.1); opacity: 0; transition: opacity .6s; white-space: nowrap; }
.lineup__word span.is-active { opacity: 1; }
.lineup__bar { display: grid; grid-auto-flow: column; gap: 6px; }
.lineup__bar i { height: 3px; border-radius: 3px; background: var(--mist); transition: background-color .4s; }
.lineup__bar i.is-on { background: linear-gradient(90deg, var(--brand), var(--signal)); }

/* ---------- Factory ---------- */
.factory { padding-block: clamp(88px, 12vw, 170px); overflow: hidden; }
.factory__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 90px); align-items: center; }
.factory .lead { color: var(--muted-on-dark); }
.factory__facts { list-style: none; padding: 0; margin: 34px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,.1); border-radius: 18px; overflow: hidden; }
.factory__facts li { background: var(--ink); padding: 20px 20px 22px; display: grid; gap: 6px; }
.factory__facts b { font-size: clamp(1.6rem, 2.6vw, 2.3rem); letter-spacing: -.04em; font-weight: 660; line-height: 1; }
.factory__facts b small { font-size: .5em; color: var(--muted-on-dark); font-weight: 500; }
.factory__facts span { color: var(--muted-on-dark); font-size: .9rem; line-height: 1.4; }
.factory__photos { position: relative; height: clamp(420px, 52vw, 680px); }
.factory__ph { position: absolute; border-radius: 22px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); }
.factory__ph img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12) translateY(calc((var(--p, .5) - .5) * -6%)); }
.factory__ph--a { left: 0; top: 4%; width: 62%; aspect-ratio: 4 / 3; transform: translateY(calc((var(--p, .5) - .5) * -60px)); }
.factory__ph--b { right: 0; top: 30%; width: 46%; aspect-ratio: 3 / 4; transform: translateY(calc((var(--p, .5) - .5) * 70px)); }
.factory__ph--c { left: 10%; bottom: 0; width: 44%; aspect-ratio: 16 / 10; transform: translateY(calc((var(--p, .5) - .5) * -30px)); }

/* ---------- Cities ---------- */
.cities { padding-block: clamp(80px, 10vw, 140px); overflow: hidden; }
.cities__marquee { margin-top: clamp(36px, 5vw, 64px); }
.city { font-size: clamp(2.4rem, 6vw, 5.4rem); font-weight: 660; letter-spacing: -.05em; line-height: 1.05; white-space: nowrap; display: inline-flex; align-items: center; gap: var(--gap); }
.city::after { content: ""; width: .22em; height: .22em; border-radius: 50%; background: var(--signal); box-shadow: 0 0 30px var(--signal); }
.city:nth-child(even) { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.35); }

/* ---------- Quick routes ---------- */
.routes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.route { display: grid; gap: 6px; padding: 26px; border-radius: var(--radius-sm); box-shadow: 0 0 0 1px var(--line); transition: transform .5s var(--ease-out), box-shadow .4s; }
.route:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(59,59,196,.35), 0 26px 50px -34px rgba(39,39,116,.5); }
.route svg { width: 30px; height: 30px; color: var(--brand); margin-bottom: 10px; }
.route b { font-size: 1.12rem; letter-spacing: -.02em; font-weight: 620; }
.route span { color: var(--muted); font-size: .92rem; }

/* ==========================================================================
   PRODUCT CARDS (list page, related)
   ========================================================================== */
.pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pcard { position: relative; display: flex; flex-direction: column; border-radius: var(--radius); background: var(--pearl); overflow: hidden; isolation: isolate;
  transition: transform .6s var(--ease-out), box-shadow .5s; transform-style: preserve-3d; }
.pcard:hover { box-shadow: 0 50px 80px -50px rgba(39, 39, 116, .55); }
.pcard__stage { position: relative; aspect-ratio: 5 / 4; display: grid; place-items: center; background: radial-gradient(70% 70% at 50% 55%, #fff, #eceef7 75%); overflow: hidden; }
.pcard__stage img { position: absolute; inset: 9%; width: 82%; height: 82%; object-fit: contain; transition: transform 1s var(--ease-out); filter: drop-shadow(0 24px 30px rgba(39,39,116,.2)); }
.pcard:hover .pcard__stage img { transform: scale(1.08) rotate(-3deg); }
.pcard__new { position: absolute; left: 16px; top: 16px; padding: 6px 12px; border-radius: 999px; background: var(--signal); color: #fff; font-size: .74rem; font-weight: 620; letter-spacing: .02em; }
.pcard__body { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px 24px; flex: 1; }
.pcard__kind { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pcard__title { font-size: clamp(1.7rem, 2.6vw, 2.3rem); font-weight: 680; letter-spacing: -.045em; line-height: 1; }
.pcard__sub { color: var(--muted); font-size: .95rem; line-height: 1.4; }
.pcard__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pcard__chips span { padding: 5px 10px; border-radius: 999px; background: #fff; font-size: .78rem; font-weight: 540; box-shadow: 0 0 0 1px var(--line); }
.pcard__go { margin-top: auto; padding-top: 14px; display: inline-flex; gap: 8px; align-items: center; font-weight: 600; color: var(--brand); }
.pcard__go svg { width: 16px; height: 16px; transition: transform .4s var(--ease-out); }
.pcard:hover .pcard__go svg { transform: translateX(4px); }
.pgroup + .pgroup { margin-top: clamp(64px, 8vw, 110px); }
.pgroup__head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 26px; flex-wrap: wrap; }
.pgroup__head h2 { font-size: var(--fs-d3); letter-spacing: -.035em; font-weight: 620; }

/* ==========================================================================
   PRODUCT PAGE
   ========================================================================== */
.pd { --hero-bg: radial-gradient(70% 70% at 70% 45%, #eef0fd, var(--paper) 70%); }
.pd-hero__badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pd-badge { padding: 6px 12px; border-radius: 999px; font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; background: var(--pearl); box-shadow: inset 0 0 0 1px var(--line); }
.pd-badge--new { background: var(--signal); color: #fff; box-shadow: none; }
.pd-hero__sub { font-size: var(--fs-lead); color: var(--muted); max-width: 32ch; line-height: 1.4; }
.pd-keys { display: flex; flex-wrap: wrap; gap: 26px 36px; margin-top: 28px; }
.pd-keys div { display: grid; gap: 2px; }
.pd-keys b { font-size: clamp(1.5rem, 2.4vw, 2.1rem); letter-spacing: -.04em; font-weight: 660; line-height: 1; }
.pd-keys span { font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* Hotspots on the product photo */
.hs { position: relative; display: grid; place-items: center; width: 100%; }
.hs__frame { position: relative; display: inline-block; max-width: 100%; }
.hs__frame img { display: block; max-width: 100%; max-height: min(70vh, 640px); width: auto; object-fit: contain; filter: drop-shadow(0 50px 60px rgba(39, 39, 116, .25)); }
.hs__dot { position: absolute; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; display: grid; place-items: center; z-index: 2;
  background: rgba(255,255,255,.92); color: var(--brand-deep); box-shadow: 0 6px 20px -6px rgba(39,39,116,.5), 0 0 0 1px rgba(39,39,116,.1);
  transition: transform .4s var(--ease-out), background-color .3s, color .3s; }
.hs__dot::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(59,59,196,.45); animation: hs-ring 2.4s var(--ease-out) infinite; }
.hs__dot svg { width: 16px; height: 16px; transition: transform .4s var(--ease-out); }
.hs__dot:hover, .hs__dot[aria-expanded="true"] { transform: scale(1.12); background: var(--brand); color: #fff; }
.hs__dot[aria-expanded="true"] svg { transform: rotate(45deg); }
@keyframes hs-ring { from { transform: scale(.8); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.hs__tip { position: absolute; z-index: 3; width: min(280px, 70vw); padding: 16px 18px; border-radius: 16px; background: var(--ink); color: #fff; font-size: .9rem; line-height: 1.45;
  box-shadow: 0 30px 60px -20px rgba(9,9,31,.6); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .3s, transform .4s var(--ease-out), visibility 0s .3s; }
.hs__tip.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.hs__tip b { display: block; font-size: 1rem; margin-bottom: 4px; }
.hs__tip span { color: var(--muted-on-dark); }

/* 3D viewer */
.viewer { position: relative; border-radius: var(--radius); overflow: hidden; background: radial-gradient(60% 70% at 50% 45%, #1a1a52, var(--ink) 75%); color: #fff; aspect-ratio: 16 / 9; min-height: 340px; }
.viewer canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; opacity: 0; transition: opacity 1s var(--ease-out); }
.viewer.is-grabbing canvas { cursor: grabbing; }
.viewer__ui { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: end; padding: clamp(14px, 2.4vw, 24px); pointer-events: none; }
.viewer__ui > * { pointer-events: auto; }
.viewer__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.viewer__btn { min-height: 44px; padding: 0 18px; border-radius: 999px; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); font-size: .9rem; font-weight: 560; transition: background-color .3s; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.viewer__btn:hover { background: rgba(255,255,255,.18); }
.viewer__btn[aria-pressed="true"] { background: #fff; color: var(--ink); }
.viewer__hint { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-on-dark); }
.viewer__fallback { position: absolute; inset: 0; display: none; place-items: center; padding: 10%; }
.viewer.no-3d:not(.is-3d) .viewer__fallback { display: grid; }
.viewer__fallback img { max-height: 100%; object-fit: contain; }
.viewer__note { position: absolute; top: clamp(14px, 2.4vw, 24px); left: clamp(14px, 2.4vw, 24px); font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-on-dark); max-width: 60%; }

/* Size finder */
.sizer { display: grid; gap: 22px; }
.sizer__row { display: grid; gap: 10px; }
.sizer__label { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.sizer__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.sizer__opt { min-width: 58px; min-height: 46px; padding: 0 14px; border-radius: 12px; background: var(--pearl); box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; font-variant-numeric: tabular-nums; transition: background-color .25s, color .25s, box-shadow .25s, opacity .25s; }
.sizer__opt:hover:not(:disabled) { box-shadow: inset 0 0 0 1.5px var(--brand); }
.sizer__opt[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.sizer__opt:disabled { opacity: .3; cursor: not-allowed; text-decoration: line-through; }
.sizer__result { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; padding: 20px 22px; border-radius: 18px; background: var(--brand-soft); min-height: 84px; }
.sizer__result b { font-size: 1.5rem; letter-spacing: -.03em; }
.sizer__result p { color: var(--muted); }
.sizer__count { font-size: .9rem; color: var(--muted); }

/* Specs table */
.specs { width: 100%; border-collapse: collapse; table-layout: fixed; }
.specs th, .specs td { overflow-wrap: anywhere; hyphens: auto; }
.specs th, .specs td { text-align: left; vertical-align: top; padding: 16px 0; border-bottom: 1px solid var(--line); }
.specs th { width: 42%; font-weight: 500; color: var(--muted); padding-right: 24px; }
.specs td { font-weight: 560; font-variant-numeric: tabular-nums; }

/* Documents */
.docs { display: grid; gap: 10px; }
.doc { display: grid; grid-template-columns: 48px 1fr auto; gap: 16px; align-items: center; padding: 16px 18px; border-radius: 16px; box-shadow: 0 0 0 1px var(--line); transition: transform .5s var(--ease-out), box-shadow .4s; }
.doc:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(59,59,196,.35), 0 20px 40px -30px rgba(39,39,116,.5); }
.doc__ico { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.doc__ico svg { width: 22px; height: 22px; }
.doc__name { font-weight: 580; line-height: 1.3; }
.doc__meta { display: block; font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.doc__go { color: var(--brand); }
.doc__go svg { width: 18px; height: 18px; }
.doc-group + .doc-group { margin-top: 48px; }
.doc-group h2 { font-size: var(--fs-d3); letter-spacing: -.035em; font-weight: 620; margin-bottom: 20px; }

/* Sticky in-page nav on the product page */
.pd-nav { position: sticky; top: var(--header-h); z-index: 20; background: rgba(255,255,255,.86); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid var(--line); }
.pd-nav .wrap { display: flex; align-items: center; gap: 6px; min-height: 58px; overflow-x: auto; scrollbar-width: none; }
.pd-nav .wrap::-webkit-scrollbar { display: none; }
.pd-nav a { flex-shrink: 0; padding: 8px 14px; border-radius: 999px; font-size: .9rem; font-weight: 540; color: var(--muted); transition: color .2s, background-color .2s; }
.pd-nav a:hover, .pd-nav a.is-active { color: var(--text); background: var(--pearl); }
.pd-nav__title { white-space: nowrap; flex-shrink: 0; font-weight: 680; letter-spacing: -.02em; margin-right: 10px; color: var(--text) !important; background: none !important; padding-left: 0 !important; }
.pd-nav .btn { margin-left: auto; min-height: 40px; padding: 0 16px; font-size: .88rem; flex-shrink: 0; color: #fff; background: var(--brand); }
.pd-nav .btn:hover { color: #fff; background: var(--brand-deep); }

/* ==========================================================================
   HCP gate
   ========================================================================== */
.hcp { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(9, 9, 31, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: hcp-in .4s var(--ease-out); }
.hcp[hidden] { display: none; }
.hcp__card { width: min(520px, 100%); padding: clamp(26px, 5vw, 44px); border-radius: var(--radius); background: var(--paper); box-shadow: 0 60px 120px -40px rgba(9,9,31,.7); text-align: left; }
.hcp__badge { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--brand-soft); color: var(--brand); margin-bottom: 20px; }
.hcp__badge svg { width: 28px; height: 28px; }
.hcp__card h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); letter-spacing: -.04em; line-height: 1.05; font-weight: 640; }
.hcp__card p { color: var(--muted); margin-top: 12px; }
.hcp__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.hcp__note { font-size: .82rem; padding-top: 18px; margin-top: 22px !important; border-top: 1px solid var(--line); }
@keyframes hcp-in { from { opacity: 0; } to { opacity: 1; } }

/* ==========================================================================
   FORMS (contacts, complaints)
   ========================================================================== */
.field select { width: 100%; min-height: 54px; padding: 14px 44px 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--pearl); font: inherit; color: var(--text); appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a5a78' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; }
.field select:focus { outline: none; border-color: var(--brand); background-color: #fff; box-shadow: 0 0 0 4px rgba(59, 59, 196,.12); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: #c4314b; background: #fff6f7; }
.field__err { display: block; color: #c4314b; font-size: .84rem; margin-top: 6px; }
.field__help { display: block; color: var(--muted); font-size: .82rem; margin-top: 6px; line-height: 1.4; }
.field--row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.form-errors { padding: 14px 16px; border-radius: 14px; background: #fff1f3; color: #8f1d33; margin-bottom: 18px; font-size: .92rem; }
.form-ok { display: grid; gap: 10px; justify-items: start; padding: clamp(24px, 4vw, 40px); border-radius: var(--radius); background: var(--brand-soft); }
.form-ok svg { width: 44px; height: 44px; color: var(--brand); }
.form-ok h2 { font-size: var(--fs-d3); letter-spacing: -.035em; font-weight: 620; }
.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.fstep { border: 0; padding: 0; margin: 0 0 30px; }
.fstep legend { display: flex; align-items: center; gap: 12px; font-size: 1.2rem; font-weight: 620; letter-spacing: -.02em; margin-bottom: 16px; padding: 0; }
.fstep legend i { font-style: normal; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: #fff; font-family: var(--mono); font-size: .8rem; }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; }
.stepper { display: inline-grid; grid-template-columns: 46px 70px 46px; align-items: stretch; border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); background: var(--pearl); }
.stepper button { font-size: 1.3rem; font-weight: 500; }
.stepper button:hover { background: var(--mist); }
.stepper input { border: 0 !important; border-radius: 0 !important; text-align: center; min-height: 50px !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.aside-card { padding: 26px; border-radius: var(--radius-sm); background: var(--pearl); display: grid; gap: 12px; }
.aside-card h3 { font-size: 1.1rem; letter-spacing: -.02em; }
.aside-card ol, .aside-card ul { padding-left: 1.2em; color: var(--muted); display: grid; gap: 6px; font-size: .94rem; }

/* ---------- About ---------- */
.about-photo { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.06 - var(--p, 0) * .06)); }
.about-gallery { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 14px; }
.about-gallery figure { border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 4 / 3; }
.about-gallery figure:first-child { grid-row: span 2; aspect-ratio: auto; }
.about-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.about-gallery figure:hover img { transform: scale(1.05); }
.prod-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.prod-list li { list-style: none; display: flex; justify-content: space-between; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
.prod-list li span { color: var(--muted); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .mega__products { grid-template-columns: repeat(3, 1fr); }
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .factory__grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .hero3d { height: 420vh; }
  .hero3d__ch--1 .hero__title { font-size: clamp(2.8rem, 12vw, 4.4rem); }
  .hero3d__ch--2, .hero3d__ch--3, .hero3d__ch--4, .hero3d__ch--5 { justify-content: flex-end; padding-bottom: 14vh; }
  /* portrait: the fallback photo lives above the copy, never behind it */
  .hero3d__poster { width: auto; height: 30svh; max-width: 80vw; right: 50%; top: calc(var(--header-h) + 3svh); transform: translateX(50%) rotate(-8deg); opacity: .9; object-fit: contain; }
  .routes { grid-template-columns: 1fr; }
  .checks { grid-template-columns: 1fr; }
  .field--row3 { grid-template-columns: 1fr 1fr; }
  .about-gallery { grid-template-columns: 1fr 1fr; }
  .about-gallery figure:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 10; }
}
@media (max-width: 640px) {
  .brand__logo { height: 22px; }
  .mega__products { grid-template-columns: repeat(2, 1fr); }
  .pgrid { grid-template-columns: 1fr; }
  .factory__facts { grid-template-columns: 1fr; }
  .factory__photos { height: 110vw; }
  .specs th { width: 48%; }
  .doc { grid-template-columns: 40px 1fr auto; gap: 12px; padding: 14px; }
  .doc__ico { width: 40px; height: 40px; }
  .field--row3 { grid-template-columns: 1fr; }
  .lineup__chips .spec-chip b { font-size: 1.15rem; }
}
@media (max-width: 860px) and (orientation: portrait) {
  .hero3d__ch--1 { justify-content: flex-end; padding-bottom: 9vh; }
  .hero3d__ch--1 .hero__sub { font-size: 1.02rem; }
  .lineup { height: calc(var(--n, 6) * 66vh + 40vh); }
  .lineup__head { gap: 12px; }
  .lineup__tabs { flex-wrap: nowrap; overflow-x: auto; width: calc(100% + var(--gutter) * 2); margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter); scrollbar-width: none; }
  .lineup__tabs::-webkit-scrollbar { display: none; }
  .lineup__tabs a { flex-shrink: 0; min-height: 40px; display: inline-flex; align-items: center; }
  .lineup__body { grid-template-columns: 1fr; grid-template-rows: auto auto; gap: 8px; }
  .lineup__visual { order: -1; height: 26vh; }
  .lineup__copy { min-height: 330px; }
  .lineup__chips { gap: 8px; margin: 2px 0 4px; }
  .lineup__chips .spec-chip { padding: 8px 11px; }
  .lineup__sub { font-size: 1rem; }
  .lineup__item { justify-content: flex-start; gap: 8px; }
  .lineup__item h3 { font-size: clamp(2rem, 10vw, 3rem); }
  .lineup__sum { display: none; }
  .lineup__word span { font-size: 18vw; }
  .viewer { aspect-ratio: 4 / 5; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .hero3d__ch--1 .hero__title { font-size: clamp(2.2rem, 9vh, 3.4rem); }
  .hero3d__ch p, .hero__sub { display: none; }
  .lineup__head .h2 { font-size: 1.6rem; }
  .lineup__tabs a { padding: 6px 12px; font-size: .8rem; }
  .lineup__visual { height: 58vh; }
  .lineup__copy { min-height: 58vh; }
  .lineup__item h3 { font-size: 2.6rem; }
  .lineup__sum, .lineup__chips, .lineup__sub { display: none; }
}
@media (max-height: 820px) and (min-width: 861px), (max-height: 820px) and (orientation: landscape) {
  .lineup__sum { display: none; }
  .lineup__item h3 { font-size: clamp(2.4rem, 5vw, 4rem); }
}
@media (prefers-reduced-motion: reduce) {
  .lineup__img, .lineup__item { transition: none; }
  .hs__dot::before { animation: none; }
  .factory__ph, .factory__ph img { transform: none !important; }
}

/* ==========================================================================
   PRODUCT STAGE — live 3D device, numbered notes, feature rail
   ========================================================================== */
.pstage { position: relative; min-height: 100vh; min-height: 100svh; height: clamp(680px, 100svh, 1040px); overflow: hidden; color: #fff; background: var(--ink); isolation: isolate; }
.pstage__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(45% 55% at 66% 48%, rgba(59, 59, 196, .5), transparent 70%),
    radial-gradient(35% 40% at 85% 85%, rgba(224, 113, 79, .12), transparent 70%),
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(180deg, #07071a, #0c0c2c 55%, #09091f); }
.pstage__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(9, 9, 31, .9) 0%, rgba(9, 9, 31, .6) 30%, rgba(9, 9, 31, 0) 48%); }
@media (max-width: 860px), (orientation: portrait) { .pstage__scrim { display: none; } }
.pstage__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 80% at 60% 50%, transparent 55%, rgba(5, 5, 18, .85)); }
.pstage__canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; opacity: 0; transition: opacity .35s var(--ease-out); }
.pstage.is-3d .pstage__canvas { opacity: 1; }
.pstage.is-grabbing .pstage__canvas { cursor: grabbing; }
.pstage__fallback { display: none; position: absolute; inset: 0 0 0 38%; padding: 120px 4vw 160px; }
.pstage.no-3d:not(.is-3d) .pstage__fallback { display: grid; }
.pstage.no-3d:not(.is-3d) .pstage__dots, .pstage.no-3d:not(.is-3d) .pstage__card, .pstage.no-3d:not(.is-3d) .pstage__ctl, .pstage.no-3d:not(.is-3d) .pstage__rail { display: none; }

.pstage__copy { position: absolute; z-index: 3; left: max(var(--gutter), calc((100vw - var(--maxw)) / 2)); top: calc(var(--header-h) + 28px); width: min(440px, 40vw); pointer-events: none; }
.pstage__copy a, .pstage__copy button { pointer-events: auto; }
.pstage__copy .crumbs { color: var(--muted-on-dark); }
.pstage__copy .pd-badge { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.pstage__copy .pd-badge--new { background: var(--signal); box-shadow: none; }
.pstage__copy .pd-hero__badges { margin-top: 26px; }
.pstage__copy h1 { font-size: clamp(3rem, 6.4vw, 6.2rem); line-height: .9; letter-spacing: -.055em; font-weight: 680; margin: 14px 0 14px; }
.pstage__sub { font-size: var(--fs-lead); line-height: 1.4; color: var(--muted-on-dark); max-width: 30ch; }
.pstage__copy .pd-keys span { color: var(--muted-on-dark); }
.pstage__rc { display: inline-flex; gap: 10px; align-items: center; margin-top: 22px; font-family: var(--mono); font-size: .74rem; letter-spacing: .06em; color: var(--muted-on-dark); }
.pstage__rc svg { width: 16px; height: 16px; color: var(--signal); }

/* numbered markers that follow the model */
.pstage__dots { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.sdot { opacity: 0; position: absolute; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(12, 12, 40, .55); color: #fff; font-family: var(--mono); font-size: .78rem; font-weight: 500;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .85); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: opacity .3s, background-color .3s, box-shadow .4s; will-change: transform; }
.sdot::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid rgba(224, 113, 79, .7); animation: sdot 2.6s var(--ease-out) infinite; }
.sdot:hover, .sdot.is-active { background: var(--signal); box-shadow: inset 0 0 0 1.5px var(--signal), 0 0 30px rgba(224, 113, 79, .7); }
.sdot.is-active::after { animation: none; opacity: 0; }
@keyframes sdot { from { transform: scale(.75); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }

/* glass note card */
.pstage__card { position: absolute; left: 0; top: 0; z-index: 4; width: min(320px, calc(100vw - 24px)); border-radius: 20px; overflow: hidden;
  background: rgba(16, 16, 48, .72); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 40px 80px -30px rgba(0, 0, 0, .7);
  opacity: 0; transition: opacity .35s var(--ease-out); }
.pstage__card.is-open { opacity: 1; }
.pstage__card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pstage__card-body { padding: 18px 20px 20px; display: grid; gap: 6px; }
.pstage__card-num { font-family: var(--mono); font-size: .74rem; color: var(--signal); letter-spacing: .1em; }
.pstage__card b { font-size: 1.2rem; letter-spacing: -.02em; font-weight: 640; line-height: 1.2; padding-right: 26px; }
.pstage__card p { color: var(--muted-on-dark); font-size: .95rem; line-height: 1.5; }
.pstage__card-x { position: absolute; right: 10px; top: 10px; width: 34px; height: 34px; border-radius: 50%; font-size: 1.3rem; line-height: 1; background: rgba(255, 255, 255, .1); }
.pstage__card-x:hover { background: rgba(255, 255, 255, .2); }

/* feature rail along the bottom */
.pstage__rail { position: absolute; z-index: 3; left: max(var(--gutter), calc((100vw - var(--maxw)) / 2)); right: max(var(--gutter), calc((100vw - var(--maxw)) / 2)); bottom: clamp(18px, 3.5vh, 36px);
  list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.pstage__rail::-webkit-scrollbar { display: none; }
.pstage__rail button { flex-shrink: 0; display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px 0 8px; border-radius: 999px; white-space: nowrap;
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); font-size: .92rem; font-weight: 520; color: #e9e9f7;
  transition: background-color .3s, box-shadow .3s; }
.pstage__rail button i { font-style: normal; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-family: var(--mono); font-size: .74rem; background: rgba(255, 255, 255, .1); }
.pstage__rail button:hover { background: rgba(255, 255, 255, .12); }
.pstage__rail button[aria-pressed="true"] { background: #fff; color: var(--ink); }
.pstage__rail button[aria-pressed="true"] i { background: var(--signal); color: #fff; }
.pstage__ctl { position: absolute; z-index: 3; right: max(var(--gutter), calc((100vw - var(--maxw)) / 2)); top: calc(var(--header-h) + 28px); display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; max-width: 52vw; }
.pstage__ctl .viewer__hint { width: 100%; text-align: right; }
/* Text and the chip rail are laid out in order (not pinned to the top and the bottom), so on short or
   narrow screens (15" laptops, zoomed browsers) the stage grows instead of the two overlapping (2026-11-05). */
@media (min-width: 861px) and (orientation: landscape) {
  .pstage { height: auto; min-height: clamp(680px, 100svh, 1040px); display: flex; flex-direction: column; justify-content: space-between;
    gap: 28px; padding: calc(var(--header-h) + 28px) 0 clamp(18px, 3.5vh, 36px); }
  .pstage__copy { position: relative; left: auto; top: auto; margin-left: max(var(--gutter), calc((100vw - var(--maxw)) / 2)); }
  .pstage__rail { position: relative; left: auto; right: auto; bottom: auto; flex-shrink: 0;
    margin-inline: max(var(--gutter), calc((100vw - var(--maxw)) / 2)); }
  /* the 3D buttons (top right) wrap within the room beside the text column instead of running into it */
  .pstage__ctl { max-width: calc(100vw - 2 * max(var(--gutter), calc((100vw - var(--maxw)) / 2)) - min(440px, 40vw) - 32px); }
}
.pd-photo { margin-bottom: 28px; border-radius: var(--radius); background: radial-gradient(70% 70% at 50% 55%, #fff, #eceef7 75%); padding: 6%; }
.pd-photo img { max-height: 420px; margin: 0 auto; object-fit: contain; }

@media (max-width: 860px), (orientation: portrait) {
  .pstage { height: auto; min-height: 0; padding-top: 58svh; display: flex; flex-direction: column; gap: 18px; padding-bottom: 28px; }
  .pstage__canvas { height: 57svh; bottom: auto; }
  .pstage__copy { position: relative; left: auto; top: auto; width: auto; padding-inline: var(--gutter); order: 3; }
  .pstage__copy .crumbs { display: none; }
  .pstage__copy .pd-hero__badges { margin-top: 0; }
  .pstage__copy h1 { font-size: clamp(2.6rem, 13vw, 4rem); }
  .pstage__rail { position: relative; left: auto; right: auto; bottom: auto; order: 1; padding-inline: var(--gutter); }
  .pstage__ctl { position: absolute; top: calc(var(--header-h) + 10px); right: 0; left: 0; max-width: none; justify-content: flex-start;
    flex-wrap: nowrap; overflow-x: auto; padding-inline: var(--gutter); scrollbar-width: none; }
  .pstage__ctl::-webkit-scrollbar { display: none; }
  .pstage__ctl .viewer__btn { flex-shrink: 0; }
  .pstage__ctl .viewer__hint { display: none; }
  .pstage__ctl .viewer__btn { min-height: 38px; padding: 0 14px; font-size: .82rem; }
  .pstage__fallback { inset: 0 0 auto 0; height: 58svh; padding: 90px 6vw 20px; }
  /* stacked layout: the card opens in the page flow under the part chips, never over the device */
  .pstage__card { position: relative; left: auto; top: auto; order: 2; width: auto; margin-inline: var(--gutter); transform: none !important; }
  .pstage__card img { max-height: 34vh; }
  .pstage__dots { height: 57svh; bottom: auto; overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .sdot::after { animation: none; } }

.hero__skip { pointer-events: auto; color: var(--muted-on-dark); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, .3); transition: color .2s; }
.hero__skip:hover { color: #fff; }

/* short portrait phones (iPhone SE and smaller): the pinned line-up must fit, button included */
@media (orientation: portrait) and (max-width: 860px) and (max-height: 760px) {
  .lineup__sticky { gap: 10px; }
  .lineup__head .h2 { font-size: 1.6rem; }
  .lineup__head .eyebrow + .h2 { margin-top: 6px !important; }
  .lineup__visual { height: 21vh; }
  .lineup__item { gap: 6px; }
  .lineup__item h3 { font-size: clamp(1.9rem, 9vw, 2.6rem); }
  .lineup__sub { font-size: .95rem; line-height: 1.3; }
  .lineup__chips .spec-chip { padding: 6px 10px; }
  .lineup__chips .spec-chip b { font-size: 1rem; }
}
@media (orientation: portrait) and (max-width: 860px) and (max-height: 620px) {
  .lineup__head .eyebrow, .lineup__idx, .lineup__sub, .lineup__chips { display: none; }
  .lineup__visual { height: 19vh; }
}

/* phones held sideways: the line-up keeps only the product tabs above the switcher */
@media (max-height: 500px) and (orientation: landscape) {
  .lineup__sticky { gap: 8px; }
  .lineup__head > div:first-child, .lineup__idx { display: none; }
  .lineup__item { gap: 6px; }
}

/* phones held sideways: the 3D area takes most of the short screen, or the device would be a sliver */
@media (max-height: 500px) and (orientation: landscape) {
  .pstage { padding-top: 82svh; }
  .pstage__canvas, .pstage__dots { height: 81svh; }
  .pstage__fallback { height: 82svh; }
}

/* ---------- line-up: the photo breaks into its own pixels and re-forms as the next one ---------- */
.lineup__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .8s; }
.lineup__visual.is-3d .lineup__canvas { opacity: 1; transition: none; }
/* the 3D module decides which solid photo shows (is-shown) and dissolves it between products */
.lineup__visual.is-3d .lineup__img { opacity: 0; transform: none; filter: none; transition: opacity .45s ease; }
.lineup__visual.is-3d .lineup__img.is-shown { opacity: 1; }

/* ---------- size picker: the chosen size in 3D, to the scale of the whole line ---------- */
.sizer__view { position: relative; height: clamp(190px, 22vw, 260px); border-radius: 20px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 40%, #232370 0%, #12123d 55%, #0b0b26 100%); }
.sizer__view canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sizer__view.no-3d { display: none; }
.sizer__dim { position: absolute; left: 0; top: 0; transform-origin: 0 50%; pointer-events: none;
  opacity: 0; transition: opacity .3s; }
.sizer__view.is-3d .sizer__dim { opacity: 1; }
.sizer__lab { position: absolute; left: 0; top: 0; pointer-events: none; }
.sizer__dim i { position: absolute; inset: 0; height: 1px; top: 50%; background: rgba(255,255,255,.55); }
.sizer__dim i::before, .sizer__dim i::after { content: ""; position: absolute; top: -4px; width: 1px; height: 9px; background: rgba(255,255,255,.7); }
.sizer__dim i::before { left: 0; } .sizer__dim i::after { right: 0; }
.sizer__lab { white-space: nowrap; font-weight: 600; font-size: .86rem; color: #fff;
  font-variant-numeric: tabular-nums; padding: 3px 9px; border-radius: 999px; background: rgba(11,11,38,.82);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.sizer__scale { position: absolute; left: 16px; top: 12px; font-size: .78rem; color: rgba(255,255,255,.55); }

/* ==========================================================================
   CALM FRAME (preview, opt-in with ?calm=1, off with ?calm=0)
   Removes the template habits so the 3D is the one signature moment:
   no labels above headings, no gradient words, no section numbers,
   no monospace costume, statistics as a quiet ledger.
   ========================================================================== */
.calm .eyebrow { display: none !important; }
.calm .hero3d__ch h2, .calm .hero__title { margin-top: 0 !important; }
.calm .grad-text, .calm .grad-text--light {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: currentColor; color: inherit;
}
.calm .dark .grad-text, .calm .hero3d .grad-text, .calm .factory .grad-text, .calm .cities .grad-text { color: var(--muted-on-dark); }
.calm .grad-text--light { color: var(--brand); }
.calm .lineup__idx, .calm .lineup__word { display: none; }
.calm .pcard__kind, .calm .mega-prod__kind, .calm .drawer__prods small, .calm .pd-badge, .calm .pd-keys span,
.calm .sizer__label, .calm .doc__meta, .calm .viewer__hint, .calm .lineup__chips .spec-chip span,
.calm .spec-chip span, .calm .stat__label, .calm .pstage__rc, .calm .news-card__date, .calm .crumbs,
.calm .pstage__card-num, .calm .scroll-cue, .calm .hero__meta {
  font-family: var(--font); letter-spacing: 0; text-transform: none;
}
.calm .pcard__kind, .calm .pd-keys span, .calm .sizer__label, .calm .lineup__chips .spec-chip span { font-size: .86rem; }
/* statistics as a ledger, not a hero-metric band */
.calm .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 5vw, 80px); }
.calm .stat { display: flex; align-items: baseline; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.calm .stat__num { font-size: clamp(1.6rem, 2.6vw, 2.2rem); min-width: 3.2em; }
.calm .stat__num sup { color: inherit; font-size: .5em; }
.calm .stat__label { margin: 0; font-size: 1rem; color: var(--text); }
@media (max-width: 640px) { .calm .stats { grid-template-columns: 1fr; } }

/* ---------- Balloon compliance (RAMA / NC RAMA): pressure → diameter from the IFU ---------- */
.comp__intro { color: var(--muted); margin-top: 14px; max-width: 34ch; }
.comp { display: grid; gap: 18px; }
.comp__row { display: grid; gap: 10px; }
.comp__label { font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.comp__sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.comp__panel { display: grid; gap: 14px; padding: clamp(16px, 3vw, 28px); border-radius: var(--radius); background: var(--paper);
  box-shadow: 0 0 0 1px var(--line), 0 30px 60px -40px rgba(39, 39, 116, .35); }
.comp__read { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.comp__big { display: flex; align-items: baseline; gap: 8px; }
.comp__big b { font-size: clamp(2.6rem, 6vw, 4rem); font-weight: 660; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.comp__big span { color: var(--muted); font-size: 1.1rem; }
.comp__meta { display: grid; gap: 4px; text-align: right; font-size: .92rem; }
.comp__meta > span:first-child { font-variant-numeric: tabular-nums; color: var(--muted); }
.comp__zone { font-weight: 600; color: var(--brand); }
.comp[data-zone="rbp"] .comp__zone { color: #b45309; }
.comp[data-zone="over"] .comp__zone { color: #c2410c; }
.comp__balloon { width: 100%; height: auto; max-height: 120px; }
.comp__wire { stroke: var(--muted); stroke-width: 1.2; opacity: .5; }
.comp__nominal { fill: none; stroke: var(--muted); stroke-width: 1.4; stroke-dasharray: 5 5; opacity: .6; transition: all .25s; }
.comp__shape { fill: rgba(59, 59, 196, .16); stroke: var(--brand); stroke-width: 2; transition: d .25s ease-out; }
.comp[data-zone="over"] .comp__shape { fill: rgba(224, 113, 79, .2); stroke: var(--signal); }
.comp__slider { display: grid; gap: 8px; }
.comp__slider output { font-family: var(--sans, inherit); font-weight: 600; color: var(--text, inherit); text-transform: none; letter-spacing: 0; margin-left: 6px; }
.comp__slider input[type=range] { width: 100%; height: 34px; accent-color: var(--brand); cursor: pointer; }
.comp__chart { width: 100%; height: auto; cursor: crosshair; overflow: visible; }
.comp__grid { stroke: var(--line); stroke-width: 1; }
.comp__tick { font-size: 11px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.comp__axis { font-size: 11px; fill: var(--muted); font-family: var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.comp__over { fill: rgba(224, 113, 79, .1); }
.comp__nomline { stroke: var(--muted); stroke-dasharray: 4 5; opacity: .7; }
.comp__np { stroke: var(--brand); stroke-dasharray: 2 4; opacity: .7; }
.comp__rbp { stroke: var(--signal); stroke-width: 1.5; }
.comp__tag { font-size: 11px; font-weight: 600; fill: var(--brand); font-family: var(--mono); }
.comp__tag--rbp { fill: var(--signal); }
.comp__curve { fill: none; stroke: var(--brand); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.comp__curve--over { stroke: var(--signal); stroke-dasharray: 6 6; stroke-width: 2.4; }
.comp__pt { fill: var(--paper); stroke: var(--brand); stroke-width: 1.5; }
.comp__dot { fill: var(--brand); stroke: #fff; stroke-width: 3; filter: drop-shadow(0 4px 10px rgba(39, 39, 116, .4)); transition: cx .2s, cy .2s; }
.comp[data-zone="over"] .comp__dot { fill: var(--signal); }
.comp__guide { stroke: var(--brand); stroke-width: 1; opacity: .35; }
.comp__table summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.comp__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.comp__table table { border-collapse: collapse; font-size: .82rem; font-variant-numeric: tabular-nums; min-width: 640px; }
.comp__table th, .comp__table td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: right; }
.comp__table thead th { position: sticky; top: 0; background: var(--paper); }
.comp__table tr.is-np td, .comp__table tr.is-np th { background: var(--brand-soft); font-weight: 600; }
.comp__note { font-size: .82rem; color: var(--muted); line-height: 1.5; }
@media (max-width: 640px) { .comp__meta { text-align: left; } .comp__read { align-items: flex-start; } }

/* ---------- Product comparison (/products/compare/) ---------- */
.cmp-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-weight: 500; }
.cmp-toggle input { width: 20px; height: 20px; accent-color: var(--brand); }
.cmp { margin-top: clamp(28px, 4vw, 48px); }
.cmp__title { font-size: var(--fs-d3, 2rem); letter-spacing: -.03em; font-weight: 620; margin-bottom: 18px; }
.cmp__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); box-shadow: 0 0 0 1px var(--line); background: var(--paper); }
.cmp__table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: .92rem; }
.cmp__table th, .cmp__table td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.cmp__table tbody tr:last-child > * { border-bottom: 0; }
.cmp__table tbody th { width: 22%; min-width: 170px; font-weight: 500; color: var(--muted); position: sticky; left: 0; background: var(--paper); z-index: 1; }
.cmp__table thead th { vertical-align: bottom; border-bottom: 1px solid var(--line); }
.cmp__corner { position: sticky; left: 0; background: var(--paper); z-index: 1; }
.cmp__prod { display: grid; gap: 6px; color: inherit; text-decoration: none; }
.cmp__prod img { width: 100%; max-width: 170px; aspect-ratio: 4 / 3; object-fit: contain; }
.cmp__prod b { font-size: 1.15rem; letter-spacing: -.02em; }
.cmp__prod small { color: var(--muted); font-weight: 400; font-size: .82rem; line-height: 1.35; }
.cmp__prod:hover b { color: var(--brand); }
.cmp__table tr.is-diff td { background: color-mix(in srgb, var(--brand-soft) 70%, transparent); }
.cmp__table tr.is-diff th { color: var(--ink); }
.section:has([data-cmp-diff]:checked) .cmp__table tbody tr:not(.is-diff) { display: none; }
.cmp__note { margin-top: 22px; color: var(--muted); font-size: .86rem; }
@media (max-width: 640px) {
  .cmp__table { min-width: 0; font-size: .84rem; }
  .cmp__table th, .cmp__table td { padding: 12px 10px; }
  .cmp__table tbody th, .cmp__corner { width: 104px; min-width: 104px; max-width: 104px; font-size: .78rem; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; }
  .cmp__table td, .cmp__table thead th:not(.cmp__corner) { min-width: 156px; }
  .cmp__prod img { max-width: 120px; }
  .cmp__prod b { font-size: 1rem; }
  .cmp__scroll { position: relative; }
  .cmp__title::after { content: " →"; color: var(--muted); font-weight: 400; font-size: .7em; }
}

/* ---------- Size table: diameter rows × length columns (stents) or two lists (balloons) ----------
   A framed table that reads as a spec sheet: indigo header, sticky diameter column, a filled cell with a
   tick for every size that is made, an empty grey cell for every size that is not. */
.size-table-wrap { margin-top: clamp(40px, 5vw, 64px); }
.size-table__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 16px; }
.size-table__head h3 { margin: 0; }
.size-table__legend { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin: 0; font-size: var(--fs-small); color: var(--muted); }
.size-key { display: inline-block; width: 18px; height: 18px; border-radius: 5px; vertical-align: -3px; }
.size-key--yes { background: var(--brand-soft); box-shadow: inset 0 0 0 1.5px var(--brand); }
.size-key--no { margin-left: 10px; background: var(--pearl); box-shadow: inset 0 0 0 1px var(--line); }
.size-table { overflow-x: auto; border-radius: var(--radius-sm); background: var(--paper);
  box-shadow: 0 0 0 1px rgba(39, 39, 116, .18), 0 24px 50px -34px rgba(39, 39, 116, .45);
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.size-table:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.size-table table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: max-content;
  font-variant-numeric: tabular-nums; font-size: .95rem; line-height: 1.2; }
.size-table th, .size-table td { padding: 0; text-align: center; white-space: nowrap; }
.size-table thead th { background: var(--brand-deep); color: #fff; font-weight: 600; height: 40px; min-width: 46px; padding: 0 8px;
  border-left: 1px solid rgba(255, 255, 255, .12); }
.size-table thead tr:first-child th { height: 34px; }
.size-table__axis { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500 !important;
  color: rgba(255, 255, 255, .72) !important; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.size-table__corner { position: sticky; left: 0; z-index: 2; min-width: 84px !important; border-left: 0 !important;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500 !important;
  background: #1d1d5c !important; color: rgba(255, 255, 255, .8) !important; }
.size-table tbody th { position: sticky; left: 0; z-index: 1; height: 44px; padding: 0 14px; text-align: left; font-weight: 640; color: var(--brand-deep);
  background: #f1f1fb; box-shadow: inset -1px 0 0 rgba(39, 39, 116, .18); }
.size-table tbody td { height: 44px; min-width: 46px; border-left: 1px solid var(--paper); border-top: 1px solid var(--paper); }
.size-table tbody tr + tr > * { border-top: 1px solid rgba(39, 39, 116, .08); }
.size-table td.is-yes { background: var(--brand-soft); }
.size-table td.is-yes svg { display: inline-block; width: 16px; height: 16px; fill: none; stroke: var(--brand); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.size-table td.is-no { background: repeating-linear-gradient(135deg, var(--pearl) 0 6px, #eceef5 6px 7px); }
.size-table tbody tr:hover > td.is-yes { background: #dcdcf7; }
.size-table tbody tr:hover > th { background: #e4e4f8; }
.size-table__note { margin-top: 12px; font-size: var(--fs-small); color: var(--muted); }
/* balloons: two lists (the IFU gives diameters and lengths separately) */
.size-table--lists table { min-width: 0; }
.size-table--lists tbody th { position: static; width: 1%; height: auto; vertical-align: top; padding: 18px; white-space: nowrap;
  color: #fff; background: var(--brand-deep); box-shadow: none; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.size-table--lists tbody tr:hover > th { background: var(--brand-deep); }
.size-table--lists tbody td { height: auto; min-width: 0; padding: 12px; text-align: left; white-space: normal; background: var(--paper); }
.size-table--lists tbody tr + tr > td { border-top: 1px solid rgba(39, 39, 116, .1); }
.size-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.size-chip { display: inline-grid; place-items: center; min-width: 3.2em; padding: 5px 9px; border-radius: 8px;
  background: var(--brand-soft); color: var(--brand-deep); font-weight: 560; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .size-table table { font-size: .86rem; }
  .size-table thead th, .size-table tbody td { min-width: 40px; }
  .size-table__corner { min-width: 64px !important; }
  .size-table tbody th { padding: 0 10px; }
  .size-table--lists tr { display: grid; }
  .size-table--lists tbody th { width: auto; padding: 12px 14px; }
}

/* ---------- Product photos on a cool stage ----------
   A white, translucent balloon film disappears on a white card, so product photos get a cooler, darker
   backdrop and a fine indigo edge (traced from the photo's own transparency). Stents use the same stage
   (2026-11-05) so the whole line-up reads as one set. */
.pcard .pcard__stage, .mega-prod__img, .pd-photo { background: radial-gradient(70% 70% at 50% 55%, #e4e7f3, #c5cbe2 80%); }
.pcard .pcard__stage img, .mega-prod__img img, img.balloon-photo, .lineup__img[data-shape^="balloon"] img,
.pd-photo img, .hs__frame.is-balloon img {
  filter: drop-shadow(0 0 .8px rgba(27, 27, 100, .95)) drop-shadow(0 0 .8px rgba(27, 27, 100, .7)) drop-shadow(0 18px 26px rgba(39, 39, 116, .3)); }

/* visually hidden, still read by screen readers */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Product section bar: hides with the site header while scrolling down (reading), comes back with it on any
   scroll up — it no longer sits over the content the whole time. */
.pd-nav { transition: top .6s var(--ease-out), transform .45s var(--ease-out); }
.header-hidden .pd-nav { top: 0; transform: translateY(-100%); }

/* Menu product cards: the photo is pinned inside its 4:3 box (height:% did not resolve, so tall photos such as
   NC RAMA's 367×1080 overflowed and were cut off). */
.mega-prod__img { position: relative; }
.mega-prod__img img { position: absolute; inset: 7%; width: 86%; height: 86%; }
/* The size table's screen-reader labels are absolutely positioned: keep them inside the table's scroll box,
   or on phones they escape it and make the whole page scroll sideways. */
.size-table { position: relative; }

/* ---------- Scrollbars in the site's colours (as on raymed.ru, in RK's indigo → coral) ----------
   Chrome / Edge / Yandex / Safari: rounded gradient thumb. Firefox can only colour them. Phones keep
   their own overlay scrollbars. */
@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar { width: 12px; height: 8px; }
  ::-webkit-scrollbar-track { background: transparent; }
  html::-webkit-scrollbar-track { background: var(--pearl); }
  ::-webkit-scrollbar-thumb {
    border: 3px solid transparent; border-radius: 999px; background-clip: padding-box;
    background-image: linear-gradient(180deg, var(--brand), #6a4fc8 70%, var(--signal));
  }
  ::-webkit-scrollbar-thumb:hover { border-width: 2px; }
  ::-webkit-scrollbar-thumb:horizontal { border-width: 2px; background-image: linear-gradient(90deg, var(--brand), var(--signal)); }
  ::-webkit-scrollbar-corner { background: transparent; }
}
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-color: var(--brand) var(--pearl); }
  * { scrollbar-color: var(--brand) transparent; }
}

/* Size table: catalogue numbers (REF) instead of ticks, on request */
.size-table__tools { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; }
.size-table__toggle { min-height: 40px; padding: 0 16px; border-radius: 999px; font-size: .88rem; font-weight: 560; color: var(--brand-deep);
  box-shadow: inset 0 0 0 1.5px var(--brand); background: var(--paper); transition: background-color .2s, color .2s; }
.size-table__toggle:hover, .size-table__toggle[aria-pressed="true"] { background: var(--brand); color: #fff; }
.size-table__prefix { display: none; margin-top: 4px; font-size: .62rem; letter-spacing: .04em; text-transform: none; opacity: .9; white-space: nowrap; }
.size-ref { display: none; font-family: var(--mono); font-size: .76rem; color: var(--brand-deep); white-space: nowrap; padding: 0 8px; }
.show-refs .size-table td.is-yes svg { display: none; }
.show-refs .size-ref { display: inline; }
.show-refs .size-table__prefix { display: block; }
.show-refs .size-table thead th { min-width: 74px; }
.sizer__ref { margin-top: 6px; font-family: var(--mono); font-size: .9rem; color: var(--brand-deep); }

/* ---------- Quality page ---------- */
.qfacts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.qfact { display: grid; align-content: start; gap: 8px; padding: clamp(20px, 2.4vw, 30px); border-radius: var(--radius-sm); background: var(--pearl);
  box-shadow: inset 0 0 0 1px var(--line); }
.qfact__k { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.qfact__v { font-size: clamp(1.35rem, 2.2vw, 1.8rem); font-weight: 640; letter-spacing: -.03em; color: var(--brand-deep); line-height: 1.1; }
.qfact__d { color: var(--muted); font-size: .92rem; }
.qphotos { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
.qphotos figure { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; margin: 0; }
.qphotos img { width: 100%; height: 100%; object-fit: cover; }
.qtable table { min-width: 0; }
.qtable thead th { text-align: left; padding: 0 16px; }
.qtable tbody th, .qtable tbody td { height: auto; padding: 14px 16px; text-align: left; white-space: normal; vertical-align: top; }
.qtable tbody td { background: var(--paper); font-variant-numeric: tabular-nums; }
.qtable tbody th { position: static; }
.qtable a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.qstd { display: grid; gap: 22px; }
.qstd__group h3 { font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin: 0 0 10px; }
.qstd ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.qstd li { display: grid; grid-template-columns: minmax(170px, 230px) 1fr; gap: 6px 22px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.qstd li b { font-weight: 620; color: var(--brand-deep); font-variant-numeric: tabular-nums; }
.qstd li span { color: var(--text); }
@media (max-width: 900px) { .qfacts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .qfacts { grid-template-columns: 1fr; }
  .qphotos { grid-template-columns: 1fr; }
  .qstd li { grid-template-columns: 1fr; }
  .qtable thead th { padding: 0 10px; }
  .qtable tbody th, .qtable tbody td { padding: 12px 10px; }
}

/* ---------- Evidence page ---------- */
.ev-group { margin-top: clamp(28px, 4vw, 48px); }
.ev-group > h2 { margin: 0 0 14px; }
.ev { padding: clamp(20px, 2.6vw, 30px); border-radius: var(--radius-sm); background: var(--paper); box-shadow: 0 0 0 1px var(--line); margin-bottom: 12px; }
.ev__meta { display: flex; flex-wrap: wrap; gap: 8px 14px; font-family: var(--mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ev__prod { color: var(--brand); }
.ev h3 { font-size: clamp(1.1rem, 1.6vw, 1.3rem); letter-spacing: -.02em; font-weight: 620; margin: 10px 0 0; }
.ev__authors { color: var(--muted); margin-top: 6px; }
.ev__summary { margin-top: 12px; line-height: 1.6; }
.ev__source { margin-top: 14px; font-size: .9rem; color: var(--muted); }
.ev__source span { font-weight: 600; color: var(--text); }
.ev__source a { color: var(--brand); }
.ev-cta { display: flex; justify-content: space-between; align-items: center; gap: 18px 28px; flex-wrap: wrap; margin-top: clamp(32px, 4vw, 52px);
  padding: clamp(22px, 3vw, 34px); border-radius: var(--radius); background: var(--brand-soft); }
.ev-cta h2 { margin: 0 0 6px; }
/* grid columns holding a wide table must be allowed to shrink, or the table widens the page on phones */
.qcol { min-width: 0; }

/* Menu product cards: product names sit on one line across the row whatever the length of the type label above
   (RAMA's one-line label lifted its name above the others). */
.mega-prod { grid-template-rows: auto 1fr auto; }
.mega-prod__kind { align-self: start; }
.mega-prod b { align-self: end; }

/* Request list under the size finder (2026-10-26): several sizes, of any product, with quantities, sent at once. */
.rq { display: grid; gap: 14px; padding: 20px 22px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--brand); }
.rq.is-bump { animation: rq-bump .45s ease; }
@keyframes rq-bump { 40% { box-shadow: inset 0 0 0 3px var(--brand), 0 0 0 6px var(--brand-soft); } }
.rq__head { display: flex; align-items: baseline; gap: 10px; }
.rq__head h3 { margin: 0; }
.rq__count { min-width: 26px; padding: 2px 8px; border-radius: 99px; background: var(--brand); color: #fff; font-size: .8rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.rq__items { list-style: none; margin: 0; padding: 0; display: grid; }
.rq__item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.rq__item:first-child { border-top: 0; }
.rq__name { min-width: 0; font-variant-numeric: tabular-nums; }
.rq__name b { margin-right: 4px; }
.rq__name small { display: block; margin-top: 2px; font-family: var(--mono); font-size: .78rem; color: var(--muted); }
.rq__qty { display: inline-flex; align-items: center; gap: 4px; }
.rq__qty button { width: 34px; height: 34px; border-radius: 10px; background: var(--pearl); box-shadow: inset 0 0 0 1px var(--line); font-weight: 700; font-size: 1.05rem; }
.rq__qty button:hover { box-shadow: inset 0 0 0 1.5px var(--brand); }
.rq__qty input { width: 58px; height: 34px; border-radius: 10px; border: 1px solid var(--line); text-align: center; font: inherit; font-weight: 600; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.rq__qty input::-webkit-outer-spin-button, .rq__qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rq__qty span { margin-left: 2px; color: var(--muted); font-size: .9rem; }
.rq__remove { width: 34px; height: 34px; border-radius: 50%; font-size: 1.3rem; line-height: 1; color: var(--muted); }
.rq__remove:hover { color: var(--ink); background: var(--pearl); }
.rq__foot { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.rq__note { font-size: .86rem; color: var(--muted); }
@media (max-width: 560px) {
  .rq { padding: 16px; }
  .rq__item { grid-template-columns: minmax(0, 1fr) auto; }
  .rq__qty { grid-column: 1; }
  .rq__remove { grid-row: 1; grid-column: 2; }
  .rq__foot .btn { flex: 1 1 auto; }
}

/* Personal data policy (/policy/, 2026-10-28): contents list, numbered sections, readable lists. */
.legal-toc { margin: 0 0 clamp(32px, 4vw, 48px); padding: 20px 24px; border-radius: 18px; background: var(--pearl); box-shadow: inset 0 0 0 1px var(--line); }
.legal-toc b { display: block; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.legal-toc ol { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.legal-toc li { margin: 0; }
.legal-toc a { color: var(--ink); text-decoration: none; }
.legal-toc a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.legal h2 { margin: clamp(36px, 4.5vw, 56px) 0 14px; font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.25; letter-spacing: -.02em; scroll-margin-top: 110px; }
.legal h3 { margin: 32px 0 10px; font-size: 1.08rem; line-height: 1.35; scroll-margin-top: 110px; }
.legal p { margin: 10px 0; }
.legal .legal-list { list-style: none; padding-left: 0; margin: 8px 0 14px; }
.legal .legal-list li { position: relative; padding-left: 1.3em; margin-top: .45em; }
.legal .legal-list li::before { content: "—"; position: absolute; left: 0; color: var(--muted); }
.legal .legal-defs li::before { content: none; }
.legal .legal-defs li { padding-left: 0; }