.prod-deep {
      padding-block: var(--gap-xl);
      background: var(--surface);
    }

.prod-deep .pd-layout {
      display: flex;
      flex-direction: column;
      gap: var(--gap-lg);
    }

.prod-deep .pd-head {
      max-width: 860px;
    }

.prod-deep .pd-visual {
      position: relative;
      border-radius: var(--radius-lg);
      overflow: hidden;
      background: var(--fg-soft);
      padding: 28px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

.prod-deep .pd-visual img {
      width: 100%;
      object-fit: contain;
      display: block;
      border-radius: 4px;
    }


.pd-placeholder {
      font-family: var(--font-mono);
      font-size: var(--fs-sm);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
      padding: 120px 0;
    }



.prod-deep .pd-head .pd-tier {
      font-family: var(--font-mono);
      font-size: var(--fs-sm);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--accent-deep);
      margin-bottom: 8px;
      display: block;
    }

.prod-deep .pd-head .pd-tier.gold { color: oklch(55% 0.13 85); }

.prod-deep .pd-head h2 {
      font-size: clamp(28px, 3.2vw, 38px);
      margin-bottom: 12px;
    }

.prod-deep .pd-head .pd-sub {
      font-size: var(--fs-body);
      color: var(--muted);
      line-height: 1.55;
      margin-bottom: 0;
    }

.prod-deep .pd-mech .pd-mech-title {
      font-weight: 600;
      font-size: var(--fs-body);
      margin: 0 0 14px;
      color: var(--fg);
    }

.prod-deep .pd-mech .pd-mech-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 14px;
    }

.prod-deep .pd-mech .pd-mech-list li {
      position: relative;
      font-size: 14px;
      line-height: 1.55;
      color: var(--muted);
      background: var(--fg-soft);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 18px 16px;
    }

.prod-deep .pd-mech .pd-mech-list li strong {
      display: block;
      margin-bottom: 6px;
      color: var(--fg);
      font-size: 15px;
    }

.prod-deep[data-tier="revive"] .pd-mech-list {
      grid-template-columns: repeat(2, 1fr);
    }

.prod-deep[data-tier="revive"] .pd-mech .pd-mech-list li:first-child {
      grid-column: 1 / -1;
      background: var(--gold-soft);
      border-color: color-mix(in oklch, var(--accent-gold) 45%, var(--border));
      padding: 22px 20px;
    }

.prod-deep[data-tier="revive"] .pd-mech .pd-mech-list li {
      border-color: color-mix(in oklch, var(--accent-gold) 30%, var(--border));
    }

.pd-clinical {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 32px 48px;
      margin: 8px 0 0;
      padding-top: 36px;
      border-top: 1px solid var(--border);
    }

.pd-clinical:has(.pd-stat:only-child) .pd-stat {
      align-items: center;
      text-align: center;
    }

.prod-deep .pd-cta {
      display: flex;
      justify-content: center;
      margin-top: 6px;
    }

.prod-deep .pd-cta .btn {
      padding: 12px 30px;
      border-radius: 999px;
      border: 1px solid var(--border);
      font-size: 14px;
      font-weight: 500;
      color: var(--fg);
      background: transparent;
      text-decoration: none;
      transition: background 0.15s, border-color 0.15s;
    }

.prod-deep .pd-cta .btn:hover {
      opacity: 0.7;
    }

.sb-intro {
      padding-block: var(--gap-xl);
    }

.ev-table {
      border-top: 2px solid var(--fg);
      border-bottom: 2px solid var(--fg);
    }

.ev-tr {
      display: grid;
      grid-template-columns: 2fr 0.9fr 1.1fr;
      grid-template-areas: "metric value source";
      gap: var(--gap-md);
      padding: 15px 4px;
      border-bottom: 1px solid var(--border);
      align-items: baseline;
    }

.ev-th {
      border-bottom: 1px solid var(--fg);
      font-size: var(--fs-sm);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--muted);
      padding: 0 4px 10px;
    }

@media (max-width: 640px) {
  .ev-tr {
        grid-template-columns: 1fr auto;
        grid-template-areas:
          "metric metric"
          "value source";
        gap: 2px var(--gap-md);
        padding: 12px 0;
      }
}





