/* ─────────────────────────────────────────────────────────────
   Helpr ROI Widget — Webflow embed stylesheet
   Colors and fonts are mapped to hellohelpr.com's existing Webflow
   variables. No new global variables were created — this file
   defines its own local --helpr-* aliases (scoped to #helpr-roi-root)
   that point at the site's real tokens, so the widget's component
   code (unchanged from the original build) keeps working as-is.
   ───────────────────────────────────────────────────────────── */

#helpr-roi-root {
  /* ── Color aliases → mapped to your existing Webflow variables ── */
  --helpr-red: var(--red);                 /* #f55829 */
  --helpr-brown: var(--brown);             /* #501807 */
  --helpr-cream: var(--cream);             /* #f7f6f2 */
  --helpr-neon: var(--lime);               /* #c4eb72 */
  --helpr-dark-green: var(--dark-green);   /* #11545c */
  --helpr-pink: var(--pink);               /* #d9a7e3 */
  --helpr-peach: var(--orange);            /* #ff956a */
  --helpr-blue: var(--blue);               /* #59ceff */
  --helpr-light-blue: var(--light-blue);   /* #ddf9ff */
  --helpr-purple: var(--purple);           /* #9090fe */
  --helpr-light-purple: var(--lavender);   /* #ceceff */
  --helpr-green: var(--green);             /* #2eca77 */

  /* Surfaces used by StatCard/cards inside the widget */
  --bg-surface: var(--functional--white, #ffffff);

  /* ── Font aliases → your real Webflow-hosted font-faces ──
     Webflow already defines @font-face for these family names
     site-wide, so no new @font-face rules are declared here. */
  --font-display: 'Bagosscondensed', serif;
  --font-body: 'Haffer', -apple-system, system-ui, sans-serif;
  --font-body-sq: 'Haffersq', 'Haffer', -apple-system, system-ui, sans-serif;

  /* Scoped reset so the widget doesn't inherit stray host-page styles */
  all: initial;
  display: block;
  font-family: var(--font-body);
  color: var(--helpr-brown);
  background: var(--helpr-cream);

  /* Hard backstop: never let this widget's box exceed its own width,
     no matter what content (e.g. very large formatted numbers) ends
     up inside it, on any screen size. */
  max-width: 100%;
  overflow-x: hidden;
}

/* Prevent large numbers / long strings anywhere inside the widget from
   forcing their containing grid/flex track wider than available space.
   Grid and flex children default to min-width:auto, which lets long
   unbroken content (e.g. "$3,000,000" or "210.4M") push the whole
   layout wider — this resets that so containers can actually shrink,
   and lets long numbers wrap or break instead of overflowing. */
#helpr-roi-root [data-roi-grid],
#helpr-roi-root [data-roi-grid] > *,
#helpr-roi-root [data-roi-hero-grid],
#helpr-roi-root [data-roi-hero-grid] > *,
#helpr-roi-root [data-roi-stat-row],
#helpr-roi-root [data-roi-stat-row] > * {
  min-width: 0;
}
#helpr-roi-root [data-roi-stat-row] > * {
  overflow-wrap: break-word;
}

#helpr-roi-root *,
#helpr-roi-root *::before,
#helpr-roi-root *::after {
  box-sizing: border-box;
}

#helpr-roi-root button {
  font-family: inherit;
}

/* ─── Highlight block (signature treatment) ──────────────── */
#helpr-roi-root .highlight {
  background: var(--helpr-purple);
  color: var(--helpr-cream);
  padding: 0.02em 0.18em;
  margin: 0 0.04em;
  line-height: 1;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  display: inline-block;
  vertical-align: baseline;
  white-space: nowrap;
  border-radius: 4px;
}
#helpr-roi-root .highlight--pink { background: var(--helpr-pink); color: var(--helpr-brown); }
#helpr-roi-root .highlight--neon { background: var(--helpr-neon); color: var(--helpr-brown); }
#helpr-roi-root .highlight--blue { background: var(--helpr-blue); color: var(--helpr-brown); }

#helpr-roi-root .eyebrow {
  font-family: var(--font-body-sq);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.239;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

#helpr-roi-root h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 3.25rem;
  line-height: 1.1;
  margin: 0 0 1rem 0;
}

#helpr-roi-root p {
  font-family: var(--font-body);
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 0 0 10px 0;
}

/* Sources/footnote paragraphs must stay at their own small footnote
   size regardless of viewport — this beats the generic <p> rule's
   breakpoint overrides below, which would otherwise force these back
   up to the site's normal body-copy size. */
#helpr-roi-root [data-roi-sources-desktop] p,
#helpr-roi-root [data-roi-sources-mobile] p {
  font-size: 13px !important;
}

#helpr-roi-root a {
  color: var(--dark-green);
  text-underline-offset: 3px;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
}

