/* =============================================================================
   ADS ROI CALCULATOR
   Block: acf/ads-calculator (template-parts/blocks/ads_calculator)

   Self-contained. Tokens live on .acalc, not :root, and every class is
   prefixed `acalc__`, so the block cannot leak into the rest of the theme —
   the same rule the trust_* family follows.
   Breakpoints 1200 / 1024 / 640. Figma draws 1440 and 360; the tablet layout
   (1024) is interpolated, as it was for the Trust blocks. Two rules sit
   outside that ladder and say why where they are: the heading's
   scroll-margin, which follows the theme header's own 767, and 480, where
   the niche cards become the phone frame's two-up cards and the slider scale's
   labels step down.
   ============================================================================= */

.acalc {
  --acalc-brand: #f15f62;
  --acalc-primary: #fda26b;
  --acalc-title: #1e1e1e;
  --acalc-text: #343434;
  --acalc-additional: #5c5c5c;
  --acalc-muted: #707070;
  --acalc-border: #f1f0ed;
  --acalc-border-dark: #c4b8ab;
  /* The nav icons' stroke. Neither end of the brand gradient: the arrows are
     drawn in their own darker orange (1195:11487, 1195:11488). */
  --acalc-icon: #e47e37;
  /* Border/additional — the slider's tick marks, a shade darker than the
     track so the scale reads against it (I1200:14742;3059:417). */
  --acalc-tick: #e5e1da;
  /* Figma's Background/default and Background/light. The block is not white:
     it is the warm off-white the whole page uses, and the cards, the select
     and the recap panel are the white that sits on top of it. Drawn as one
     colour the hairline grid between the niche cards had nothing to separate
     and the recap card no edge. */
  --acalc-bg: #f8f7f5;
  --acalc-surface: #ffffff;

  --acalc-font-titles: "Unbounded", -apple-system, BlinkMacSystemFont, sans-serif;
  --acalc-font-text: "SF Pro", -apple-system, BlinkMacSystemFont, sans-serif;

  /* The theme ships "SF Pro" in two weights only, 400 and 500 (css/style.css,
     the first two @font-face rules). Everything heavier — the design's
     Semibold and Bold — is a separate family, "SF Pro Display". Asking for 590
     or 700 in the first one does not fail loudly: the browser picks the 500
     face and the type simply comes out lighter than the frame, which is what
     had happened to the eyebrow, both buttons and the progress label. Figma
     writes those weights as 590 and 700 because it reads SF Pro's variable
     axis; the static faces here are 600 and 700. */
  --acalc-font-strong: "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif;

  --acalc-gap: 24px;
  --acalc-radius: 8px;

  /* The section's own padding, as a token because the header clearance below
     has to add to whatever it currently is. */
  --acalc-pad: 64px;

  /* Above and below the content, which the section Final frames (1205:13211)
     no longer draw at the side padding: every question hero ends 128px under
     its nav bar, and the entry screen starts 96px under the header where the
     questions start 64px under it. Step 7 keeps the plain padding until its
     own frame is taken on. */
  --acalc-pad-start: var(--acalc-pad);
  --acalc-pad-end: 128px;

  /* What the theme's fixed header covers when this block is the first thing
     on the page: 24px offset plus 83px of header. The same figure css/areas.css
     reserves on .ar-hero, and for the same reason — the top bar is in normal
     flow and shifts the header and the block by the same 55px, so it needs no
     offset of its own. */
  --acalc-header: 107px;

  /* One declaration of the brand gradient: the buttons, the progress bar, the
     lead panel, the glow under the buttons and the medallion behind every
     niche icon are all the same ramp at different alphas, and Figma draws it
     at 89.985deg — near enough to 90deg at these sizes, and the block already
     drew it that way. */
  --acalc-gradient: linear-gradient(90deg, var(--acalc-brand), var(--acalc-primary));
  --acalc-gradient-12: linear-gradient(90deg, rgb(241 95 98 / 12.5%), rgb(253 162 107 / 12.5%));

  position: relative;

  /* A stacking context of its own, so decoration drawn under a card — the
     state card's glow — can sit at z-index -1 between the card and the
     section's background, instead of under the whole page. */
  isolation: isolate;
  width: 100%;
  margin: 0;
  /* The decorative layer is drawn wider and taller than the block on purpose
     — the hero pattern is a 1440 square and the niche glow a 1282 one — and
     the Figma frames clip both at the page edge, so this does too. */
  overflow: hidden;
  padding: var(--acalc-pad-start) var(--acalc-pad) var(--acalc-pad-end);
  background: var(--acalc-bg);
  color: var(--acalc-text);
  font-family: var(--acalc-font-text);
}

/* 1195:10288 — the entry hero's content starts 64px into a frame whose
   header already leaves 32 under itself. Only while there is room for it:
   the tablet and phone frames give the entry the same start as the questions. */
@media (min-width: 1025px) {
  .acalc[data-step="1"] {
    --acalc-pad-start: calc(var(--acalc-pad) + 32px);
  }
}

.acalc[data-step="7"] {
  --acalc-pad-start: var(--acalc-pad);
  --acalc-pad-end: var(--acalc-pad);

  /* The results card's width (1715:12116), which its breadcrumbs share. */
  --acalc-results-width: 1312px;
}

/* Only when nothing precedes it, which is when the fixed header is over it.
   Measured on staging before this rule existed: the block's top sat at 55 and
   the header's bottom at 162, so its first 107px were behind the header and
   the breadcrumbs — the first thing it draws — were invisible. Further down a
   page the header is not over the block and this reserves nothing. */
.acalc:first-child {
  padding-top: calc(var(--acalc-header) + var(--acalc-pad-start));
}

/* The root is in the reset too: it carries the section padding, and without
   border-box a 100%-wide block overflows the viewport by that padding. */
.acalc,
.acalc *,
.acalc *::before,
.acalc *::after {
  box-sizing: border-box;
}

/* -----------------------------------------------------------------------------
   Step machinery — every step is in the DOM; only the current one is shown.
   -------------------------------------------------------------------------- */
.acalc__step {
  display: none;
  /* The containing block for the decoration a step owns — the niche glow.
     A <fieldset> is not positioned by default, so without this the glow
     would resolve against the section and drift with the step's height. */
  position: relative;
  border: 0;
  margin: 0;
  padding: 0;
}

/* Step 2: the niche grid is the full 928px content column of the frame
   (1195:11221, 8px of inset round a 912px grid), wider than the 720px column
   the copy sits in. The copy keeps its own cap (see .acalc__title and
   .acalc__text); only the step opens up. */
.acalc[data-step="2"] .acalc__step[data-step="2"] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 928px;
  margin-inline: auto;
  text-align: center;
}

/* Steps 3–6: a single centered column of copy and controls. */
.acalc[data-step="3"] .acalc__step[data-step="3"],
.acalc[data-step="4"] .acalc__step[data-step="4"],
.acalc[data-step="5"] .acalc__step[data-step="5"],
.acalc[data-step="6"] .acalc__step[data-step="6"] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

/* Figma puts the eyebrow, the question and its lead in one 8px stack and then
   32px of air before the form (1195:11217 inside 1195:11212). The gap above is
   the stack's; this is the rest of the 32px, for the form, the button and the
   nav bar alike. */
.acalc__step:not([data-step="1"]) > .acalc__text ~ * {
  margin-top: 24px;
}

/* Step 1: the entry screen. 928 wide, because the title is (1195:10295) — at
   720 it broke into three lines where the frame has two; the lead keeps its
   own 720. No vertical padding of its own any more: the frame spaces it with
   64 under the breadcrumbs and 128 under the button, which are the crumbs'
   margin and the section's --acalc-pad-end. */
.acalc[data-step="1"] .acalc__step[data-step="1"] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  max-width: 928px;
  margin-inline: auto;
  text-align: center;
}

.acalc__step[data-step="1"] .acalc__next {
  margin-top: 32px;
}

/* The one gap the design changes between its two frames: 64px under the entry
   title at 1440, 32px at 360. */
@media (min-width: 1025px) {
  .acalc__step[data-step="1"] .acalc__text {
    margin-top: 32px;
  }
}

/* A grid item's automatic minimum is its min-content, not zero, and on this
   screen two of them have a wide one: the lead form's is a row of two
   24px-padded fields, and the metrics' is six figures like "~2 months". At
   375 the single column grew to 401px to fit whichever was wider and dragged
   the rest out with it — and .acalc's overflow-x: hidden cut the overhang off
   without a scrollbar to show for it, so nothing looked wrong until the right
   edge of the card was measured. Every child of the grid, so that fixing the
   widest one cannot simply promote the next.

   It is what lets the theme's own `flex-wrap` stack the form's pairs below
   767, too. */
.acalc[data-step="7"] .acalc__step[data-step="7"] > * {
  min-width: 0;
}

