:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #17231f; background: #171a18; }
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { min-width: 280px; }
.presell { position: relative; display: grid; width: 100%; min-height: 100vh; min-height: 100svh; place-items: center; overflow: hidden; padding: clamp(20px, 4vw, 48px); }
.product-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(9, 15, 12, .32), rgba(9, 15, 12, .56)); }
.consent-card { position: relative; z-index: 1; width: min(100%, 500px); min-width: 0; max-height: calc(100svh - 32px); overflow: hidden auto; padding: clamp(24px, 5vw, 38px); border: 1px solid rgba(255, 255, 255, .68); border-radius: 22px; background: rgba(255, 255, 255, .94); box-shadow: 0 24px 70px rgba(0, 0, 0, .28); backdrop-filter: blur(10px); }
.product-name { margin: 0 0 6px; color: #326d5d; font-size: .82rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
h1 { margin: 0 0 16px; font-size: clamp(1.75rem, 7vw, 2.25rem); line-height: 1.1; }
p { margin: 0 0 12px; color: #45534e; font-size: .96rem; line-height: 1.55; }
.actions { display: grid; gap: 10px; margin: 24px 0 18px; }
button { width: 100%; min-width: 0; min-height: 52px; padding: 13px 16px; border: 2px solid #1e5548; border-radius: 10px; font: inherit; font-size: .82rem; font-weight: 800; line-height: 1.25; letter-spacing: .025em; overflow-wrap: anywhere; white-space: normal; cursor: pointer; }
.primary-button { color: #fff; background: #1e5548; }
.primary-button:hover { background: #153f35; border-color: #153f35; }
.secondary-button { color: #1e5548; background: transparent; }
.secondary-button:hover { background: #edf5f2; }
button:focus-visible { outline: 3px solid #e4a94a; outline-offset: 3px; }
.health-notice { margin-bottom: 0; padding-top: 12px; border-top: 1px solid #d8dfdc; font-size: .74rem; line-height: 1.45; }

/* Tablet: keep the card away from the product in the center-right. */
@media (min-width: 601px) and (max-width: 1024px) {
  .presell { justify-items: start; padding: clamp(28px, 5vw, 52px); }
  .product-background { object-position: 68% center; }
  .overlay { background: linear-gradient(90deg, rgba(9, 15, 12, .56) 0%, rgba(9, 15, 12, .2) 75%); }
  .consent-card { width: min(48vw, 450px); padding: clamp(24px, 3.5vw, 34px); }
  h1 { font-size: clamp(1.75rem, 4vw, 2.15rem); }
}

/* Mobile: compact bottom sheet, leaving the product visible above it. */
@media (max-width: 600px) {
  .presell { align-items: end; padding: 12px; }
  .product-background { object-position: 60% 24%; }
  .overlay { background: linear-gradient(180deg, rgba(9, 15, 12, .12) 0%, rgba(9, 15, 12, .18) 34%, rgba(9, 15, 12, .62) 100%); }
  .consent-card { width: calc(100vw - 24px); max-width: 100%; max-height: min(72svh, 590px); padding: 20px; border-radius: 20px; }
  .product-name { margin-bottom: 4px; font-size: .7rem; }
  h1 { margin-bottom: 10px; font-size: clamp(1.5rem, 7vw, 1.9rem); }
  p { margin-bottom: 8px; font-size: .86rem; line-height: 1.42; }
  .actions { gap: 8px; margin: 16px 0 12px; }
  button { min-height: 48px; padding: 11px 12px; font-size: .74rem; }
  .health-notice { padding-top: 9px; font-size: .66rem; line-height: 1.35; }
}

@media (max-width: 380px), (max-height: 680px) {
  .consent-card { max-height: calc(100svh - 20px); padding: 16px; }
  h1 { font-size: 1.4rem; }
  p { font-size: .8rem; }
  .actions { margin: 12px 0 10px; }
  button { min-height: 44px; }
  .health-notice { font-size: .61rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }