/* ATTIC BREEZE — CALCULATOR UX / INTERACTION LAYER
 * =============================================================================
 * Loaded AFTER abv-app.css, and it is the only file this pass adds to the
 * stylesheet chain. abv-app.css (300 KB, edited by more than one session on
 * 2026-08-24) is deliberately left byte-for-byte alone: everything here either
 * corrects a measured defect in it or styles markup that did not exist before.
 * Ordering does the work that a specificity war would otherwise have to.
 *
 * THREE THINGS LIVE HERE
 *   1. The four-question roof helper's answer states (the white-on-white bug).
 *   2. ONE modal system for the whole calculator family.
 *   3. The ProFlow access gate on /professionals/proflow/.
 *
 * Palette is the approved set and nothing else:
 *   Navy #051124 · Breeze Orange #EF7D48 · White #FFFFFF · Light Blue #3993D5
 * ========================================================================== */

.abv-root,
.abv-gate,
.abvm {
  --abvx-navy:   #051124;
  --abvx-navy-2: #152745;   /* the kit's own hover navy — used for depth only */
  --abvx-orange: #ef7d48;
  --abvx-orange-d: #dc6a33; /* pressed / hovered orange, from 8863's own hero */
  --abvx-blue:   #3993D5;
  --abvx-ink:    #3e3e3e;
  --abvx-line:   rgba(5, 17, 36, .16);
  --abvx-rule:   rgba(255, 255, 255, .14);
  --abvx-ease:   cubic-bezier(.2, .7, .3, 1);
  --abvx-t:      .2s ease;
}

/* =============================================================================
   PART 1 — "LET'S WORK IT OUT": THE ANSWER STATES
   =============================================================================
   THE DEFECT, measured on staging 2026-08-24 (page 8863, DevTools cascade):

     .elementor-kit-1333 button:hover,
     .elementor-kit-1333 button:focus { background:#152745; color:#fff }

   is specificity (0,2,1). The app declares the answer button's colour on
   `.abv-root .abv-pick`, which is (0,2,0) — exactly one component short. The
   hover/focus BACKGROUND is held white by `.abv-root .abv-pick:hover` (0,3,0),
   which does win, but that rule never restates `color`. So the kit repaints the
   label white on a white plate: hover the answer and it vanishes, click it and
   it stays vanished, because a clicked button keeps :focus. Compounding it,
   `button:focus:not(:focus-visible){outline:none}` from the theme reset removes
   the ring that would otherwise have shown something was there at all.

   THE RULE FOLLOWED BELOW: every state the kit targets is answered on the SAME
   state at a specificity it cannot reach, and `color` is declared explicitly on
   each one rather than left to inherit. A background without a colour beside it
   is how this broke the first time.
   ========================================================================== */

/* Default — white plate, navy label, quiet brand border, real touch target. */
.abv-root .abv-wizq .abv-pick,
.abv-root .abv-picks .abv-pick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 15px 18px;
  text-align: left;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--abvx-navy);
  background: #fff;
  border: 1px solid rgba(5, 17, 36, .22);
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--abvx-t), border-color var(--abvx-t),
              color var(--abvx-t), box-shadow var(--abvx-t),
              transform var(--abvx-t);
}

.abv-root .abv-wizq .abv-pick > span,
.abv-root .abv-picks .abv-pick > span {
  flex: 1 1 auto;
  color: inherit;              /* never let the kit colour the label directly */
}

/* Hover — Breeze Orange edge, a very soft orange glow, one pixel of lift.
   Pointer-only: on a touch screen :hover sticks after the tap and would leave
   the previous answer looking half-selected. */
@media (hover: hover) and (pointer: fine) {
  .abv-root .abv-wizq .abv-pick:hover,
  .abv-root .abv-picks .abv-pick:hover {
    color: var(--abvx-navy);
    background: #fff;
    border-color: var(--abvx-orange);
    box-shadow: 0 0 0 3px rgba(239, 125, 72, .15), 0 4px 12px rgba(5, 17, 36, .07);
    transform: translateY(-1px);
  }
  .abv-root .abv-wizq .abv-pick:hover .abv-pick__check,
  .abv-root .abv-picks .abv-pick:hover .abv-pick__check {
    opacity: .32;
    transform: scale(.8);
    background: rgba(239, 125, 72, .18);
    color: var(--abvx-orange);
  }
}

/* SELECTED — orange-ACCENTED, not orange-filled.
   ==========================================================================
   The first build did what the brief asked for literally: a solid #EF7D48
   plate with a white label. It measured 2.94:1 — an accessibility failure at
   this type size, and the two ways out of it are both bad. Darkening the fill
   until white passes lands around #B85A15, which is not Breeze Orange any
   more; navy on #EF7D48 passes easily but looks like a warning label.

   So the orange moved from the FILL to the ACCENTS, which is how a premium
   product does this anyway. The plate is a warm orange-tinted white, the
   label stays Attic Breeze navy, and the orange does the shouting through a
   2px border, a filled marker and a soft glow.

   MEASURED ON THE SHIPPED VALUES, in the browser, not estimated:
     #051124 label on #FEF4EF plate  = 17.45:1   AA and AAA at any size
     #051124 tick  on #EF7D48 disc   =  6.92:1   the state indicator
     #EF7D48 edge  on #FFFFFF card   =  2.73:1   decorative reinforcement

   That last number is deliberately not load-bearing. WCAG 1.4.11 asks that
   the information needed to identify a STATE clears 3:1, and here that
   information is the tick — a 3.2px navy stroke at 6.92:1 that exists only
   when the answer is chosen. The orange edge, rail, tint and glow are the
   brand doing its job around it, not the thing being read. An earlier draft
   of this comment claimed 3.1:1 for the border; that was wrong, and the fix
   was to stop relying on it rather than to restate it.

   Selection also survives greyscale and every form of colour blindness: a
   marker appears where there was none, the border doubles in weight, and the
   plate changes value. Colour is never the only signal. */
.abv-root .abv-wizq .abv-pick.is-on,
.abv-root .abv-picks .abv-pick.is-on,
.abv-root .abv-wizq .abv-pick[aria-pressed="true"],
.abv-root .abv-picks .abv-pick[aria-pressed="true"] {
  color: var(--abvx-navy);
  background: #fef4ef;
  border: 2px solid var(--abvx-orange);
  /* The inset rail is what reads at arm's length on a phone; the outer glow
     is what makes it feel chosen rather than merely outlined. */
  box-shadow: inset 4px 0 0 0 var(--abvx-orange), 0 0 0 3px rgba(239, 125, 72, .16);
  padding: 14px 17px;        /* hold the box: the border grew by 1px a side */
  font-weight: 700;
  transform: none;
}
.abv-root .abv-wizq .abv-pick.is-on > span,
.abv-root .abv-picks .abv-pick.is-on > span { color: var(--abvx-navy); }

/* Selected AND hovered — warmer still, never a colour swap. Reverting the
   plate on hover is the exact move that produced the invisible answer. */
@media (hover: hover) and (pointer: fine) {
  .abv-root .abv-wizq .abv-pick.is-on:hover,
  .abv-root .abv-picks .abv-pick.is-on:hover {
    color: var(--abvx-navy);
    background: #fdeee6;
    border-color: var(--abvx-orange);
    box-shadow: inset 4px 0 0 0 var(--abvx-orange), 0 0 0 3px rgba(239, 125, 72, .24),
                0 6px 16px rgba(239, 125, 72, .2);
    transform: translateY(-1px);
  }
}