/* Step 7 (1715:12116): one 1312px card in two halves with nothing between
   them — the results on the warm off-white on the left, the gradient lead
   panel on the right, both as tall as the taller. */
.acalc[data-step="7"] .acalc__step[data-step="7"] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: var(--acalc-results-width);
  margin-inline: auto;
  text-align: left;
}

/* Without a working wizard nothing sets data-step past 1, so step 7's form
   has to stand on its own — spec §10 requires the contact to be collectable
   always. The switch is the acalc--js marker (block.php sets it before first
   paint, calculator.js sets it again as its first act) rather than a
   <noscript> rule, because a module that 404s or throws leaves scripting
   enabled and <noscript> blind to it.

   The step itself must stop being display:none — a hidden ancestor hides its
   children regardless of their own display. The form needs no rule of its
   own: once the step is visible the form's own `display: flex` applies, and
   its grid placement is simply ignored outside a grid. */
.acalc:not(.acalc--js) .acalc__step[data-step="7"] {
  display: block;
}

/* Nothing computed anything, so the placeholders would read as results. */
.acalc:not(.acalc--js) .acalc__step[data-step="7"] .acalc__results {
  display: none;
}

/* The intro's only control moves the wizard on, so without the wizard it is
   a button that goes nowhere. The progress bar and the back/restart controls
   need no rule: they live inside steps 2–6, which stay hidden. */
.acalc:not(.acalc--js) .acalc__step[data-step="1"] .acalc__next {
  display: none;
}

/* Printed on every render and hidden the moment the block is claimed, so the
   explanation shows in exactly the states where the form stands alone. */
.acalc__noscript {
  margin: 0;
  font: 400 16px/1.5 var(--acalc-font-text);
  color: var(--acalc-text);
  text-align: center;
}

.acalc--js .acalc__noscript {
  display: none;
}

/* -----------------------------------------------------------------------------
   Decoration

   Everything here is drawn for the eye only: aria-hidden in the markup and
   pointer-events: none here, so none of it can take a click from a control
   underneath or a line from a screen reader.

   The files live in decor/ and are referenced relative to this stylesheet,
   which init.php enqueues from the block's own folder: three vectors, and the
   lead panel's pattern, the one raster, as a compressed WebP.
   -------------------------------------------------------------------------- */

/* Figma 1295:8407 and 1719:13199 — the outline-icon pattern behind the entry
   screen, its own gradient fading it out towards the top-left; no extra
   opacity, the vector carries the fade. The two frames agree on one rule: a
   square the size of the hero's longer side, centred — 1440 wide at 1440,
   665 tall on the 665px hero at 360. That is `cover` on the whole section,
   which is also what keeps it filling the hero when the copy wraps
   differently. The previous square took the width only and left the top and
   bottom of a phone-sized hero bare. */
.acalc__hero-pattern {
  display: none;
  position: absolute;
  inset: 0;
  background: url("decor/hero-pattern.svg") center / cover no-repeat;
  pointer-events: none;
}

.acalc[data-step="1"] .acalc__hero-pattern {
  display: block;
}

/* Figma 1195:11248 "Ellipse 457" — a 322px gradient circle, as tall as the
   card grid, under a 180px blur and centred on it (the 360 frame's 1720:13554
   is 328, as wide as its grid; one file serves both). The file is the blur's
   full extent, 322 + 2 × 360, which is why the box is 1042 and not 322. A
   fixed width rather than a percentage: the glow has to spill past the grid
   the way it does in the design, and the section's overflow crops it at the
   block edge. */
.acalc__industries-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 1042px;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  background: url("decor/industry-glow.svg") center / 100% 100% no-repeat;
  pointer-events: none;
}

/* The glow's containing block, and a stacking context of its own so the
   glow's negative z-index lands under the cards rather than under the
   section's background. */
.acalc__industries {
  position: relative;
  z-index: 1;
}

/* Figma I1195:11388;3018:396 — the glow under a button: a 48px band of the
   same gradient, blurred 24px at half opacity, aligned to the button's
   bottom edge. `isolation` makes the button its own stacking context so the
   negative z-index lands behind the button and not behind whatever section
   background happens to be painted under it. */
.acalc__btn {
  position: relative;
  isolation: isolate;
}

.acalc__btn::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: 48px;
  background: var(--acalc-gradient);
  filter: blur(24px);
  opacity: 0.5;
  pointer-events: none;
}

/* The chevron the button component carries in Figma (I1195:11388;2:140), a
   24px `M9 18L15 12L9 6` at 2px with round joins. A mask painted in
   currentColor rather than an <img>, so it needs no markup on five buttons
   and no second request, and it follows the label's colour.

   ::before with order, not ::after: the glow already owns ::after, and the
   icon follows the label in the design. A pseudo-element is a flex item like
   any other, so `order` puts it last. */
.acalc__btn::before {
  content: "";
  order: 1;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M9 18L15 12L9 6"/%3E%3C/svg%3E') center / contain no-repeat;
  mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M9 18L15 12L9 6"/%3E%3C/svg%3E') center / contain no-repeat;
}

/* A button that cannot be pressed should not look lit. */
.acalc__btn:disabled::after {
  display: none;
}

/* -----------------------------------------------------------------------------
   The one rule in this file that names something outside the block.

   The theme's floating "Book a Call" button is fixed at z-index 99 and is
   96px across on mobile, and on this page it lands on top of the calculator's
   controls: elementFromPoint at the centre of the General Contractor card
   returns `book-call-btn__inner`, so the card cannot be pressed there at all.
   Raising the block above it only trades one problem for another — the
   widget then hides behind the cards and reads as a rendering fault.

   Hidden on pages carrying the block, and only there: the calculator has its
   own call to action, the lead form on step 7. :has() keeps this scoped to
   those pages without a body class, so the block stays self-contained.
   -------------------------------------------------------------------------- */
body:has(.acalc) .book-call-btn {
  display: none;
}

/* -----------------------------------------------------------------------------
   Breadcrumbs (Figma 1195:10289 on the intro, 1205:12078 on the results)

   Separators and the crumb for wherever the visitor is are drawn at 25%; the
   crumbs that lead somewhere are at full strength.
   -------------------------------------------------------------------------- */
/* Only the two frames that draw them: the intro and the results. The five
   question steps carry the eyebrow instead — checked against 1200:14833 and
   its siblings, none of which contains a Breadcrumbs frame. */
.acalc__crumbs {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px;
  /* 14px Medium, uppercase, like the theme's .hero__breadcrumb. The colour is
     the frames' rather than that component's #707070: both the entry and the
     results (1195:10291, 1715:12055) draw the separators and the last crumb
     in #2a2a2a at 25%, which reads much paler than the theme's grey. */
  font: 500 14px/normal var(--acalc-font-text);
  text-transform: uppercase;
  color: rgb(42 42 42 / 25%);
}

.acalc[data-step="1"] .acalc__crumbs,
.acalc[data-step="7"] .acalc__crumbs {
  display: flex;
}

/* 1195:10288 and 1719:13202 space the entry's breadcrumbs 64 above the title
   at both widths. */
.acalc[data-step="1"] .acalc__crumbs {
  margin-bottom: 64px;
}

/* Grey is the ground, so only the links and the segments behind the visitor
   lift out of it. */
.acalc__crumb {
  color: inherit;
  text-decoration: none;
}