/* ─── Button primitives ──────────────────────────────────── */
#helpr-roi-root .btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-weight: 500;
  line-height: 1;
  padding: 12px 20px 12px 24px;
  border-radius: 9999px;
  border: 0;
  cursor: pointer;
  transition: transform 150ms cubic-bezier(0.22, 1, 0.36, 1),
              filter 150ms cubic-bezier(0.22, 1, 0.36, 1);
}
#helpr-roi-root .btn:active { transform: scale(0.98); }
#helpr-roi-root .btn:hover { filter: brightness(1.05); }

#helpr-roi-root .btn--primary {
  background: var(--helpr-red);
  color: var(--helpr-cream);
}
#helpr-roi-root .btn--primary .btn__arrow {
  background: rgba(247, 246, 242, 0.5);
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
#helpr-roi-root .btn--ghost {
  background: transparent;
  color: var(--helpr-brown);
  padding: 10px 16px;
}

/* ─── Primary button — matches hellohelpr.com .btn-primary exactly ─── */
#helpr-roi-root .btn-primary {
  color: var(--cream);
  cursor: pointer;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: inline-flex;
}
#helpr-roi-root .btn-primary__inner {
  grid-column-gap: 0.875rem;
  grid-row-gap: 0.875rem;
  border: 1.5px solid var(--red);
  background-color: var(--red);
  color: var(--cream);
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  padding: 0.125rem 0.125rem 0.125rem 1.5rem;
  font-weight: 400;
  display: flex;
}
#helpr-roi-root .btn-primary:hover .btn-primary__inner {
  background-color: #e65327;
  box-shadow: 0 2px 8px #0000001f;
}
#helpr-roi-root .btn-primary__label {
  font-family: var(--font-body);
  letter-spacing: 0.01rem;
  text-underline-offset: 2px;
  font-size: 1.1rem;
  line-height: 1.2;
  text-decoration: none;
  text-decoration-thickness: 1.6px;
}
#helpr-roi-root .btn-primary__arrow {
  background-color: #f7f6f273;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  flex-shrink: 0;
}
#helpr-roi-root .btn-primary:hover .btn-primary__arrow {
  background-color: #f7f6f266;
}
#helpr-roi-root .helpr-slider { -webkit-appearance: none; appearance: none; }
#helpr-roi-root .helpr-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--helpr-cream); border: 2px solid var(--helpr-brown);
  cursor: grab; box-shadow: 0 2px 6px rgba(80,24,7,0.2);
}
#helpr-roi-root .helpr-slider::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--helpr-cream); border: 2px solid var(--helpr-brown);
  cursor: grab; box-shadow: 0 2px 6px rgba(80,24,7,0.2);
}
#helpr-roi-root input[type="number"] { -moz-appearance: textfield; }
#helpr-roi-root input[type="number"]::-webkit-outer-spin-button,
#helpr-roi-root input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ─── Responsive ─────────────────────────────────────────── 
   Breakpoints match Webflow's standard values (991 / 767 / 479)
   so the widget's layout shifts happen in sync with the rest of
   the page rather than at independent points. */
@media (max-width: 991px) {
  #helpr-roi-root [data-roi-container] {
    padding: 32px 0 !important;
  }
  #helpr-roi-root [data-roi-grid] {
    grid-template-columns: 1fr !important;
  }
  #helpr-roi-root h1 {
    font-size: 3rem !important;
  }
  #helpr-roi-root p {
    font-size: 1.05rem !important;
  }
  #helpr-roi-root [data-roi-hero-grid] {
    grid-template-columns: 1fr !important;
    align-items: flex-start !important;
  }
  #helpr-roi-root [data-roi-hero-grid] > div:last-child {
    text-align: left !important;
  }
  #helpr-roi-root [data-roi-stat-row] {
    grid-template-columns: 1fr 1fr !important;
  }
  #helpr-roi-root [data-roi-sources-desktop] {
    display: none !important;
  }
  #helpr-roi-root [data-roi-sources-mobile] {
    display: block !important;
  }
}

@media (max-width: 767px) {
  #helpr-roi-root [data-roi-container] {
    padding: 24px 0 !important;
  }
  #helpr-roi-root h1 {
    font-size: 2.5rem !important;
  }
  #helpr-roi-root p {
    font-size: 1rem !important;
  }
  #helpr-roi-root [data-roi-stat-row] {
    grid-template-columns: 1fr !important;
  }
  #helpr-roi-root [data-roi-modal-row] {
    grid-template-columns: 1fr !important;
  }
  #helpr-roi-root [data-roi-math-label-col] {
    width: 32% !important;
  }
  #helpr-roi-root [data-roi-hero-card] {
    padding: 24px 28px !important;
  }
}

@media (max-width: 479px) {
  #helpr-roi-root [data-roi-container] {
    padding: 20px 0 !important;
  }
  #helpr-roi-root h1 {
    font-size: 2.25rem !important;
  }
  #helpr-roi-root p {
    font-size: 1rem !important;
  }
  #helpr-roi-root [data-roi-math-label-col] {
    width: 28% !important;
  }
}