/* ================================================================
   sections/help.css
   Source: research/fragments/home/help.html (identical on about,
           projects, contacts and every /projects/<slug> page except the
           numbered badge — see partials/help.html).
   CSS values: research/_stylesheet.css (home scope) — the same component
   ships on inner pages with different generated hashes but identical rules.

   HEIGHT MATH (desktop):
     .help__header    200px   (driven by the 200px vertical rules)
     .help__hr          1px
     .help__qas       403px   (3 FAQ rows @ ~133.4 + 2 hairlines;
                               the reference measures 403.219px)
     .help__message   200px
                     -------
                       804px  == reference-heights.json ✔

   Reference class map:
     .framer-1at94tz -> .help
     .framer-1si18rn -> .help__header      (also 1t8tsgw / mzmjdo share rules)
     .framer-1ixo8np -> .help__inner       (also 3behvi / 1v4vxpk)
     .framer-fnn89h  -> .help__gapline
     .framer-1s0ncv7 -> .help__gapline--stretch
     .framer-cojvsn  -> .help__header-part
     .framer-rq3dy7  -> .help__header-body
     .framer-o99fnx  -> .help__subheader
     .framer-1ao3i3x -> .help__title
     .framer-u4cut7  -> .help__title-text
     .framer-6uvoma  -> .help__hr
     .framer-1t8tsgw -> .help__qas
     .framer-1ouw7qm -> .faq
     .framer-19q48zs -> .faq__plus
     .framer-wwpd45  -> .faq__row
     .framer-19x9foe -> .faq__cell
     .framer-yjosad  -> .faq__cell--auto
     .framer-c60c9h  -> .faq__cell--gaps
     .framer-1wxz79z -> .faq__hr
     .framer-1yp8ydw -> .faq-item
     .framer-qa9hu2  -> .faq-item__head
     .framer-toyh22  -> .faq-item__toggle
     .framer-1990rfy -> .faq-item__question
     .framer-mzmjdo  -> .help__message
     .framer-1u3e8jy -> .help__message-part
     .framer-5sasm5  -> .help__message-body
     .framer-1xghvc0 -> .quote
     .framer-15nov9j -> .help__button-part
     .framer-1mazctw -> .help__button
     .framer-9akam6  -> .help__button-text
     .framer-1w9ra54 -> .help__button-slot
     .framer-dmce0u  -> .btn-dark
   ================================================================ */

.help {
  background-color: var(--c-white);
  z-index: 1;
  display: flex;
  flex-flow: column;
  flex: none;
  place-content: center flex-start;
  align-items: center;
  gap: 0;
  width: 100%;
  height: min-content;
  padding: 0;
  position: relative;
  overflow: hidden;
}

/* the three horizontal bands */
.help__header,
.help__qas,
.help__message {
  z-index: 4;
  display: flex;
  flex-flow: row;
  flex: none;
  place-content: flex-start center;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  height: min-content;
  padding: 0 32px;
  position: relative;
  overflow: visible;
}

.help__inner {
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: center;
  align-items: center;
  gap: 0;
  width: 1px;
  max-width: var(--page-max);
  height: min-content;
  padding: 0;
  position: relative;
  overflow: visible;
}

/* ---------------- vertical rules ---------------- */
.help .vline,
.faq .vline {
  height: 100%;
  width: 1px;
  flex: none;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}
.help .vline--200 { height: 200px; }

.help .vline--faint,
.faq .vline--faint {
  --border-top-width: 1px;  --border-right-width: 1px;
  --border-bottom-width: 1px; --border-left-width: 1px;
  --border-style: solid;
  --border-color: var(--c-stone-40);       /* #d2ceca66 */
}
.help .vline--peach,
.faq .vline--peach {
  --border-top-width: 3px;  --border-right-width: 3px;
  --border-bottom-width: 3px; --border-left-width: 3px;
  --border-style: dashed;
  --border-color: var(--c-peach-95);       /* #e68c55f2 */
}
.help .vline::after,
.faq .vline::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  pointer-events: none;
  border-width: var(--border-top-width, 0) var(--border-right-width, 0)
                var(--border-bottom-width, 0) var(--border-left-width, 0);
  border-color: var(--border-color, transparent);
  border-style: var(--border-style, solid);
}