a.acalc__crumb {
  color: var(--text-main, #2a2a2a);
}

a.acalc__crumb:hover,
a.acalc__crumb:focus-visible {
  color: var(--acalc-brand);
}



/* On the results the calculator is behind the visitor, so it reads as a
   segment of the path and Results becomes the grey last crumb.

   1715:12055 starts the trail on the card's left edge, not the section's. The
   two agree up to 1440, where the section's padding is the card's margin, and
   parted above it: the card is capped at 1312 and centred, and the trail
   stayed at the padding — 36px left of the card at 1512, 144 at 1728, 240 at
   1920. The trail now has the card's width and centring, so it starts where
   the card does at every width. */
.acalc[data-step="7"] .acalc__crumbs {
  justify-content: flex-start;
  max-width: var(--acalc-results-width);
  margin-inline: auto;
}

.acalc[data-step="7"] .acalc__crumb--here {
  color: var(--text-main, #2a2a2a);
}

.acalc__crumb--results,
.acalc__crumb-sep--results {
  display: none;
}

.acalc[data-step="7"] .acalc__crumb--results,
.acalc[data-step="7"] .acalc__crumb-sep--results {
  display: inline;
}

/* -----------------------------------------------------------------------------
   Type scale and shared pieces
   -------------------------------------------------------------------------- */
.acalc__eyebrow {
  display: block;
  margin: 0;
  padding: 0;
  font: 700 14px/1.125 var(--acalc-font-strong);
  text-transform: uppercase;
  color: var(--acalc-brand);

  /* The step's flex `gap` never reaches this one: a <legend> is rendered by
     the fieldset rather than laid out as a flex item, so it sits flush against
     the title. The 8px the design puts there has to be its own margin. */
  margin-bottom: 8px;
}

/* The eyebrow is not brand-red, it is the brand gradient poured into the
   glyphs (Figma 1298:23466 paints the text transparent over the same ramp as
   the buttons). The flat colour above stays as the fallback: a browser
   without background-clip would otherwise render the word invisible. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .acalc__eyebrow {
    background: var(--acalc-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* One rule for what both titles share; the sizes differ per level and are set
   below. The block prints the entry title as <h1> and every question title as
   <h2>, which is the same split the design draws. */
.acalc__title {
  margin: 0;
  font: 500 24px/1.25 var(--acalc-font-titles);
  color: var(--acalc-title);
  text-align: center;
  max-width: 720px;
  margin-inline: auto;

  /* calculator.js focuses this on every step change, and the browser then
     scrolls it to the top of the viewport — where the theme's fixed header
     is. Measured on staging, scrolled, with the top bar out of the way:
     `.site-header` sits at top 24px and is 83.08px tall, so 107.08px of the
     viewport is covered and 112 clears it. The header's own breakpoint is
     767px, not one of this block's, which is why the mobile value below is
     keyed to the header's and not to 640. */
  scroll-margin-top: 112px;
}

/* Figma 1195:10295. The entry title is a landing headline, not a question:
   a landing headline against the questions' 24px. Two frames give it: 360
   draws it Unbounded Medium 32/1.25 (1719:13208), 1440 draws it Bold 72/1.125
   (1195:10295), across the full 928px content column. The size ramps between
   them; the weight cannot, so it steps at the block's own 1024 breakpoint. */
h1.acalc__title {
  max-width: 928px;
  font: 500 clamp(32px, 5vw, 72px) / 1.25 var(--acalc-font-titles);
}

@media (min-width: 1025px) {
  h1.acalc__title {
    font-weight: 700;
    line-height: 1.125;
  }
}

/* Figma 1195:10295 underlines the tail of the entry title with a wavy brand
   rule. block.php only wraps this span when the accent field really is the end
   of the title, so the rule cannot land on the wrong words.

   Drawn as a repeating SVG rather than `text-decoration: wavy`: the design's
   wave has round ends and a round crest, and CSS gives no control over either.

   The tile begins and ends on a crest, which is the whole trick. The first
   attempt put the seam on the rising midline, where the stroke is steep: the
   round cap there juts diagonally past the tile, `background-repeat` clips it
   at the edge, and every seam showed as a notch. On a crest the curve is
   horizontal, so the cap extends flat along the edge and what the clip removes
   is exactly what the next tile draws back. */
.acalc__title-accent {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 28"%3E%3Cpath d="M0 4 C8 4 16 24 24 24 S40 4 48 4" fill="none" stroke="%23f15f62" stroke-width="8" stroke-linecap="round"/%3E%3C/svg%3E');
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: 0.67em 0.39em;

  /* The accent is one phrase and the wave is drawn along it, so a line break
     inside it leaves a stub of wave hanging after the first fragment. Keeping
     it whole moves the break to the space before it instead, which is where
     the design's own 360 frame puts it. */
  white-space: nowrap;

  /* Inline padding grows the background box without touching the line box, so
     the wave clears the descenders and still does not push the lines apart. */
  padding-bottom: 0.42em;
}

/* top: 12px + 55.76px tall = 67.76px covered. css/areas.css rounds the same
   pair to 68 for .ar-hero's clearance, so the token below follows it. */
@media (max-width: 767px) {
  .acalc {
    --acalc-header: 68px;
  }

  .acalc__title {
    scroll-margin-top: 72px;
  }
}

/* -----------------------------------------------------------------------------
   Off-screen for sighted visitors, read by assistive technology. Two users:

   - `.acalc__announcer`, which calculator.js writes the new step's title into
     on every real step change, so a screen reader hears the change instead of
     silence;
   - step 7's heading. Every step change moves focus to `.acalc__title` and
     announces it (spec §10), and the approved results frame has no heading to
     use, so it carries one that costs the layout nothing.

   The standard clip-rect pattern, not display:none or visibility:hidden: both
   of those hide content from assistive technology too, which would leave the
   announcer with nothing to announce.

   Has to stay below `.acalc__title`, because step 7's heading carries both
   classes and they collide on margin.
   -------------------------------------------------------------------------- */
.acalc__announcer,
.acalc__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.acalc__text {
  max-width: 720px;
  margin: 0 auto;
  font: 400 16px/1.5 var(--acalc-font-text);
  color: var(--acalc-text);
  text-align: center;
}

/* 1195:10296 — the entry lead is a size up from the questions' and rides on
   28px lines. Keyed to the step rather than a class of its own: the step
   number is already in the markup and is what makes it the entry. */
.acalc__step[data-step="1"] .acalc__text {
  font-size: 20px;
  line-height: 1.4;
}

.acalc__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* The component nests two boxes: a 12px-padded Background and a Text box
     inside it padded 8px sideways. Flattened, that is 20px before the label
     and 12px after the icon — the asymmetry is the design's, not a slip. */
  padding: 12px 12px 12px 20px;
  border: 0;
  /* The Background node has no corner radius. Neither does the outlined
     button in the site header the same design draws, so square is the brand's
     button shape here rather than an omission. */
  border-radius: 0;
  background: var(--acalc-gradient);
  color: #fff;
  font: 600 16px/1.25 var(--acalc-font-strong);
  text-transform: capitalize;
  cursor: pointer;
}

/* Every button the frames draw hugs its label — 267 on the entry, 228 for
   "Continue Calculation", 123 for "Results" — at 1440 and 360 alike. It was
   a 320px bar, which on a phone read as a second full-width field. */
.acalc__next {
  justify-content: center;
}

/* Figma I1203:11197;2:140 — the last question's button trades the chevron
   for a confetti popper (Lucide's party-popper, ISC). Same mask technique and
   the same 2px round stroke, so it follows the label's colour too. */
.acalc__next--results::before {
  -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M5.8 11.3L2 22L12.7 18.21M4 3H4.01M22 8H22.01M15 2H15.01M22 20H22.01"/%3E%3Cpath d="M22 2L19.76 2.75C19.12 2.96 18.58 3.39 18.22 3.96C17.86 4.53 17.71 5.2 17.8 5.87C17.9 6.73 17.23 7.5 16.35 7.5H15.97C15.11 7.5 14.37 8.1 14.21 8.94L14 10M22 13L21.18 12.67C20.32 12.33 19.36 12.87 19.2 13.78C19.09 14.48 18.48 15 17.77 15H17M11 2L11.33 2.82C11.67 3.68 11.13 4.64 10.22 4.8C9.52 4.9 9 5.52 9 6.23V7"/%3E%3Cpath d="M11 13C12.93 14.93 13.83 17.17 13 18C12.17 18.83 9.93 17.93 8 16C6.07 14.07 5.17 11.83 6 11C6.83 10.17 9.07 11.07 11 13Z"/%3E%3C/svg%3E');
  mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M5.8 11.3L2 22L12.7 18.21M4 3H4.01M22 8H22.01M15 2H15.01M22 20H22.01"/%3E%3Cpath d="M22 2L19.76 2.75C19.12 2.96 18.58 3.39 18.22 3.96C17.86 4.53 17.71 5.2 17.8 5.87C17.9 6.73 17.23 7.5 16.35 7.5H15.97C15.11 7.5 14.37 8.1 14.21 8.94L14 10M22 13L21.18 12.67C20.32 12.33 19.36 12.87 19.2 13.78C19.09 14.48 18.48 15 17.77 15H17M11 2L11.33 2.82C11.67 3.68 11.13 4.64 10.22 4.8C9.52 4.9 9 5.52 9 6.23V7"/%3E%3Cpath d="M11 13C12.93 14.93 13.83 17.17 13 18C12.17 18.83 9.93 17.93 8 16C6.07 14.07 5.17 11.83 6 11C6.83 10.17 9.07 11.07 11 13Z"/%3E%3C/svg%3E');
}

/* calculator.js disables a slider step's button while its figure has been
   cleared: the field then reads the design's muted "$0" and there is no
   answer to carry on with. */
.acalc__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* -----------------------------------------------------------------------------
   Industry grid (step 2)

   1195:11222 at 1440: three fluid columns of 160px cards, 2px apart, inside
   8px of inset. The seams are not drawn any more — the frame leaves them
   transparent, so what shows between the cards is the glow behind the grid,
   and the grid has no outer border either.
   -------------------------------------------------------------------------- */
.acalc__industries {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  /* 160 is the frame's row. The floor rather than a fixed height, and every
     row the height of the tallest: on a tablet the narrower cards wrap
     "General Contractor" onto two lines, and a fixed 160 would let the label
     run out of the card while the row beside it stayed short. */
  grid-auto-rows: minmax(160px, 1fr);
  gap: 2px;
  width: 100%;
  padding: 8px;
}

.acalc__industry {
  display: flex;
  flex-direction: column;
  align-items: center;

  /* 1195:11223 stacks the medallion and label at the bottom of the card, not
     in its middle, so a label that wraps grows the card upwards and every
     label keeps its baseline. */
  justify-content: flex-end;
  gap: 16px;
  padding: 24px 16px;
  border: 0;
  background: var(--acalc-surface);
  color: var(--acalc-title);
  cursor: pointer;
}

/* background-image, not the `background` shorthand: the shorthand also clears
   the image, and a selected card being hovered would lose its gradient for as
   long as the pointer sat on it. Keyboard focus keeps the flat tint — the
   focus ring is what marks it, and stacking a gradient under a ring that is
   already the same red only muddies it. */
.acalc__industry:hover {
  background-image: var(--acalc-gradient-12);
}

.acalc__industry:focus-visible {
  background-color: var(--acalc-border);
}

/* The outline stays: it is the only cue on the card that does not depend on
   seeing colour. The gradient is what §4.5 of the handoff asked for — the
   design has no selected state to copy, so the card borrows the medallion's
   own 12.5% ramp rather than a new colour. */
.acalc__industry[aria-pressed="true"] {
  outline: 2px solid var(--acalc-brand);
  outline-offset: -2px;
  background-image: var(--acalc-gradient-12);
}

/* Figma 1195:11226: SF Pro Bold 16, uppercase, on one line in every card at
   1440. The 360 frame switches to Unbounded in title case; that was decided
   against, so the label reads the same at every width and only its size
   steps down (see ≤640). Bold is SF Pro Display here — the "SF Pro" family
   has no 700 face. */
.acalc__industry-label {
  font: 700 16px/normal var(--acalc-font-strong);
  text-transform: uppercase;
}

/* Figma 1195:11224 and its five twins: a 72px round medallion carrying the
   brand gradient at 12.5%, one behind every icon, in every state. The frame
   declares 16 of padding round a 48px icon, which does not add up to 72; the
   icon is what it draws at 48, so the padding is the 12 that fits. */
.acalc__industry-medallion {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  padding: 12px;
  border-radius: 9999px;
  background-image: var(--acalc-gradient-12);
}

/* hvac (62×62), roofing (75×67) and plumbing (73.9×68) are not square, but
   block.php prints width="64" height="64" on the <img>. object-fit keeps every
   icon's own proportions inside the square box instead of squashing the
   non-square ones to fit it. */
.acalc__industry-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

/* -----------------------------------------------------------------------------
   State map (step 3)
   -------------------------------------------------------------------------- */
/* 1200:14843 at 1440: a 720 card with 32 of padding round a 656px map, 40
   under the lead and 40 above the nav bar. 1720:14169 at 360: 8px in from the
   column, 64 above the map and 16 under the picker, 32 between them.
   Compounded with .acalc__panel so the order of the two rules cannot matter. */
.acalc__panel.acalc__panel--state {
  /* The card's padding, which the zoomed map is allowed into (see
     .acalc__map-view). */
  --acalc-state-pad: 32px;

  /* The containing block for the glow below — and not a stacking context,
     so the glow's negative z-index can go under the card's own white. */
  position: relative;
  gap: 16px;
  padding: var(--acalc-state-pad);
}

/* 1282:8094 "Ellipse 457": a 476px circle as tall as the card, under the same
   180px blur as the niche grid's, centred on the card and behind it. The
   section is an isolated stacking context (see .acalc), so -1 lands between
   the section's background and the card rather than under the page. */
.acalc__panel--state::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 1196px;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  background: url("decor/state-glow.svg") center / 100% 100% no-repeat;
  pointer-events: none;
}

