:root{
  /* Brand Colors — brochure + new azure */
  --purple: #6858A8;
  --indigo: #484888;
  --cyan:   #58B8E8;
  --azure:  #3991E3;   /* NEW */
  --lightred: #E86868;
  --gray:   #E8EEF3;
  --white:  #FFFFFF;
  --red:    #F25F5F;   /* headline red from your file */

  /* Tokens */
  --bg: var(--white);
  --text: #223048;
  --muted: #5B6C86;
  --radius: 14px;
  --shadow: 0 8px 24px rgba(34,48,72,0.12);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Lato", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.6;
}
body.has-fixed-header {
  padding-top: var(--site-header-offset, 120px);
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { width: min(1200px, 92%); margin: 0 auto; }

#siteHeader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  transform: translateY(0);
  transition: transform .3s ease-in-out;
}
body.scroll-down #siteHeader {
  transform: translateY(calc(-100% - 2px));
}
body.scroll-up #siteHeader {
  transform: translateY(0);
}

/* Announcement */
.announcement {
  position: relative;
  background: var(--purple);
  color: var(--white);
  font-weight: 600;
  padding: 10px 42px 10px 16px;
  text-align: center;
  font-size: 14px;
}
.announcement-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.announcement a {
  display: inline-block;
  background: var(--azure);
  color: var(--white);
  padding: 6px 10px;
  border-radius: 8px;
  font-weight: 800;
}
.announcement a:hover { filter: brightness(1.05); }
.announcement-close {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 2;
  padding: 0;
  border: 0;
  background: transparent !important;
  color: #fff !important;
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  border-radius: 0;
  width: auto;
  height: auto;
}
.announcement-close:hover {
  opacity: 0.85;
}

/* Header */
.header {
  position: relative;
  top: 0;
  z-index: 40;
  background: var(--white);
  color: var(--indigo);
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  transition: all .3s ease-in-out;
  transform: translateY(0);
}
body.scroll-down .header,
.header.is-hidden {
  transform: translateY(0);
  box-shadow: none;
}
body.scroll-up .header {
  transform: translateY(0);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 16px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 150px; height: auto; }

/* Desktop nav */
.menu { display: none; }
.menu a {
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  opacity: 0.95;
  color: var(--indigo);
}
.menu a:hover { background: rgba(72,72,136,0.08); }

/* Dropdowns */
.dropdown { position: relative; }
.dropdown-menu {
  position: absolute;
  top: 42px;
  left: 0;
  background: var(--white);
  color: var(--indigo);
  border-radius: 12px;
  min-width: 220px;
  box-shadow: var(--shadow);
  overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: all .18s ease;
  border: 1px solid #DFE7F2;
}
.dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-menu a {
  display: block;
  padding: 12px 14px;
  font-weight: 700;
  font-size: 14px;
}
.dropdown-menu a:hover { background: var(--gray); }

/* Header primary CTA */
.header-cta {
  background: var(--azure);
  color: var(--white);
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 800;
  font-family: "Montserrat", sans-serif;
}
.header-cta:hover { filter: brightness(1.05); }

/* Mobile toggle */
.hamburger {
  display: inline-flex;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  background: rgba(72,72,136,0.08);
  border-radius: 10px;
  border: 1px solid rgba(72,72,136,0.15);
  cursor: pointer;
}
.mobile-panel {
  display: none;
  background: var(--indigo);
  padding: 12px 0 18px;
  border-top: 1px solid rgba(255,255,255,0.15);
}
.mobile-panel a {
  display: block;
  padding: 12px 16px;
  color: var(--white);
  font-weight: 700;
  border-radius: 8px;
  margin: 6px 0;
}
.mobile-panel a:hover { background: rgba(255,255,255,0.10); }

/* Hero */
.hero {
  background:
    radial-gradient(1200px 400px at 20% -20%, rgba(104,88,168,0.22), transparent 60%),
    radial-gradient(900px 380px at 120% 20%, rgba(88,184,232,0.20), transparent 60%),
    var(--bg);
  padding: clamp(24px, 5vw, 48px) 0 40px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}
@media (min-width: 980px){
  .menu { display: flex; align-items: center; gap: 6px; }
  .menu .header-cta { margin-left: 4px; }
  .hamburger{ display: none; }
  .hero-grid { grid-template-columns: 1.05fr 1fr; gap: 44px; }
}

.eyebrow {
  color: var(--muted);
  font-weight: 800;
  letter-spacing: .06em;
  font-size: 12px;
  text-transform: uppercase;
}
.h1 {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.15;
  color: var(--red);
  margin: 10px 0 8px;
}
.lede {
  font-size: clamp(16px, 2.1vw, 18px);
  color: #45536B;
  max-width: 60ch;
  margin-bottom: 18px;
}

/* CTAs */
.cta-row { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 12px; 
  align-items: center; 
}

.btn {
  display: inline-flex; 
  align-items: center; 
  justify-content: center;
  gap: 8px;
  border-radius: 12px;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;              /* default: bold buttons */
  padding: 14px 18px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .05s ease, filter .15s ease, background .15s ease;
  text-align: center;
  min-width: 180px;
}

.btn:active { 
  transform: translateY(1px); 
}

/* Primary CTA = solid azure */
.btn-primary{
  background: var(--azure);
  color: var(--white);
  border-color: var(--azure);
}

.btn-primary:hover{
  filter: brightness(1.05);
}

/* Secondary CTA = OUTLINE purple (NOT bold) */
.btn-outline{
  background: transparent;
  color: var(--purple);
  border-color: var(--purple);
  font-weight: 100;              /* ✅ makes "Received your kit?" not bold */
}