@media (max-width: 920px) {
  .prod-deep .pd-mech .pd-mech-list { grid-template-columns: 1fr; }
}



/* Original style.css lines 7910-8413 */
/* ═══ SKIN BOOSTERS PAGE (0826) ═══ */
/* auto aspect-ratio placeholders (prevents CLS / scroll jump on refresh) */
    img[src*="hero-model-transparent.png"] {aspect-ratio: 896 / 1200;}
img[src*="p4.png"] {aspect-ratio: 778 / 778;}
/* ── Page-specific styles ─────────────────── */
.sb-hero {height: calc(100vh - 56px);
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
      background: linear-gradient(135deg, oklch(94% 0.018 195) 0%, var(--surface) 50%, oklch(93% 0.025 170) 100%);}
.sb-hero .hero-grid {display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
      align-items: center;
      gap: var(--gap-xl);
      width: 100%;}
.sb-hero .hero-content {width: auto;
      max-width: none;
      margin: 0;
      padding: 0;}
.sb-hero .hero-visual {display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      z-index: 2;}
.sb-hero .hero-visual img {height: calc(100vh - 160px);
      max-height: calc(100vh - 160px);
      width: auto;
      max-width: 100%;
      object-fit: contain;
      filter: drop-shadow(0 16px 48px color-mix(in oklch, var(--accent-deep) 22%, transparent));}
.sb-hero::before {content: '';
      position: absolute;
      top: -40%; right: -10%;
      width: 600px; height: 600px;
      border-radius: 50%;
      background: radial-gradient(circle, var(--accent-soft) 0%, transparent 70%);
      pointer-events: none;}
.sb-hero h1 {max-width: 14ch;
      color: var(--fg);}
.sb-hero .hero-sub {max-width: 28ch;
      color: var(--muted);}
.sb-hero .hero-desc {max-width: 580px;
      color: var(--muted);}
.sb-hero .hero-actions {display: flex; flex-wrap: wrap; gap: 12px;}
.sb-hero .btn-primary {border-radius: 999px;}
.sb-hero .btn-hero-ghost {display: inline-flex; align-items: center; justify-content: center;
      padding: 11px 24px;
      border: 1px solid var(--border);
      color: var(--fg);
      border-radius: 999px;
      font-size: 14px;
      font-weight: 500;
      background: transparent;
      text-decoration: none;
      transition: background 0.15s, border-color 0.15s;}
.sb-hero .btn-hero-ghost:hover {background: var(--accent-soft);
      border-color: var(--accent);}
.ladder {display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--gap-lg);
      margin-top: var(--gap-xl);}
.ladder-tier {position: relative;
      padding: 32px 28px 28px;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      background: var(--surface);
      border-top: 4px solid oklch(88% 0.055 197);}
.ladder-tier:nth-child(2) {border-top-color: oklch(88% 0.07 72); margin-top: 24px;}
.ladder-tier:nth-child(3) {border-top-color: oklch(87% 0.06 12); margin-top: 48px;}
.ladder-tier .lt-level {font-family: var(--font-mono);
      font-size: var(--fs-sm);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: oklch(60% 0.08 197);
      margin-bottom: 10px;}
.ladder-tier .lt-name {font-family: var(--font-display);
      font-size: 22px;
      font-weight: 600;
      line-height: 1.2;
      margin: 0 0 8px;}
.ladder-tier .lt-product {font-family: var(--font-mono);
      font-size: var(--fs-sm);
      color: var(--muted);
      margin-bottom: 12px;}
.ladder-tier .lt-desc {color: var(--muted);
      font-size: 14px;
      line-height: 1.6;
      margin: 0;}
.ladder-tier:nth-child(2) .lt-level {color: oklch(60% 0.11 72);}
.ladder-tier:nth-child(3) .lt-level {color: oklch(58% 0.1 12);}
.prod-deep {position: relative;
      overflow: hidden;
      padding-block: var(--gap-prod);
      background: var(--surface);}
