/* Three offer structures: generous comparison rows with one readable outcome each. */
.offer-types .type-grid{display:grid;grid-template-columns:1fr;gap:14px}
.offer-types .type-card,.offer-types .type-card:nth-child(2),.offer-types .type-card:nth-child(3){display:grid;grid-template-columns:minmax(0,.43fr) minmax(0,.57fr);height:auto;min-height:232px;padding:0;overflow:hidden;border:1px solid #dbe5f0;border-radius:16px;background:#fff;box-shadow:0 10px 28px rgba(23,38,61,.035)}
.offer-types .type-copy{padding:30px 34px 28px}
.offer-types .type-label,.offer-types .type-card:nth-child(2) .type-label{margin-bottom:15px;color:var(--blue);font-size:11px;letter-spacing:.08em}
.offer-types .type-card h3{max-width:360px;margin-bottom:12px;font-size:25px;line-height:1.17}
body .offer-types .type-card p{max-width:390px;color:#4d6078;font-size:14px;line-height:1.55}
.offer-types .type-visual{display:flex;align-items:center;min-height:0;margin:0;padding:20px 24px;border-left:1px solid #e5ebf3;background:#f3f7fc}
.offer-types .offer-example{width:100%;padding:20px 22px;border:1px solid #dbe5f0;border-radius:11px;background:#fff;box-shadow:0 5px 16px rgba(23,38,61,.035)}
.offer-example-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:14px;border-bottom:1px solid #e8edf4}
.offer-example-head strong{display:block;font-size:17px;line-height:1.3}
.offer-example-head small{display:block;margin-top:4px;color:#718198;font-size:11px}
.offer-example-tag{flex:none;padding:6px 9px;border-radius:5px;background:#e7f0fd;color:var(--blue-dark);font-size:11px;font-weight:750}
.offer-example-tag.active{background:#e8f5ef;color:#287d63}
.package-example-body{display:grid;grid-template-columns:1fr auto;align-items:end;gap:20px;padding-top:15px}
.example-kicker{display:block;margin-bottom:9px;color:#718198;font-size:11px;font-weight:700}
.package-service{display:flex;align-items:center;gap:9px;margin:6px 0;color:#263a55;font-size:13px;font-weight:650}
.package-service img{width:36px;height:36px;flex:none;border:1px solid #e1e8f0;border-radius:6px;object-fit:cover}
.package-balance{text-align:right}
.package-balance strong{display:block;color:var(--blue-dark);font-size:30px;line-height:1}
.package-balance small{display:block;margin-top:5px;color:#61748c;font-size:11px}
.package-progress{display:grid;grid-template-columns:repeat(6,1fr);gap:3px;width:126px;margin:13px 0 0 auto}
.package-progress span{height:7px;border-radius:3px;background:#cbd7e6}
.package-progress span.available{background:var(--blue)}
.package-balance .package-progress-caption{margin-top:5px;font-size:10px}
.member-example-body{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-top:16px}
.member-credit{padding:14px 16px;border:1px solid #e1e9f2;border-radius:8px;background:#fafcff}
.member-credit span{display:block;margin-bottom:8px;color:#667991;font-size:11px}
.member-credit strong{display:block;color:var(--blue-dark);font-size:21px;line-height:1.1}
.discount-example-body{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:25px;padding-top:15px}
.discount-rate{display:grid;place-items:center;width:84px;height:84px;border-radius:12px;background:#e9f1fd;color:var(--blue-dark);font-size:27px;font-weight:800;letter-spacing:-.06em}
.discount-rules{display:grid;gap:7px}
.discount-rule{display:flex;justify-content:space-between;gap:15px;padding-bottom:6px;border-bottom:1px solid #ecf0f5;font-size:11px}
.discount-rule:last-child{padding-bottom:0;border-bottom:0}
.discount-rule span{color:#718198}
.discount-rule strong{color:#263a55;font-size:11px;text-align:right}
.discount-product-target{display:flex;align-items:center;gap:7px;white-space:nowrap}
.discount-product-target img{width:36px;height:36px;flex:none;border:1px solid #e1e8f0;border-radius:5px;background:#fff;object-fit:contain}

.hero .offer-layout{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)}
.hero .offer-side-label{font-size:9px}
.hero .offer-side-item{font-size:10px}
.hero .offer-side-item span:last-child{font-size:9px}
.hero .offer-main-head strong{font-size:16px}
.hero .offer-main-head small,.hero .offer-customer small{font-size:9px}
.hero .offer-customer strong{font-size:11px}
.hero .offer-metric span{min-height:23px;font-size:9px;line-height:1.25}
.hero .offer-metric strong{font-size:13px;color:var(--blue-dark)}
.hero .offer-activity-row,.hero .offer-activity-row strong{font-size:9px}

/* The four moments show distinct tasks instead of one repeated card treatment. */
body .highlights .highlight-card:nth-child(2),body .highlights .highlight-card:nth-child(4){background:#f2f5f8}
.highlights .highlight-copy p{max-width:560px}
.highlights .highlight-copy{min-height:112px}
.highlights .highlight-visual.membership-moment-visual{min-height:300px}
body .highlights .mp-scene-1 .mp-package-fact:has(+ .mp-package-fact){display:flex}
/* Keep the two summary panes distinct from their blue card surroundings. */
.highlights .mp-scene-1 .mp-package-side,.highlights .mp-scene-4 .mp-rule-summary{border-left:1px solid #e3eaf3;background:#fbfcfe}

.checkout .checkout-step strong{font-size:14px}
.checkout .checkout-step p{font-size:11px;line-height:1.55}
.checkout .flow-tab{font-size:10px}
.checkout .flow-panel small{font-size:9px}
.checkout .flow-panel h3{font-size:18px}
.checkout .flow-panel>p,.checkout .summary-row,.checkout .summary-row strong{font-size:10px}
.checkout .flow-note{font-size:9px}
.checkout .checkout-caption{color:#647891;font-size:10px;font-weight:600}

@media(max-width:900px){.hero .offer-layout{grid-template-columns:.8fr 1.2fr}.offer-types .type-card,.offer-types .type-card:nth-child(2),.offer-types .type-card:nth-child(3){grid-template-columns:minmax(0,.4fr) minmax(0,.6fr)}.offer-types .type-copy{padding:25px}.offer-types .type-visual{padding:16px}}
@media(max-width:620px){.offer-types .type-card,.offer-types .type-card:nth-child(2),.offer-types .type-card:nth-child(3){grid-template-columns:1fr}.offer-types .type-copy{padding:22px}.offer-types .type-visual{border-left:0;border-top:1px solid #e5ebf3}.hero .offer-layout{grid-template-columns:1fr}.checkout .checkout-step p{font-size:11px}}

/* Let the complete offer examples grow with their content on narrow screens. */
@media(max-width:900px){
  .highlights .highlight-grid{grid-template-columns:1fr}
  .highlights .highlight-card:nth-child(n){height:auto;min-height:0;padding:18px}
  .highlights .highlight-copy{min-height:0;margin-bottom:16px}
  .highlights .highlight-visual.membership-moment-visual{flex:none;width:100%;height:auto;min-height:0;margin:0;padding:0;overflow:hidden;border:1px solid #dce6f2;border-radius:10px;background:#fff}
  .highlights .mp-scene,.highlights .mp-stage{height:auto;min-height:0}
  .highlights .mp-stage{overflow:visible}
  .highlights .mp-package,.highlights .mp-member,.highlights .mp-checkout,.highlights .mp-discount{height:auto}
}
@media(max-width:700px){
  .highlights .mp-package,.highlights .mp-discount{grid-template-columns:1fr}
  .highlights .mp-package-main,.highlights .mp-package-side,.highlights .mp-rules,.highlights .mp-rule-summary{padding:16px}
  .highlights .mp-package-side,.highlights .mp-rule-summary{border-left:0;border-top:1px solid #e3eaf3}
  .highlights .mp-service{min-height:42px}
  .highlights .mp-service-name,.highlights .mp-summary-line b{overflow:visible;text-overflow:clip;white-space:normal}
  .highlights .mp-service-photo{width:31px;height:31px}
  .highlights .mp-rule-summary>strong{margin-bottom:9px}
}