/* MegaGen implant comparison — scoped to the landing summary and full page. */
.mg-compare-summary,
.mg-compare-page { --mg-compare-ink: var(--mg-heading, #0a1626); --mg-compare-line: var(--mg-border, #dfe7ef); }

.mg-compare-summary { padding-block: clamp(64px, 8vw, 104px); border-block: 1px solid var(--mg-compare-line); background: var(--mg-bg, #fff); }
.mg-compare-summary__head { max-inline-size: 820px; margin-block-end: 34px; }
.mg-compare-summary__head h2,
.mg-compare-sectionhead h2 { margin: 8px 0 0; color: var(--mg-compare-ink); text-wrap: balance; }
.mg-compare-summary__head > p,
.mg-compare-sectionhead > p { max-inline-size: 66ch; margin: 0; color: var(--mg-muted, #56677b); line-height: 2; }
.mg-compare-summary__head h2 { margin-block-end: 14px; }
.mg-compare-summary__products { border-block-start: 1px solid var(--mg-compare-line); }
.mg-compare-mini { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 24px; align-items: center; min-block-size: 122px; padding: 24px 4px; border-block-end: 1px solid var(--mg-compare-line); background: transparent; }
.mg-compare-mini__index { color: var(--mg-muted, #56677b); font: 700 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; }
.mg-compare-mini__body { min-inline-size: 0; }
.mg-compare-mini > div > span,
.mg-compare-decision__card > span,
.mg-compare-profile__copy > span,
.mg-compare-evidence article > span { color: var(--mg-accent, #0067b1); font-size: 12px; font-weight: 800; }
.mg-compare-mini h3 { margin: 0 0 8px; color: var(--mg-compare-ink); font-size: clamp(27px, 3vw, 42px); line-height: 1; }
.mg-compare-mini h3 .mg-v2-wordmark__accent { color: var(--mg-accent, #0067b1); }
.mg-compare-mini p { margin: 0; color: var(--mg-muted, #56677b); line-height: 1.75; }
.mg-compare-mini > a,
.mg-compare-decision__card > a,
.mg-compare-profile__links a,
.mg-compare-evidence article a { margin-block-start: auto; color: var(--mg-accent, #0067b1); font-weight: 800; text-decoration: none; }

.mg-compare-tablewrap { overflow: auto; margin-block-start: 34px; border: 1px solid var(--mg-compare-line); background: var(--mg-bg, #fff); scrollbar-gutter: stable; }
.mg-compare-tablewrap:focus-visible { outline: 3px solid color-mix(in srgb, var(--mg-accent, #0067b1) 36%, transparent); outline-offset: 3px; }
.mg-compare-table { width: 100%; min-width: 900px; border-collapse: separate; border-spacing: 0; table-layout: fixed; text-align: right; }
.mg-compare-table th,
.mg-compare-table td { padding: 18px 20px; border-block-end: 1px solid var(--mg-compare-line); border-inline-start: 1px solid var(--mg-compare-line); vertical-align: top; line-height: 1.85; }
.mg-compare-table tr > :first-child { position: sticky; right: 0; z-index: 1; width: 190px; border-inline-start: 0; background: var(--mg-surface-2, #eef3f9); color: var(--mg-compare-ink); font-weight: 800; }
.mg-compare-table thead th { position: sticky; top: 0; z-index: 2; background: var(--mg-compare-ink); color: #fff; font-size: 15px; }
.mg-compare-table thead th:first-child { z-index: 3; background: var(--mg-compare-ink); color: #fff; }
.mg-compare-table tbody td { color: var(--mg-text, #243244); font-size: 14px; }
.mg-compare-table tbody tr:hover td { background: color-mix(in srgb, var(--mg-accent, #0067b1) 4%, var(--mg-bg, #fff)); }
.mg-compare-table__group th { position: static !important; padding-block: 11px; background: var(--mg-accent, #0067b1) !important; color: #fff !important; font-size: 13px; }
.mg-compare-mini > a { display: inline-flex; gap: 10px; align-items: center; margin: 0; padding: 10px 0; white-space: nowrap; }
.mg-compare-summary__action { display: flex; justify-content: flex-start; margin-block-start: 28px; }

.mg-compare-hero { padding-block: clamp(92px, 12vw, 170px) clamp(70px, 9vw, 120px); background: radial-gradient(circle at 18% 18%, rgba(64, 152, 210, .18), transparent 34%), #071d2d; color: #fff; }
.mg-compare-hero .mg-crumbs,
.mg-compare-hero .mg-crumbs a { color: rgba(255,255,255,.72); }
.mg-compare-hero .mg-crumbs li,
.mg-compare-hero .mg-crumbs span,
.mg-compare-hero .mg-crumbs strong,
.mg-compare-hero .mg-crumbs [aria-current="page"] { color: rgba(255,255,255,.82) !important; }
.mg-compare-hero .mg-arw-eyebrow { display: block; margin-block-start: 56px; color: #78c3f1; }
.mg-compare-hero h1 { max-inline-size: 1100px; margin: 16px 0 22px; color: #fff; font-size: clamp(42px, 7.2vw, 106px); line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
.mg-compare-hero > div > p { max-inline-size: 68ch; margin: 0; color: rgba(255,255,255,.78); font-size: clamp(17px, 2vw, 22px); line-height: 2; }
.mg-compare-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 42px; }
.mg-compare-jump a { padding: 10px 16px; border: 1px solid rgba(255,255,255,.24); color: #fff; text-decoration: none; transition: background-color .2s ease, border-color .2s ease, transform .2s ease; }
.mg-compare-jump a:hover { border-color: #fff; background: rgba(255,255,255,.1); transform: translateY(-2px); }

.mg-compare-decision,
.mg-compare-matrix,
.mg-compare-profiles,
.mg-compare-evidence { padding-block: clamp(78px, 10vw, 142px); }
.mg-compare-decision,
.mg-compare-profiles { background: var(--mg-bg, #fff); }
.mg-compare-matrix,
.mg-compare-evidence { border-block: 1px solid var(--mg-compare-line); background: var(--mg-surface, #f5f8fc); }
.mg-compare-sectionhead { display: grid; grid-template-columns: minmax(0, .9fr) minmax(280px, .7fr); gap: 16px clamp(30px, 7vw, 110px); align-items: end; margin-block-end: 44px; }
.mg-compare-sectionhead .mg-arw-eyebrow { grid-column: 1 / -1; }
.mg-compare-sectionhead h2 { font-size: clamp(34px, 5vw, 68px); line-height: 1.2; }
.mg-compare-decision__grid { display: grid; grid-template-columns: 1.2fr .9fr .9fr; gap: 1px; border: 1px solid var(--mg-compare-line); background: var(--mg-compare-line); }
.mg-compare-decision__card { display: flex; flex-direction: column; min-block-size: 430px; padding: clamp(26px, 3.5vw, 46px); background: var(--mg-bg, #fff); }
.mg-compare-decision__card h3 { margin: 12px 0 18px; color: var(--mg-compare-ink); font-size: clamp(34px, 4vw, 58px); }
.mg-compare-decision__card p { color: var(--mg-text, #243244); line-height: 1.95; }
.mg-compare-decision__card aside { margin-block: auto 28px; padding: 16px 18px; border-inline-start: 3px solid var(--mg-accent, #0067b1); background: var(--mg-surface, #f5f8fc); color: var(--mg-muted, #56677b); font-size: 13px; line-height: 1.9; }
.mg-compare-decision__card aside strong { color: var(--mg-compare-ink); }

.mg-compare-tablewrap--full { max-block-size: min(78vh, 900px); margin-block-start: 0; }
.mg-compare-profiles .mg-compare-sectionhead { margin-block-end: 60px; }
.mg-compare-profile { display: grid; grid-template-columns: minmax(320px, .9fr) minmax(360px, 1.1fr); align-items: center; gap: clamp(34px, 8vw, 120px); padding-block: clamp(50px, 7vw, 92px); border-block-start: 1px solid var(--mg-compare-line); }
.mg-compare-profile:nth-of-type(even) .mg-compare-profile__media { order: 2; }
.mg-compare-profile__media { display: grid; min-block-size: clamp(280px, 34vw, 480px); overflow: hidden; place-items: center; border: 1px solid var(--mg-compare-line); background: radial-gradient(circle at 50% 20%, rgba(107, 184, 232, .22), transparent 55%), var(--mg-surface, #f5f8fc); }
.mg-compare-profile__media img { display: block; width: min(68%, 270px); max-block-size: clamp(280px, 32vw, 440px); object-fit: contain; transition: transform .7s cubic-bezier(.22,1,.36,1); }
.mg-compare-profile:hover .mg-compare-profile__media img { transform: scale(1.025); }
.mg-compare-profile__copy h3 { margin: 12px 0 18px; color: var(--mg-compare-ink); font-size: clamp(40px, 6vw, 80px); line-height: 1; }
.mg-compare-profile__copy h4 { margin: 30px 0 8px; color: var(--mg-compare-ink); font-size: 17px; }
.mg-compare-profile__copy p { color: var(--mg-text, #243244); line-height: 2; }
.mg-compare-profile__note { margin-block-start: 24px; padding: 16px 18px; border: 1px solid var(--mg-compare-line); color: var(--mg-muted, #56677b); font-size: 13px; line-height: 1.9; }
.mg-compare-profile__note strong { color: var(--mg-compare-ink); }
.mg-compare-profile__links { display: flex; flex-wrap: wrap; gap: 18px; margin-block-start: 24px; }

.mg-compare-evidence__grid { display: grid; grid-template-columns: 1.1fr .95fr .95fr; gap: 1px; border: 1px solid var(--mg-compare-line); background: var(--mg-compare-line); }
.mg-compare-evidence article { display: flex; flex-direction: column; min-block-size: 350px; padding: clamp(24px, 3vw, 38px); background: var(--mg-bg, #fff); }
.mg-compare-evidence h3 { margin: 14px 0; color: var(--mg-compare-ink); font-size: clamp(20px, 2.2vw, 28px); line-height: 1.55; }
.mg-compare-evidence p { color: var(--mg-text, #243244); line-height: 1.95; }
.mg-compare-disclaimer { margin-block-start: 24px; padding: 18px 22px; border-inline-start: 4px solid var(--mg-accent, #0067b1); background: var(--mg-bg, #fff); color: var(--mg-muted, #56677b); line-height: 1.9; }
.mg-compare-disclaimer strong { color: var(--mg-compare-ink); }
.mg-compare-cta { padding-block: clamp(60px, 8vw, 100px); background: #071d2d; color: #fff; }
.mg-compare-cta .mg-arw-wrap { display: grid; grid-template-columns: 1fr auto; gap: 32px 70px; align-items: end; }
.mg-compare-cta span { color: #78c3f1; font-size: 13px; font-weight: 800; }
.mg-compare-cta h2 { max-inline-size: 760px; margin: 10px 0; color: #fff; font-size: clamp(32px, 4.5vw, 62px); line-height: 1.2; }
.mg-compare-cta p { max-inline-size: 66ch; margin: 0; color: rgba(255,255,255,.72); line-height: 1.9; }
.mg-compare-cta .mg-pdp__btn.ghost { color: #fff; border-color: rgba(255,255,255,.5); }

[data-theme="dark"] .mg-compare-summary,
[data-theme="dark"] .mg-compare-decision,
[data-theme="dark"] .mg-compare-profiles,
[data-theme="dark"] .mg-compare-mini,
[data-theme="dark"] .mg-compare-decision__card,
[data-theme="dark"] .mg-compare-evidence article,
[data-theme="dark"] .mg-compare-tablewrap,
[data-theme="dark"] .mg-compare-disclaimer { background: var(--mg-bg); }
[data-theme="dark"] .mg-compare-matrix,
[data-theme="dark"] .mg-compare-evidence,
[data-theme="dark"] .mg-compare-decision__card aside { background: var(--mg-surface); }
[data-theme="dark"] .mg-compare-table tr > :first-child { background: var(--mg-surface); }
[data-theme="dark"] .mg-compare-table tbody tr:hover td { background: rgba(84,170,230,.06); }

@media (max-width: 960px) {
  .mg-compare-summary__head,
  .mg-compare-sectionhead { grid-template-columns: 1fr; }
  .mg-compare-decision__grid,
  .mg-compare-evidence__grid { grid-template-columns: 1fr; }
  .mg-compare-decision__card { min-block-size: 0; }
  .mg-compare-profile { grid-template-columns: 1fr; }
  .mg-compare-profile:nth-of-type(even) .mg-compare-profile__media { order: initial; }
  .mg-compare-cta .mg-arw-wrap { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .mg-compare-mini { grid-template-columns: 42px minmax(0, 1fr); gap: 14px; }
  .mg-compare-mini > a { grid-column: 2; justify-self: start; padding-top: 0; }
  .mg-compare-hero h1 { font-size: clamp(38px, 13vw, 58px); }
  .mg-compare-jump { display: grid; grid-template-columns: 1fr 1fr; }
  .mg-compare-summary__action .mg-pdp__btn { width: 100%; }
  .mg-compare-cta .mg-pdp__btn { width: 100%; margin-block-start: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .mg-compare-mini a,
  .mg-compare-jump a,
  .mg-compare-profile__media img { transition: none !important; }
  .mg-compare-profile:hover .mg-compare-profile__media img,
  .mg-compare-jump a:hover { transform: none !important; }
}