/* ghost number at section level — big, pressed onto the image corner like ha-filler:
   image left → top-left corner, image right → top-right corner */
.prod-deep-wm {position: absolute;
      top: 8px; right: 24px;
      font-family: var(--font-mono);
      font-size: clamp(120px, 16vw, 240px);
      font-weight: 700;
      line-height: 1;
      letter-spacing: -0.04em;
      color: oklch(52% 0.09 197 / 0.08);
      pointer-events: none;
      user-select: none;
      z-index: 2;}
.prod-deep[data-tier="meso"] .prod-deep-wm,
.prod-deep[data-tier="revive"] .prod-deep-wm {right: auto; left: 24px;}
.prod-deep-wm.reveal {opacity: 0;
      transform: translate(90px, -50px) rotate(10deg) scale(1.15);
      transition: opacity 0.6s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);}
.prod-deep[data-tier="meso"] .prod-deep-wm.reveal,
.prod-deep[data-tier="revive"] .prod-deep-wm.reveal {transform: translate(-90px, -50px) rotate(-10deg) scale(1.15);}
.prod-deep .prod-deep-wm.reveal.visible {opacity: 1;
      transform: translate(0, 0) rotate(0) scale(1);
      transition-delay: 0.5s;}
.prod-deep:first-of-type {border-top: 1px solid var(--border);}
.prod-deep:last-of-type {border-bottom: 1px solid var(--border);}
/* three-product color journey: teal → amber → coral, echoing each pack */
.prod-deep[data-tier="meso"] {background:
      linear-gradient(180deg, oklch(100% 0 0) 0%, oklch(100% 0 0 / 0) 14%),
      linear-gradient(0deg, oklch(100% 0 0) 0%, oklch(100% 0 0 / 0) 14%),
      linear-gradient(135deg, oklch(97% 0.025 205) 0%, oklch(95.5% 0.02 195) 30%, var(--surface) 65%);}
.prod-deep[data-tier="mesonova"] {background:
      linear-gradient(180deg, oklch(100% 0 0) 0%, oklch(100% 0 0 / 0) 14%),
      linear-gradient(0deg, oklch(100% 0 0) 0%, oklch(100% 0 0 / 0) 14%),
      linear-gradient(225deg, oklch(97% 0.025 205) 0%, oklch(95.5% 0.02 195) 30%, var(--surface) 65%);}
.prod-deep[data-tier="revive"] {background:
      linear-gradient(180deg, oklch(100% 0 0) 0%, oklch(100% 0 0 / 0) 14%),
      linear-gradient(0deg, oklch(100% 0 0) 0%, oklch(100% 0 0 / 0) 14%),
      linear-gradient(135deg, oklch(97% 0.025 205) 0%, oklch(95.5% 0.02 195) 30%, var(--surface) 65%);}
.prod-deep .pd-layout {display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--gap-2xl);
      align-items: center;}
/* alternating rhythm: Meso 图左文右 → Mesonova 文左图右 → Revive 图左文右 */
.prod-deep[data-tier="mesonova"] .pd-layout > :first-child {order: 2;}
.prod-deep[data-tier="mesonova"] .pd-layout > :last-child {order: 1;}
.prod-deep .pd-figure {width: min(580px, 100%);
      margin-inline: auto;
      border-radius: var(--radius-lg);
      overflow: hidden;
      background: var(--surface);
      padding: 26px;}
.prod-deep .pd-figure img {width: 100%; height: auto;
      display: block;
      border-radius: var(--radius);}
.prod-deep .pd-copy {min-width: 0;}
.prod-deep .pd-copy .pd-tier {font-family: var(--font-mono);
      font-size: var(--fs-sm);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 8px;
      display: block;}
.prod-deep .pd-copy .pd-tier.gold {color: oklch(55% 0.13 85);}
.prod-deep .pd-copy h2 {font-size: clamp(28px, 3.2vw, 38px);
      margin-bottom: 10px;}
.prod-deep .pd-copy h2 em {font-style: normal;
      color: var(--accent-deep);}
.prod-deep .pd-copy .pd-body {font-size: var(--fs-body);
      color: var(--muted);
      line-height: 1.7;
      margin: 0;}
