/* =========================================================
   Product & Technology page — ENGLISH-ONLY overrides
   Figma "Product-0522" · node 43:180 (Desktop - 3 / English)

   Loaded AFTER product.css and ONLY on /en/product.
   zh-TW / zh-CN pages never load this file, so they are
   completely unaffected. English copy runs longer than the
   CJK copy, so the EN design uses a smaller type scale.
   ========================================================= */

/* ---- Hero ---- */
.pp-hero-inner { max-width: 760px; }
.pp-hero-title { letter-spacing: -0.7px; }
.pp-hero-sub {
  letter-spacing: -0.56px;
  text-shadow: 0 4px 4px rgba(0, 0, 0, .5);
}
.pp-hero-desc { max-width: 620px; }

/* ---- Section lead paragraphs (Figma EN: 14px) ---- */
.pp-lead { font-size: 14px; line-height: 1.6; }

/* ---- Feature cards (Figma EN) ----
   The EN card layout differs from tw/cn: the title spans the top of
   the card (centered), with the icon to the LEFT of the description
   below it. zh-TW / zh-CN keep the icon-left / title+text-right layout. */
.pp-feature-card {
  flex-direction: column;
  gap: 14px;
  padding: 22px 14px 21px 20px;
}
.pp-feature-card h3 {
  margin: 0;
  font-size: 20px;
  text-align: center;
  white-space: nowrap;
}
.pp-feature-body {
  display: flex;
  gap: 9px;
  align-items: flex-start;
}
.pp-feature-card p { font-size: 14px; }

/* ---- Split rows (text column + visual column) ---- */
.pp-split {
  display: grid;
  grid-template-columns: 353px 1fr;
  gap: 56px;
  align-items: center;
}
/* Clinical Applications section only — no gap between columns. */
.pp-split-clinical { gap: 0; }
/* re-assert the compat split so the rule above (loaded last) does
   not bleed into the compatibility panel — keeps it as tw/cn. */
.pp-split-top {
  align-items: start;
  grid-template-columns: 360px 1fr;
  gap: 20px;
}

/* ---- Compatibility panel (Figma EN: title 16 / sub 14) ----
   Panel size, connector gaps and arrows are kept IDENTICAL to the
   zh-TW / zh-CN pages. The longer English labels simply wrap onto
   two lines; a min-height on the title keeps every sub-label aligned. */
.pp-compat-item h4 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 42px;
  font-size: 16px;
  line-height: 1.3;
  white-space: normal;
}
.pp-compat-item span { font-size: 14px; }

/* ---- Steps (Figma EN: title 19 / sub 12) ---- */
.pp-step h3 { font-size: 19px; }
.pp-step p { font-size: 12px; }

/* ---- Cases metrics (Figma EN: label 21) ---- */
.pp-metrics { gap: 44px; }
.pp-metric span { font-size: 21px; }

/* ---- Product showcase (Figma EN: label 20) ---- */
.pp-showcase-label { font-size: 20px; }

/* ---- Clinical applications (Figma EN: label 16) ---- */
.pp-clinical-item span { font-size: 16px; }

/* ---- CTA (Figma EN) ----
   EN layout: heading + sub span the full width on top, then the
   buttons (left) and the legal block (right) sit side by side. */
.pp-cta-grid { display: block; }
.pp-cta-sub { margin-bottom: 30px; }
.pp-cta-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}
.pp-cta-bottom .pp-cta-actions { margin-top: 22px; }
.pp-cta-bottom .pp-legal { flex: 0 0 680px; margin-top: 0; }

/* ---- CTA legal (Figma EN: body 14 / fine print 10) ---- */
.pp-legal p { font-size: 14px; }
.pp-legal .pp-legal-mute { font-size: 10px; }
.pp-legal a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- Footer (Figma EN: company description 16 / lh 22) ---- */
.pp-footer-desc { font-size: 16px; line-height: 22px; }

/* ---- Responsive: keep the EN hero readable on tablet ---- */
@media (max-width: 1080px) {
  .pp-hero-inner { max-width: 620px; }
  .pp-hero-desc { max-width: 100%; }
  .pp-cta-bottom { flex-direction: column; gap: 28px; }
  .pp-cta-bottom .pp-cta-actions { margin-top: 0; }
  .pp-cta-bottom .pp-legal { flex: 1 1 auto; }
  /* the EN .pp-split / .pp-split-top overrides above are top-level
     and would otherwise keep the 2-column grid on tablet/mobile,
     collapsing the visual column to 0 width — reset to 1 column. */
  .pp-split,
  .pp-split-top { grid-template-columns: 1fr; gap: 36px; }
}