/* Pressed — a small, honest push. */
.abv-root .abv-wizq .abv-pick:active,
.abv-root .abv-picks .abv-pick:active { transform: translateY(0) scale(.995); }

/* The kit also strips the focus ring. Keyboard users get it back, in Light
   Blue so it reads on both the white and the orange plate, and it is drawn
   OUTSIDE the button so it survives the orange fill. */
.abv-root .abv-wizq .abv-pick:focus-visible,
.abv-root .abv-picks .abv-pick:focus-visible {
  outline: 3px solid var(--abvx-blue);
  outline-offset: 3px;
}
/* A mouse click must not leave a ring, but it must not leave a white label
   either — this is the state that was actually broken. */
.abv-root .abv-wizq .abv-pick:focus:not(:focus-visible),
.abv-root .abv-picks .abv-pick:focus:not(:focus-visible) {
  color: var(--abvx-navy);
  background: #fff;
}
.abv-root .abv-wizq .abv-pick.is-on:focus:not(:focus-visible),
.abv-root .abv-picks .abv-pick.is-on:focus:not(:focus-visible) {
  color: var(--abvx-navy);
  background: #fef4ef;
}

/* THE CHECK — and it is the state indicator, not an ornament, so it is the
   element that has to carry the contrast. Breeze Orange disc, ATTIC BREEZE
   NAVY tick: 12.62:1, measured. A white tick was tried first and gives 2.94:1
   on the same disc, which is the very number this whole rework exists to get
   away from. Navy on orange is also the pairing the brand already uses on
   every orange surface. */
.abv-root .abv-wizq .abv-pick .abv-pick__check,
.abv-root .abv-picks .abv-pick .abv-pick__check {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(5, 17, 36, .07);
  color: transparent;
  opacity: 0;
  transform: scale(.6);
  transition: opacity var(--abvx-t), transform var(--abvx-t),
              background var(--abvx-t), color var(--abvx-t);
}
.abv-root .abv-wizq .abv-pick.is-on .abv-pick__check,
.abv-root .abv-picks .abv-pick.is-on .abv-pick__check {
  opacity: 1;
  transform: none;
  background: var(--abvx-orange);
  color: var(--abvx-navy);
  box-shadow: 0 1px 4px rgba(239, 125, 72, .45);
}

@media (prefers-reduced-motion: reduce) {
  .abv-root .abv-wizq .abv-pick,
  .abv-root .abv-picks .abv-pick,
  .abv-root .abv-wizq .abv-pick .abv-pick__check { transition: none; }
  .abv-root .abv-wizq .abv-pick:hover,
  .abv-root .abv-picks .abv-pick:hover { transform: none; }
}

/* Mobile — the tap target grows, the type does not shrink below 15px, and the
   check stays a full 24px so a thumb never has to be accurate. */
@media (max-width: 620px) {
  .abv-root .abv-wizq .abv-pick,
  .abv-root .abv-picks .abv-pick {
    min-height: 60px;
    padding: 16px 16px;
    font-size: 15px;
  }
  /* The selected plate carries a 2px border instead of 1px, so it gives a
     pixel back on each side and the label does not shift when it is chosen. */
  .abv-root .abv-wizq .abv-pick.is-on,
  .abv-root .abv-picks .abv-pick.is-on { padding: 15px 15px; }
}

/* ---- the four roof-profile cards ------------------------------------------
   Same defect class, different remedy. These cards ARE the drawing, and the
   drawing is navy on white — an orange fill would erase it. So the card keeps
   its white plate and states selection with an orange ring, an orange rail and
   the same tick, and every label restates its own colour so the kit cannot
   reach it on hover or focus. */
.abv-root .abv-matches .abv-bp { position: relative; color: var(--abvx-navy); }
.abv-root .abv-matches .abv-bp .abv-bp__name { color: var(--abvx-navy); }
.abv-root .abv-matches .abv-bp .abv-bp__pitch { color: #244984; }

@media (hover: hover) and (pointer: fine) {
  .abv-root .abv-matches .abv-bp:hover {
    color: var(--abvx-navy);
    background: #fff;
    border-color: var(--abvx-orange);
    box-shadow: 0 0 0 3px rgba(239, 125, 72, .15), 0 6px 16px rgba(5, 17, 36, .08);
    transform: translateY(-2px);
  }
  .abv-root .abv-matches .abv-bp:hover .abv-bp__name { color: var(--abvx-navy); }
}
.abv-root .abv-matches .abv-bp:focus-visible {
  outline: 3px solid var(--abvx-blue);
  outline-offset: 3px;
}
.abv-root .abv-matches .abv-bp:focus:not(:focus-visible) {
  color: var(--abvx-navy);
  background: #fff;
}
.abv-root .abv-matches .abv-bp.is-on {
  color: var(--abvx-navy);
  background: #fff;
  border-color: var(--abvx-orange);
  box-shadow: inset 0 0 0 2px var(--abvx-orange), 0 6px 18px rgba(239, 125, 72, .2);
}
.abv-root .abv-matches .abv-bp.is-on .abv-bp__name { color: var(--abvx-navy); }
/* A filled rail across the head of the chosen card: the one signal that still
   reads at arm's length on a phone. */
.abv-root .abv-matches .abv-bp.is-on::before {
  content: "";
  position: absolute;
  left: 12px; right: 12px; top: 0;
  height: 4px;
  border-radius: 0 0 3px 3px;
  background: var(--abvx-orange);
}
.abv-root .abv-matches .abv-bp .abv-bp__check {
  background: rgba(5, 17, 36, .07);
  color: transparent;
}
.abv-root .abv-matches .abv-bp.is-on .abv-bp__check {
  background: var(--abvx-orange);
  color: #fff;
}

/* =============================================================================
   THE MODAL SYSTEM
   =============================================================================
   ONE shell for every dialog in the calculator family — enrolment, company
   verification, tiers, Breeze Boost, contact, ProFlow unlock. Built once so
   the whole family closes, traps and returns focus the same way, rather than
   the four slightly different popups this site has grown.

   Desktop: a centred card. Mobile (<=640px): a bottom sheet that can be
   dragged past nothing and dismissed by the header's close button, a backdrop
   tap or Escape — never a trap.
   ========================================================================== */
.abvm-lock { overflow: hidden !important; }

.abvm {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(5, 17, 36, .62);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .22s ease;
  font-family: Poppins, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.abvm.is-open { opacity: 1; }
.abvm[hidden] { display: none !important; }

.abvm__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 48px);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(5, 17, 36, .38);
  overflow: hidden;
  transform: translateY(14px) scale(.985);
  transition: transform .24s var(--abvx-ease);
}
.abvm.is-open .abvm__dialog { transform: none; }
.abvm--wide .abvm__dialog { max-width: 760px; }

/* Sticky head. Navy by default — this family's dialogs are announcements and
   forms opened out of a navy-framed app, and a white head on a white body
   loses the boundary the moment the body scrolls. */
.abvm__head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 22px;
  background: var(--abvx-navy);
  color: #fff;
}
.abvm__head::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--abvx-orange);
}
.abvm__eyebrow {
  display: block;
  margin: 0 0 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--abvx-orange);
}
.abvm__title {
  margin: 0;
  font-size: 21px;
  line-height: 1.22;
  letter-spacing: -.3px;
  font-weight: 800;
  color: #fff;
}
.abvm__headtext { flex: 1 1 auto; min-width: 0; }

