/* HubSpot savings calculators (Variants A + B). Every rule is nested under
   .hsc-root with .hsc- prefixed classes so this drops into any host page
   (embed, tools page, blog post) without leaking styles in or out. Design
   tokens are CSS variables on .hsc-root so multiple instances stay in sync
   and a host page could theme them if it ever needed to.
   DM Sans typography, "leaf" radii (top-left + bottom-right only), tabular
   figures throughout, focus glow instead of hard borders. Nothing animates. */

.hsc-root{
  --hsc-primary:#6658ea;
  --hsc-primary-dark:#564caf;
  --hsc-ink:#1b1642;
  --hsc-gold:#f5c070;
  --hsc-fg2:#575a7b;
  --hsc-fg3:#8d9aae;
  --hsc-body:#3a3560;
  --hsc-line:#eef1f9;
  --hsc-row-line:#f4f6fc;
  --hsc-thead:#faf9ff;
  --hsc-total-bg:#f4f2ff;
  --hsc-tint:#f7f5ff; /* our-side fills (reserved, per design token table) */
  --hsc-leaf:1rem 0 1rem 0;
  --hsc-leaf-sm:.7rem 0 .7rem 0;
  --hsc-leaf-xs:.5rem 0 .5rem 0;
  --hsc-focus:0 0 0 3px rgba(102,88,234,.25);

  font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--hsc-ink);
  font-size:16px;
  line-height:1.5;
  font-variant-numeric:tabular-nums;  /* every figure in the widget lines up, inherited site-wide */
  -webkit-font-smoothing:antialiased;
}
.hsc-root *,.hsc-root *::before,.hsc-root *::after{box-sizing:border-box}
.hsc-root input,.hsc-root button{font-family:inherit}