.acalc__step > .acalc__text ~ .acalc__panel--state {
  margin-top: 32px;
}

.acalc__step > .acalc__panel--state ~ .acalc__nav {
  margin-top: 32px;
}

/* The phone's Continue (1720:14331). The 1440 frame hides it (1200:14846):
   there a click on the map is the answer. A state picked from the select
   instead — the keyboard's way in — does not move on by itself
   (calculator.js), so it brings the button out. */
.acalc__step > .acalc__panel--state ~ .acalc__next {
  display: none;
}

.acalc__step.is-listed > .acalc__panel--state ~ .acalc__next {
  display: inline-flex;
  margin-top: 32px;
}

.acalc__map {
  position: relative;
  width: 100%;
}

/* The frame the map zooms inside. Not the map's own box: 1758:16017 runs the
   doubled map out to the edges of the card, so the crop is the card — this
   box grown by the card's padding on every side. It is a clip-path here
   rather than overflow on the card because the card's glow hangs far outside
   it, and would be cut off with the map. */
.acalc__map-view {
  clip-path: inset(calc(-1 * var(--acalc-state-pad)));
}

/* Except while the select is out under the map, where the keyboard has
   brought it: the bottom padding is then the gap above the select, and a
   zoomed map there would cover the top of it. */
.acalc__panel--state:has(.acalc__state-select:focus) .acalc__map-view {
  clip-path: inset(calc(-1 * var(--acalc-state-pad)) calc(-1 * var(--acalc-state-pad)) 0);
}

.acalc__map svg {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}

.acalc__map-view.is-zoomed svg {
  transform: scale(2);
}

.acalc__map path {
  fill: var(--acalc-border);
  stroke: #fff;
  stroke-width: 1;
  cursor: pointer;
}

/* us-map.js gives every state a tabindex so the keyboard can reach the map,
   which means a click focuses one too and the browser rings it. A rectangle
   round a state is the wrong shape for the thing it is marking, and the mark
   below already lights the state itself on focus — so the ring goes and the
   mark does the work for pointer and keyboard alike. */
.acalc__map path:focus,
.acalc__map path:focus-visible {
  outline: none;
}

/* A path the config does not list must not look clickable. */
.acalc__map path.is-inert {
  pointer-events: none;
  opacity: 0.5;
}

/* Figma 1530:20501 and 1720:14502: the hovered and the picked state alike,
   Background/alt under a 2px outline in the brand ramp. Drawn by us-map.js as
   a copy of the state's outline laid over the whole map. */
.acalc__map .acalc__map-mark {
  fill: var(--acalc-tick);
  stroke: url("#acalc-map-outline");
  stroke-width: 2;
  stroke-linejoin: round;
  pointer-events: none;
}

/* The zoom doubles every stroke with the map. The white borders are meant to
   thicken with it — 1662:12365 draws them at twice the width — but the lit
   outline stays 2px, so it gives the doubling back. vector-effect:
   non-scaling-stroke cannot do this: it measures against the SVG's own
   transforms, and this one is a CSS transform on the <svg> element; the
   outline measured 4px with it on. */
.acalc__map-view.is-zoomed .acalc__map-mark {
  stroke-width: 1;
}

/* Figma 1530:20624: a white box with a 24px arrow under it, 16 of which show,
   and one soft shadow for both. us-map.js puts `left`/`top` on the tip and the
   arrow's offset in --acalc-tip, so the box can slide to stay inside the map
   while the arrow stays on its point. */
.acalc__map-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  transform: translateY(calc(-100% - 16px));
  padding: 8px 16px;
  background: #fff;
  filter: drop-shadow(0 8px 8px rgb(0 0 0 / 13%));
  font: 400 16px/1.5 var(--acalc-font-text);
  color: var(--acalc-text);
  white-space: nowrap;
  pointer-events: none;
}

.acalc__map-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: var(--acalc-tip, 50%);
  border: 12px solid transparent;
  border-top: 16px solid #fff;
  border-bottom: 0;
  transform: translateX(-50%);
}

@media (prefers-reduced-motion: reduce) {
  .acalc__map svg {
    transition: none;
  }
}

/* The phone's picker (1720:14329, open in 1720:14516). Only on a phone and
   only once the wizard runs; see the ≤640 rules. */
.acalc__combo {
  display: none;
  position: relative;
  width: 100%;
}

/* Background/additional under a Border/additional hairline when closed, the
   active red at 2px when open. The padding gives back what the border takes,
   so the field is 48 in both. */
.acalc__combo-field {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 3px;
  border: 1px solid var(--acalc-tick);
  background: var(--acalc-border);
}

.acalc__combo.is-open .acalc__combo-field {
  padding: 2px;
  border: 2px solid #d9454d;
}

/* The theme styles every input[type=text] (0,1,1) — height, padding, a
   border — so the root goes in front of the class to out-rank it. */
.acalc .acalc__combo-input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  font: 400 16px/1.5 var(--acalc-font-text);
  color: #0c0c0c;
}

