/* =========================================================================
   Homepage redesign (index2.html). Loaded after gable.css, only on index2.
   Builds on the .gbl tokens and the app-replica / scene-engine styles in gable.css.
   Inside .gbl-home2 the accent (--g*) is remapped to PayHOA blue; the Gable
   section in the middle of the page keeps its own indigo.
   ========================================================================= */

.gbl-home2 {
  /* PayHOA primary scale (ui-kit globals.css): dark #2246AB, darker #2256D3, base #2A6BE6, light #DCEBFD, lighter #EFF7FF */
  --pb: #2a6be6;
  --pb-600: #2256d3;
  --pb-700: #2256d3;
  --pb-800: #2246ab;
  --pb-900: #1b3785;
  --pb-50: #eff7ff;
  --pb-100: #dcebfd;
  --pb-200: #bcd4fa;

  --g: #2256d3;
  --g-700: #2246ab;
  --g-800: #2246ab;
  --g-900: #1b3785;
  --g-300: #8fb1f3;
  --g-200: #bcd4fa;
  --g-100: #dcebfd;
  --g-50: #eff7ff;

  --muted: #5a6b8a;
}
/* Beaver Builder row/column that holds [home2_page]. Staging's 8727-layout.css is stale (no rules for this row), so
   the floated column shrank to its content and hugged the left edge above ~1625px, and the row kept BB's global
   spacing (20px row padding + 20px module margin). The node settings zero that spacing, so the pin here keeps the
   layout the same through a cache regen: full-width column and no spacing at all (2026-10-07; was a 40px gutter,
   Dima 09-27), so the homepage sits on the same 1545px / 40px grid as every [gable_static] page, the header's logo
   doesn't shift between pages, and the gap above the hero comes from gable.css like everywhere else. Specificity beats BB's node rules (.fl-node-x.fl-row > .fl-row-content-wrap). */
body.home2 .fl-builder-content-primary .fl-col { width: 100%; }
body.home2 .fl-builder-content-primary > .fl-row > .fl-row-content-wrap { padding: 0; }
body.home2 .fl-builder-content-primary .fl-module-html > .fl-module-content { margin: 0; }
.gbl-home2 .gbl-sec { padding: 104px 0; }
.gbl-home2 .gbl-sec-tight { padding: 8px 0 40px; }
@media (max-width: 768px) {
  .gbl-home2 .gbl-sec { padding: 64px 0; }
  .gbl-home2 .gbl-sec-tight { padding: 0 0 24px; }
}