.btn-outline:hover{
  background: rgba(104,88,168,0.10); /* light purple tint */
  filter: none;
}
/* Video card (iframe fills the frame) */
.video{
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  border: 1px solid #DCE3EA;
}

/* The frame defines the aspect ratio and clipping */
.video .frame{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--gray), #F8FBFF);
  overflow: hidden;
  border-radius: var(--radius); /* ensures corners match */
}

/* Make the YouTube iframe cover the entire frame */
.video .frame iframe{
  position: absolute;
  inset: 0;              /* top:0 right:0 bottom:0 left:0 */
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* If you still have the old overlay elements in HTML, hide them */
.video .frame .play,
.video .frame .frame-note{
  display: none !important;
}
/* Promo — azure with white text */
.promo {
  margin-top: 30px;
  display: grid; grid-template-columns: auto 1fr; gap: 14px;
  align-items: center;
  background: var(--azure);
  color: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.22);
  max-width: 780px;
}
.promo .avatar {
  width: 58px; height: 58px; border-radius: 50%;
  border: 3px solid var(--white);
  background: url('https://images.unsplash.com/photo-1692801439915-ef9194bf0951?auto=format&fit=crop&w=200&q=80') center/cover no-repeat; center/cover no-repeat;
}
.promo .title { font-family: "Montserrat", sans-serif; font-weight: 800; margin-bottom: 4px; }
.promo .promo-copy { opacity: .98; }
.promo a.cta {
  display: inline-block; margin-top: 10px;
  background: transparent;
  border: 2px solid var(--white);
  color: var(--white);
  padding: 8px 12px; border-radius: 10px; font-weight: 800;
}
.promo a.cta:hover { background: rgba(255,255,255,0.12); }

/* How it Works */
.hiw {
  padding: 36px 0;
  background: var(--gray);
  border-top: 4px solid var(--purple);
  border-bottom: 1px solid #D7E0E9;
}
.hiw-title {
  margin: 0 0 10px;
  font-family: "Montserrat", sans-serif;
  color: var(--indigo);
  font-size: 26px;
}
.hiw-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
.hiw-card {
  background:#fff; padding:18px; border-radius:12px;
  border: 1px solid #E3EAF2;
  box-shadow: 0 2px 0 var(--cyan);
}

