/* -------------------------------------------------------------
   Peptivo NAD+ Intake — Design Overlay
   Restyles chrome to match peptivo.app/glp1-m-v1 without
   changing intake-engine.js logic or wizard classes.
   ------------------------------------------------------------- */
:root{
  --beige:#F1EBE1;
  --beige-2:#EBE3D5;
  --ink:#0D1418;
  --ink-2:#3D4A54;
  --muted:#6B7280;
  --teal:#0D7D78;
  --teal-d:#0A6863;
  --teal-l:#E7F1F0;
  --card:#FFFFFF;
  --line:#D9D0BE;
  --line-2:#E9E1CE;
  --serif:'Fraunces','Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
html, body{
  background:var(--beige) !important;
  font-family:var(--sans) !important;
  color:var(--ink) !important;
  -webkit-font-smoothing:antialiased;
}
/* Top promo band — turn into the dark trust strip */
.intk-promo{
  background:#0B1214 !important;
  color:#EDE5D3 !important;
  font-family:var(--sans) !important;
  font-size:12px !important;
  letter-spacing:.02em !important;
  padding:11px 32px !important;
  text-align:center !important;
  border-bottom:none !important;
}
.intk-promo b{
  color:#4CB09B !important;
  font-weight:700 !important;
  margin-right:8px !important;
}

/* Header bar — pure white / beige with brand + secure */
.intk-head{
  background:var(--beige) !important;
  border-bottom:1px solid var(--line-2) !important;
  padding:0 !important;
}
.intk-head-in{
  max-width:820px !important;
  margin:0 auto !important;
  padding:22px 32px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
}
.intk-brand{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  font-family:var(--serif) !important;
  font-weight:500 !important;
  font-size:24px !important;
  letter-spacing:-.01em !important;
  color:var(--ink) !important;
  text-decoration:none !important;
}
.intk-brand .dot{
  width:29px !important;
  height:29px !important;
  border-radius:50% !important;
  background:var(--teal) !important;
  color:#fff !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-family:var(--sans) !important;
  font-size:13px !important;
  font-weight:600 !important;
}
@media(max-width:640px){
  .intk-brand{ font-size:18px !important; gap:8px !important; }
  .intk-brand .dot{ width:23px !important; height:23px !important; font-size:11px !important; }
}
.intk-secure{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  font-family:var(--sans) !important;
  font-size:12px !important;
  font-weight:600 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  color:var(--muted) !important;
  padding:8px 16px !important;
  border-radius:100px !important;
  border:1.5px solid var(--line) !important;
  background:#fff !important;
}
.intk-secure svg{
  width:14px !important;
  height:14px !important;
  fill:none !important;
  stroke:var(--teal) !important;
  stroke-width:2.2 !important;
}
.intk-secure span{color:var(--muted) !important}

/* Wrap */
.intk-wrap{
  max-width:720px !important;
  margin:0 auto !important;
  padding:30px 32px 60px !important;
  background:transparent !important;
}
@media(max-width:640px){
  .intk-wrap{padding:22px 20px 40px !important}
  .intk-head-in{padding:18px 20px !important}
  .intk-promo{padding:9px 20px !important;font-size:11px !important}
}

/* Progress bar */
.prog{
  background:transparent !important;
  padding:0 !important;
  margin-bottom:26px !important;
}
.prog-top{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  margin-bottom:14px !important;
}
.prog-back{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:8px 14px !important;
  border-radius:100px !important;
  background:#fff !important;
  border:1.5px solid var(--line) !important;
  color:var(--ink) !important;
  font-family:var(--sans) !important;
  font-size:12px !important;
  font-weight:600 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  cursor:pointer !important;
}
.prog-back svg{
  width:12px !important;
  height:12px !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:2.4 !important;
}
.prog-count{
  font-family:var(--sans) !important;
  font-size:11.5px !important;
  font-weight:600 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  color:var(--teal) !important;
}
.prog-bar{
  height:4px !important;
  background:var(--line-2) !important;
  border-radius:100px !important;
  overflow:hidden !important;
}
.prog-fill{
  height:100% !important;
  background:var(--teal) !important;
  border-radius:100px !important;
  transition:width .3s ease !important;
}

/* Stage / questions */
#stage{
  background:#fff !important;
  border:1.5px solid var(--line-2) !important;
  border-radius:20px !important;
  padding:36px 34px !important;
  margin-bottom:20px !important;
}
@media(max-width:640px){
  #stage{padding:28px 22px !important;border-radius:16px !important}
}