.acalc .acalc__combo-input::placeholder {
  color: var(--acalc-muted);
  opacity: 1;
}

.acalc .acalc__combo-input:focus {
  outline: none;
}

/* The chevron in its 40px button: down in the icon orange when closed, up in
   the text's near-black when open (I1720:14516;58:3674). */
.acalc__combo-toggle {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 8px;
  border: 0;
  background: none;
  color: var(--acalc-icon);
  cursor: pointer;
}

.acalc__combo-toggle::before {
  content: "";
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M6 10L12 16L18 10"/%3E%3C/svg%3E') center / contain no-repeat;
  mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M6 10L12 16L18 10"/%3E%3C/svg%3E') center / contain no-repeat;
}

.acalc__combo.is-open .acalc__combo-toggle {
  color: #0c0c0c;
}

.acalc__combo.is-open .acalc__combo-toggle::before {
  transform: rotate(180deg);
}

/* 4 under the field, laid over what follows rather than pushing it down —
   the frame's list runs over the button and the nav bar. */
.acalc__combo-drop {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 3;
  max-height: 320px;
  padding: 8px;
  overflow-y: auto;
  border: 1px solid #d9454d;
  background: var(--acalc-surface);
  scrollbar-color: var(--acalc-border) var(--acalc-bg);
}

.acalc__combo-drop[hidden] {
  display: none;
}

/* I1720:14516;3177:659: a 16px gutter, a 4px inset, and a pale thumb with a
   hairline. WebKit only draws all of it; scrollbar-color above is the rest. */
.acalc__combo-drop::-webkit-scrollbar {
  width: 16px;
}

.acalc__combo-drop::-webkit-scrollbar-track {
  border: 4px solid var(--acalc-surface);
  background: var(--acalc-bg);
}

.acalc__combo-drop::-webkit-scrollbar-thumb {
  border: 4px solid transparent;
  background: var(--acalc-tick) padding-box;
  box-shadow: inset 0 0 0 1px var(--acalc-tick);
}

.acalc__combo-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 40px rows: 8 of item padding round a text box padded 8 across and 2 down,
   SF Pro Semibold 16. The picked one carries the check before its name, which
   moves the name along by the check's 24. */
.acalc__combo-option {
  position: relative;
  padding: 10px 16px;
  font: 600 16px/1.25 var(--acalc-font-strong);
  color: var(--acalc-text);
  text-align: left;
  text-transform: capitalize;
  cursor: pointer;
}

.acalc__combo-option[hidden] {
  display: none;
}

.acalc__combo-option:hover,
.acalc__combo-option.is-active {
  background: var(--acalc-bg);
}

.acalc__combo-option[aria-selected="true"] {
  padding-left: 40px;
  color: #0c0c0c;
}

.acalc__combo-option[aria-selected="true"]::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M20 6L9 17L4 12"/%3E%3C/svg%3E') center / contain no-repeat;
  mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M20 6L9 17L4 12"/%3E%3C/svg%3E') center / contain no-repeat;
}

.acalc__combo-empty {
  margin: 0;
  padding: 10px 16px;
  font: 400 16px/1.25 var(--acalc-font-text);
  color: var(--acalc-muted);
  text-align: left;
}

/* The theme sets `height: 43px` on every select (css/style.css, in the list
   that starts at input[type="text"]). With border-box that leaves 43 − 24 of
   padding − 2 of border = 17px for a 16px line, and the descenders of
   "California" were cut off. The theme's rule is `select`, one element and no
   class, so this class beats it; `height: auto` hands the box back to the
   padding, and the min-height keeps the 48px tap target. */
.acalc__state-select {
  width: 100%;
  max-width: 320px;
  height: auto;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--acalc-border-dark);
  border-radius: var(--acalc-radius);
  background: var(--acalc-surface);
  font: 400 16px/1.5 var(--acalc-font-text);
  color: var(--acalc-text);
}

/* Figma 1200:14843 puts nothing on this card but the map: to a pointer, the
   map is the control, and the dropdown beside it is a second way to answer a
   question that only has one. It still has to exist — an SVG map is no use to
   a keyboard or a screen reader. So above 640 it is taken out of sight but
   not out of the page, and it comes back the instant it takes focus: a
   control the keyboard can reach and nobody can see is worse than either. */
@media (min-width: 641px) {
  .acalc__state-select {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .acalc__state-select:focus {
    position: static;
    width: 100%;
    height: auto;
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid var(--acalc-border-dark);
    overflow: visible;
    clip-path: none;
  }
}

/* -----------------------------------------------------------------------------
   Sliders (steps 4–6: budget, average job value, close rate)
   -------------------------------------------------------------------------- */
/* Figma 1200:14843 and 1200:14741 are the same card: every question after the
   niche grid puts its control on white, 64px in, capped at 720. The slider
   steps need no wrapper of their own — .acalc__slider already holds exactly
   what that card holds, so it carries the class rather than gaining a parent. */
.acalc__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  width: 100%;
  max-width: 720px;
  padding: 64px;
  background: var(--acalc-surface);
}

/* 1205:12074 draws the results screen on Background/light. The questions keep
   the warm off-white; only the payoff screen turns white, and the recap card's
   own border is what keeps it legible once the two match. */
.acalc[data-step="7"] {
  background: var(--acalc-surface);
}

/* 1200:14741 — the slider card is shorter than the state's: 48 above the
   figure, 64 below the scale, and 16 between the figure and the control
   (32 at 360, 1720:15624). The gap is a token because the scale's negative
   margin below has to give exactly that much back. */
.acalc__slider {
  --acalc-panel-gap: 16px;

  gap: var(--acalc-panel-gap);
  padding: 48px 64px 64px;
}

/* Where the frame puts the slider card in its step (1200:14503): 64 under the
   lead, the button 48 under the card, and the nav bar 64 under the button.
   Each is the step's 8px flex gap plus this. */
.acalc__step > .acalc__text ~ .acalc__slider {
  margin-top: 56px;
}

.acalc__step > .acalc__slider ~ .acalc__next {
  margin-top: 40px;
}

.acalc__step > .acalc__slider ~ .acalc__nav {
  margin-top: 56px;
}

/* The design draws the figure as plain text (1200:14792), and it still reads
   as plain text — but it is an input, so a visitor who knows their number can
   type it instead of chasing it with the slider. Everything that would make it
   look like a field is taken off; hover and focus are what admit it is one.

   `input.` and the root in front of it are for the theme, not for show:
   css/style.css styles every `input[type=text]` (0,1,1) with a colour, a 43px
   height — 38 below 767 — and 24px of side padding, and that beat the bare
   class. The figure had been rendering #2a2a2a on a 43px line ever since it
   became an input, never the brand red this rule asked for. */
.acalc input.acalc__range-value {
  display: block;
  width: 100%;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  font: 500 32px/1.25 var(--acalc-font-titles);
  color: var(--acalc-brand);
  text-align: center;
}

/* A cleared figure: the design's "$0" in Text/B&W/muted (1200:14792).
   opacity for Firefox, which dims placeholders on its own. */
.acalc input.acalc__range-value::placeholder {
  color: var(--acalc-muted);
  opacity: 1;
}

.acalc__range-value:hover {
  cursor: text;
}

/* No ring: the figure is meant to read as the design's plain text, and a box
   drawn round it while it is being typed is exactly what that text is not.
   The caret is the cue, and it only appears when the field is in use. */
.acalc__range-value:focus,
.acalc__range-value:focus-visible {
  outline: none;
}

/* I1200:14742;3059:414 and ;432 — a 16px round thumb on the brand ramp, over
   an 8px track in the neutral. 40 tall, the thumb's pointer target in the
   design (16 plus 12 of padding each way), which also puts the track at
   16–24 of the control exactly where the component draws it.

   The control's own track is transparent: the scale below draws it, because
   the ticks cross the track and have to be painted over it — and the thumb
   over both. One element cannot put a sibling between its own track and its
   own thumb, so the track moves to the sibling and the control stays on top. */
.acalc__range {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 40px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.acalc__range::-webkit-slider-runnable-track {
  height: 8px;
  background: transparent;
}

.acalc__range::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  /* Half the thumb minus half the track, so it rides centred on it. */
  margin-top: -4px;
  border: 0;
  border-radius: 50%;
  background: var(--acalc-gradient);
  -webkit-appearance: none;
  appearance: none;
}

.acalc__range::-moz-range-track {
  height: 8px;
  background: transparent;
}

.acalc__range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 50%;
  background: var(--acalc-gradient);
}

.acalc__range:focus-visible {
  outline: 2px solid var(--acalc-brand);
  outline-offset: 4px;
}

