/* ==========================================================================
   Neurodyne Accelerator — Upsell page
   Mobile-first (375 / 390 / 430) → tablet → desktop
   ========================================================================== */

:root{
  --bg:            #f4f5f7;
  --content-bg:    #f7f8fa;
  --card:          #ffffff;
  --navy:          #10233a;   /* headings */
  --body:          #4b5563;   /* body text */
  --muted:         #6b7280;
  --green:         #12a150;   /* accent green text */
  --green-dark:    #0f8a4d;
  --red:           #ef4444;
  --orange:        #e8801f;
  --yellow:        #f5b301;
  --line:          #e6e8eb;

  --cta-from:      #22c55e;
  --cta-to:        #16a34a;

  --radius:        16px;
  --radius-sm:     10px;
  --shadow:        0 4px 18px rgba(15,35,58,.06);
  --shadow-card:   0 6px 22px rgba(15,35,58,.07);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--body);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }

/* --------------------------------------------------------------- layout */
.wrap{
  width:100%;
  max-width:620px;
  margin:0 auto;
  padding-left:20px;
  padding-right:20px;
}

main.wrap{
  background:var(--content-bg);
  padding-top:26px;
  padding-bottom:40px;
}

/* --------------------------------------------------------------- success header */
.success-bar{
  background:linear-gradient(135deg,#1aa05a 0%,#12a37c 100%);
  color:#fff;
  padding:22px 0 26px;
}
.success-title{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin:0 0 18px;
  font-size:20px;
  font-weight:700;
  line-height:1.32;
}
.check-badge{
  flex:0 0 auto;
  width:28px;height:28px;
  background:#fff;
  border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  margin-top:2px;
}
.success-pill{
  margin:0;
  background:rgba(255,255,255,.16);
  border-radius:999px;
  padding:14px 22px;
  text-align:center;
  font-size:15.5px;
  font-weight:600;
  line-height:1.4;
}

/* --------------------------------------------------------------- callout */
.callout{
  background:var(--card);
  border-left:5px solid var(--yellow);
  border-radius:10px;
  padding:22px 20px;
  margin:6px 0 8px;
  font-size:20px;
  font-weight:500;
  line-height:1.45;
  color:var(--navy);
  text-align:center;
  box-shadow:var(--shadow);
}
.callout .orange{ color:var(--orange); font-weight:700; }

/* --------------------------------------------------------------- headline */
.headline{
  margin:34px 0 24px;
  text-align:center;
  font-size:29px;
  line-height:1.2;
  font-weight:800;
  color:var(--navy);
  letter-spacing:-.01em;
}
.headline .red{ color:var(--red); }
.headline .green{ color:var(--green); display:inline-block; margin-top:4px; }

/* --------------------------------------------------------------- body text */
.body p{ margin:0 0 18px; }
.body p:last-child{ margin-bottom:0; }
.body strong,.callout strong,.card strong,.dark-card strong,
.quote-card strong,.get-card strong,.guarantee strong,.center-body strong{
  color:var(--navy); font-weight:700;
}
.body{ margin:0 0 22px; }
.center-body{ text-align:center; }

strong.red{ color:var(--red)!important; }
strong.green{ color:var(--green)!important; }

/* --------------------------------------------------------------- rules / heads */
.rule{
  border:0;
  border-top:1px solid var(--line);
  margin:30px 0;
}
.sec-head{
  margin:8px 0 18px;
  font-size:25px;
  font-weight:800;
  line-height:1.25;
  color:var(--navy);
  letter-spacing:-.01em;
}
.sec-head.center{ text-align:center; }

.icon-head{
  display:flex;
  align-items:center;
  gap:14px;
  margin:6px 0 18px;
}
.icon-head h2{
  margin:0;
  font-size:25px;
  font-weight:800;
  color:var(--navy);
}
.icon-box{
  flex:0 0 auto;
  width:48px;height:48px;
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
}
.red-box{ background:#fde8e8; }

/* --------------------------------------------------------------- cards */
.card{
  background:var(--card);
  border-radius:var(--radius);
  padding:22px 20px;
  margin:0 0 16px;
  box-shadow:var(--shadow-card);
}
.card h3{
  margin:0 0 10px;
  font-size:19px;
  font-weight:700;
  color:var(--navy);
  line-height:1.3;
}
.card p{ margin:0 0 12px; color:var(--muted); }
.card p:last-child{ margin-bottom:0; }

.card.top-green{ border-top:5px solid #16c47f; }
.card.muted{ background:#f1f2f4; box-shadow:none; }

/* arrow steps */
.card.arrow{
  display:flex;
  gap:14px;
  align-items:flex-start;
}
.arrow-badge{
  flex:0 0 auto;
  width:30px;height:30px;
  border-radius:50%;
  background:#16c47f;
  color:#fff;
  font-weight:700;
  font-size:16px;
  display:flex;align-items:center;justify-content:center;
  margin-top:2px;
}
.card.arrow p{ margin:0; color:var(--body); }

/* quote card */
.quote-card{
  background:var(--card);
  border-radius:var(--radius);
  padding:26px 22px;
  margin:22px 0;
  box-shadow:var(--shadow-card);
  font-style:italic;
  font-size:18px;
  color:var(--navy);
}
.quote-card p{ margin:0 0 10px; }
.quote-card p:last-child{ margin-bottom:0; }
.quote-card.center{ text-align:center; font-style:normal; }
.quote-card .big{ font-size:21px; }

/* --------------------------------------------------------------- dark cards */
.dark-card{
  background:linear-gradient(160deg,#13273e 0%,#0b1a2b 100%);
  color:#c7d0da;
  border-radius:20px;
  padding:28px 22px;
  margin:24px 0;
}
.dark-card h2{
  margin:0 0 16px;
  color:#fff;
  font-size:24px;
  font-weight:800;
  line-height:1.28;
}
.dark-card p{ margin:0 0 14px; }
.dark-card p:last-child{ margin-bottom:0; }
.dark-card strong{ color:#fff!important; }
.dark-card .green-strong{ color:#22e08a; font-weight:700; }
.dark-card.top-green{ border-top:5px solid #16c47f; }
.dark-card.center{ text-align:center; }
.dark-card .big-q{
  color:#fff;
  font-size:23px;
  font-weight:800;
  line-height:1.35;
  margin:6px 0;
}
.green-strong{ color:var(--green); font-weight:700; }

/* --------------------------------------------------------------- mistakes */
.card.mistake{ padding-top:26px; position:relative; }
.mistake-badge{
  display:inline-block;
  background:#f43f5e;
  color:#fff;
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  padding:7px 16px;
  border-radius:999px;
  margin-bottom:14px;
}
.card.mistake h3{ font-size:22px; margin-bottom:14px; }
.card.mistake p{ color:var(--body); }
.inset{
  background:#f4f5f7;
  border:1px solid var(--line);
  border-radius:12px;
  padding:16px 18px;
  margin-top:16px;
  color:var(--navy);
  font-weight:500;
}

/* --------------------------------------------------------------- what you get */
.get-card{
  background:#f3fbf6;
  border:1px solid #cdefda;
  border-radius:20px;
  padding:26px 22px 24px;
  margin:24px 0;
  position:relative;
}
.access-badge{
  position:absolute;
  top:-14px;right:20px;
  background:#16c47f;
  color:#fff;
  font-size:12px;
  font-weight:700;
  letter-spacing:.05em;
  padding:8px 16px;
  border-radius:999px;
  box-shadow:0 4px 12px rgba(22,196,127,.35);
}
.get-card h2{
  margin:6px 0 14px;
  font-size:24px;
  font-weight:800;
  color:var(--navy);
}
.get-card>p{ margin:0 0 16px; }
.checklist{ list-style:none; margin:0 0 18px; padding:0; }
.checklist li{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:12px 0;
  border-top:1px solid #dcefe3;
  color:var(--body);
}
.checklist li:first-child{ border-top:0; }
.chk{
  flex:0 0 auto;
  width:24px;height:24px;
  border-radius:50%;
  background:#d6f2e1;
  display:flex;align-items:center;justify-content:center;
  margin-top:2px;
}
.italic{ font-style:italic; color:var(--muted); }
.get-card .italic{ margin:0; }

/* --------------------------------------------------------------- price */
.price{
  text-align:center;
  color:var(--green);
  font-size:74px;
  font-weight:800;
  line-height:1;
  margin:10px 0 24px;
  letter-spacing:-.02em;
}

/* --------------------------------------------------------------- CTA */
.cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:100%;
  border:0;
  cursor:pointer;
  background:linear-gradient(180deg,var(--cta-from) 0%,var(--cta-to) 100%);
  color:#fff;
  font-family:inherit;
  font-size:19px;
  font-weight:700;
  line-height:1.25;
  text-align:center;
  padding:20px 24px;
  border-radius:12px;
  box-shadow:0 10px 26px rgba(22,163,74,.35);
  transition:transform .12s ease, box-shadow .12s ease;
  animation:ctaPulse 1.6s ease-in-out infinite;
}
@keyframes ctaPulse{
  0%   { transform:scale(1);    box-shadow:0 10px 26px rgba(22,163,74,.35); }
  50%  { transform:scale(1.03); box-shadow:0 14px 34px rgba(22,163,74,.55); }
  100% { transform:scale(1);    box-shadow:0 10px 26px rgba(22,163,74,.35); }
}
.cta:hover{ animation-play-state:paused; transform:translateY(-1px); box-shadow:0 14px 30px rgba(22,163,74,.42); }
.cta:active{ transform:translateY(0); }
@media (prefers-reduced-motion:reduce){
  .cta{ animation:none; }
}
.cta-arrow{
  flex:0 0 auto;
  width:30px;height:30px;
  border-radius:50%;
  background:rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;
  font-size:17px;
}

/* decline link */
.decline{
  display:block;
  text-align:center;
  color:#b9bec6;
  font-size:9.5px;
  line-height:1.4;
  text-decoration:underline;
  margin:10px auto 4px;
  max-width:260px;
  cursor:pointer;
}
.decline:hover{ color:#9aa1ab; }
.decline.center-link{ font-size:12px; }

.onepay{
  text-align:center;
  font-weight:700;
  color:var(--navy);
  font-size:18px;
  margin:22px auto 8px;
  max-width:440px;
  line-height:1.45;
}

/* --------------------------------------------------------------- guarantee */
.guarantee{
  background:var(--card);
  border-radius:var(--radius);
  padding:28px 22px;
  margin:22px 0;
  text-align:center;
  box-shadow:var(--shadow-card);
}
.shield{
  display:flex;align-items:center;justify-content:center;
  width:60px;height:60px;
  border-radius:50%;
  background:#e8f7ee;
  margin:0 auto 16px;
}
.guarantee p{ margin:0 0 14px; }
.guarantee p:last-child{ margin-bottom:0; }
.zero-risk{ font-size:22px; font-weight:800; color:var(--navy); }

/* trust badges */
.trust{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px 18px;
  padding:0;
  margin:16px 0 6px;
  font-size:14.5px;
  color:var(--green-dark);
  font-weight:600;
}
.trust li{ white-space:nowrap; }

/* --------------------------------------------------------------- footer */
.footer{ background:var(--bg); padding:10px 0 40px; }
.footer .rule{ margin:0 0 22px; }
.footer p{
  margin:0;
  text-align:center;
  color:#9aa2ad;
  font-size:13px;
  line-height:1.7;
}

/* ==========================================================================
   TABLET
   ========================================================================== */
@media (min-width:768px){
  body{ font-size:17.5px; }
  .headline{ font-size:34px; }
  .sec-head,.icon-head h2{ font-size:28px; }
  .dark-card h2{ font-size:27px; }
  .price{ font-size:86px; }
  .success-title{ font-size:22px; }
}

/* ==========================================================================
   DESKTOP — keep the article column narrow & centered (do NOT stretch)
   ========================================================================== */
@media (min-width:1024px){
  .success-bar{ padding:26px 0 30px; }
  .headline{ font-size:36px; margin-top:40px; }
  .cta{ font-size:20px; }
}

/* ==========================================================================
   UPSELL 2 — "Sleep Reset" theme tweaks (subtle night variation)
   ========================================================================== */
:root{
  --night-from:#1e2a5a;   /* deep indigo */
  --night-to:#0d1b3e;
  --indigo:#5b6ef5;
}

/* Header becomes a calm night-sky gradient instead of green */
.success-bar{
  background:linear-gradient(135deg,var(--night-from) 0%,var(--night-to) 100%);
}
/* little stars dusting the header */
.success-bar .wrap{ position:relative; }

/* warning badge tuned for the darker header */
.check-badge{ background:#fff; }

/* Indigo icon-box variant (for the "cleanup / glymphatic" section) */
.icon-box.indigo-box{ background:#e7e9fd; }

/* Product figure (the dreaming image) */
.figure{
  margin:26px 0;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-card);
  background:#0d1b3e;
}
.figure img{
  width:100%;
  height:auto;
  aspect-ratio:2752 / 1536;
  object-fit:cover;
  display:block;
}
.figure figcaption{
  padding:12px 16px;
  font-size:13.5px;
  font-style:italic;
  color:var(--muted);
  text-align:center;
  background:var(--card);
}

/* Product name lockup used above the price */
.product-badge{
  display:inline-block;
  background:#e7e9fd;
  color:#3b45c9;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:7px 16px;
  border-radius:999px;
  margin:0 auto 14px;
}

/* "old price" strike near the offer */
.old-price{
  text-align:center;
  color:var(--muted);
  font-size:18px;
  font-weight:600;
  margin:4px 0 0;
}
.old-price s{ color:#aab0ba; }

/* top accent for the dark "product reveal" card */
.dark-card.top-indigo{ border-top:5px solid var(--indigo); }

/* ==========================================================================
   UPSELL 2 — STOP header + cart note + book cover
   ========================================================================== */

/* Strong attention header carrying the STOP headline */
.stop-bar{
  background:linear-gradient(135deg,var(--night-from) 0%,var(--night-to) 100%);
  color:#fff;
  padding:22px 0 26px;
}
.stop-flag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(255,210,94,.14);
  color:#ffd25e;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:7px 14px;
  border-radius:999px;
  margin:0 0 16px;
}
.stop-headline{
  margin:0;
  font-size:29px;
  line-height:1.18;
  font-weight:800;
  letter-spacing:-.01em;
  color:#fff;
}
.stop-headline .red{ color:#ff6b6b; }

/* Cart confirmation strip */
.cart-note{
  display:flex;
  align-items:center;
  gap:10px;
  background:#eaf7ef;
  border:1px solid #cdedd7;
  border-radius:10px;
  padding:12px 16px;
  margin:18px 0 6px;
  font-size:15px;
  color:#0e3a24;
  line-height:1.4;
}
.cart-note strong{ color:#0b5c33; }
.cart-check{
  flex:0 0 auto;
  width:24px;height:24px;
  border-radius:50%;
  background:#cdeedb;
  display:flex;align-items:center;justify-content:center;
}

/* headline (now the H2 subline) tightened since STOP moved to header */
.headline{ margin-top:14px; }

/* Book cover figure */
.book-figure{
  margin:24px auto 26px;
  max-width:300px;
  text-align:center;
}
.book-figure img{
  width:100%;
  height:auto;
  aspect-ratio:1 / 1;
  display:block;
  border-radius:14px;
  filter:drop-shadow(0 16px 30px rgba(13,27,62,.28));
}
.book-figure figcaption{
  margin-top:14px;
  font-size:13.5px;
  font-style:italic;
  color:var(--muted);
}

@media (min-width:768px){
  .stop-headline{ font-size:36px; }
}

/* --- header sub note: natural rounded card instead of a pill/ellipse --- */
.stop-bar .success-pill{
  border-radius:12px;
  padding:16px 18px;
  max-width:none;
  font-weight:500;
}

/* --- bare images (no caption card) --- */
.story-img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:2752 / 1536;
  object-fit:cover;
  border-radius:16px;
  margin:24px 0 10px;
  box-shadow:0 10px 30px rgba(15,35,58,.14);
}
.product-img{
  display:block;
  width:100%;
  max-width:440px;      /* zoomed / prominent */
  height:auto;
  aspect-ratio:1 / 1;
  margin:22px auto 10px;
  border-radius:16px;
  filter:drop-shadow(0 14px 28px rgba(15,35,58,.22));
}
.img-line{
  text-align:center;
  font-size:14.5px;
  font-style:italic;
  color:var(--muted);
  margin:0 0 24px;
}

/* --- header: larger success title, sub moved out --- */
.success-title.big{
  font-size:23px;
  line-height:1.3;
  margin:0;
}
@media (min-width:768px){ .success-title.big{ font-size:27px; } }

/* Header back to the normal green (like upsell 1), overriding the night variant */
.success-bar.green-header{
  background:linear-gradient(135deg,#1aa05a 0%,#12a37c 100%);
  color:#fff;
  padding:18px 0 18px;   /* less stretched, esp. at the bottom */
}
.success-bar.green-header .success-title{
  color:#fff;
  font-size:22px;        /* a touch bigger */
  margin:0;
}
@media (min-width:768px){ .success-bar.green-header .success-title{ font-size:25px; } }
.success-bar.green-header .check-badge{ background:#fff; }

/* Dr. Peter lead-in — discreet sub-line under the warning (quieter than the headline) */
.drpeter-line{
  margin:2px auto 36px;
  max-width:440px;
  text-align:center;
  font-size:14.5px;
  line-height:1.55;
  color:var(--muted);
  letter-spacing:.005em;
}
.drpeter-line strong{ color:var(--navy); font-weight:600; }
.drpeter-line .drp{
  color:var(--red);
  font-weight:700;
  letter-spacing:.02em;
}
.drpeter-line .hot{           /* beige marker removed — kept subtle */
  color:var(--navy);
  font-weight:600;
  background:none;
  padding:0;
}
@media (min-width:768px){ .drpeter-line{ font-size:15.5px; } }

/* headline sits close under the red banner */
main.wrap{ padding-top:10px; }

/* ===== WAIT banner — red gradient bar in place of the old header ===== */
.wait-bar{
  background:linear-gradient(135deg,#ff4b4b 0%,#d31414 55%,#b00f0f 100%);
  padding:18px 0;
}
.wait-bar .wait-alert{ margin:0 auto; max-width:440px; padding-left:8px; padding-right:8px; }

/* ===== WAIT alert (compact group — triangles hug the text, centered) ===== */
.wait-alert{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  max-width:440px;
  margin:0 auto;
  padding:0;
  background:none;
  border:0;
  box-shadow:none;
}
.wait-ico{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  transform-origin:center;
}
.wait-ico svg{ width:24px;height:24px;stroke:#ffffff; }
.pulse{ animation:iconPulse 1.25s ease-in-out infinite; }
@keyframes iconPulse{
  0%,100%{ transform:scale(1);    opacity:1;   }
  50%    { transform:scale(1.16); opacity:.75; }
}
@media (prefers-reduced-motion:reduce){ .pulse{ animation:none; } }
.wait-head{
  margin:0;
  font-size:21px;            /* two lines (manual break) — block hugs the icons */
  font-weight:800;
  line-height:1.26;
  color:#ffffff;             /* everything inside the header is white */
  text-align:center;
  letter-spacing:-.02em;
}
.wait-word{ color:#ffffff; font-weight:800; }
.wait-red{ color:#ffffff; font-weight:800; }
@media (min-width:768px){ .wait-head{ font-size:24px; } }

/* ===== top headline: dark line + green ALL-CAPS closing line as one cohesive block ===== */
.headline{
  margin:8px -16px 28px;     /* snug under the banner; near full-bleed to hold 2 lines */
  font-size:21px;            /* dark sentence, two lines filling the width */
  line-height:1.3;
  letter-spacing:-.03em;
  text-wrap:balance;         /* two even lines instead of three */
}
.headline .green{
  display:inline-block;      /* own line, right under the dark line */
  margin-top:14px;
  font-size:1.5em;           /* much bigger — fills the phone width */
  line-height:1.2;
  letter-spacing:-.02em;
  text-transform:uppercase;  /* all caps */
}
@media (min-width:768px){
  .headline{ margin:14px 0 38px; font-size:31px; letter-spacing:-.01em; }
  .headline .green{ margin-top:14px; font-size:1.25em; }
}

/* ===== extra icon-box tints for the section icons ===== */
.icon-box.green-box{ background:#e2f5ea; }
.icon-box.amber-box{ background:#fdefdb; }
.icon-box.sky-box{ background:#e2f0fb; }
.icon-box.rose-box{ background:#fde7ef; }

/* centered icon-head (icon stacked above the heading) */
.icon-head.center{
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:12px;
}
.icon-head.center h2{ text-align:center; }

/* ===== discount unlocked (75% OFF) ===== */
.discount-box{
  text-align:center;
  margin:10px auto 14px;
  max-width:480px;
}
.off-badge{
  display:block;
  background:linear-gradient(120deg,#2fe07f 0%,#12a150 55%,#0b7d3a 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:#12a150;
  font-size:64px;
  font-weight:800;
  line-height:1;
  text-transform:uppercase;
  margin:0 0 8px;
  letter-spacing:-.01em;
}
@media (min-width:768px){ .off-badge{ font-size:86px; } }
.discount-box .discount-line{
  margin:0;
  font-size:16px;
  font-weight:600;
  line-height:1.5;
  color:var(--body);
}
.discount-box .discount-line strong{ color:var(--navy); font-weight:800; }