.hsc-root .hsc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- card + grid ---------- */
.hsc-root .hsc-card{background:#fff;border:1px solid var(--hsc-line);border-radius:var(--hsc-leaf);box-shadow:0 1rem 3rem rgba(27,22,66,.13);overflow:hidden;max-width:1040px;margin:0 auto}
/* the summary header (.hsc-head, eyebrow + heading) has its own grid slot: at
   full width it sits at the top of the results column (visually identical to
   when it lived inside .hsc-res), and the one-column layout reorders it above
   the inputs (approved Design canvas; the zip export had missed this — see
   shell() in hubspot-savings-widget.js) */
.hsc-root .hsc-grid{display:grid;grid-template-columns:340px minmax(0,1fr);grid-template-rows:auto 1fr}
.hsc-root .hsc-head{grid-column:2;grid-row:1;padding:28px 32px 0;min-width:0}

/* ---------- input column ---------- */
.hsc-root .hsc-in{grid-column:1;grid-row:1/3;padding:26px 24px;background:#fcfdff;border-right:1px solid var(--hsc-line);min-width:0}

.hsc-root .hsc-label{display:block;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--hsc-fg2);margin-bottom:8px}
.hsc-root .hsc-seclabel{margin-bottom:14px}

.hsc-root .hsc-field-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.hsc-root .hsc-field-row .hsc-label{margin-bottom:0;padding-top:3px}

.hsc-root .hsc-num{border:1.5px solid #dce0f3;border-radius:var(--hsc-leaf-xs);padding:9px 12px;font-size:16px;font-weight:700;color:var(--hsc-ink);text-align:right;font-variant-numeric:tabular-nums;background:#fff;flex:none}
.hsc-root .hsc-num-convos{width:124px}
/* msgs/conv is rarely changed (Sam, 2026-08-20): kept small. The same-day
   borderless treatment is SUPERSEDED (Sam, later 2026-08-20): once the field
   moved inside the "Other calculation settings" disclosure the de-emphasis
   was redundant, so the normal .hsc-num border is back. */
.hsc-root .hsc-num-msgs{width:56px;padding:9px 8px}
.hsc-root .hsc-num:focus{outline:0;border-color:var(--hsc-primary);box-shadow:var(--hsc-focus)}
.hsc-root .hsc-num-msgs::-webkit-outer-spin-button,.hsc-root .hsc-num-msgs::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.hsc-root .hsc-num-msgs{-moz-appearance:textfield}

.hsc-root .hsc-slider{-webkit-appearance:none;appearance:none;display:block;width:100%;height:22px;background:transparent;cursor:pointer;margin:0 0 2px;padding:0}
.hsc-root .hsc-slider:focus-visible{outline:3px solid rgba(102,88,234,.25);outline-offset:3px;border-radius:6px}

/* explicit track + thumb styling — native range inputs render with no visible
   track on some browsers otherwise (white-on-white), so paint both vendor sets.
   The track's own background is a two-stop gradient keyed off --hsc-fill (a
   percentage custom property the widget JS keeps in sync with the input's
   value/min/max, see updateSliderFill() in hubspot-savings-widget.js): purple
   to the left of the thumb, grey to the right, giving the filled-progress
   look from the design prototype without any extra DOM (custom properties
   are inherited by pseudo-elements, so setting --hsc-fill on the input
   itself is enough for both ::-webkit-slider-runnable-track and
   ::-moz-range-track to read it). */
.hsc-root .hsc-slider::-webkit-slider-runnable-track{height:8px;background:linear-gradient(to right,#6658ea 0 var(--hsc-fill,0%),#e5e5e5 var(--hsc-fill,0%) 100%);border:1px solid #9a9a9a;border-radius:50rem}
.hsc-root .hsc-slider::-moz-range-track{height:8px;background:linear-gradient(to right,#6658ea 0 var(--hsc-fill,0%),#e5e5e5 var(--hsc-fill,0%) 100%);border:1px solid #9a9a9a;border-radius:50rem}
.hsc-root .hsc-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;margin-top:-5px;background:var(--hsc-primary);border:2px solid #fff;border-radius:50%;box-shadow:0 1px 4px rgba(27,22,66,.25);cursor:pointer}
.hsc-root .hsc-slider::-moz-range-thumb{width:18px;height:18px;background:var(--hsc-primary);border:2px solid #fff;border-radius:50%;box-shadow:0 1px 4px rgba(27,22,66,.25);cursor:pointer}

.hsc-root .hsc-divider{height:1px;background:var(--hsc-line);margin:18px 0}

/* each rate group (title row + slider + helper) is tightened internally and
   separated externally, so what belongs to what is unambiguous (Sam,
   2026-08-20). Every group after the first gets the same top margin — the
   original .hsc-rate-row-us-only margin left variant B's competitor row
   nearly touching Breeze's helper line. */
.hsc-root .hsc-rate-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:-3px}
.hsc-root .hsc-rate-row-comp,.hsc-root .hsc-rate-row-us{margin-top:20px}
.hsc-root .hsc-rate-label{font-size:13px;font-weight:600;color:var(--hsc-ink)}
.hsc-root .hsc-rate-val{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--hsc-ink)}
/* rate titles + % values are all ink now (Sam, 2026-08-20, SUPERSEDING the
   purple Resolve247 row and the red competitor row - see the variant B
   section - so the three groups read uniformly, like HubSpot Breeze) */

.hsc-root .hsc-helper{font-size:12px;line-height:1.5;color:var(--hsc-fg3);margin:-3px 0 0}
.hsc-root .hsc-helper b{color:var(--hsc-ink);font-weight:700}

.hsc-root .hsc-eq{font-size:12px;color:var(--hsc-fg2);font-variant-numeric:tabular-nums;margin:10px 0 2px}
.hsc-root .hsc-eq-note{font-size:12px;color:var(--hsc-fg3);margin:0}

/* ---------- results column ---------- */
.hsc-root .hsc-res{grid-column:2;grid-row:2;padding:0 32px 30px;min-width:0}

.hsc-root .hsc-eyebrow{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--hsc-gold);margin-bottom:10px}

.hsc-root .hsc-heading{display:flex;flex-direction:column;gap:3px;font-size:24px;font-weight:500;letter-spacing:-.02em;line-height:1.4;margin:0 0 20px;font-variant-numeric:tabular-nums}

/* receipt table */
.hsc-root .hsc-table{border:1px solid var(--hsc-line);border-radius:var(--hsc-leaf-sm);overflow:hidden}
.hsc-root .hsc-thead,.hsc-root .hsc-row{display:grid;grid-template-columns:1.35fr 1fr 1fr;align-items:center}
.hsc-root .hsc-thead{background:var(--hsc-thead);padding:11px 18px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--hsc-fg2)}
.hsc-root .hsc-thead span:last-child{color:var(--hsc-primary)}
.hsc-root .hsc-row{padding:11px 18px;border-top:1px solid var(--hsc-row-line)}
.hsc-root .hsc-row-label{font-size:13.5px;color:var(--hsc-fg2)}
.hsc-root .hsc-row-breeze,.hsc-root .hsc-row-us{font-size:13.5px;font-weight:600;color:var(--hsc-ink);font-variant-numeric:tabular-nums}
.hsc-root .hsc-row sup{font-size:.68em;margin-left:1px}

.hsc-root .hsc-row-total{background:var(--hsc-total-bg);border-top:1.5px solid var(--hsc-ink);align-items:end;padding-top:14px;padding-bottom:14px}
.hsc-root .hsc-total-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--hsc-ink)}
.hsc-root .hsc-total-sub{font-size:12px;color:var(--hsc-fg3);margin-top:2px}
.hsc-root .hsc-total-stack{display:flex;flex-direction:column;gap:2px}
.hsc-root .hsc-total-line{font-size:12px;color:var(--hsc-fg3)}
.hsc-root .hsc-total-figure{font-size:24px;font-weight:600;color:var(--hsc-ink);font-variant-numeric:tabular-nums;line-height:1.25}
.hsc-root .hsc-total-figure-us{color:var(--hsc-primary)}
.hsc-root .hsc-total-eq{font-size:13px;font-weight:700;color:var(--hsc-ink)}
.hsc-root .hsc-total-eq-us{color:var(--hsc-primary)}

/* payoff bar */
.hsc-root .hsc-payoff{margin-top:16px;border-radius:var(--hsc-leaf-sm);background:var(--hsc-ink);padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.hsc-root .hsc-payoff-left{flex:1 1 auto;min-width:0}
.hsc-root .hsc-payoff-eyebrow{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--hsc-gold);margin-bottom:6px}
.hsc-root .hsc-payoff-sub{font-size:13.5px;color:rgba(255,255,255,.72)}
.hsc-root .hsc-payoff-right{display:flex;flex-direction:column;align-items:center;flex:none}
.hsc-root .hsc-payoff-amount{display:flex;align-items:baseline;gap:4px}
.hsc-root .hsc-payoff-figure-label{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--hsc-gold);margin-top:5px}
.hsc-root .hsc-payoff-figure{font-size:42px;font-weight:600;color:var(--hsc-gold);font-variant-numeric:tabular-nums;line-height:1}
.hsc-root .hsc-payoff-suffix{font-size:15px;font-weight:600;color:var(--hsc-gold)}
.hsc-root .hsc-payoff-edge .hsc-payoff-copy{font-size:16px;line-height:1.5;color:#fff;margin:0}

/* tick line */
.hsc-root .hsc-tick{display:flex;align-items:flex-start;gap:10px;margin-top:20px}
.hsc-root .hsc-tick svg{flex:none;width:19px;height:19px;margin-top:1px}
.hsc-root .hsc-tick p{font-size:14.5px;line-height:1.55;color:var(--hsc-body);margin:0}

/* footnotes */
.hsc-root .hsc-card-cta{margin-top:24px;padding-top:22px;border-top:1px solid var(--hsc-line);text-align:center}
.hsc-root .hsc-card-cta .hsc-btn-lg{font-size:16px;padding:14px 34px}
.hsc-root .hsc-card-cta-fine{margin:10px 0 0;font-size:13px;color:var(--hsc-fg3)}

.hsc-root .hsc-foot{margin-top:22px;padding-top:16px;border-top:1px solid var(--hsc-line)}
.hsc-root .hsc-foot p{font-size:12px;line-height:1.6;color:var(--hsc-fg3);margin:0 0 6px}
.hsc-root .hsc-foot p:last-child{margin-bottom:0}
.hsc-root .hsc-foot a{color:var(--hsc-fg3);text-decoration:underline}
.hsc-root .hsc-foot a:hover{color:var(--hsc-primary)}

/* ---------- variant B: seats + reordered rate rows ---------- */
.hsc-root .hsc-field-row-seats{margin-bottom:15px}
.hsc-root .hsc-num-seats{width:88px}
.hsc-root .hsc-num-seats::-webkit-outer-spin-button,.hsc-root .hsc-num-seats::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.hsc-root .hsc-num-seats{-moz-appearance:textfield}
/* competitor rate row colour removed (Sam, 2026-08-20): see the SUPERSEDING
   note at the .hsc-rate-label rules - all rate rows are ink now */

/* variant B's results header now reuses the shared .hsc-eyebrow/.hsc-heading
   (the .hsc-b-header/.hsc-b-meta row and .hsc-seats-note were removed in the
   2026-08-18 B polish pass, along with the .hsc-assumptions footer, replaced
   by the shared .hsc-card-cta) */

/* ---------- variant B: legend ---------- */
.hsc-root .hsc-legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin:16px 0 22px}
.hsc-root .hsc-legend-item{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--hsc-fg2)}
.hsc-root .hsc-swatch{width:12px;height:12px;border-radius:3px 0 3px 0;flex:none;display:inline-block}
.hsc-root .hsc-swatch-platform{background:#d7deee}
.hsc-root .hsc-swatch-breeze{background:#a9a2e8}
.hsc-root .hsc-swatch-comp{background:#f0a9a2}
.hsc-root .hsc-swatch-us{background:#6658ea}

/* ---------- variant B: stacked bars ---------- */
.hsc-root .hsc-bars{position:relative;display:flex;flex-direction:column;gap:14px;padding-bottom:26px}
.hsc-root .hsc-bar-label-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px}
.hsc-root .hsc-bar-name{font-size:13.5px;font-weight:700;color:var(--hsc-ink)}
.hsc-root .hsc-bar-breakdown{font-size:13px;color:var(--hsc-fg3);text-align:right;font-variant-numeric:tabular-nums}
.hsc-root .hsc-bar-track-row{display:flex;align-items:center;gap:12px}
.hsc-root .hsc-bar-track{flex:1 1 auto;min-width:0;height:32px;border-radius:6px;background:#f5f7fc;display:flex;overflow:hidden}
.hsc-root .hsc-bar-seg{height:100%;display:block}
.hsc-root .hsc-bar-seg-platform{background:#d7deee}
.hsc-root .hsc-bar-seg-breeze{background:#a9a2e8}
.hsc-root .hsc-bar-seg-comp{background:#f0a9a2}
.hsc-root .hsc-bar-seg-us{background:#6658ea}
.hsc-root .hsc-bar-seg-hatch{background-color:transparent;background-image:repeating-linear-gradient(45deg,#f6cac6 0 5px,#fbe7e5 5px 10px)}
.hsc-root .hsc-bar-total{flex:0 0 152px;width:152px;text-align:right;white-space:nowrap;font-size:20px;font-weight:700;color:var(--hsc-ink);font-variant-numeric:tabular-nums}
.hsc-root .hsc-bar-row-us .hsc-bar-total{color:var(--hsc-primary)}

/* cheapest-total marker: overlay inset matches the 152px total column + gap so the
   line sits inside the track area, not across the total figures */
.hsc-root .hsc-marker-overlay{position:absolute;top:0;bottom:0;left:0;right:164px;pointer-events:none}
.hsc-root .hsc-marker-line{position:absolute;top:0;bottom:26px;width:0;border-left:1.5px dashed rgba(102,88,234,.55)}
.hsc-root .hsc-marker-label{position:absolute;bottom:4px;transform:translateX(-50%);font-size:11.5px;font-weight:600;color:var(--hsc-primary);white-space:nowrap}
.hsc-root .hsc-marker-mobile{display:none;font-size:12px;font-weight:600;color:var(--hsc-primary);text-align:center;margin:14px 0 0}

/* ---------- variant B: advice panel ---------- */
.hsc-root .hsc-advice{display:flex;gap:12px;background:rgba(102,88,234,.07);border-radius:var(--hsc-leaf-sm);padding:16px 18px;margin-top:22px}
.hsc-root .hsc-advice-icon{flex:none}
.hsc-root .hsc-advice-icon svg{display:block;width:19px;height:19px;margin-top:2px}
.hsc-root .hsc-advice-body{min-width:0}
.hsc-root .hsc-advice-eyebrow{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--hsc-primary);margin-bottom:6px}
.hsc-root .hsc-advice-bold{font-size:16.5px;font-weight:700;color:var(--hsc-ink);margin:0 0 6px}
.hsc-root .hsc-advice-detail{font-size:14.5px;line-height:1.55;color:var(--hsc-body);margin:0}

/* ---------- responsive ----------
   The CARD is the query container, so the compact layout triggers on the card's
   own width rather than the viewport: it works inside a 614px iframe embed AND
   inline in a narrow blog column on a wide screen. The full-width (>760px card)
   layout is unchanged. */
.hsc-root .hsc-card{container-type:inline-size;container-name:hsc}

/* heading: the short "conv/mo" form is phone-only (see the 430px container step) */
.hsc-root .hsc-head-short{display:none}

/* conversations label: "Monthly conv." is likewise phone-only, so the label
   holds one line in variant B's shared agents+conversations row */
.hsc-root .hsc-label-short{display:none}

/* settings disclosure: at full width it is simply always open, with no toggle */
.hsc-root .hsc-settings-toggle{display:none}
.hsc-root .hsc-settings{display:block}

@container hsc (max-width:760px){
  /* one column, DOM order: summary header, inputs, results */
  .hsc-root .hsc-grid{grid-template-columns:1fr;grid-template-rows:auto}
  .hsc-root .hsc-head{grid-column:1;grid-row:auto;padding:18px 20px 0}
  .hsc-root .hsc-in{grid-column:1;grid-row:auto;border-right:0;border-top:1px solid var(--hsc-line);border-bottom:1px solid var(--hsc-line);padding:20px 20px 18px}
  .hsc-root .hsc-res{grid-column:1;grid-row:auto;padding:20px 20px 22px}
  .hsc-root .hsc-slider{height:26px}

  /* rate sliders + msgs/conv collapse behind "Other calculation settings",
     sitting directly under the conversations slider */
  .hsc-root .hsc-settings-toggle{display:flex;align-items:center;gap:6px;margin-top:6px;padding:2px 0;background:none;border:0;cursor:pointer;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--hsc-fg2)}
  .hsc-root .hsc-settings-toggle:hover{color:var(--hsc-primary)}
  .hsc-root .hsc-settings-caret{font-size:11px;color:var(--hsc-fg3);transition:transform .18s ease}
  .hsc-root .hsc-settings-toggle[aria-expanded="true"] .hsc-settings-caret{transform:rotate(180deg)}
  .hsc-root .hsc-settings{display:none}
  /* open: a purple bar down the left edge indents the collapsible settings so
     it is obvious what belongs to the disclosure (Sam, 2026-08-20); a closing
     divider still separates them from what follows */
  .hsc-root .hsc-settings.hsc-open{display:block;padding-left:14px;border-left:3px solid rgba(102,88,234,.3);padding-bottom:14px;border-bottom:1px solid var(--hsc-line)}
  .hsc-root .hsc-settings>.hsc-divider:first-child{margin-top:12px}

  /* variant B: agents + conversations share a row to save vertical space */
  .hsc-root .hsc-seats-convos-row{display:grid;grid-template-columns:1fr 1.3fr;gap:10px;align-items:start}
  .hsc-root .hsc-seats-convos-row .hsc-field-row{display:block;margin-bottom:0}
  .hsc-root .hsc-seats-convos-row .hsc-label{margin-bottom:6px}
  .hsc-root .hsc-seats-convos-row .hsc-num{width:100%}

  /* results: tighter type, table stays three columns down to 430px */
  .hsc-root .hsc-heading{font-size:20px;margin-bottom:16px}
  .hsc-root .hsc-thead{padding:8px 12px;font-size:10px}
  .hsc-root .hsc-thead,.hsc-root .hsc-row{grid-template-columns:1.15fr .95fr .95fr;column-gap:8px}
  .hsc-root .hsc-row{padding:8px 12px}
  .hsc-root .hsc-row-label{font-size:12.5px}
  .hsc-root .hsc-row-breeze,.hsc-root .hsc-row-us{font-size:12.5px}
  .hsc-root .hsc-row-total{padding:11px 12px}
  .hsc-root .hsc-total-label{font-size:10.5px}
  .hsc-root .hsc-total-sub,.hsc-root .hsc-total-line{font-size:11px}
  .hsc-root .hsc-total-figure{font-size:20px}
  .hsc-root .hsc-total-eq{font-size:11.5px}

  .hsc-root .hsc-payoff{margin-top:12px;padding:12px 16px;gap:14px;flex-wrap:nowrap}
  .hsc-root .hsc-payoff-eyebrow{font-size:10.5px;margin-bottom:3px}
  .hsc-root .hsc-payoff-sub{font-size:12.5px}
  .hsc-root .hsc-payoff-figure{font-size:26px}
  .hsc-root .hsc-payoff-suffix{font-size:13px}
  .hsc-root .hsc-payoff-figure-label{display:none}
  .hsc-root .hsc-payoff-edge .hsc-payoff-copy{font-size:14px}

  .hsc-root .hsc-tick{margin-top:14px}
  .hsc-root .hsc-tick svg{width:17px;height:17px}
  .hsc-root .hsc-tick p{font-size:13px}

  .hsc-root .hsc-card-cta{margin-top:16px;padding-top:16px}
  .hsc-root .hsc-card-cta .hsc-btn-lg{font-size:15px;padding:12px 22px}
  .hsc-root .hsc-card-cta-fine{font-size:12px}

  /* variant B: the four-item legend is redundant once each bar carries its own
     "$X platform + $Y AI" breakdown, so it goes at narrow widths */
  .hsc-root .hsc-legend{display:none}

  /* variant B: each bar becomes name + total on one line, the track full
     width beneath, and the "$X platform + $Y AI" breakdown under the track.
     The Design-export zip had the breakdown display:none here, INCORRECT vs
     the approved canvas (Sam, 2026-08-20: it shows under the bar on mobile),
     and without it the segment colors are unexplained once the legend goes.
     display:contents dissolves the two desktop sub-rows so the four pieces
     can be placed on one grid. */
  .hsc-root .hsc-bars{gap:14px;padding-bottom:0}
  .hsc-root .hsc-bar-row{display:grid;grid-template-columns:1fr auto;column-gap:8px;row-gap:4px;align-items:baseline}
  .hsc-root .hsc-bar-label-row,.hsc-root .hsc-bar-track-row{display:contents}
  .hsc-root .hsc-bar-name{grid-column:1;grid-row:1;font-size:13px}
  .hsc-root .hsc-bar-total{grid-column:2;grid-row:1;justify-self:end;width:auto;font-size:18px}
  .hsc-root .hsc-bar-track{grid-column:1/-1;grid-row:2;height:22px;border-radius:5px}
  .hsc-root .hsc-bar-breakdown{grid-column:1/-1;grid-row:3;text-align:left;font-size:11.5px}

  /* the desktop overlay/line marker gives way to a plain text line */
  .hsc-root .hsc-marker-overlay{display:none}
  .hsc-root .hsc-marker-mobile{display:block;margin-top:10px}

  .hsc-root .hsc-advice{margin-top:14px;padding:14px}
  .hsc-root .hsc-advice-bold{font-size:14.5px}
  .hsc-root .hsc-advice-detail{font-size:13px}
}

/* deep compaction: phone widths */
@container hsc (max-width:430px){
  .hsc-root .hsc-head{padding:16px 16px 0}
  .hsc-root .hsc-in{padding:18px 16px 16px}
  .hsc-root .hsc-res{padding:18px 16px 20px}

  .hsc-root .hsc-heading{font-size:19px}
  .hsc-root .hsc-head-long{display:none}
  .hsc-root .hsc-head-short{display:inline}
  .hsc-root .hsc-label-long{display:none}
  .hsc-root .hsc-label-short{display:inline}

  /* variant A's receipt table keeps its three columns down to phone widths
     (approved Design canvas; the zip export INCORRECTLY re-stacked each row
     with the title as an eyebrow above the values here — the old pre-redesign
     420px pattern). The ≤760 rules above already size it for narrow cards, so
     no table rules are needed at this step. */

  .hsc-root .hsc-payoff{flex-wrap:wrap;gap:8px}
  .hsc-root .hsc-payoff-figure{font-size:24px}
}

/* =========================================================================
   Embed page shell - these rules sit OUTSIDE .hsc-root by necessity since
   they style the embed page's own <body> and the CTA below the widget
   (embeds/hubspot-savings-*.html), not the widget markup itself. Still
   .hsc- prefixed to stay obviously scoped to this feature.
   ========================================================================= */
.hsc-embed-body{
  margin:0;
  background:transparent;
  padding:8px; /* keeps the card's box-shadow from being clipped by the iframe edge */
  font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}

.hsc-cta{max-width:1040px;margin:20px auto 0;text-align:center}
.hsc-cta-fine{display:block;margin-top:10px;font-size:13px;color:#8d9aae}

.hsc-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-weight:700;font-size:15px;
  border:0;border-radius:.5rem 0 .5rem 0;padding:13px 26px;
  background:#6658ea;color:#fff;text-decoration:none;line-height:1.2;
  cursor:pointer;transition:all .18s ease;
}
.hsc-btn:hover{
  background:#564caf;color:#fff;
  transform:translateY(-2px);
  box-shadow:0 .75rem 1.5rem rgba(102,88,234,.3);
}

@media (max-width:420px){
  .hsc-embed-body{padding:6px}
}