/* I1200:14742;3059:415 "Lines". The ticks are placed rather than spread: see
   loona_acalc_scale(), which rounds the labels and hands each one the
   percentage it really sits at. The 8px side margins line the box up with the
   thumb's travel, which starts and ends half a thumb inside the control — and
   with the component's track, which is inset by the same 8.

   The scale lies over the control rather than under it: the negative margin
   gives back the control's 40px and the panel's gap, so the box starts where
   the control does and the component's own geometry applies unchanged —
   track at 16–24, ticks at 8–32 crossing it, labels from 36. */
.acalc__scale {
  position: relative;

  /* The panel centres its children, so without this the box shrinks to its
     content and the ticks' percentages resolve against nothing. */
  align-self: stretch;
  height: 48px;
  margin: calc(-40px - var(--acalc-panel-gap, 0px)) 8px 0;
}

/* The track itself, moved here from the control (see .acalc__range). */
.acalc__scale::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 0;
  right: 0;
  height: 8px;
  background: var(--acalc-border);
}

.acalc__tick {
  position: absolute;
  top: 8px;
  width: 2px;
  height: 24px;
  background: var(--acalc-tick);
  transform: translateX(-50%);
}

/* The label is wider than the 2px tick it hangs under, so it centres on it and
   overflows both ways. The two at the ends would overflow the card instead, so
   they tuck against it. */
.acalc__tick-label {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  font: 400 12px/1 var(--acalc-font-text);
  color: var(--acalc-muted);
  white-space: nowrap;
}

/* The two at the ends hang half their width past the track, which is what the
   card's own padding is there to absorb — 64px of it on a desktop and 16 on a
   phone, against the ~21px the widest label needs. Tucking them flush instead
   was the first attempt, and it pushed the first label into the second on a
   narrow card: the one that moves is the one with the least room. */

/* -----------------------------------------------------------------------------
   Nav bar (back / progress / restart), shared by steps 2–6
   -------------------------------------------------------------------------- */
.acalc__nav {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
}

.acalc__back,
.acalc__restart {
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* Figma 1195:11487 and 1195:11488. Both are a bare 24px icon with 12px of
   padding — no ring, no fill, no glyph. The block used to draw a 40px circle
   around a "\2039" and a "\27F2", which is why nav.php now prints the buttons
   empty and the icon is painted here.

   Masks in currentColor rather than <img>, the same way .acalc__btn carries
   its chevron: it keeps the hover and focus colours in CSS and adds no
   requests. The refresh arc is the design's circle redrawn as a single arc
   command — the exported path spells the same circle out in nine cubic
   segments, which costs 600 bytes per copy and renders identically at 24px. */
.acalc__nav .acalc__back,
.acalc__nav .acalc__restart {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border: 0;
  background: none;
  color: var(--acalc-icon);
}

.acalc__nav .acalc__back::before,
.acalc__nav .acalc__restart::before {
  content: "";
  width: 24px;
  height: 24px;
  background: currentColor;
}

.acalc__nav .acalc__back::before {
  -webkit-mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M15 18L9 12L15 6"/%3E%3C/svg%3E') center / contain no-repeat;
  mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M15 18L9 12L15 6"/%3E%3C/svg%3E') center / contain no-repeat;
}

.acalc__nav .acalc__restart::before {
  -webkit-mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M3 12a9 9 0 1 0 2.26-5.97L3 8"/%3E%3Cpath d="M3 3V8H8"/%3E%3C/svg%3E') center / contain no-repeat;
  mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M3 12a9 9 0 1 0 2.26-5.97L3 8"/%3E%3Cpath d="M3 3V8H8"/%3E%3C/svg%3E') center / contain no-repeat;
}

/* Figma 1196:10570 "statusbar". No height of its own any more: the bar is as
   tall as the label riding inside its filled part, which is how the design
   draws it. Background/additional is the same #f1f0ed as --acalc-border. */
.acalc__progress {
  display: flex;
  flex: 1;
  border-radius: 9999px;
  background: var(--acalc-border);
  overflow: hidden;
}

/* 1196:10573 "Filling". In flow rather than absolute, so the label inside it
   can set the bar's height; calculator.js still writes its width as a
   percentage. The 160px floor is the design's own, and it is what keeps the
   label readable on the early steps instead of squeezing it to a sliver. */
.acalc__progress-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 160px;
  width: 0;
  padding: 4px 8px;
  border-radius: inherit;
  background: var(--acalc-gradient);
  transition: width 0.3s ease;
}

/* 1196:10580 — SF Pro Bold 12 on the gradient. */
.acalc__progress-label {
  font: 700 12px/1 var(--acalc-font-strong);
  color: #fff;
  text-align: center;
  white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   Results (step 7)
   -------------------------------------------------------------------------- */
/* 1715:12117: the left half, 64 in on Background/default. The toggle and
   the figures stand 64 apart; the button 96 under them. */
.acalc__results {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  padding: 64px;
  background: var(--acalc-bg);
}

/* 1715:12119: two tabs on Background/additional, 8 in and 16 apart. The one
   on is the brand ramp with white type; the other is the ramp poured into
   its letters. A 3px outline of the same ramp on the one that is on, as the
   frame draws it — invisible against its own fill, kept so both tabs are the
   same size whichever is pressed. */
.acalc__platforms {
  display: flex;
  gap: 16px;
  width: 100%;
  padding: 8px;
  background: var(--acalc-border);
}

.acalc__platform {
  flex: 1 1 0;
  min-width: 0;
  padding: 9px 8px;
  border: 3px solid transparent;
  background: none;
  font: 500 24px/normal var(--acalc-font-text);
  text-transform: uppercase;
  color: var(--acalc-brand);
  cursor: pointer;
}

/* The ramp is poured into the label, not the button, so the button's own
   background is free for the hover below: with the text clipped out of the
   button's background, anything laid over the button lay over the text too. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .acalc__platform[aria-pressed="false"] .acalc__platform-label {
    background: var(--acalc-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.acalc__platform[aria-pressed="true"] {
  background: var(--acalc-gradient) border-box;
  color: #fff;
  cursor: default;
}

/* Hover tints the tab behind its label, in the fill the map's hovered state
   takes (Background/alt). It was 60% white laid over the button, which sat
   on the label as well and faded it into the white. */
.acalc__platform[aria-pressed="false"]:hover {
  background: var(--acalc-tick);
}

.acalc__platform:focus-visible {
  outline: 2px solid var(--acalc-brand);
  outline-offset: 2px;
}

.acalc__metrics {
  display: flex;
  flex-direction: column;
  gap: 64px;
  width: 100%;
  margin: 0;
}

/* [ROI, New Customers] in halves, [Payback, CAC, New Leads] in thirds, 32
   apart (1715:12132, 1715:12135). */
.acalc__metric-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}

/* Thirds, but never narrower than their figure. "~2 months" is 129px of
   Unbounded at 20, and between 1025 and 1287 a third is less than that —
   112px at 1025, 124.66 at 1100 — so it hung past its hairline on both
   sides. min-content as the floor lets that one column take what it needs
   from the other two and leaves the thirds even wherever the figures fit,
   the 1440 frame included. The phone's rule below puts the two-up back on
   minmax(0, 1fr). */
.acalc__metric-row--small {
  grid-template-columns: repeat(3, minmax(min-content, 1fr));
}

/* The "Leads" component (1205:12686): the figure, a hairline 8 under it, the
   label 8 under that. */
.acalc__metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;

  /* A grid item's automatic minimum is its content; without this the widest
     figure sets the column and the column sets the screen. */
  min-width: 0;
  margin: 0;
  text-align: center;
}