/* ---------------- header ---------------- */
.help__gapline {
  height: min-content;
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: center flex-start;
  align-items: center;
  gap: 8px;
  width: 1px;
  padding: 0;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}
.help__gapline--stretch {
  place-content: flex-end flex-start;
  align-self: stretch;
  align-items: flex-end;
  gap: 0;
  height: auto;
  overflow: visible;
}

.help__header-part {
  display: flex;
  flex-flow: row;
  flex: 2 0 0;
  place-content: flex-end flex-start;
  align-items: flex-end;
  gap: 0;
  width: 1px;
  height: min-content;
  max-height: 200px;
  padding: 0;
  position: relative;
  overflow: visible;
}

.help__header-body {
  height: min-content;
  display: flex;
  flex-flow: column;
  flex: 1 0 0;
  place-content: flex-start center;
  align-items: flex-start;
  gap: 18px;
  width: 1px;
  padding: 0 0 42px;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}

.help__subheader {
  height: min-content;
  z-index: 1;
  display: flex;
  flex-flow: row;
  flex: none;
  place-content: center flex-start;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}

/* badge on the white surface: same box model as the footer badge */
.badge--on-white .badge__label { background-color: var(--c-stone-40); }

.help__title {
  max-width: 370px;
  height: min-content;
  min-height: 50px;
  display: flex;
  flex-flow: row;
  flex: none;
  place-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}
.help__title-text {
  z-index: 1;
  flex: none;
  width: 100%;
  height: auto;
  position: absolute;
  top: 50%;
  left: -4px;
  transform: translateY(-50%);
  white-space: pre-wrap;
  word-break: break-word;
  word-wrap: break-word;
}

/* ---------------- hairlines ---------------- */
.help__hr {
  z-index: 3;
  flex: none;
  width: 100%;
  height: 1px;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}
.help__hr::after {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border: 1px solid var(--c-stone-75);      /* #d2cecabf */
  pointer-events: none;
}

.faq__hr {
  z-index: 3;
  flex: none;
  width: 100%;
  height: 1px;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}
.faq__hr::after {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border: 3px dashed var(--c-stone-65);     /* #d2cecaa6 */
  pointer-events: none;
}

/* ---------------- questions ---------------- */
.faq {
  flex: 2 0 0;
  width: 1px;
  display: flex;
  flex-flow: column;
  place-content: flex-start;
  align-items: flex-start;
  gap: 0;
  height: min-content;
  padding: 0;
  position: relative;
  overflow: visible;
}

.faq__plus {
  z-index: 3;
  flex: none;
  width: 15px;
  height: 15px;
  position: absolute;
  top: -8px;
  left: -7px;
}
.faq__plus svg { width: 100%; height: 100%; }
/* live does not render the FAQ corner "+" at phone (390 screenshot-verified;
   only desktop/tablet paint it). */
@media (max-width: 809.98px) { .faq__plus { display: none; } }

.faq__row {
  display: flex;
  flex-flow: row;
  flex: none;
  place-content: flex-start center;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  height: min-content;
  padding: 0;
  position: relative;
  overflow: visible;
}

.faq__cell {
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: flex-start;
  align-self: stretch;
  align-items: flex-start;
  gap: 0;
  width: 1px;
  height: auto;
  padding: 0;
  position: relative;
  overflow: visible;
}
.faq__cell--auto { overflow: var(--overflow-clip-fallback, clip); }
.faq__cell--end {
  place-content: flex-end flex-start;
  align-items: flex-end;
}
.faq__cell--gaps {
  place-content: flex-start space-between;
  align-items: flex-start;
  overflow: var(--overflow-clip-fallback, clip);
}

.faq__slot {
  flex: 1 0 0;
  width: 1px;
  height: auto;
  position: relative;
}

/* The phone variant's DOM carries three extra closing rules (reference
   classes tg40k6 / xdjwea / apvbkc) that do not exist above 810px. */
.faq__vline--phone { display: none; }

/* --- one question --- */
.faq-item {
  cursor: pointer;
  height: min-content;
  min-height: 132px;
  width: 100%;
  display: flex;
  flex-flow: column;
  place-content: flex-start;
  align-items: flex-start;
  gap: 0;
  padding: 0;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}