.pd-clinical {display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px 40px;
      margin: 24px 0 0;
      padding-top: 24px;
      border-top: 1px solid var(--border);}
.pd-clinical .pd-stat {display: flex;
      flex-direction: column;
      padding: 0;
      background: none;
      border-radius: 0;
      min-width: 0;}
.pd-clinical .pd-stat .pd-stat-val {font-family: var(--font-display);
      font-size: clamp(34px, 4vw, 52px);
      font-weight: 600;
      line-height: 1;
      color: var(--accent-deep);
      letter-spacing: -0.02em;
      margin-bottom: 10px;}
.pd-clinical .pd-stat .pd-stat-label {font-size: 14px;
      color: var(--muted);
      margin-top: 0;
      line-height: 1.5;
      max-width: 280px;}
.prod-deep .pd-cta {display: flex;
      justify-content: flex-start;
      gap: 12px;
      margin-top: 24px;}
.prod-deep .pd-cta .btn {padding: 12px 30px;
      border-radius: 999px;
      border: 1px solid transparent;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0.06em;
      color: var(--surface);
      background: linear-gradient(135deg, var(--accent-deep) 0%, oklch(46% 0.1 250) 100%);
      box-shadow: 0 10px 24px -10px color-mix(in oklch, var(--accent-deep) 45%, transparent);
      text-decoration: none;
      transition: filter 0.2s, box-shadow 0.2s;}
.prod-deep .pd-cta .btn::after {content: '→';
      transition: transform 0.15s ease;}
.prod-deep .pd-cta .btn:hover {filter: brightness(1.08);}
.prod-deep .pd-cta .btn:hover::after {transform: translateX(2px);}
.sb-intro {padding-block: var(--gap-xl);
      background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);}
.sb-intro .si-grid {display: grid;
      grid-template-columns: 1fr 340px;
      gap: var(--gap-2xl);
      align-items: center;
      max-width: 1000px;
      margin: 0 auto;}
.sb-intro .si-text-wrap {min-width: 0;}
.sb-intro h2 {font-size: clamp(24px, 2.8vw, 34px);
      margin: 0 0 12px;}
.sb-intro .si-text {font-size: var(--fs-body);
      line-height: 1.7;
      color: var(--muted);
      margin: 0;}
.sb-intro .si-text strong {color: var(--fg);}
.sb-intro .si-visual {border-radius: var(--radius-lg);
      overflow: hidden;
      aspect-ratio: 1 / 1;
      max-width: 340px;
      margin: 0 auto;}
.sb-intro .si-visual img {width: 100%; height: 100%;
      object-fit: cover;
      display: block;}
/* ── Clinical evidence: neutral warm wash — carries the product band's
   warmth without claiming any single pack color (the table holds all three) ── */
.section.sb-evidence {border-top: 0;
      background:
        linear-gradient(180deg, oklch(100% 0 0) 0%, oklch(100% 0 0 / 0) 14%),
        linear-gradient(0deg, oklch(100% 0 0) 0%, oklch(100% 0 0 / 0) 14%),
        linear-gradient(135deg, oklch(97% 0.025 205) 0%, oklch(95.5% 0.02 195) 30%, var(--surface) 65%);}
.sb-evidence .container {max-width: var(--container-narrow);}
.ev-table {position: relative;
      margin-top: 40px;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      background: var(--surface);
      overflow: hidden;}
.ev-table::before {content: '';
      display: block;
      height: 2px;
      margin-bottom: 0;
      background: linear-gradient(90deg, var(--accent-deep), var(--accent));}
.ev-tr {display: grid;
      grid-template-columns: 2fr 0.9fr 1.1fr;
      grid-template-areas: "metric value source";
      gap: var(--gap-md);
      padding: 15px 20px;
      border-bottom: 1px solid var(--border);
      align-items: baseline;}
.ev-tr:last-child {border-bottom: none;}
.ev-th {border-bottom: 1px solid var(--fg);
      font-size: var(--fs-sm);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--muted);
      padding: 0 20px 10px;}