/* Question headings */
#stage h1, #stage .q-title, .q-title, .qtitle, .step-title{
  font-family:var(--serif) !important;
  font-weight:400 !important;
  font-size:34px !important;
  line-height:1.1 !important;
  letter-spacing:-.015em !important;
  margin:0 0 10px !important;
  color:var(--ink) !important;
}
#stage h2{
  font-family:var(--serif) !important;
  font-weight:400 !important;
  font-size:28px !important;
  letter-spacing:-.01em !important;
  margin:0 0 8px !important;
  color:var(--ink) !important;
}
#stage h3{
  font-family:var(--serif) !important;
  font-weight:500 !important;
  font-size:20px !important;
  margin:0 0 8px !important;
}
#stage p, #stage .help, .q-help, .qhelp{
  font-family:var(--sans) !important;
  font-size:14.5px !important;
  color:var(--ink-2) !important;
  line-height:1.55 !important;
  margin:0 0 20px !important;
}
#stage label{
  font-family:var(--sans) !important;
  font-size:11px !important;
  font-weight:600 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  color:var(--muted) !important;
  display:block !important;
  margin-bottom:6px !important;
}

/* Inputs / selects / textarea */
#stage input[type="text"],
#stage input[type="email"],
#stage input[type="tel"],
#stage input[type="number"],
#stage input[type="date"],
#stage select,
#stage textarea{
  font-family:var(--sans) !important;
  font-size:15px !important;
  color:var(--ink) !important;
  background:#fff !important;
  border:1.5px solid var(--line-2) !important;
  border-radius:10px !important;
  padding:14px 16px !important;
  width:100% !important;
  outline:none !important;
  transition:.15s !important;
  box-shadow:none !important;
}
#stage input:focus, #stage select:focus, #stage textarea:focus{
  border-color:var(--teal) !important;
  box-shadow:0 0 0 3px rgba(13,125,120,.12) !important;
}
#stage textarea{min-height:110px !important; resize:vertical !important}

/* Radio / checkbox pills — target common patterns */
#stage .opt, #stage .option, #stage .choice, #stage label.pill,
#stage .pill-option, #stage .btn-choice{
  display:block !important;
  padding:16px 20px !important;
  border-radius:14px !important;
  background:#fff !important;
  border:1.5px solid var(--line-2) !important;
  color:var(--ink) !important;
  font-family:var(--sans) !important;
  font-size:15px !important;
  font-weight:500 !important;
  cursor:pointer !important;
  transition:.15s !important;
  margin-bottom:10px !important;
  text-align:left !important;
}
#stage .opt:hover, #stage .option:hover, #stage .choice:hover,
#stage label.pill:hover, #stage .pill-option:hover, #stage .btn-choice:hover{
  border-color:var(--teal) !important;
  background:var(--teal-l) !important;
}
#stage .opt.selected, #stage .option.selected, #stage .choice.selected,
#stage .pill-option.selected, #stage .btn-choice.selected,
#stage input[type="radio"]:checked + label,
#stage input[type="checkbox"]:checked + label{
  border-color:var(--teal) !important;
  background:var(--teal-l) !important;
  color:var(--teal) !important;
  font-weight:600 !important;
}

/* Buttons — Next / Continue / Submit */
#stage button, #stage .btn, #stage .btn-primary,
button.btn-next, .btn-next, .btn-submit, .btn-cta{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  padding:16px 30px !important;
  border-radius:100px !important;
  background:var(--teal) !important;
  color:#fff !important;
  font-family:var(--sans) !important;
  font-weight:600 !important;
  font-size:13.5px !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  border:none !important;
  cursor:pointer !important;
  transition:.15s ease !important;
  box-shadow:0 1px 0 rgba(0,0,0,.05) !important;
  width:100% !important;
  margin-top:20px !important;
}
#stage button:hover, .btn-next:hover, .btn-submit:hover{
  background:var(--teal-d) !important;
}
#stage button.btn-ghost, #stage .btn-secondary, .btn-back{
  background:transparent !important;
  color:var(--ink) !important;
  border:1.5px solid var(--ink) !important;
  box-shadow:none !important;
}

/* Loader screen */
.loader{
  background:#fff !important;
  border:1.5px solid var(--line-2) !important;
  border-radius:20px !important;
  padding:44px 34px !important;
  text-align:center !important;
}
.loader h2{
  font-family:var(--serif) !important;
  font-weight:400 !important;
  font-size:28px !important;
  letter-spacing:-.01em !important;
  margin:18px 0 8px !important;
  color:var(--ink) !important;
}
.loader p{
  font-family:var(--sans) !important;
  color:var(--muted) !important;
  font-size:14px !important;
  margin:0 0 24px !important;
}
.loader .spin{
  border:3px solid var(--line-2) !important;
  border-top-color:var(--teal) !important;
  width:44px !important;
  height:44px !important;
  border-radius:50% !important;
  animation:sp 1s linear infinite !important;
  margin:0 auto !important;
}
@keyframes sp{to{transform:rotate(360deg)}}
.loader .lsteps{
  list-style:none !important;
  padding:0 !important;
  margin:20px auto 0 !important;
  max-width:340px !important;
  text-align:left !important;
}
.loader .lsteps li{
  font-family:var(--sans) !important;
  font-size:14px !important;
  color:var(--ink-2) !important;
  padding:10px 0 !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
}
.loader .lsteps li .c{
  width:18px !important;
  height:18px !important;
  border-radius:50% !important;
  border:1.5px solid var(--line-2) !important;
  background:#fff !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-shrink:0 !important;
  transition:.2s !important;
}
.loader .lsteps li.done .c{
  background:var(--teal) !important;
  border-color:var(--teal) !important;
}
.loader .lsteps li.done .c::after{
  content:"✓" !important;
  color:#fff !important;
  font-size:11px !important;
  font-weight:700 !important;
}