.faq-item__head {
  height: min-content;
  display: flex;
  flex-flow: column;
  flex: none;
  place-content: flex-start;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  padding: 0;
  position: relative;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  overflow: var(--overflow-clip-fallback, clip);
}

.faq-item__toggle {
  height: min-content;
  display: flex;
  flex-flow: row;
  flex: none;
  place-content: center flex-end;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}
.faq-item__icon {
  aspect-ratio: 1;
  height: var(--framer-aspect-ratio-supported, 57px);
  width: 57px;
  z-index: 0;
  flex: none;
  display: flex;
  flex-flow: column;
  place-content: center;
  align-items: center;
  gap: 5px;
  padding: 0;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
  background-color: var(--c-white);
  color: var(--c-black);
}
.faq-item__icon svg {
  aspect-ratio: 1;
  width: 20px;
  height: 20px;
  flex: none;
}
/* Open state: verified against the live reference (2026-08-16) — clicking a
   question rotates the WHOLE "+" icon -135deg into an "x" (close) glyph; it
   is not a fade-the-vertical-bar-to-a-minus mechanic. Rotate the icon as one
   unit so both bars turn together. */
.faq-item__icon {
  transform-origin: 50% 50%;
  transition: transform .3s var(--ease-spring0);
}
.faq-item.is-open .faq-item__icon { transform: rotate(-135deg); }

.faq-item__question {
  max-width: 420px;
  height: min-content;
  display: flex;
  flex-flow: row;
  flex: none;
  place-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0 70px 26px 0;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}
.faq-item__question-text {
  z-index: 1;
  flex: 1 0 0;
  width: 1px;
  height: auto;
  position: relative;
  text-wrap: balance;
  user-select: none;
}

/* Closed by default and height:0 so the section keeps its reference height.
   main.js sets an explicit px height to animate, then clears it. */
.faq-item__answer {
  width: 100%;
  max-width: 420px;
  height: 0;
  overflow: hidden;
  padding: 0 70px 0 0;
  /* visibility (not [hidden]) keeps the box animatable while still removing
     collapsed content from the a11y tree and the tab order. */
  visibility: hidden;
  transition: height .35s var(--ease-spring0), visibility 0s linear .35s;
}
.faq-item.is-open .faq-item__answer {
  visibility: visible;
  transition: height .35s var(--ease-spring0), visibility 0s linear 0s;
}
.faq-item:not(.is-open) .faq-item__answer { height: 0 !important; }

/* ---------------- message + CTA ---------------- */
.help__message-part {
  height: min-content;
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: flex-start;
  align-items: flex-start;
  gap: 0;
  width: 1px;
  padding: 0;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}
.help__message-body {
  height: min-content;
  display: flex;
  flex-flow: column;
  flex: 1 0 0;
  place-content: flex-start center;
  align-items: flex-start;
  gap: 12px;
  width: 1px;
  padding: 0;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}

.quote {
  height: min-content;
  display: flex;
  flex-flow: column;
  place-content: flex-start center;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 0;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}
.quote__person {
  height: min-content;
  display: flex;
  flex-flow: column;
  flex: none;
  place-content: flex-start center;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding: 0;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}
.quote__ava-row {
  display: flex;
  flex-flow: row;
  flex: none;
  place-content: center flex-start;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: min-content;
  padding: 0;
  position: relative;
  overflow: visible;
}
.quote__ava {
  aspect-ratio: 1;
  height: var(--framer-aspect-ratio-supported, 32px);
  width: 32px;
  flex: none;
  display: flex;
  flex-flow: row;
  place-content: center;
  align-items: center;
  gap: 4px;
  padding: 0;
  position: relative;
  overflow: hidden;
}
.quote__ava-img {
  aspect-ratio: 1;
  height: var(--framer-aspect-ratio-supported, 34px);
  width: 34px;
  flex: none;
  position: relative;
}
.quote__ava-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.quote__name {
  display: flex;
  flex-flow: column;
  flex: none;
  place-content: flex-start center;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  max-width: 230px;
  height: min-content;
  padding: 0;
  position: relative;
  overflow: hidden;
}
.quote__text {
  max-width: 230px;
  height: min-content;
  display: flex;
  flex-flow: row;
  flex: none;
  place-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}