.ev-th .ev-td-metric {font-weight: 600;}
.ev-th .ev-td-val {font-weight: 600;}
.ev-td-metric {grid-area: metric;
      font-size: var(--fs-body);
      color: var(--fg);
      line-height: 1.45;}
.ev-td-val {grid-area: value;
      font-size: var(--fs-body);
      font-weight: 600;
      color: var(--accent-deep);
      text-align: right;
      font-variant-numeric: tabular-nums;}
/* each value is tinted with its product's pack color */
.ev-tr[data-tier="meso"] .ev-td-val {color: oklch(52% 0.09 197);}
.ev-tr[data-tier="mesonova"] .ev-td-val {color: oklch(57% 0.13 72);}
.ev-tr[data-tier="revive"] .ev-td-val {color: oklch(50% 0.12 12);}
.ev-td-source {grid-area: source;
      font-size: var(--fs-body);
      color: var(--muted);
      text-align: right;
      line-height: 1.5;}
.sb-partner {background: linear-gradient(135deg, oklch(28% 0.03 195), oklch(20% 0.02 200));
      color: var(--surface);}
.sb-partner .sp-grid {display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--gap-2xl);
      align-items: center;}
.sb-partner .sp-impact {display: flex; flex-direction: column; gap: 16px;}
.sb-partner .sp-impact h2 {font-size: clamp(28px, 3.6vw, 42px);
      line-height: 1.1;
      letter-spacing: -0.02em;
      margin: 0;}
.sb-partner .sp-impact p {font-size: var(--fs-body);
      line-height: 1.7;
      color: oklch(72% 0.03 195);
      margin: 0;}
.sb-partner .sp-impact .sp-punch {font-family: var(--font-display);
      font-size: clamp(18px, 2vw, 24px);
      font-style: italic;
      color: var(--accent);
      margin: 0;}
.sb-partner .sp-form {background: var(--surface);
      border-radius: var(--radius-lg);
      padding: 36px 32px 32px;
      border: 1px solid var(--accent);
      display: flex; flex-direction: column; gap: var(--gap-md);}
.sb-partner .sp-form h3 {font-family: var(--font-display);
      font-size: 20px;
      color: var(--fg);
      margin: 0 0 4px;}
.sb-partner .sp-form .field {display: flex; flex-direction: column; gap: 6px;}
.sb-partner .sp-form .field label {font-size: var(--fs-sm);
      color: var(--muted);
      letter-spacing: 0.03em;
      text-transform: uppercase;}
.sb-partner .sp-form .field .input,
    .sb-partner .sp-form .field .textarea {width: 100%;
      padding: 11px 14px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--bg);
      color: var(--fg);
      font: inherit;
      font-size: 14px;
      transition: border-color 0.15s;}
.sb-partner .sp-form .field .input:focus,
    .sb-partner .sp-form .field .textarea:focus {outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-soft);}