/* Approval screen (Dr. Jordan Miles) */
.appr{
  background:#fff !important;
  border:1.5px solid var(--line-2) !important;
  border-radius:20px !important;
  padding:36px 34px !important;
}
.appr h1, .appr h2{
  font-family:var(--serif) !important;
  font-weight:400 !important;
  font-size:32px !important;
  letter-spacing:-.015em !important;
  margin:0 0 10px !important;
  color:var(--ink) !important;
}
.appr p{
  font-family:var(--sans) !important;
  color:var(--ink-2) !important;
  font-size:14.5px !important;
  line-height:1.55 !important;
}
.appr img{
  border-radius:14px !important;
  border:1.5px solid var(--line-2) !important;
}
.appr a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  padding:16px 30px !important;
  border-radius:100px !important;
  background:var(--teal) !important;
  color:#fff !important;
  font-family:var(--sans) !important;
  font-weight:600 !important;
  font-size:13.5px !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  text-decoration:none !important;
  transition:.15s !important;
}
.appr a:hover{background:var(--teal-d) !important}

/* Grids (name/email/phone side by side) */
#stage .row, #stage .grid, #stage .fields, #stage .two-col{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:14px !important;
  margin-bottom:14px !important;
}
@media(max-width:600px){
  #stage .row, #stage .grid, #stage .fields, #stage .two-col{
    grid-template-columns:1fr !important;
  }
}

/* Anchor consent / disclosure text under buttons */
#stage small, #stage .fine, .microcopy{
  display:block !important;
  font-family:var(--sans) !important;
  font-size:12px !important;
  color:var(--muted) !important;
  text-align:center !important;
  margin-top:12px !important;
  line-height:1.55 !important;
}

/* ============================================================
 * Mobile type scale (authoritative — this file loads last).
 * Desktop display sizes are oversized inside a ~390px viewport.
 * Inputs/selects/textareas stay at 16px so iOS Safari never
 * auto-zooms on focus.
 * ============================================================ */
@media(max-width:640px){
  #stage h1, #stage .q-title, .q-title, .qtitle, .step-title{
    font-size:24px !important;
    line-height:1.16 !important;
  }
  #stage h2{ font-size:23px !important; line-height:1.18 !important; }
  #stage h3{ font-size:17px !important; }
  #stage p, #stage .help, .q-help, .qhelp{ font-size:14px !important; margin:0 0 16px !important; }
  #stage input[type="text"],
  #stage input[type="email"],
  #stage input[type="tel"],
  #stage input[type="number"],
  #stage input[type="date"],
  #stage select,
  #stage textarea{
    font-size:16px !important;
    padding:13px 14px !important;
  }
  #stage .opt, #stage .option, #stage .choice, #stage label.pill,
  #stage .pill-option, #stage .btn-choice{
    font-size:15px !important;
    padding:14px 16px !important;
    border-radius:12px !important;
  }
  .loader h2{ font-size:22px !important; }
  .appr h1, .appr h2{ font-size:26px !important; }
  .appr p{ font-size:14px !important; }
}
/* Option A wordmark refinements */
.intk-brand{font-size:26px !important;letter-spacing:-.015em !important;font-variation-settings:'opsz' 44 !important}
.intk-brand .dot{width:31px !important;height:31px !important;font-family:var(--serif) !important;font-weight:600 !important;font-size:16.5px !important;padding-bottom:2px !important}
@media(max-width:640px){
  .intk-brand{font-size:19px !important}
  .intk-brand .dot{width:24px !important;height:24px !important;font-size:13px !important}
}

.intk-brand .wm{height:18px !important;display:block !important}

.intk-brand .pb{width:24px !important;height:24px !important;display:block !important;flex:none !important}
@media(max-width:640px){.intk-brand .pb{width:22px !important;height:22px !important}}

@media(max-width:640px){.intk-brand .wm{height:16px !important}}

.intk-brand{align-items:center !important}
.intk-brand .wm{transform:translateY(-0.5px) !important}