.quote__text p { text-wrap: balance; z-index: 1; flex: 1 0 0; width: 1px; height: auto; position: relative; }

.help__button-part {
  display: flex;
  flex-flow: row;
  flex: 2 0 0;
  place-content: flex-start center;
  align-items: flex-start;
  gap: 0;
  width: 1px;
  height: min-content;
  padding: 0;
  position: relative;
  overflow: visible;
}
.help__button {
  height: min-content;
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: flex-start space-between;
  align-items: flex-start;
  width: 1px;
  padding: 0;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}
.help__button-text {
  max-width: 180px;
  height: 100px;
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: flex-end center;
  align-items: flex-end;
  gap: 0;
  width: 1px;
  padding: 0 0 8px;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}
.help__button-copy {
  flex: 1 0 0;
  width: 1px;
  height: auto;
  position: relative;
  white-space: pre-wrap;
  word-break: break-word;
  word-wrap: break-word;
}
.help__button-slot {
  height: 100px;
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: flex-end center;
  align-items: flex-end;
  gap: 10px;
  width: 1px;
  padding: 0;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}

/* dark CTA button, shared with other sections */
.btn-dark {
  cursor: pointer;
  height: 57px;
  z-index: 1;
  flex: 1 0 0;
  width: 1px;
  display: flex;
  flex-flow: row;
  place-content: center;
  align-items: center;
  gap: 10px;
  padding: 0;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
  text-decoration: none;
  background-color: var(--c-graphite);
  border-right: 1px solid var(--c-stone-65);
  border-bottom: 1px solid var(--c-stone-65);
}
.btn-dark__edge {
  z-index: 1;
  flex: none;
  width: 1px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  background-color: var(--c-orange);
}
.btn-dark__all {
  display: flex;
  flex-flow: column;
  flex: 1 0 0;
  place-content: center;
  align-items: center;
  gap: 10px;
  width: 1px;
  height: 100%;
  padding: 0;
  position: relative;
  overflow: visible;
}
.btn-dark__text {
  height: min-content;
  display: flex;
  flex-flow: row;
  flex: none;
  place-content: center;
  align-items: center;
  gap: 10px;
  width: min-content;
  padding: 0;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}
.btn-dark__text .t-mono { color: var(--c-white); white-space: pre; user-select: none; }
.btn-dark__icon { width: 12px; height: 12px; position: absolute; top: 3px; left: -26px; }
.btn-dark__icon svg { width: 100%; height: 100%; }
/* ---- hover (mouse only) -------------------------------------------------
   Reference: .framer-fSAj6, variants «Dark» / «White». Measured live
   2026-08-18; the timing tokens and the full measurement note live in
   base.css § 5b.

   Three things move, all on the SAME spring:
     1. `__edge` — the 1px orange sliver parked at left:-1px, i.e. just
        outside this (overflow-clipped) button — sweeps across to cover
        the whole face. Done with scaleX from a transform-origin at the
        left edge, so the resting paint is untouched: scaleX(0) draws
        nothing, exactly like the clipped 1px sliver it replaces.
     2. `__text` — the icon+label row is CENTRED in `__all`, so growing
        it by (12px icon + 10px gap) = 22px on the left pushes the label
        11px right, which is the +11.0px the live sampler reports.
     3. `__icon` — parked at left:-26px, outside `__text`'s own clip box
        (that is why it is invisible at rest, on the dark variant too).
        It rides the growing box and translates 26px, landing flush with
        the box's left edge, 10px clear of the label. Verified against
        the live sample mid-sweep: predicted vs. measured icon/label x
        agree to 0.01px.

   The whole block is behind `(hover: hover) and (pointer: fine)` so a
   touch tap can never leave the button stuck in its hover state; on
   touch the edge stays the inert 1px sliver it is above.
   ------------------------------------------------------------------------ */