.sb-partner .sp-form .field .textarea {min-height: 80px; resize: vertical;}
.sb-partner .sp-form .form-row {display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-md);}
/* ── consolidated: previously inline in markup ── */
.topnav .logo img {height:28px; width:auto; display:block;}
.topnav nav > li > a {display:inline-flex; align-items:center; gap:4px;}
.topnav .mega {width:660px;}
.sp-form button[type="submit"] {width:100%; justify-content:center; padding-block:14px;}
.sb-partner .eyebrow {color: var(--accent);}
.sb-partner strong {color: var(--surface);}
.pagefoot .foot-bottom .meta {color: oklch(55% 0.015 195);}
#products {border-top:0; background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 60%, var(--surface) 100%);}
/* ── 6.5 Spec comparison table ────────────────────────── */
.sb-compare .cmp-scroll {
  margin-top: 40px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.sb-compare .cmp-table {
  display: grid;
  min-width: var(--spec-compare-min-width);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}
.sb-compare .cmp-row {
  display: grid;
  grid-template-columns: var(--spec-compare-columns);
  border-bottom: 1px solid var(--border);
}
.sb-compare .cmp-row:last-child { border-bottom: none; }
.sb-compare .cmp-cell {
  padding: 18px 20px;
  color: var(--fg);
  font-size: var(--fs-body);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  height:100%;
}
.sb-compare .cmp-cell + .cmp-cell { border-left: 1px solid var(--border); }
.sb-compare .cmp-row:not(.cmp-head) .cmp-cell {
  align-self: center;
  text-align: center;
}
.sb-compare .cmp-cat {
  align-self: center;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}
.sb-compare .cmp-prod {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px 16px;
  text-align: center;
}
.sb-compare .cmp-prod img { width: var(--spec-compare-product-image-width); height: auto; }
.sb-compare .cmp-prod strong { font-family: var(--font-display); font-size: 16px; font-weight: 600; }

.sb-compare {--spec-compare-columns: minmax(152px, 0.85fr) repeat(3, minmax(0, 1fr));
      --spec-compare-min-width: 780px;
      --spec-compare-product-image-width: 146px;
      background:
        linear-gradient(180deg, oklch(100% 0 0) 0%, oklch(100% 0 0 / 0) 14%),
        linear-gradient(0deg, oklch(100% 0 0) 0%, oklch(100% 0 0 / 0) 14%),
        linear-gradient(225deg, oklch(97% 0.025 205) 0%, oklch(95.5% 0.02 195) 30%, var(--surface) 65%);}
/* ── Technical Advantages ─────────────────────── */
.prod-deep .pd-cta .btn-tech {display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 30px;
      border-radius: 999px;
      border: 1px solid var(--border);
      font-size: 14px;
      font-weight: 600;
      color: var(--fg);
      background: transparent;
      text-decoration: none;
      transition: background 0.15s, border-color 0.15s, color 0.15s;}
.prod-deep .pd-cta .btn-tech svg {width: 15px;
      height: 15px;
      flex: none;}
.prod-deep .pd-cta .btn-tech::after {content: none;}
.prod-deep .pd-cta .btn-tech {color: var(--accent-deep); border-color: color-mix(in oklch, var(--accent-deep) 45%, var(--border));}
.prod-deep .pd-cta .btn-tech:hover {background: var(--accent-deep); color: var(--surface);}
.tech-modal {position: fixed;
      inset: 0;
      z-index: 200;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: oklch(20.8% 0.009 59.2 / 0.55);
      backdrop-filter: blur(4px);}
.tech-modal.open {display: flex;}
.tech-modal-panel {position: relative;
      width: min(860px, 100%);
      max-height: 88vh;
      overflow-y: auto;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      box-shadow: 0 24px 64px oklch(20.8% 0.009 59.2 / 0.22);
      padding: clamp(24px, 4vw, 48px);}
.tech-modal-close {position: absolute;
      top: 16px;
      right: 16px;
      width: 34px;
      height: 34px;
      border: 1px solid var(--border);
      border-radius: 50%;
      background: var(--surface);
      color: var(--muted);
      font-size: 16px;
      line-height: 1;
      transition: background 0.15s, color 0.15s, border-color 0.15s;}
.tech-modal-close:hover {background: var(--accent-soft); border-color: var(--accent); color: var(--fg);}
.tech-doc .td-kicker {font-family: var(--font-mono);
      font-size: var(--fs-sm);
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: oklch(55% 0.13 72);
      margin: 0 0 8px;}
.tech-doc .td-title {font-family: var(--font-display);
      font-size: clamp(22px, 2.6vw, 30px);
      line-height: 1.15;
      margin: 0 0 6px;}
.tech-doc .td-sub {font-family: var(--font-mono);
      font-size: var(--fs-sm);
      color: var(--muted);
      margin: 0 0 28px;}
.tech-doc .td-figure {margin: 0 0 28px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      background: var(--bg);}
.tech-doc .td-figure img {width: 100%;
      height: auto;
      display: block;
      background: var(--surface);}
.tech-doc .td-fig-note {display: flex;
      gap: 10px;
      align-items: flex-start;
      padding: 14px 18px;
      font-size: 14px;
      line-height: 1.6;
      color: var(--fg);
      border-top: 1px solid var(--border);
      background: var(--surface);}
.tech-doc .td-fig-note .td-tag {flex: none;
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: oklch(55% 0.13 72);
      border: 1px solid color-mix(in oklch, oklch(55% 0.13 72) 45%, var(--border));
      border-radius: 999px;
      padding: 2px 10px;
      margin-top: 2px;}
.tech-doc .td-divider {height: 1px;
      background: var(--border);
      margin: 32px 0;}
.tech-doc .td-sec-label {font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted);
      margin: 0 0 12px;}