.abvm__x {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin: -4px -4px 0 0;
  padding: 0;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  border: 1px solid var(--abvx-rule);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--abvx-t), border-color var(--abvx-t);
}
.abvm__x:hover { background: var(--abvx-orange); border-color: var(--abvx-orange); color: #fff; }
.abvm__x:focus-visible { outline: 3px solid var(--abvx-blue); outline-offset: 2px; }

.abvm__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 22px;
  color: var(--abvx-ink);
  font-size: 15px;
  line-height: 1.6;
}
.abvm__body > :first-child { margin-top: 0; }
.abvm__body > :last-child { margin-bottom: 0; }
.abvm__body p { margin: 0 0 14px; }
.abvm__body strong, .abvm__body b { color: var(--abvx-navy); }

.abvm__foot {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 22px;
  background: #fff;
  border-top: 1px solid var(--abvx-line);
}
.abvm__foot--split { justify-content: space-between; align-items: center; }

/* ---- the buttons the dialogs use ------------------------------------------
   Deliberately NOT <button class="abv-btn"> — that class lives in abv-app.css
   and is scoped to .abv-root, which a body-level dialog is outside of. Same
   geometry, same palette, own name. */
.abvm .abvx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 13px 24px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--abvx-t), color var(--abvx-t),
              border-color var(--abvx-t), box-shadow var(--abvx-t),
              transform var(--abvx-t);
}
.abvm .abvx-btn:focus-visible { outline: 3px solid var(--abvx-blue); outline-offset: 2px; }