@media (hover: hover) and (pointer: fine) {
  .btn-dark__edge {
    width: calc(100% + 1px);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform var(--hov-cta-dur-out) var(--hov-cta-ease-out);
  }
  .btn-dark:hover .btn-dark__edge,
  .btn-dark:focus-visible .btn-dark__edge {
    transform: scaleX(1);
    transition-duration: var(--hov-cta-dur-in);
    transition-timing-function: var(--hov-cta-ease-in);
  }

  /* z-index is permanent, not hover-only: the label has to stay above the
     fill while it RETRACTS too, or the last 500ms of un-hover hides it. */
  .btn-dark__text {
    z-index: 1;
    transition: padding-left var(--hov-cta-dur-out) var(--hov-cta-ease-out);
  }
  .btn-dark:hover .btn-dark__text,
  .btn-dark:focus-visible .btn-dark__text {
    padding-left: 22px;
    transition-duration: var(--hov-cta-dur-in);
    transition-timing-function: var(--hov-cta-ease-in);
  }

  .btn-dark__icon {
    transition: transform var(--hov-cta-dur-out) var(--hov-cta-ease-out);
  }
  .btn-dark:hover .btn-dark__icon,
  .btn-dark:focus-visible .btn-dark__icon {
    transform: translateX(26px);
    transition-duration: var(--hov-cta-dur-in);
    transition-timing-function: var(--hov-cta-ease-in);
  }

  /* Three .btn-dark instances on the home page — both hero CTAs and
     "explore all solutions" — ship no `__icon` child, because the clone
     only ever needed to reproduce their RESTING state and the arrow is
     invisible there. Without one, step 2 above would open a 22px gap with
     nothing in it and just push the label off centre. Synthesise the
     arrow for exactly those from `--arrow-mask` (base.css); the `:not(:has())`
     keeps the buttons that carry a real <svg> from getting a second one.
     Flat white rather than `currentColor`: all three variants land on a
     white label over the orange fill, and the glyph only ever paints
     while hovered. */
  .btn-dark__text:not(:has(.btn-dark__icon))::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 12px;
    height: 12px;
    background: var(--c-white);
    -webkit-mask: var(--arrow-mask) center / contain no-repeat;
            mask: var(--arrow-mask) center / contain no-repeat;
    opacity: 0;
    transform: translate(-26px, -50%);
    transition: transform var(--hov-cta-dur-out) var(--hov-cta-ease-out),
                opacity   var(--hov-cta-dur-out) linear;
  }
  .btn-dark:hover .btn-dark__text:not(:has(.btn-dark__icon))::before,
  .btn-dark:focus-visible .btn-dark__text:not(:has(.btn-dark__icon))::before {
    opacity: 1;
    transform: translate(0, -50%);
    transition-duration: var(--hov-cta-dur-in);
    transition-timing-function: var(--hov-cta-ease-in), linear;
  }
}

/* ================================================================
   TABLET + LAPTOP (810 .. 1439.98) — height 905
   ================================================================ */
@media (min-width: 810px) and (max-width: 1439.98px) {
  /* FAQ item switches to the reference's `n6nea3` variant: taller floor,
     much narrower question column. This is what turns 403px of questions
     into 504px and the section from 804 -> 905. */
  .faq-item { min-height: 150px; }
  .faq-item__question { max-width: 210px; padding: 0 40px 26px 0; }
  .faq-item__answer { max-width: 210px; padding: 0 40px 0 0; }

  .help__inner,
  .help__gapline--stretch { align-content: flex-start; align-items: flex-start; }
  .help__button .vline--faint {
    --border-top-width: 3px;  --border-right-width: 3px;
    --border-bottom-width: 3px; --border-left-width: 3px;
    --border-style: dashed;
    --border-color: var(--c-peach);
  }
  .help__button-text { max-width: unset; }
}

/* ================================================================
   PHONE (<= 809.98px) — height 1006
   ================================================================ */
