@import url('https://api.fontshare.com/v2/css?f[]=satoshi@700,500,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* ============================================================
   Science & Co — GLP-1 v2 theme
   Tokens taken from the Figma "Science - Ghost - Design" file.
   ============================================================ */
:root {
  --primary: #0362fe;
  --primary-2: #0362fe;
  --sco-bg: #f4fafa;
  --sco-border: #d6e7ea;
  --sco-text: #000000;
  --sco-muted: rgba(0, 0, 0, 0.5);
  --sco-radius: 16px;
  --sco-pill: 232px;
  --sco-font-head: 'Satoshi', 'Archivo', system-ui, -apple-system, sans-serif;
  --sco-font-body: 'Inter', system-ui, -apple-system, sans-serif;
}

body,
.intake-container {
  background: var(--sco-bg);
  font-family: var(--sco-font-body);
  color: var(--sco-text);
}

/* ---------- Step shell ---------- */
.sco-step {
  padding: 0 16px 96px;
  font-family: var(--sco-font-body);
}

.sco-heading {
  font-family: var(--sco-font-head);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.15;
  color: var(--sco-text);
  text-align: left;
  margin: 0;
}

.sco-subheading {
  font-family: var(--sco-font-head);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  color: var(--sco-text);
  margin: 0;
}

.sco-sub {
  font-size: 16px;
  line-height: 1.4;
  color: var(--sco-muted);
  margin: 16px 0 0;
}

@media (max-width: 640px) {
  .sco-heading { font-size: 24px; }
  .sco-subheading { font-size: 20px; }
}

/* ---------- Selectable option rows ---------- */
.sco-option {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 24px;
  border: 1px solid var(--sco-border);
  border-radius: var(--sco-radius);
  background: transparent;
  font-size: 16px;
  line-height: 1.3;
  color: var(--sco-text);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.sco-option:hover { border-color: var(--primary); }

.sco-option--icon { justify-content: space-between; gap: 16px; }

.sco-option--selected {
  border-color: var(--primary);
  background: rgba(3, 98, 254, 0.06);
}

.sco-option__icon { flex: 0 0 24px; color: var(--primary); }

/* ---------- Checkbox ---------- */
.sco-checkbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  background: transparent;
  color: #fff;
}

.sco-checkbox--checked {
  background: var(--primary);
  border-color: var(--primary);
}

/* ---------- Radio / check indicator on plan cards ---------- */
.sco-radio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  background: transparent;
  color: #fff;
}

.sco-radio--on { background: var(--primary); border-color: var(--primary); }

/* ---------- Floating-label fields ---------- */
.sco-field {
  position: relative;
  display: block;
  width: 100%;
  padding: 16px 24px;
  border: 1px solid var(--sco-border);
  border-radius: var(--sco-radius);
  background: transparent;
  cursor: text;
}

.sco-field:focus-within { border-color: var(--primary); }

.sco-field__label {
  display: block;
  font-size: 11px;
  line-height: 1;
  color: var(--sco-muted);
  margin-bottom: 6px;
}

.sco-field__input {
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  font-family: var(--sco-font-body);
  font-size: 16px;
  line-height: 1.2;
  color: var(--sco-text);
  outline: none;
  appearance: none;
}

.sco-field__input::placeholder { color: rgba(0, 0, 0, 0.35); }
.sco-field__input--date { color-scheme: light; }

/* Unit chip (lbs / ft / in). Figma screen 2 nodes 33:75 / 33:84 / 33:90: a
   16%-primary tinted chip with primary-blue text at 80% opacity, and NO border.
   It was rendering as a grey bordered box on the page background. */
.sco-field__suffix {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  padding: 8px;
  border-radius: 8px;
  background: rgba(3, 98, 254, 0.16);
  border: 0;
  font-size: 12px;
  color: var(--primary);
  opacity: 0.8;
}

.sco-field--phone .sco-field__prefix {
  position: absolute;
  left: 24px;
  bottom: 16px;
  font-size: 16px;
  color: var(--sco-text);
}

.sco-field--phone .sco-field__input { padding-left: 72px; }

.sco-field--select::after {
  content: '';
  position: absolute;
  right: 24px;
  top: 58%;
  width: 10px;
  height: 10px;
  border-right: 1.5px solid var(--sco-muted);
  border-bottom: 1.5px solid var(--sco-muted);
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
}

.sco-field--select .sco-field__input { padding-right: 32px; }

.sco-field__hint { font-size: 13px; color: var(--sco-muted); margin: 0; }

.sco-error { font-size: 13px; color: #d6455b; margin: 8px 0 0; }

/* ---------- BMI readout ---------- */
/* Figma screen 2 node 33:93: the BMI readout is primary blue, not body black.
   (The "BMI" caption below it IS black at 50% - node 33:94 - so .sco-bmi__label
   keeping var(--sco-muted) is correct and deliberate.) */
.sco-bmi__value {
  font-family: var(--sco-font-head);
  font-weight: 700;
  font-size: 58px;
  line-height: 1;
  color: var(--primary);
}

.sco-bmi__label { font-size: 16px; color: var(--sco-muted); margin-top: 12px; }

/* ---------- Primary button ---------- */
.sco-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 24px;
  border: 0;
  border-radius: var(--sco-pill);
  background: var(--primary);
  color: #fff;
  font-family: var(--sco-font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.sco-btn:hover { opacity: 0.92; }

.sco-btn--disabled,
.sco-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------- "Takes ~3 minutes" pill ---------- */
.sco-pill {
  display: inline-block;
  padding: 10px 16px;
  border-radius: var(--sco-pill);
  background: var(--primary);
  color: rgba(255, 255, 255, 0.85);
  font-size: 10px;
  line-height: 1;
}

/* ---------- Accordion ---------- */
.sco-accordion {
  border: 1px solid var(--sco-border);
  border-radius: var(--sco-radius);
  background: transparent;
  overflow: hidden;
}

.sco-accordion--open { background: transparent; }

.sco-accordion__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 24px;
  border: 0;
  background: transparent;
  font-size: 16px;
  line-height: 1.3;
  color: var(--sco-text);
  text-align: left;
  cursor: pointer;
}

.sco-accordion__chevron { flex: 0 0 24px; transition: transform 0.2s ease; }
.sco-accordion__chevron--up { transform: rotate(180deg); }

.sco-accordion__count {
  display: inline-block;
  min-width: 20px;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: var(--sco-pill);
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  text-align: center;
}

.sco-accordion__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0 24px 24px;
  border-top: 1px solid #e5f0f2;
  margin-top: -1px;
  padding-top: 24px;
}

.sco-accordion__body .sco-option { background: transparent; }

.sco-accordion__answer {
  padding: 0 24px 24px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--sco-muted);
}

/* ---------- Segmented control (Semaglutide / Tirzepatide) ---------- */
.sco-segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 8px;
  border-radius: var(--sco-pill);
  background: var(--sco-border);
}

