/* Shared product presentation for ULTRA, ENDOSLEEVE, ALLIO, IM NAIL, and CPX. */
.product-main { flex: 1; }
.product-shell { max-width: 1200px; margin-inline: auto; padding-inline: 40px; }
.product-hero { max-width: none; padding: 64px 0 72px; border-bottom: 1px solid var(--line); background: #fff; }
.product-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.product-eyebrow { margin: 0 0 20px; color: var(--blue); font-size: 11px; line-height: 1.6; font-weight: 700; text-transform: uppercase; letter-spacing: 1.8px; }
.product-copy h1 { font-size: clamp(38px, 4.8vw, 66px); line-height: 1.12; font-weight: 500; letter-spacing: -2px; color: var(--ink); margin: 0 0 24px; overflow-wrap: anywhere; }
.product-subtitle { font-size: 23px; line-height: 1.5; margin: 0 0 20px; color: var(--ink); }
.product-description { color: var(--muted); font-size: 15px; line-height: 1.85; margin: 0 0 28px; }
.product-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.product-button { display: inline-flex; justify-content: center; text-align: center; padding: 14px 20px; background: var(--blue); border: 1px solid var(--blue); border-radius: 5px; color: #fff; text-decoration: none; font-size: 13px; line-height: 1.5; }
.product-button:hover { background: #08678f; border-color: #08678f; }
.product-button-outline { background: #fff; border-color: #9baebc; color: var(--ink); }
.product-button-outline:hover { background: #eef6fa; border-color: var(--blue); }
.product-image { background: #fff; border: 0; border-radius: 0; padding: 24px; box-shadow: none; }
.product-image img { display: block; width: 100%; height: auto; border-radius: 0; }
.product-features { padding-block: 64px; }
.product-main h2 { font-size: clamp(26px, 3vw, 34px); font-weight: 500; line-height: 1.3; letter-spacing: -.8px; color: var(--ink); margin: 0; }
.product-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding: 0; margin: 36px 0 0; list-style: none; }
.product-feature-grid li { border-top: 2px solid #cee3ef; padding-top: 22px; }
.product-feature-grid h3 { font-size: 18px; line-height: 1.5; font-weight: 500; color: var(--ink); margin: 0 0 12px; }
.product-feature-grid p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.85; }
.product-next { padding-bottom: 64px; }
.product-cta { max-width: none; margin: 0; padding: 40px; border-radius: 14px; background: #192f3d; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; }
.product-cta .product-eyebrow { color: #8cd0f0; margin-bottom: 14px; }
.product-cta h2 { color: #fff; }
.product-cta p:not(.product-eyebrow) { color: #d8e5ed; font-size: 15px; line-height: 1.8; margin: 18px 0 0; max-width: 560px; }
.product-button-light { background: transparent; border-color: #8ca3b1; }
.product-button-light:hover { background: #ffffff12; border-color: #fff; }
@media (max-width: 1000px) { .product-hero-grid { gap: 32px; } .product-subtitle { font-size: 21px; } .product-feature-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .product-cta { grid-template-columns: 1fr; gap: 26px; } }
@media (max-width: 800px) { .product-hero-grid { grid-template-columns: 1fr; gap: 36px; } .product-image { width: 100%; max-width: 580px; justify-self: center; } }
@media (max-width: 600px) { .product-shell { padding-inline: 22px; } .product-hero { padding-block: 44px; } .product-copy h1 { letter-spacing: -1px; } .product-subtitle { font-size: 20px; } .product-image { padding: 14px; } .product-features { padding-block: 44px; } .product-feature-grid { grid-template-columns: 1fr; gap: 26px; } .product-next { padding-bottom: 44px; } .product-cta { padding: 28px 24px; } }