/* =============================================
   PRODUCTS + OPTIONS PAGE  (load with base.css + nav.css)
   ============================================= */
/* Content wrapper: top/bottom padding + var(--pad) sides (matches hero) */
.cf-main { padding: clamp(36px, 4vw, 60px) var(--pad); }

/* ---------- Tab 1: accordion ---------- */
.prod-accordion {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.pacc__item {
  overflow: hidden;
  scroll-margin-top: 24px;   /* breathing room when deep-linked via #hash */
}
.pacc__row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 19px;
  border: none;
  background: transparent;
  padding: 12px 22px;
  min-height: 78px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font);
}
.pacc__icon {
  align-self: stretch;                       /* fill the full row height */
  width: 75px;                               /* Figma 75×75 cell */
  margin: -12px 0 -12px -22px;               /* bleed past the row padding: touch top/bottom/left */
  flex-shrink: 0;
  background: var(--icon-bg, transparent);   /* per-item colour set inline */
  display: flex;
  align-items: center;
  justify-content: center;
}
.pacc__icon img { width: 50px; height: 50px; object-fit: contain; display: block; }  /* Figma 50px */
.pacc__label { flex: 1; font-size: 24px; line-height: 1.4; color: #000; }   /* Figma 24px */
.pacc__chev {
     width: 30px;
    height: 30px;
  border-radius: 50%;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.pacc__chev svg { width: 13px; height: 13px; display: block; }
.pacc__row[aria-expanded="true"] .pacc__chev { transform: rotate(180deg); }
.pacc__panel {
  position: relative;
  padding: 26px 28px 28px 94px;   /* 75 icon cell + 19 gap; top room below the divider */
}
/* Divider below the header row when open — its left end sits exactly at the
   icon cell's right edge, so it always touches the icon's bottom-right corner. */
.pacc__panel::before {
  content: "";
  position: absolute;
      top: -1px;
    left: 75px;          /* = .pacc__icon width → meets the icon's bottom-right corner */
  right: 28px;
  height: 1px;
  background: rgba(0, 0, 0, 0.15);
}
.pacc__panel[hidden] { display: none; }
.pacc__bullets { list-style: none; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.pacc__bullets li {
  position: relative;
  padding-left: 18px;
  font-size: 18px;        /* Figma 18px */
  line-height: 24px;      /* Figma 24px */
  color: #000;
}
.pacc__bullets li::before { content: "•"; position: absolute; left: 2px; color: #000; }
.pacc__bullets--sub { margin: 6px 0 0; }
.pacc__desc { font-size: 18px; line-height: 1.5; color: #000; max-width: 749px; margin: 18px 0; }   /* Figma 18px */
.pacc__sub { margin: 18px 0; }
.pacc__sub h4 { font-size: 18px; font-weight: 700; color: #000; margin-bottom: 4px; }   /* Figma 18px */
.pacc__sub p { font-size: 18px; line-height: 1.5; color: #000; }   /* Figma 18px */
.pacc__shot {
  display: block;
  width: 100%;
  max-width: 760px;
  margin: 20px 0 4px;
  border-radius: 4px;
}

/* ---------- Tab 2: optional modules ---------- */
.mod-heading {
  font-size: var(--fs-header);   /* 53.33 / 42 / 32 */
  font-weight: 400;
  color: #000;
  margin-bottom: 18px;
}
.mod-intro {
  font-size: var(--fs-normal);   /* 25.40 / 20 / 18 */
  line-height: 1.6;
  color: #000;
  max-width: 980px;
  margin-bottom: clamp(36px, 5vw, 56px);
}
/* Explicit 6-column layout matching the Figma; columns fill the full page width */
.mod-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 22px;
  align-items: start;
}
.mod-col {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}
/* Module card (was a flat PNG; now a real div with clickable brand logos).
   Exact Figma height via --h; content sits at the top, whitespace fills the rest. */
.mod-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: var(--h);         /* exact Figma height when content fits; grows if it needs to */
  background: #ebf2ff;          /* light variant */
  padding: 16px;
}
.mod-card--cast { background: #bfcfe0; }   /* broadcast (patient-facing) variant */
.mod-card__sec { display: flex; gap: 6px; }
.mod-card__body { flex: 1 1 auto; min-width: 0; }
.mod-card__icon {
  width: 54px;
  height: 54px;
  display: block;
  margin: -8px 0 2px -8px;      /* the icon art is padded inside its canvas; tuck it to the corner */
}
/* Patient app: wide "iMineIVF" lockup — keep aspect, align like the Portal icon */
.mod-card__icon--app {
  width: auto;
  height: 44px;
  margin: 0 0 10px 0;
}
.mod-card__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: #000;
  margin-bottom: 8px;
}
.mod-card__list { list-style: none; }
.mod-card__list li {
  position: relative;
  padding-left: 15px;
  font-size: 15px;
  line-height: 1.5;
  color: #000;
}
.mod-card__list li::before { content: "\2022"; position: absolute; left: 2px; }
.mod-card__brands {
  display: flex;
  flex-direction: column;
  align-items:center;
  flex-shrink: 0;
  padding-top: 2px;

      gap: 35px;
   
    margin-top: 15px;
}
.mod-card__brands a { display: block; line-height: 0; transition: transform 0.2s ease, opacity 0.2s ease; }
.mod-card__brands a:hover { transform: translateY(-2px); opacity: 0.8; }
.mod-card__brands img { max-width: 50px; max-height: 26px; width: auto; height: auto; display: block; }
.mod-card__cast { width: 28px; height: 28px; display: block; flex-shrink: 0; }
.mod-legend {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 26px clamp(22px, 3vw, 50px);
  margin: clamp(32px, 4vw, 52px) 0 0;
      background: #F5F5F5;
    padding: 20px;
}
.mod-legend__col { display: flex; flex-direction: column; gap: 30px; }
.mod-legend__pair { display: flex; }
.mod-legend__pair .mod-legend__item:first-child { min-width: 247px; }
.mod-legend__item {
  font-size: 14px;
  line-height: 19px;
  color: #4a4a4a;
  white-space: nowrap;
      display: flex;
    gap: 10px;
}
.mod-legend__item strong { color: #000; font-weight: 700; }
.mod-legend__broadcast { display: flex; align-items: flex-start; gap: 10px; }
.mod-legend__broadcast img { width: 30px; height: 30px; flex-shrink: 0; }
.mod-legend__broadcast span { font-size: 14px; line-height: 19px; color: #000; max-width: 72px; }

/* Tablet + mobile: one card per row, full width, height driven by content */
@media (max-width: 1224px) {
  .mod-grid { grid-template-columns: 1fr; }
    .mod-card { min-height: 0; }   /* content-driven height in single-column */

}


@media (max-width: 760px) {
  .mod-heading { font-size: 32px; }
  .pacc__label { font-size: 18px; }
  .pacc__icon { width: 70px; }
  .pacc__panel { padding-left: 22px; }
  .pacc__panel::before { left: 70px; }   /* = mobile .pacc__icon width → touches the icon's bottom-right */
  .mod-card__brands { gap: 34px; }   /* a little more breathing room between the icons */
  .mod-legend { flex-direction: column; gap: 22px; }
  .mod-legend__item { white-space: normal; }
  .mod-legend__pair { flex-direction: column; gap: 22px; }
  .mod-legend__pair .mod-legend__item:first-child { min-width: 0; }
}