.sco-segmented__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--sco-pill);
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  color: var(--sco-muted);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.sco-segmented__item--active { background: var(--primary); color: #fff; }

/* ---------- Plan cards ---------- */
.sco-plan {
  display: block;
  width: 100%;
  padding: 24px;
  border: 1px solid var(--sco-border);
  border-radius: var(--sco-radius);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.sco-plan:hover { border-color: var(--primary); }

.sco-plan--selected {
  background: #0c265a;
  border-color: #0c265a;
  color: #fff;
}

.sco-plan--selected .sco-plan__subtitle,
.sco-plan--selected .sco-plan__billing { color: rgba(255, 255, 255, 0.7); }

.sco-plan--selected .sco-radio { background: var(--primary); border-color: var(--primary); color: #fff; }

.sco-plan--unavailable { opacity: 0.45; cursor: not-allowed; }

.sco-plan__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sco-plan__name {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
}

.sco-plan__subtitle { font-size: 12px; color: var(--sco-muted); margin-top: 8px; }

.sco-plan__pricing {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.sco-plan__total { font-family: var(--sco-font-head); font-weight: 700; font-size: 22px; }
.sco-plan__permonth { font-size: 13px; opacity: 0.6; }
.sco-plan__billing { flex: 1 0 100%; font-size: 13px; color: var(--sco-muted); }
.sco-plan__unavailable { margin-top: 16px; font-size: 13px; color: #d6455b; }

.sco-badge {
  padding: 8px 10px;
  border-radius: var(--sco-pill);
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  white-space: nowrap;
}

.sco-chip {
  padding: 5px 8px;
  border-radius: var(--sco-pill);
  font-size: 10px;
  white-space: nowrap;
}

.sco-chip--save { background: rgba(3, 98, 254, 0.15); color: var(--primary); }
.sco-plan--selected .sco-chip--save { background: rgba(255, 255, 255, 0.2); color: #fff; }

/* ---------- Trust row ---------- */
.sco-trustrow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  font-size: 11px;
  color: var(--primary);
}

/* ---------- Guarantee ---------- */
.sco-guarantee {
  padding: 24px;
  border-radius: var(--sco-radius);
  background: var(--primary);
  color: #fff;
}

.sco-guarantee__title { font-size: 14px; font-weight: 600; }
.sco-guarantee__body { font-size: 13px; line-height: 1.5; margin: 12px 0 0; opacity: 0.9; }
.sco-guarantee__terms { font-size: 10px; margin: 12px 0 0; opacity: 0.75; }

/* ---------- Alert ---------- */
.sco-alert {
  padding: 14px 16px;
  border: 1px solid rgba(214, 69, 91, 0.3);
  border-radius: 8px;
  background: rgba(214, 69, 91, 0.08);
  color: #d6455b;
  font-size: 14px;
  text-align: center;
}

/* ---------- Stock header progress bar ----------
   The renderer ships a segmented bar; the Figma shows one continuous 8px
   track. Collapse the gaps and square the inner corners so the segments
   read as a single rounded bar. (The design's "N of 9" counter has no
   corresponding element in the stock header and cannot be added here.) */
/* The renderer's own sheet declares .progress_bar_segmented { gap: 4px
   !important } and loads after this one, so an equal-specificity rule loses.
   The `body` prefix raises specificity enough to win. */
body .progress_bar_segmented {
  display: block !important;
  gap: 0 !important;
  height: 8px !important;
  border-radius: var(--sco-pill) !important;
  overflow: hidden !important;
  background: rgba(3, 98, 254, 0.24) !important;
}

/* The renderer buckets 9 steps into 4 segments, so its fill jumps in coarse
   chunks and disagrees with the "N of 9" counter. Hide the segments and use
   the exact fill each step injects instead. */
body .progress_segment {
  display: none !important;
}

.sco-progressfill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: var(--sco-pill);
  background: var(--primary);
  transition: width 0.3s ease;
}

/* ---------- Step counter ("1 of 9") ----------
   The stock header renders only a back button and the bar inside a
   display:table container that already reserves ~120px. Lay it out as a flex
   row so the counter each step injects sits inline to the right of the bar,
   as in the Figma. Steps inject .sco-stepcount themselves — the renderer has
   no counter element and exposes no per-route hook for pure CSS. */
body .progress-bar-container {
  display: flex !important;
  align-items: center;
  gap: 16px;
}

/* flex-basis 0 (not auto) + an absolutely positioned fill: otherwise the
   fill's percentage width feeds back into the track's content-based flex
   sizing and the track visibly shrinks as the percentage grows. */
body .progress_bar_segmented {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  width: auto !important;
  margin: 0 !important;
  position: relative !important;
}

.sco-stepcount {
  flex: 0 0 auto;
  font-family: var(--sco-font-body);
  font-size: 14px;
  line-height: 1;
  color: var(--sco-muted);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .sco-stepcount { font-size: 12px; }
}

/* ============================================================
   checkout-v2 (renderer-owned page)
   Only reachable via CSS — its markup, copy and field order are fixed.
   The renderer ships a 2-column desktop layout with the order summary on
   the right; the Figma is a single 566px column with the summary on top.
   ============================================================ */

/* Layout is NOT set here. The checkout step's `layout: "summary-top"` prop
   is the supported mechanism (renderer ships .checkout-layout-summary-top:
   grid-template-columns:1fr, .checkout_right{order:-1}, 600px centred inners).
   The !important overrides that used to live here MASKED it. Checkout skin
   now lives in the step's customCss, injected as a scoped <style>. */

/* ---------- Typography ---------- */
body .checkout h1,
body .checkout h2,
body .checkout h3,
body .checkout .medium {
  font-family: var(--sco-font-head) !important;
  color: var(--sco-text) !important;
  letter-spacing: 0;
}

body .checkout h2 { font-size: 20px !important; font-weight: 700 !important; }
body .checkout h3 { font-size: 16px !important; font-weight: 700 !important; }
body .checkout .indigo { color: var(--sco-text) !important; }
body .checkout, body .checkout p, body .checkout label, body .checkout span {
  font-family: var(--sco-font-body);
}

/* ---------- Cards (order summary, need-help) ---------- */
body .checkout_right > div,
body .checkout .order-summary,
body .checkout .need-help {
  border-radius: var(--sco-radius) !important;
  border: 1px solid var(--sco-border) !important;
  background: #fff !important;
  box-shadow: none !important;
}

/* ---------- Inputs ---------- */
body .checkout input:not([type='checkbox']):not([type='radio']),
body .checkout select,
body .checkout .field_valid {
  border-radius: var(--sco-radius) !important;
  border: 1px solid var(--sco-border) !important;
  background: #fff !important;
  color: var(--sco-text) !important;
  font-family: var(--sco-font-body) !important;
  font-size: 16px !important;
  box-shadow: none !important;
}

body .checkout input:focus,
body .checkout select:focus {
  border-color: var(--primary) !important;
  outline: none !important;
}

/* ---------- Primary CTA ---------- */
body .checkout .button_complete_purchase {
  background: var(--primary) !important;
  border: 0 !important;
  border-radius: var(--sco-pill) !important;
  color: #fff !important;
  font-family: var(--sco-font-body) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}

body .checkout .button_complete_purchase.button_disabled {
  background: var(--primary) !important;
  opacity: 0.4 !important;
}

/* ---------- Alerts ----------
   Recoloured to the brand palette. The subscription-consent block stays
   visually prominent on purpose: it is a required billing consent, not
   decoration, so it is restyled rather than de-emphasised. */
body .checkout .alert {
  border-radius: var(--sco-radius) !important;
  font-size: 14px !important;
}

body .checkout .subscription-consent-container,
body .checkout .subscription-agreement {
  border-radius: var(--sco-radius) !important;
}

body .checkout .consent-header {
  border-radius: var(--sco-radius) var(--sco-radius) 0 0 !important;
  font-family: var(--sco-font-body) !important;
}

/* ---------- Hyperswitch payment element wrapper ---------- */
body .checkout #payment-element,
body .checkout .payment-element,
body .checkout iframe {
  border-radius: var(--sco-radius) !important;
}
/* placeholder-noop */

/* ---------- Figma icons (screen 7 nodes 33:456 / 33:460 / 33:464 / 33:470) ----------
   The trust row and the guarantee card carry Material Symbols in the design and
   were rendering as bare text. Delivered as background images on the existing
   elements so BOTH the plan screen and the shipping screen pick them up without
   either component restructuring its markup. Vector data is the real Figma
   export, inlined rather than linked because the Figma asset URLs expire in ~7
   days and this fleet has no dependable S3 upload path. */
.sco-trustrow span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.sco-trustrow span::before {
  content: '';
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
}
/* Free Overnight Shipping */
.sco-trustrow span:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%230362FE' d='M2.55767 12.235C2.22011 11.896 2.05133 11.4843 2.05133 11H1.12817V4.41033C1.12817 4.10344 1.23094 3.84722 1.4365 3.64167C1.64206 3.43611 1.89828 3.33333 2.20517 3.33333H11.0257V5.74367H12.5642L14.8718 8.84617V11H13.7948C13.7948 11.4843 13.6251 11.896 13.2855 12.235C12.9458 12.5741 12.5334 12.7437 12.0483 12.7437C11.5631 12.7437 11.1517 12.5741 10.8142 12.235C10.4765 11.896 10.3077 11.4843 10.3077 11H5.5385C5.5385 11.4872 5.36867 11.8996 5.029 12.2372C4.68944 12.5748 4.27706 12.7437 3.79183 12.7437C3.30672 12.7437 2.89533 12.5741 2.55767 12.235ZM4.55833 11.7635C4.76733 11.5545 4.87183 11.3 4.87183 11C4.87183 10.7 4.76733 10.4455 4.55833 10.2365C4.34933 10.0275 4.09483 9.923 3.79483 9.923C3.49483 9.923 3.24033 10.0275 3.03133 10.2365C2.82244 10.4455 2.718 10.7 2.718 11C2.718 11.3 2.82244 11.5545 3.03133 11.7635C3.24033 11.9725 3.49483 12.077 3.79483 12.077C4.09483 12.077 4.34933 11.9725 4.55833 11.7635ZM1.79483 10.3333H2.22567C2.32056 10.0393 2.51372 9.78633 2.80517 9.57433C3.09661 9.36233 3.4265 9.25633 3.79483 9.25633C4.14617 9.25633 4.47183 9.36022 4.77183 9.568C5.07183 9.77567 5.26928 10.0308 5.36417 10.3333H10.359V4H2.20517C2.10261 4 2.00856 4.04272 1.923 4.12817C1.83756 4.21361 1.79483 4.30767 1.79483 4.41033V10.3333ZM12.8147 11.7635C13.0237 11.5545 13.1282 11.3 13.1282 11C13.1282 10.7 13.0237 10.4455 12.8147 10.2365C12.6058 10.0275 12.3513 9.923 12.0513 9.923C11.7513 9.923 11.4968 10.0275 11.2878 10.2365C11.0788 10.4455 10.9743 10.7 10.9743 11C10.9743 11.3 11.0788 11.5545 11.2878 11.7635C11.4968 11.9725 11.7513 12.077 12.0513 12.077C12.3513 12.077 12.6058 11.9725 12.8147 11.7635ZM11.0257 9H14.1667L12.2052 6.41033H11.0257V9Z'/%3E%3C/svg%3E"); }
/* No hidden fees */
.sco-trustrow span:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%230362FE' d='M7.65633 12.4103H8.31033V11.6282C8.78889 11.5881 9.24739 11.4163 9.68583 11.1128C10.1244 10.8094 10.3437 10.3384 10.3437 9.7C10.3437 9.23333 10.2018 8.83544 9.918 8.50633C9.63422 8.17733 9.09233 7.86839 8.29233 7.5795C7.55722 7.32306 7.08756 7.10294 6.88333 6.91917C6.67911 6.7355 6.577 6.47356 6.577 6.13333C6.577 5.79311 6.70967 5.50978 6.975 5.28333C7.24033 5.05689 7.59311 4.94367 8.03333 4.94367C8.37178 4.94367 8.65383 5.02122 8.8795 5.17633C9.10517 5.33144 9.28806 5.52822 9.42817 5.76667L10.0077 5.5385C9.85122 5.21794 9.62194 4.94956 9.31983 4.73333C9.01772 4.51711 8.69233 4.39661 8.34367 4.37183V3.58967H7.68967V4.37183C7.10856 4.46839 6.66883 4.68506 6.3705 5.02183C6.07217 5.35861 5.923 5.72911 5.923 6.13333C5.923 6.61278 6.07367 6.99656 6.375 7.28467C6.67633 7.57267 7.18467 7.84617 7.9 8.10517C8.61711 8.36928 9.09894 8.60772 9.3455 8.8205C9.59206 9.03328 9.71533 9.32644 9.71533 9.7C9.71533 10.1692 9.54422 10.5071 9.202 10.7135C8.85967 10.9198 8.49233 11.023 8.1 11.023C7.71622 11.023 7.36983 10.9113 7.06083 10.6878C6.75194 10.4643 6.50517 10.1461 6.3205 9.73333L5.73333 9.98717C5.92311 10.4436 6.17761 10.7994 6.49683 11.0545C6.81606 11.3096 7.20256 11.4897 7.65633 11.5948V12.4103ZM8 14C7.17178 14 6.39272 13.8421 5.66283 13.5263C4.93294 13.2104 4.29789 12.7824 3.75767 12.2423C3.21756 11.7021 2.78956 11.0671 2.47367 10.3372C2.15789 9.60728 2 8.82822 2 8C2 7.17178 2.15789 6.39272 2.47367 5.66283C2.78956 4.93294 3.21756 4.29789 3.75767 3.75767C4.29789 3.21756 4.93294 2.78956 5.66283 2.47367C6.39272 2.15789 7.17178 2 8 2C8.82822 2 9.60728 2.15789 10.3372 2.47367C11.0671 2.78956 11.7021 3.21756 12.2423 3.75767C12.7824 4.29789 13.2104 4.93294 13.5263 5.66283C13.8421 6.39272 14 7.17178 14 8C14 8.82822 13.8421 9.60728 13.5263 10.3372C13.2104 11.0671 12.7824 11.7021 12.2423 12.2423C11.7021 12.7824 11.0671 13.2104 10.3372 13.5263C9.60728 13.8421 8.82822 14 8 14ZM8 13.3333C9.48889 13.3333 10.75 12.8167 11.7833 11.7833C12.8167 10.75 13.3333 9.48889 13.3333 8C13.3333 6.51111 12.8167 5.25 11.7833 4.21667C10.75 3.18333 9.48889 2.66667 8 2.66667C6.51111 2.66667 5.25 3.18333 4.21667 4.21667C3.18333 5.25 2.66667 6.51111 2.66667 8C2.66667 9.48889 3.18333 10.75 4.21667 11.7833C5.25 12.8167 6.51111 13.3333 8 13.3333Z'/%3E%3C/svg%3E"); }
/* Cancel anytime */
.sco-trustrow span:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%230362FE' d='M7.3 9.90517L10.6052 6.6L10.1295 6.12433L7.3 8.95383L5.87433 7.52817L5.39867 8.00383L7.3 9.90517ZM8 13.9743C6.66067 13.5769 5.54806 12.7656 4.66217 11.5403C3.77628 10.3151 3.33333 8.935 3.33333 7.4V3.79483L8 2.05133L12.6667 3.79483V7.4C12.6667 8.935 12.2237 10.3151 11.3378 11.5403C10.4519 12.7656 9.33933 13.5769 8 13.9743ZM8 13.2667C9.15556 12.9 10.1111 12.1667 10.8667 11.0667C11.6222 9.96667 12 8.74444 12 7.4V4.25L8 2.76283L4 4.25V7.4C4 8.74444 4.37778 9.96667 5.13333 11.0667C5.88889 12.1667 6.84444 12.9 8 13.2667Z'/%3E%3C/svg%3E"); }

.sco-guarantee__title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sco-guarantee__title::before {
  content: '';
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 32px 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='16' fill='%230362FE'/%3E%3Cpath fill='%23F4FAFA' d='M13.023 25.2308L11.3537 22.4155L8.177 21.7308L8.4885 18.4538L6.34625 16L8.4885 13.5462L8.177 10.2693L11.3537 9.5845L13.023 6.76925L16 8.027L18.977 6.76925L20.6462 9.5845L23.823 10.2693L23.5115 13.5462L25.6538 16L23.5115 18.4538L23.823 21.7308L20.6462 22.4155L18.977 25.2308L16 23.973L13.023 25.2308ZM13.45 23.95L16 22.8885L18.5615 23.95L20 21.55L22.75 20.9385L22.5 18.1L24.35 16L22.5 13.8885L22.75 11.05L20 10.45L18.55 8.05L16 9.1115L13.4385 8.05L12 10.45L9.25 11.05L9.5 13.8885L7.65 16L9.5 18.1L9.25 20.95L12 21.55L13.45 23.95ZM14.95 18.8578L19.9078 13.9L19.2 13.1807L14.95 17.4308L12.8 15.2923L12.0922 16L14.95 18.8578Z'/%3E%3C/svg%3E");
}


/* ---------- Page background: #F4FAFA everywhere ----------
   The theme already sets `body { background: var(--sco-bg) }`, but stock
   default-theme.css paints #FFFFFA !important on the step wrapper and on the
   loading overlay, and it is NEVER disabled in production: [slug]/layout.tsx
   disables it by querying link[href*="default-theme"], while Next bundles that
   CSS into a hash-named stylesheet (/_next/static/css/<hash>.css), so the
   selector matches nothing and the stock rules keep applying. Beating an
   !important needs higher specificity, hence the `body ` prefix. */
html,
body {
  background: var(--sco-bg);
}
body .layout-wrapper.background-gradient-light,
body .loading-overlay,
body .choose_page,
body .checkout_page {
  background: var(--sco-bg) !important;
}


/* ---------- Address autocomplete dropdown (address screen) ----------
   The sandbox cannot import the shared GoogleAddressAutocomplete component, so
   the address screen calls /intake/api/address/autocomplete itself and renders
   its own list. Styled to match .sco-field. */
.sco-autocomplete {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  margin: 0;
  padding: 4px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--sco-border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(12, 38, 90, 0.12);
  max-height: 280px;
  overflow-y: auto;
}
.sco-autocomplete__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  font-family: var(--sco-font-body);
}
.sco-autocomplete__item:hover,
.sco-autocomplete__item:focus {
  background: rgba(3, 98, 254, 0.08);
}
.sco-autocomplete__main {
  display: block;
  font-size: 14px;
  color: var(--sco-text);
}
.sco-autocomplete__sub {
  display: block;
  font-size: 12px;
  color: var(--sco-muted);
  margin-top: 2px;
}


/* ---------- Checkout: rebuilt order-summary module (Figma node 33:611) ----------
   The what's-included list now lives INSIDE the summary card instead of a second
   card in the `help` zone, and uses the real 24px Figma check (tinted disc, blue
   tick) rather than the CSS-drawn solid disc with a white tick. */
.sco-sum-included {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sco-sum-inc {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  line-height: 1.35;
  color: rgba(0, 0, 0, 0.5);
  text-align: left;
}
.sco-sum-check {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  display: block;
}
/* The help zone is no longer populated; don't leave an empty bordered card. */
.checkout-zone-help:empty { display: none !important; }

/* Checkout chrome (logo + progress + "9 of 9"), rendered by the
   checkout-header zone slot because the (static) group has no layout. */
.sco-checkout-chrome { margin-bottom: 8px; }
.sco-checkout-chrome .progress-bar-container { margin-bottom: 16px; }


/* ---------- Checkout: countdown timer removed ----------
   `.checkout_timer` is the 15-minute "Time remaining" urgency banner. It renders
   only when paymentConfig.requiresCardForm. It is purely decorative here: the
   controller's effect just decrements a counter and stops at zero — nothing
   fires on expiry and nothing gates on it — so hiding it changes no behaviour. */
.checkout_page .checkout_timer { display: none !important; }


/* ---------- Checkout: "All transactions are secure and encrypted." ----------
   Renderer markup is <div class="alert_rounded alert_green"><i class="fas fa-lock"/>
   <span>…</span></div> (CheckoutClassicView:296-299). The stock alert_green is a
   loud green notification box, which is the only green on an otherwise blue page.
   Restyle it as a quiet blue-tinted row to match the Figma's treatment. Needs
   !important to beat the stock alert colours. */
body .checkout .alert_rounded.alert_green {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 12px 16px;
  border: 0 !important;
  border-radius: 12px !important;
  background: rgba(3, 98, 254, 0.08) !important;
  color: var(--primary) !important;
  font-family: var(--sco-font-body) !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  text-align: left;
}
body .checkout .alert_rounded.alert_green i {
  color: var(--primary) !important;
  font-size: 12px;
  margin: 0 !important;
}
body .checkout .alert_rounded.alert_green span { color: var(--primary) !important; }


/* ---------- Dosage-match mode (used by /glp1-dosage) ----------
   HISTORY: this sheet was originally owned by /glp1-v2 and served to BOTH funnels,
   because copy_intake preserved themeCssFile verbatim when /glp1-dosage was cloned.
   /glp1-v2 was DELETED on 2026-08-27, which left /glp1-dosage depending on a theme
   keyed to an intake id that no longer existed: the renderer still served it (theme
   documents outlive their intake), but edit_intake_theme 404s because it addresses
   themes through the intake, so the stylesheet had become read-only.
   Transferred 2026-08-27 — this sheet is now owned by /glp1-dosage itself
   (/intake/api/themes/6a7e39a3c7bb67f30302912b) and is no longer shared with anything.
   The old theme document is left in place, orphaned and unreferenced. */
.sco-dosemode {
  align-items: flex-start;
  text-align: left;
  padding: 20px 24px;
}
.sco-dosemode__title {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: inherit;
  line-height: 1.25;
}
.sco-dosemode__hint {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--sco-muted);
}
.sco-option--selected .sco-dosemode__hint { color: rgba(0, 0, 0, 0.6); }

/* Section labels inside the customize block. .sco-subheading (24px) is sized for a
   screen title and reads as a second H1 when stacked twice mid-page, so use a
   quieter label here. */
.sco-dose-label {
  font-family: var(--sco-font-head);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--sco-text);
  margin: 0;
}

/* Brand / dose grids. The brand cards carry a title + molecule, the dose chips are
   a single value, so they get different vertical rhythm. */
.sco-option--compact {
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.3;
}
.sco-option--compact .sco-dosemode__title { font-size: 15px; }
.sco-option--compact .sco-dosemode__hint {
  margin-top: 2px;
  font-size: 12px;
  text-transform: capitalize;
}
.sco-option--center {
  justify-content: center;
  text-align: center;
  font-weight: 500;
}

/* Confirmation line once a dose resolves to a level. */
.sco-dose-resolved {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(3, 98, 254, 0.08);
  font-size: 13px;
  line-height: 1.4;
  color: var(--primary);
  text-align: left;
}

@media (max-width: 380px) {
  .sco-option--compact { padding: 12px; font-size: 14px; }
}


/* Dose resolved to a SKU that is not sellable in the patient's state. */
.sco-dose-resolved--warn {
  background: rgba(178, 106, 0, 0.1);
  color: #8a5200;
}


/* ============================================================
   MOBILE — match the Figma "Mobile - Screen 1…9" frames
   ------------------------------------------------------------
   Every mobile frame is 430x932 and shares one grid:
     · 24px page gutter        (content column 382 of 430)
     · 168px header block:  48 top -> logo 195x24 -> 24 gap ->
       progress row 24 tall  [24px chevron | 16 | bar 8px | 16 | "N of 9"]
     · 64px from the progress row down to the first content element
     · 60px option / accordion rows, 64px primary button

   What was wrong on device (measured at a real 402x874 iPhone viewport):

   1. THREE stacked horizontal paddings. The renderer nests
      .layout-wrapper (7.5px) > .px-4 (15px) > .sco-step (16px) = 39px per
      side, so the content column was 325px instead of 354px. That alone
      wrapped the H1 onto two lines on screens the design fits on one.
   2. The back button is position:absolute at top:30/left:30, so it floated
      over the logo instead of sitting inline at the left of the progress
      bar, and the bar started at the page edge rather than after it.
   3. The progress row hugged the screen edges (8px) instead of the 24px
      gutter, and sat 30px above the content instead of 64px.
   4. The logo rendered at 160x20 (max-w-[160px]/max-h-[36px] + object-contain
      on a ~8:1 wordmark) against the design's 195x24.
   5. .sco-option / .sco-accordion__head are padded 24px, which with the
      16px/1.3 line box makes a 71px row against the design's 60px.

   Desktop is untouched — every rule below is inside the 640px query, and the
   desktop screens were signed off against the 1440px frames.
   ============================================================ */
@media (max-width: 640px) {
  /* --- 1. Collapse to a single 24px gutter --------------------------- */
  body .layout-wrapper {
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body .layout-wrapper > .px-4 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .sco-step { padding: 0 var(--sco-gutter) 32px; }

  /* --- 2. Header: 48px above a 195x24 wordmark ---------------------- */
  body .intake-header .container-inner {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 48px var(--sco-gutter) 0 !important;
  }
  body .intake-header .logo-wrapper {
    width: 195px !important;
    height: 24px !important;
  }
  body .intake-header .logo-image {
    max-width: 195px !important;
    max-height: 24px !important;
  }

  /* --- 3. Progress row --------------------------------------------- */
  body .progress-bar-container {
    width: 100% !important;
    max-width: none !important;
    padding: 0 var(--sco-gutter) !important;
    margin: 24px 0 64px !important;
    gap: 16px;
  }

  /* Pull the back button back into the flex row. The design chevron is the
     Material chevron_backward at wght200 — a thin stroke — where the
     renderer ships a solid Font Awesome fa-arrow-left, so the glyph is
     suppressed and the real icon drawn as a background. */
  body .back-button-wrapper {
    position: static !important;
    flex: 0 0 24px;
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    align-items: center;
    justify-content: center;
  }
  body .back-button {
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    /* Exact Figma asset: Material chevron_backward 24dp wght200, downloaded
       from node 33:25 rather than hand-drawn as a stroke. It is a FILLED path. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000000' fill-opacity='0.7' d='M14 17.3078L8.69225 12L14 6.69225L14.7078 7.4L10.1078 12L14.7078 16.6L14 17.3078Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
  }
  body .back-button::before { content: none !important; }

  /* Checkout draws its own chrome inside the page body (the (static) route
     group has no layout), so it opts out of the standalone-header spacing. */
  body .sco-checkout-chrome { margin-bottom: 0 !important; }
  body .sco-checkout-chrome .progress-bar-container {
    padding: 0 !important;
    /* Same rhythm as every other screen: 24px under the logo, 64px down to the
       first content element (here the "Checkout" title). */
    margin: 24px 0 64px !important;
  }
  body .checkout_page .sco-co-title { margin-top: 0 !important; }

  /* --- 4. 60px rows ------------------------------------------------- */
  .sco-option { padding: 18px 24px; }
  .sco-accordion__head { padding: 18px 24px; }
}


/* ============================================================
   Heading sizes — the stock sheet outranks the theme
   ------------------------------------------------------------
   intake-renderer's own stylesheet ships bare-element rules:
       h1 { font-size:27px!important; line-height:33px!important }
       h2 { font-size:23px!important; ... }
       h3 { font-size:20px!important; ... }
   An !important element rule beats a non-important class rule (and even an
   inline style), so .sco-heading's 32px/24px has NEVER applied — every
   screen title in this funnel has silently rendered at 27px, mobile and
   desktop alike. Verified by disabling that sheet in the browser: the
   heading drops from 27px to 24px.

   Sampling the Figma mobile frames back-computes a 24px title (the natural
   one-line width of "What's your weight loss goal?" is 332px in the mock and
   373px at 27px on the page — 27 x 332/373 = 24.0). At 27px it no longer fits
   the 354px column, which is why titles wrapped to two lines on device.

   Scoped to mobile deliberately: the desktop frames call for 32px and are
   also being served 27px, but the desktop screens were signed off as-is, so
   that stays a reported finding rather than a silent change.
   ============================================================ */
@media (max-width: 640px) {
  /* Fluid: hits the design's 24px on every phone >=390px wide (iPhone 12..17
     and Pro Max), then scales down rather than wrapping on a 375 or 320 device.
     6.2vw x 402 = 24.9 -> clamps to 24 on an iPhone 17. */
  body .sco-heading {
    font-size: clamp(19px, 6.2vw, 24px) !important;
    line-height: 1.25 !important;
  }
  body .sco-subheading {
    font-size: clamp(17px, 5.2vw, 20px) !important;
    line-height: 1.25 !important;
  }

  /* The design's subtitle is ~14px, not 16 — at 16px it wraps to two lines
     on every screen that has one. */
  .sco-sub { font-size: clamp(13px, 3.6vw, 14px); margin-top: 12px; }

  /* Trust row: three items measure 146 + 98 + 100 = 344px in the 382px
     design column. At 402px device width the column is 354px, so with 16px
     gaps (377px total) it wrapped to three stacked lines instead of one row.
     11px x 402/430 = 10.3px is the proportional size for this viewport. */
  /* Measured, not guessed: each item is a 16px icon + 4px gap + its text, and
     the design's three items are 128/80/82px wide at 11px. Summed with the two
     inter-item gaps that is 360px at 402px wide against a 354px column, which is
     why 2.6vw/3vw still wrapped to three lines. 2.45vw/2.6vw lands it at ~325px
     and keeps one row down to ~360px devices; below that it wraps to two, which
     is the intended degradation. */
  .sco-trustrow {
    gap: clamp(6px, 2.6vw, 16px);
    font-size: clamp(9px, 2.45vw, 11px);
  }
  /* Never break an item mid-phrase; below ~360px the row wraps to two lines,
     which is the acceptable degradation. */
  .sco-trustrow span { white-space: nowrap; }
}


/* ============================================================
   Type scale — desktop restore + fluid mobile
   ------------------------------------------------------------
   Guarded by min-width so it cannot fight the mobile block above regardless
   of source order. See the note there: intake-renderer's stock sheet sets
   h1/h2/h3 sizes with !important, so every heading rule needs `body` +
   !important to land at all. The desktop frames call for 32px; the page has
   been serving the stock 27px since launch.
   ============================================================ */
@media (min-width: 641px) {
  body .sco-heading {
    font-size: 32px !important;
    line-height: 1.15 !important;
  }
  body .sco-subheading {
    font-size: 24px !important;
    line-height: 1.2 !important;
  }
}

/* ---------- Remaining fluid sizes (mobile) ----------
   Anything whose fixed px size overflows the column on a narrow phone. The
   upper clamp bound is always the design value, so nothing changes at 402+. */
@media (max-width: 640px) {
  :root {
    /* 6vw x 402 = 24.1 -> the design's 24px gutter on an iPhone 17, easing to
       ~19px on a 320px SE where a fixed 24 costs 15% of the column. */
    --sco-gutter: clamp(16px, 6vw, 24px);
  }

  .sco-option,
  .sco-accordion__head { font-size: clamp(14px, 4vw, 16px); }

  .sco-btn { font-size: clamp(15px, 4vw, 16px); }

  /* Plan cards: price + "/mo" + SAVE chip share one row and are the first
     thing to collide on a narrow screen. */
  .sco-plan__total { font-size: clamp(19px, 5.5vw, 22px); }
  .sco-plan__name { font-size: clamp(15px, 4vw, 16px); }
  .sco-plan__subtitle { font-size: clamp(11px, 3vw, 12px); }

  /* 58px BMI readout is 18% of a 320px screen. */
  .sco-bmi__value { font-size: clamp(44px, 14vw, 58px); }

  .sco-field__input { font-size: 16px; } /* keep 16px: iOS zooms the page below it */
}

/* ============================================================
   Checkout — mobile gutter
   ------------------------------------------------------------
   checkout-v2 is a separate page from the intake shell, so it never picked up
   the 24px gutter: its chrome sits in a `w-[95%]` .section_inner (=10px at
   402px wide) and .sco-co-title / .sco-sum are `max-width:566px; margin:0 auto`
   with no padding, so at 402px the title rendered flush against the screen edge.
   ============================================================ */
@media (max-width: 640px) {
  body .sco-checkout-chrome .section_inner {
    width: 100% !important;
    max-width: none !important;
    padding: 0 var(--sco-gutter) !important;
    margin: 0 !important;
  }
  body .checkout_page .sco-co-title {
    font-size: clamp(24px, 7vw, 32px);
    padding: 0 var(--sco-gutter);
  }
  /* Both columns are `width:95%; max-width:600px; margin:0 auto` from the stock
     checkout sheet, which is a ~10px gutter at 402px against the design's 24.
     The declaration wins over a plain class rule, so this needs !important
     (the same fight as the h1 sizes above). */
  body .checkout_page .checkout_left_inner,
  body .checkout_page .checkout_right_inner {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: var(--sco-gutter) !important;
    padding-right: var(--sco-gutter) !important;
  }
}


/* ============================================================
   Checkout — the page's OWN nav bar
   ------------------------------------------------------------
   checkout-v2 renders `.section.intake_topnav.checkout_nav` with the stock
   #FFFFFA cream (the same never-disabled default-theme colour documented at the
   page-background block above), so the logo sat on a cream band against the
   #F4FAFA page. Its logo is a bare `.logo > img` — NOT `.logo-image` — so the
   header rules in the mobile block never reached it, and it rendered 296x60
   against the design's 195x24.

   The chrome slot's own `.intake-header` only renders when
   config.brand.logoUrl is set; when it isn't, this nav is the only logo on the
   page, which is why it has to be styled rather than hidden.
   ============================================================ */
/* The checkout sheet declares
     .checkout_page .intake_topnav.checkout_nav { background:#fffffa!important }
   which is (0,3,0). `body .checkout_page .checkout_nav` is only (0,2,1) and
   loses even with !important, so the selector has to carry both classes. */
html body .checkout_page .section.intake_topnav.checkout_nav {
  background: var(--sco-bg) !important;
  background-color: var(--sco-bg) !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* Stock rule is `.logo { display:table; margin:auto }`, which shrink-wraps and
   left-seats the scaled mark. Give it an explicit centred 195px box so the
   scale below pivots on the real centre. */
body .checkout_page .checkout_nav .logo {
  display: block !important;
  width: 195px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body .checkout_page .checkout_nav .logo img {
  width: auto !important;
  height: auto !important;
  max-width: 195px !important;
  max-height: 24px !important;
  object-fit: contain;
}

@media (max-width: 640px) {
  body .checkout_page .checkout_nav .section_inner {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 48px var(--sco-gutter) 0 !important;
  }
}


/* ============================================================
   DESKTOP — match the Figma "Screen 1…9" frames (1440x1024)
   ------------------------------------------------------------
   Everything the mobile block fixed was scoped to <=640px, so the 1440 frames
   were still off in exactly the same ways. Measured live at 1440 against the
   design:

     content column   design x=437 w=566   was x=453 w=534  (.sco-step keeps a
                                                             16px inset inside
                                                             its own max-w-566)
     logo             195x24 at y=48       was 160x36 at y=23
     progress row     566 wide, y=96, h24  was 600 wide at x=420, y=104, h14
     back button      inline, 24x24        was absolute at (30,30), 40x34
     content top      y=200                was y=148
     option row       566x60               was 534x71

   The design's desktop column is a flush 566px — no gutter — where mobile is
   a 24px gutter, so the two breakpoints genuinely differ and this is a separate
   block rather than shared rules. The vertical rhythm differs too: 80px from
   the progress row to the first content element here, 64px on mobile.
   ============================================================ */
@media (min-width: 641px) {
  body .layout-wrapper { padding-top: 0 !important; }

  body .intake-header .container-inner {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 48px 0 0 !important;
  }
  body .intake-header .logo-wrapper {
    width: 195px !important;
    height: 24px !important;
  }
  body .intake-header .logo-image {
    max-width: 195px !important;
    max-height: 24px !important;
  }

  body .progress-bar-container {
    display: flex !important;
    align-items: center;
    gap: 16px;
    width: 100% !important;
    max-width: 566px !important;
    margin: 24px auto 80px !important;
    padding: 0 !important;
  }

  /* Same absolute-positioned back button as mobile: pull it into the row and
     swap the solid fa-arrow-left for the design's thin chevron_backward. */
  body .back-button-wrapper {
    position: static !important;
    flex: 0 0 24px;
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    align-items: center;
    justify-content: center;
  }
  body .back-button {
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000000' fill-opacity='0.7' d='M14 17.3078L8.69225 12L14 6.69225L14.7078 7.4L10.1078 12L14.7078 16.6L14 17.3078Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
  }
  body .back-button::before { content: none !important; }

  /* The column is flush 566 in the design; .sco-step's own 16px inset was
     narrowing every card to 534. */
  .sco-step { padding-left: 0; padding-right: 0; }

  /* 60px rows, as on mobile (design is 60 in both breakpoints). */
  .sco-option,
  .sco-accordion__head { padding: 18px 24px; }

  /* Checkout chrome: same 48 -> logo -> 24 -> progress -> 80 rhythm. */
  body .sco-checkout-chrome .progress-bar-container {
    margin: 24px auto 80px !important;
  }
  body .checkout_page .checkout_nav .section_inner {
    max-width: 566px !important;
    padding: 48px 0 0 !important;
  }
}


/* ============================================================
   Colour audit fixes — inherited stock --darkgray
   ------------------------------------------------------------
   Scanned every rendered element's computed colour against the Figma variable
   set (black #000000, primary-2 #0362fe, white #f4fafa, secondary-2 #d6e7ea,
   secondary-3 #4298fb, White #ffffff) and found three places still inheriting
   the renderer's --darkgray #222E33, which is not in the palette:

     .sco-plan__name / __total / __permonth  — the plan name and the PRICE on
       every unselected plan card, i.e. the most prominent text on screen 7.
       .sco-plan never declared a colour, and .sco-plan--selected only fixed it
       for the dark card.
     .sco-co-title                            — the checkout "Checkout" title.
     the checkout body text (e.g. "Billing is same as shipping information").

   Everything else on goal / conditions / choose / checkout is already on
   palette — no off-palette visible text or borders remain.
   ============================================================ */
.sco-plan { color: var(--sco-text); }
.sco-plan--selected { color: #fff; }

body .checkout_page .sco-co-title { color: var(--sco-text) !important; }
body .checkout_page .checkout { color: var(--sco-text); }


/* ============================================================
   Plan card internal rhythm (Figma mobile 33:1130, desktop 33:1194)
   ------------------------------------------------------------
   The design card is padding 24 with content laid out as:
     head        name row 16 tall, subtitle at +27  (head frame = 37)
     pricing     at y=85  -> a 48px gap below the head
     billing     at +29 from the price row (17 tall) -> 12px under it
     save link   at +53
   which sums to 24+37+48+41+24 = 174 for the 6-month card and 200 for the
   monthly card (extra save-link row) — exactly the frame heights.

   Live was measured at pricing y=91 against the design's 109, i.e. the gap
   under the subtitle was 16px where the design has 48. The browser's line
   boxes are taller than Figma's glyph-bound text nodes, so the margin is set
   to land the pricing block at the design's y rather than to copy 48 verbatim.
   ============================================================ */
.sco-radio {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
}
.sco-plan__pricing { margin-top: 40px; }
.sco-plan__billing { margin-top: 4px; }


/* ============================================================
   Checkout desktop — 566 column, not 600 (Figma Screen 9, 33:588)
   ------------------------------------------------------------
   Measured at 1440 against the frame:
     column      design 437..1003 (566)   was 415..1015 / 425..1025 (600)
     title y     200                      was 208  (.sco-checkout-chrome's 8px
                                                    bottom margin, only zeroed
                                                    in the mobile block)
     card top    255 (title block + 32)   was 281  (extra 20px padding-top on
                                                    .checkout_right_inner)
   The stock checkout sheet sizes both column inners at max-width:600px; the
   design's checkout column is the same 566 as every other screen.
   ============================================================ */
@media (min-width: 641px) {
  body .sco-checkout-chrome { margin-bottom: 0 !important; }

  body .checkout_page .checkout_left_inner,
  body .checkout_page .checkout_right_inner {
    max-width: 566px !important;
  }
  body .checkout_page .checkout_right_inner { padding-top: 0 !important; }
  body .checkout_page .sco-co-title { margin-bottom: 32px !important; }
}


/* Coupon row proportions. Figma 33:1349 splits the row 224 / 16 / 94 inside the
   334px card interior — the Apply button hugs its label. The stock .button is
   full-width inside its flex slot, so it rendered 148/148 against the input.
   CouponField sets gap:8 as an inline style, which a plain rule cannot beat. */
/* .row.row_2 is display:GRID in the stock sheet, so CouponField's inline
   flex:1 on the input wrapper is inert and the two columns auto-size — the row
   filled only 230 of the 306px card interior. Switching it to flex makes the
   inline flex:1 work and lets the input take the remaining space. */
body .checkout_page .checkout_coupon_wrap .coupon-field .row_2 {
  display: flex !important;
  align-items: center;
  gap: 16px !important;
}
body .checkout_page .checkout_coupon_wrap .coupon-field .button {
  flex: 0 0 auto;
  width: auto !important;
}
/* CouponField's wrapper .row_item carries an inline flex:1, but the input
   inside it does not stretch, so the row only filled 230 of the 306px card
   interior. */
body .checkout_page .checkout_coupon_wrap .coupon-field input { width: 100%; }


/* ---------- Renderer's "Order Summary" jump chip ----------
   .checkout_summary_scroll is a stock shortcut that scrolls the page to an
   order summary sitting below or beside the form. With layout:"summary-top"
   the summary is already the first thing on the page, so it jumps to itself.
   It is also the only element still painting the stock indigo tint
   rgba(38,70,83,0.1), and the Figma has no such chip. */
body .checkout_page .checkout_summary_scroll { display: none !important; }


/* ============================================================
   Address fields — the design's empty state (Figma 33:1288)
   ------------------------------------------------------------
   The mock shows placeholder-only fields at 59px tall; the floating label only
   belongs there once a value exists. The step always rendered the label, so
   every empty field was 70px. The step now adds .sco-field--empty while the
   value is blank (a class rather than :placeholder-shown, because <select> has
   no placeholder and the State field needs the same treatment).

   19 + 19.2 line + 19 + 2 borders = 59.2 -> the design's 59.
   ============================================================ */
.sco-field--empty { padding-top: 19px; padding-bottom: 19px; }
.sco-field--empty .sco-field__label { display: none; }
.sco-field--empty .sco-field__input { color: rgba(0, 0, 0, 0.35); }
.sco-field--empty .sco-field__input:focus { color: var(--sco-text); }

/* Search affordance on the address line (Figma node 33:1318, Material search
   24dp wght200). .sco-field is already position:relative. */
.sco-field__icon {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.sco-field--search .sco-field__input { padding-right: 40px; }


/* ============================================================
   Logo — correcting for padding baked into the hosted asset
   ------------------------------------------------------------
   🔴 INTERIM. Delete this whole block once logos/scienceco/ hosts a tightly
   cropped mark, or this will render the logo oversized and offset.

   The Figma mark (node 33:768) is a 195x24 box whose glyphs fill it edge to
   edge. The hosted logos/scienceco/primary.svg is the SAME wordmark but its
   viewBox carries whitespace, so at a 24px box the glyphs render ~118x16 —
   about 40% small — which is why the header never matched the design.

   Measured by rasterising the asset at 1000px and taking the alpha bounding
   box: the glyphs occupy 91.00% of the width and 55.67% of the height, offset
   4.50% from the left and 22.17% from the top. So:
       box height 43.3px  -> glyph height 43.3 x 0.5567 = 24.1
       width auto (300:61) -> 212.9  -> glyph width 212.9 x 0.91 = 193.7
       shift left/up by the offsets to seat the glyphs in the 195x24 wrapper
   Glyph aspect differs from the Figma vector by 0.9% (8.05 vs 8.13), which is
   the limit of what scaling this file can achieve; the real fix is the asset.
   ============================================================ */
/* Scale rather than absolutely position: checkout_nav is position:sticky, and
   taking the logo out of flow made the nav shorter than its own logo, so the
   painted background stopped above it and scrolled content ran through the
   wordmark. A transform leaves layout (and therefore the nav's height and
   background) untouched.

   The whitespace is symmetric — glyphs span 4.50%..95.40% horizontally and
   22.17%..77.83% vertically — so a centre-origin scale needs no offsets.
   object-contain letterboxes the 4.918:1 file into the 195x24 box at 118x24,
   whose glyphs are 13.4px tall; 1/0.5567 = 1.796 takes them to 24. */
body .intake-header .logo-wrapper,
body .checkout_page .checkout_nav .logo {
  overflow: visible;
}
/* Explicit 195x24, NOT 100%: the checkout nav's .logo is display:table with no
   height, so a percentage height resolved to 0 and the mark vanished there. */
body .intake-header .logo-image,
body .checkout_page .checkout_nav .logo img {
  width: 195px !important;
  height: 24px !important;
  max-width: 195px !important;
  max-height: 24px !important;
  object-fit: contain;
  display: block;
  transform: scale(1.796);
}


/* The scaled wordmark overhangs its 24px box by ~10px; give the sticky checkout
   nav enough bottom padding to contain it so nothing scrolls through it. */
body .checkout_page .checkout_nav .section_inner { padding-bottom: 24px !important; }


/* ============================================================
   Screen 7 redesign — plan selection
   Figma: mobile "Mobile - Screen 7 (GR Edits)" 2099:3512
          desktop "Screen 7 (GR Edits)"        2099:3234
   ------------------------------------------------------------
   Replaces the navy selected-card treatment with the mint card, moves the
   three trust items INSIDE the selected card (the standalone trust row is
   hidden in both new frames), and adds the compare-at price / SAVE pill /
   per-month rail, the Klarna+Affirm installments row and the monthly card's
   cross-sell link.

   Vector data is the real Figma export inlined as a data URI, not hand-drawn:
   the Figma asset URLs expire in ~7 days and this fleet has no dependable S3
   upload path (see the note on the trust-row icons above).

   Everything below is appended after the earlier blocks deliberately — it
   restates rules those blocks also set (card radius, price size, chip colour)
   and wins on source order at equal specificity.
   ============================================================ */

/* ---------- Drug toggle (Figma 2099:3535 / 2099:3256) ---------- */
.sco-segmented { gap: 6px; padding: 8px; }
.sco-segmented__item {
  min-height: 44px;
  padding: 0 24px;
  font-family: var(--sco-font-head);
  font-size: 16px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.5);
}
.sco-segmented__item--active {
  background: var(--primary);
  color: #f4fafa;
  /* Figma drop-shadow stack on the active pill. */
  box-shadow: 0 0 0.5px rgba(0,0,0,0.04), 0 2px 1px rgba(0,0,0,0.04),
              0 4px 1px rgba(0,0,0,0.02), 0 7px 1.5px rgba(0,0,0,0.01);
}

/* ---------- Plan card shell ---------- */
.sco-plan {
  padding: 24px;
  border: 1px solid var(--sco-border);
  border-radius: 24px;
  background: transparent;
  color: var(--sco-text);
}
/* The design's selected card is a 2px border inside the same 24px inset, so
   the padding drops by the extra border width rather than the content shifting. */
.sco-plan--selected {
  padding: 22px;
  border-width: 2px;
  border-color: var(--sco-border);
  background: #ace6e3;
  color: #16233c;
}
.sco-plan:hover { border-color: var(--primary); }
.sco-plan--selected:hover { border-color: var(--sco-border); }

/* ---------- Head: radio + name + badge ---------- */
.sco-plan__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.sco-plan__name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sco-font-head);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
}

.sco-plan .sco-radio {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-right: 0;
  border: 1px solid rgba(0, 0, 0, 0.24);
  border-radius: 50%;
  background: transparent;
}
/* Selected: solid #16233C disc, not primary blue (Figma node 2099:3547). */
.sco-plan--selected .sco-radio {
  background: #16233c;
  border-color: #16233c;
  color: #f4fafa;
}

.sco-badge {
  padding: 6px 10px;
  border-radius: 100px;
  background: var(--primary);
  color: #f4fafa;
  font-family: var(--sco-font-body);
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
}

/* Subtitle is full-strength body colour in the new frames, not muted. The
   two-class overrides are needed because the original block set the selected
   card's subtitle/billing to rgba(255,255,255,.7) for the navy treatment,
   which outranks a single-class rule here. */
/* line-height 1.2 throughout the card, not the inherited 1.5: Figma's text
   nodes are cap-trimmed, so a browser default line box runs ~5px taller than
   the mock on every row and the card ends up ~30px too tall. */
.sco-plan__subtitle {
  margin-top: 11px;
  font-size: 14px;
  line-height: 1.2;
  color: inherit;
}
.sco-plan--selected .sco-plan__subtitle,
.sco-plan--selected .sco-plan__billing { color: inherit; }

/* ---------- Pricing rail ----------
   row-gap is 0 deliberately: the billing line and the cross-sell link are
   `flex: 1 0 100%` so they wrap onto their own flex ROW, and a shorthand `gap`
   would stack on top of their own margin-top — the design's 12px under the
   price rendered as 22px until this was split into column-gap only. */
.sco-plan__pricing {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 8px;
  row-gap: 0;
  margin-top: 24px;
}
/* The monthly card carries no benefits/installments block, so the design opens
   the gap under its subtitle to keep the card visually balanced (48 vs 24). */
.sco-plan--monthly .sco-plan__pricing { margin-top: 48px; }

.sco-plan__total {
  font-family: var(--sco-font-body);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.1;
}
/* "$139/" + "mo" — the slash belongs to the big number, the unit does not. */
.sco-plan__permo-unit { font-size: 14px; font-weight: 400; margin-left: 2px; }

.sco-plan__was {
  font-size: 14px;
  line-height: 1.2;
  text-decoration: line-through;
  opacity: 0.55;
}
.sco-plan__permonth { font-size: 14px; line-height: 1.2; opacity: 0.55; }

.sco-chip--save,
.sco-plan--selected .sco-chip--save {
  padding: 6px 10px;
  border-radius: 100px;
  background: var(--primary);
  color: #f4fafa;
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
}

.sco-plan__billing {
  flex: 1 0 100%;
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.2;
  color: inherit;
}

/* ---------- Monthly cross-sell link ---------- */
.sco-plan__upsell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 16px;
  color: var(--primary);
  text-decoration: underline;
}
.sco-plan__upsell::after {
  content: '';
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  background: no-repeat center / 16px 16px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 8H13M9.2 3.8L13.4 8L9.2 12.2' stroke='%230362FE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- Benefits (selected card only) ---------- */
.sco-plan__benefits { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.sco-plan__benefit { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1.2; }
.sco-plan__benefit::before {
  content: '';
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  background: no-repeat center / 20px 20px;
}
.sco-plan__benefit--ship::before   { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath d='M3.19709 15.294C2.77515 14.8702 2.56418 14.3556 2.56418 13.7502H1.41022V5.51312C1.41022 5.12951 1.53869 4.80923 1.79563 4.55229C2.05258 4.29534 2.37286 4.16687 2.75647 4.16687H13.7821V7.17979H15.7052L18.5898 11.0579V13.7502H17.2435C17.2435 14.3556 17.0313 14.8702 16.6069 15.294C16.1823 15.7178 15.6668 15.9298 15.0604 15.9298C14.4539 15.9298 13.9397 15.7178 13.5177 15.294C13.0956 14.8702 12.8846 14.3556 12.8846 13.7502H6.92313C6.92313 14.3592 6.71084 14.8747 6.28626 15.2967C5.86181 15.7187 5.34633 15.9298 4.7398 15.9298C4.13341 15.9298 3.61918 15.7178 3.19709 15.294ZM5.69793 14.7046C5.95918 14.4433 6.0898 14.1252 6.0898 13.7502C6.0898 13.3752 5.95918 13.0571 5.69793 12.7958C5.43668 12.5346 5.11855 12.404 4.74355 12.404C4.36855 12.404 4.05043 12.5346 3.78918 12.7958C3.52806 13.0571 3.39751 13.3752 3.39751 13.7502C3.39751 14.1252 3.52806 14.4433 3.78918 14.7046C4.05043 14.9658 4.36855 15.0965 4.74355 15.0965C5.11855 15.0965 5.43668 14.9658 5.69793 14.7046ZM2.24355 12.9169H2.78209C2.9007 12.5494 3.14216 12.2331 3.50647 11.9681C3.87077 11.7031 4.28313 11.5706 4.74355 11.5706C5.18272 11.5706 5.5898 11.7005 5.9648 11.9602C6.3398 12.2198 6.58661 12.5387 6.70522 12.9169H12.9488V5.0002H2.75647C2.62827 5.0002 2.5107 5.05361 2.40376 5.16041C2.29695 5.26722 2.24355 5.38479 2.24355 5.51312V12.9169ZM16.0183 14.7046C16.2796 14.4433 16.4102 14.1252 16.4102 13.7502C16.4102 13.3752 16.2796 13.0571 16.0183 12.7958C15.7572 12.5346 15.4392 12.404 15.0642 12.404C14.6892 12.404 14.3711 12.5346 14.1098 12.7958C13.8486 13.0571 13.7179 13.3752 13.7179 13.7502C13.7179 14.1252 13.8486 14.4433 14.1098 14.7046C14.3711 14.9658 14.6892 15.0965 15.0642 15.0965C15.4392 15.0965 15.7572 14.9658 16.0183 14.7046ZM13.7821 11.2502H17.7083L15.2565 8.01312H13.7821V11.2502Z' fill='%2316233C'/%3E%3C/g%3E%3C/svg%3E"); }
.sco-plan__benefit--fees::before   { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath d='M9.57042 15.5129H10.3879V14.5352C10.9861 14.4851 11.5592 14.2703 12.1073 13.891C12.6555 13.5117 12.9296 12.9231 12.9296 12.125C12.9296 11.5417 12.7522 11.0443 12.3975 10.6329C12.0428 10.2217 11.3654 9.83549 10.3654 9.47437C9.44653 9.15382 8.85944 8.87868 8.60417 8.64896C8.34889 8.41938 8.22125 8.09194 8.22125 7.66667C8.22125 7.24139 8.38708 6.88722 8.71875 6.60417C9.05042 6.32111 9.49139 6.17958 10.0417 6.17958C10.4647 6.17958 10.8173 6.27653 11.0994 6.47042C11.3815 6.66431 11.6101 6.91028 11.7852 7.20833L12.5096 6.92313C12.314 6.52243 12.0274 6.18694 11.6498 5.91667C11.2722 5.64639 10.8654 5.49576 10.4296 5.46479V4.48708H9.61208V5.46479C8.88569 5.58549 8.33604 5.85632 7.96313 6.27729C7.59021 6.69826 7.40375 7.16139 7.40375 7.66667C7.40375 8.26597 7.59208 8.74569 7.96875 9.10583C8.34542 9.46583 8.98083 9.80771 9.875 10.1315C10.7714 10.4616 11.3737 10.7597 11.6819 11.0256C11.9901 11.2916 12.1442 11.6581 12.1442 12.125C12.1442 12.7115 11.9303 13.1338 11.5025 13.3919C11.0746 13.6498 10.6154 13.7788 10.125 13.7788C9.64528 13.7788 9.21229 13.6391 8.82604 13.3598C8.43993 13.0803 8.13146 12.6826 7.90063 12.1667L7.16667 12.484C7.40389 13.0545 7.72201 13.4992 8.12104 13.8181C8.52007 14.137 9.00319 14.3622 9.57042 14.4935V15.5129ZM10 17.5C8.96472 17.5 7.9909 17.3026 7.07854 16.9079C6.16618 16.5131 5.37236 15.9781 4.69708 15.3029C4.02194 14.6276 3.48694 13.8338 3.09208 12.9215C2.69736 12.0091 2.5 11.0353 2.5 10C2.5 8.96472 2.69736 7.9909 3.09208 7.07854C3.48694 6.16618 4.02194 5.37236 4.69708 4.69708C5.37236 4.02194 6.16618 3.48694 7.07854 3.09208C7.9909 2.69736 8.96472 2.5 10 2.5C11.0353 2.5 12.0091 2.69736 12.9215 3.09208C13.8338 3.48694 14.6276 4.02194 15.3029 4.69708C15.9781 5.37236 16.5131 6.16618 16.9079 7.07854C17.3026 7.9909 17.5 8.96472 17.5 10C17.5 11.0353 17.3026 12.0091 16.9079 12.9215C16.5131 13.8338 15.9781 14.6276 15.3029 15.3029C14.6276 15.9781 13.8338 16.5131 12.9215 16.9079C12.0091 17.3026 11.0353 17.5 10 17.5ZM10 16.6667C11.8611 16.6667 13.4375 16.0208 14.7292 14.7292C16.0208 13.4375 16.6667 11.8611 16.6667 10C16.6667 8.13889 16.0208 6.5625 14.7292 5.27083C13.4375 3.97917 11.8611 3.33333 10 3.33333C8.13889 3.33333 6.5625 3.97917 5.27083 5.27083C3.97917 6.5625 3.33333 8.13889 3.33333 10C3.33333 11.8611 3.97917 13.4375 5.27083 14.7292C6.5625 16.0208 8.13889 16.6667 10 16.6667Z' fill='%2316233C'/%3E%3C/g%3E%3C/svg%3E"); }
.sco-plan__benefit--cancel::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath d='M9.1249 12.3814L13.2564 8.24992L12.6618 7.65534L9.1249 11.1922L7.34282 9.41013L6.74823 10.0047L9.1249 12.3814ZM9.9999 17.4678C8.32573 16.971 6.93497 15.9569 5.82761 14.4253C4.72025 12.8938 4.16656 11.1687 4.16656 9.24992V4.74346L9.9999 2.56409L15.8332 4.74346V9.24992C15.8332 11.1687 15.2796 12.8938 14.1722 14.4253C13.0648 15.9569 11.6741 16.971 9.9999 17.4678ZM9.9999 16.5833C11.4443 16.1249 12.6388 15.2083 13.5832 13.8333C14.5277 12.4583 14.9999 10.9305 14.9999 9.24992V5.31242L9.9999 3.45346L4.9999 5.31242V9.24992C4.9999 10.9305 5.47212 12.4583 6.41657 13.8333C7.36101 15.2083 8.55545 16.1249 9.9999 16.5833Z' fill='%2316233C'/%3E%3C/g%3E%3C/svg%3E"); }

.sco-plan__benefit--price::before  { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4.1' y='8.6' width='11.8' height='8.1' rx='1.2' stroke='%2316233C' stroke-width='0.95'/%3E%3Cpath d='M7.2 8.6V6.4a2.8 2.8 0 0 1 5.6 0v2.2' stroke='%2316233C' stroke-width='0.95' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='12.7' r='1.05' stroke='%2316233C' stroke-width='0.95'/%3E%3C/svg%3E"); }

/* ---------- Klarna / Affirm installments ---------- */
.sco-plan__installments {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 500;
  color: #16233c;
}
.sco-pay { display: block; background-repeat: no-repeat; background-position: center; }
.sco-pay--klarna { flex: 0 0 18px; width: 18px; height: 18px; background-size: 18px 18px; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath d='M13.875 0H4.125C1.84683 0 0 1.84683 0 4.125V13.875C0 16.1532 1.84683 18 4.125 18H13.875C16.1532 18 18 16.1532 18 13.875V4.125C18 1.84683 16.1532 0 13.875 0Z' fill='%23FFB3C7'/%3E%3Cg%3E%3Cpath d='M5.6664 4.5V13.5H3.6V4.5H5.6664ZM10.8234 4.5C10.8234 6.3873 10.111 8.14725 8.83665 9.4806L8.71155 9.60795L11.5659 13.5H9.0153L5.91345 9.27L6.714 8.6706C8.0001 7.7076 8.75475 6.2505 8.80065 4.6548L8.8029 4.5H10.8234ZM13.275 11.25C13.5734 11.25 13.8595 11.3685 14.0705 11.5795C14.2815 11.7905 14.4 12.0766 14.4 12.375C14.4 12.6734 14.2815 12.9595 14.0705 13.1705C13.8595 13.3815 13.5734 13.5 13.275 13.5C12.9766 13.5 12.6905 13.3815 12.4795 13.1705C12.2685 12.9595 12.15 12.6734 12.15 12.375C12.15 12.0766 12.2685 11.7905 12.4795 11.5795C12.6905 11.3685 12.9766 11.25 13.275 11.25Z' fill='%230A0B09'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.sco-pay--affirm { flex: 0 0 38px; width: 38px; height: 15px; background-size: 38px 15px; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 37.5898 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.08084 8.4521C2.06587 8.4521 0.889222 8.93713 0.251497 9.44012L0.835329 10.6617C1.34731 10.1946 2.17365 9.7994 2.91916 9.7994C3.62874 9.7994 4.01497 10.0329 4.01497 10.509C4.01497 10.8323 3.75449 10.994 3.26946 11.0569C1.43713 11.2904 0 11.7934 0 13.2036C0 14.3174 0.799401 15 2.03892 15C2.92814 15 3.71856 14.506 4.09581 13.8593V14.8204H5.7485V10.7874C5.7485 9.12575 4.58982 8.4521 3.08084 8.4521ZM2.46108 13.7066C1.99401 13.7066 1.76048 13.482 1.76048 13.1048C1.76048 12.4042 2.54192 12.1707 3.97006 12.018C3.97904 12.9521 3.34132 13.7066 2.46108 13.7066ZM21.3323 9.67365V8.63174H19.6796V14.8204H21.4491V11.8383C21.4491 10.4192 22.3024 10.006 22.9042 10.006C23.1377 10.006 23.4521 10.0778 23.6587 10.2305L23.982 8.59581C23.7126 8.47904 23.4252 8.4521 23.1916 8.4521C22.2844 8.4521 21.7096 8.85629 21.3323 9.67365ZM32.1916 8.4521C31.2575 8.4521 30.5569 9.00898 30.1886 9.53892C29.8473 8.84731 29.1377 8.4521 28.2754 8.4521C27.3413 8.4521 26.6946 8.97305 26.3892 9.56587V8.63174H24.6826V14.8204H26.4521V11.6317C26.4521 10.491 27.0539 9.94311 27.6108 9.94311C28.1138 9.94311 28.5808 10.2665 28.5808 11.1108V14.8204H30.3593V11.6317C30.3593 10.4731 30.9431 9.94311 31.5269 9.94311C31.994 9.94311 32.488 10.2844 32.488 11.1018V14.8204H34.2575V10.5449C34.2575 9.15269 33.3234 8.4521 32.1916 8.4521ZM12 8.17365V8.63174H9.31437V8.00299C9.31437 7.18563 9.78144 6.9521 10.1856 6.9521C10.4192 6.9521 10.7246 7.00599 10.976 7.1497L11.524 5.9012C11.2006 5.71257 10.6707 5.54192 9.96108 5.54192C8.82934 5.54192 7.54491 6.17964 7.54491 8.18263V8.64072H6.52096V10.006H7.54491V14.8204H9.31437V9.99701H12V14.8204H13.7695V9.99701H15.3772V8.63174H13.7695V8.00299C13.7695 7.18563 14.2365 6.9521 14.6407 6.9521C15.0898 6.9521 15.4311 7.1497 15.4311 7.1497L15.979 5.9012C15.979 5.9012 15.4222 5.54192 14.4162 5.54192C13.2934 5.53293 12 6.17066 12 8.17365ZM16.4281 8.63174H18.1976V14.8204H16.4281V8.63174Z' fill='%23060809'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M26.7395 0C21.9611 0 17.7036 3.31437 16.5 7.58084H18.2335C19.2395 4.4012 22.6617 1.61677 26.7395 1.61677C31.6976 1.61677 35.9731 5.38922 35.9731 11.2635C35.9731 12.5838 35.8024 13.7695 35.479 14.8204H37.1587L37.1766 14.7665C37.4551 13.6796 37.5898 12.503 37.5898 11.2635C37.5898 4.71557 32.8204 0 26.7395 0Z' fill='%230FA0EA'/%3E%3C/g%3E%3C/svg%3E"); }

.sco-plan__unavailable { margin-top: 24px; font-size: 14px; color: #d6455b; }

/* ---------- Guarantee card ---------- */
.sco-guarantee { padding: 24px; border-radius: 24px; }
.sco-guarantee__title {
  font-family: var(--sco-font-head);
  font-weight: 500;
  font-size: 16px;
  color: #f4fafa;
}
.sco-guarantee__body { margin: 16px 0 0; font-size: 16px; line-height: 1.35; opacity: 1; color: #f4fafa; }
.sco-guarantee__terms { margin: 16px 0 0; font-size: 12px; opacity: 1; color: #f4fafa; }
.sco-guarantee__terms u { text-decoration: underline; }

/* ---------- Desktop: same layout, one step up the type scale ----------
   Measured off the 1440 frame (2099:3266): price 28 not 26, badge/chip 13 not
   12 at 7/12 padding, benefits 16 on 22px icons not 14 on 20, installments 13
   with a 20px Klarna and a 40x16 Affirm. */
@media (min-width: 641px) {
  .sco-plan__pricing { column-gap: 10px; }
  .sco-plan__total { font-size: 28px; }
  .sco-badge,
  .sco-chip--save,
  .sco-plan--selected .sco-chip--save { padding: 7px 12px; font-size: 13px; }
  .sco-plan__benefit { font-size: 16px; }
  .sco-plan__benefit::before { flex: 0 0 22px; width: 22px; height: 22px; background-size: 22px 22px; }
  .sco-plan__installments { font-size: 13px; }
  .sco-pay--klarna { flex: 0 0 20px; width: 20px; height: 20px; background-size: 20px 20px; }
  .sco-pay--affirm { flex: 0 0 40px; width: 40px; height: 16px; background-size: 40px 16px; }
}

/* ---------- Mobile: keep the rail on one line on narrow phones ----------
   The pricing rail is price + compare-at + SAVE pill + $/mo, which is the
   widest single row on the screen. The upper bound of every clamp is the
   design value, so nothing moves at 402px and above; below that it scales
   rather than wrapping the pill onto its own line.
   These restate the earlier mobile block's 22px .sco-plan__total etc. */
@media (max-width: 640px) {
  .sco-plan__name { font-size: clamp(17px, 5vw, 20px); }
  .sco-plan__total { font-size: clamp(22px, 6.5vw, 26px); }
  /* "Tirzepatide | Compounded GLP-1 + GIP injection" is 334px at 14px — exactly
     the width of the design's 430px card, so it wraps on every narrower phone
     (306px of content at 402). 3.15vw keeps it on one line down to ~390px. */
  .sco-plan__subtitle { font-size: clamp(11px, 3.15vw, 14px); }
  .sco-plan__was,
  .sco-plan__permonth { font-size: clamp(12px, 3.5vw, 14px); }
  .sco-badge,
  .sco-chip--save,
  .sco-plan--selected .sco-chip--save { padding: 6px 9px; font-size: clamp(10px, 3vw, 12px); }
  .sco-plan__billing { font-size: clamp(14px, 4vw, 16px); }
  .sco-plan__upsell { font-size: clamp(14px, 4vw, 16px); }
  .sco-plan__benefit { font-size: clamp(13px, 3.5vw, 14px); }
  .sco-plan__installments { font-size: clamp(11px, 3vw, 12px); }
  .sco-guarantee__body { font-size: clamp(14px, 4vw, 16px); }
  .sco-segmented__item { font-size: clamp(14px, 4vw, 16px); padding: 0 12px; }
}


/* ---------- Narrow phones: hold the pricing rail on one line ----------
   The widest rail is the 12-month tirzepatide card — $1,500 / $2,388 /
   SAVE $888 / $125/mo. With the 640px clamps it fits down to 390px (iPhone
   12..17) but wrapped the "$/mo" onto a second line on a 375 SE. Tightening
   the column gap, the two 14px secondary numbers and the pill padding buys
   back ~14px, which holds the row to ~360px. Below that it wraps, which is
   the intended degradation. */
@media (max-width: 400px) {
  .sco-plan__pricing { column-gap: 6px; }
  .sco-plan__was,
  .sco-plan__permonth { font-size: clamp(11px, 3.2vw, 13px); }
  .sco-badge,
  .sco-chip--save,
  .sco-plan--selected .sco-chip--save { padding: 6px 8px; }
}


/* ============================================================
   Thank-you page (shared fleet template)
   ------------------------------------------------------------
   /thank-you is a STATIC route with its own stylesheet
   (thank-you.css) that predates the .sco-* vocabulary, so none of
   the rules above reach it. Left alone it renders in Rubik and
   Merriweather with its cards painted from --gradient_light -- a
   90deg wash terminating in solid var(--primary), i.e. every card
   ramps into hard Science blue.

   PR #159 tokenised the two section WRAPPERS
   (--thankyou_hero_bkg / --thankyou_section_bkg) but not
   .order_tab / .order_tab_title, so the cards are still driven by
   --gradient_light. Redefining that token is the supported lever
   and needs no renderer change.

   The tokens are scoped to .thankyou_page rather than :root on
   purpose: --gradient_light also paints .checkout_page, which
   already renders correctly, and a :root override would drag it
   along.

   Selectors carry a `body ` prefix (0,3,0) so they outrank
   thank-you.css's `.thankyou_page .x` (0,2,0) whichever sheet the
   browser happens to load last.
   ============================================================ */

.thankyou_page {
  --gradient: var(--sco-bg);
  --gradient_light: #ffffff;
  --thankyou_hero_bkg: var(--sco-bg);
  --thankyou_section_bkg: var(--sco-bg);

  /* Order confirmation v2 (.thankyou_page.cv2) reads these two tokens:
     confirmation-v2.css does
       --cv2_font_head: var(--thankyou_font_head, 'Satoshi', ...)
     so its Satoshi fallback would have been right -- but default-theme.css
     SETS --thankyou_font_head to "Merriweather", serif (and _body to Rubik)
     for the legacy thank-you template, so the fallback never fires and v2
     inherited a serif Science does not load at all. It rendered as generic
     browser serif.

     Setting the tokens here is the supported lever and is the ONLY thing that
     works: confirmation-v2.css applies them with `font-family: ... !important`,
     which outranks the class/element remaps further down this block
     (body .thankyou_page h1 etc.) that fix the LEGACY template. Those rules are
     still needed for any brand still on the old layout -- do not remove them. */
  --thankyou_font_head: var(--sco-font-head);
  --thankyou_font_body: var(--sco-font-body);
}

body .thankyou_page {
  background: var(--sco-bg);
  font-family: var(--sco-font-body);
  color: var(--sco-text);
}

/* Fonts. thank-you.css hardcodes three families Science does not
   use. Remap the CLASSES rather than the elements so the page's
   own weight and size rules survive untouched. */
body .thankyou_page .rubik,
body .thankyou_page .urbanist {
  font-family: var(--sco-font-body);
}
body .thankyou_page .merriweather,
body .thankyou_page .order_tab_title,
body .thankyou_page h1,
body .thankyou_page h2,
body .thankyou_page h3 {
  font-family: var(--sco-font-head);
}

/* Cards. Flat white on the intake background with the same
   hairline border and 16px radius as the .sco-* cards, replacing
   the stock 8px gradient block. */
body .thankyou_page .order_tab {
  background: #ffffff;
  background-image: none;
  border: 1px solid var(--sco-border);
  border-radius: var(--sco-radius);
}
body .thankyou_page .order_tab_title,
body .thankyou_page .order_tab_body {
  background: transparent;
  background-image: none;
}
body .thankyou_page .order_tab_title {
  color: var(--sco-text);
}

/* Icon medallions. Stock paints these --indigo (#264653), a dark
   teal from the default palette that appears nowhere else in the
   Science system. */
body .thankyou_page .order_tab_icon {
  background: var(--primary);
}
body .thankyou_page .order_tab_icon i {
  color: #ffffff;
}


/* ============================================================
   Screen 7 + screen 2 — Figma "V4"
   file R6LnE56WVd2poYbQGDCr4V, nodes 2103:402 (plan) / 2103:132 (BMI)
   ------------------------------------------------------------
   Supersedes the "GR Edits" block above, which is left in place so the
   diff between the two rounds stays readable. V4 reverses three of its
   decisions: the selected card goes back to navy, the SAVE pill becomes a
   tint rather than a solid, and the trust items move back out of the card.

   This stylesheet is served to BOTH /glp1-v2 (production) and /glp1-dosage —
   glp1-dosage has no theme of its own and points at this file. Rules here are
   therefore limited to styling that is correct for both. The structural
   differences between the two rounds (in-card benefit list, Klarna/Affirm row,
   struck-through compare-at) live in each intake's own choose component, not
   in a display:none here, so removing them from one funnel cannot silently
   strip them from the other.
   ============================================================ */

/* ---------- Selected card: navy again (2103:433) ----------
   2px #d6e7ea border on #0c265a, which the GR round had replaced with mint
   #ace6e3 on a #16233c type colour. Border width/inset are unchanged, so the
   padding compensation set above still holds. */
.sco-plan--selected {
  background: #0c265a;
  color: #f4fafa;
}
/* Filled primary disc with a white check (2103:438), not the mint round's
   #16233c disc — on navy that read as a hole rather than a control. */
.sco-plan--selected .sco-radio {
  background: var(--primary);
  border-color: var(--primary);
  color: #f4fafa;
}
/* The cross-sell link and the installments row were coloured for a light card.
   Neither survives on navy: #0362fe on #0c265a is ~1.6:1, and the installments
   row's #16233c is effectively invisible. Only /glp1-v2 still renders the
   installments row, but the rule is harmless where the markup is absent. */
.sco-plan--selected .sco-plan__upsell,
.sco-plan--selected .sco-plan__installments { color: #f4fafa; }

/* ---------- 48px head-to-price gap on every card ----------
   V4 sets gap-[48px] on all four cards (2103:434 / 459 / 478 / 501). The GR
   round only opened it on the monthly card, because that was the one card with
   nothing under the price; V4 removes the in-card blocks entirely, so the
   larger gap is now the rule rather than the exception. */
.sco-plan__pricing,
.sco-plan--monthly .sco-plan__pricing { margin-top: 48px; }

/* ---------- SAVE pill: a tint, not a solid ----------
   Light cards 24% primary on primary text (2103:494); the navy card 50%
   #4298fb on #d6e7ea (2103:452). The GR round painted both solid primary,
   which on the selected card put a saturated blue block on a coloured field. */
.sco-chip--save {
  background: rgba(3, 98, 254, 0.24);
  color: var(--primary);
  font-weight: 500;
}
.sco-plan--selected .sco-chip--save {
  background: rgba(66, 152, 251, 0.5);
  color: var(--sco-border);
  font-weight: 700;
}

/* ---------- Trust row back below the card list (2103:541) ----------
   12px Satoshi in primary on 16px icons. The icons and the base layout are
   already defined further up; this only restates the size and the spacing
   under the cards. */
.sco-trustrow { margin-top: 24px; }

/* ---------- BMI readout (2103:179) ----------
   16px under the number, not 12. */
.sco-bmi__label { margin-top: 16px; }

@media (min-width: 641px) {
  .sco-trustrow { gap: 16px; font-size: 12px; }
  /* The desktop frame calls for 80px (2103:180). 58 was the mobile value and
     has been serving both breakpoints since launch — the mobile clamp above
     still caps at 58 below 641px, so this only affects desktop. */
  .sco-bmi__value { font-size: 80px; }
}


/* ============================================================
   BMI status grading — Figma 2103:2516 (eligible) / 2103:2634 (below range)
   ------------------------------------------------------------
   The readout colour and the pill under it key off the entered BMI. Both
   palettes are the designer's literals; they are deliberately NOT --primary /
   --sco-* tokens, because green-means-eligible and amber-means-check-this are
   semantic states rather than brand colour, and re-theming the brand must not
   silently repaint them.

   Only components that emit .sco-bmi__value--* / .sco-bmi__status render any of
   this, so shipping the CSS ahead of a component is inert.
   ============================================================ */
.sco-bmi__value--eligible { color: #0e9f6e; }
.sco-bmi__value--below    { color: #d97706; }

.sco-bmi__status {
  margin-top: 16px;
  padding: 10px 18px;
  border-radius: 14px;
  font-family: var(--sco-font-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
}
.sco-bmi__status--eligible { background: #dff5ec; color: #0a6b4a; }
.sco-bmi__status--below    { background: #fef3c7; color: #92400e; }

@media (max-width: 640px) {
  .sco-bmi__status { font-size: clamp(13px, 3.6vw, 15px); padding: 10px 14px; }
}


/* ============================================================
   Screen 7 — Figma "GR Edits v2", mobile frame 2103:1614
   ------------------------------------------------------------
   Supersedes the V4 block above, which is left in place so the sequence of
   rounds stays readable. This reverses V4 on three counts and moves one thing:

     - selected card returns to mint #ace6e3 with #16233c type (V4: navy/white)
     - the SAVE pill returns to a SOLID fill (V4 made it a tint) and the
       struck-through compare-at comes back — now on the MONTHLY card too,
       which V4 gave no pill at all (2103:1729 "msrp-save": $199 struck, SAVE $60)
     - trust items go back INSIDE the selected card; the standalone row is
       hidden again (2103:1830 is hidden in the frame)
     - the Klarna/Affirm line is no longer per-card. One row sits above the
       whole stack (2103:1643 "Installments bar — all plans"); the three
       per-card copies 2103:1704 / 1764 / 1799 are all hidden.

   Card head-to-price gap returns to 24px (V4 pushed every card to 48).
   The benefit and guarantee glyphs were recoloured in place above rather than
   re-inlined: they are the same Material paths, only the fill changed
   (#0362FE -> #16233C on the benefits, #4298FB -> #0362FE on the guarantee
   badge), so a find/replace beats pasting 6KB of re-encoded vector.
   ============================================================ */
.sco-plan--selected {
  background: #ace6e3;
  color: #16233c;
}
/* Solid #16233c disc with a light check — on mint, a primary-blue disc reads
   as a hole rather than a control. */
.sco-plan--selected .sco-radio {
  background: #16233c;
  border-color: #16233c;
  color: #f4fafa;
}
.sco-plan--selected .sco-plan__upsell,
.sco-plan--selected .sco-plan__installments { color: #16233c; }

.sco-plan__pricing,
.sco-plan--monthly .sco-plan__pricing { margin-top: 24px; }

/* Badge is the dark navy chip, not primary blue (2103:1667 / 2103:1782). */
.sco-badge {
  padding: 6px 10px;
  background: #16233c;
  color: #f4fafa;
  font-family: var(--sco-font-body);
  font-size: 12px;
  font-weight: 700;
}

/* SAVE pill: solid primary on both card states (2103:1677). */
.sco-chip--save,
.sco-plan--selected .sco-chip--save {
  padding: 6px 10px;
  background: var(--primary);
  color: #f4fafa;
  font-size: 12px;
  font-weight: 700;
}

/* One installments row for every plan, above the stack. */
.sco-installments {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
  font-family: var(--sco-font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  color: #16233c;
}

/* Guarantee card is a pale field with dark type now (2103:1843), not solid
   blue — so every colour the earlier blocks set for white-on-blue is restated. */
.sco-guarantee { background: #e4edfe; }
.sco-guarantee__title { color: #16233c; }
.sco-guarantee__body  { color: rgba(22, 35, 60, 0.85); }
.sco-guarantee__terms { color: rgba(22, 35, 60, 0.6); }

@media (min-width: 641px) {
  .sco-installments { font-size: 13px; }
}