.acalc__metric-number {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

.acalc__metric-value {
  font: 500 32px/1.25 var(--acalc-font-titles);
  color: var(--acalc-brand);
}

.acalc__metric-row--small .acalc__metric-value {
  font-size: 20px;
}

/* "+$48,000" — a size and a weight above the rest, its "/ month" 16 away. */
.acalc__metric--hero .acalc__metric-number {
  gap: 16px;
}

.acalc__metric--hero .acalc__metric-value {
  font-size: 48px;
  font-weight: 700;
}

/* "/ month" beside a figure. Not part of the number: the design sets it in
   the body face at half the size and in the muted grey. */
.acalc__metric-unit {
  font: 400 16px/1.5 var(--acalc-font-text);
  color: var(--acalc-muted);
}

.acalc__metric-label {
  width: 100%;
  padding-top: 8px;
  border-top: 1px solid var(--acalc-tick);
  font: 600 16px/1.25 var(--acalc-font-strong);
  color: var(--acalc-additional);
}

.acalc__metric--hero .acalc__metric-label {
  font: 700 20px/1.25 var(--acalc-font-strong);
  color: var(--acalc-muted);
}

/* 1715:12139 "edit your inputs": the brand ramp as a 3px outline round the
   panel's own colour, 96 under the figures. A gradient cannot be a
   border-color, so the border is transparent and two backgrounds fill it. */
.acalc__edit {
  margin-top: 32px;
  padding: 12px 24px;
  border: 3px solid transparent;
  border-radius: 0;
  background:
    linear-gradient(var(--acalc-bg), var(--acalc-bg)) padding-box,
    var(--acalc-gradient) border-box;
  font: 600 14px/normal var(--acalc-font-strong);
  text-transform: uppercase;
  color: var(--acalc-title);
  cursor: pointer;
}

.acalc__edit:hover {
  background:
    var(--acalc-gradient-12) padding-box,
    linear-gradient(var(--acalc-bg), var(--acalc-bg)) padding-box,
    var(--acalc-gradient) border-box;
}

.acalc__edit:focus-visible {
  outline: 2px solid var(--acalc-brand);
  outline-offset: 2px;
}

/* The copy after the lead panel is the stacked screen's (see ≤1024 below). */
.acalc__edit--after-form {
  display: none;
}

/* 1735:11030: the right half, the brand ramp under a tiled Loona mark at 6%,
   64 top and bottom and 48 at the sides. The title, the lead and the form 16
   apart. */
.acalc__form {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 64px 48px;

  /* No border. Figma puts a 3px stroke of the ramp on this node, drawn on the
     ramp itself, and the frame shows nothing of it. */
  background: var(--acalc-gradient);
  color: #fff;
}

/* The pattern Figma exported as a 4.9 MB PNG, re-encoded as its alpha alone
   over white — the marks are white — at a size that still covers the panel:
   a 67 KB WebP. At 6% nothing finer would show. */
.acalc__form::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("decor/results-pattern.webp") center / cover no-repeat;
  opacity: 0.06;
  pointer-events: none;
}

.acalc__form-title {
  margin: 0;
  font: 700 40px/1.25 var(--acalc-font-titles);
  text-transform: uppercase;
  color: #fff;
}

.acalc__form-text {
  margin: 0;
  font: 400 20px/1.4 var(--acalc-font-text);
  color: #fff;
}

/* CF7's spinner, shown while the lead is being sent. The theme hangs it 25px
   under whatever positions it (css/style.css), which here is this panel, so
   it came up as a dark dot on the page background below the card. It goes in
   the panel's bottom padding instead: 12px up, under the phone line, at every
   width. */
.acalc__form .wpcf7-spinner {
  bottom: 12px;
}

/* 24 under the submit, as between every part of the form (1735:11062). */
.acalc__form-footnote {
  margin: 8px 0 0;
  font: 500 16px/normal var(--acalc-font-text);
  color: #fff;
  text-align: center;
}

.acalc__form-phone {
  font-family: var(--acalc-font-strong);
  font-weight: 700;
  color: inherit;
  text-decoration: none;
}

.acalc__form-phone:hover,
.acalc__form-phone:focus-visible {
  text-decoration: underline;
}

/* The fields are dressed here, by element, rather than left to the classes the
   form template happens to print.

   The reasoning that took them out was sound and the result was not: the site
   already styles this shape through .contact__form-line, so the block should
   not carry a second copy. But the form lives in the database, the template
   there still prints .acalc__form-row with no class:input, and the moment this
   deployed every field on the results screen lost its background — nothing on
   the page matched the rules that had been relied on. A block that renders
   correctly only while a row in wp_posts agrees with it is not finished.

   So: the values are the theme's, taken from css/style.css (43px tall, 24px of
   side padding, white on #2a2a2a, 20px between a pair), and the selectors are
   the block's own elements, which both the current template and the one that
   replaces it will match. When the template does change, these stay true
   rather than needing to be removed in step. */
.acalc__form input:not([type="checkbox"], [type="radio"], [type="submit"], [type="hidden"]),
.acalc__form textarea {
  box-sizing: border-box;
  width: 100%;
  height: 43px;
  padding: 0 24px;
  border: 0;
  border-radius: 0;
  background: #fff;
  font: 500 16px/1.5 var(--acalc-font-text);
  color: #2a2a2a;
}

.acalc__form textarea {
  height: 62px;
  padding-top: 10px;
}

/* One focus ring for every control on the panel, the checkbox's (below): 2px
   of white, 2px out, which reads on the ramp where the brand ring would not.
   The theme takes the outline off text, email, tel and textarea
   (css/style.css, `outline: 0`) but not off url, so the website field alone
   showed the browser's blue ring and the others only a caret. */
.acalc__form input:not([type="checkbox"], [type="radio"], [type="hidden"]):focus-visible,
.acalc__form textarea:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.acalc__form input::placeholder,
.acalc__form textarea::placeholder {
  color: #8d7a65;
}

/* The two-up rows, and the 20px under every one of them. The gap alone was not
   enough and the omission did not look like a missing margin: with the fields
   43px tall and nothing between the rows, three white boxes in a column merged
   into one tall white slab and the form read as broken rather than as tight.

   CF7 also puts a <br> after each control it wraps. They are hidden rather
   than styled around — inside a flex row one is an item like any other and
   would take a third of it, and between the rows they add a line of space that
   has nothing to do with the rhythm being set here. */
.acalc__form .wpcf7-form br {
  display: none;
}

.acalc__form .wpcf7-form-control-wrap {
  display: block;
  margin-bottom: 20px;
}

/* 24, not 20, round the checkbox: the fields are one group in the frame
   (1735:11063) and the checkbox and submit are the form's next two parts. */
.acalc__form .wpcf7-form-control-wrap:has(textarea),
.acalc__form .wpcf7-form-control-wrap:has(.wpcf7-acceptance) {
  margin-bottom: 24px;
}

.acalc__form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.acalc__form-row > .wpcf7-form-control-wrap {
  flex: 1 1 0;
  min-width: 0;

  /* The row carries the space under the pair; the pair must not carry it too. */
  margin-bottom: 0;
}

/* 1735:11084: a white bar, a white 3px border, the label SF Pro Medium 24 in
   the brand ramp. The label is an input's value, so the ramp is a background
   clipped to the text over a second, white one clipped to the box. The theme's
   :hover (red border and label on white) is left to apply. */
.acalc__form input[type="submit"] {
  width: 100%;
  height: 53px;
  padding: 0 40px;
  border: 3px solid #fff;
  border-radius: 0;
  background: #fff;
  color: var(--acalc-brand);
  font: 500 24px/normal var(--acalc-font-text);
  text-transform: uppercase;
  cursor: pointer;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .acalc__form input[type="submit"]:not(:hover) {
    background: var(--acalc-gradient), linear-gradient(#fff, #fff);
    -webkit-background-clip: text, padding-box;
    background-clip: text, padding-box;
    color: transparent;
  }
}

/* The theme styles every label (css/style.css): #8d7a65, capitalised, which
   turned the frame's sentence into "Stay Updated On The Latest…". */
.acalc__form label {
  text-transform: none;
  color: #fff;
}

.acalc__form .wpcf7-acceptance {
  margin: 0;
}

.acalc__form .wpcf7-list-item-label,
.acalc__form .wpcf7-not-valid-tip,
.acalc__form .wpcf7-response-output {
  color: #fff;
}

.acalc__form .wpcf7-acceptance .wpcf7-list-item-label {
  align-items: center;
  font: 500 16px/normal var(--acalc-font-text);
}

/* 1735:11079: a white 20px box with a soft shadow and no border, the tick in
   the brand red across it. */
.acalc__form .wpcf7-acceptance input[type="checkbox"] + .wpcf7-list-item-label::before {
  border: 0;
  box-shadow:
    2px 3px 1px rgb(64 64 64 / 5%),
    1px 1px 1px rgb(64 64 64 / 9%),
    0 0 0.5px rgb(64 64 64 / 10%);
}

.acalc__form .wpcf7-acceptance input[type="checkbox"]:checked + .wpcf7-list-item-label::before {
  background-size: 20px;
}

.acalc__form .wpcf7-acceptance input[type="checkbox"]:focus-visible + .wpcf7-list-item-label::before {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
/* =============================================================================
   Responsive
   ============================================================================= */

/* -----------------------------------------------------------------------------
   ≤1200 — narrow the container, keep two columns
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .acalc {
    --acalc-pad: 48px;
    --acalc-pad-end: 112px;
  }

  /* The halves narrow to 552, with less padding round the figures. */
  .acalc__results {
    padding: 48px;
  }

  .acalc__metric-row {
    gap: 16px;
  }

  .acalc__form {
    padding: 48px 32px;
  }
}

/* -----------------------------------------------------------------------------
   ≤1024 — tablet, interpolated between the 1440 and 360 Figma frames, as it
   was for the Trust blocks
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .acalc {
    --acalc-pad: 32px;
    --acalc-pad-end: 96px;
  }

  /* The two halves stack, results above the lead panel, as the 360 frame
     stacks them (1720:16884). */
  .acalc[data-step="7"] .acalc__step[data-step="7"] {
    grid-template-columns: 1fr;
  }

  /* And "edit your inputs" goes under the lead panel, centred, 32 below it
     and the block's own padding below that (1785:10791, 64 at 360). The
     results end 48 under the figures, as the frame's 536px card does. Not
     without the wizard: there is nothing to go back to. */
  .acalc__results .acalc__edit {
    display: none;
  }

  .acalc--js .acalc__edit--after-form {
    display: block;
    justify-self: center;
  }
}