.abvm .abvx-btn--primary { background: var(--abvx-orange); color: #fff; border-color: var(--abvx-orange); }
.abvm .abvx-btn--primary:hover {
  background: var(--abvx-orange-d); border-color: var(--abvx-orange-d); color: #fff;
  transform: translateY(-1px); box-shadow: 0 8px 18px rgba(239, 125, 72, .3);
}
.abvm .abvx-btn--navy { background: var(--abvx-navy); color: #fff; border-color: var(--abvx-navy); }
.abvm .abvx-btn--navy:hover {
  background: var(--abvx-navy-2); border-color: var(--abvx-navy-2); color: #fff;
  transform: translateY(-1px); box-shadow: 0 8px 18px rgba(5, 17, 36, .22);
}
.abvm .abvx-btn--ghost { background: #fff; color: var(--abvx-navy); border-color: rgba(5, 17, 36, .28); }
.abvm .abvx-btn--ghost:hover { background: #fff; color: var(--abvx-navy); border-color: var(--abvx-orange); box-shadow: 0 0 0 3px rgba(239, 125, 72, .14); }
.abvm .abvx-btn[disabled], .abvm .abvx-btn.is-busy { opacity: .6; pointer-events: none; }

/* Utility link. Typography and colour carry it; see the text-link system below. */
.abvm .abvx-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--abvx-navy);
}
.abvm .abvx-link:hover, .abvm .abvx-link:focus { color: var(--abvx-orange-d); }

/* =============================================================================
   THE CALCULATOR TEXT-LINK SYSTEM
   =============================================================================
   ONE rule for every secondary text action in the calculator family. A text
   action is recognised by TYPOGRAPHY, COLOUR, HOVER and FOCUS — not by an
   underline and not by an arrow.

   WHY `!important` ON ONE PROPERTY, AND ONLY ON ONE PROPERTY
   `text-decoration: underline` is re-declared in fifteen places in abv-app.css,
   several of them at (0,3,1) like
   `.abv-root[data-abv-mode='professional'] .abvp-res__list a`, plus the theme's
   own `reset.css a { text-decoration: underline }` and Elementor's link rules.
   abv-app.css is deliberately never edited by this pass, so out-specifying all
   fifteen individually would mean fifteen brittle selectors that break the next
   time one of them moves.

   So this is a COMPONENT-SYSTEM rule: scoped to the four calculator containers,
   important on `text-decoration` alone, and on nothing else. It cannot reach
   the site header, the footer, the admin bar or any editorial page — none of
   those are inside `.abv-root`, `.abv-gate`, `.abvm` or `#proflow-workspace`.

   `:is()` keeps it to (0,2,0), which is deliberate: it is meant to be easy to
   override for a genuine exception, and there is one below.
   ========================================================================== */
:is(.abv-root, .abv-gate, .abvm, #proflow-workspace) :is(a, .abv-link, .abvp-link,
  .abvx-link, .abvx-utils__item, .abvp-next__more, .abv-wizrecap__edit, .abvp-res__list a,
  .abv-more > summary),
:is(.abv-root, .abv-gate, .abvm, #proflow-workspace) :is(a, .abv-link, .abvp-link,
  .abvx-link, .abvx-utils__item, .abvp-next__more, .abv-wizrecap__edit,
  .abv-more > summary):is(:link, :visited, :hover, :focus, :active) {
  text-decoration: none !important;
  text-underline-offset: 0;
}

/* THE QUIET BUTTONS ARE TEXT ACTIONS TOO.
   "Continue with the Ventilation Calculator", "Sign out", "Resend code",
   "Change email", "Try another email", "Remove" are <button>s carrying
   `.abv-btn--quiet` / `.abvp-btn--quiet`. They have no pill and no fill — they
   ARE text links, and abv-app.css underlines them. No anchor rule can reach a
   <button>, so they need saying explicitly; found by auditing computed
   text-decoration across the whole app rather than by spotting them one at a
   time. Everything with an actual button treatment is untouched. */
:is(.abv-root, .abv-gate, .abvm, #proflow-workspace)
  :is(.abv-btn--quiet, .abvp-btn--quiet),
:is(.abv-root, .abv-gate, .abvm, #proflow-workspace)
  :is(.abv-btn--quiet, .abvp-btn--quiet):is(:hover, :focus, :active) {
  text-decoration: none !important;
  font-weight: 700;
  transition: color var(--abvx-t);
}
:is(.abv-root, .abvm, #proflow-workspace)
  :is(.abv-btn--quiet, .abvp-btn--quiet):is(:hover, :focus) {
  color: var(--abvx-orange-d);
}
:is(.abv-root, .abv-gate, .abvm, #proflow-workspace)
  :is(.abv-btn--quiet, .abvp-btn--quiet):focus-visible {
  outline: 3px solid var(--abvx-blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* "CHANGE" on an answered wizard question is a text action inside a <button>,
   so no anchor rule reaches it. Same grammar: no underline, orange on hover. */
.abv-root .abv-wizrecap__row:hover .abv-wizrecap__edit,
.abv-root .abv-wizrecap__row:focus .abv-wizrecap__edit { color: var(--abvx-orange-d); }
.abv-root .abv-wizrecap__row .abv-wizrecap__edit { transition: color var(--abvx-t); }

/* THE ONE EXCEPTION. A HubSpot form's own consent and privacy links are legal
   text belonging to the form, not calculator chrome — an underline there is a
   usability requirement, not decoration. Higher specificity, so it wins back. */
.abvm .abvm__hs a,
.abvm .abvm__hs a:hover,
.abvm .abvm__hs a:focus { text-decoration: underline !important; }

/* THE NEW-TAB MARK IS GONE.
   `.abvx-ext` is kept as a BEHAVIOURAL marker — the link policy and the
   decoration pass both read it, and removing the class would mean editing five
   JS files to delete a string — but it now renders nothing. The two lines
   below also neutralise any arrow a future stylesheet tries to append to a
   new-tab link inside the calculator, so this cannot come back by accident. */
:is(.abv-root, .abv-gate, .abvm, #proflow-workspace) .abvx-ext::after,
:is(.abv-root, .abv-gate, .abvm, #proflow-workspace) a[target="_blank"]::after {
  content: none !important;
  display: none !important;
}

/* ---- TEXT actions only -----------------------------------------------------
   A button can be an <a> too — "Join Pro Advantage" and "Learn about ProFlow™"
   are ghost BUTTONS built from anchors — so every rule below excludes the
   button classes explicitly. Without that, this block would repaint the CTA
   system's hover colours, which is precisely what it must not touch.

   `:not([class*="btn"])` catches every button variant in this codebase —
   abv-btn, abvp-btn, abvx-btn, abv-gate__btn AND abv-btn--ghost, which the
   first draft missed and repainted FIND AN INSTALLER orange on hover. It also
   takes the highest specificity of its arguments, so the whole
   selector stays at (0,3,0): strong enough to be reliable, low enough to
   override. */
:is(.abv-root, .abv-gate, .abvm, #proflow-workspace)
  :is(a, .abv-link, .abvp-link, .abvx-link):not([class*="btn"], .elementor-button) {
  font-weight: 700;
  transition: color var(--abvx-t);
}

/* Navy or blue → Breeze Orange. Nothing moves, nothing underlines. */
:is(.abv-root, .abvm, #proflow-workspace)
  :is(a, .abv-link, .abvp-link, .abvx-link):not([class*="btn"], .elementor-button):is(:hover, :focus) {
  color: var(--abvx-orange-d);
}

/* On a navy ground the hover takes the BRIGHTER orange — the darkened one
   sinks into the panel instead of lifting off it. */
:is(.abv-gate, .abvp-pf, .abvf, .abv-coastal, .abvp-res__list)
  a:not([class*="btn"], .elementor-button):is(:hover, :focus) {
  color: var(--abvx-orange);
}

/* Keyboard users must still see where they are — hover is not an accessible
   affordance and it is now the only other signal these links have. */
:is(.abv-root, .abv-gate, .abvm, #proflow-workspace) :is(a, .abv-link, .abvp-link,
  .abvx-link, .abvx-utils__item, .abvp-next__more, .abv-wizrecap__row):focus-visible {
  outline: 3px solid var(--abvx-blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- mobile: bottom sheet ------------------------------------------------- */
@media (max-width: 640px) {
  .abvm { padding: 0; align-items: flex-end; }
  .abvm__dialog {
    max-width: none;
    max-height: 92vh;
    border-radius: 16px 16px 0 0;
    transform: translateY(28px);
  }
  .abvm--wide .abvm__dialog { max-width: none; }
  .abvm__head { padding: 16px 18px calc(16px + env(safe-area-inset-bottom, 0px) * 0); }
  /* A grab bar, so the sheet reads as a sheet before anything is touched. */
  .abvm__head::before {
    content: "";
    position: absolute;
    top: 7px; left: 50%;
    width: 38px; height: 4px;
    margin-left: -19px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .3);
  }
  .abvm__head { padding-top: 20px; }
  .abvm__title { font-size: 19px; }
  .abvm__body { padding: 18px; font-size: 15px; }
  .abvm__foot {
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
  }
  .abvm__foot .abvx-btn { flex: 1 1 100%; }
  .abvm__foot--split { flex-direction: column-reverse; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .abvm, .abvm__dialog { transition: none; }
  .abvm__dialog { transform: none; }
  .abvm .abvx-btn:hover { transform: none; }
}

/* ---- form fields inside a dialog ------------------------------------------ */
.abvm__field { margin: 0 0 16px; }
.abvm__label {
  display: block;
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--abvx-navy);
}
.abvm__input {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 16px;            /* 16px or iOS zooms the whole page on focus */
  color: var(--abvx-navy);
  background: #fff;
  border: 1px solid rgba(5, 17, 36, .28);
  border-radius: 8px;
  transition: border-color var(--abvx-t), box-shadow var(--abvx-t);
}
.abvm__input:focus {
  outline: none;
  border-color: var(--abvx-orange);
  box-shadow: 0 0 0 3px rgba(239, 125, 72, .18);
}
.abvm__input--code {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 10px;
  text-align: center;
  padding-left: 10px;
}
.abvm__fine { margin: 0; font-size: 12.5px; line-height: 1.55; color: #6f7680; }
.abvm__msg {
  margin: 0 0 14px;
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.5;
  border-radius: 8px;
  background: #fdece4;
  border-left: 3px solid var(--abvx-orange);
  color: var(--abvx-navy);
}
.abvm__msg--err { background: #fdece4; border-left-color: #c0392b; }
.abvm__msg[hidden] { display: none !important; }

/* ---- HubSpot form inside a dialog ------------------------------------------
   The enrolment and rep-intake forms render IN the page DOM (Content Embed and
   classic v2 respectively), so they can be given the same field geometry as
   everything else rather than sitting in a foreign-looking iframe. */
.abvm__hs { min-height: 220px; }
.abvm__hs .hs-form-field { margin: 0 0 14px; }
/* Only the FIELD label gets the uppercase treatment. HubSpot also wraps every
   checkbox and radio option in its own <label>, and styling those the same way
   turned a plain multi-select into a wall of shouting small caps. */
.abvm__hs .hs-form-field > label {
  display: block;
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--abvx-navy);
}
.abvm__hs .hs-field-desc {
  margin: 0 0 8px;
  font-size: 12.5px;
  color: #6f7680;
}
.abvm__hs ul.inputs-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.abvm__hs ul.inputs-list > li { margin: 0; }
.abvm__hs ul.inputs-list > li::marker { content: none; }
.abvm__hs ul.inputs-list label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  min-height: 26px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.45;
  color: var(--abvx-ink);
  cursor: pointer;
}
.abvm__hs input[type="checkbox"],
.abvm__hs input[type="radio"] {
  flex: none;
  width: 18px;
  min-height: 18px;
  height: 18px;
  margin: 3px 0 0;
  padding: 0;
  accent-color: var(--abvx-orange);
}
.abvm__hs input[type="text"],
.abvm__hs input[type="email"],
.abvm__hs input[type="tel"],
.abvm__hs input[type="number"],
.abvm__hs textarea,
.abvm__hs select {
  display: block;
  width: 100%;
  min-height: 50px;
  padding: 13px 15px;
  font-family: inherit;
  font-size: 16px;
  color: var(--abvx-navy);
  background: #fff;
  border: 1px solid rgba(5, 17, 36, .28);
  border-radius: 8px;
}
.abvm__hs textarea { min-height: 96px; resize: vertical; }
.abvm__hs input:focus, .abvm__hs textarea:focus, .abvm__hs select:focus {
  outline: none;
  border-color: var(--abvx-orange);
  box-shadow: 0 0 0 3px rgba(239, 125, 72, .18);
}
.abvm__hs .hs-error-msg, .abvm__hs .hs-error-msgs label {
  color: #c0392b; font-size: 12.5px; text-transform: none; letter-spacing: 0; font-weight: 600;
}
.abvm__hs input[type="submit"], .abvm__hs .hs-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: 50px; padding: 13px 24px;
  font-family: inherit; font-size: 14.5px; font-weight: 700;
  text-transform: none; letter-spacing: 0;
  color: #fff; background: var(--abvx-orange);
  border: 1px solid var(--abvx-orange); border-radius: 999px; cursor: pointer;
  transition: background var(--abvx-t), box-shadow var(--abvx-t);
}
.abvm__hs input[type="submit"]:hover, .abvm__hs .hs-button:hover {
  background: var(--abvx-orange-d); border-color: var(--abvx-orange-d); color: #fff;
  box-shadow: 0 8px 18px rgba(239, 125, 72, .3);
}
.abvm__hsnote { margin: 0 0 14px; font-size: 13px; color: #6f7680; }
.abvm__hsloading { margin: 0; padding: 28px 0; text-align: center; color: #6f7680; font-size: 14px; }

/* The catalog attribution line was 10.5px — legible on a desktop monitor and
   not on a phone held at arm length. 11.5px is still clearly secondary. */
.abv-root .abvp-sw__empty.abvp-attrib { font-size: 11.5px; line-height: 1.5; }

/* ---- the success state ---------------------------------------------------- */
.abvm__done { text-align: center; padding: 8px 0 4px; }
.abvm__donemark {
  display: grid; place-items: center;
  width: 62px; height: 62px; margin: 0 auto 18px;
  border-radius: 999px;
  background: var(--abvx-orange); color: #fff;
}
.abvm__doneh {
  margin: 0 0 10px;
  font-size: 22px; font-weight: 800; letter-spacing: -.3px;
  color: var(--abvx-navy);
}
.abvm__donep { margin: 0 auto 6px; max-width: 42ch; color: var(--abvx-ink); }

/* =============================================================================
   PRO ADVANTAGE TIERS — the "quick answer" dialog
   =============================================================================
   Three levels, drawn as a climb rather than a table. The numbers are the
   verified Contractor Programs rules and nothing else.
   ========================================================================== */
.abvx-tiers { display: grid; gap: 10px; margin: 0 0 18px; }
.abvx-tier {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--abvx-line);
  border-left: 4px solid var(--abvx-orange);
  border-radius: 10px;
}
.abvx-tier--1 { border-left-color: rgba(239, 125, 72, .45); }
.abvx-tier--2 { border-left-color: rgba(239, 125, 72, .75); }
.abvx-tier--3 { border-left-color: var(--abvx-orange); background: #fffaf7; }
.abvx-tier__n {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 999px;
  background: var(--abvx-navy); color: #fff;
  font-size: 15px; font-weight: 800;
}
.abvx-tier--3 .abvx-tier__n { background: var(--abvx-orange); }
.abvx-tier__t { display: block; font-size: 15px; font-weight: 800; color: var(--abvx-navy); line-height: 1.25; }
.abvx-tier__s { display: block; margin-top: 2px; font-size: 13px; color: #6f7680; line-height: 1.4; }
.abvx-tier__pay {
  text-align: right;
  font-size: 20px; font-weight: 800; letter-spacing: -.4px;
  color: var(--abvx-navy); white-space: nowrap;
}
.abvx-tier__pay small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: #6f7680; }
.abvx-tiers__lead { margin: 0 0 16px; font-size: 15px; }
.abvx-tiers__lead b { color: var(--abvx-navy); }

@media (max-width: 480px) {
  .abvx-tier { grid-template-columns: 40px 1fr; row-gap: 6px; padding: 14px; }
  .abvx-tier__n { width: 40px; height: 40px; font-size: 14px; }
  .abvx-tier__pay { grid-column: 2; text-align: left; font-size: 18px; }
  .abvx-tier__pay small { display: inline; margin-left: 6px; font-size: 10.5px; }
}

/* =============================================================================
   THE PRO ADVANTAGE CALLOUT'S UTILITY ROW
   =============================================================================
   Added under the existing callout's primary CTA: a new-tab education link and
   a "See the tiers" dialog trigger, so nobody has to leave a calculation to
   answer a thirty-second question.
   ========================================================================== */
.abvx-utils {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin: 14px 0 0;
  padding: 0;
}

/* SPECIFICITY, DELIBERATELY. `.elementor-kit-1333 button` is (0,1,1) and paints
   every bare <button> on this site as a solid orange block with 32px/48px
   padding — the same rule that broke the homeowner answer states, and it
   caught this row too on the first deploy: "See the tiers" rendered as a big
   orange slab in the middle of a text link row.

   `.abvx-utils .abvx-utils__item` is (0,2,0), which beats it; the hover and
   focus variants land at (0,3,0), which beats `.elementor-kit-1333
   button:hover` at (0,2,1). Every state restates its own `color`, because a
   background without a colour beside it is exactly how the first bug worked. */
.abvx-utils .abvx-utils__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  padding: 9px 0;
  min-height: 44px;   /* a real tap target at every width */
  background: none;
  border: 0;
  border-radius: 4px;
  box-shadow: none;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--abvx-navy);
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  transition: color var(--abvx-t);
}
.abvx-utils .abvx-utils__item:hover,
.abvx-utils .abvx-utils__item:focus {
  background: none;
  box-shadow: none;
  color: var(--abvx-orange-d);
}
.abvx-utils .abvx-utils__item:focus-visible {
  outline: 3px solid var(--abvx-blue);
  outline-offset: 2px;
}
/* On a navy panel the row inverts, or it disappears into the ground. */
.abvp-pf .abvx-utils .abvx-utils__item,
.abvf .abvx-utils .abvx-utils__item,
.abv-gate .abvx-utils .abvx-utils__item { color: #fff; }
.abvp-pf .abvx-utils .abvx-utils__item:hover,
.abvp-pf .abvx-utils .abvx-utils__item:focus,
.abvf .abvx-utils .abvx-utils__item:hover,
.abvf .abvx-utils .abvx-utils__item:focus,
.abv-gate .abvx-utils .abvx-utils__item:hover,
.abv-gate .abvx-utils .abvx-utils__item:focus { color: var(--abvx-orange); }

/* The same trap, one row down: the "See the tiers" link inside a What's-next
   card is a <button> too. */
.abvp-next .abvp-next__more,
.abvp-next .abvp-next__more:hover,
.abvp-next .abvp-next__more:focus {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  min-height: 44px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}
.abvp-next .abvp-next__more { color: var(--abvx-navy); }
.abvp-next .abvp-next__more:hover,
.abvp-next .abvp-next__more:focus { color: var(--abvx-orange-d); }
.abvp-next .abvp-next__more:focus-visible { outline: 3px solid var(--abvx-blue); outline-offset: 2px; }

/* =============================================================================
   THE PROFESSIONAL "PICK THE EXACT COLOR" DISCLOSURE
   =============================================================================
   THE DEFECT, measured on staging: the disclosure is written into
   `[data-abv-swatches]`, which is `.abvp-sw` — a `role="radiogroup"` laid out
   as `grid-template-columns: repeat(3, 179px)`. So the accordion was living in
   a 179px grid cell: the label clipped mid-word ("PICK MY EXACT COLO"), the
   optional note sat beside it in a second cell, and the whole thing carried
   the red `.is-invalid` edge because the validator demanded an exact color.

   The grid is right for the CARDS and wrong for the DISCLOSURE, and the same
   element is both. `:has()` settles it: when this host is holding a
   disclosure, it stops being a grid. No JS restructuring, no second host.
   ========================================================================== */
.abv-root .abvp-sw:has(> .abv-exact) {
  display: block;
  grid-template-columns: none;
  gap: 0;
}

.abv-root .abv-exact {
  display: block;
  width: 100%;
  background: #fff;
  border: 1px solid rgba(5, 17, 36, .22);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color var(--abvx-t), box-shadow var(--abvx-t);
}
.abv-root .abv-exact[open] { border-color: var(--abvx-orange); }
@media (hover: hover) and (pointer: fine) {
  .abv-root .abv-exact:hover {
    border-color: var(--abvx-orange);
    box-shadow: 0 0 0 3px rgba(239, 125, 72, .13);
  }
}

/* THE ROW. One line, full width, no uppercase, no underline, no arrow and no
   grey bar — it is a control, not a heading. */
.abv-root .abv-exact > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 13px 16px;
  background: #fff;
  border: 0;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: 0;
  text-decoration: none;
  color: var(--abvx-navy);
  cursor: pointer;
  list-style: none;                       /* Firefox */
  transition: color var(--abvx-t);
}
/* The UA disclosure triangle, in both engines. The chevron below replaces it. */
.abv-root .abv-exact > summary::-webkit-details-marker { display: none; }
.abv-root .abv-exact > summary::marker { content: ""; }
.abv-root .abv-exact > summary:hover { color: var(--abvx-navy); }
.abv-root .abv-exact > summary:focus-visible {
  outline: 3px solid var(--abvx-blue);
  outline-offset: -3px;
}

.abv-exact__lead {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  flex: 1 1 auto;
  min-width: 0;
}
/* abv-app.css carries `.abv-root .abv-exact__label { text-transform: uppercase;
   letter-spacing: 1.1px; font-size: 13px }` — a heading treatment from when
   this row WAS a heading. Setting text-transform on the <summary> did nothing,
   because the uppercase lives on the span inside it. (0,3,0) to win. */
.abv-root .abv-exact > summary .abv-exact__label {
  color: var(--abvx-navy);
  font-size: 15px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}

/* "Optional" is a quiet fact, not a warning. Orange tint so it reads as part
   of the brand rather than as a disabled state. */
.abv-exact__opt {
  flex: none;
  margin: 0;
  padding: 3px 9px;
  border-radius: 999px;
  background: #fdece4;
  color: #8a4a24;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The chosen colour, once there is one. */
.abv-exact__sel {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: #4a5262;
}
.abv-exact__sel[hidden] { display: none !important; }

.abv-exact__chev {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-left: auto;
  color: var(--abvx-orange);
  transition: transform var(--abvx-t);
}
.abv-exact__chev svg { display: block; width: 20px; height: 20px; }
.abv-root .abv-exact[open] .abv-exact__chev { transform: rotate(180deg); }

.abv-root .abv-exact__body {
  padding: 4px 16px 16px;
  border-top: 1px solid rgba(5, 17, 36, .1);
}

/* The tone row is the engineering input, so it is the control that earns the
   red edge when nothing is chosen. It never had a style for it. */
.abv-root .abvp-bands.is-invalid {
  border-radius: 10px;
  box-shadow: 0 0 0 2px #c0392b;
}

@media (max-width: 640px) {
  .abv-root .abv-exact > summary { min-height: 60px; padding: 12px 14px; font-size: 15px; }
  .abv-root .abv-exact__body { padding: 4px 12px 14px; }
  /* At 390px the label, the pill and the chevron will not share a line. Let
     the pill drop under the label rather than squeezing the label. */
  .abv-exact__lead { flex-direction: column; align-items: flex-start; gap: 3px; }
  .abv-exact__sel { display: none; }
}

/* The embedded HubSpot form brings its own type scale, which is sized for a
   full-width landing page. In a 390px sheet its H1 wrapped to four lines and
   pushed the first field below the fold. Cap it inside the dialog only. */
@media (max-width: 640px) {
  .abvm .abvm__hs h1,
  .abvm .abvm__hs h2 { font-size: 20px !important; line-height: 1.2 !important; margin: 0 0 8px !important; }
  .abvm .abvm__hs h3 { font-size: 17px !important; line-height: 1.25 !important; }
  .abvm .abvm__hs p { font-size: 14px !important; line-height: 1.5 !important; }
}
/* =============================================================================
   HOMEOWNER "HOW LARGE IS THE HOME?"  —  PROGRESSIVE DISCLOSURE
   =============================================================================
   Page 8863 only, homeowner mode only, attic screen only. Scoped through
   `.abv-root[data-abv-mode="homeowner"]` so the professional calculator cannot
   be touched by any of it.

   The step becomes ONE question. Home size and its live estimate sit side by
   side as a single panel; everything else appears only once the engine has a
   figure. `data-abvhx` is written by abv-ui.js and is either "empty" or
   "sized" — see that file for why the engine's own `hidden` attribute is the
   validity signal.

   NO DOM IS MOVED. The estimate card lives after the three fieldsets in the
   markup, and it is lifted beside the input with flex `order` alone, so
   abv-steps.js keeps emitting exactly what it emits today and abv-attic.js
   keeps finding every node where it left it.
   ========================================================================== */
.abv-root[data-abv-mode="homeowner"] [data-abv-screen="attic"] .abv-split__main {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  row-gap: 0;
  column-gap: 0;
}
/* A base order for every child, so an element added to this step later lands
   with the question group rather than jumping to the top of the screen. */
.abv-root[data-abv-mode="homeowner"] [data-abv-screen="attic"] .abv-split__main > * {
  order: 6;
  flex: 0 0 100%;
  min-width: 0;
}
.abv-root[data-abv-mode="homeowner"] [data-abv-screen="attic"] .abv-q { order: 1; }
.abv-root[data-abv-mode="homeowner"] [data-abv-screen="attic"] .abv-sub { order: 2; }
.abv-root[data-abv-mode="homeowner"] [data-abv-screen="attic"] .abv-areahead { order: 3; }
.abv-root[data-abv-mode="homeowner"] [data-abv-screen="attic"] .abv-estimate { order: 4; }
.abv-root[data-abv-mode="homeowner"] [data-abv-screen="attic"] [data-abv-area-source] { order: 5; }
.abv-root[data-abv-mode="homeowner"] [data-abv-screen="attic"] [data-abv-known] { order: 7; }
.abv-root[data-abv-mode="homeowner"] [data-abv-screen="attic"] .abv-qual { order: 8; }
.abv-root[data-abv-mode="homeowner"] [data-abv-screen="attic"] [data-abv-size-error] { order: 9; }

/* A little more air under the question before the panel. */
.abv-root[data-abv-mode="homeowner"] [data-abv-screen="attic"] .abv-sub {
  margin-bottom: 26px;
}

/* ---- the panel: input and estimate as ONE component ----------------------
   Two halves of one box rather than two boxes: the gap is zero, the shared
   edge is a single hairline, and the outer corners are the only rounded ones.
   That is what makes the estimate read as this input's output. */
@media (min-width: 720px) {
  .abv-root[data-abv-mode="homeowner"] [data-abv-screen="attic"] .abv-areahead {
    flex: 0 0 56%;
    padding: 22px 24px 20px;
    background: #fff;
    border: 1px solid var(--abv-line);
    border-right: 0;
    border-radius: 14px 0 0 14px;
  }
  .abv-root[data-abv-mode="homeowner"] [data-abv-screen="attic"] .abv-estimate {
    flex: 0 0 44%;
    align-self: stretch;
    padding: 22px 24px 20px;
    border-radius: 0 14px 14px 0;
  }
}
/* Mobile and small tablet: one column, stacked, still one box. */
@media (max-width: 719px) {
  .abv-root[data-abv-mode="homeowner"] [data-abv-screen="attic"] .abv-areahead {
    padding: 20px 18px 18px;
    background: #fff;
    border: 1px solid var(--abv-line);
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
  }
  .abv-root[data-abv-mode="homeowner"] [data-abv-screen="attic"] .abv-estimate {
    padding: 18px;
    border-radius: 0 0 14px 14px;
  }
}

/* The estimate half. Compact — it is a readout beside a field, not a section.
   Orange eyebrow and navy figure are the existing tokens, restated only where
   the size changes. */
.abv-root[data-abv-mode="homeowner"] [data-abv-screen="attic"] .abv-estimate {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fff;
}
.abv-root[data-abv-mode="homeowner"] [data-abv-screen="attic"] .abv-estimate b {
  font-size: 30px;
}
.abv-root[data-abv-mode="homeowner"] [data-abv-screen="attic"] .abv-estimate p {
  margin-bottom: 0;
}
.abv-root[data-abv-mode="homeowner"] [data-abv-screen="attic"] .abv-estimate [data-abv-use-est] {
  align-self: flex-start;
  margin-top: 10px;
}
@media (max-width: 719px) {
  .abv-root[data-abv-mode="homeowner"] [data-abv-screen="attic"] .abv-estimate b { font-size: 27px; }
}

/* The hint under the input is the tallest thing in the panel; it does not need
   to also be the widest. */
.abv-root[data-abv-mode="homeowner"] [data-abv-screen="attic"] .abv-areahead .abv-field__hint {
  max-width: 46ch;
}

/* Two app margins were splitting the panel down the middle: .abv-areahead
   carries margin-bottom 24px, and the field inside it another 24px. Both were
   correct when the areahead was a bare row on the page; inside a bordered box
   the first opens a gap between the two halves on mobile and the second leaves
   dead space under the input. Spacing around the panel is set below instead. */
.abv-root[data-abv-mode="homeowner"] [data-abv-screen="attic"] .abv-areahead { margin-bottom: 0; }
.abv-root[data-abv-mode="homeowner"] [data-abv-screen="attic"] .abv-areahead .abv-field { margin-bottom: 0; }

/* ---- the resting state --------------------------------------------------
   The card stays on screen with a placeholder instead of appearing from
   nowhere, so the panel does not change shape under the first keystroke.
   `[hidden]` is the engine's signal and is only ever READ — the UA rule is
   overridden here rather than the attribute being removed. */
.abv-root[data-abv-mode="homeowner"] [data-abv-screen="attic"] .abv-estimate[hidden] {
  display: flex !important;
}
.abv-root[data-abv-mode="homeowner"] [data-abv-screen="attic"] .abv-estimate[hidden] [data-abv-estimate-value]::before {
  content: "\2014\00a0sq. ft.";
  color: var(--abv-muted);
}
.abv-root[data-abv-mode="homeowner"] [data-abv-screen="attic"] .abv-estimate[hidden] [data-abv-estimate-how],
.abv-root[data-abv-mode="homeowner"] [data-abv-screen="attic"] .abv-estimate[hidden] [data-abv-use-est] {
  display: none !important;
}

/* ---- what is hidden until there is a figure ---------------------------- */
[data-abv-screen="attic"][data-abvhx="empty"] .abv-sub-q,
[data-abv-screen="attic"][data-abvhx="empty"] [data-abv-known],
[data-abv-screen="attic"][data-abvhx="empty"] .abv-qual,
[data-abv-screen="attic"][data-abvhx="empty"] [data-abv-area-source] {
  display: none !important;
}

/* ---- the reveal --------------------------------------------------------
   An ANIMATION, not a transition: these go from display:none to displayed,
   and a transition cannot run across that. Runs once per empty -> sized
   change because abv-ui.js only writes the attribute when it actually
   changes. A small stagger, nothing theatrical.

   `[hidden]` is deliberately excluded: the garage-size fieldset and the
   source line manage their own visibility, and animating them here would
   make a hidden element briefly paint. */
@keyframes abvhx-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
[data-abv-screen="attic"][data-abvhx="sized"] .abv-sub-q:not([hidden]),
[data-abv-screen="attic"][data-abvhx="sized"] [data-abv-known],
[data-abv-screen="attic"][data-abvhx="sized"] .abv-qual,
[data-abv-screen="attic"][data-abvhx="sized"] [data-abv-area-source]:not([hidden]) {
  animation: abvhx-in .26s cubic-bezier(.2, .7, .3, 1) both;
}
[data-abv-screen="attic"][data-abvhx="sized"] [data-abv-area-source]:not([hidden]) { animation-delay: 0s; }
[data-abv-screen="attic"][data-abvhx="sized"] .abv-sub-q:nth-of-type(1) { animation-delay: .04s; }
[data-abv-screen="attic"][data-abvhx="sized"] .abv-sub-q:nth-of-type(2) { animation-delay: .08s; }
[data-abv-screen="attic"][data-abvhx="sized"] .abv-sub-q:nth-of-type(3) { animation-delay: .1s; }
[data-abv-screen="attic"][data-abvhx="sized"] [data-abv-known] { animation-delay: .12s; }
[data-abv-screen="attic"][data-abvhx="sized"] .abv-qual { animation-delay: .14s; }

@media (prefers-reduced-motion: reduce) {
  [data-abv-screen="attic"][data-abvhx="sized"] .abv-sub-q:not([hidden]),
  [data-abv-screen="attic"][data-abvhx="sized"] [data-abv-known],
  [data-abv-screen="attic"][data-abvhx="sized"] .abv-qual,
  [data-abv-screen="attic"][data-abvhx="sized"] [data-abv-area-source]:not([hidden]) {
    animation: none;
  }
}

/* The first revealed question needs separating from the panel above it; the
   panel's own bottom edge is doing that job on the empty state. */
[data-abv-screen="attic"][data-abvhx="sized"] .abv-sub-q:nth-of-type(1) { margin-top: 30px; }
[data-abv-screen="attic"][data-abvhx="sized"] [data-abv-area-source] { margin-top: 12px; }

/* =============================================================================
   HOMEOWNER ROOF SLOPE  —  REVISION 8: FOUR SHAPE CARDS + COLLAPSED HELPER
   =============================================================================
   Page 8863 only, homeowner mode only, slope screen only. Uses the app's own
   tokens so the cards sit in the same visual system as every other control.

   The rev-7 `.abv-bp` shortlist styling is left alone — the QA harness still
   references that class; these are new classes beside it, not a rewrite of it.

   Long selectors throughout on purpose: the Elementor kit styles bare
   `button`, and `.elementor-kit-1333 button:hover` is (0,2,1). Every state
   below restates `color` and `background` for that reason.
   ========================================================================== */
.abv-root[data-abv-mode="homeowner"] [data-abv-screen="slope"] .abv-bks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* All four the same height whatever the description wraps to. */
  grid-auto-rows: 1fr;
  gap: var(--abv-3);
  margin: var(--abv-5) 0 var(--abv-6);
}
@media (min-width: 860px) {
  .abv-root[data-abv-mode="homeowner"] [data-abv-screen="slope"] .abv-bks {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--abv-4);
  }
}

/* ---- the card ---------------------------------------------------------- */
.abv-root[data-abv-mode="homeowner"] [data-abv-screen="slope"] .abv-bk {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: var(--abv-4);
  background: #fff;
  border: 1px solid var(--abv-line);
  border-radius: var(--abv-radius);
  font: inherit;
  color: var(--abv-ink);
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  /* The kit's nowrap INHERITS and would clip the description to one line. */
  white-space: normal;
  cursor: pointer;
  transition: border-color var(--abv-dur) var(--abv-ease),
              box-shadow var(--abv-dur) var(--abv-ease),
              transform var(--abv-dur) var(--abv-ease);
}
.abv-root[data-abv-mode="homeowner"] [data-abv-screen="slope"] .abv-bk:hover {
  color: var(--abv-ink);
  background: #fff;
  border-color: var(--abv-navy);
  transform: translateY(-2px);
}
.abv-root[data-abv-mode="homeowner"] [data-abv-screen="slope"] .abv-bk:focus {
  color: var(--abv-ink);
  background: #fff;
}
.abv-root[data-abv-mode="homeowner"] [data-abv-screen="slope"] .abv-bk:focus-visible {
  outline: 3px solid var(--abv-blue);
  outline-offset: 3px;
  color: var(--abv-ink);
  background: #fff;
}
/* Selected: orange edge AND a filled orange tick, so the state survives
   greyscale instead of resting on border colour alone. */
.abv-root[data-abv-mode="homeowner"] [data-abv-screen="slope"] .abv-bk.is-on {
  color: var(--abv-ink);
  background: #fff;
  border-color: var(--abv-orange);
  box-shadow: inset 0 0 0 1px var(--abv-orange);
}

.abv-root[data-abv-mode="homeowner"] [data-abv-screen="slope"] .abv-bk__art {
  display: block;
  margin-bottom: 2px;
}
.abv-root[data-abv-mode="homeowner"] [data-abv-screen="slope"] .abv-bk__art svg {
  display: block;
  width: 100%;
  height: auto;
}
.abv-root[data-abv-mode="homeowner"] [data-abv-screen="slope"] .abv-bk__name {
  display: block;
  font-size: 17px;
  font-weight: var(--abv-w-head);
  line-height: 1.25;
  color: var(--abv-ink-head);
}
.abv-root[data-abv-mode="homeowner"] [data-abv-screen="slope"] .abv-bk__say {
  display: block;
  font-size: var(--abv-small);
  line-height: 1.45;
  color: var(--abv-muted);
}
/* The technical value: last, smallest, never the label. */
.abv-root[data-abv-mode="homeowner"] [data-abv-screen="slope"] .abv-bk__pitch {
  display: block;
  margin-top: 6px;
  font-size: var(--abv-tiny);
  font-weight: var(--abv-w-strong);
  letter-spacing: var(--abv-eyebrow-ls);
  text-transform: uppercase;
  color: var(--abv-blue-lt);
}
.abv-root[data-abv-mode="homeowner"] [data-abv-screen="slope"] .abv-bk__check {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--abv-orange);
  color: #fff;
  opacity: 0;
  transform: scale(.7);
  transition: opacity var(--abv-dur-fast) var(--abv-ease),
              transform var(--abv-dur-fast) var(--abv-ease);
}
.abv-root[data-abv-mode="homeowner"] [data-abv-screen="slope"] .abv-bk.is-on .abv-bk__check {
  opacity: 1;
  transform: none;
}

/* The helper's recommendation, on the card it chose. */
.abv-root[data-abv-mode="homeowner"] [data-abv-screen="slope"] .abv-bk__rec {
  display: block;
  margin: 0 0 6px;
  font-size: var(--abv-tiny);
  font-weight: var(--abv-w-strong);
  letter-spacing: var(--abv-eyebrow-ls);
  text-transform: uppercase;
  color: var(--abv-orange);
}
.abv-root[data-abv-mode="homeowner"] [data-abv-screen="slope"] .abv-bk.is-rec {
  border-color: var(--abv-orange);
}

/* ---- the collapsed helper ---------------------------------------------- */
.abv-root[data-abv-mode="homeowner"] [data-abv-screen="slope"] .abv-helper {
  margin: 0 0 var(--abv-5);
  background: #fff;
  border: 1px solid var(--abv-line);
  border-radius: var(--abv-radius);
}
.abv-root[data-abv-mode="homeowner"] [data-abv-screen="slope"] .abv-helper__sum {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--abv-4);
  padding-right: calc(var(--abv-4) + 30px);
  cursor: pointer;
  list-style: none;
  border-radius: var(--abv-radius);
}
.abv-root[data-abv-mode="homeowner"] [data-abv-screen="slope"] .abv-helper__sum::-webkit-details-marker {
  display: none;
}
.abv-root[data-abv-mode="homeowner"] [data-abv-screen="slope"] .abv-helper__sum:focus-visible {
  outline: 3px solid var(--abv-blue);
  outline-offset: 2px;
}
.abv-root[data-abv-mode="homeowner"] [data-abv-screen="slope"] .abv-helper__t {
  font-size: var(--abv-body);
  font-weight: var(--abv-w-strong);
  color: var(--abv-ink-head);
}
.abv-root[data-abv-mode="homeowner"] [data-abv-screen="slope"] .abv-helper__hint {
  font-size: var(--abv-small);
  color: var(--abv-muted);
}
/* A plus that loses its upright when open. Not an arrow — nothing in this
   pass uses arrows. */
.abv-root[data-abv-mode="homeowner"] [data-abv-screen="slope"] .abv-helper__sum::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--abv-4);
  width: 13px;
  height: 13px;
  margin-top: -6px;
  background:
    linear-gradient(var(--abv-orange), var(--abv-orange)) center / 13px 2.2px no-repeat,
    linear-gradient(var(--abv-orange), var(--abv-orange)) center / 2.2px 13px no-repeat;
}
.abv-root[data-abv-mode="homeowner"] [data-abv-screen="slope"] .abv-helper[open] .abv-helper__sum::after {
  background: linear-gradient(var(--abv-orange), var(--abv-orange)) center / 13px 2.2px no-repeat;
}
.abv-root[data-abv-mode="homeowner"] [data-abv-screen="slope"] .abv-helper__body {
  margin-top: 0;
  padding: var(--abv-4);
  border-top: 1px solid var(--abv-line);
}
/* The question block is already inside a bordered panel, so it drops the
   second frame the standalone wizard carried. */
.abv-root[data-abv-mode="homeowner"] [data-abv-screen="slope"] .abv-helper__body .abv-wiz {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

/* ---- the outcome ------------------------------------------------------- */
.abv-root[data-abv-mode="homeowner"] [data-abv-screen="slope"] .abv-outcome {
  display: flex;
  align-items: flex-start;
  gap: var(--abv-3);
  margin: var(--abv-4) 0 0;
  padding: var(--abv-4);
  background: var(--abv-tint);
  border: 1px solid var(--abv-orange);
  border-radius: var(--abv-radius);
}
.abv-root[data-abv-mode="homeowner"] [data-abv-screen="slope"] .abv-outcome[hidden] {
  display: none;
}
.abv-root[data-abv-mode="homeowner"] [data-abv-screen="slope"] .abv-outcome__tick {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--abv-orange);
  color: #fff;
}
.abv-root[data-abv-mode="homeowner"] [data-abv-screen="slope"] .abv-outcome__text b {
  display: block;
  font-size: 17px;
  font-weight: var(--abv-w-head);
  color: var(--abv-ink-head);
}
.abv-root[data-abv-mode="homeowner"] [data-abv-screen="slope"] .abv-outcome__text p {
  margin: 4px 0 0;
  font-size: var(--abv-small);
  line-height: 1.5;
  color: var(--abv-ink);
}

@media (prefers-reduced-motion: reduce) {
  .abv-root[data-abv-mode="homeowner"] [data-abv-screen="slope"] .abv-bk,
  .abv-root[data-abv-mode="homeowner"] [data-abv-screen="slope"] .abv-bk__check { transition: none; }
  .abv-root[data-abv-mode="homeowner"] [data-abv-screen="slope"] .abv-bk:hover { transform: none; }
}