/* Stats Band */
.stats {
  background: linear-gradient(180deg, rgba(88,184,232,0.10), rgba(104,88,168,0.08));
  padding: 34px 0;
  border-top: 1px solid #E3EAF2;
}
.stats-grid {
  display: grid; gap: 18px; grid-template-columns: 1fr; align-items: stretch;
}
.stat { background:#fff; border:1px solid #E6EDF6; border-radius:12px; padding:16px; box-shadow: var(--shadow);}
.stat-num { font-family:"Montserrat",sans-serif; font-weight:800; color: var(--indigo); font-size: 36px; line-height:1; }
.stat-num span { font-size: 12px; margin-left:6px; color:#5B6C86; font-weight:700; text-transform: uppercase; letter-spacing:.04em; }
.stat-label { color:#475569; margin-top:6px; }

/* Science Highlight */
.science { padding: 48px 0; }
.science-grid { display:grid; gap:28px; grid-template-columns:1fr; align-items:center; }
.science-text h2 { font-family:"Montserrat",sans-serif; color:var(--indigo); font-size:28px; margin:0 0 8px; }
.checklist { margin:14px 0 18px; padding-left:18px; }
.checklist li { margin:8px 0; }
.science-card { border:1px solid #E3EAF2; border-radius:16px; box-shadow: var(--shadow); background:#fff; min-height:280px; }
.science-graphic { height:100%; background: radial-gradient(circle at 20% 20%, rgba(88,184,232,0.35), transparent 40%), radial-gradient(circle at 80% 60%, rgba(104,88,168,0.25), transparent 40%); border-radius:16px; }
@media (min-width: 980px){ .science-grid{ grid-template-columns:1.1fr 1fr; } }

/* Benefits */
.benefits { padding: 42px 0; background: #FAFBFD; border-top:1px solid #E3EAF2; }
.section-title { font-family:"Montserrat",sans-serif; color:var(--indigo); font-size:26px; margin:0 0 12px; }
.benefits-grid { display:grid; gap:18px; grid-template-columns:1fr; }
.benefit { background:#fff; border:1px solid #E6EDF6; border-radius:12px; padding:18px; box-shadow: var(--shadow); }
.benefit h3 { margin:0 0 6px; color: var(--indigo); font-family:"Montserrat",sans-serif; }

/* Next Steps */
.next { padding: 44px 0; }
.next-grid { display:grid; gap:18px; grid-template-columns:1fr; }
.next-card { background:#fff; border:1px solid #E6EDF6; border-radius:12px; padding:18px; box-shadow: var(--shadow);}
.next-card h4{ margin:4px 0 6px; color:var(--indigo); font-family:"Montserrat",sans-serif; }
.dot{ width:12px; height:12px; border-radius:50%; display:inline-block; margin-right:8px; vertical-align:middle;}
.dot-green{ background:#2BB673; }
.dot-amber{ background:#F4A947; }
.dot-blue{ background:#3991E3; }

/* Provider CTA */
.provider-cta { background: linear-gradient(180deg, rgba(72,72,136,0.06), rgba(57,145,227,0.06)); padding: 40px 0; border-top:1px solid #E3EAF2; }
.provider-box { background:#fff; border:2px solid var(--azure); border-radius:16px; padding:22px; box-shadow: var(--shadow); display:flex; flex-direction:column; gap:14px; }
@media (min-width: 860px){ .provider-box{ flex-direction:row; align-items:center; justify-content:space-between; } }
.provider-box h2{ margin:0 0 6px; color:var(--indigo); font-family:"Montserrat",sans-serif; }

/* Testimonials */
.testimonials { padding: 44px 0; background: #FAFBFD; border-top:1px solid #E3EAF2; }
.t-grid { display:grid; gap:18px; grid-template-columns:1fr; }
.t-card { background:#fff; border-left:6px solid var(--purple); border-radius:12px; padding:18px; box-shadow: var(--shadow); }
.t-card footer{ margin-top:8px; color:#5B6C86; }

/* FAQ */
.faq { padding: 44px 0; }
.faq-item { background:#fff; border:1px solid #E6EDF6; border-radius:12px; padding:14px 16px; box-shadow: var(--shadow); margin:10px 0; }
.faq-item summary { cursor:pointer; font-weight:800; font-family:"Montserrat",sans-serif; color:var(--indigo); }
.faq-item[open] summary { color: var(--purple); }

/* Newsletter */
.newsletter { padding: 48px 0; background: var(--gray); border-top:4px solid var(--purple); }
.n-box { background:#fff; border:1px solid #E3EAF2; border-radius:16px; padding:22px; box-shadow: var(--shadow); }
.n-form { display:flex; gap:10px; flex-wrap:wrap; margin: 10px 0; }
.n-form input{ flex:1 1 260px; padding:12px 14px; border:2px solid #DFE7F2; border-radius:10px; font-size:16px; }
.n-note{ color:#5B6C86; }

/* Footer (3-column layout with gradient) */
.footer-bg{
  background: radial-gradient(1200px 240px at 50% -80px, rgba(255,255,255,0.10), transparent 70%),
              linear-gradient(180deg, #3E4276 0%, #3B3F73 100%);
  color: #E7ECF7;
}
.footer-3col{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 28px 0 12px;
}
.footer-brand{
  max-width: 520px;
}
.footer-logo{ width: 110px; margin-bottom: 10px; filter: brightness(1.15) contrast(1.05); }
.footer-blurb{ margin: 0; line-height: 1.5; }

.footer-cols{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px 36px;
}
.f-col a{ display: block; color: #9FD6FF; margin: 6px 0; }
.f-col a:hover{ text-decoration: underline; }
.f-h{
  color: #FFFFFF;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  margin-bottom: 6px;
}

/* copyright strip */
.copyright{
  border-top: 1px solid rgba(255,255,255,0.15);
  padding: 10px 0 12px;
  font-size: 13px;
  color: #CFDAF2;
}

/* Desktop: columns like your screenshot */
@media (min-width: 820px){
  .footer-3col{
    grid-template-columns: 1.2fr 1fr;
    align-items: start;
  }
  .footer-cols{
    grid-template-columns: repeat(4, minmax(120px, 1fr));
  }
}

/* Responsive grids */
@media (min-width: 700px){
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
  .benefits-grid { grid-template-columns: repeat(3, 1fr); }
  .next-grid { grid-template-columns: repeat(3, 1fr); }
  .t-grid { grid-template-columns: repeat(3, 1fr); }
}
/* =========================
   Questionnaire layout
   ========================= */
.page-pad { padding: 34px 0 60px; }

.q-head { margin: 10px 0 18px; }
.q-title{
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  color: var(--indigo);
  font-size: clamp(26px, 3vw, 40px);
  margin: 0 0 10px;
}
/* Title needs to be brand red */
.q-title.q-title-red{
  color: var(--red);
}

.q-sub{
  color: var(--muted);
  margin: 0;
  max-width: 80ch;
  font-size: 16px;
  line-height: 1.5;
}

.card{
  background: #fff;
  border: 1px solid #E3EAF2;
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 22px;
}

/* Make each question stand out */
.field{
  padding: 14px 14px;
  border-radius: 14px;
  border: 1px solid #E9EFF7;
  background: #FBFDFF;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

/* Active question highlight (very light blue) */
.field.active{
  background: rgba(57,145,227,0.08);
  border-color: rgba(57,145,227,0.28);
  box-shadow: 0 0 0 3px rgba(57,145,227,0.10);
}

.field label{
  display: block;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  color: var(--indigo);
  margin: 0 0 10px;
  font-size: 15px;
}

/* Inputs */
.field input[type="number"]{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 2px solid #DFE7F2;
  font-size: 16px;
  outline: none;
  transition: border-color .25s ease, box-shadow .25s ease, opacity .35s ease, max-height .55s ease, transform .55s ease;
}
.field input[type="number"]:focus{
  border-color: var(--azure);
  box-shadow: 0 0 0 3px rgba(57,145,227,0.18);
}

/* =========================
   Radio pill styling
   - answer text must be black
   - selected pill must fully shade light green
   ========================= */
.radio-row{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  overflow: hidden;
  max-height: 500px; /* animates collapse */
  opacity: 1;
  transform: translateY(0);
  transition: max-height .55s ease, opacity .45s ease, transform .55s ease;
}

/* Base pill */
.radio-pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 2px solid #DFE7F2;
  background: #fff;
  cursor: pointer;
  user-select: none;
  transition: background .20s ease, border-color .20s ease, box-shadow .20s ease, transform .05s ease;
}
.radio-pill:active{ transform: translateY(1px); }

/* Answer text should be BLACK */
.radio-pill span{
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  color: #000;
  font-size: 14px;
}

/* Custom radio circle */
.radio-pill input{
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #9FB0C8;
  background: #fff;
  margin: 0;
  position: relative;
}
.radio-pill input::after{
  content:"";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: transparent;
}

/* Light green selection fill (whole pill) */
:root{
  --pill-green-bg: #DFF3DF;   /* light green shade */
  --pill-green-bd: #67C067;   /* green border */
  --pill-green-dot: #67C067;  /* dot color */
}

/* Preferred: highlight whole pill when selected (Safari 17+ supports :has) */
.radio-pill:has(input:checked){
  background: var(--pill-green-bg);
  border-color: var(--pill-green-bd);
  box-shadow: 0 0 0 3px rgba(103,192,103,0.18);
}

/* Circle colors when checked */
.radio-pill input:checked{
  border-color: var(--pill-green-dot);
}
.radio-pill input:checked::after{
  background: var(--pill-green-dot);
}

/* Hover polish */
.radio-pill:hover{
  border-color: rgba(103,192,103,0.55);
  box-shadow: 0 0 0 3px rgba(103,192,103,0.10);
}

/* =========================
   Collapse behavior (smooth)
   ========================= */

/* Number input animation wrapper */
.field input[type="number"]{
  max-height: 60px;
  opacity: 1;
  transform: translateY(0);
}

/* Collapsed state: animate away */
.field.collapsed .radio-row{
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
}

.field.collapsed input[type="number"]{
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
}

/* Summary line animates in/out */
.answer-summary{
  margin: 6px 0 10px;
  font-size: 14px;
  color: var(--muted);
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  overflow: hidden;
  transition: max-height .55s ease, opacity .45s ease, transform .55s ease;
}

.field.collapsed .answer-summary{
  max-height: 44px;
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   Result / Recommendation block
   - hidden until JS shows it
   ========================= */
.result{ 
  display: none;            /* IMPORTANT: don’t show until submit */
  margin-top: 18px;
  border: 1px solid #E3EAF2;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #fff;
}

.result .bar{
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  padding: 14px 16px;
}

/* Bar color changes via JS classes */
#resultBar.is-good{ background: var(--azure); }
#resultBar.is-bad{ background: var(--purple); }

.result .body{
  padding: 18px 16px 16px;
}
.result .body h3{
  margin: 0 0 8px;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  color: var(--indigo);
}
.result .body p{
  margin: 0;
  color: var(--text);
}

/* =========================
   Error styling
   ========================= */
.form-error{
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(220, 60, 60, .35);
  background: rgba(220, 60, 60, .08);
  color: #b00020;
  margin: 0 0 14px;
  font-weight: 700;
}

/* Optional tiny shake for invalid scroll target */
.shake{ animation: shake .25s linear 2; }
@keyframes shake{
  0%{ transform: translateX(0); }
  50%{ transform: translateX(6px); }
  100%{ transform: translateX(0); }
}
/* =========================
   ORDER PAGE (single card) — FIXED sizing + centered hero
   Paste this WHOLE block over your current Order section
   ========================= */

/* Make the page breathe so nothing feels cut off */
.page-pad{
  padding: 26px 0 80px; /* more bottom room, slightly tighter top */
}

/* Hero above card (centered + smaller) */
.q-head{
  text-align: center;
  max-width: 980px;
  margin: 0 auto 14px;
  padding: 0 16px;
}
.q-head .kicker{
  margin: 0 0 6px;
  font-weight: 800;
  letter-spacing: .08em;
  font-size: 11px; /* smaller */
  color: rgba(72,72,136,.75);
}

/* Force the order page title smaller EVEN IF other q-title rules exist */
.q-head .q-title{
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 32px !important;   /* smaller */
  line-height: 1.08 !important;
  margin: 0 0 8px !important;
}
@media (max-width: 900px){
  .q-head .q-title{ font-size: 26px !important; }
}
.q-head .q-sub{
  max-width: 720px;
  margin: 0 auto;
  font-size: 14px; /* smaller */
  line-height: 1.45;
  color: var(--muted);
}

/* =========================
   Order page card (BetterBrain-inspired single card)
   ========================= */
.order-single{
  max-width: 920px;        /* slightly narrower */
  margin: 0 auto 22px;
  padding: 0;
  overflow: hidden;
}

/* Top bar */
.order-single-top{
  background: var(--indigo);
  padding: 10px 14px;      /* smaller */
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  letter-spacing: .02em;
  font-size: 14px;         /* smaller */
}

/* Body */
.order-single-body{
  padding: 16px 16px 14px; /* smaller */
}

/* Divider */
.order-divider{
  border: 0;
  height: 1px;
  background: #E6EEF8;
  margin: 12px 0;          /* tighter */
}

/* Steps */
.steps-title{
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  color: var(--indigo);
  margin: 0 0 8px;
  font-size: 16px;         /* smaller */
}

.step-row{
  display: grid;
  grid-template-columns: 48px 1fr; /* smaller icon column */
  gap: 12px;
  padding: 8px 0;                 /* tighter */
  align-items: center;
}

/* Step icon box */
.step-media{
  width: 48px;
  height: 48px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(72,72,136,.08);
  border: 1px solid rgba(72,72,136,.14);
}
.step-img{
  width: 100%;
  height: 100%;
  object-fit: cover; /* change to contain if you don't want cropping */
  display: block;
}

.step-h{
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  color: var(--indigo);
  margin: 0 0 3px;
  font-size: 14px;       /* smaller */
}
.step-p{
  margin: 0;
  color: var(--text);
  font-size: 13px;       /* smaller */
  line-height: 1.35;
}

/* =========================
   Order selection (radio cards w/ prices + Buy Now)
   + Progressive reveal + Collapsible steps (with chevron + summary)
   ========================= */

/* Step wrapper */
.order-step{
  border-radius: 14px;
  margin-bottom: 12px;
}

/* Hidden step */
.order-step.is-hidden{
  display: none;
}

/* ===== Collapsible step header row ===== */
.order-step-toggle{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  padding: 8px 0 10px;
  cursor: pointer;
  text-align: left;
}

.chev{
  width: 18px;
  height: 18px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #DFE7F2;
  background: #fff;
  position: relative;
  flex: 0 0 auto;
}
.chev::before{
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--indigo);
  border-bottom: 2px solid var(--indigo);
  transform: rotate(45deg); /* down by default */
  transition: transform .75s ease; /* SLOWER chevron animation */
}

.order-step-title{
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  color: var(--indigo);
  font-size: 15px;
}

.order-step-summary{
  margin-left: auto;
  font-size: 13px;
  color: var(--muted);
  font-weight: 700;
  white-space: nowrap;
}

/* ===== Animated body (slower collapse like questionnaire) ===== */
.order-step-body{
  overflow: hidden;
  max-height: 1400px;
  opacity: 1;
  transition: max-height .95s ease, opacity .65s ease; /* SLOWER */
}

/* Collapsed state: hide EVERYTHING in the body */
.order-step.is-collapsed .order-step-body{
  max-height: 0;
  opacity: 0;
}

/* Chevron rotates UP when collapsed */
.order-step.is-collapsed .chev::before{
  transform: rotate(-135deg);
}

/* ===== Title above selection grids (when used inside body) ===== */
.order-choice-title{
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  color: var(--indigo);
  font-size: 15px;
  margin: 0 0 8px;
  text-align: center;
}

/* ===== Grid ===== */
.order-radio-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0 auto;
  max-width: 780px;
}
@media (max-width: 900px){
  .order-radio-grid{ grid-template-columns: 1fr; }
}

/* For step 3 single column */
.order-radio-grid-1col{
  grid-template-columns: 1fr;
  max-width: 620px;
}

/* ===== Selection card ===== */
.order-radio-card{
  position: relative;
  display: flex;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 2px solid #E6EEF8;
  background: #fff;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .30s ease, border-color .30s ease, background .30s ease;
}
.order-radio-card input{
  margin-top: 3px;
  transform: scale(.95);
}

/* Hover */
.order-radio-card:hover{
  border-color: rgba(57,145,227,.55);
  box-shadow: 0 10px 22px rgba(0,0,0,.07);
  transform: translateY(-1px);
}

/* Selected state */
.order-radio-card:has(input:checked){
  border-color: rgba(57,145,227,.85);
  background: rgba(57,145,227,.06);
  box-shadow: 0 0 0 3px rgba(57,145,227,.12);
}

.order-radio-main{ flex: 1; }

.order-radio-top{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.order-radio-name{
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  color: var(--indigo);
  font-size: 13px;
}

/* PRICING — light green */
.order-radio-price{
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  color: #6FCF97;
  font-size: 13px;
}

.order-radio-desc{
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.35;
}

/* ===== Step helper note ===== */
.order-step-note{
  text-align: center;
  color: var(--muted);
  font-size: 12.5px;
  margin: 10px 0 0;
}

/* ===== ZIP input row ===== */
.zip-row{
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 10px;
}

.zip-row input{
  width: min(360px, 100%);
  padding: 12px 14px;
  border-radius: 12px;
  border: 2px solid #DFE7F2;
  font-size: 15px;
  outline: none;
}

.zip-row input:focus{
  border-color: var(--azure);
  box-shadow: 0 0 0 3px rgba(57,145,227,0.18);
}

.zip-btn{
  min-width: 140px;
}

/* ===== Buy Now row ===== */
.order-buy-row{
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.order-buy-btn{
  max-width: 320px;
  width: 100%;
  text-align: center;
  padding: 12px 14px;
  min-width: 0;
}

/* ===== Footnote ===== */
.order-footnote{
  color: var(--muted);
  font-size: 12px;
  margin-top: 12px;
  line-height: 1.35;
}

/* ===== Error helper ===== */
.form-error.is-hidden{
  display: none;
}
/* =========================
   Order page: Agreement row
   ========================= */
.order-agree{
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

.agree-row{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 780px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 2px solid #E6EEF8;
  background: #fff;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.35;
}

.agree-row input{
  margin-top: 3px;
  width: 18px;
  height: 18px;
}

.agree-link{
  color: var(--azure);
  font-weight: 700;
  text-decoration: underline;
}

/* =========================
   Modal (Eligibility Confirmation)
   - compact height
   - responsive
   - NO internal list scrolling
   - backdrop can scroll if screen is short
   ========================= */

#eligibilityModal.modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);

  /* key: allow the whole modal to scroll on short screens */
  overflow: auto;
  -webkit-overflow-scrolling: touch;

  /* top-align so it can grow down and still be reachable */
  display: flex;
  justify-content: center;
  align-items: flex-start;

  padding: 16px;
  z-index: 9999;
}

#eligibilityModal.modal-backdrop.is-hidden{
  display: none;
}

#eligibilityModal .modal-card{
  width: clamp(320px, 92vw, 640px);
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 28px 70px rgba(0,0,0,.25);
  position: relative;

  /* tighter */
  padding: 14px 14px 12px;

  /* spacing from top/bottom inside scrollable backdrop */
  margin: 8px 0 16px;
}

#eligibilityModal .modal-x{
  position: absolute;
  top: 10px;
  left: 12px;          /* top-left like you mentioned */
  right: auto;

  width: auto;
  height: auto;
  padding: 0;

  background: transparent;
  border: 0;
  border-radius: 0;

  color: var(--azure);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

#eligibilityModal .modal-title{
  margin: 0 0 4px;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  color: var(--indigo);
  font-size: 16px;
  text-align: center;
}

#eligibilityModal .modal-sub{
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.35;
  text-align: center;
}

#eligibilityModal .modal-checks{
  display: grid;
  gap: 8px;
  margin: 6px 0 12px;

  /* IMPORTANT: no scrolling here */
  overflow: visible;
}

#eligibilityModal .modal-check{
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 10px 10px;
  border-radius: 12px;
  border: 2px solid #E6EEF8;
  background: #fff;
  cursor: pointer;
}

#eligibilityModal .modal-check input{
  margin-top: 2px;
  width: 16px;
  height: 16px;
}

#eligibilityModal .modal-check strong{
  display: block;
  font-weight: 800;
  color: var(--text);
  font-size: 12.75px;
  margin-bottom: 2px;
  line-height: 1.25;
}

#eligibilityModal .modal-check em{
  display: block;
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
  line-height: 1.25;
}

#eligibilityModal .modal-check:has(input:checked){
  border-color: rgba(111,207,151,.85);
  background: rgba(111,207,151,.10);
  box-shadow: 0 0 0 3px rgba(111,207,151,.12);
}

#eligibilityModal .modal-divider{
  height: 1px;
  background: #E6EEF8;
  margin: 6px 0;
}

#eligibilityModal .modal-actions{
  display: flex;
  justify-content: center;
}

#eligibilityModal #confirmEligibility[disabled]{
  opacity: .55;
  cursor: not-allowed;
}

/* Extra squeeze on shorter screens */
@media (max-height: 740px){
  #eligibilityModal .modal-card{ padding: 12px 12px 10px; }
  #eligibilityModal .modal-check{ padding: 9px 9px; }
  #eligibilityModal .modal-checks{ gap: 7px; }
}
/* =========================
   Checkout (BetterBrain-like)
   - NO internal scroll frames
   - Compact spacing
   - No clipping/cutoff
   ========================= */

/* If you use <body class="checkout-only"> on checkout.html */
body.checkout-only .announcement,
body.checkout-only header.header,
body.checkout-only footer{
  display: none !important;
}

/* Page + grid */
.checkout-page{
  padding: 18px 0 36px; /* tighter */
  min-height: 100vh;
}

.checkout-wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 18px;
  display: grid;
  grid-template-columns: 380px 1fr; /* a little wider left like BetterBrain */
  gap: 22px;
  align-items: start;
}

.checkout-wrap.checkout-wrap-single{
  max-width: 980px;
  grid-template-columns: minmax(0, 1fr);
}

/* LEFT panel (summary) */
.checkout-left{
  border-radius: 18px;

  /* IMPORTANT: do NOT clip content (this is what caused cutoff) */
  overflow: visible;

  background: var(--indigo);
  color: #fff;
  box-shadow: 0 18px 45px rgba(0,0,0,.12);

  /* Optional: keep summary visible while page scrolls (NOT an internal scroll) */
  position: sticky;
  top: 16px;
  align-self: start;
}

.checkout-left-inner{
  padding: 18px 18px 16px;
}

.checkout-brandline{
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: .95;
  font-weight: 800;
  letter-spacing: .3px;
}

.checkout-brand-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--azure);
  box-shadow: 0 0 0 3px rgba(57,145,227,.18);
}

.checkout-amount{
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 34px;
  margin: 10px 0 14px;
}

.checkout-item{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 14px;
}

.checkout-item-title{
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 6px;
}

.checkout-item-sub{
  opacity: .9;
  font-size: 12.5px;
  line-height: 1.35;
  margin-bottom: 10px;
}

.checkout-item-price{
  font-weight: 800;
  font-size: 14px;
}

.checkout-lines{
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.line{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  opacity: .96;
}

.line.total{
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.14);
  font-weight: 800;
  opacity: 1;
}

.muted{ opacity: .75; }

.promo-row{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

.promo-row input{
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08);
  padding: 10px 12px;
  color: #fff;
}

.checkout-back{
  margin-top: 14px;
}

.checkout-back a{
  color: #fff;
  opacity: .9;
  text-decoration: underline;
}

/* RIGHT panel (form) */
.checkout-right{
  background: #fff;
  border: 1px solid #E6EEF8;
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(0,0,0,.06);
}

/* IMPORTANT: no internal scrolling */
.checkout-right-inner{
  padding: 18px 18px 16px;
  overflow: visible;
  max-height: none;
}

.checkout-back-link{
  display: inline-flex;
  align-items: center;
  margin-bottom: 12px;
  font-weight: 700;
  color: var(--indigo);
  text-decoration: none;
}

.checkout-back-link:hover{
  text-decoration: underline;
}

/* Remove the old demo note visually if it still exists */
.checkout-demo-note{ display: none !important; }

/* --------- Compact form styling (BetterBrain-like density) --------- */
.checkout-block{
  padding: 12px 0; /* tighter */
  border-top: 1px solid #E6EEF8;
  position: relative;
  background: #fff;
}

.checkout-block:first-of-type{
  border-top: 0;
  padding-top: 0;
}

.checkout-h{
  margin: 0 0 8px;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  color: var(--indigo);
  font-size: 15px; /* smaller */
}

/* IMPORTANT:
   Your stylesheet defines .field elsewhere (questionnaire).
   Scope checkout form fields so they don't inherit the big padded .field block.
*/
.checkout-right .field{
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
  padding: 0;                 /* override questionnaire padding */
  border: 0;                  /* override questionnaire border */
  background: transparent;    /* override questionnaire bg */
  overflow: visible;
}

.checkout-right .field label{
  font-size: 12px; /* smaller */
  color: var(--muted);
  font-weight: 700;
}

.checkout-right .field input{
  border-radius: 12px;
  border: 1px solid #D9E6F7;
  padding: 10px 12px; /* smaller */
  font-size: 13.5px;  /* smaller */
  outline: none;
}

.checkout-right .field input:focus{
  border-color: rgba(57,145,227,.65);
  box-shadow: 0 0 0 4px rgba(57,145,227,.14);
}

.grid-2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px; /* tighter */
  overflow: visible;
}

.grid-3{
  display: grid;
  grid-template-columns: 1.2fr .6fr .6fr;
  gap: 10px; /* tighter */
  overflow: visible;
}

/* Pills (gender) - compact + no overlap */
.pill-row{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  border: 2px solid #D9E6F7;
  padding: 8px 10px;     /* smaller */
  cursor: pointer;
  font-weight: 800;
  font-size: 12.5px;     /* smaller */
  color: var(--text);
  background: #fff;
  line-height: 1;
  position: relative;
  overflow: visible;
}

.pill span{
  position: relative;
  z-index: 2;
  white-space: nowrap;
}

.pill input{
  width: 14px;
  height: 14px;
  margin: 0;
  position: relative;
  z-index: 2;
}

.pill:has(input:checked){
  border-color: rgba(57,145,227,.75);
  background: rgba(57,145,227,.10);
  box-shadow: 0 0 0 3px rgba(57,145,227,.12);
}

/* Payment list - compact */
.pay-list{
  display: grid;
  gap: 8px;
}

.pay-row{
  display: grid;
  grid-template-columns: 16px 1fr auto;
  gap: 10px;
  align-items: center;
  border: 1px solid #E6EEF8;
  border-radius: 12px;
  padding: 10px 12px; /* smaller */
  cursor: pointer;
}

.pay-row input{
  width: 14px;
  height: 14px;
}

.pay-name{
  font-weight: 800;
  color: var(--text);
  font-size: 13px;
}

.pay-badges{
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 700;
}

.checkout-actions{
  margin-top: 12px;
}

.checkout-pay{
  width: 100%;
  font-size: 15px;
  padding: 12px 14px;  /* smaller */
  border-radius: 14px;
}

.checkout-legal{
  margin: 8px 0 0;
  font-size: 11.5px; /* smaller */
  color: var(--muted);
  line-height: 1.35;
}

/* Responsive */
@media (max-width: 980px){
  .checkout-wrap{
    grid-template-columns: 1fr;
  }

  /* On smaller screens, don't sticky the left panel */
  .checkout-left{
    position: static;
  }
}

@media (max-width: 640px){
  .grid-2, .grid-3{
    grid-template-columns: 1fr;
  }
}
/* =========================
   Checkout density tweak (make right side ~15–20% smaller)
   Paste BELOW the checkout block
   ========================= */

/* Reduce overall padding of the right card */
.checkout-right-inner{
  padding: 14px 14px 12px;
}

/* Tighten block spacing and dividers */
.checkout-block{
  padding: 10px 0;
}
.checkout-h{
  font-size: 14px;
  margin: 0 0 6px;
}

/* Make labels + inputs smaller */
.checkout-right .field{
  gap: 5px;
  margin-bottom: 8px;
}

.checkout-right .field label{
  font-size: 11.5px;
}

.checkout-right .field input{
  padding: 8px 10px;     /* smaller height */
  font-size: 13px;
  border-radius: 10px;   /* slightly smaller radius looks tighter */
}

/* Tighten grid gaps */
.grid-2{ gap: 8px; }
.grid-3{ gap: 8px; }

/* Pills tighter */
.pill-row{ gap: 6px; }
.pill{
  padding: 7px 9px;
  font-size: 12px;
}
.pill input{
  width: 13px;
  height: 13px;
}

/* Payment rows tighter */
.pay-list{ gap: 6px; }
.pay-row{
  padding: 9px 10px;
}
.pay-name{ font-size: 12.5px; }
.pay-badges{ font-size: 11px; }

/* Pay button + legal text tighter */
.checkout-actions{ margin-top: 10px; }
.checkout-pay{
  padding: 11px 12px;
  font-size: 14px;
  border-radius: 12px;
}
.checkout-legal{
  margin-top: 6px;
  font-size: 11px;
}
/* =========================
   FIX: Left summary text spilling outside
   Paste BELOW your checkout section
   ========================= */

/* Clip inside the rounded card so nothing can stick out */
.checkout-left{
  overflow: hidden;           /* restores clipping inside rounded corners */
}

/* Ensure inner content can shrink and doesn't overflow */
.checkout-left-inner{
  min-width: 0;
}

/* Any row in the left summary must be allowed to shrink */
.checkout-lines,
.line{
  min-width: 0;
}

/* Amount/label rows: allow wrap instead of overflow */
.line{
  gap: 10px;
}

.line span{
  min-width: 0;
}

/* Left label can wrap if needed */
.line span:first-child{
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;  /* change to normal if you prefer wrapping */
}

/* Right value stays aligned and never pushes past edge */
.line span:last-child{
  flex: 0 0 auto;
  max-width: 48%;
  text-align: right;
  white-space: nowrap;
}

/* Special case: "Promotion code  Optional" row (if it uses .line + .promo) */
.line.promo span:last-child{
  max-width: 40%;
}

/* Promo row controls should never exceed the card width */
.promo-row{
  width: 100%;
  min-width: 0;
}

.promo-row input,
.promo-row button{
  min-width: 0;
  max-width: 100%;
}
/* Checkbox row */
.check-row{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  user-select: none;
  cursor: pointer;
  color: rgba(255,255,255,0.92); /* default if used on dark bg, but… */
}

/* In the right card, use normal text color */
.checkout-right .check-row{
  color: var(--text);
  font-weight: 700;
  font-size: 12.5px;
}

.check-row input[type="checkbox"]{
  width: 16px;
  height: 16px;
  margin: 0;
}

/* Shipping area spacing */
.shipping-fields{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #E6EEF8;
}

.checkout-subh{
  margin: 0 0 8px;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  color: var(--indigo);
  font-size: 13px;
}
/* ===== Success modal (checkout styling) ===== */
.modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(10, 20, 40, 0.55);
  display: grid;
  place-items: center;
  padding: 18px;
  z-index: 9999;
}

.modal-backdrop.is-hidden{
  display: none;
}

.modal-card{
  width: min(560px, 100%);
  background: #fff;
  border: 1px solid #E6EEF8;
  border-radius: 18px;
  box-shadow: 0 18px 55px rgba(0,0,0,.20);
  overflow: hidden;
}

.modal-header{
  padding: 18px 18px 10px;
  border-bottom: 1px solid #E6EEF8;
}

.modal-badge{
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  color: var(--indigo);
  background: rgba(57,145,227,.12);
  border: 1px solid rgba(57,145,227,.25);
  padding: 6px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.modal-title{
  margin: 0 0 6px;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  color: var(--indigo);
  font-size: 18px;
}

.modal-sub{
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.modal-body{
  padding: 14px 18px 6px;
}

.modal-list{
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.4;
}

.modal-fineprint{
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.modal-actions{
  padding: 12px 18px 18px;
}
/* Cookie banner */
.cookie-banner{
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 99999;
  width: min(720px, calc(100vw - 32px));
}
.cookie-card{
  background:#fff;
  border:1px solid #E3EAF2;
  border-radius:16px;
  box-shadow:0 18px 55px rgba(0,0,0,.18);
  padding:16px;
}
.cookie-title{
  font-family:"Montserrat",sans-serif;
  font-weight:800;
  color: var(--indigo);
  font-size: 22px;
  margin-bottom: 6px;
}
.cookie-text{ margin:0 0 12px; color: var(--text); font-size: 14px; }
.cookie-actions{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.cookie-link{
  background:transparent; border:0; cursor:pointer;
  color: var(--azure); font-weight:800; text-decoration: underline;
}
.cookie-buttons{ display:flex; gap:10px; flex-wrap:wrap; }
.cookie-btn{ min-width: 220px; border-radius: 999px; padding: 12px 14px; }

/* Modal */
.cookie-modal{
  position: fixed; inset:0; z-index:100000;
  background: rgba(10, 20, 40, 0.55);
  display:grid; place-items:center;
  padding:18px;
}
.cookie-modal-card{
  width:min(560px, 100%);
  background:#fff; border:1px solid #E6EEF8;
  border-radius:18px;
  box-shadow:0 18px 55px rgba(0,0,0,.20);
  padding:16px; position:relative;
}
.cookie-x{
  position:absolute; top:10px; right:12px;
  width:36px; height:36px;
  border-radius:10px; border:1px solid #E6EEF8;
  background:#fff; font-size:22px; cursor:pointer;
  color: var(--indigo);
}
.cookie-modal-title{
  margin:0 0 10px;
  font-family:"Montserrat",sans-serif;
  font-weight:800; color: var(--indigo);
}
.cookie-toggle{
  display:flex; gap:12px; align-items:flex-start;
  padding:12px; border-radius:12px;
  border:1px solid #E6EEF8;
  margin:10px 0;
}
.cookie-toggle input{ margin-top:4px; width:18px; height:18px; }
/* Force-hide cookie UI when [hidden] is present (bulletproof) */
.cookie-banner[hidden],
.cookie-modal[hidden] {
  display: none !important;
}
/* =========================
   Preproduction Passcode Gate
   ========================= */

.gate {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  padding: 16px;
  background:
    radial-gradient(1000px 400px at 10% -10%, rgba(104,88,168,.22), transparent 60%),
    radial-gradient(900px 380px at 110% 20%, rgba(88,184,232,.20), transparent 60%),
    rgba(255,255,255,.98);
}

.gate[hidden] { display: none; }

.gate-card {
  width: min(680px, 100%);
  background: #fff;
  border-radius: 18px;
  border: 1px solid #E3EAF2;
  box-shadow: var(--shadow);
}

.gate-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #E6EEF8;
}

.gate-top img {
  height: 36px;
}

.gate-badge {
  margin-left: auto;
  font-weight: 800;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  color: var(--indigo);
  background: rgba(57,145,227,.12);
  border: 1px solid rgba(57,145,227,.25);
  padding: 6px 10px;
  border-radius: 999px;
}

.gate-body { padding: 18px; }

.gate-title {
  margin: 0 0 8px;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  color: var(--indigo);
}

.gate-text {
  color: var(--muted);
  margin-bottom: 14px;
}

.gate-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

.gate-row input {
  padding: 12px 14px;
  border-radius: 12px;
  border: 2px solid #DFE7F2;
}

.gate-error {
  margin-top: 10px;
  color: #b00020;
  font-weight: 700;
  display: none;
}

.gate-error.show { display: block; }

.gate-actions {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.gate-note {
  margin-top: 14px;
  font-size: 13px;
  color: #5B6C86;
}
.cookie-modal-actions{ display:flex; justify-content:flex-end; margin-top:12px; }