/* -----------------------------------------------------------------------------
   ≤640 — mobile
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* The 360 frames start 48 under the header (16 it leaves under itself and
     32 of hero) and end 64 under the nav bar, against 16 at the sides. */
  .acalc {
    --acalc-pad: 16px;
    --acalc-pad-start: 48px;
    --acalc-pad-end: 64px;

    /* At least the phone's screen. The entry screen and the three slider
       steps stand 600–760px on a phone, so on anything taller the footer
       came up under the nav bar and a step read as the end of the page. The
       block is border-box and carries the header's clearance in its own
       padding, so this is the whole screen and not the screen plus the
       header. svh, the height with the browser's bars showing: the dynamic
       unit would resize the block, and move the footer, every time they
       slide in or out. vh first for a browser without it. */
    min-height: 100vh;
    min-height: 100svh;
  }

  /* The results frame at 360 (1720:16884) starts and ends like the others. */
  .acalc[data-step="7"] {
    --acalc-pad-start: 48px;
    --acalc-pad-end: 64px;
  }

  /* The entry screen's button in the middle of the room the screen has left
     under the lead. With the block a screen tall, the copy kept to the top and
     the button right under it, and on a 390 × 844 phone 312px of hero went
     unused beneath.

     The step takes the rest of the block (the block is a column for this),
     and its last grid row the rest of the step, with the button centred in
     it. That row ends at the block's 64px of padding and starts at the 32px
     gap, and the button's own 32 on top offsets the two, so its centre is the
     middle of lead-to-bottom exactly. Where there is no room to spare it stands
     where it did: 64 under the lead, 64 over the bottom. Behind acalc--js, so
     the no-script page, which shows the form under the intro, keeps its flow. */
  .acalc--js[data-step="1"] {
    display: flex;
    flex-direction: column;
  }

  .acalc--js[data-step="1"] .acalc__step[data-step="1"] {
    flex: 1 0 auto;
    display: grid;
    grid-template-rows: auto auto 1fr;
    justify-items: center;
    width: 100%;
  }

  .acalc--js .acalc__step[data-step="1"] .acalc__next {
    align-self: center;
  }

  /* 1720:13532 draws the label at 14. Here already rather than only on the
     phone grid below: three columns at 481px leave 111px of card for
     "CONSTRUCTION", which at 16 does not fit. */
  .acalc__industry-label {
    font-size: 14px;
    line-height: 1.25;
  }

  /* 1298:20824 keeps the card's 64px of vertical padding and drops the sides
     to 16, which is what gives the slider's scale room on a phone. */
  .acalc__panel {
    padding: 64px 16px;
  }

  /* 1720:15624: the slider card sits 8px in from the 328 column, 48 above the
     figure and 32 between it and the control; 40 under the lead, 32 to the
     button, 40 from the button to the nav bar. */
  .acalc__slider {
    --acalc-panel-gap: 32px;

    width: calc(100% - 16px);
    padding: 48px 16px 64px;
  }

  .acalc__step > .acalc__text ~ .acalc__slider {
    margin-top: 32px;
  }

  .acalc__step > .acalc__slider ~ .acalc__next {
    margin-top: 24px;
  }

  .acalc__step > .acalc__slider ~ .acalc__nav {
    margin-top: 32px;
  }

  /* 1720:14169: 8px in from the column, 64 above the map, 16 under the
     picker, 32 between; 40 to Continue and 32 from it to the nav bar. The
     glow is a desktop frame's alone. */
  .acalc__panel.acalc__panel--state {
    width: calc(100% - 16px);
    padding: 64px 16px 16px;
    gap: 32px;
  }

  .acalc__panel--state::before {
    display: none;
  }

  .acalc__step > .acalc__panel--state ~ .acalc__next {
    display: inline-flex;
    margin-top: 32px;
  }

  .acalc__step > .acalc__panel--state ~ .acalc__nav {
    margin-top: 24px;
  }

  /* The picker takes the select's place once the wizard runs; the select
     stays in the page as the value it writes to, out of the way of a screen
     reader that would otherwise meet the same question twice. */
  .acalc--js .acalc__combo {
    display: block;
  }

  .acalc--js .acalc__state-select {
    display: none;
  }

  /* The open list is 320px under the field and runs past the block's
     bottom edge — by 76px at 360, as it does in the frame (1720:14516),
     which lays it over the footer. The section's overflow: hidden cut it off
     there instead, and made the block a scroll container besides: walking
     the list with the arrow keys scrolled the option into view by scrolling
     the whole step up inside the block, crumbs and title out of sight.

     `clip` rather than `hidden` across, so nothing can scroll the block,
     and visible down, so the list can hang over the footer. Only here: no
     decoration spills vertically on this step at this width (the card's
     glow is off above), where the hero pattern and the niche glow would.
     z-index keeps the list above anything positioned that follows the
     block. A browser without `clip` keeps hidden, and the list as it was. */
  @supports (overflow-x: clip) {
    .acalc--js[data-step="3"] {
      z-index: 1;
      overflow-x: clip;
      overflow-y: visible;
    }
  }

  /* 1720:16892: 48 above and below, 16 at the sides; 32 between the toggle
     and the figures, 64 to the button. */
  .acalc__results {
    gap: 32px;
    padding: 48px 16px;
  }

  .acalc__metrics {
    gap: 32px;
  }

  /* 1720:16894: the tabs at 16, 43 tall, with no side padding to spare. */
  .acalc__platform {
    padding-inline: 0;
    font-size: 16px;
  }

  .acalc__metric-row {
    gap: 16px;
  }

  /* [Payback, CAC] in halves, New Leads the whole row under them. */
  .acalc__metric-row--small {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .acalc__metric-row--small .acalc__metric:last-child {
    grid-column: 1 / -1;
  }

  /* The component at 360 (1298:23317): everything at 16, 4 apart, the label
     Bold on a paler hairline. Revenue is 32 and loses its "/ month". */
  .acalc__metric {
    gap: 4px;
  }

  .acalc__metric-number {
    gap: 4px;
  }

  .acalc__metric-value,
  .acalc__metric-row--small .acalc__metric-value {
    font-size: 16px;
  }

  .acalc__metric--hero .acalc__metric-value {
    font-size: 32px;
    font-weight: 500;
  }

  .acalc__metric--hero .acalc__metric-unit {
    display: none;
  }

  .acalc__metric-label {
    padding-top: 4px;
    border-top-color: var(--acalc-border);
    font: 700 16px/1.5 var(--acalc-font-strong);
  }

  /* 1735:11091: 48 and 16 in, the title at 20 on 25px lines, the fields one
     to a row. */
  .acalc__form {
    padding: 48px 16px;
  }

  .acalc__form-title {
    font-size: 20px;
  }

  .acalc__form-row {
    flex-direction: column;
  }
}

/* -----------------------------------------------------------------------------
   ≤480 — the one breakpoint outside the block's 1200 / 1024 / 640 ladder.

   Two things that follow their own geometry rather than the page's. The niche
   grid turns into the 360 frame's two-up cards here and not at 640, where
   two across are 296px wide each — a banner rather than the frame's card —
   and three still fit. And the slider scale's round stops start to crowd
   their labels.
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  /* 1720:13528: two up inside 8px of inset in a 328 column, 155px tall.

     155 is the frame's height, not the side of a square. At 360 the two are
     the same thing, 155 × 155, and the cards were built as squares — so a
     phone wider than the frame, which 390 to 440 is most of them, got
     squares of 175 to 190 with the content still pinned 32 from the top and
     60–75px of bare card under every label. Held at the frame's height the
     content fills the card the way the frame draws it at any phone width.
     A minimum rather than a height: a label that wraps further still grows
     its row. */
  .acalc__industries {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(155px, auto);
  }

  /* 1720:13529 — content from the top, 32 in. 16 under it rather than the
     frame's 32: two lines of label under a 48px medallion stand 99px, which
     with 32 at both ends is taller than the frame's 155. */
  .acalc__industry {
    justify-content: flex-start;
    padding: 32px 16px 16px;
  }

  .acalc__industry-medallion {
    width: 48px;
    height: 48px;
    padding: 8px;
  }

  .acalc__industry-icon {
    width: 32px;
    height: 32px;
  }

  /* The stops are round, not evenly spread, so two of them can land close
     together — $40,000 and $50,000 on the customer-value slider sit 20% apart
     and their labels touched on a 311px card. Two points off the type is
     enough to part them and still reads. */
  .acalc__tick-label {
    font-size: 10px;
  }
}