.hx-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--pb-50); border: 1px solid var(--pb-100); color: var(--pb-700); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; line-height: 1.2; }
.hx-eyebrow.is-light { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); color: #d6e4ff; }
.hx-h3 { font-size: 32px; line-height: 1.25; }
.hx-center { text-align: center; margin-top: 40px; display: flex; justify-content: center; }
.gbl-home2 a.hx-more, .gbl-home2 .hx-more { font-style: normal; display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--pb-700); }
.gbl-home2 a.hx-more:hover, .gbl-home2 a:hover .hx-more { color: var(--pb-900); }
.hx-more .gbl-ico-sm { transition: transform .2s var(--ease); }
a.hx-more:hover .gbl-ico-sm, a:hover .hx-more .gbl-ico-sm { transform: translateX(3px); }
.gbl a.hx-btn-white, .gbl a.hx-btn-white:visited, .gbl .hx-story-cta .hx-btn-white { background: #fff; color: var(--pb-800); box-shadow: 0 10px 24px -10px rgba(16, 30, 90, .5); }
.gbl a.hx-btn-white:hover { background: var(--pb-50); color: var(--pb-900); transform: translateY(-1px); }
.gbl a.hx-btn-blue, .gbl a.hx-btn-blue:visited { background: var(--pb-600); color: #fff; box-shadow: 0 10px 24px -12px rgba(34, 86, 211, .6); }
.gbl a.hx-btn-blue:hover { background: var(--pb-800); color: #fff; transform: translateY(-1px); }
.hx-btn-meta { font-weight: 400; font-size: 14px; opacity: .8; padding-left: 10px; margin-left: 2px; border-left: 1px solid rgba(255, 255, 255, .3); }

.hx-stars { display: inline-flex; gap: 2px; }
.hx-stars i { width: 16px; height: 16px; background: #f5b400; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }

/* =========================================================================
   Hero
   ========================================================================= */
.hx-hero { padding-bottom: 8px; }
.hx-hero-card {
  position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-xl); color: #fff;
  background: linear-gradient(150deg, #1c3a94 0%, #2256d3 48%, #2a6be6 100%);
  padding: 0 0 0 72px;
}
.hx-hero-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 50% at 8% 0%, rgba(255, 255, 255, .14), transparent 70%),
    radial-gradient(40% 55% at 78% 18%, rgba(150, 185, 255, .32), transparent 70%),
    radial-gradient(60% 50% at 60% 110%, rgba(16, 32, 100, .5), transparent 70%);
}
.hx-hero-glow::after { content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1px); background-size: 22px 22px;
  mask-image: radial-gradient(60% 70% at 30% 40%, #000, transparent 80%); -webkit-mask-image: radial-gradient(60% 70% at 30% 40%, #000, transparent 80%);
}
.hx-hero-grid { display: grid; grid-template-columns: minmax(0, 620px) minmax(0, 1fr); gap: 44px; align-items: end; min-height: 720px; }
.hx-hero-copy { padding: 88px 0 88px; align-self: center; display: flex; flex-direction: column; align-items: flex-start; }
.gbl a.hx-hero-pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .24); color: #fff; font-size: 14px; font-weight: 600; line-height: 1.2; transition: background .2s, border-color .2s; }
.gbl a.hx-hero-pill:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.hx-hero-pill-new { background: #fff; color: var(--g, #4645b6); color: #4645b6; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; }
.hx-hero-pill .hx-arr { transition: transform .2s var(--ease); }
.hx-hero-pill:hover .hx-arr { transform: translateX(3px); }
.gbl .hx-h1 { color: #fff; font-size: clamp(40px, 3.7vw, 54px); line-height: 1.08; margin-top: 26px; }
.hx-h1 span { display: block; color: #cfdfff; }
.hx-hero-sub { font-size: 20px; line-height: 1.55; color: #fff; margin-top: 22px; max-width: 540px; }
.hx-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hx-hero-note { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 18px; font-size: 14px; color: #fff; }
.hx-hero-note li { display: inline-flex; align-items: center; gap: 7px; }
.hx-hero-note svg { width: 16px; height: 16px; color: #8fe3c2; }
.hx-hero-proof { margin-top: 40px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .16); display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 520px; }
.hx-hero-stars { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; color: #fff; }
.hx-hero-stars strong { color: #fff; font-size: 16px; }
/* Homepage hero (marketing review, 2026-10-09), on its own classes: .hx-hero-note and the rest of the hero are shared with
   the Solutions, feature, about, contact and landing heroes. The four checks stay two by two at every width (wider
   screens used to put three on a row, up against the product scene). Under them, the review proof as a quiet row on the
   blue (Dima, 2026-10-09: the white card was a second white block beside the white trial button): white G2 + Capterra
   logos, small gold stars, the line at the checks' size. One row where the copy column is wide enough; in the 500px column
   (1101 to 1280) and on phones the line drops under the logos and stars. */
.hx-hero-note.hx-note-grid { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 10px 24px; }
.hx-note-grid li { align-items: flex-start; text-align: left; }
.hx-note-grid svg { flex: none; margin-top: 2px; }
.hx-note-grid a { margin-block: -5px; } /* keeps its 5px hit-area padding (below) out of the row, so the four lines align */
/* the review proof row (tools/partials.mjs @proof): homepage hero, /pricing/ hero (as a link), /contact/ hero (is-light) */
.hx-rate { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; width: fit-content; max-width: 100%; margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .15); }
.gbl a.hx-rate, .gbl a.hx-rate:hover { color: inherit; }
.hx-rate-marks { flex: none; display: inline-flex; align-items: center; gap: 12px; opacity: .8; }
.hx-rate-marks img { display: block; width: auto; height: 20px; }
/* uploads has no white G2 mark on its own, only the old "G2 | Crowd" lockup (g2-white.svg): show its left 21px, the mark */
.hx-rate-marks .hx-rate-crop { width: 21px; object-fit: cover; object-position: 0 50%; }
.hx-rate .hx-stars { flex: none; }
.hx-rate .hx-stars i { width: 14px; height: 14px; }
.hx-rate-text { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .8); text-wrap: balance; }
.hx-rate-text strong { font-weight: 600; color: #fff; }
/* light heroes: the colour logo files; capterra.svg is a PNG on a white box, multiplied into the background */
.hx-rate.is-light { border-top-color: rgba(28, 39, 55, .12); }
.hx-rate.is-light .hx-rate-marks { opacity: 1; }
.hx-rate-marks .hx-rate-box { mix-blend-mode: multiply; }
.hx-rate.is-light .hx-rate-text { color: var(--body); }
.hx-rate.is-light .hx-rate-text strong { color: var(--ink); }

.hx-hero-stage { position: relative; align-self: end; min-width: 0; }
.hx-hero-scene { position: relative; width: calc(100% + 90px); }
.gbl .hx-pa-hero { height: 596px; border-radius: 20px 0 0 0; box-shadow: 0 -2px 0 8px rgba(255, 255, 255, .12), 0 40px 80px -20px rgba(12, 24, 80, .6); }
.hx-pa-hero .gbl-pa-side { width: 170px; }
.hx-hero-scene .gbl-toast.hx-toast-req { right: 110px; bottom: 22px; }
.hx-hero-scene .gbl-float { z-index: 9; }
.hx-float-gable { left: -64px; top: 196px; max-width: 290px; align-items: flex-start; }
.hx-float-gable .gbl-float-ico { background: #eef0ff; color: #4645b6; }
.hx-float-chips { display: flex; margin-top: 8px; }
.hx-float-chips em { font-style: normal; font-size: 12.5px; font-weight: 600; color: #4645b6; border: 1px dashed #c8cdf2; border-radius: 999px; padding: 4px 10px; }
.hx-float-auto { left: 90px; bottom: 34px; }

/* dashboard pieces */
.hx-stats { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.hx-stat { padding: 12px 14px; position: relative; min-height: 84px; display: flex; flex-direction: column; justify-content: space-between; }
.hx-stat small { font-size: 12px; font-weight: 600; color: var(--pa-text); line-height: 1.3; padding-right: 26px; }
.hx-stat b { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--pa-ink); display: inline-block; transition: color .3s; }
.hx-stat b.hx-bump { animation: hx-bump .6s var(--ease); color: var(--pa-blue); }
.hx-stat em { font-style: normal; font-size: 11.5px; color: #0a7f60; font-weight: 600; } /* 4.98:1 on white (SEO S11, P-09) */
.hx-stat > svg { position: absolute; right: 12px; bottom: 12px; width: 24px; height: 24px; color: #cfd4dc; }
@keyframes hx-bump { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }
.hx-dash-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 10px; }
.hx-bars { height: 190px; }
/* The bars grow once, as the page first shows them. Tied to .is-playing they sat drawn during the headline's hold,
   collapsed when the scene started and grew again on every run of the loop. */
.gbl-js .hx-bars i { animation: hx-grow .8s var(--ease) calc(.1s + var(--i, 0) * 45ms) both; transform-origin: 50% 100%; }
@keyframes hx-grow { from { transform: scaleY(0); } to { transform: none; } }
.hx-seg { display: inline-flex; padding: 2px; border-radius: 8px; background: #f0f2f5; font-size: 11.5px; font-weight: 600; color: var(--pa-mute); }
.hx-seg span { padding: 3px 9px; border-radius: 6px; }
.hx-seg span.is-on { background: #fff; color: var(--pa-ink); box-shadow: 0 1px 2px rgba(20, 30, 50, .1); }
.hx-pay { padding: 14px 14px 6px; overflow: hidden; }
.hx-pay .gbl-pa-h { margin: 0 0 8px; }
.hx-pay .gbl-pa-h strong { font-size: 15px; }
.hx-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: #0a7f60; } /* text 4.98:1 on white (SEO S11, P-09); the dot keeps --green */
.hx-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(15, 155, 118, .5); animation: hx-pulse 1.8s infinite; }
@keyframes hx-pulse { 0% { box-shadow: 0 0 0 0 rgba(15, 155, 118, .45); } 70% { box-shadow: 0 0 0 7px rgba(15, 155, 118, 0); } 100% { box-shadow: 0 0 0 0 rgba(15, 155, 118, 0); } }
.hx-pay-list { display: flex; flex-direction: column; }
.hx-pay-list li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 4px; border-bottom: 1px dashed var(--pa-line); border-radius: 8px; }
.hx-pay-list li:last-child { border-bottom: 0; }
.gbl-js [data-gbl-scene] .hx-pay-list li[data-t].is-on { animation: gbl-pop .45s var(--ease) both, hx-flash 1.6s ease-out; }
@keyframes hx-flash { 0% { background: rgba(15, 155, 118, .14); } 100% { background: transparent; } }
.hx-pay-who { min-width: 0; }
.hx-pay-who b { display: block; font-size: 12.5px; color: var(--pa-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-pay-who small { display: block; font-size: 11.5px; color: #636d7e; white-space: nowrap; } /* 5.22:1 on white, the features pages' --pa-mute (SEO S11, P-09) */
.hx-amt { font-weight: 600; font-size: 12.5px; color: var(--green); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hx-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; font-weight: 600; background: #eef0f4; color: #5b6576; flex: none; }
.hx-av.is-a { background: #ffe7d6; color: #b55a1c; }
.hx-av.is-b { background: #dff3ea; color: #0c7a5c; }
.hx-av.is-c { background: #e8e6ff; color: #4a44b8; }
.hx-av.is-d { background: #dcebfd; color: #2256d3; }
.hx-av svg { width: 16px; height: 16px; }

@media (max-width: 1280px) {
  .hx-hero-card { padding-left: 56px; }
  .hx-hero-grid { grid-template-columns: minmax(0, 500px) minmax(0, 1fr); gap: 40px; }
  .hx-pa-hero .gbl-pa-side { display: none; }
  .hx-float-gable { left: -40px; }
}
@media (max-width: 1100px) {
  .hx-hero-card { padding: 0 32px; }
  .hx-hero-grid { grid-template-columns: 1fr; gap: 0; min-height: 0; }
  .hx-hero-copy { padding: 72px 0 56px; align-items: center; text-align: center; margin: 0 auto; max-width: 720px; }
  .hx-hero-sub { margin-left: auto; margin-right: auto; max-width: 640px; }
  .hx-hero-cta, .hx-hero-note { justify-content: center; }
  .hx-hero-proof { align-items: center; margin-left: auto; margin-right: auto; }
  .hx-hero-stars { justify-content: center; }
  .hx-hero-note.hx-note-grid { justify-content: center; }
  .hx-hero-copy .hx-rate { justify-content: center; margin-inline: auto; text-align: center; }
  .hx-hero-scene { width: 100%; max-width: 920px; margin: 0 auto; }
  .gbl .hx-pa-hero { border-radius: 20px 20px 0 0; height: 540px; }
  .hx-pa-hero .gbl-pa-side { display: flex; }
  .hx-hero-scene .gbl-toast.hx-toast-req { right: 16px; }
  .hx-float-gable { left: -12px; top: -30px; }
  .hx-float-auto { left: auto; right: -12px; bottom: 60px; }
}
@media (max-width: 860px) {
  .hx-pa-hero .gbl-pa-side { display: none; }
}
@media (max-width: 768px) {
  .hx-hero-card { padding: 0 16px; border-radius: 28px; }
  .hx-hero-copy { padding: 44px 4px 40px; }
  .gbl .hx-h1 { font-size: 40px; margin-top: 22px; }
  .hx-hero-sub { font-size: 18px; }
  .hx-hero-cta { flex-direction: column; width: 100%; }
  .hx-hero-cta .gbl-btn { width: 100%; }
  .hx-hero-note { font-size: 14px; gap: 6px 14px; }
  .hx-hero-note.hx-note-grid { gap: 8px 16px; }
  .hx-rate { margin-top: 24px; padding-top: 18px; }
  .hx-hero-proof { margin-top: 28px; padding-top: 20px; }
  .hx-hero-stars { font-size: 14px; }
  .gbl .hx-pa-hero { height: 430px; border-radius: 16px 16px 0 0; }
  .hx-stats { grid-template-columns: 1.3fr 1fr; }
  .hx-stats > :nth-child(3) { display: none; }
  .hx-dash-grid { grid-template-columns: 1fr; }
  .hx-dash-grid .gbl-dash-chart { display: none; }
  .hx-hero-scene .gbl-toast.hx-toast-req { left: 12px; right: 12px; bottom: 12px; }
}

/* =========================================================================
   Press strip (static: nothing on this page moves on its own without a pause control)
   ========================================================================= */
.hx-proof { padding: 40px 0 0; }
.hx-proof-row { display: flex; align-items: center; justify-content: center; gap: 48px; }
.hx-proof-lead { flex: none; font-size: 14px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.hx-logos-list { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 20px 56px; }
.hx-logos-list img { height: 28px; width: auto; max-width: none; filter: brightness(.55) contrast(1.2); opacity: .75; transition: opacity .2s, transform .3s var(--ease); }
.hx-logos-list img:hover { opacity: 1; transform: translateY(-2px); }
.gbl-js .hx-proof.gbl-reveal-kids li { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--k, 0) * 70ms); }
.gbl-js .hx-proof.gbl-reveal-kids.is-in li { opacity: 1; transform: none; }
@media (max-width: 992px) {
  .hx-proof-row { flex-direction: column; gap: 16px; }
}
@media (max-width: 768px) {
  .hx-proof { padding-top: 32px; }
  .hx-proof-lead { font-size: 14px; }
  .hx-logos-list { gap: 18px 32px; }
  .hx-logos-list img { height: 22px; }
}

/* =========================================================================
   Platform tour
   ========================================================================= */
.hx-tour { padding-top: 88px; }
.hx-tour-box { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: 14px; box-shadow: var(--shadow-card); }
.hx-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.gbl .hx-tab { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 22px; border: 1px solid transparent; transition: background .25s, border-color .25s; }
.gbl .hx-tab:hover { background: var(--bg); }
.gbl .hx-tab.is-active { background: var(--pb-50); border-color: var(--pb-100); }
.hx-tab-ico { width: 44px; height: 44px; border-radius: 14px; background: var(--bg); display: grid; place-items: center; color: var(--muted); flex: none; transition: background .25s, color .25s, box-shadow .25s; }
.hx-tab-ico svg { width: 22px; height: 22px; }
.hx-tab.is-active .hx-tab-ico { background: var(--pb-600); color: #fff; box-shadow: 0 8px 18px -8px rgba(34, 86, 211, .6); }
.hx-tab-txt { display: flex; flex-direction: column; min-width: 0; }
.hx-tab-txt b { font-size: 16px; color: var(--ink); line-height: 1.3; }
.hx-tab-txt small { font-size: 14px; color: var(--muted); line-height: 1.35; }
.hx-tab-bar { position: absolute; left: 18px; right: 18px; bottom: 7px; height: 3px; border-radius: 3px; background: transparent; overflow: hidden; }
.hx-tab.is-active .hx-tab-bar { background: var(--pb-100); }
.hx-tab-bar i { display: block; height: 100%; width: 0; background: var(--pb-600); border-radius: 3px; }
.hx-tab.is-active.is-timing .hx-tab-bar i { animation: gbl-progress var(--gbl-dur, 8s) linear forwards; }
.hx-tour-box.is-paused .hx-tab-bar i { animation-play-state: paused !important; }
/* Homepage tour tab subtitles (marketing review W2): "Bank sync, reconciliation, reports" needs 202px. Four equal columns
   leave it 181–200px at 1281–1366, so it wrapped and the tabs grew 15px; there the columns follow their content. At
   1201–1280 no column fits it, so the subtitles go, as they already do at 1101–1200. Solutions tours keep theirs. */
@media (min-width: 1281px) and (max-width: 1400px) { #hx-platform .hx-tabs { grid-template-columns: repeat(4, minmax(0, auto)); } }
@media (min-width: 1201px) and (max-width: 1280px) { #hx-platform .hx-tab-txt small { display: none; } }
@keyframes gbl-progress { from { width: 0; } to { width: 100%; } }

.hx-panel { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 16px; margin-top: 14px; }
.hx-panel[hidden] { display: none; }
.hx-panel-copy { padding: 44px 28px 36px 34px; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.hx-panel-copy > p { font-size: 18px; }
.hx-panel.is-active .hx-panel-copy > * { animation: gbl-pop .6s var(--ease) both; }
.hx-panel.is-active .hx-panel-copy > :nth-child(2) { animation-delay: .06s; }
.hx-panel.is-active .hx-panel-copy > :nth-child(3) { animation-delay: .12s; }
.hx-panel.is-active .hx-panel-copy > :nth-child(4) { animation-delay: .18s; }
.hx-panel-stage { position: relative; border-radius: 28px; padding: 34px 34px 0; overflow: hidden; display: flex; align-items: flex-end;
  background: radial-gradient(70% 90% at 90% 0%, rgba(150, 185, 250, .45), transparent 70%), linear-gradient(160deg, #eff7ff, #dcebfd); }
.hx-panel-stage::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(42, 107, 230, .14) 1px, transparent 1px); background-size: 20px 20px; mask-image: linear-gradient(180deg, #000, transparent 70%); -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); }
.hx-panel-stage > [data-gbl-scene] { width: 100%; }
.gbl .hx-pa-tour { height: 486px; border-radius: 16px 16px 0 0; box-shadow: 0 1px 2px rgba(28, 39, 55, .06), 0 30px 60px -24px rgba(24, 50, 140, .4); }
.hx-tour-more { text-align: center; max-width: 900px; margin: 32px auto 0; font-size: 16px; color: var(--muted); line-height: 1.8; }
.hx-tour-more a:not(.hx-more) { color: var(--pb-700); }
.hx-tour-more a:not(.hx-more):hover { color: var(--pb-800); }
.hx-tour-more .hx-more { margin-left: 6px; }

/* ---------- "Also included": eight more features as a plain index under the tour (icon, title, tagline) ----------
   One quiet card style; the only motion is the hover state. ≥1101: 4 across, icon on top. ≤1100: rows (icon left, arrow
   right), 2 across, then 1 across on phones, so every card stays in view (no swipe row). */
.hx-fw { margin-top: 48px; }
.hx-fw-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; margin: 0 4px 16px; }
.gbl .hx-fw-title { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; color: var(--ink); }
.hx-fw-head .hx-more { white-space: nowrap; }
.hx-fw-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.hx-fw-grid > li { margin: 0; padding: 0; min-width: 0; }
.gbl a.hx-fwc { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; height: 100%; padding: 20px 20px 22px; border-radius: 16px;
  background: #fff; border: 1px solid var(--line); color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.gbl a.hx-fwc:hover { border-color: var(--pb-200); box-shadow: 0 14px 30px -24px rgba(24, 50, 140, .5); }
.gbl a.hx-fwc:focus-visible { outline: 2px solid var(--pb-700); outline-offset: 3px; }
.hx-fwc-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--pb-50); color: var(--pb-700); display: grid; place-items: center; transition: background .2s, color .2s; }
.hx-fwc-ico .hx-ph { width: 22px; height: 22px; }
.gbl a.hx-fwc:hover .hx-fwc-ico { background: var(--pb-700); color: #fff; }
.hx-fwc-txt { min-width: 0; }
.hx-fwc-txt b { display: block; font-size: 16px; line-height: 22px; font-weight: 600; color: var(--ink); }
.hx-fwc-txt small { display: block; margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--muted); }
/* the arrow shows on hover / keyboard focus only (touch rows keep it, below). Phosphor's arrow-right sits 2.25px in from
   the right of its 18px box and 3.4px from the top, so top 19 / right 20 puts the drawn arrow the same ~22px from both edges */
.hx-fwc-go { position: absolute; top: 19px; right: 20px; display: flex; color: var(--pb-700); opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s var(--ease); }
.hx-fwc-go .hx-ph { width: 18px; height: 18px; }
.gbl a.hx-fwc:hover .hx-fwc-go, .gbl a.hx-fwc:focus-visible .hx-fwc-go { opacity: 1; transform: none; }
.gbl .hx-ph { fill: currentColor; flex: none; }

@media (max-width: 1100px) {
  .hx-fw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .gbl a.hx-fwc { flex-direction: row; align-items: center; gap: 14px; padding: 16px 48px 16px 16px; }
  .hx-fwc-go { top: calc(50% - 9px); right: 18px; }
}
/* touch screens have no hover: the rows keep a quiet arrow as the tap cue */
@media (max-width: 1100px) and (hover: none) {
  .hx-fwc-go { opacity: 1; transform: none; color: #8b97aa; }
}
@media (max-width: 768px) {
  .hx-fw { margin-top: 32px; }
  .hx-fw-head { margin: 0 2px 12px; }
  .gbl .hx-fw-title { font-size: 18px; line-height: 24px; }
  .hx-fw-head .hx-more { font-size: 15px; }
  /* one grouped list, rows split by hairlines */
  .hx-fw-grid { grid-template-columns: minmax(0, 1fr); gap: 0; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
  .hx-fw-grid > li + li { border-top: 1px solid var(--line-2); }
  .gbl a.hx-fwc, .gbl a.hx-fwc:hover { padding: 14px 44px 14px 14px; border: 0; border-radius: 0; box-shadow: none; }
  .gbl a.hx-fwc:active { background: var(--pb-50); }
  .gbl a.hx-fwc:focus-visible { outline-offset: -2px; }
  .hx-fwc-txt small { margin-top: 2px; }
  .hx-fwc-go { right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .gbl a.hx-fwc, .hx-fwc-ico, .hx-fwc-go { transition: none; }
}

/* shared form bits in the mocks */
.hx-field { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 34px; padding: 7px 10px; border: 1px solid var(--pa-line); border-radius: 8px; background: #fff; font-size: 12.5px; color: var(--pa-ink); line-height: 1.4; }
.hx-field.is-tag em { font-style: normal; font-weight: 600; font-size: 12px; color: #fff; background: var(--pb); padding: 2px 10px; border-radius: 999px; }
.hx-field.is-tag svg { width: 14px; height: 14px; color: var(--pa-mute); }
.hx-field.is-area { align-items: flex-start; min-height: 74px; }
.gbl .gbl-pa label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-weight: 400; }
.gbl-pa label small { font-size: 11.5px; font-weight: 600; color: var(--pa-text); }
.gbl-pa-btn.is-green { background: #0f9b76; border-color: #0f9b76; color: #fff; }
.hx-meter { display: block; height: 6px; border-radius: 6px; background: #e8edf3; overflow: hidden; }
.hx-meter i { display: block; height: 100%; width: 0; border-radius: 6px; background: var(--pa-blue); transition: width 1.1s var(--ease); }
.hx-meter.is-green i { background: var(--green); }
.hx-meter i.is-full { width: 100%; }

/* 01 · invoices */
.hx-form-opt { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--pa-text); }
.hx-sending { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 14px 16px; margin-bottom: 10px; }
.hx-sending .hx-meter { grid-column: 1 / -1; margin-top: 8px; }
.hx-sending-ico { width: 36px; height: 36px; border-radius: 10px; background: var(--pa-blue-50); color: var(--pa-blue); display: grid; place-items: center; }
.hx-sending-ico.is-green { background: var(--green-50); color: var(--green); }
.hx-sending-ico svg { width: 18px; height: 18px; }
.hx-sending-txt strong { display: block; font-size: 13.5px; color: var(--pa-ink); }
.hx-sending-txt small { display: block; font-size: 11.5px; color: var(--pa-mute); }
/* Tour 01 · Invoices & payments (CEO notes 2026-09-30, H1): Add New Charge modal over Create New Invoice(s), then the
   Invoices list. Real labels, see the comment in src/home2.html. Small text uses #636d7e (AA on white, S11-08).
   Motion (2026-10-01): transitions are declared on the state classes (.is-open, .is-shut, .is-rec, …), never on the base
   rule, so the engine's reset snaps back instead of playing the scene backwards. */
.hx-iv { --iv-mute: #636d7e; --iv-bg: #f2f7ff; --iv-gap: 0px; --iv-ease: cubic-bezier(.4, 0, .2, 1); container: hxiv / inline-size; }
.hx-iv .gbl-pa-page { display: flex; flex-direction: column; }
.hx-iv-pg { position: relative; flex: none; }
.hx-iv-new, .hx-iv-list { display: flex; flex-direction: column; gap: 8px; }
/* Submit Invoices → the Invoices list: the two pages swap places in the flow at the same moment (the one leaving goes
   absolute where it stood), so they cross-fade in place and nothing reflows */
.hx-iv-list { position: absolute; top: 0; left: 0; right: 0; opacity: 0; visibility: hidden; transform: translateY(12px); }
.hx-iv-list.is-open { position: relative; opacity: 1; visibility: visible; transform: none; transition: opacity .35s .12s, transform .5s .12s var(--ease), visibility .35s .12s; }
.hx-iv-new.is-shut { position: absolute; top: 0; left: 0; right: 0; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s, transform .3s var(--ease), visibility .2s; }
.hx-iv .gbl-pa-h { margin: 4px 0 4px; }
.hx-iv .gbl-pa-h strong { font-size: 16px; }
.hx-iv-sec { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; }
.hx-iv-sec > small { font-size: 12px; font-weight: 600; color: var(--pa-ink); }
.hx-iv-sec.is-col { flex-direction: column; align-items: stretch; gap: 6px; --iv-gap: 6px; }
.hx-iv-sec .hx-ph, .hx-iv-dfoot .hx-ph { width: 14px; height: 14px; }
.hx-iv-empty { margin: 0; padding: 8px 24px 4px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.hx-iv-empty .gbl-pa-btn { font-style: normal; margin-top: 6px; }
.hx-iv-empty b { font-size: 13px; color: var(--pa-ink); }
.hx-iv-empty span { font-size: 11px; color: var(--iv-mute); line-height: 1.4; }
.hx-iv-crow { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.7fr) 58px 40px; gap: 10px; align-items: center; padding: 7px 2px; border-top: 1px solid var(--pa-line); font-size: 11.5px; color: var(--pa-text); }
.hx-iv-crow.is-head { font-size: 10.5px; font-weight: 600; color: var(--iv-mute); padding: 4px 2px 0; border-top: 0; }
.hx-iv-crow b { display: block; font-size: 12px; color: var(--pa-ink); }
.hx-iv-crow small { display: block; font-size: 10.5px; color: var(--iv-mute); }
.hx-iv-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 8px; border-top: 1px solid var(--pa-line); }
.hx-iv-total { margin-right: auto; font-size: 12px; color: var(--pa-text); }
.hx-iv-total b { color: var(--pa-ink); font-variant-numeric: tabular-nums; }

/* reveals: .hx-iv-x opens (.is-open), .hx-iv-xo is open and folds away (.is-shut). The height eases through the grid row
   (0fr ↔ 1fr, works in every current browser, unlike interpolate-size) on an ease-in-out, because the form around it
   moves with it; the margin takes back the container's gap, so a folded reveal costs no space at all. .is-free lets a
   menu hang out once the reveal is open. */
.hx-iv-x, .hx-iv-xo { display: grid; flex: none; overflow: hidden; }
.hx-iv-x > *, .hx-iv-xo > * { min-height: 0; }
.hx-iv-x { grid-template-rows: 0fr; margin-top: calc(-1 * var(--iv-gap)); opacity: 0; }
.hx-iv-x.is-open { grid-template-rows: 1fr; margin-top: 0; opacity: 1; transition: grid-template-rows .5s var(--iv-ease), margin-top .5s var(--iv-ease), opacity .3s .1s; }
.hx-iv-x.is-free { overflow: visible; }
.hx-iv-xo { grid-template-rows: 1fr; }
.hx-iv-xo.is-shut { grid-template-rows: 0fr; margin-top: calc(-1 * var(--iv-gap)); opacity: 0; transition: grid-template-rows .5s var(--iv-ease), margin-top .5s var(--iv-ease), opacity .2s; }

/* the modal: fades and settles in, fades and drops a touch on the way out */
.hx-iv-scrim { position: absolute; inset: 0; z-index: 5; background: rgba(20, 30, 50, .32); opacity: 0; visibility: hidden; }
.hx-iv-scrim.is-open { opacity: 1; visibility: visible; transition: opacity .25s, visibility .25s; }
.hx-iv-scrim.is-open.is-shut { opacity: 0; visibility: hidden; transition: opacity .32s .04s, visibility .36s; }
.hx-iv-dlg { position: absolute; z-index: 6; top: 44px; bottom: 10px; left: 0; right: 0; margin: 0 auto; width: calc(100% - 44px); max-width: 580px; display: flex; flex-direction: column; background: #fff; border-radius: 12px; box-shadow: 0 24px 50px -20px rgba(20, 30, 50, .45); overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.97); }
.hx-iv-dlg.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .42s var(--ease), visibility .2s; }
.hx-iv-dlg.is-open.is-shut { opacity: 0; visibility: hidden; transform: translateY(6px) scale(.98); transition: opacity .2s, transform .26s cubic-bezier(.4, 0, 1, 1), visibility .2s; }
.hx-iv-dlg-h { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--pa-line); }
.hx-iv-dlg-h strong { font-size: 14px; color: var(--pa-ink); }
.hx-iv-dlg-h svg { width: 14px; height: 14px; color: var(--iv-mute); }
/* The body is scrolled by home2.js as the form grows: the buttons stay in view (a panel opening above them pushes the form
   up in step with its own height, so they hold still under the cursor), but never at the cost of pushing the part being
   worked on out of the top. The top 9px fade the form out under the header. */
.hx-iv-dlg-b { flex: 1; min-height: 0; overflow: hidden; padding: 10px 14px 12px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 9px); mask-image: linear-gradient(180deg, transparent, #000 9px); }
.hx-iv-dlg-in { display: flex; flex-direction: column; gap: 8px; --iv-gap: 8px; }
.hx-iv-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 10px; flex: none; }
.hx-iv-grid.is-blue, .hx-iv-late, .hx-iv-dates { background: var(--iv-bg); padding: 8px 10px; border-radius: 8px; }
.hx-iv-late, .hx-iv-dates { display: flex; flex-direction: column; gap: 8px; flex: none; --iv-gap: 8px; }
.hx-iv-late .hx-iv-grid { padding: 0; }
.hx-iv-fld { display: flex; flex-direction: column; gap: 3px; min-width: 0; margin: 0; }
.hx-iv-fld.is-full { grid-column: 1 / -1; }
.hx-iv-fld > small { font-size: 10.5px; font-weight: 600; color: var(--pa-text); line-height: 1.2; }
.hx-iv-fld > span { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 28px; padding: 4px 8px; border: 1px solid var(--pa-line); border-radius: 6px; background: #fff; font-size: 12px; color: var(--pa-ink); white-space: nowrap; overflow: hidden; }
.hx-iv-fld > span .hx-ph { width: 12px; height: 12px; flex: none; color: var(--iv-mute); }
.hx-iv-fld > span.is-ph { color: var(--iv-mute); }
.hx-iv-fld > span em { font-style: normal; color: var(--iv-mute); display: inline-flex; align-items: center; gap: 4px; }
.hx-iv-fld > span em.hx-iv-v { color: var(--pa-ink); }
.hx-iv-fld > span b { font-weight: 400; }
.hx-iv-fld.is-code > span { font-weight: 600; }
.hx-iv-fld > span.is-flash { animation: hx-iv-flash 1.2s ease-out; }
@keyframes hx-iv-flash { 0% { background: var(--pa-blue-50); border-color: var(--pa-blue); } 100% { background: #fff; } }
/* one-time → recurring: the two date fields cross-fade their label and value in place */
.hx-iv-sw { display: grid; align-items: end; } /* a label that wraps in one state doesn't lift the other off its field */
.hx-iv-dates .hx-iv-fld { justify-content: flex-end; } /* and where a date label wraps (narrow phones), the fields stay level */
.hx-iv-sw > i { grid-area: 1 / 1; font-style: normal; }
.hx-iv-sw > i + i { opacity: 0; transform: translateY(5px); }
.is-rec .hx-iv-sw > i:first-child { opacity: 0; transform: translateY(-5px); transition: opacity .2s, transform .3s var(--ease); }
.is-rec .hx-iv-sw > i + i { opacity: 1; transform: none; transition: opacity .25s .1s, transform .35s .1s var(--ease); }
/* "Repeat Every" menu, drawn like the macOS popup of a native <select>: the current option sits over the field
   (Month, 4th of 5 options at 22px each: top = field centre 14px above the label's bottom, minus 82px) */
.hx-iv-sel { position: relative; }
.hx-iv-menu { position: absolute; z-index: 4; left: -4px; right: -4px; top: calc(100% - 96px); margin: 0; padding: 4px; list-style: none; background: #fff; border: 1px solid rgba(20, 30, 50, .08); border-radius: 8px;
  box-shadow: 0 14px 30px -10px rgba(20, 30, 50, .32), 0 2px 6px rgba(20, 30, 50, .08); opacity: 0; visibility: hidden; transform: scale(.97); transform-origin: 50% 70%; }
.hx-iv-menu.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .14s, transform .2s var(--ease), visibility .14s; }
.hx-iv-menu.is-open.is-shut { opacity: 0; visibility: hidden; transition: opacity .16s, visibility .16s; }
.hx-iv-menu li { position: relative; display: flex; align-items: center; height: 22px; padding: 0 8px 0 22px; border-radius: 5px; font-size: 12px; color: var(--pa-ink); white-space: nowrap; }
.hx-iv-menu li svg { position: absolute; left: 6px; top: 5px; width: 12px; height: 12px; }
.hx-iv-menu li.is-hi { background: var(--pa-blue); color: #fff; }
.hx-iv-menu li.is-hi.is-lo { background: none; color: var(--pa-ink); }
.hx-iv-rads { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; }
.hx-iv-rads li { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--pa-ink); }
.hx-iv-rads i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #aab3c0; background: #fff; transition: border-color .2s, box-shadow .2s; }
.hx-iv-rads li.is-sel i { border-color: var(--pa-blue); box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 7px var(--pa-blue); }
.hx-iv-rads li.is-sel.is-unsel i { border-color: #aab3c0; box-shadow: none; }
.hx-iv-opts { display: flex; flex-wrap: wrap; gap: 6px 18px; flex: none; }
.hx-iv-opts .hx-form-opt { font-size: 12px; }
.gbl-js .hx-iv [data-t].gbl-sx { opacity: 0; }
.gbl-js .hx-iv [data-t].gbl-sx.is-on { opacity: 1; transition: opacity .35s var(--ease); }
.hx-iv-dfoot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 2px; flex: none; }
/* presses ease in and out (the engine only times the way in); typed text shows up as typed, with a caret */
.hx-iv [data-press] { transition: transform .22s var(--ease), filter .22s; }
.hx-iv .gbl-toggle[data-press] { transition: background .3s, transform .22s var(--ease), filter .22s; }
.gbl .hx-iv .is-pressed { transition: transform .1s, filter .1s; }
.gbl-js .hx-iv [data-type][data-t].is-on:not(.gbl-sx) { animation: none; }
.hx-iv-fld > span.is-focus:not(.is-done) b::after { content: ""; display: inline-block; width: 1.5px; height: 13px; background: var(--pa-ink); margin-left: 1px; vertical-align: -2px; animation: gbl-caret 1s steps(1) infinite; }
.gbl .hx-iv .gbl-cur.is-away { opacity: 0; }

.hx-iv-prog { padding: 10px 14px; }
.hx-iv-prog > strong { display: block; font-size: 13px; color: var(--pa-ink); margin-bottom: 6px; }
.hx-iv-prog { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hx-iv-prog > strong { margin: 0; }
.hx-iv-fig { display: flex; align-items: baseline; gap: 8px; }
.hx-iv-fig small { font-size: 10.5px; font-weight: 600; color: var(--iv-mute); }
.hx-iv-fig b { font-size: 16px; font-weight: 600; color: #0a7f60; font-variant-numeric: tabular-nums; min-width: 6.4ch; text-align: right; } /* room for $945.00, so "Collected" holds still while it counts */
.hx-iv-tabs { display: flex; gap: 16px; margin: 4px 0 2px; border-bottom: 1px solid var(--pa-line); white-space: nowrap; overflow: hidden; }
.hx-iv-tabs span { padding: 4px 0 6px; font-size: 11.5px; font-weight: 600; color: var(--iv-mute); }
.hx-iv-tabs span.is-on { color: var(--pa-blue); box-shadow: inset 0 -2px 0 var(--pa-blue); }
.hx-iv-tbl { padding: 4px 12px 6px; }
.hx-iv-row { display: grid; grid-template-columns: 58px minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) 56px 56px; gap: 8px; align-items: center; padding: 6px 2px; border-top: 1px solid var(--pa-line); font-size: 11.5px; color: var(--pa-text); }
.hx-iv-row.is-head { border-top: 0; padding: 4px 2px 2px; font-size: 10.5px; font-weight: 600; color: var(--iv-mute); }
.hx-iv-row.is-head > span:last-child { color: var(--iv-mute); }
.hx-iv-row.is-child { padding-left: 14px; border-top-style: dashed; }
.hx-iv-row.is-child b { font-weight: 400; }
.hx-iv-link { font-style: normal; color: #2256d3; font-weight: 600; }
.hx-iv-fld > span.is-focus { border-color: var(--pa-blue); box-shadow: 0 0 0 3px rgba(42, 107, 230, .14); transition: border-color .2s, box-shadow .2s, transform .22s var(--ease), filter .22s; }
.hx-iv-fld > span.is-focus.is-done { border-color: var(--pa-line); box-shadow: 0 0 0 3px rgba(42, 107, 230, 0); }
.hx-iv-fld > span b em { color: var(--pa-ink); margin-right: 1px; }
.hx-iv-fld > span i { font-style: normal; }
.hx-iv-fld > span i.is-ph { color: var(--iv-mute); }
.hx-iv-row > span { min-width: 0; }
.hx-iv-row > span:nth-child(n+5) { text-align: right; font-variant-numeric: tabular-nums; }
.hx-iv-row > span:last-child { color: var(--pa-ink); }
.hx-iv-row b { display: block; font-size: 12px; font-weight: 600; color: var(--pa-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-iv-row small { display: block; font-size: 10.5px; color: var(--iv-mute); line-height: 1.35; }
.hx-iv-sm { display: none !important; }
.hx-iv-row > span:first-child { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.hx-iv-chip { font-style: normal; font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--pa-blue-50); color: #2256d3; transition: background .2s, color .2s; }
.hx-iv-chip.is-ok { background: var(--green-50); color: #0a7f60; }
.hx-iv-chip.is-bad { background: #fdecec; color: #b42318; }
.hx-iv-ribbon { font-style: normal; font-size: 9.5px; font-weight: 600; color: #2256d3; }
.hx-iv-row.is-fee { background: linear-gradient(90deg, rgba(199, 119, 0, .08), transparent 80%); border-radius: 6px; }
.hx-iv-row .hx-iv-cat { font-weight: 600; color: var(--pa-ink); }
.hx-iv-row > span:nth-child(4) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* a payment lands: the row glows green once, the status pops to Paid, the balance ticks to $0.00; the Autopay ribbon
   fades (its space stays, so nothing below moves) and the discount line fades in where it's reserved */
.hx-iv-row.is-paid { border-radius: 6px; animation: hx-iv-paid 1.4s ease-out; }
@keyframes hx-iv-paid { 0% { background-color: rgba(15, 155, 118, .14); } 100% { background-color: rgba(15, 155, 118, 0); } }
.hx-iv-row.is-paid > span:last-child { animation: hx-iv-tick .45s var(--ease); }
@keyframes hx-iv-tick { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.hx-iv-chip[data-add].is-ok, .hx-iv-chip[data-add].is-bad { animation: hx-iv-chip .45s var(--ease); }
@keyframes hx-iv-chip { 0% { transform: scale(.82); } 55% { transform: scale(1.08); } 100% { transform: none; } }
.hx-iv-ribbon.is-gone { opacity: 0; transition: opacity .3s; }
.hx-iv-disc { opacity: 0; }
.hx-iv-disc.is-in { opacity: 1; transition: opacity .4s .15s; }
/* the discount window ends (amber: the balance goes up), then the late fee rows open under it */
.hx-iv-bal.is-flash { border-radius: 4px; animation: hx-iv-warn 1.3s ease-out; }
@keyframes hx-iv-warn { 0% { background-color: #ffe9c7; } 100% { background-color: rgba(255, 233, 199, 0); } }
.hx-iv-xrow.is-open .hx-iv-row { animation: hx-iv-fee 1.6s ease-out; }
@keyframes hx-iv-fee { 0% { box-shadow: inset 0 0 0 100vmax rgba(199, 119, 0, .16); } 100% { box-shadow: inset 0 0 0 100vmax rgba(199, 119, 0, 0); } }
/* Pause holds the end state without any settling motion; so does reduced motion */
.hx-tour-box.is-held .hx-iv *, .hx-tour-box.is-held .hx-iv *::before, .hx-tour-box.is-held .hx-iv *::after { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .hx-iv *, .hx-iv *::before, .hx-iv *::after { transition: none !important; animation: none !important; }
}
/* narrow scene (phones, and the 1101–1200 two-column tour): trimmed path */
@container hxiv (max-width: 560px) {
  .hx-iv-hide-sm, .hx-iv-crow > :nth-child(2), .hx-iv-crow > :nth-child(3), .hx-iv-row > :nth-child(3), .hx-iv-row > :nth-child(4), .hx-iv-row > :nth-child(5) { display: none !important; }
  .hx-iv-sm { display: block !important; }
  .hx-iv-crow { grid-template-columns: minmax(0, 1fr) 56px 36px; }
  /* phones: charge left, balance over status right; no header row, no due line */
  .hx-iv-row { grid-template-columns: minmax(0, 1fr) 64px; grid-template-areas: "c b" "c s"; gap: 2px 8px; padding: 6px 2px; } /* fixed: Current → Paid / Overdue doesn't rewrap the charge */
  .hx-iv-row.is-head { display: none; }
  .hx-iv-row > :nth-child(1) { grid-area: s; align-items: flex-end; }
  .hx-iv-row > :nth-child(2) { grid-area: c; }
  .hx-iv-row > :nth-child(6) { grid-area: b; }
  .hx-iv-row.is-child { padding-left: 12px; }
  .hx-iv-row.is-head + .hx-iv-row { border-top: 0; }
  .hx-iv-tabs, .hx-iv-link { display: none; }
  .hx-iv-prog { padding: 8px 10px; }
  .hx-iv-prog > strong { font-size: 12px; white-space: nowrap; }
  .hx-iv-fig b { font-size: 14px; }
  .hx-iv-row.is-fee .hx-iv-sm { display: none !important; }
  .hx-iv-crow b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hx-iv-dlg { top: 40px; width: calc(100% - 16px); }
  .hx-iv-dlg-b { padding: 8px 10px 10px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 7px); mask-image: linear-gradient(180deg, transparent, #000 7px); }
  .hx-iv-dlg-in { gap: 7px; --iv-gap: 7px; }
  .hx-iv-grid { grid-auto-flow: row dense; }
  .hx-iv-fld.is-full-sm { grid-column: 1 / -1; } /* Charge Title, "After … days or more late" */
  .hx-iv-sec { padding: 9px 10px; }
  .hx-iv-empty { padding: 6px 4px 2px; }
}
/* phones up to ~430px: "Total: $41,600.00" and Submit Invoices don't share a line (they only just fit at 390), so the
   count-up can't rewrap the total mid-count */
@container hxiv (max-width: 300px) {
  .hx-iv-foot { flex-wrap: wrap; justify-content: flex-start; row-gap: 8px; }
  .hx-iv-total { width: 100%; }
}
@container hxiv (max-width: 240px) {
  .hx-iv-dfoot .gbl-pa-btn, .hx-iv-foot .gbl-pa-btn, .hx-iv-sec .gbl-pa-btn { padding: 0 8px; font-size: 11.5px; gap: 4px; }
  .hx-iv-sec:not(.is-col) { flex-wrap: wrap; gap: 6px; }
  .hx-iv-dfoot { flex-wrap: wrap; row-gap: 6px; }
  .hx-iv-prog { flex-wrap: wrap; row-gap: 2px; }
  .hx-iv-crow { grid-template-columns: minmax(0, 1fr) 56px; }
  .hx-iv-crow > :nth-child(5) { display: none; }
  .hx-iv-crow b, .hx-iv-crow small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hx-iv-fld > span.is-ph, .hx-iv-grid.is-blue .hx-iv-fld > span, .hx-iv-dates .hx-iv-fld > span { font-size: 10.5px; padding: 4px 5px; }
  .hx-iv-grid.is-blue { padding: 8px 7px; gap: 8px 7px; }
  .hx-iv-dates { padding: 8px 7px; }
  .hx-iv-dates .hx-iv-grid { column-gap: 7px; }
  .hx-iv-rads { gap: 3px 10px; }
  .hx-iv-fld > span { font-size: 11.5px; padding: 4px 6px; }
}

/* 02 · accounting */
.hx-bank { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--pa-ink); background: #fff; border: 1px solid var(--pa-line); border-radius: 999px; padding: 5px 12px 5px 10px; }
.hx-bank svg { width: 15px; height: 15px; color: var(--pa-text); }
.hx-sync { font-style: normal; font-weight: 400; color: var(--pa-mute); padding-left: 8px; border-left: 1px solid var(--pa-line); }
.hx-sync.is-spin::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; background: var(--green); animation: hx-pulse 1.4s infinite; vertical-align: 1px; }
.hx-ledger { overflow: hidden; margin-bottom: 10px; }
.hx-led-row { display: grid; grid-template-columns: minmax(0, 1fr) 92px 176px; gap: 10px; align-items: center; padding: 9px 16px; border-bottom: 1px dashed var(--pa-line); font-size: 12.5px; }
.hx-led-row:last-child { border-bottom: 0; }
.hx-led-d b { display: block; font-size: 12.5px; color: var(--pa-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-led-d small { display: block; font-size: 11.5px; color: var(--pa-mute); }
.hx-led-a { text-align: right; font-variant-numeric: tabular-nums; color: var(--pa-ink); font-weight: 600; }
.hx-led-a.is-in { color: var(--green); }
.hx-led-c { display: flex; align-items: center; }
.hx-led-c em { font-style: normal; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--pa-blue); background: var(--pa-blue-50); border-radius: 6px; padding: 4px 8px; white-space: nowrap; }
.hx-led-c em svg { width: 14px; height: 14px; }
.hx-led-c:has(em.is-on) .gbl-tx-skel { display: none; }
.gbl-js [data-gbl-scene] .hx-led-row:has(em.is-on) { animation: hx-flash-b 1.1s ease-out; }
@keyframes hx-flash-b { 0% { background: rgba(42, 107, 230, .1); } 100% { background: transparent; } }
.hx-recon-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 10px; align-items: start; }
.hx-recon { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.hx-recon-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hx-recon-h strong { font-size: 13.5px; color: var(--pa-ink); }
.hx-ok { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--green); background: var(--green-50); border-radius: 999px; padding: 3px 9px 3px 6px; }
.hx-ok svg { width: 13px; height: 13px; }
.hx-recon-bars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hx-recon-bars small { display: block; font-size: 11px; color: var(--pa-mute); font-weight: 600; }
.hx-recon-bars b { font-size: 13.5px; color: var(--pa-ink); font-variant-numeric: tabular-nums; }
.hx-diff { color: var(--amber) !important; transition: color .3s; }
.hx-diff.is-zero { color: var(--green) !important; }
.hx-packet { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 4px 12px; padding: 14px 16px; align-items: center; }
.hx-packet-ico { width: 38px; height: 38px; border-radius: 10px; background: #fdecec; color: #d93a3a; display: grid; place-items: center; }
.hx-packet-ico svg { width: 20px; height: 20px; }
.hx-packet strong { display: block; font-size: 13px; color: var(--pa-ink); }
.hx-packet small { display: block; font-size: 11.5px; color: var(--pa-mute); line-height: 1.35; }
.hx-packet .gbl-pa-btn { grid-column: 1 / -1; justify-self: start; margin-top: 6px; }

/* 03 · requests board */
.hx-kanban { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hx-col { background: #eceff4; border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 380px; }
.hx-col-h { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--pa-ink); padding: 2px 2px 4px; }
.hx-col-h i { width: 8px; height: 8px; border-radius: 50%; background: #9aa3b2; }
.hx-col-h i.is-new { background: var(--pa-blue); }
.hx-col-h i.is-prog { background: #e3a008; }
.hx-col-h i.is-done { background: var(--green); }
.hx-col-h b { margin-left: auto; font-size: 11.5px; color: var(--pa-mute); background: #fff; border-radius: 999px; padding: 1px 8px; }
.hx-card { background: #fff; border-radius: 10px; padding: 10px 11px; box-shadow: 0 1px 2px rgba(20, 30, 50, .08); display: flex; flex-direction: column; gap: 3px; border: 1px solid transparent; }
.hx-card strong { font-size: 12.5px; color: var(--pa-ink); line-height: 1.35; }
.hx-card small { font-size: 11px; color: var(--pa-mute); line-height: 1.35; }
.hx-card-tag { align-self: flex-start; font-size: 10.5px; font-weight: 600; color: #2256d3; background: #dcebfd; border-radius: 5px; padding: 1px 6px; margin-bottom: 2px; }
.hx-card-tag.is-arc { color: #4a44b8; background: #ecebff; }
.hx-card-tag.is-gen { color: #8a5a00; background: #fff4de; }
.hx-card-tag.is-vio { color: #b3261e; background: #fdecea; }
.hx-card.is-hot { border-color: var(--pa-blue); box-shadow: 0 0 0 3px rgba(42, 107, 230, .12), 0 8px 18px -10px rgba(42, 107, 230, .6); }
.hx-card.is-done:not(.is-hot) { opacity: .7; }
.hx-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 6px; }
.hx-card-foot em { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--pa-blue); border: 1px solid var(--pa-line); border-radius: 6px; padding: 2px 8px; }
.hx-assign { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--pa-ink); }
.hx-assign .hx-av { width: 20px; height: 20px; font-size: 8.5px; }
.hx-card-note { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 11px; color: var(--pa-text); background: #f5f7fa; border-radius: 6px; padding: 4px 7px; }
.hx-card-note svg { width: 13px; height: 13px; }
.hx-card-ok { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 11px; font-weight: 600; color: var(--green); }
.hx-card-ok svg { width: 13px; height: 13px; }
.gbl-js [data-gbl-scene] .hx-card[data-t].is-on { animation: hx-drop .55s var(--ease) both; }
@keyframes hx-drop { from { opacity: 0; transform: translateY(-10px) scale(.97); } to { opacity: 1; transform: none; } }

/* 04 · broadcast */
.hx-bc { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.hx-bc-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 2px; }
.hx-chan { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--pa-text); font-weight: 600; }
.hx-bc-foot .gbl-pa-btn { margin-left: auto; }
.hx-typed { min-height: 1.4em; }
.hx-deliv { display: flex; flex-direction: column; gap: 10px; }
.hx-deliv-h { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.hx-deliv-h strong { display: block; font-size: 14px; color: var(--pa-ink); }
.hx-deliv-h small { display: block; font-size: 12px; color: var(--pa-mute); }
.hx-deliv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hx-deliv-grid .gbl-pa-card { padding: 14px; display: flex; flex-direction: column; gap: 2px; }
.hx-ch-ico { width: 32px; height: 32px; border-radius: 10px; background: var(--pa-blue-50); color: var(--pa-blue); display: grid; place-items: center; margin-bottom: 8px; }
.hx-ch-ico svg { width: 17px; height: 17px; }
.hx-deliv-grid small { font-size: 12px; font-weight: 600; color: var(--pa-text); }
.hx-deliv-grid b { font-size: 28px; font-weight: 600; color: var(--pa-ink); font-variant-numeric: tabular-nums; line-height: 1.2; }
.hx-deliv-grid em { font-style: normal; font-size: 11.5px; color: var(--pa-mute); }

@media (max-width: 1200px) {
  .hx-tab { padding: 14px; gap: 12px; }
  .hx-tab-txt small { display: none; }
  .hx-panel { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); }
  .hx-panel-copy { padding: 36px 20px 28px 24px; }
  .hx-panel-stage { padding: 26px 22px 0; }
  .hx-led-row { grid-template-columns: minmax(0, 1fr) 84px 150px; }
}
@media (max-width: 1100px) {
  .hx-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx-panel { grid-template-columns: 1fr; }
  .hx-panel-copy { padding: 28px 18px 12px; }
  .hx-tab-txt small { display: block; }
}
@media (max-width: 768px) {
  .hx-tour { padding-top: 56px; }
  .hx-tour-box { padding: 8px; border-radius: 28px; }
  .hx-tabs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 6px; scrollbar-width: none; margin: 0 -2px; padding: 0 2px; }
  .hx-tabs::-webkit-scrollbar { display: none; }
  .gbl .hx-tab { flex: none; scroll-snap-align: start; padding: 10px 14px 14px 10px; border-radius: 18px; gap: 10px; }
  .hx-tab-ico { width: 36px; height: 36px; border-radius: 11px; }
  .hx-tab-ico svg { width: 18px; height: 18px; }
  .hx-tab-txt b { font-size: 14px; white-space: nowrap; }
  .hx-tab-txt small { display: none; }
  .hx-tab-bar { left: 12px; right: 12px; bottom: 5px; }
  .hx-h3 { font-size: 24px; }
  .hx-panel-copy { padding: 22px 12px 8px; gap: 14px; }
  .hx-panel-copy > p { font-size: 16px; }
  .hx-panel-stage { padding: 18px 10px 0; border-radius: 22px; }
  .gbl .hx-pa-tour { height: 440px; }
  .hx-led-row { grid-template-columns: minmax(0, 1fr) auto; padding: 8px 12px; }
  .hx-led-a { display: none; }
  .hx-led-c em { font-size: 11px; }
  .hx-recon-row { grid-template-columns: 1fr; }
  .hx-packet { display: none; }
  .hx-kanban { grid-template-columns: 1fr 1fr; }
  .hx-kanban .hx-col:first-child { display: none; }
  .hx-col { min-height: 340px; }
  .hx-bc-foot { gap: 10px; }
  .hx-bc-foot .gbl-pa-btn { margin-left: 0; }
  .hx-chan:nth-child(3) { display: none; }
  .hx-deliv-grid { grid-template-columns: 1fr 1fr; }
  .hx-deliv-grid > :nth-child(3) { display: none; }
  .hx-tour-more { font-size: 16px; }
}

/* =========================================================================
   Community switcher (the Solutions management-company hero reuses it; the homepage "Who it's for" section that
   introduced it was removed 2026-09-30, CEO note H2)
   ========================================================================= */
.hx-org { cursor: default; padding: 0 10px 0 0; height: 30px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(20, 30, 50, .1); transition: box-shadow .25s; }
.hx-org .gbl-pa-circ { box-shadow: none; background: var(--pa-blue-50); color: var(--pa-blue); }
.hx-org .gbl-pa-org { font-weight: 600; color: var(--pa-ink); font-size: 12.5px; }
.hx-mini-units { font-size: 11.5px; font-weight: 600; color: var(--pa-mute); background: #fff; border: 1px solid var(--pa-line); padding: 3px 9px; border-radius: 999px; }
.hx-org-menu { position: absolute; z-index: 7; top: 46px; right: 14px; width: 250px; padding: 8px; display: flex; flex-direction: column; gap: 2px; background: #fff; border: 1px solid var(--pa-line); border-radius: 12px; box-shadow: 0 22px 44px -18px rgba(20, 30, 60, .4); }
.hx-org-search { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; margin-bottom: 4px; border: 1.5px solid var(--pa-blue); border-radius: 8px; font-size: 12.5px; color: var(--pa-ink); }
.hx-org-search svg { width: 14px; height: 14px; color: var(--pa-mute); }
.hx-org-search .hx-typed::after { content: ""; display: inline-block; width: 1.5px; height: 13px; background: var(--pa-ink); margin-left: 1px; vertical-align: -2px; animation: gbl-caret 1s steps(1) infinite; }
.hx-org-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: 8px; font-size: 12.5px; transition: background .25s; }
.hx-org-row b { color: var(--pa-ink); }
.hx-org-row small { font-size: 11.5px; color: var(--pa-mute); }
.hx-org-row.is-hit { background: var(--pa-blue-50); }
.hx-org-row.is-hit b { color: var(--pa-blue); }
.hx-org-foot { padding: 7px 10px 3px; margin-top: 2px; border-top: 1px solid var(--pa-line); font-size: 11.5px; font-weight: 600; color: var(--pa-mute); }
@media (max-width: 768px) {
  .hx-mini-units { flex: none; white-space: nowrap; }
  .hx-org-menu { right: 8px; width: 230px; }
}
@media (max-width: 480px) {
  .hx-org .gbl-pa-circ { display: none; }
}

/* =========================================================================
   Stories
   ========================================================================= */
.hx-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); margin-bottom: 24px; }
.hx-num { padding: 32px 30px; display: flex; flex-direction: column; gap: 6px; }
.hx-num + .hx-num { border-left: 1px solid var(--line); }
.hx-num b { font-size: 48px; line-height: 1.1; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.hx-num b small { font-size: 24px; color: var(--muted); font-weight: 400; }
.hx-num > span { font-size: 16px; color: var(--body); }
.hx-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.hx-story { background: #fff; border: 1px solid var(--line); border-radius: 28px; padding: 16px 16px 24px; display: flex; flex-direction: column; gap: 14px; }
.hx-story blockquote { margin: 0; padding: 0 8px; border: 0; font-size: 20px; line-height: 1.45; color: var(--ink); font-weight: 600; quotes: none; font-style: normal; }
.hx-story blockquote::before, .hx-story blockquote::after { content: none; }
.hx-who-line { padding: 0 8px; display: flex; flex-direction: column; font-size: 14px; margin-top: auto; }
.hx-who-line strong { color: var(--ink); font-size: 16px; }
.hx-who-line span { color: var(--muted); }
.hx-who-line.has-face { flex-direction: row; align-items: center; gap: 12px; }
.hx-who-line.has-face img { width: 44px; height: 44px; border-radius: 50%; flex: none; }
.hx-who-line.has-face > span { display: flex; flex-direction: column; }
.hx-story.is-feature { grid-column: span 2; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; padding: 16px; }
.hx-story.is-feature .hx-video { height: 100%; min-height: 300px; }
.hx-story.is-feature .hx-story-body { display: flex; flex-direction: column; gap: 16px; padding: 28px 16px 20px 0; }
.hx-story.is-feature blockquote { font-size: 28px; line-height: 1.3; padding: 0; }
.hx-story.is-feature .hx-who-line { padding: 0; margin-top: 0; }
.hx-story.is-quote { padding: 32px 30px; gap: 18px; background: var(--bg); }
.hx-story.is-quote blockquote { padding: 0; font-size: 18px; font-weight: 400; line-height: 1.6; }
.hx-story.is-quote .hx-who-line { padding: 0; }
.gbl a.hx-story-cta, .hx-story-cta { grid-column: 1 / -1; border-radius: 28px; padding: 32px 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; color: #fff; background: linear-gradient(150deg, #1c3a94, #2a6be6); position: relative; overflow: hidden; isolation: isolate; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.gbl a.hx-story-cta:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 30px 60px -30px rgba(24, 50, 140, .5); }
.gbl a.hx-story-cta:hover .gbl-ico-sm { transform: translateX(3px); }
.hx-story-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1px); background-size: 20px 20px; mask-image: linear-gradient(200deg, #000, transparent 70%); -webkit-mask-image: linear-gradient(200deg, #000, transparent 70%); }
.hx-story-cta strong { display: block; font-size: 28px; line-height: 1.25; color: #fff; }
.hx-story-cta p { color: #fff; font-size: 16px; margin-top: 4px; }
.hx-story-cta .gbl-btn { flex: none; }
.gbl .hx-video { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; background: #0d1b2a; }
.hx-video img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.35); transition: transform .6s var(--ease); }
.hx-video:hover img { transform: scale(1.42); }
.hx-play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(255, 255, 255, .95); color: var(--pb-700); display: grid; place-items: center; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .5); transition: transform .3s var(--ease); }
.hx-play::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .6); opacity: 0; }
.hx-video:hover .hx-play::before, .hx-video:focus-visible .hx-play::before { animation: hx-ring 1.6s ease-out infinite; }
@keyframes hx-ring { 0% { transform: scale(.85); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
.hx-play svg { width: 26px; height: 26px; margin-left: 3px; }
.hx-video:hover .hx-play { transform: scale(1.08); }
@media (max-width: 1100px) {
  .hx-nums { grid-template-columns: 1fr 1fr; }
  .hx-num:nth-child(3) { border-left: 0; }
  .hx-num:nth-child(n+3) { border-top: 1px solid var(--line); }
  .hx-wall { grid-template-columns: 1fr 1fr; }
  .hx-story.is-feature { grid-column: span 2; }
  .hx-story.is-quote:not(.hx-switch-quote) { grid-column: span 2; }
}
@media (max-width: 768px) {
  .hx-nums { border-radius: 24px; margin-bottom: 16px; }
  .hx-num { padding: 20px 18px; }
  .hx-num b { font-size: 32px; }
  .hx-num b small { font-size: 18px; }
  .hx-num > span { font-size: 14px; }
  .hx-wall { display: flex; flex-direction: column; gap: 14px; }
  .hx-story.is-feature { display: flex; flex-direction: column; gap: 14px; padding: 12px 12px 22px; }
  .hx-story.is-feature .hx-video { min-height: 0; aspect-ratio: 16 / 10; }
  .hx-story.is-feature .hx-story-body { padding: 4px 8px 0; }
  .hx-story.is-feature blockquote { font-size: 20px; }
  .hx-vids { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 0 20px 4px; scrollbar-width: none; }
  .hx-vids::-webkit-scrollbar { display: none; }
  .hx-vids .hx-story { flex: 0 0 78%; scroll-snap-align: center; }
  .hx-story blockquote { font-size: 16px; }
  .hx-story.is-quote { padding: 24px 20px; }
  .hx-story.is-quote blockquote { font-size: 16px; }
  .gbl a.hx-story-cta { padding: 26px 22px; flex-direction: column; align-items: flex-start; }
  .hx-story-cta strong { font-size: 24px; }
  .hx-story-cta .gbl-btn { width: 100%; }
}
.hx-vids { display: contents; }
@media (max-width: 768px) { .hx-vids { display: flex; } }

/* =========================================================================
   Switching
   ========================================================================= */
.hx-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; position: relative; --p: 0; counter-reset: none; }
.hx-steps::before, .hx-steps::after { content: ""; position: absolute; top: 27px; left: calc(100% / 6); height: 2px; border-radius: 2px; }
.hx-steps::before { right: calc(100% / 6); background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px); }
.hx-steps::after { width: calc((100% * 2 / 3) * var(--p)); background: linear-gradient(90deg, var(--pb-200), var(--pb-600)); transition: width .8s var(--ease); }
.hx-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 0 12px; }
.hx-step-n { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--muted); background: #fff; border: 1.5px solid var(--line); box-shadow: 0 0 0 8px #fff; transition: background .5s, color .5s, border-color .5s, box-shadow .5s; }
.hx-step.is-on .hx-step-n { background: var(--pb-600); border-color: var(--pb-600); color: #fff; box-shadow: 0 0 0 6px var(--pb-100), 0 0 0 12px #fff; }
.hx-step h3 { font-size: 24px; margin-top: 12px; }
.hx-step p { font-size: 16px; max-width: 340px; }
.hx-step-vis { margin-top: 8px; min-height: 56px; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(8px); transition: opacity .5s .25s, transform .5s .25s var(--ease); }
.hx-step.is-on .hx-step-vis { opacity: 1; transform: none; }
.hx-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 10px; border-radius: 12px; background: var(--green-50); color: #0c7a5c; font-size: 14.5px; font-weight: 600; }
.hx-chip.is-blue { background: var(--pb-50); color: var(--pb-700); }
.hx-chip svg { width: 18px; height: 18px; }
/* step cards: each is its own small scene, played by home2.js when its step lights up */
.hx-step .hx-step-vis { min-height: 0; margin-top: auto; padding-top: 8px; align-items: flex-end; width: 100%; }
.hx-sv { position: relative; display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 300px; margin: 0 auto; padding: 14px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: 0 16px 32px -24px rgba(24, 50, 140, .35); text-align: left; font-size: 13px; height: 212px; color: var(--pa-ink, #1f2733); transition: box-shadow .6s var(--ease), border-color .6s; }
.hx-step.is-now .hx-sv { border-color: var(--pb-100); box-shadow: 0 20px 40px -24px rgba(24, 50, 140, .5); }
.hx-sv small { font-size: 11.5px; font-weight: 600; color: var(--pa-text, #4a5566); }
/* two layers in one place (a form and what replaces it, a button and its result): no layout jump when they swap */
.hx-slot, .hx-sv-new { display: grid; }
.hx-slot > *, .hx-sv-new > * { grid-area: 1 / 1; }
/* scene parts marked .gbl-sx keep their space while hidden (height: auto below 1100px must not grow as the card plays) */
.gbl-js .hx-sv .gbl-sx { transition: opacity .3s, transform .35s var(--ease), visibility 0s; }
.gbl-js .hx-sv [data-t].gbl-sx:not(.is-on) { opacity: 0; visibility: hidden; transform: translateY(6px); transition-delay: 0s, 0s, .35s; }
.gbl-js .hx-sv .gbl-sx.is-off { opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transition-delay: 0s, 0s, .35s; }
.gbl-js .hx-slot > .is-on.gbl-sx, .gbl-js .hx-sv-new > .is-on.gbl-sx { transition-delay: .12s, .12s, 0s; }
/* 1: sign up. The caret sits in the field being typed, which gets the focus ring. */
.hx-sv-form, .hx-lp { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hx-lp { gap: 10px; }
.hx-sv .hx-field { min-height: 32px; font-size: 13px; transition: border-color .2s, box-shadow .2s; }
.hx-sv .hx-field:has(.hx-typed.is-on:not(.is-typed)) { border-color: var(--pa-blue, #2a6be6); box-shadow: 0 0 0 3px rgba(42, 107, 230, .14); }
.hx-sv .hx-typed { min-height: 0; }
.hx-sv .hx-typed.is-on:not(.is-typed)::after { content: ""; display: inline-block; width: 1.5px; height: 13px; background: currentColor; margin-left: 1px; vertical-align: -2px; animation: gbl-caret 1s steps(1) infinite; }
/* placeholder text in the switching form fields; scoped to span because svg.hx-ph is the Phosphor icon class (inherits currentColor) */
span.hx-ph { color: var(--pa-mute, #7b8494); }
.gbl-js .hx-typed.is-on + .hx-ph { display: none; }
.hx-sv-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hx-sv-row .hx-field { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; }
.hx-sv-btn { align-self: flex-start; padding: 7px 12px; border-radius: 8px; background: var(--pa-blue, #2a6be6); color: #fff; font-weight: 600; font-size: 13px; line-height: 1.3; }
/* …then the Launchpad, whose cards steps 2 and 3 tick off (a done card dims, its icon turns into a check, a badge shows) */
.hx-lp-h { font-size: 15px; line-height: 1.2; }
.hx-lp small { margin: -4px 0 2px; font-weight: 400; color: var(--pa-mute, #7b8494); line-height: 1.35; }
.hx-lp-card { display: flex; align-items: center; gap: 9px; padding: 10px; border: 1px solid var(--pa-line, #e3e7ee); border-radius: 10px; font-size: 12.5px; font-weight: 600; transition: background .4s, border-color .4s; }
.hx-lp-t { flex: 1; min-width: 0; transition: color .4s; }
.hx-lp-ico { flex: none; display: grid; width: 26px; height: 26px; border-radius: 8px; background: var(--pb-50); color: var(--pb-700); place-items: center; transition: background .4s, color .4s; }
.hx-lp-ico svg { grid-area: 1 / 1; width: 15px; height: 15px; transition: opacity .3s, transform .4s var(--ease); }
.hx-lp-ico svg + svg { opacity: 0; transform: scale(.4); }
.hx-lp-card em { font-style: normal; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--green-50); color: #0c7a5c; opacity: 0; transform: scale(.6); transition: opacity .3s, transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.hx-lp-card.is-done { background: #f7f9fb; }
.hx-lp-card.is-done .hx-lp-t { color: var(--pa-mute, #7b8494); }
.hx-lp-card.is-done .hx-lp-ico { background: var(--green-50); color: var(--green); }
.hx-lp-card.is-done .hx-lp-ico svg:first-child { opacity: 0; transform: scale(.4); }
.hx-lp-card.is-done .hx-lp-ico svg + svg, .hx-lp-card.is-done em { opacity: 1; transform: none; }
.gbl-js [data-gbl-scene] .hx-lp-card.is-flash { animation: hx-flash 1.4s ease-out; }
/* 2: the file uploads, each CSV column maps to a field, then Import Units */
.hx-sv .hx-chip { padding: 7px 12px 7px 9px; font-size: 13px; border-radius: 10px; }
.hx-sv .hx-chip svg { width: 16px; height: 16px; flex: none; }
.hx-sv-ok { align-self: flex-start; }
/* the file: a progress track fills, then gives way to a check in the same column as the mapping checks */
.hx-sv-file { display: flex; align-items: center; gap: 8px; padding: 2px 0 2px 2px; }
.hx-sv-file-ico { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: #e7f6f1; color: #0c7a5c; }
.hx-sv-file-ico svg { width: 14px; height: 14px; }
.hx-sv-file b { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.hx-sv-file i { position: relative; flex: 1; min-width: 16px; height: 4px; border-radius: 4px; background: #eef1f5; overflow: hidden; transition: opacity .3s; }
.hx-sv-file i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--green); transform-origin: left; }
.gbl-js .hx-sv-file:not(.is-on) i::after { transform: scaleX(0); }
.gbl-js .hx-sv-file.is-on i::after { transition: transform .6s .1s var(--ease); }
.hx-sv-file .hx-map-ok { flex: none; }
.gbl-js .hx-sv-file:not(.is-up) .hx-map-ok { opacity: 0; transform: scale(.4); }
.gbl-js .hx-sv-file .hx-map-ok { transition: opacity .3s, transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.gbl-js .hx-sv-file.is-up i { opacity: 0; }
.hx-map { display: grid; grid-template-columns: auto 18px minmax(0, 1fr) 16px; align-items: center; gap: 6px; font-size: 12.5px; }
.hx-map em { font-style: normal; padding: 5px 8px; border-radius: 6px; border: 1px dashed var(--pa-line, #cfd6e0); color: var(--pa-text, #4a5566); white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; }
.hx-map i { height: 2px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--pb-200) 0 4px, transparent 4px 7px); transform-origin: left; }
.hx-map b { padding: 5px 8px; border-radius: 6px; background: #f0f2f5; color: var(--pa-ink, #1f2733); font-weight: 600; line-height: 1.3; }
.hx-map-ok { width: 16px; height: 16px; color: var(--green); }
.gbl-js .hx-map i, .gbl-js .hx-map b, .gbl-js .hx-map-ok { transition: opacity .3s, transform .35s var(--ease), background .6s; }
.gbl-js .hx-map:not(.is-mapped) i { opacity: 0; transform: scaleX(0); }
.gbl-js .hx-map:not(.is-mapped) b { opacity: 0; transform: translateX(-6px); }
.gbl-js .hx-map:not(.is-mapped) .hx-map-ok { opacity: 0; transform: scale(.4); }
.gbl-js .hx-map.is-mapped b { transition-delay: .08s; }
.gbl-js .hx-map.is-mapped .hx-map-ok { transition-delay: .22s; transition-timing-function: cubic-bezier(.3, 1.6, .5, 1); }
.hx-sv-map .hx-slot { margin-top: auto; justify-items: start; align-items: center; }
/* 3: send the invite, the email lands on the owner's phone, they tap it and turn on autopay */
.hx-sv-phone { flex-direction: row; align-items: flex-end; gap: 12px; padding: 14px 14px 0; overflow: hidden; }
.hx-phone { position: relative; flex: none; width: 144px; height: 198px; padding: 26px 10px 0; border-radius: 22px 22px 0 0; background: #f4f6f9; border: 5px solid #1f2733; border-bottom: 0; }
.hx-phone-notch { position: absolute; top: 5px; left: 50%; width: 44px; height: 10px; margin-left: -22px; border-radius: 6px; background: #1f2733; }
.hx-phone-mail, .hx-phone-done { display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(20, 30, 50, .08); font-size: 11.5px; line-height: 1.35; color: var(--pa-text, #4a5566); }
.gbl-js [data-gbl-scene] .hx-phone-mail.is-on { animation: hx-drop .5s var(--ease) both; box-shadow: 0 6px 16px -6px rgba(20, 30, 50, .25); }
.hx-phone-mail small, .hx-phone-done small { font-size: 11px; color: var(--pa-mute, #7b8494); }
.hx-phone-mail b, .hx-phone-done b { font-size: 12.5px; color: var(--pa-ink, #1f2733); line-height: 1.3; }
/* the email as the inbox shows it: PayHOA header, the subject, one slim button */
.hx-phone-mail { gap: 6px; padding: 9px; }
.hx-mail-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 6px; border-bottom: 1px solid #eef1f5; }
.hx-mail-logo { width: 30px; height: 11px; }
.hx-sv .hx-mail-top small { font-size: 10px; font-weight: 400; color: var(--pa-mute, #7b8494); }
.hx-phone-mail b { font-size: 11.5px; }
.hx-phone-mail em { position: relative; overflow: hidden; font-style: normal; margin-top: 1px; padding: 5px 3px; border-radius: 6px; background: var(--pa-blue, #2a6be6); color: #fff; font-weight: 600; text-align: center; font-size: 10.5px; line-height: 1.3; white-space: nowrap; }
/* a tap on a phone: a ring spreads from the finger */
.hx-phone-mail em::after { content: ""; position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: rgba(255, 255, 255, .55); opacity: 0; pointer-events: none; }
.hx-phone-mail em.is-pressed::after { animation: hx-tap .5s ease-out; }
@keyframes hx-tap { from { opacity: 1; transform: scale(.3); } to { opacity: 0; transform: scale(2.4); } }
.hx-phone-done { align-items: center; text-align: center; padding: 14px 8px; }
.hx-phone-ok { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--green-50); color: var(--green); margin-bottom: 4px; }
.hx-phone-ok svg { width: 18px; height: 18px; }
.gbl-js [data-gbl-scene] .hx-phone-done.is-on .hx-phone-ok { animation: hx-ok .5s .1s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes hx-ok { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
.hx-sv-side { display: flex; flex-direction: column; gap: 8px; align-self: center; min-width: 0; }
.hx-sv-side .hx-sv-btn { font-size: 12px; padding: 7px 10px; }
.hx-sv-side .hx-slot { justify-items: start; align-items: center; }
.hx-sv-side .hx-chip { align-items: flex-start; line-height: 1.3; }
.hx-sv .hx-chip.is-soft { background: var(--bg); color: var(--muted); }
@media (max-width: 1100px) {
  .hx-sv { height: auto; }
  .hx-sv-new, .hx-sv-map { min-height: 212px; }
  .hx-sv-phone { flex-direction: column; align-items: center; }
  .hx-sv-side { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; order: -1; min-height: 34px; }
}
.hx-sv { overflow-wrap: normal; }
@media (max-width: 480px) {
  .hx-step { padding: 0; }
  /* narrow cards: each CSV column sits above the field it maps to */
  .hx-map { grid-template-columns: minmax(0, 1fr) 16px; row-gap: 3px; }
  .hx-map em { grid-column: 1 / -1; justify-self: start; padding: 2px 6px; }
  .hx-map i { display: none; }
}
@media (max-width: 360px) {
  .hx-lp-card { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 4px 9px; }
  .hx-lp-ico { grid-row: span 2; }
  .hx-lp-card em { justify-self: start; }
}
/* the quote and the support bar share one width, radius and padding so their edges line up */
/* Switching: a rounded white panel like the tour, Gable and pricing cards, with room above it. */
.gbl-home2 .hx-switch { padding: 80px 0 0; }
.hx-switch-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-card); padding: 88px 72px; }
@media (max-width: 992px) {
  .hx-switch-card { padding: 64px 40px; }
}
@media (max-width: 768px) {
  .gbl-home2 .hx-switch { padding-top: 48px; }
  .hx-switch-card { padding: 48px 20px 20px; border-radius: 28px; }
}
.hx-switch-quote { max-width: 1040px; margin: 64px auto 0; flex-direction: row; align-items: center; gap: 32px; padding: 28px 32px; border-radius: 24px; background: var(--bg); }
.hx-switch-quote .hx-stars { display: none; }
.hx-switch-quote blockquote { font-size: 20px; }
.hx-switch-quote .hx-who-line { flex: none; margin: 0; }
.hx-switch-quote .hx-who-line.has-face { flex-direction: row; align-items: center; gap: 12px; width: 280px; }
.hx-support { display: flex; align-items: center; gap: 32px; margin: 16px auto 0; max-width: 1040px; padding: 22px 32px; border-radius: 24px; background: var(--bg); border: 1px solid var(--line); }
.hx-support p { flex: 1; font-size: 16px; }
.hx-support p strong { color: var(--ink); }
.hx-faces { display: flex; flex: none; }
.hx-faces .hx-av { width: 44px; height: 44px; font-size: 13px; box-shadow: 0 0 0 3px var(--bg); }
.hx-faces .hx-av + .hx-av { margin-left: -10px; }
.hx-support .hx-more { flex: none; }
@media (max-width: 992px) {
  .hx-steps { grid-template-columns: 1fr; gap: 36px; max-width: 520px; margin: 0 auto; }
  .hx-steps::before, .hx-steps::after { display: none; }
  .hx-support { flex-direction: column; text-align: center; }
  .hx-switch-quote { flex-direction: column; align-items: flex-start; }
  .hx-switch-quote .hx-who-line.has-face { flex-direction: row; align-items: center; width: auto; }
}
@media (max-width: 768px) {
  .hx-step-n { width: 48px; height: 48px; font-size: 18px; }
  .hx-step h3 { font-size: 20px; margin-top: 6px; }
  .hx-step p { font-size: 16px; }
  .hx-support { margin-top: 14px; padding: 22px 18px; gap: 14px; }
  .hx-switch-quote { margin-top: 44px; padding: 22px 20px; gap: 16px; }
  .hx-switch-quote blockquote { font-size: 16px; }
  .hx-support p { font-size: 16px; }
}

/* =========================================================================
   Pricing
   ========================================================================= */
.hx-price-card { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 64px; align-items: center; padding: 72px 72px; border-radius: var(--r-xl); background: #13214d; color: #c9d6e6; }
.hx-price-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(45% 60% at 0% 0%, rgba(42, 107, 230, .6), transparent 70%), radial-gradient(40% 60% at 100% 100%, rgba(42, 107, 230, .4), transparent 70%); }
.hx-price-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px); background-size: 22px 22px; mask-image: radial-gradient(50% 60% at 20% 30%, #000, transparent 80%); -webkit-mask-image: radial-gradient(50% 60% at 20% 30%, #000, transparent 80%); }
.hx-price-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.hx-price-copy .gbl-h2 { color: #fff; }
.hx-price-copy > p { font-size: 20px; color: #c9d6e6; max-width: 560px; }
.hx-incl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; margin-top: 8px; }
.hx-incl li { position: relative; padding-left: 30px; font-size: 16px; color: #e8eef6; }
.hx-incl li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: rgba(143, 227, 194, .16); }
.hx-incl li::after { content: ""; position: absolute; left: 7px; top: 7px; width: 5px; height: 9px; border: solid #8fe3c2; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.hx-price-copy > p.hx-price-sol { font-size: 16px; color: #c9d6e6; margin-top: 4px; }
.hx-price-sol a { color: #fff; font-weight: 600; }
.hx-price-sol a:hover { color: #b9d3ff; }
.hx-calc { background: #fff; color: var(--body); border-radius: 28px; padding: 28px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6); display: flex; flex-direction: column; gap: 16px; }
.hx-calc-seg { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 14px; background: var(--bg); }
.gbl .hx-calc-seg button { padding: 10px 8px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--muted); text-align: center; transition: background .2s, color .2s, box-shadow .2s; }
.gbl .hx-calc-seg button.is-on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(20, 30, 50, .12); }
.hx-calc-label { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; font-weight: 600; color: var(--ink); margin: 6px 0 0; }
.hx-range { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 8px; margin: 4px 0 0; background: linear-gradient(90deg, var(--pb-600) var(--fill, 7%), #e5eaf1 var(--fill, 7%)); outline: none; cursor: pointer; }
.hx-range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 2px solid var(--pb-600); box-shadow: 0 4px 12px -2px rgba(34, 86, 211, .45); transition: transform .15s; }
.hx-range::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 2px solid var(--pb-600); box-shadow: 0 4px 12px -2px rgba(34, 86, 211, .45); }
.hx-range:active::-webkit-slider-thumb { transform: scale(1.12); }
.hx-range:focus-visible { box-shadow: 0 0 0 4px var(--pb-100); }
.hx-range-scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: -6px; }
.hx-calc-price { padding: 18px 0 6px; border-top: 1px solid var(--line); margin-top: 4px; }
.hx-calc-amt { font-size: 56px; line-height: 1; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; display: inline-block; }
.hx-calc-amt.is-tick { animation: hx-tick .35s var(--ease); }
@keyframes hx-tick { 0% { transform: translateY(6px); opacity: .4; } 100% { transform: none; opacity: 1; } }
.hx-calc-per { font-size: 18px; color: var(--muted); margin-left: 4px; }
/* C4s, right under the plan price (CEO notes 2026-09-30, P2 round 4) */
.hx-calc-gable { display: flex; gap: 10px; align-items: flex-start; margin: -4px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--pb-50); font-size: 14px; line-height: 1.45; color: var(--ink); }
.hx-calc-gable svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--pb-600); }
/* homepage: the computed Gable price (home2.js), then the on-by-default note */
.hx-calc-gable.is-priced strong { display: block; font-weight: 600; font-variant-numeric: tabular-nums; }
.hx-calc-gable.is-priced small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.hx-calc-cta { width: 100%; margin-top: 4px; }
.hx-calc-fine { font-size: 14px; color: var(--muted); text-align: center; }
.hx-calc-fine a { color: var(--pb-700); white-space: nowrap; }
/* the full card (tools/partials.mjs @calc: homepage, /pricing/ and, in one-plan mode, the Solutions pages; was pricing2.css
   .px-*): exact number field, billing radios beside the price, split price lines. The landings' own card (tools/landing2.mjs)
   shares the base .hx-calc rules above. */
.hx-calc-full { gap: 14px; }
.hx-calc-units { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 6px; }
.hx-calc-units .hx-calc-label { margin: 0; }
.hx-calc-num { display: flex; align-items: center; gap: 8px; border: 1px solid #c3cddb; border-radius: 12px; padding: 0 12px 0 4px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.hx-calc-num:focus-within { border-color: var(--pb-600); box-shadow: 0 0 0 3px var(--pb-100); }
.gbl .hx-calc-num input { width: 84px; border: 0; background: none; padding: 8px 4px 8px 8px; font: inherit; font-size: 18px; font-weight: 600; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; outline: none; -moz-appearance: textfield; appearance: textfield; }
.hx-calc-num input::-webkit-inner-spin-button, .hx-calc-num input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.hx-calc-num span { font-size: 16px; color: var(--muted); }
.hx-calc-bills { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 14px; background: var(--bg); margin-top: 10px; }
.gbl .hx-calc-bills button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 8px; border-radius: 10px; font-size: 16px; font-weight: 600; line-height: 1.25; color: var(--muted); transition: background .2s, color .2s, box-shadow .2s; }
.gbl .hx-calc-bills button.is-on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(20, 30, 50, .12); }
.hx-calc-bills em { font-style: normal; font-size: 14px; font-weight: 600; line-height: 1.43; color: #0a725a; background: var(--green-50); padding: 1px 8px; border-radius: 999px; }
.hx-calc-full.is-pmc .hx-calc-bills { display: none; }
.gbl .hx-calc-full .hx-calc-seg button:focus-visible, .gbl .hx-calc-bills button:focus-visible { outline: 2px solid var(--pb-600); outline-offset: 2px; }
.hx-calc-full .hx-range-scale { font-size: 13px; }
.hx-calc-full .hx-calc-price { padding: 16px 0 4px; }
.hx-calc-full .hx-calc-price p { margin: 0; }
.hx-calc-band { font-size: 14px; font-weight: 600; line-height: 1.43; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; }
.hx-calc-full .hx-calc-price .hx-calc-amtline { margin: 6px 0 8px; }
.hx-calc-billline { font-size: 16px; color: var(--ink); }
.gbl .hx-calc-full .hx-calc-price .hx-calc-gable { margin: 14px 0 0; }
@media (max-width: 1100px) {
  .hx-price-card { grid-template-columns: 1fr; gap: 40px; padding: 56px 40px; }
  .hx-calc { max-width: 560px; }
}
@media (max-width: 768px) {
  .hx-price-card { padding: 40px 16px 16px; border-radius: 28px; gap: 28px; }
  .hx-price-copy { padding: 0 6px; }
  .hx-price-copy > p { font-size: 16px; }
  .hx-incl { grid-template-columns: 1fr; gap: 10px; }
  .hx-incl li { font-size: 16px; }
  .hx-calc { padding: 20px 16px; border-radius: 22px; }
  .hx-calc-amt { font-size: 48px; }
  .gbl .hx-calc-seg button { font-size: 14px; }
  /* full card, first screen on /pricing/: shorter segment labels and 44px touch targets */
  .hx-calc-units { flex-wrap: wrap; gap: 10px; }
  .gbl .hx-calc-num input { width: 72px; min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
  .gbl .hx-calc-bills button { min-height: 44px; font-size: 14px; flex-wrap: wrap; gap: 4px 6px; }
  .hx-calc-bills em { font-size: 12px; }
  .gbl .hx-calc-full .hx-calc-seg button { padding: 10px 4px; min-height: 44px; font-size: 13px; line-height: 1.25; }
}

/* =========================================================================
   Integrations + security
   ========================================================================= */
.hx-trust-sec { overflow-x: clip; }
.hx-trust { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 72px; align-items: center; }
.hx-orbit { position: relative; width: 100%; max-width: 500px; aspect-ratio: 1; margin: 0 auto; container-type: inline-size; }
.hx-orbit-ring { position: absolute; inset: 50%; border-radius: 50%; border: 1.5px dashed var(--pb-200); transform: translate(-50%, -50%); }
.hx-orbit-ring.is-1 { width: 68%; height: 68%; inset: auto; left: 16%; top: 16%; transform: none; }
.hx-orbit-ring.is-2 { width: 96%; height: 96%; inset: auto; left: 2%; top: 2%; transform: none; border-color: var(--line); }
.hx-orbit::before { content: ""; position: absolute; left: 25%; top: 25%; width: 50%; height: 50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(150, 185, 250, .45), transparent); }
.hx-orbit-core { position: absolute; left: 50%; top: 50%; width: 132px; height: 132px; margin: -66px 0 0 -66px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 10px rgba(255, 255, 255, .6), 0 24px 50px -18px rgba(24, 50, 140, .45); }
.hx-orbit-core svg { width: 92px; height: 34px; }
.hx-orbit-core::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid var(--pb-200); opacity: 0; }
.gbl-js .hx-orbit.is-live .hx-orbit-core::after { animation: hx-ring 2.4s ease-out 2s 3; }
.hx-orbit-spin { position: absolute; inset: 0; }
.hx-orbit-spin > span { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a))); }
.hx-orbit-spin.is-1 > span { --r: 34cqw; }
.hx-orbit-spin.is-2 > span { --r: 48cqw; }
.gbl .hx-orbit-spin img.is-wide { width: 150px; margin-left: -75px; padding: 14px 16px; }
.gbl .hx-orbit-spin img { position: absolute; left: 0; top: 0; max-width: none; width: 112px; height: 54px; margin: -27px 0 0 -56px; padding: 12px 16px; object-fit: contain; background: #fff; border-radius: 16px; box-shadow: 0 1px 2px rgba(28, 39, 55, .06), 0 14px 30px -14px rgba(24, 50, 140, .35); }
/* on first view the rings sweep into place and the logos pop in, then everything rests */
.gbl-js .hx-orbit .hx-orbit-spin { rotate: -70deg; opacity: 0; transition: rotate 2.2s cubic-bezier(.2, .8, .2, 1), opacity .8s; }
.gbl-js .hx-orbit .hx-orbit-spin.is-2 { rotate: 60deg; transition-delay: .15s; }
.gbl-js .hx-orbit .hx-orbit-spin img { rotate: 70deg; transition: rotate 2.2s cubic-bezier(.2, .8, .2, 1); }
.gbl-js .hx-orbit .hx-orbit-spin.is-2 img { rotate: -60deg; transition-delay: .15s; }
.gbl-js .hx-orbit.is-live .hx-orbit-spin, .gbl-js .hx-orbit.is-live .hx-orbit-spin img { rotate: 0deg; opacity: 1; }
.hx-orbit-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hx-orbit-lines line { stroke: var(--pb-200); stroke-width: 1.5; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.hx-orbit-lines circle { fill: var(--pb-600); opacity: 0; }
@keyframes hx-packet { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--tx), var(--ty)); } }
/* data flows (a looping scene): a packet runs along its line (in = logo → PayHOA, out = PayHOA → logo), the line lights up,
   the logo gets a ring, and the event's label pops in under the PayHOA mark */
.hx-orbit-col { min-width: 0; }
.hx-orbit.is-held .hx-orbit-lines circle, .hx-orbit.is-held .hx-orbit-lines line, .hx-orbit.is-held .hx-orbit-spin > span img { animation: none !important; }
.hx-orbit-col .hx-pause-row { justify-content: center; margin-top: 40px; }
.hx-orbit-lines circle.is-in { animation: hx-packet 1.2s var(--ease) both; }
.hx-orbit-lines circle.is-out { animation: hx-packet-out 1.2s var(--ease) both; }
@keyframes hx-packet-out { 0% { opacity: 0; transform: translate(var(--tx), var(--ty)); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(0, 0); } }
.hx-orbit-lines line.is-hot { animation: hx-line-hot 1.8s ease-out both; }
@keyframes hx-line-hot { 0% { stroke: var(--pb-200); } 20%, 60% { stroke: var(--pb); stroke-dasharray: 3 3; } 100% { stroke: var(--pb-200); } }
.hx-orbit-spin > span.is-hot img { animation: hx-logo-hot 1.4s ease-out both; }
@keyframes hx-logo-hot { 0% { box-shadow: 0 0 0 0 rgba(42, 107, 230, .45), 0 14px 30px -14px rgba(24, 50, 140, .35); } 40% { box-shadow: 0 0 0 6px rgba(42, 107, 230, .18), 0 14px 30px -14px rgba(24, 50, 140, .35); } 100% { box-shadow: 0 0 0 10px rgba(42, 107, 230, 0), 0 14px 30px -14px rgba(24, 50, 140, .35); } }
.hx-flow-chip { position: absolute; z-index: 5; left: 0; right: 0; top: 76%; width: max-content; max-width: 70%; margin: 0 auto; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 14px; background: #fff; border: 1px solid var(--pb-100); box-shadow: 0 18px 36px -18px rgba(24, 50, 140, .55); text-align: left; }
.hx-flow-chip > i { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--pb-50); color: var(--pb-700); }
.hx-flow-chip > i.is-green { background: var(--green-50); color: #0a725a; }
.hx-flow-chip .hx-ph { width: 17px; height: 17px; }
.hx-flow-chip b { display: block; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.hx-flow-chip small { display: block; font-size: 12px; line-height: 16px; color: #5a6477; white-space: nowrap; }
.hx-trust-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.hx-sec-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 8px 0 6px; width: 100%; }
.hx-sec-list li { display: flex; flex-direction: column; align-items: flex-start; padding: 20px; border-radius: 20px; background: #fff; border: 1px solid var(--line); }
.hx-sec-list li > span { flex: none; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 12px; background: var(--pb-50); color: var(--pb-700); display: grid; place-items: center; }
.hx-sec-list li > span svg { width: 22px; height: 22px; }
/* Stacked (icon, title, description) so every tile shares one left edge; beside the icon the text had 110-280px and wrapped unevenly. */
.hx-sec-list li > p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--body); text-wrap: pretty; }
.hx-sec-list b { display: block; margin-bottom: 4px; font-size: 16px; line-height: 1.35; color: var(--ink); }
/* the four tiles step in after the section, and each icon gets one small gesture (plays once) */
.gbl-js .hx-trust .hx-sec-list li { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease), border-color .25s, box-shadow .25s; }
.gbl-js .hx-trust.is-in .hx-sec-list li { opacity: 1; transform: none; }
.gbl-js .hx-trust.is-in .hx-sec-list li:nth-child(1) { transition-delay: .35s, .35s, 0s, 0s; }
.gbl-js .hx-trust.is-in .hx-sec-list li:nth-child(2) { transition-delay: .45s, .45s, 0s, 0s; }
.gbl-js .hx-trust.is-in .hx-sec-list li:nth-child(3) { transition-delay: .55s, .55s, 0s, 0s; }
.gbl-js .hx-trust.is-in .hx-sec-list li:nth-child(4) { transition-delay: .65s, .65s, 0s, 0s; }
.hx-sec-list li:hover { border-color: var(--pb-200); box-shadow: 0 18px 36px -28px rgba(24, 50, 140, .5); }
.gbl-js .hx-trust.is-in .hx-sec-list li > span svg { animation: hx-icon-nudge .9s var(--ease) both; }
.gbl-js .hx-trust.is-in .hx-sec-list li:nth-child(1) > span svg { animation-delay: .8s; }
.gbl-js .hx-trust.is-in .hx-sec-list li:nth-child(2) > span svg { animation-delay: .9s; }
.gbl-js .hx-trust.is-in .hx-sec-list li:nth-child(3) > span svg { animation-delay: 1s; }
.gbl-js .hx-trust.is-in .hx-sec-list li:nth-child(4) > span svg { animation-delay: 1.1s; }
@keyframes hx-icon-nudge { 0% { transform: scale(1); } 35% { transform: scale(1.22) rotate(-6deg); } 70% { transform: scale(.96); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .gbl-js .hx-trust .hx-sec-list li { opacity: 1; transform: none; }
  .gbl-js .hx-trust.is-in .hx-sec-list li > span svg { animation: none; }
}
@media (max-width: 1100px) {
  .hx-trust { grid-template-columns: 1fr; gap: 48px; }
  .hx-trust-copy { max-width: 760px; margin: 0 auto; }
}
@media (max-width: 768px) {
  .hx-orbit { max-width: 340px; transform: scale(.84); margin: -24px auto; }
  .gbl .hx-orbit-spin img { width: 84px; height: 42px; margin: -21px 0 0 -42px; padding: 9px 11px; border-radius: 12px; }
  .gbl .hx-orbit-spin img.is-wide { width: 112px; margin-left: -56px; padding: 11px 12px; }
  .hx-orbit-core { width: 100px; height: 100px; margin: -50px 0 0 -50px; }
  .hx-orbit-core svg { width: 70px; height: 26px; }
  .hx-sec-list { grid-template-columns: 1fr; }
  .hx-flow-chip { top: 75%; max-width: 92%; padding: 6px 11px 6px 6px; gap: 8px; }
  .hx-flow-chip > i { width: 26px; height: 26px; }
  .hx-orbit-col .hx-pause-row { margin-top: 36px; }
}
/* smallest phones: there's no 40px gap between the PayHOA mark and the AWS logo, so the event label drops below the ring */
@media (max-width: 374px) {
  .hx-flow-chip { top: calc(100% + 24px); }
  .hx-orbit-col .hx-pause-row { margin-top: 80px; }
}

/* =========================================================================
   FAQ + sticky bar
   ========================================================================= */
.hx-faq-sec { padding-top: 0 !important; }
.hx-sticky { display: none; }
@media (max-width: 768px) {
  .hx-sticky { display: block; position: fixed; z-index: 90; left: 12px; right: 12px; bottom: 12px; transform: translateY(140%); transition: transform .4s var(--ease); }
  .hx-sticky.is-on { transform: none; }
  .hx-sticky .gbl-btn { width: 100%; min-height: 52px; box-shadow: 0 16px 36px -10px rgba(16, 30, 90, .55); }
  /* HubSpot's chat bubble sits in the same corner: lift it above the bar while the bar shows (not while the chat is open) */
  #hubspot-messages-iframe-container { transition: bottom .4s cubic-bezier(.2, .8, .2, 1); }
  html:not(.hs-messages-widget-open) body:has(.hx-sticky.is-on) #hubspot-messages-iframe-container { bottom: 64px !important; }
}

/* =========================================================================
   Reduced motion: no looping decoration
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .hx-play::before, .hx-orbit-core::after, .hx-live i, .hx-orbit-lines circle { animation: none !important; }
  .hx-orbit-lines line.is-hot, .hx-orbit-spin > span.is-hot img { animation: none !important; }
  .gbl-js .hx-orbit .hx-orbit-spin, .gbl-js .hx-orbit .hx-orbit-spin img { rotate: 0deg !important; opacity: 1 !important; transition: none !important; }
  .gbl-js .hx-proof.gbl-reveal-kids li { opacity: 1; transform: none; transition: none; }
  .hx-steps::after, .hx-step-n, .hx-step-vis, .hx-meter i { transition: none !important; }
  .hx-sv, .hx-sv * { transition: none !important; animation: none !important; }
}

/* =========================================================================
   Pause controls: where this page's own buttons differ from gable.css's
   ========================================================================= */
/* Homepage (marketing review, 2026-10-09): the hero and tour buttons sit after their boxes (home2.js). The strip
   under the hero gives back most of the room the hero's button takes. */
.hx-hero:has(> .gbl-wrap > .hx-pause-row) + .hx-proof { padding-top: 20px; }
.gbl .hx-pause.is-dark { order: -1; align-self: flex-start; margin: 0 0 14px; color: #fff; background: rgba(16, 30, 90, .55); border-color: rgba(255, 255, 255, .25); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.gbl .hx-pause.is-dark:hover { color: #fff; background: rgba(16, 30, 90, .75); border-color: rgba(255, 255, 255, .45); }
/* The hero's control sits above the frame, not on it, so it never covers dashboard rows. Left-aligned beside the
   copy; right-aligned once the hero stacks, clear of the Gable card that floats off the frame's top-left corner. */
.hx-hero-stage { display: flex; flex-direction: column; }
@media (max-width: 1100px) { .gbl .hx-pause.is-dark { align-self: flex-end; } }
.hx-sticky .hx-btn-meta { border-left-color: rgba(255, 255, 255, .35); }
.hx-hero-note a { color: #fff; font-weight: 600; }
.hx-hero-note a:hover { color: #dcebfd; }

/* orbit logo padding (was grouped with the final CTA rules, which now live in gable.css) */
.gbl .hx-orbit-spin img.is-lob { padding: 15px 24px; }
@media (max-width: 768px) { .gbl .hx-orbit-spin img.is-lob { padding: 11px 18px; } }

/* index2 only: the site header's Sign Up button uses the same primary blue as the page */
body.home2 li.signup-button > a { background-color: #2256d3 !important; border-color: #2256d3 !important; }
body.home2 li.signup-button > a:hover { background-color: #2246ab !important; border-color: #2246ab !important; }

/* =========================================================================
   Video modal (customer stories)
   ========================================================================= */
.hx-vm-lock, .hx-vm-lock body { overflow: hidden; }
.gbl .hx-vm { width: min(1040px, calc(100vw - 48px), max(320px, calc((100dvh - 260px) * 16 / 9))); max-width: none; max-height: none; margin: auto; padding: 0; border: 0; background: none; color: var(--ink); overflow: visible; }
.hx-vm::backdrop { background: rgba(0, 0, 0, .86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hx-vm[open] { animation: hx-vm-in .32s var(--ease); }
.hx-vm[open]::backdrop { animation: hx-vm-fade .32s ease; }
@keyframes hx-vm-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes hx-vm-fade { from { opacity: 0; } }
.hx-vm-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.hx-vm-count { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .78); }
.hx-vm-nav { display: flex; gap: 8px; }
.gbl .hx-vm-btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); transition: background .2s, border-color .2s; }
.gbl .hx-vm-btn:hover, .gbl .hx-vm-btn:focus { background: rgba(255, 255, 255, .24); border: 1px solid rgba(255, 255, 255, .4); color: #fff; }
.gbl .hx-vm-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.gbl .hx-vm-btn.is-close { margin-left: 8px; background: #fff; color: var(--ink); border-color: #fff; }
.gbl .hx-vm-btn.is-close:hover, .gbl .hx-vm-btn.is-close:focus { background: var(--pb-50); color: var(--pb-700); border-color: var(--pb-50); }
.hx-vm-btn svg { width: 20px; height: 20px; }
.hx-vm-panel { background: #0b0d12; border: 1px solid rgba(255, 255, 255, .08); border-radius: 24px; padding: 12px; box-shadow: 0 40px 80px -24px rgba(0, 0, 0, .7); }
.hx-vm-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000; }
.gbl .hx-vm-poster { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transform: scale(1.35); filter: blur(2px) brightness(.7); transition: opacity .4s; }
.hx-vm-spin { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .3); border-top-color: #fff; animation: hx-vm-spin .8s linear infinite; }
@keyframes hx-vm-spin { to { transform: rotate(360deg); } }
.hx-vm-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .3s; }
.hx-vm-frame.is-loaded iframe { opacity: 1; }
.hx-vm-frame.is-loaded .hx-vm-poster, .hx-vm-frame.is-loaded .hx-vm-spin { opacity: 0; animation: none; }
.hx-vm-cap { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 12px 8px; }
.hx-vm-quote { margin: 0 0 6px; font-size: 18px; line-height: 1.45; font-weight: 600; color: #fff; }
.hx-vm-who { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 14px; color: rgba(255, 255, 255, .62); }
.hx-vm-who strong { color: #fff; font-weight: 600; }
.gbl-home2 a.hx-more.hx-vm-link { flex: none; color: var(--pb-200); }
.gbl-home2 a.hx-more.hx-vm-link:hover { color: #fff; }
.hx-vm-link[hidden] { display: none; }
@media (max-width: 768px) {
  .gbl .hx-vm { width: calc(100vw - 24px); }
  .hx-vm-panel { border-radius: 18px; padding: 8px; }
  .hx-vm-frame { border-radius: 12px; }
  .hx-vm-cap { flex-direction: column; align-items: flex-start; gap: 12px; padding: 14px 8px 8px; }
  .hx-vm-quote { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .hx-vm[open], .hx-vm[open]::backdrop { animation: none; }
  .hx-vm-frame iframe, .gbl .hx-vm-poster { transition: none; }
}

/* =========================================================================
   Design critique follow-ups (2026-09-25)
   ========================================================================= */
/* "New" badge in the hero pill stays one word when the pill wraps on phones */
.hx-hero-pill-new { white-space: nowrap; flex: none; }

/* 1101–1280: the copy column is 500px, and the fluid H1 (47px at 1280) broke into four lines */
@media (min-width: 1101px) and (max-width: 1280px) {
  .gbl .hx-h1 { font-size: 42px; }
}

/* Phone hero mockup: the collected-total card has no corner icon, so its label doesn't need the icon's gutter.
   "Collected this month" wrapped to three lines and stretched the row, leaving the requests card half empty. */
@media (max-width: 768px) {
  .hx-stats { grid-template-columns: 1.5fr 1fr; }
  .hx-stat { padding: 12px; min-height: 0; }
  .hx-stat:not(:has(> svg)) small { padding-right: 0; }
}

/* 769–1100: the wall is two columns, so three video stories left one alone on its row. They get a row of three. */
@media (min-width: 769px) and (max-width: 1100px) {
  .hx-vids { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .hx-vids .hx-story blockquote { font-size: 18px; }
}

/* Tap targets. Arrow links get a larger hit area (a 44px-tall box) without moving anything; links inside running
   text get vertical padding, which doesn't change the line box, so each one is at least 28px tall. */
.gbl-home2 .hx-more { position: relative; }
.gbl-home2 .hx-more::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; transform: translateY(-50%); }
.hx-tour-more a:not(.hx-more), .hx-calc-fine a, .hx-hero-note a, .gbl-home2 .gbl-faq-a a { padding-block: 5px; }

/* The units slider: the input itself is 28px tall (it was the 8px track), the track is drawn inside it */
.hx-range { height: 28px; margin: -6px 0 -6px; background: transparent; border-radius: 0; }
.hx-range::-webkit-slider-runnable-track { height: 8px; border-radius: 8px; background: linear-gradient(90deg, var(--pb-600) var(--fill, 7%), #e5eaf1 var(--fill, 7%)); }
.hx-range::-webkit-slider-thumb { margin-top: -9px; }
.hx-range::-moz-range-track { height: 8px; border-radius: 8px; background: #e5eaf1; }
.hx-range::-moz-range-progress { height: 8px; border-radius: 8px; background: var(--pb-600); }
.hx-range:focus-visible { box-shadow: none; }
.hx-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--pb-100), 0 4px 12px -2px rgba(34, 86, 211, .45); }
.hx-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--pb-100), 0 4px 12px -2px rgba(34, 86, 211, .45); }

/* =========================================================================
   Homepage hero scene: smooth choreography (2026-09-30)
   Every part that comes and goes is a transition, so it also plays backwards when gable.js starts the loop over (it
   drops .is-on / .is-off / the data-add classes in one go): the floats fade out, the four new payments fold away and
   the older rows glide back up, and home2.js fades the figures back instead of counting down. Scoped to .hx-home-hero
   (the homepage scene): .hx-hero-scene, .hx-stats, .hx-pay-list and .gbl-float are shared with the Solutions and
   feature heroes, and home2.css also loads on pricing and the feature pages.
   ========================================================================= */
.hx-home-hero { --hx-out: cubic-bezier(.22, 1, .36, 1); --hx-io: cubic-bezier(.65, 0, .35, 1); --hx-bleed: 90px; }
@media (max-width: 1100px) { .hx-home-hero { --hx-bleed: 0px; } }

/* Recent Payments: each new payment unfolds at the top and pushes the older ones down. It used to switch from
   display:none, so every row under it jumped a whole row (52px) in one frame, and the newest landed mid-list. */
.gbl-js .hx-home-hero .hx-pay-list li.gbl-sx {
  max-height: 52px; overflow: hidden;
  transition: max-height .6s var(--hx-out), padding .6s var(--hx-out), border-bottom-width .6s var(--hx-out), opacity .45s ease .1s, transform .6s var(--hx-out);
}
.gbl-js .hx-home-hero .hx-pay-list li.gbl-sx:not(.is-on) {
  max-height: 0; padding-top: 0; padding-bottom: 0; border-bottom-width: 0; opacity: 0; transform: translateY(-6px);
  /* folding away (the loop starting over): fade and fold on the same even ease, so each row shrinks as it fades and
     the older rows glide back up without a gap opening in the list */
  transition: max-height .7s var(--hx-io), padding .7s var(--hx-io), border-bottom-width .7s var(--hx-io), opacity .6s var(--hx-io), transform .7s var(--hx-io);
}
.gbl-js .hx-home-hero .hx-pay-list li[data-t].gbl-sx.is-on { animation: hx-flash 1.8s ease-out .1s both; }

/* Floats rise in and fade out (they used to vanish when the loop restarted). A slow drift replaces the bob, which
   started over with every entrance and jumped back when it was removed. */
.gbl-js .hx-home-hero .gbl-float {
  opacity: 0; transform: translateY(12px) scale(.97); transform-origin: 0 50%;
  transition: opacity .35s ease, transform .45s var(--hx-out);
  animation: hx-drift 9s ease-in-out infinite;
}
.gbl-js .hx-home-hero .gbl-float.is-on {
  opacity: 1; transform: none;
  transition: opacity .5s ease, transform .8s var(--hx-out);
  animation: hx-drift 9s ease-in-out infinite;
}
.gbl-js .hx-home-hero .gbl-float.hx-float-auto { animation-delay: -4.5s; }
@keyframes hx-drift { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
/* Gable's card lands with its sparkle settling in, then one soft sheen across "Draft reminders" (both once per run) */
.gbl-js .hx-home-hero .hx-float-gable .gbl-float-ico svg { transform: scale(.55) rotate(-40deg); transition: transform .3s ease; }
.gbl-js .hx-home-hero .hx-float-gable.is-on .gbl-float-ico svg { transform: none; transition: transform .7s cubic-bezier(.34, 1.56, .64, 1) .12s; }
.hx-home-hero .hx-float-chips em { background: linear-gradient(100deg, transparent 35%, rgba(70, 69, 182, .14) 50%, transparent 65%) no-repeat -60% 0 / 250% 100%; }
.gbl-js .hx-home-hero .hx-float-gable.is-on .hx-float-chips em { animation: hx-sheen 1.2s ease-in-out 1.1s both; }
@keyframes hx-sheen { from { background-position: 160% 0; } to { background-position: -60% 0; } }
/* Where the floats sit. With the sidebar (1440 and up) both hang over it: Autopay under Gable's card (at the bottom it
   was below the fold on a 1440×900 screen and under the request toast at 1920). Without it (1101–1439) Gable's card
   stays clear of Recent Payments. Stacked (≤1100) Autopay moves to the bottom left, over the sidebar or the chart's
   month axis: on the right it covered the fourth new payment. */
@media (min-width: 1440px) { .hx-home-hero .hx-float-auto { left: -64px; top: 330px; bottom: auto; } }
@media (min-width: 1101px) and (max-width: 1439px) { .hx-home-hero .hx-float-gable { left: -64px; } }
@media (min-width: 1101px) and (max-width: 1200px) { .hx-home-hero .hx-float-gable { max-width: 262px; } }
@media (max-width: 1100px) { .hx-home-hero .hx-float-auto { left: -12px; right: auto; bottom: 14px; } }

/* The request toast drops in at the top right, over the account menu, so it never covers the payments (at the
   bottom it sat on the list on phones, collided with the Autopay card and was below the fold), and fades out. */
.hx-hero-scene.hx-home-hero .gbl-toast.hx-toast-req { top: 6px; bottom: auto; right: calc(var(--hx-bleed) + 14px); padding: 10px 12px; }
.gbl-js .hx-home-hero .gbl-toast.gbl-sx {
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .3s ease, transform .45s var(--hx-out), visibility 0s linear .45s;
}
.gbl-js .hx-home-hero .gbl-toast.gbl-sx.is-on:not(.is-off) {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .4s ease, transform .6s var(--hx-out), visibility 0s;
}
/* 769–1100: a little narrower, so it clears Gable's card on the frame's top left even at 769 */
@media (max-width: 1100px) { .hx-hero-scene.hx-home-hero .gbl-toast.hx-toast-req { width: 280px; right: 10px; } }
@media (max-width: 768px) {
  .hx-hero-scene.hx-home-hero .gbl-toast.hx-toast-req { top: 8px; left: 10px; right: 10px; bottom: auto; width: auto; }
}

/* The AI Assistant dot pops in with one ping, right before Gable's suggestion. */
.hx-home-hero .gbl-pa-pill.is-ai::after {
  content: ""; position: absolute; top: 3px; right: 3px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--pa-ai); box-shadow: 0 0 0 2px #fff; transform: scale(0); transition: transform .25s ease;
}
.hx-home-hero .gbl-pa-pill.is-ai.has-dot::after { transform: scale(1); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.hx-home-hero .gbl-pa-pill.is-ai::before {
  content: ""; position: absolute; top: 3px; right: 3px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--pa-ai); opacity: 0; pointer-events: none;
}
.hx-home-hero .gbl-pa-pill.is-ai.has-dot::before { animation: hx-ping 1s ease-out .2s; }
@keyframes hx-ping { from { opacity: .5; transform: scale(1); } to { opacity: 0; transform: scale(3.2); } }

/* Figures: home2.js eases the collected total up and keeps the percentage and October's paid bar with it. A lower
   figure (the loop starting over) fades out and back in (.is-dip). */
.hx-home-hero .hx-stat em { font-variant-numeric: tabular-nums; }
.hx-home-hero .hx-stat b, .hx-home-hero .hx-stat em { transition: opacity .2s ease, color .3s; }
.hx-home-hero .hx-stat .is-dip { opacity: 0; }
.hx-home-hero .hx-bars .hx-oct::after { transition: height .45s var(--hx-out); }
/* the collected card has no corner icon, so its label doesn't need the icon's gutter (it wrapped at 1281–1440) */
.hx-home-hero .hx-stat:not(:has(> svg)) small { padding-right: 0; }

/* Chart: the gaps shrink with the card (a fixed 14px gap left the bars 2px wide at 1281–1440; unchanged from about
   1500px up), and the year switch gives way to the title in a narrow card. */
.hx-home-hero .gbl-dash-bars, .hx-home-hero .gbl-dash-months { gap: clamp(3px, 4.6%, 14px); }
.hx-home-hero .gbl-dash-chart { container-type: inline-size; }
@container (max-width: 250px) { .hx-home-hero .gbl-dash-chart .hx-seg { display: none; } }
/* In a narrow two-column dashboard (1101–1200, or the sidebar showing at 1440) Recent Payments gets the wider
   column, so names stop cutting off. Phones stack the cards (and hide the chart), so not below 769px. */
.hx-home-hero .gbl-pa-page { container: hxdash / inline-size; }
@media (min-width: 769px) {
  @container hxdash (max-width: 440px) { .hx-home-hero .hx-dash-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
}
/* 1281–1439: the sidebar left the dashboard under 300px (at 1366 "Collected this month" took three lines and 9 of 11
   names were cut off), so it goes, as it already does at 1101–1280. 1440 and up keep it. */
@media (min-width: 1281px) and (max-width: 1439px) { .hx-home-hero .gbl-pa-side { display: none; } }

/* Pause stills everything, the floats' drift and the Live dot included */
.gbl-js .hx-home-hero.is-held .gbl-float.gbl-float, .hx-home-hero.is-held .hx-live i { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .gbl-js .hx-home-hero .gbl-float, .hx-home-hero .gbl-pa-pill.is-ai::before { animation: none !important; }
}