@media (max-width: 640px) {
  .ev-tr {
        grid-template-columns: 1fr auto;
        grid-template-areas:
          "metric metric"
          "value source";
        gap: 2px var(--gap-md);
        padding: 12px 16px;
      }
  .ev-td-metric { margin-bottom: 4px; }
  .ev-td-val { text-align: left; }
  .ev-td-source { text-align: left; }
}


@media (max-width: 920px) {
  .ladder { grid-template-columns: 1fr; }
  .ladder-tier:nth-child(2), .ladder-tier:nth-child(3) { margin-top: 0; }
  .sb-hero .hero-grid { grid-template-columns: 1fr; gap: var(--gap-md); }
  .sb-hero .hero-visual { order: -1; max-height: 40vh; }
  .sb-hero .hero-visual img { max-height: 40vh; }
  .sb-intro .si-grid { grid-template-columns: 1fr; gap: var(--gap-lg); }
  .prod-deep .pd-layout { grid-template-columns: 1fr; gap: var(--gap-lg); }
  .prod-deep[data-tier="mesonova"] .pd-layout > :first-child,
  .prod-deep[data-tier="mesonova"] .pd-layout > :last-child { order: 0; }
  .prod-deep .pd-figure { max-width: 420px; margin-inline: auto; }
  .sb-partner .sp-grid { grid-template-columns: 1fr; gap: var(--gap-lg); }
  .sb-product { grid-template-columns: 1fr; gap: var(--gap-xl); }
  .sb-product .sbp-image { position: relative; top: auto; }
  .sb-product .sbp-text { padding-top: 0; }
  .sb-partner .container { grid-template-columns: 1fr; gap: var(--gap-lg); }
  .sb-partner .sp-form .form-row { grid-template-columns: 1fr; }
  .sb-tl-nav { overflow-x: auto; gap: 8px; padding-bottom: 8px; }
  .sb-tl-nav .tl-btn { white-space: nowrap; font-size: var(--fs-sm); padding: 8px 14px; }
  .sb-tl-content { padding: 24px; }
}

@media (max-width: 560px) {
  .sb-partner .sp-grid { grid-template-columns: 1fr; gap: var(--gap-md); }
  .sb-tl-content { padding: 20px; }
}

/* Ultra-wide displays (>1920px): cap page hero instead of using 100vh. */
@media (min-width: 1921px) {
  .sb-hero { height: 720px; }
  .sb-hero .hero-visual img { height: 560px; max-height: 560px; }
}

/* Ultra-wide: keep product numbers at the image-side top corners. */
@media (min-width: 1921px) {
  .prod-deep-wm {
    top: 106px;
    right: calc((100% - min(var(--container), calc(100vw - 96px))) / 2 + 76px);
    font-size: clamp(120px, 11vw, 220px);
  }
  .prod-deep[data-tier="meso"] .prod-deep-wm,
  .prod-deep[data-tier="revive"] .prod-deep-wm {
    right: auto;
    left: calc((100% - min(var(--container), calc(100vw - 96px))) / 2 + 76px);
  }
}

/* Mobile: narrow containers align to the site-wide 100vw - 40px gutter. */
@media (max-width: 920px) {
  .sb-evidence .container {
    max-width: calc(100vw - 40px);
  }
}

/* Comparison table tinting: header row + first column share one light tone. */
.sb-compare .cmp-head .cmp-cell,
.sb-compare .cmp-row:not(.cmp-head) .cmp-cat {
  background: rgb(246 246 247);
}

/* Compare table: first column labels left-aligned (data cells stay centered). */
.sb-compare .cmp-row:not(.cmp-head) .cmp-cat {
  text-align: left;
  justify-content: flex-start;
}