@media (max-width: 809.98px) {
  /* FAQ item switches to the reference's `1dz0cbk` variant and the accordion
     stacks into one column (`framer-v-1be0tbc`): each row becomes a column,
     every cell full width, every vertical rule stretches. Produces the
     reference's own 741.234px of questions. */
  .faq-item { min-height: 132px; }
  .faq-item__question { max-width: unset; padding: 0 70px 26px 0; }
  .faq-item__answer { max-width: unset; padding: 0 70px 0 0; }
  .faq__row { flex-direction: column; }
  .faq__cell,
  .faq__cell--auto,
  .faq__cell--end,
  .faq__cell--gaps { align-self: unset; flex: none; width: 100%; height: min-content; }
  .faq__cell > .vline { align-self: stretch; height: auto; }
  .faq__cell--gaps > .vline { height: 43px; }
  .faq__vline--phone { display: block; }

  .help__header {
    align-content: center;
    align-items: center;
    min-height: 140px;
    padding: 0 26px;
  }
  .help__qas,
  .help__message { padding: 0 26px; }
  .help__inner { max-width: unset; }
  .help__header-part { flex: 1 0 0; align-content: center; align-items: center; }
  .help__header-part > .vline--peach {
    --border-top-width: 2px;  --border-right-width: 2px;
    --border-bottom-width: 2px; --border-left-width: 2px;
    height: 140px;
  }
  .help__header-part > .vline--faint { height: 140px; }
  .help__header-body { min-height: 133px; padding: 0; }
  .help__title {
    min-height: unset;
    z-index: 3;
    width: 336px;
    position: absolute;
    top: 50%;
    left: -3px;
    transform: translateY(-50%);
  }
  .help__title-text { position: relative; top: auto; left: auto; transform: none; }
  .help__button-part { flex: 1 0 0; }
  .help__button-part > .vline--faint { align-self: stretch; height: auto; }
  .help__button .vline--faint {
    --border-top-width: 2px;  --border-right-width: 2px;
    --border-bottom-width: 2px; --border-left-width: 2px;
    --border-style: dashed;
    --border-color: var(--c-peach-95);
    align-self: stretch;
    height: auto;
  }
  .help__button-text {
    height: 125px;
    max-width: unset;
    align-content: flex-start;
    align-items: flex-start;
    padding: 10px 0 0;
  }
  .help__button-slot { height: min-content; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-item__answer,
  .faq-item__bar-v,
  .btn-dark__edge { transition: none !important; }
}

/* ---- word-reveal timing tiers (measured live 2026-08-19) ------------------
   The reference fades the FAQ question lines word-by-word at ~80ms/word, the
   CEO quote at ~130-160ms, and the "Got some other / questions?" copy at
   ~100ms. These classes only retune the custom properties consumed by
   css/text-reveal.css — all armed/revealed/reduced-motion mechanics are
   inherited from there unchanged. (Duplicated in css/pages/home.css /
   css/sections/footer.css so each partial's stylesheet is self-sufficient.) */
[data-split-text].w08 { --sr-stagger: .08s; --sr-dur: .1s; }
[data-split-text].w10 { --sr-stagger: .10s; --sr-dur: .1s; }
[data-split-text].w13 { --sr-stagger: .13s; --sr-dur: .1s; }
[data-split-text].w16 { --sr-stagger: .16s; --sr-dur: .1s; }

/* "Got some other / questions?" is one utterance split over two <p>s; the
   reference staggers straight through the line break ("questions?" lands
   ~0.4s after "Got"). The second <p> restarts --li at 0, so give its units
   the first line's 3-word head start. Lives on the revealed (.sr-in) state,
   matching the transition itself; the reduced-motion guard in
   text-reveal.css (transition: none !important) still wins. */
html.js-split .help__button-copy-l2[data-split-text].sr-in .sr-l {
  transition-delay: calc(var(--li, 0) * var(--sr-stagger) + .3s);
}

/* ================================================================
   PHONE FAQ rail parity (measured live 2026-08-23 @390):
   - EVERY faq row keeps the dashed peach rail at x=26 (y7410-8291 with no
     gaps); the stacked second cells were surfacing their desktop-interior
     FAINT rule at the left edge instead.
   - live's phone borders compute 2px (not 3px) -> 6px/4px dash pitch on
     both the rails and the row rules.
   ================================================================ */
@media (max-width: 809.98px) {
  .faq__cell--auto > .vline--faint:first-child,
  .faq__cell--gaps > .vline--faint:first-child {
    --border-top-width: 2px; --border-right-width: 2px;
    --border-bottom-width: 2px; --border-left-width: 2px;
    --border-style: dashed;
    --border-color: var(--c-peach-95);
  }
  .help .vline--peach,
  .faq .vline--peach {
    --border-top-width: 2px; --border-right-width: 2px;
    --border-bottom-width: 2px; --border-left-width: 2px;
  }
  .faq__hr::after { border-width: 2px; }
}