/* =========================================================================
   Gable AI — styles for the homepage section and the dedicated page.
   Everything is scoped under .gbl so it can't leak into Beaver Builder rows.
   Tokens are lifted from payhoa.com (Proxima Nova 400/600 per the typography guideline, #1c2737 ink, #435e86 body,
   #e2e8f1 hairlines, 40px cards) plus the Gable indigo sub-brand.
   ========================================================================= */

.gbl {
  --ink: #1c2737;
  --body: #435e86;
  --muted: #4d5a6e;
  --line: #e2e8f1;
  --line-2: #edf1f7;
  --bg: #f5f7fa;
  --card: #fff;
  --blue: #0080bf;
  --blue-2: #0070e0;
  --green: #0f9b76;
  --green-50: #e7f6f1;
  --amber: #c77700;
  --amber-50: #fff4e0;

  --g: #4645b6;
  --g-700: #34338f;
  --g-800: #262570;
  --g-900: #1a1954;
  --g-300: #9b9cd8;
  --focus: #2256d3;
  --g-200: #c8cdf2;
  --g-100: #e4ebfa;
  --g-50: #f1f4fc;

  --r-xl: 40px;
  --r-lg: 24px;
  --r-md: 16px;
  --r-sm: 12px;
  --shadow-win: 0 1px 2px rgba(28, 39, 55, .04), 0 12px 32px -8px rgba(38, 37, 112, .18), 0 32px 64px -24px rgba(38, 37, 112, .22);
  --shadow-card: 0 1px 2px rgba(28, 39, 55, .04), 0 8px 24px -12px rgba(28, 39, 55, .14);
  --ease: cubic-bezier(.2, .7, .2, 1);

  font-family: 'Proxima Nova', Verdana, Arial, sans-serif;
  color: var(--body);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.gbl *, .gbl *::before, .gbl *::after { box-sizing: border-box; }
.gbl :where(h1, h2, h3, h4, p, ul, ol, figure) { margin: 0; padding: 0; }
.gbl :where(ul, ol) { list-style: none; }
.gbl h1, .gbl h2, .gbl h3, .gbl h4 { text-wrap: balance; font-family: inherit; color: var(--ink); font-weight: 600; letter-spacing: normal; text-transform: none; }
/* No underlines on Gable links. The second selector outranks the site's body-copy link underline (.fl-post-content a);
   :hover/:focus outrank the theme's a:hover underline (base + skin CSS load after this file, so a plain `.gbl a` tie loses) */
.gbl a, .gbl a:hover, .gbl a:focus, .fl-post-content .gbl a:not([class*="button"]) { text-decoration: none; }
.gbl a:focus-visible, .gbl button:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.gbl :is(.gbl-hero-card, .gbl-trust-card) { --focus: #96c8fa; }
.gbl strong, .gbl b { font-weight: 600; }
.gbl svg { display: block; }
.gbl button {
  appearance: none; -webkit-appearance: none; background: none; border: 0; margin: 0; padding: 0;
  font: inherit; color: inherit; text-align: inherit; line-height: inherit; text-transform: none;
  letter-spacing: normal; box-shadow: none; border-radius: 0; cursor: pointer; text-shadow: none;
}
.gbl button:hover, .gbl button:focus { background: none; color: inherit; border: 0; box-shadow: none; }

/* ---------- layout primitives (mirror .fl-row paddings: 60px desktop, 20px mobile) ---------- */
.gbl-wrap { padding: 0 60px; max-width: 1545px; margin: 0 auto; }
@media (max-width: 768px) {
 .gbl-wrap { padding: 0 20px; }
}

.gbl-ico { width: 18px; height: 18px; flex: none; }
.gbl-ico-sm { width: 16px; height: 16px; }

/* ---------- type ---------- */
.gbl-h1 { font-size: 56px; line-height: 1.143; letter-spacing: 0; }
.gbl-h2 { font-size: 40px; line-height: 1.2; }
.gbl-h3 { font-size: 32px; line-height: 1.25; }
.gbl-accent { color: var(--g); }
.gbl-lead { font-size: 20px; line-height: 1.6; color: var(--body); }
.gbl-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--g);
  letter-spacing: 0;
}
@media (max-width: 992px) {
  .gbl-h1 { font-size: 48px; }
  .gbl-h2 { font-size: 32px; line-height: 1.25; }
  .gbl-h3 { font-size: 24px; line-height: 1.333; }
  .gbl-lead { font-size: 18px; line-height: 1.556; }
}
@media (max-width: 768px) {
  .gbl-h1 { font-size: 40px; line-height: 1.2; }
  .gbl-h2 { font-size: 28px; line-height: 1.286; }
  .gbl-h3 { font-size: 24px; line-height: 1.333; }
  .gbl-lead { font-size: 18px; line-height: 1.556; }
}

/* ---------- pill / badge ---------- */
.gbl-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 16px 6px 6px; border-radius: 999px;
  background: var(--g-50); color: var(--g); border: 1px solid var(--g-100);
  font-size: 16px; font-weight: 600; line-height: 1;
  transition: background .2s, border-color .2s, transform .2s var(--ease);
}
.gbl a.gbl-pill:hover { background: #fff; border-color: var(--g-200); color: var(--g); }
.gbl a.gbl-pill:hover .gbl-ico-sm { transform: translateX(2px); }
.gbl-pill .gbl-ico-sm { transition: transform .2s var(--ease); }
.gbl-pill-new {
  background: var(--g); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase; padding: 6px 9px; border-radius: 999px;
}
.gbl-pill.is-plain { padding: 8px 16px; }

/* ---------- buttons ---------- */
.gbl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 28px; border-radius: var(--r-sm);
  font-size: 16px; font-weight: 600; line-height: 1; white-space: nowrap;
  transition: background .2s, color .2s, box-shadow .2s, transform .2s var(--ease), border-color .2s;
}
.gbl-btn .gbl-ico-sm { transition: transform .2s var(--ease); }
.gbl a.gbl-btn:hover .gbl-ico-sm { transform: translateX(3px); }
.gbl a.gbl-btn-primary, .gbl a.gbl-btn-primary:visited { background: var(--g); color: #fff; box-shadow: 0 8px 20px -8px rgba(70, 69, 182, .6); }
.gbl a.gbl-btn-primary:hover { background: var(--g-700); color: #fff; }
.gbl a.gbl-btn-blue, .gbl a.gbl-btn-blue:visited { background: var(--blue-2); color: #fff; }
.gbl a.gbl-btn-blue:hover { background: #005fc0; color: #fff; }
.gbl a.gbl-btn-soft, .gbl a.gbl-btn-soft:visited { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.gbl a.gbl-btn-soft:hover { border-color: var(--g-200); color: var(--g); }
.gbl a.gbl-btn-white, .gbl a.gbl-btn-white:visited { background: #fff; color: var(--g); }
.gbl a.gbl-btn-white:hover { background: var(--g-50); color: var(--g-700); }
.gbl a.gbl-btn-glass, .gbl a.gbl-btn-glass:visited { background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .28); }
.gbl a.gbl-btn-glass:hover { background: rgba(255, 255, 255, .18); color: #fff; }
@media (max-width: 480px) {
 .gbl-btn { width: 100%; }
}

/* ---------- reveal on scroll (only when JS is running) ---------- */
.gbl-js .gbl-reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.gbl-js .gbl-reveal.is-in { opacity: 1; transform: none; }

/* =========================================================================
   Product UI mock (shared by the homepage demo and the page)
   ========================================================================= */

.gbl-panel { padding: 20px; }
.gbl-panel[hidden] { display: none; }

.gbl-chat { display: flex; flex-direction: column; gap: 12px; }

.gbl-cites { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.gbl-cite {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 8px;
  background: #fff; border: 1px solid var(--g-100); font-size: 12.5px; font-weight: 600; color: var(--g);
  line-height: 1.2;
}
.gbl-cite svg { width: 14px; height: 14px; }

.gbl-suggest { display: flex; flex-wrap: wrap; gap: 8px; }
.gbl-suggest span {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px;
  border: 1px dashed var(--g-200); color: var(--g); font-size: 13px; font-weight: 600; background: #fff;
}
.gbl-suggest span::before { content: "↳"; opacity: .6; }

.gbl-steps { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.gbl-steps li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--body); }
.gbl-check {
  width: 20px; height: 20px; border-radius: 50%; background: var(--green-50); flex: none; position: relative;
}
.gbl-check::after {
  content: ""; position: absolute; left: 7px; top: 4px; width: 5px; height: 9px;
  border: solid var(--green); border-width: 0 2px 2px 0; transform: rotate(45deg);
}

.gbl-deliver { border: 1px solid var(--line); border-radius: 16px; padding: 14px; background: #fff; box-shadow: var(--shadow-card); }
.gbl-deliver-head { display: flex; align-items: center; gap: 12px; }
.gbl-deliver-head > span:nth-child(2) { flex: 1; min-width: 0; }
.gbl-deliver-head strong { display: block; font-size: 15px; color: var(--ink); }
.gbl-deliver-head small { display: block; font-size: 12.5px; color: var(--muted); }
.gbl-file { width: 38px; height: 38px; border-radius: 10px; background: var(--g-50); color: var(--g); display: grid; place-items: center; flex: none; }
.gbl-file svg { width: 20px; height: 20px; }
.gbl-tag { font-size: 11.5px; font-weight: 600; color: var(--amber); background: var(--amber-50); padding: 4px 8px; border-radius: 6px; white-space: nowrap; }
.gbl-tag.is-green { color: var(--green); background: var(--green-50); }
.gbl-tag.is-g { color: var(--g); background: var(--g-50); }

.gbl-mini-report { margin: 14px 0; padding: 12px; border-radius: 12px; background: var(--bg); }
.gbl-mini-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gbl-mini-kpis span { display: flex; flex-direction: column; }
.gbl-mini-kpis small { font-size: 11px; color: var(--muted); }
.gbl-mini-kpis b { font-size: 15px; color: var(--ink); }
.gbl-mini-bars { display: flex; align-items: flex-end; gap: 6px; height: 54px; margin-top: 10px; }
.gbl-mini-bars i { flex: 1; height: var(--h); border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, #19b08a, var(--green)); transform-origin: bottom; }
.gbl-mini-bars i:nth-child(odd) { opacity: .45; }

.gbl-actions { display: flex; justify-content: flex-end; gap: 8px; }
.gbl-b {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px;
  font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap;
}
.gbl-b-primary { background: var(--g); color: #fff; }
.gbl-b-ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.gbl-q-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.gbl-q-ico svg { width: 18px; height: 18px; }
.gbl-q-ico.is-req { background: #fff1e6; color: #d4691c; }
.gbl-q-ico.is-txn { background: var(--green-50); color: var(--green); }
.gbl-q-ico.is-q { background: var(--g-50); color: var(--g); }

/* step-in choreography: children with .gbl-step animate when their panel .is-playing */
.gbl-js .gbl-step { opacity: 0; transform: translateY(8px); }
.gbl-js .is-playing .gbl-step { animation: gbl-step-in .5s var(--ease) forwards; animation-delay: calc(var(--d, 0) * .32s + .1s); }
.gbl-js .is-playing .gbl-mini-bars i { animation: gbl-grow .7s var(--ease) both; animation-delay: calc(1.8s + var(--i, 0) * 60ms); }
@keyframes gbl-step-in { to { opacity: 1; transform: none; } }
@keyframes gbl-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* =========================================================================
   Homepage section
   ========================================================================= */
.gbl-home { padding: 88px 0 24px; }
.gbl-head { text-align: center; max-width: 860px; margin: 0 auto 48px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.gbl-head .gbl-lead { max-width: 760px; }

.gbl-demo {
  display: grid; grid-template-columns: minmax(0, 43fr) minmax(0, 57fr);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden;
}
.gbl-demo-side { padding: 48px 40px 40px 48px; display: flex; flex-direction: column; gap: 28px; }
.gbl-modes { display: flex; flex-direction: column; gap: 4px; }
.gbl .gbl-mode {
  position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 18px; align-items: start;
  padding: 18px 18px 20px; border-radius: 20px; width: 100%; overflow: hidden;
  transition: background .3s;
}
.gbl .gbl-mode:hover { background: var(--bg); }
.gbl .gbl-mode.is-active { background: var(--g-50); }
.gbl-mode-num {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--g-50); color: var(--ink); font-weight: 600; font-size: 16px;
  transition: background .3s, color .3s, box-shadow .3s;
}
.gbl-mode.is-active .gbl-mode-num { background: var(--g); color: #fff; box-shadow: 0 6px 16px -6px rgba(70, 69, 182, .7); }
.gbl-mode-body { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; }
.gbl-mode-title { font-size: 20px; line-height: 1.4; font-weight: 600; color: var(--ink); }
.gbl-mode-text { font-size: 16px; line-height: 1.6; color: var(--body); transition: color .3s; }
.gbl-mode:not(.is-active) .gbl-mode-text { color: var(--muted); }
.gbl-mode-bar { position: absolute; left: 84px; right: 18px; bottom: 10px; height: 3px; border-radius: 3px; background: rgba(70, 69, 182, .1); opacity: 0; transition: opacity .3s; }
.gbl-mode-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--g); }
.gbl-mode.is-active .gbl-mode-bar { opacity: 1; }
.gbl-mode.is-active.is-timing .gbl-mode-bar i { animation: gbl-progress var(--gbl-dur, 8s) linear forwards; }
.gbl-demo.is-paused .gbl-mode-bar i { animation-play-state: paused !important; }
@keyframes gbl-progress { to { width: 100%; } }

.gbl-approval {
  margin-top: auto; display: flex; gap: 14px; align-items: flex-start;
  padding: 18px 20px; border-radius: 20px; background: var(--bg); border: 1px solid var(--line-2);
}
.gbl-approval p { font-size: 16px; line-height: 1.55; color: var(--ink); }
.gbl-approval-ico { width: 36px; height: 36px; border-radius: 10px; background: #fff; color: var(--green); display: grid; place-items: center; flex: none; box-shadow: var(--shadow-card); }
.gbl-approval-ico svg { width: 20px; height: 20px; }

.gbl-demo-stage {
  position: relative; padding: 48px; background: var(--g-100); display: flex; align-items: center;
  isolation: isolate; overflow: hidden;
}
.gbl-demo-stage::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 50% at 85% 10%, rgba(255, 255, 255, .75), transparent 70%),
    radial-gradient(50% 60% at 0% 100%, rgba(155, 156, 216, .35), transparent 70%);
}
.gbl-demo-stage::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: radial-gradient(rgba(70, 69, 182, .16) 1px, transparent 1px); background-size: 18px 18px;
  mask-image: radial-gradient(80% 80% at 50% 50%, transparent 40%, #000); -webkit-mask-image: radial-gradient(80% 80% at 50% 50%, transparent 40%, #000);
}
.gbl-demo-stage .gbl-panel:not([hidden]) { flex: 1; display: flex; flex-direction: column; }
.gbl-demo-stage .gbl-chat { margin-bottom: 16px; }

.gbl-home-cta { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 32px; }

@media (max-width: 1200px) {
  .gbl-demo-side { padding: 36px 28px 32px 32px; }
  .gbl-demo-stage { padding: 32px; }
}
@media (max-width: 992px) {
  .gbl-home { padding-top: 56px; }
  .gbl-demo { grid-template-columns: 1fr; }
  .gbl-demo-side { padding: 28px 24px 24px; gap: 20px; }
  .gbl-demo-stage { padding: 24px; }
}
@media (max-width: 768px) {
  .gbl-home { padding: 48px 0 8px; }
  .gbl-head { margin-bottom: 28px; gap: 16px; }
  .gbl-demo { border-radius: 28px; }
  .gbl-demo-side { padding: 20px 16px 16px; }
  .gbl .gbl-mode { grid-template-columns: 40px 1fr; gap: 14px; padding: 14px 14px 18px; border-radius: 16px; }
  .gbl-mode-num { width: 40px; height: 40px; font-size: 16px; }
  .gbl-mode-body { padding-top: 7px; }
  .gbl-mode-title { font-size: 18px; }
  .gbl-mode-text { font-size: 16px; }
  .gbl-mode-bar { left: 68px; right: 14px; }
  .gbl-approval { padding: 14px 16px; border-radius: 16px; }
  .gbl-approval p { font-size: 16px; }
  .gbl-demo-stage { padding: 16px 12px; }
  .gbl-panel { padding: 14px; }
  .gbl-q-ico { width: 30px; height: 30px; }
  .gbl-b { padding: 7px 10px; font-size: 12px; }
}

/* =========================================================================
   Header nav item (lives inside Beaver Builder's menu, not under .gbl)
   ========================================================================= */
.gable-nav-link { display: inline-flex; align-items: center; gap: 6px; }
.gable-spark { width: 16px; height: 16px; fill: #4645b6; flex: none; }
.gable-new {
  font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; line-height: 1;
  color: #fff; background: #4645b6; padding: 4px 6px; border-radius: 999px; margin-left: 2px;
}
.gable-nav-item.current-menu-item > a .menu-item-text { color: #4645b6; }

/* Narrow desktop (993–1365px; at 992 and below the header switches to the hamburger). With the Gable item the
   header menu no longer fits on one row and "Log In / Sign Up" wrapped to a second line. Tighten it in steps,
   keeping every label: even spacing, a narrower dropdown-arrow slot and logo column, then 14px text
   (the guideline's Label Small), then the decorative $ / user icons. The overlay nav is the mobile menu.
   The ranges were widened when the nav text went from 15px to the scale's 16px. */
@media (min-width: 993px) and (max-width: 1365px) {
  .fl-builder-content .fl-col.logo-column { width: 150px !important; max-width: 150px !important; }
  .payhoa-navigation .pp-menu-nav:not(.pp-menu-overlay) > .menu > li { margin-right: 4px; }
  .payhoa-navigation .pp-menu-nav:not(.pp-menu-overlay) > .menu > .pp-has-submenu > .pp-has-submenu-container > a { padding-right: 4px; }
  .payhoa-navigation .pp-menu-nav:not(.pp-menu-overlay) > .menu > .pp-has-submenu > .pp-has-submenu-container > a > .menu-item-text { padding-right: 18px; }
  .payhoa-navigation .pp-menu-nav:not(.pp-menu-overlay) > .menu > .pp-has-submenu .pp-menu-toggle { width: 18px; right: 4px; }
  .payhoa-navigation .pp-menu-nav:not(.pp-menu-overlay) > .menu > .pp-has-submenu .pp-menu-toggle:before { left: 7px; }
  .payhoa-navigation .pp-menu-nav:not(.pp-menu-overlay) > .menu > .menu-item:not(.pp-has-submenu):not(.signup-button) > a { padding-right: 12px; }
  /* last dropdown (Resources) would open past the right edge; anchor it to its item's right side */
  .payhoa-navigation .pp-menu-nav:not(.pp-menu-overlay) > .menu > .pp-has-submenu:not(.mega-menu):has(+ .right-align) > .sub-menu { left: auto !important; right: 0 !important; }
}
@media (min-width: 993px) and (max-width: 1149px) {
  .payhoa-navigation .pp-menu-nav:not(.pp-menu-overlay) > .menu > li > a,
  .payhoa-navigation .pp-menu-nav:not(.pp-menu-overlay) > .menu > li > .pp-has-submenu-container > a { font-size: 14px; }
}
/* The theme drops "Make a " from "Make a Payment" at 1200 and below (.hidden-mobile); the icons go at the same
   point, so the header has two states (icons + full labels, or compact text) instead of three. */
@media (min-width: 993px) and (max-width: 1200px) {
  .payhoa-navigation .pp-menu-nav:not(.pp-menu-overlay) > .menu > .right-align .menu-item-icon { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* iteration-count 1: an infinite loop at .01ms never ends (the sync pulse and the floating cards' bob kept running) */
  .gbl *, .gbl *::before, .gbl *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
  .gbl-js .gbl-reveal { opacity: 1; transform: none; }
  .gbl-js .gbl-step { opacity: 1; transform: none; }
}

.gbl-trust { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 40px; margin-top: 40px; }
.gbl-trust li { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: var(--ink); }
.gbl-trust svg { width: 20px; height: 20px; color: var(--g); }
@media (max-width: 768px) {
  .gbl-trust { flex-direction: column; align-items: flex-start; gap: 10px; margin: 24px 4px 0; }
  .gbl-trust li { font-size: 16px; }
}

/* =========================================================================
   Dedicated page
   ========================================================================= */
.gbl-page { background: var(--bg); }
.gbl-rot90 { transform: rotate(90deg); }
.gbl a.gbl-btn-glass:hover .gbl-rot90 { transform: rotate(90deg) translateX(3px); }

/* ---------- hero (matches the homepage hero card: 40px side gutter, 40px radius) ---------- */
.gbl-wrap-hero { padding: 0 40px; }
/* Every page's hero card sits as far below the header (or the features sub-nav) as it is from the screen edges:
   40px, 12px on phones. One rule here, so no page brings its own gap (homepage, pricing and the features sub-nav
   used to: 40 / 24 / 24, the rest 0). Full-bleed hero bands (reference posts) keep touching the header. */
.gbl > section:is(.hx-hero, .gbl-hero, .px-hero):first-of-type:not(.rs-hero-ref) > .gbl-wrap-hero { padding-top: 40px; }
.gbl-hero { padding-bottom: 20px; }
.gbl-hero-card {
  position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-xl);
  padding: 72px 48px 0; text-align: center; color: #fff;
  background: linear-gradient(180deg, #3b3aa8 0%, var(--g) 38%, #5553c4 100%);
}
.gbl-hero-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 40% at 15% 10%, rgba(255,255,255,.16), transparent 70%),
    radial-gradient(35% 45% at 90% 30%, rgba(125, 200, 255, .22), transparent 70%),
    radial-gradient(50% 40% at 50% 100%, rgba(26, 25, 84, .45), transparent 70%);
}
.gbl-hero-glow::after { content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px); background-size: 22px 22px;
  mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 80%); -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 80%);
}
.gbl-hero-copy { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.gbl-pill-dark { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.24); color: #fff; padding: 8px 16px; font-weight: 600; }
.gbl-trust-card .gbl-pill-dark { color: #fff; }
.gbl-hero .gbl-h1 { color: #fff; margin-top: 28px; }
.gbl-hero .gbl-h1 span { color: #c9ccff; }
.gbl-hero-sub { font-size: 20px; line-height: 1.6; color: rgba(255,255,255,.88); max-width: 680px; margin-top: 24px; }
.gbl-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 36px; }
.gbl-hero-note { font-size: 14px; color: rgba(255,255,255,.88); margin-top: 16px; }

.gbl-hero-scene { position: relative; max-width: 1080px; margin: 64px auto 0; }
.gbl-face { width: 34px; height: 34px; border-radius: 50%; background: #ffe7d6; color: #b55a1c; font-weight: 600; font-size: 12px; display: grid; place-items: center; flex: none; }
.gbl-skel { display: flex; flex-direction: column; gap: 8px; }
.gbl-skel i { display: block; height: 8px; border-radius: 4px; background: var(--line-2); }
.gbl-checked { display: flex; flex-direction: column; gap: 6px; }
.gbl-checked li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); font-weight: 400; }
.gbl-checked .gbl-check { width: 18px; height: 18px; }
.gbl-checked .gbl-check::after { left: 6px; top: 3px; width: 4px; height: 8px; }
.gbl-float {
  position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px;
  background: #fff; border-radius: 16px; box-shadow: 0 24px 48px -16px rgba(15, 14, 60, .45); text-align: left; color: var(--ink);
}
.gbl-float strong { display: block; font-size: 14px; }
.gbl-float small { display: block; font-size: 12.5px; color: var(--muted); }
.gbl-float-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--g-50); color: var(--g); flex: none; }
.gbl-float-ico.is-green { background: var(--green-50); color: var(--green); }
.gbl-float-ico svg { width: 20px; height: 20px; }
.gbl-float-a { right: -56px; bottom: 36px; z-index: 9; }
.gbl-float-b { left: -110px; top: 300px; z-index: 9; }
.gbl-hero-scene .gbl-pa { height: 600px; border-radius: 20px 20px 0 0; box-shadow: 0 -2px 0 8px rgba(255,255,255,.14), 0 40px 80px -20px rgba(15, 14, 60, .6); }
.gbl-ai-next-wrap { display: flex; flex-direction: column; gap: 8px; }
.gbl-js .gbl-float:not(.is-on) { opacity: 0; transform: translateY(10px); }
.gbl-js .gbl-float.is-on { animation: gbl-pop .6s var(--ease) both, gbl-bob 6s .8s ease-in-out infinite; }
@keyframes gbl-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }

@media (max-width: 1200px) {
  .gbl-float-a { right: -16px; }
  .gbl-float-b { left: -16px; top: -28px; }
}
@media (max-width: 992px) {
  .gbl-hero-card { padding: 56px 28px 0; }
  .gbl-float-b { top: -28px; left: 12px; }
  .gbl-float-a { bottom: 40px; right: 12px; }
}
@media (max-width: 768px) {
  .gbl-wrap-hero { padding: 0 12px; }
  .gbl > section:is(.hx-hero, .gbl-hero, .px-hero):first-of-type:not(.rs-hero-ref) > .gbl-wrap-hero { padding-top: 12px; }
  .gbl-hero-card { padding: 48px 20px 0; border-radius: 28px; }
  .gbl-hero-sub { font-size: 18px; }
  .gbl-hero .gbl-pill-dark { font-size: 14px; line-height: 1.3; }
  .gbl-hero-scene { margin-top: 56px; }
  .gbl-float { display: none !important; }
}

/* ---------- the four things Gable does (linked cards under the hero) ---------- */
.gbl-pillars { padding: 56px 0 16px; }
.gbl-pillar-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.gbl-pillar-list li { display: flex; }
.gbl-pillar-list a { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: 28px; color: var(--body); transition: border-color .25s, box-shadow .25s, transform .25s var(--ease); }
.gbl-pillar-list a:hover { border-color: var(--g-200); box-shadow: 0 16px 36px -24px rgba(70,69,182,.5); transform: translateY(-2px); color: var(--body); }
.gbl-pillar-top { display: flex; align-items: center; justify-content: space-between; }
.gbl-pillar-num { font-size: 14px; font-weight: 600; color: #4645bd; font-variant-numeric: tabular-nums; }
.gbl-pillar-list strong { font-size: 20px; line-height: 1.4; color: var(--ink); margin-top: 8px; }
.gbl-pillar-list a > span:not(.gbl-pillar-top) { font-size: 16px; line-height: 1.55; color: var(--body); }
.gbl-pillar-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--g-50); color: var(--g); display: grid; place-items: center; }
.gbl-pillar-ico svg { width: 22px; height: 22px; }
@media (max-width: 1100px) {
 .gbl-pillar-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
 .gbl-pillar-list { grid-template-columns: 1fr; gap: 12px; }
 .gbl-pillar-list a { padding: 22px; border-radius: 24px; }
}

/* ---------- sections ---------- */
.gbl-sec { padding: 112px 0; }
.gbl-sec-tight { padding: 40px 0; }
.gbl-sec-alt { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.gbl-sec-head { text-align: center; max-width: 880px; margin: 0 auto 56px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.gbl-sec-head .gbl-lead { max-width: 760px; }
.gbl-step-label { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: var(--g); }
.gbl-step-label span { width: 34px; height: 34px; border-radius: 50%; background: var(--g); color: #fff; display: grid; place-items: center; font-size: 14px; }
@media (max-width: 768px) {
  .gbl-sec { padding: 64px 0; }
  .gbl-sec-tight { padding: 24px 0; }
  .gbl-sec-head { margin-bottom: 32px; gap: 14px; }
}

/* ---------- why now ---------- */
.gbl-why { padding: 96px 0 40px; }
.gbl-why-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
.gbl-why-copy { display: flex; flex-direction: column; gap: 20px; }
.gbl-why-stats { display: grid; gap: 14px; }
.gbl-stat { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 20px; padding: 22px 28px; background: #fff; border: 1px solid var(--line); border-radius: 24px; }
.gbl-stat b { font-size: 40px; line-height: 1; color: var(--g); font-variant-numeric: tabular-nums; }
.gbl-stat span { font-size: 16px; line-height: 1.5; color: var(--ink); }
.gbl-source { font-size: 14px; color: var(--muted); padding: 0 8px; }
.gbl-source a { color: var(--g); }
@media (max-width: 992px) {
 .gbl-why-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 560px) {
  .gbl-why { padding: 56px 0 24px; }
  .gbl-stat { grid-template-columns: 80px 1fr; padding: 18px 20px; gap: 14px; border-radius: 20px; }
  .gbl-stat b { font-size: 32px; }
  .gbl-stat span { font-size: 16px; }
}

/* ---------- split card (the "Meet Gable" / "Every community" layouts) ---------- */
.gbl-split { display: grid; grid-template-columns: 1fr 1fr; background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; }
.gbl-split-left { padding: 64px 56px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.gbl-split-left .gbl-h2 { line-height: 1.3; }
.gbl-note { margin-top: auto; display: flex; gap: 14px; align-items: flex-start; padding: 22px 26px; background: var(--bg); border-radius: 24px; color: var(--ink); font-size: 18px; line-height: 1.55; }
.gbl-note svg { width: 24px; height: 24px; color: var(--green); flex: none; margin-top: 2px; }
.gbl-split-right { background: var(--g-100); padding: 56px 48px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.gbl-split-right > li > a { display: grid; grid-template-columns: 60px 1fr; gap: 24px; padding: 24px; border-radius: 24px; color: var(--body); transition: background .25s, transform .25s var(--ease); }
.gbl-split-right > li > a:hover { background: rgba(255,255,255,.6); color: var(--body); }
.gbl-split-right strong { display: block; font-size: 24px; line-height: 1.333; color: var(--ink); margin: 8px 0 10px; }
.gbl-split-right span > span { display: block; font-size: 16px; line-height: 1.5; }
.gbl-split-right em { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-style: normal; font-weight: 600; font-size: 16px; color: var(--g); }
.gbl-split-right a:hover em .gbl-ico-sm { transform: translateX(3px); }
.gbl-split-right em .gbl-ico-sm { transition: transform .2s var(--ease); }
.gbl-num { width: 60px; height: 60px; border-radius: 50%; background: #fff; color: var(--ink); font-weight: 600; font-size: 20px; display: grid; place-items: center; }
@media (max-width: 992px) {
  .gbl-split { grid-template-columns: 1fr; }
  .gbl-split-left { padding: 40px 32px; }
  .gbl-split-right { padding: 24px; }
}
@media (max-width: 768px) {
  .gbl-split { border-radius: 28px; }
  .gbl-split-left { padding: 32px 22px; gap: 18px; }
  .gbl-note { font-size: 16px; padding: 18px; border-radius: 18px; }
  .gbl-split-right { padding: 12px; gap: 4px; }
  .gbl-split-right > li > a { grid-template-columns: 44px 1fr; gap: 14px; padding: 18px 14px; }
  .gbl-num { width: 44px; height: 44px; font-size: 16px; }
  .gbl-split-right strong { font-size: 20px; margin: 6px 0 6px; }
  .gbl-split-right span > span { font-size: 16px; }
}

/* ---------- ask (prompt gallery) ---------- */
.gbl-ask { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: start; }
.gbl-ask-chips { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 120px; }
.gbl-ask-hint { font-size: 14px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px 4px; }
.gbl .gbl-ask-chip {
  display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 18px;
  background: #fff; border: 1px solid var(--line); font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.4;
  transition: border-color .2s, box-shadow .2s, background .2s, transform .2s var(--ease);
}
.gbl .gbl-ask-chip { align-items: flex-start; }
.gbl-ask-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--g-50); color: var(--g); transition: background .2s, color .2s; }
.gbl .gbl-ask-chip .gbl-ask-ico svg { width: 20px; height: 20px; }
.gbl .gbl-ask-chip.is-active .gbl-ask-ico { background: var(--g); color: #fff; }
.gbl .gbl-ask-chip:hover { border-color: var(--g-200); transform: translateX(2px); }
.gbl .gbl-ask-chip.is-active { border-color: var(--g); background: var(--g-50); box-shadow: 0 0 0 3px rgba(70,69,182,.12); }

.gbl-ask-stage { position: relative; padding: 40px; border-radius: var(--r-xl); background: var(--g-100); isolation: isolate; overflow: hidden; }
.gbl-ask-stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 50% at 90% 0%, rgba(255,255,255,.8), transparent 70%); }
.gbl-ask-stage .gbl-ask-out { flex: 1; }
.gbl-cite.is-on { background: var(--g); color: #fff; border-color: var(--g); }
.gbl-source-card { border: 1px solid var(--line); border-left: 3px solid var(--g); border-radius: 12px; padding: 12px 14px; background: #fff; box-shadow: var(--shadow-card); font-size: 13.5px; line-height: 1.6; color: var(--ink); max-width: 94%; }
.gbl-source-head { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.gbl-source-head svg { width: 14px; height: 14px; }
.gbl-source-card mark { background: #fff1b8; color: var(--ink); padding: 1px 2px; border-radius: 3px; }
.gbl-dim { color: var(--muted); }
.gbl-table { width: 100%; border-collapse: collapse; margin: 12px 0 0; font-size: 13px; background: #fff; border-radius: 10px; overflow: hidden; }
.gbl-table th, .gbl-table td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--line-2); }
.gbl-table th { font-size: 11.5px; font-weight: 600; color: var(--muted); background: #fafbfd; }
.gbl-table tr:last-child td { border-bottom: 0; }
.gbl-delta { font-size: 11.5px; font-weight: 600; padding: 2px 6px; border-radius: 6px; }
.gbl-delta.is-up { color: var(--green); background: var(--green-50); }
.gbl-delta.is-warn { color: var(--amber); background: var(--amber-50); }
.gbl-rows { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.gbl-rows li { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 10px; padding: 8px 12px; border-radius: 10px; background: #fff; font-size: 13.5px; }
.gbl-rows li span:nth-child(2) { color: var(--muted); }
.gbl-rows li b { color: var(--ink); }
.gbl-timeline-mini { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.gbl-timeline-mini li { position: relative; padding: 8px 12px 8px 26px; background: #fff; border-radius: 10px; font-size: 13.5px; }
.gbl-timeline-mini li::before { content: ""; position: absolute; left: 11px; top: 15px; width: 7px; height: 7px; border-radius: 50%; background: var(--g-300); }
.gbl-timeline-mini b { margin-right: 8px; }
.gbl-timeline-mini em { color: var(--green); font-style: normal; font-weight: 600; }
.gbl-progress { margin-top: 12px; background: #fff; border-radius: 10px; padding: 10px 12px; }
.gbl-progress span { display: block; height: 8px; border-radius: 4px; background: var(--line-2); position: relative; overflow: hidden; }
.gbl-progress span::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); background: linear-gradient(90deg, var(--g-300), var(--g)); border-radius: inherit; }
.gbl-progress small { display: block; font-size: 12px; color: var(--muted); margin-top: 6px; }
@media (max-width: 992px) {
  .gbl-ask { grid-template-columns: 1fr; gap: 24px; }
  .gbl-ask-chips { position: static; flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; margin: 0 -20px; padding-left: 20px; padding-right: 20px; scrollbar-width: none; }
  .gbl-ask-chips::-webkit-scrollbar { display: none; }
  .gbl-ask-hint { display: none; }
  .gbl .gbl-ask-chip { flex: 0 0 auto; max-width: 280px; scroll-snap-align: start; font-size: 16px; padding: 14px 16px; }
  .gbl-ask-stage { padding: 20px; }
}
@media (max-width: 768px) {
  .gbl-ask-stage { padding: 12px; border-radius: 24px; margin: 0 -8px; }
  .gbl-rows li { grid-template-columns: 1fr auto; }
  .gbl-rows li span:nth-child(2) { display: none; }
}

/* ---------- jobs ---------- */
.gbl-job-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.gbl .gbl-job-tab { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 20px; border: 1px solid var(--line); background: var(--bg); transition: background .2s, border-color .2s, box-shadow .2s; }
.gbl .gbl-job-tab strong { display: block; font-size: 18px; color: var(--ink); }
.gbl .gbl-job-tab small { display: block; font-size: 14px; color: var(--muted); }
.gbl .gbl-job-tab:hover { border-color: var(--g-200); }
.gbl .gbl-job-tab.is-active { background: #fff; border-color: var(--g); box-shadow: 0 0 0 3px rgba(70,69,182,.12); }
.gbl-job-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #fff; color: var(--g); flex: none; border: 1px solid var(--line); }
.gbl-job-tab.is-active .gbl-job-ico { background: var(--g); color: #fff; border-color: var(--g); }
.gbl-job-ico svg { width: 22px; height: 22px; }
.gbl-job { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line); background: #fff; }
.gbl-job[hidden] { display: none; }
.gbl-job-brief { padding: 48px 44px; display: flex; flex-direction: column; gap: 22px; }
.gbl-job-ask { font-size: 20px; line-height: 1.4; font-weight: 600; color: var(--ink); }
.gbl-job .gbl-steps { gap: 12px; }
.gbl-job .gbl-steps li { font-size: 16px; }
.gbl-job-point { margin-top: auto; display: flex; gap: 12px; align-items: flex-start; font-size: 16px; color: var(--ink); font-weight: 600; background: var(--g-50); padding: 14px 16px; border-radius: 14px; }
.gbl-job-point svg { width: 20px; height: 20px; color: var(--g); flex: none; margin-top: 1px; }
.gbl-job-work { padding: 40px; background: var(--g-100); display: flex; flex-direction: column; gap: 14px; justify-content: center; font-size: 14px; color: var(--ink); line-height: 1.5; }
.gbl-doc, .gbl-letter, .gbl-recon { background: #fff; border-radius: 18px; box-shadow: var(--shadow-win); padding: 22px; }
.gbl-doc-head { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--line-2); margin-bottom: 14px; }
.gbl-doc-head small { display: block; font-size: 12px; color: var(--muted); }
.gbl-doc-head strong { display: block; font-size: 18px; }
.gbl-doc-sec { padding: 10px 0; display: flex; flex-direction: column; gap: 8px; }
.gbl-doc-sec > b { font-size: 13px; }
.gbl-bva { display: flex; flex-direction: column; gap: 6px; }
.gbl-bva span { display: flex; align-items: center; gap: 10px; }
.gbl-bva i { display: block; height: 10px; width: var(--w); max-width: 75%; border-radius: 5px; background: linear-gradient(90deg, #19b08a, var(--green)); }
.gbl-bva i.is-g { background: linear-gradient(90deg, var(--g-300), var(--g)); }
.gbl-bva small { font-size: 12px; color: var(--muted); white-space: nowrap; }
.gbl-approve-row { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 14px; padding: 10px 10px 10px 16px; box-shadow: var(--shadow-card); }
.gbl-approve-row > span:first-child { margin-right: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.gbl-approve-row > span:first-child svg { color: var(--green); }
.gbl-recips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--line-2); margin-bottom: 12px; }
.gbl-recips small { color: var(--muted); font-size: 12px; margin-right: 4px; }
.gbl-recips span { font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: var(--g-50); color: var(--g); }
.gbl-letter p { color: var(--body); margin-bottom: 12px; }
.gbl-letter .gbl-letter-sub { color: var(--ink); font-size: 16px; margin-bottom: 8px; }
.gbl-recon-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.gbl-recon-top small { display: block; font-size: 12px; color: var(--muted); }
.gbl-recon-top b { font-size: 22px; font-variant-numeric: tabular-nums; }
.gbl-recon-eq { font-size: 22px; color: var(--muted); }
.gbl-recon-top .gbl-tag { margin-left: auto; }
.gbl-recon-bar { height: 8px; border-radius: 4px; background: var(--line-2); margin-top: 18px; overflow: hidden; }
.gbl-recon-bar i { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, #19b08a, var(--green)); border-radius: inherit; }
.gbl-recon-cap { display: block; font-size: 12px; color: var(--muted); margin-top: 6px; }
.gbl-flags { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.gbl-flags li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.gbl-flags strong { display: block; font-size: 14px; }
.gbl-flags small { display: block; font-size: 12.5px; color: var(--muted); }
@media (max-width: 992px) {
  .gbl-job { grid-template-columns: 1fr; }
  .gbl-job-brief { padding: 32px 28px; }
  .gbl-job-work { padding: 24px; }
}
@media (max-width: 768px) {
  .gbl-job-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .gbl .gbl-job-tab { gap: 10px; padding: 12px; border-radius: 16px; }
  .gbl .gbl-job-tab strong { font-size: 14px; line-height: 1.25; }
  .gbl .gbl-job-tab small { display: none; }
  .gbl-job-ico { width: 38px; height: 38px; }
  .gbl-job { border-radius: 28px; }
  .gbl-job-brief { padding: 26px 20px; gap: 16px; }
  .gbl-job-ask { font-size: 18px; }
  .gbl-job .gbl-steps li { font-size: 16px; align-items: flex-start; }
  .gbl-job-work { padding: 14px; }
  .gbl-doc, .gbl-letter, .gbl-recon { padding: 16px; border-radius: 14px; }
  .gbl-approve-row { flex-wrap: wrap; }
  .gbl-approve-row > span:first-child { width: 100%; }
  .gbl-recon-top b { font-size: 18px; }
}

/* ---------- timeline (Builders page) ---------- */
.gbl-tl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; position: relative; --gbl-tl: 0%; }
.gbl-tl::before, .gbl-tl::after { content: ""; position: absolute; left: 48px; right: 48px; bottom: 49px; height: 2px; border-radius: 2px; }
.gbl-tl::before { background: var(--line); }
.gbl-tl::after { background: linear-gradient(90deg, var(--g-300), var(--g)); width: calc((100% - 96px) * var(--gbl-tl) / 100%); right: auto; transition: width .7s var(--ease); }
.gbl-tl-step { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; padding: 32px 30px 30px; background: #fff; border: 1px solid var(--line); border-radius: 28px; min-height: 480px; transition: border-color .4s, box-shadow .4s, transform .4s var(--ease); }
.gbl-tl-step.is-on { border-color: var(--g-200); box-shadow: 0 16px 36px -24px rgba(70,69,182,.55); }
.gbl-tl-time { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--g); background: var(--g-50); padding: 5px 10px; border-radius: 999px; align-self: flex-start; }
.gbl-tl-time svg { width: 14px; height: 14px; }
.gbl-tl-time.is-day { color: #a1430b; background: var(--amber-50); }
.gbl-tl-step h3 { font-size: 24px; line-height: 1.333; margin-top: 6px; }
.gbl-tl-step > p { font-size: 16px; line-height: 1.5; color: var(--body); }
.gbl-tl-vis { margin-top: 16px; font-size: 13px; color: var(--ink); opacity: .35; filter: saturate(.3); transform: translateY(6px); transition: opacity .5s, filter .5s, transform .5s var(--ease); }
.gbl-tl-step.is-on .gbl-tl-vis { opacity: 1; filter: none; transform: none; }
.gbl-tl-num { margin-top: auto; width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 18px; box-shadow: 0 0 0 6px #fff; transition: background .4s; }
.gbl-tl-step.is-on .gbl-tl-num { background: var(--g); }
.gbl-mini-card { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.gbl-mini-card strong { display: block; font-size: 13px; }
.gbl-mini-card small { display: block; font-size: 12px; color: var(--muted); }
.gbl-no-js .gbl-tl-vis, .gbl:not(.gbl-js) .gbl-tl-vis { opacity: 1; filter: none; transform: none; }
@media (max-width: 1200px) {
 .gbl-tl-step { padding: 26px 22px; }
 .gbl-tl-step h3 { font-size: 20px; }
}
@media (max-width: 992px) {
  .gbl-tl { grid-template-columns: repeat(2, 1fr); }
  .gbl-tl::before, .gbl-tl::after { display: none; }
  .gbl-tl-step { min-height: 0; }
  .gbl-tl-num { position: absolute; top: 24px; right: 24px; width: 40px; height: 40px; font-size: 16px; margin: 0; box-shadow: none; }
}
@media (max-width: 768px) {
  .gbl-tl { grid-template-columns: 1fr; gap: 12px; }
  .gbl-tl-step { padding: 22px 20px; border-radius: 22px; }
  .gbl-tl-step h3 { font-size: 20px; padding-right: 48px; }
  .gbl-tl-step > p { font-size: 16px; }
  .gbl-tl-vis { margin-top: 8px; }
}

/* ---------- customize ---------- */
.gbl-split-custom .gbl-split-left { gap: 20px; }
.gbl-split-custom .gbl-h2 { max-width: 560px; }
.gbl-cust-stage { width: 100%; margin-top: 16px; }
.gbl-cust-panel { padding: 0; }
.gbl-rules { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.gbl-rules li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--bg); font-size: 14.5px; color: var(--ink); }
.gbl-rules li > span { width: 22px; height: 22px; border-radius: 6px; background: var(--g-50); color: var(--g); display: grid; place-items: center; font-size: 12px; font-weight: 600; flex: none; }
.gbl-rules li > span svg { width: 14px; height: 14px; }
.gbl-rules .gbl-rule-new { background: #fff; border: 1px dashed var(--line); color: var(--muted); }
.gbl-skills { padding: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gbl-skill { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: #fff; }
.gbl-skill svg { width: 22px; height: 22px; color: var(--g); margin-bottom: 6px; }
.gbl-skill strong { font-size: 14.5px; color: var(--ink); line-height: 1.3; }
.gbl-skill small { font-size: 12px; color: var(--muted); }
.gbl-skill.is-custom { background: var(--g-50); border-color: var(--g-100); }
.gbl-skill.is-custom small { color: var(--g); font-weight: 600; }
.gbl-flow { padding: 18px; display: flex; flex-direction: column; gap: 22px; position: relative; }
.gbl-flow::before { content: ""; position: absolute; left: 39px; top: 40px; bottom: 40px; width: 2px; background: repeating-linear-gradient(180deg, var(--g-200) 0 5px, transparent 5px 10px); }
.gbl-flow-node { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: #fff; }
.gbl-flow-node small { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.gbl-flow-node strong { display: block; font-size: 14.5px; color: var(--ink); }
.gbl-flow-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--g-50); color: var(--g); flex: none; }
.gbl-flow-ico.is-green { background: var(--green-50); color: var(--green); }
.gbl-flow-ico svg { width: 18px; height: 18px; }
.gbl-split-custom .gbl-split-right { gap: 8px; }
.gbl .gbl-cust-tab { display: grid; grid-template-columns: 64px 1fr; gap: 24px; padding: 26px 24px; border-radius: 24px; color: var(--body); transition: background .25s; width: 100%; }
.gbl .gbl-cust-tab:hover { background: rgba(255,255,255,.5); }
.gbl .gbl-cust-tab.is-active { background: #fff; box-shadow: 0 12px 30px -18px rgba(38,37,112,.35); }
.gbl-cust-tab strong { display: block; font-size: 24px; line-height: 1.333; color: var(--ink); margin: 10px 0 10px; }
.gbl-cust-tab span > span { display: block; font-size: 16px; line-height: 1.5; }
.gbl-cust-ico { width: 64px; height: 64px; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; transition: background .25s, color .25s; }
.gbl-cust-tab.is-active .gbl-cust-ico { background: var(--g); color: #fff; }
.gbl-cust-ico svg { width: 26px; height: 26px; }
@media (max-width: 992px) {
  .gbl-split-custom { display: flex; flex-direction: column; }
  .gbl-split-custom .gbl-split-right { order: 2; }
  .gbl-split-custom .gbl-split-left { order: 1; }
}
@media (max-width: 768px) {
  .gbl .gbl-cust-tab { grid-template-columns: 44px 1fr; gap: 14px; padding: 18px 14px; border-radius: 18px; }
  .gbl-cust-ico { width: 44px; height: 44px; }
  .gbl-cust-ico svg { width: 20px; height: 20px; }
  .gbl-cust-tab strong { font-size: 20px; margin: 8px 0 6px; }
  .gbl-cust-tab span > span { font-size: 16px; }
  .gbl-skills { grid-template-columns: 1fr; }
}

/* ---------- who ---------- */
.gbl-who { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.gbl-who-card { padding: 48px; border-radius: var(--r-xl); background: var(--bg); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.gbl-who-card.is-g { background: var(--g-50); border-color: var(--g-100); }
.gbl-who-ico { width: 56px; height: 56px; border-radius: 16px; background: #fff; color: var(--g); display: grid; place-items: center; box-shadow: var(--shadow-card); }
.gbl-who-ico svg { width: 28px; height: 28px; }
.gbl-who-kicker { font-size: 14px; font-weight: 600; color: var(--g); text-transform: uppercase; letter-spacing: .05em; margin-top: 8px; }
.gbl-who-card > p { font-size: 18px; color: var(--body); }
.gbl-ticks { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.gbl-ticks li { position: relative; padding-left: 34px; font-size: 16px; line-height: 1.5; color: var(--ink); font-weight: 400; }
.gbl-ticks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--g-200); }
.gbl-ticks li::after { content: ""; position: absolute; left: 8px; top: 7px; width: 5px; height: 9px; border: solid var(--g); border-width: 0 2px 2px 0; transform: rotate(45deg); }
@media (max-width: 992px) {
 .gbl-who { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
 .gbl-who-card { padding: 28px 22px; border-radius: 28px; }
 .gbl-who-card > p, .gbl-ticks li { font-size: 16px; }
}

/* ---------- trust ---------- */
.gbl-trust-card { position: relative; overflow: hidden; isolation: isolate; background: var(--ink); color: #c9d3e3; border-radius: var(--r-xl); padding: 80px 64px; }
.gbl-trust-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 60% at 100% 0%, rgba(70,69,182,.55), transparent 70%), radial-gradient(40% 50% at 0% 100%, rgba(0,128,191,.25), transparent 70%); }
.gbl-trust-head { text-align: center; max-width: 760px; margin: 0 auto 56px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.gbl-trust-card .gbl-h2 { color: #fff; }
.gbl-trust-card .gbl-lead { color: #c9d3e3; }
.gbl-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.gbl-trust-grid li { padding: 28px; border-radius: 24px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); display: flex; flex-direction: column; gap: 10px; }
.gbl-trust-grid li > span { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(155,156,216,.18); color: #c9ccff; margin-bottom: 6px; }
.gbl-trust-grid li > span svg { width: 22px; height: 22px; }
.gbl-trust-grid strong { color: #fff; font-size: 20px; line-height: 1.4; }
.gbl-trust-grid p { font-size: 16px; line-height: 1.55; }
@media (max-width: 1100px) {
 .gbl-trust-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .gbl-trust-card { padding: 48px 20px; border-radius: 28px; }
  .gbl-trust-head { margin-bottom: 32px; }
  .gbl-trust-grid { grid-template-columns: 1fr; }
  .gbl-trust-grid li { padding: 22px; }
}

/* ---------- proof ---------- */
.gbl-proof { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: 48px; display: grid; grid-template-columns: 1fr 1.6fr; gap: 40px; align-items: center; }
.gbl-proof-title { font-size: 32px; line-height: 1.25; }
.gbl-proof-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.gbl-proof-list li { display: flex; flex-direction: column; gap: 4px; padding: 20px; border-radius: 20px; background: var(--bg); }
.gbl-proof-list b { font-size: 32px; line-height: 1.1; color: var(--ink); }
.gbl-stars { color: #f5b301; letter-spacing: 2px; font-size: 16px; }
.gbl-stars.is-plain { letter-spacing: 0; }
.gbl-proof-list small { font-size: 14px; color: var(--body); line-height: 1.4; }
@media (max-width: 1100px) {
 .gbl-proof { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .gbl-proof { padding: 28px 20px; border-radius: 28px; gap: 24px; }
  .gbl-proof-title { font-size: 24px; }
  .gbl-proof-list { grid-template-columns: 1fr 1fr; }
}

/* ---------- faq ---------- */
.gbl-faq { display: grid; grid-template-columns: 1fr 2fr; gap: 56px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: 64px 56px; }
.gbl-faq-side { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.gbl-faq-side p { font-size: 18px; }
.gbl-faq-list { display: flex; flex-direction: column; gap: 12px; }
.gbl-faq-item { border: 1px solid var(--line); border-radius: 18px; background: #fff; transition: border-color .2s, background .2s; }
.gbl-faq-item.is-open { border-color: var(--g-200); background: #fcfcff; }
/* position: the open answer overlaps the question's bottom (the -6px below, plus the clip box's 12px reach), so the
   question is positioned to stay on top for clicks over its whole box; its background is none, so the answer shows through */
.gbl .gbl-faq-q { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 22px 24px; font-size: 18px; font-weight: 600; color: var(--ink); line-height: 1.4; }
.gbl-faq-q i { position: relative; width: 28px; height: 28px; border-radius: 50%; background: var(--g-50); flex: none; transition: transform .3s var(--ease), background .3s; }
.gbl-faq-q i::before, .gbl-faq-q i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--g); border-radius: 2px; transform: translate(-50%, -50%); }
.gbl-faq-q i::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .3s var(--ease); }
.gbl-faq-item.is-open .gbl-faq-q i { background: var(--g); }
.gbl-faq-item.is-open .gbl-faq-q i::before, .gbl-faq-item.is-open .gbl-faq-q i::after { background: #fff; }
.gbl-faq-item.is-open .gbl-faq-q i::after { transform: translate(-50%, -50%) rotate(0deg); }
/* a closed answer is 0fr tall but would stay in the tab order, so a link inside it took focus unseen (WCAG 2.4.7):
   hidden once it has folded, shown at once when it opens */
.gbl-faq-a { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .35s var(--ease), margin-top .35s var(--ease), visibility 0s linear .35s; }
/* the clip box reaches 12px above the text (padding, taken back by the margin, so text and height don't move): a
   link on the first line keeps the top of its focus ring (5px link padding + 3px offset + 3px outline) */
.gbl-faq-a > div { overflow: hidden; min-height: 0; padding-top: 12px; margin-top: -12px; }
/* open: the answer sits 6px closer to its question (Dima) */
.gbl-faq-item.is-open .gbl-faq-a { grid-template-rows: 1fr; margin-top: -6px; visibility: visible; transition-delay: 0s; }
/* reduced motion: the answer opens, folds and hides at once (the .gbl * rule above only shortens durations, so the
   .35s visibility delay would outlast the fold) */
@media (prefers-reduced-motion: reduce) { .gbl-faq-a { transition: none !important; } }
.gbl-faq-a p { padding: 0 24px 22px; font-size: 16px; line-height: 1.6; color: var(--ink); }
/* positioned too, and later than the question, so a first-line link keeps its own box where it reaches up into the
   question's (link padding + the 6px pull-up): clicking the visible link follows it instead of folding the item */
.gbl-faq-a a { position: relative; color: var(--g); }
@media (max-width: 992px) {
 .gbl-faq { grid-template-columns: 1fr; gap: 28px; padding: 40px 32px; }
}
@media (max-width: 768px) {
  .gbl-faq { padding: 28px 16px; border-radius: 28px; }
  .gbl-faq-side { padding: 0 6px; }
  .gbl .gbl-faq-q { font-size: 16px; padding: 18px; }
  .gbl-faq-a p { padding: 0 18px 18px; font-size: 16px; }
}

@media (max-width: 400px) {
 .gbl .gbl-aud button svg { display: none; }
 .gbl .gbl-aud button { font-size: 14px; }
}

/* =========================================================================
   PayHOA app replica — mirrors the real product UI (sidebar, top pills,
   Gable drawer, AI cards) for the scripted demos. Fictional data only.
   ========================================================================= */
.gbl {
  --pa-blue: #2a6be6;
  --pa-blue-50: #eaf1fd;
  --pa-bg: #f4f6f9;
  --pa-ink: #1f2733;
  --pa-text: #4a5566;
  --pa-mute: #7b8494;
  --pa-line: #e4e7ec;
  --pa-ai: #4a55d4;
  --pa-ai-line: #a3acf0;
  --pa-ai-bg: #f6f7ff;
}

/* ---------- scene engine states ---------- */
.gbl-js [data-gbl-scene] [data-t]:not(.gbl-sx):not(.is-on) { display: none !important; }
.gbl-js [data-gbl-scene] [data-t]:not(.gbl-sx).is-on { animation: gbl-pop .45s var(--ease) both; }
.gbl-js [data-gbl-scene] .is-off:not(.gbl-sx):not(.gbl-fold) { display: none !important; }
.gbl-js [data-gbl-scene] .gbl-fold.gbl-fold.is-off.is-off { animation: gbl-fold .5s var(--ease) forwards; overflow: hidden; }
.gbl-js [data-gbl-scene] .gbl-w { opacity: 0; transition: opacity .25s; }
.gbl-js [data-gbl-scene] .gbl-w.v { opacity: 1; }
.gbl-js [data-gbl-scene] .gbl-mini-bars i { animation-delay: calc(.35s + var(--i, 0) * 60ms); }
@keyframes gbl-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes gbl-fold { from { max-height: 64px; opacity: 1; } to { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; border-width: 0; } }
@keyframes gbl-spin { to { transform: rotate(360deg); } }
@keyframes gbl-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }

.gbl [data-gbl-scene] { position: relative; }
.gbl .gbl-cur {
  position: absolute; left: 0; top: 0; z-index: 30; width: 22px; height: 22px; pointer-events: none;
  /* the arrow's tip is at (4.6px, 2.3px) in the 22px art: pull it onto the anchor point so it clicks where it's aimed */
  margin: -2.3px 0 0 -4.6px;
  opacity: 0; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25));
}
.gbl .gbl-cur svg { width: 22px; height: 22px; transition: transform .15s; transform-origin: 4.6px 2.3px; }
.gbl .gbl-cur.is-on { opacity: 1; }
.gbl .gbl-cur.is-down svg { transform: scale(.86); }
/* ripple centred on the tip; its own class so the press (240ms) doesn't cut the ripple (500ms) short */
.gbl .gbl-cur::before {
  content: ""; position: absolute; left: -6.4px; top: -8.7px; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(42, 107, 230, .35); transform: scale(0); opacity: 0;
}
.gbl .gbl-cur.is-click::before { animation: gbl-ripple .5s ease-out; }
@keyframes gbl-ripple { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
.gbl .is-pressed { transform: scale(.95); filter: brightness(.95); transition: transform .12s, filter .12s; }

/* ---------- app frame ---------- */
.gbl-pa {
  display: flex; background: var(--pa-bg); color: var(--pa-ink); text-align: left; overflow: hidden;
  font-size: 13px; line-height: 1.45; border-radius: 16px; box-shadow: var(--shadow-win); height: 620px;
}
.gbl-pa svg { flex: none; }
.gbl-pa-side { width: 196px; flex: none; padding: 18px 10px 18px 14px; display: flex; flex-direction: column; overflow: hidden; }
.gbl-pa-logo { width: 90px; height: 34px; overflow: visible; }
.gbl-pa-side .gbl-pa-logo { margin: 0 0 22px 4px; }
.gbl-pa-nav { display: flex; align-items: center; gap: 10px; padding: 6px 6px; font-size: 13.5px; color: var(--pa-text); white-space: nowrap; }
.gbl-pa-nav svg { width: 17px; height: 17px; color: #5b6576; }
.gbl-pa-nav.is-on { color: var(--pa-blue); font-weight: 600; }
.gbl-pa-nav.is-on svg { color: var(--pa-blue); }
.gbl-pa-nav.is-dot { position: relative; }
.gbl-pa-nav.is-dot::after { content: ""; position: absolute; left: 17px; top: 15px; width: 7px; height: 7px; border-radius: 50%; background: #e5364b; box-shadow: 0 0 0 2px var(--pa-bg); }
.gbl-pa-gap { height: 12px; flex: none; }
.gbl-pa-body { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.gbl-pa-top { display: flex; align-items: center; gap: 8px; padding: 14px 18px 10px; }
.gbl-pa-circ { width: 34px; height: 34px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 1px 3px rgba(20, 30, 50, .1); flex: none; color: var(--pa-ink); }
.gbl-pa-circ svg { width: 16px; height: 16px; }
.gbl-pa-pill { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(20, 30, 50, .1); font-weight: 600; font-size: 13px; color: var(--pa-ink); white-space: nowrap; transition: box-shadow .25s, background .25s; }
.gbl-pa-pill svg { width: 15px; height: 15px; }
.gbl-pa-pill .gbl-pa-star { width: 14px; height: 14px; color: var(--pa-mute); }
.gbl-pa-pill.is-ai { position: relative; }
.gbl-pa-pill.is-ai.has-dot::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; }
.gbl-pa-acct { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; color: var(--pa-text); white-space: nowrap; font-size: 13px; }
.gbl-pa-acct > svg { width: 16px; height: 16px; }
.gbl-pa-chev { width: 14px !important; height: 14px !important; }
.gbl-pa-page { flex: 1; min-height: 0; overflow: hidden; padding: 6px 18px 18px; }
.gbl-pa-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 14px; }
.gbl-pa-h strong { font-size: 20px; font-weight: 600; color: var(--pa-ink); }
.gbl-pa-card { background: #fff; border-radius: 14px; box-shadow: 0 1px 3px rgba(20, 30, 50, .06); }
.gbl-pa-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px; background: #fff; border: 1px solid var(--pa-line); font-weight: 600; font-size: 12.5px; color: var(--pa-ink); white-space: nowrap; box-shadow: 0 1px 2px rgba(20, 30, 50, .05); }
.gbl-pa-btn svg { width: 14px; height: 14px; }
.gbl-pa-btn.is-blue { background: var(--pa-blue); border-color: var(--pa-blue); color: #fff; }

/* dashboard (sits behind the drawer) */
.gbl-dash-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.gbl-dash-stat { padding: 12px 14px; position: relative; min-height: 84px; display: flex; flex-direction: column; justify-content: space-between; }
.gbl-dash-stat small { font-size: 12px; font-weight: 600; color: var(--pa-text); line-height: 1.3; padding-right: 26px; }
.gbl-dash-stat b { font-size: 18px; font-weight: 600; }
.gbl-dash-stat svg { position: absolute; right: 12px; bottom: 12px; width: 24px; height: 24px; color: #cfd4dc; }
.gbl-dash-chart { padding: 14px 16px; }
.gbl-dash-chart .gbl-pa-h { margin: 0 0 10px; }
.gbl-dash-chart .gbl-pa-h strong { font-size: 15px; }
.gbl-dash-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--pa-text); margin-bottom: 12px; }
.gbl-dash-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.gbl-dash-legend i { width: 8px; height: 8px; border-radius: 50%; background: #d3d8e0; }
.gbl-dash-legend i.is-g { background: #0f9b76; }
.gbl-dash-bars { display: flex; align-items: flex-end; gap: 14px; height: 170px; padding: 0 4px; border-bottom: 1px solid var(--pa-line); background: repeating-linear-gradient(180deg, transparent 0 41px, #eef0f4 41px 42px); }
.gbl-dash-bars i { flex: 1; height: var(--a); background: #d7dce4; border-radius: 2px 2px 0 0; position: relative; max-width: 22px; }
.gbl-dash-bars i::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--b); background: #0f9b76; }
.gbl-dash-months { display: flex; gap: 14px; padding: 6px 4px 0; font-size: 11px; color: var(--pa-mute); }
.gbl-dash-months span { flex: 1; max-width: 22px; text-align: center; }

/* ---------- Gable drawer ---------- */
.gbl-dr { display: flex; flex-direction: column; background: #fff; min-height: 0; }
.gbl-pa .gbl-dr {
  position: absolute; top: 0; right: 0; bottom: 0; width: 430px; max-width: 100%; z-index: 5;
  border-left: 1px solid var(--pa-line); box-shadow: -18px 0 40px -24px rgba(20, 30, 50, .35);
}
.gbl-pa .gbl-dr.gbl-sx { transform: translateX(105%); transition: transform .6s cubic-bezier(.3, .8, .2, 1); }
.gbl-pa .gbl-dr.gbl-sx.is-on { transform: none; }
.gbl-dr-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--pa-line); flex: none; }
.gbl-dr-title { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14.5px; color: var(--pa-ink); }
.gbl-dr-title svg { width: 14px; height: 14px; color: var(--pa-text); }
.gbl-dr-icons { display: inline-flex; gap: 14px; color: var(--pa-text); }
.gbl-dr-icons svg { width: 17px; height: 17px; }
.gbl-dr-thread { flex: 1; min-height: 0; overflow: hidden; padding: 20px 18px 8px; display: flex; flex-direction: column; gap: 12px; }
.gbl-dr-thread > * { flex: none; }
.gbl-dr-comp { flex: none; padding: 8px 14px 10px; }
.gbl-comp { border: 1px solid var(--pa-line); border-radius: 14px; padding: 12px 12px 10px 14px; box-shadow: 0 2px 10px -4px rgba(20, 30, 50, .12); background: #fff; }
.gbl-comp-line { min-height: 20px; font-size: 13.5px; color: var(--pa-ink); line-height: 20px; }
.gbl-comp-txt::after { content: ""; display: inline-block; width: 1.5px; height: 15px; background: var(--pa-ink); margin-left: 1px; vertical-align: -2px; animation: gbl-caret 1s steps(1) infinite; }
@keyframes gbl-caret { 50% { opacity: 0; } }
.gbl-comp-ph { color: #9aa2b1; }
.gbl-comp-txt.is-on:not(.is-off) + .gbl-comp-ph { display: none; }
.gbl-comp-row { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.gbl-comp-row > span { display: inline-flex; gap: 8px; }
.gbl-comp-b { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #f2f4f7; color: var(--pa-text); transition: background .25s, color .25s; }
.gbl-comp-b svg { width: 15px; height: 15px; }
.gbl-comp:has(.gbl-comp-txt.is-on:not(.is-off)) .gbl-comp-b.is-send { background: var(--pa-blue); color: #fff; }
.gbl-dr-foot { text-align: center; font-size: 11px; color: var(--pa-mute); margin-top: 8px; }

.gbl-greet { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.gbl-greet-ico { width: 40px; height: 40px; border-radius: 50%; background: #f1f2f6; color: var(--pa-ai); display: grid; place-items: center; }
.gbl-greet-ico svg { width: 20px; height: 20px; }
/* mockup screen titles are plain text, not page headings (SEO S11, O-10), with the metrics of the h4 / h6 they
   replaced: the theme's heading line-heights (h4 1.333, h6 1.556; 1.4 / 1.5 at ≤ 992 px, tools/wp/apply-type-scale.php) */
.gbl .gbl-greet .gbl-greet-h { font-size: 18px; font-weight: 600; line-height: 1.333; color: var(--pa-ink); margin: 4px 0 0; text-wrap: balance; }
@media (max-width: 992px) { .gbl .gbl-greet .gbl-greet-h { line-height: 1.4; } }
.gbl-greet p { font-size: 13.5px; line-height: 1.6; color: var(--pa-text); }
.gbl-greet small { font-size: 12.5px; font-weight: 600; color: var(--pa-text); margin-top: 8px; }
.gbl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gbl-chips span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 8px; border: 1px solid var(--pa-line); font-size: 12.5px; color: var(--pa-ink); background: #fff; white-space: nowrap; }
.gbl-chips span::before { content: "↳"; color: var(--pa-text); }

.gbl-u { align-self: flex-end; max-width: 86%; background: #f1f3f7; color: var(--pa-ink); padding: 9px 13px; border-radius: 14px 14px 4px 14px; font-size: 13.5px; }
.gbl-status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; align-self: flex-start;
  background: linear-gradient(90deg, #8b93a3 0%, #8b93a3 40%, #d3d7e0 50%, #8b93a3 60%, #8b93a3 100%); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: gbl-shimmer 1.6s linear infinite; }
.gbl-status svg { width: 16px; height: 16px; color: var(--pa-ai); animation: gbl-spin 2.4s linear infinite; }
.gbl-checked-line { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--pa-mute); font-weight: 600; align-self: flex-start; }
.gbl-checked-line .gbl-check { width: 18px; height: 18px; }
.gbl-checked-line .gbl-check::after { left: 6px; top: 3px; width: 4px; height: 8px; }
.gbl-a { font-size: 13.5px; line-height: 1.6; color: var(--pa-ink); align-self: stretch; }
.gbl-a > p + * { margin-top: 10px; }
.gbl-a strong { font-weight: 600; }
.gbl-dr .gbl-cites { margin-top: 10px; }
.gbl-dr .gbl-cite { border-color: #dfe3fb; color: var(--pa-ai); background: var(--pa-ai-bg); border-radius: 6px; font-size: 12px; }
.gbl-dr .gbl-cite.is-hl, .gbl-dr .gbl-cite.is-hover { background: var(--pa-ai); border-color: var(--pa-ai); color: #fff; }
.gbl-dr .gbl-source-card { max-width: 100%; border-left-color: var(--pa-ai); }
.gbl-js [data-gbl-scene] .gbl-source-card.is-on mark { background: linear-gradient(90deg, #fff1b8 50%, transparent 50%) 100% 0 / 200% 100% no-repeat; animation: gbl-mark .9s .35s var(--ease) forwards; }
@keyframes gbl-mark { to { background-position: 0 0; } }
.gbl-dr .gbl-suggest span { border: 1px solid var(--pa-line); border-radius: 8px; color: var(--pa-ink); font-weight: 400; font-size: 12.5px; }
.gbl-dr .gbl-suggest span::before { color: var(--pa-text); opacity: 1; }

/* plan / working card */
.gbl-plan { border: 1px solid var(--pa-line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.gbl-plan-h { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 12.5px; color: var(--pa-ink); }
.gbl-plan-h svg { width: 15px; height: 15px; color: var(--pa-ai); }
.gbl-plan li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--pa-text); }
.gbl-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #e2e5f6; border-top-color: var(--pa-ai); animation: gbl-spin .8s linear infinite; flex: none; }
.gbl-plan li:has(.gbl-plan-ok.is-on) .gbl-spin { display: none; }
.gbl-plan-ok { width: 18px; height: 18px; }
.gbl-plan-ok::after { left: 6px !important; top: 3px !important; width: 4px !important; height: 8px !important; }
.gbl-dr .gbl-deliver { box-shadow: none; border-color: var(--pa-line); }
.gbl-dr .gbl-b-primary, .gbl-pa .gbl-b-primary { background: var(--pa-blue); }
.gbl-b-done { background: var(--green-50); color: var(--green); }
.gbl-b-done svg { width: 14px; height: 14px; }

/* ---------- transactions (Autopilot) ---------- */
.gbl-tx .gbl-pa-h { margin-bottom: 12px; }
.gbl-ai-banner {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--pa-ai-line); background: var(--pa-ai-bg); margin-bottom: 12px;
}
.gbl-ai-banner > svg { width: 18px; height: 18px; color: var(--pa-ai); align-self: flex-start; margin-top: 1px; }
.gbl-ai-banner strong { display: block; font-size: 13.5px; font-weight: 600; color: var(--pa-ink); }
.gbl-ai-banner small { display: block; font-size: 12px; color: var(--pa-text); }
.gbl-ai-banner > span:nth-child(2) { flex: 1; min-width: 0; }
.gbl-ai-banner .gbl-pa-btn { height: 34px; padding: 0 16px; font-size: 13px; }
.gbl-js [data-gbl-scene] .gbl-ai-banner.gbl-sx { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; margin-bottom: 0; border-width: 0; overflow: hidden;
  transition: max-height .6s var(--ease), opacity .5s, padding .6s var(--ease), margin .6s var(--ease); }
.gbl-js [data-gbl-scene] .gbl-ai-banner.gbl-sx.is-on { max-height: 120px; opacity: 1; padding-top: 12px; padding-bottom: 12px; margin-bottom: 12px; border-width: 1px; }
.gbl-tx-card { overflow: hidden; }
.gbl-tx-tabs { display: flex; gap: 18px; padding: 0 16px; border-bottom: 1px solid var(--pa-line); font-size: 13px; color: var(--pa-text); font-weight: 600; white-space: nowrap; overflow: hidden; }
.gbl-tx-tabs span { padding: 12px 0 10px; border-bottom: 2px solid transparent; }
.gbl-tx-tabs span.is-on { color: var(--pa-blue); border-bottom-color: var(--pa-blue); }
.gbl-tx-row { display: grid; grid-template-columns: 50px minmax(0, 1fr) 82px 190px 118px; gap: 10px; align-items: center; padding: 10px 16px; border-bottom: 1px dashed var(--pa-line); font-size: 12.5px; color: var(--pa-ink); position: relative; max-height: 64px; }
.gbl-tx-row:last-child { border-bottom: 0; }
.gbl-tx-hd { background: #f7f8fa; font-weight: 600; color: var(--pa-text); border-bottom-style: solid; padding-top: 8px; padding-bottom: 8px; }
.gbl-tx-desc { font-weight: 600; text-transform: uppercase; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gbl-tx-sub { display: none; }
.gbl-tx-amt { text-align: right; font-variant-numeric: tabular-nums; }
.gbl-tx-amt.is-in { color: var(--green); }
.gbl-tx-cat { display: flex; align-items: center; min-width: 0; }
.gbl-tx-skel { display: block; width: 110px; height: 9px; border-radius: 5px; background: linear-gradient(90deg, #eceff3 25%, #f6f7f9 50%, #eceff3 75%); background-size: 200% 100%; animation: gbl-shimmer 1.4s linear infinite; }
.gbl-tx-cat:has(.gbl-tx-ai.is-on) .gbl-tx-skel { display: none; }
.gbl-tx-ai { display: inline-flex; align-items: flex-start; gap: 6px; line-height: 1.3; }
.gbl-tx-ai svg { width: 15px; height: 15px; color: var(--pa-ai); margin-top: 1px; }
.gbl-js [data-gbl-scene] .gbl-tx-row:has(.gbl-tx-ai.is-on) { animation: gbl-rowflash 1.1s ease-out; }
@keyframes gbl-rowflash { 0% { background: rgba(74, 85, 212, .12); } 100% { background: transparent; } }
.gbl-tx-act { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.gbl-tx-act .gbl-pa-btn { height: 28px; padding: 0 10px; font-size: 12px; }
.gbl-tx-act .gbl-pa-btn svg { width: 13px; height: 13px; }
.gbl-tx-act .gbl-dots { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--pa-line); display: grid; place-items: center; color: var(--pa-text); background: #fff; }
.gbl-tx-act .gbl-dots svg { width: 14px; height: 14px; }
.gbl-tx-act .gbl-b-done { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 8px; display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.gbl-night { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(180deg, rgba(26, 25, 84, .16), rgba(26, 25, 84, .08)); transition: opacity 1.2s; }
.gbl-night.is-off { opacity: 0; }
.gbl-clock { position: absolute; z-index: 6; top: 64px; left: 0; right: 0; margin: 0 auto; width: max-content; display: flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 999px; background: var(--g-900); color: #fff; font-weight: 600; font-size: 12.5px; white-space: nowrap; box-shadow: 0 10px 24px -10px rgba(15, 14, 60, .6); }
.gbl-clock svg { width: 15px; height: 15px; }
.gbl-clock em { font-style: normal; font-weight: 400; opacity: .75; }
.gbl-clock.is-day { background: #fff; color: var(--pa-ink); }
.gbl-clock.is-day svg { color: var(--amber); }
.gbl-toast { position: absolute; z-index: 6; right: 16px; bottom: 16px; width: 300px; display: flex; gap: 10px; padding: 12px 14px; background: #fff; border-radius: 12px; border: 1px solid var(--pa-ai-line); box-shadow: 0 18px 40px -16px rgba(20, 30, 60, .35); font-size: 12.5px; color: var(--pa-text); line-height: 1.45; }
.gbl-toast svg { width: 16px; height: 16px; color: var(--pa-ai); margin-top: 1px; }
.gbl-toast strong { display: block; color: var(--pa-ink); font-size: 13px; }

/* ---------- request details (page hero) ---------- */
.gbl-rq-title { display: flex; align-items: center; gap: 14px; font-size: 20px; font-weight: 600; margin: 4px 0 16px; }
.gbl-rq-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.gbl-rq-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.gbl-rq-col.is-right { position: sticky; top: 0; }
.gbl-rq-headrow { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--pa-line); }
.gbl-rq-ico { width: 38px; height: 38px; border-radius: 50%; background: #f1f3f6; display: grid; place-items: center; color: var(--pa-text); }
.gbl-rq-ico svg { width: 19px; height: 19px; }
.gbl-rq-headrow strong { display: block; font-size: 15px; font-weight: 600; }
.gbl-rq-headrow small { display: block; font-size: 12px; color: var(--pa-text); }
.gbl-rq-status { display: flex; align-items: center; gap: 12px; padding: 12px 16px; font-size: 13px; font-weight: 600; color: var(--pa-text); }
.gbl-rq-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--pa-blue-50); color: var(--pa-blue); font-weight: 600; }
.gbl-rq-badge svg { width: 13px; height: 13px; }
.gbl-rq-badge.is-done { background: var(--green-50); color: var(--green); }
.gbl .gbl-pa-card > .gbl-pa-card-h { font-size: 15px; font-weight: 600; line-height: 1.556; color: var(--pa-ink); padding: 14px 16px; border-bottom: 1px solid var(--pa-line); margin: 0; }
@media (max-width: 992px) { .gbl .gbl-pa-card > .gbl-pa-card-h { line-height: 1.5; } }
.gbl-rq-dl { padding: 4px 16px 6px; }
.gbl-rq-dl > div { padding: 9px 0; border-bottom: 1px solid var(--pa-line); }
.gbl-rq-dl > div:last-child { border-bottom: 0; }
.gbl-rq-dl dt { font-size: 11.5px; font-weight: 600; color: var(--pa-text); }
.gbl-rq-dl dd { margin: 2px 0 0; font-size: 13px; color: var(--pa-ink); }
.gbl-rq-dl a, .gbl-rq-dl .is-link { color: var(--pa-blue); }
.gbl-sugg { padding: 14px 16px 4px; }
.gbl-sugg-l { display: inline-flex; align-items: center; gap: 6px; color: var(--pa-ai); font-weight: 600; font-size: 12.5px; margin-bottom: 8px; }
.gbl-sugg-l svg { width: 15px; height: 15px; }
.gbl-sugg-box { border: 1px solid var(--pa-ai-line); background: var(--pa-ai-bg); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; line-height: 1.6; color: var(--pa-ink); }
.gbl-sugg-use { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; color: var(--pa-blue); font-weight: 600; }
.gbl-sugg-use svg { width: 13px; height: 13px; }
.gbl-ed { margin: 12px 16px 16px; border: 1px solid var(--pa-line); border-radius: 12px; padding: 10px; }
.gbl-ed-bar { display: flex; align-items: center; gap: 10px; padding: 6px 8px; background: #f7f8fa; border-radius: 8px; color: var(--pa-text); font-size: 12px; white-space: nowrap; overflow: hidden; }
.gbl-ed-bar svg { width: 15px; height: 15px; }
.gbl-ed-bar b { font-weight: 600; font-size: 13px; }
.gbl-ed-bar i { font-family: Georgia, serif; font-size: 14px; }
.gbl-ed-bar u { font-size: 13px; }
.gbl-ed-ai { background: var(--pa-ink); color: #fff; font-weight: 600; font-size: 11px; padding: 2px 4px; border-radius: 4px; }
.gbl-ed-sep { width: 1px; height: 16px; background: var(--pa-line); }
.gbl-ed-body { min-height: 104px; padding: 10px 8px; font-size: 12.5px; line-height: 1.6; color: var(--pa-ink); }
.gbl-ed-ph { color: #9aa2b1; }
.gbl-ed-txt.is-on + .gbl-ed-ph { display: none; }
/* the hero's draft keeps its space from the start (its words wait at opacity 0), so the placeholder sits over it and fades */
.gbl-js .gbl-hero-scene .gbl-ed-body { position: relative; }
.gbl-js .gbl-hero-scene .gbl-ed-txt:not(.is-on) { visibility: hidden; }
.gbl-js .gbl-hero-scene .gbl-ed-ph { position: absolute; left: 8px; top: 10px; }
.gbl-js .gbl-hero-scene .gbl-ed-txt.is-on + .gbl-ed-ph { display: block; opacity: 0; transition: opacity .2s; }
.gbl-ed-foot { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 0; font-size: 12.5px; font-weight: 600; color: var(--pa-ink); }
.gbl-ed-foot > span:first-child { display: inline-flex; align-items: center; gap: 10px; }
.gbl-toggle { width: 34px; height: 20px; border-radius: 999px; background: #d5d9e0; position: relative; transition: background .3s; }
.gbl-toggle::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .3s var(--ease); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.gbl-toggle.is-on { background: var(--pa-blue); }
.gbl-toggle.is-on::after { transform: translateX(14px); }
.gbl-ed-send { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 16px; border-radius: 8px; background: #b9cff7; color: #fff; font-weight: 600; transition: background .3s; }
.gbl-ed-send svg { width: 14px; height: 14px; }
.gbl-ed:has(.gbl-ed-txt.is-on) .gbl-ed-send { background: var(--pa-blue); }
.gbl-ed-sent { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 8px; background: var(--green-50); color: var(--green); font-weight: 600; }
.gbl-ed-sent svg { width: 14px; height: 14px; }
.gbl-ai-card { border: 1.5px solid var(--pa-ai-line); padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.gbl-ai-card-l { display: inline-flex; align-items: center; gap: 7px; color: var(--pa-ai); font-weight: 600; font-size: 13.5px; }
.gbl-ai-card-l svg { width: 16px; height: 16px; }
.gbl-ai-card ul { display: flex; flex-direction: column; gap: 6px; }
.gbl-ai-card li { position: relative; padding-left: 14px; font-size: 12.5px; line-height: 1.55; color: var(--pa-ink); }
.gbl-ai-card li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 4px; height: 4px; border-radius: 50%; background: var(--pa-blue); }
.gbl-ai-quote { background: #f4f5f8; border-left: 3px solid #c9cdd6; border-radius: 4px; padding: 8px 10px; font-size: 12px; line-height: 1.55; color: var(--pa-ink); }
.gbl-ai-quote small { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--pa-text); font-weight: 600; margin-bottom: 3px; }
.gbl-ai-quote small svg { width: 13px; height: 13px; }
.gbl-ai-quote mark { background: #fff1b8; color: inherit; padding: 0 1px; }
.gbl-ai-next { font-size: 12px; font-weight: 600; color: var(--pa-text); margin-top: 2px; }
.gbl-ai-btn { display: flex; justify-content: center; align-items: center; height: 36px; border-radius: 8px; background: var(--pa-blue); color: #fff; font-weight: 600; font-size: 13px; }
.gbl-ai-fine { font-size: 11px; line-height: 1.45; color: var(--pa-text); }
.gbl-ai-btn2 { display: flex; justify-content: center; align-items: center; height: 36px; border-radius: 8px; border: 1px solid var(--pa-line); color: var(--pa-ink); font-weight: 600; font-size: 13px; background: #fff; }
.gbl-ai-think { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; }
.gbl-rq-board { padding: 14px 16px; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; }
.gbl-rq-board strong { font-size: 14px; font-weight: 600; }
.gbl-rq-board b { font-size: 12.5px; color: var(--pa-text); font-weight: 600; }
.gbl-rq-board small { grid-column: 1 / -1; font-size: 12px; color: var(--pa-text); }
.gbl-rq-board i { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: #edf0f4; margin-top: 10px; }
.gbl-sent-toast { position: absolute; z-index: 8; left: 0; right: 0; top: 76px; margin: 0 auto; width: max-content; display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 10px; background: var(--pa-ink); color: #fff; font-weight: 600; font-size: 13px; white-space: nowrap; box-shadow: 0 16px 32px -12px rgba(0,0,0,.45); }
.gbl-sent-toast svg { width: 16px; height: 16px; color: #8ff0c9; }

/* ---------- page hero motion: nothing pops in or cuts out ----------
   Parts of the request open through grid-row reveals (0fr -> 1fr) so whatever sits below glides instead of jumping;
   the flex gaps they would hold while closed fold away as margins. Transitions sit on the state classes only, so a
   reset snaps (gable.js rewinds this scene only while it's off screen). Every rule is scoped to .gbl-hero-scene:
   .gbl-ai-card, .gbl-sugg and .gbl-sent-toast are shared with the feature, Solutions and homepage scenes. */
.gbl-js .gbl-hero-scene .gbl-ux { display: grid; grid-template-rows: 0fr; opacity: 0; margin-top: 0; }
.gbl-js .gbl-hero-scene .gbl-ux > * { min-height: 0; overflow: hidden; transform: translateY(4px); }
.gbl-js .gbl-hero-scene .gbl-ux.is-on:not(.is-off) { grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows .6s var(--ease), margin-top .6s var(--ease), opacity .35s .12s; }
.gbl-js .gbl-hero-scene .gbl-ux.is-on:not(.is-off) > * { transform: none; transition: transform .6s var(--ease); }
.gbl-js .gbl-hero-scene .gbl-ux.is-on.is-off { transition: grid-template-rows .6s var(--ease), margin-top .6s var(--ease), opacity .2s; }
.gbl-js .gbl-hero-scene .gbl-ux.is-on.is-off > * { transition: transform .6s var(--ease); }
.gbl-js .gbl-hero-scene .gbl-ai-card, .gbl-js .gbl-hero-scene .gbl-ai-card ul { gap: 0; }
.gbl-js .gbl-hero-scene .gbl-ai-card .gbl-ux.is-on:not(.is-off) { margin-top: 10px; }
.gbl-js .gbl-hero-scene .gbl-ai-card li.gbl-ux + li.gbl-ux.is-on { margin-top: 6px; }
/* the highlighter runs over the rule once the quote is open */
.gbl-js .gbl-hero-scene .gbl-ux.is-on .gbl-ai-quote mark { background: linear-gradient(90deg, #fff1b8 50%, transparent 50%) 100% 0 / 200% 100% no-repeat; animation: gbl-mark .9s .5s var(--ease) forwards; }
/* pressed buttons ease back out (.is-pressed carries its own transition, so the release used to snap) */
.gbl-hero-scene .gbl-ai-btn:not(.is-pressed) { transition: transform .22s var(--ease), filter .22s; }
.gbl-hero-scene .gbl-ed-send:not(.is-pressed) { transition: transform .22s var(--ease), filter .22s, background .3s; }
/* Send hands over to Sent in the same spot; on a narrow phone it drops under "Send notification" instead of running
   past the editor's edge (the toggle used to be squashed to 25px there) */
.gbl-hero-scene .gbl-ed-foot { flex-wrap: wrap; gap: 8px; }
.gbl-hero-scene .gbl-toggle { flex: none; }
.gbl-js .gbl-ed-act { display: grid; justify-items: end; margin-left: auto; }
.gbl-js .gbl-ed-act > * { grid-area: 1 / 1; }
.gbl-js .gbl-hero-scene .gbl-ed-sent:not(.is-on) { opacity: 0; transform: scale(.9); }
.gbl-js .gbl-hero-scene .gbl-ed-sent.is-on { transition: opacity .3s .06s, transform .45s var(--ease); }
.gbl-js .gbl-hero-scene .gbl-ed-send.is-off { opacity: 0; transform: scale(.9); transition: opacity .2s, transform .3s var(--ease), background .3s; }
.gbl-js .gbl-hero-scene .gbl-rq-badge.is-done { transition: background .3s, color .3s; }
/* the toast fades in and out */
.gbl-js .gbl-hero-scene .gbl-sent-toast { opacity: 0; transform: translateY(-8px); }
.gbl-js .gbl-hero-scene .gbl-sent-toast.is-on:not(.is-off) { opacity: 1; transform: none; transition: opacity .35s, transform .5s var(--ease); }
.gbl-js .gbl-hero-scene .gbl-sent-toast.is-on.is-off { transition: opacity .45s, transform .5s var(--ease); }
/* one column on phones: the AI card scrolls away with the page (pinned, it covered the reply box after the camera move) */
@media (max-width: 768px) { .gbl-hero-scene .gbl-rq-col.is-right { position: static; } }
/* reduced motion: the end state is laid out at once (a .01ms transition still has the reveals closed when the engine
   measures where to scroll the page) */
@media (prefers-reduced-motion: reduce) { .gbl-js .gbl-hero-scene *, .gbl-js .gbl-hero-scene *::after { transition: none !important; } }

/* ---------- expanded Gable (Customize section) ---------- */
.gbl-mo { display: grid; grid-template-columns: 168px minmax(0, 1fr); background: #fff; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-card); text-align: left; color: var(--pa-ink); font-size: 13px; line-height: 1.45; min-height: 340px; }
.gbl-mo-rail { background: var(--pa-bg); border-right: 1px solid var(--pa-line); padding: 12px 8px; display: flex; flex-direction: column; gap: 2px; }
.gbl-mo-rail > span { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 8px; font-size: 13px; color: var(--pa-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gbl-mo-rail > span svg { width: 16px; height: 16px; color: var(--pa-text); }
.gbl-mo-rail .gbl-mo-search { border: 1px solid var(--pa-line); background: #fff; color: #9aa2b1; margin-bottom: 6px; }
.gbl-mo-rail .gbl-mo-new { color: var(--pa-blue); font-weight: 600; }
.gbl-mo-rail .gbl-mo-new svg { color: var(--pa-blue); }
.gbl-mo-rail > span.is-on { background: #fff; font-weight: 600; box-shadow: 0 1px 3px rgba(20, 30, 50, .08); }
.gbl-mo-rail > span.is-on svg { color: var(--pa-ai); }
.gbl-mo-rail small { font-size: 11.5px; color: var(--pa-mute); font-weight: 600; padding: 10px 9px 2px; }
.gbl-mo-rail .gbl-mo-old { color: var(--pa-text); font-size: 12.5px; display: block; }
.gbl-mo-main { display: flex; flex-direction: column; min-width: 0; }
.gbl-mo-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--pa-line); font-weight: 600; font-size: 14.5px; }
.gbl-mo-head .gbl-dr-icons svg { width: 15px; height: 15px; }

/* ---------- app replica: responsive ---------- */
.gbl-pa-compact .gbl-pa-top { padding: 12px 14px 10px; }
.gbl-pa-compact .gbl-pa-logo { margin-right: 6px; }
.gbl-pa-compact .gbl-pa-page { padding: 4px 14px 14px; }
@media (max-width: 1200px) {
  .gbl-pa-compact .gbl-dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gbl-pa-compact .gbl-dash-stats > :nth-child(3) { display: none; }
  .gbl-pa-compact .gbl-tx-row { grid-template-columns: minmax(0, 1fr) 76px 168px 104px; }
  .gbl-pa-compact .gbl-tx-row > :first-child { display: none; }
  .gbl-pa-compact .gbl-pa-acct .gbl-pa-org, .gbl-pa-compact .gbl-pa-acct .gbl-pa-chev { display: none; }
  .gbl-pa-compact .gbl-dr { width: 400px; }
  .gbl-hero-scene .gbl-pa-side { width: 170px; }
}
@media (max-width: 992px) {
  .gbl-pa { height: 580px; }
  .gbl-pa-compact .gbl-pa-acct .gbl-pa-org, .gbl-pa-compact .gbl-pa-acct .gbl-pa-chev { display: inline; }
  .gbl-pa-compact .gbl-tx-row { grid-template-columns: 50px minmax(0, 1fr) 82px 190px 118px; }
  .gbl-pa-compact .gbl-tx-row > :first-child { display: block; }
  .gbl-hero-scene .gbl-pa-side { display: none; }
  .gbl-rq-grid { grid-template-columns: minmax(0, 1fr) 280px; }
}
@media (max-width: 768px) {
  .gbl-pa { height: 540px; font-size: 12.5px; border-radius: 14px; }
  .gbl-pa .gbl-dr { width: 100%; border-left: 0; }
  .gbl-pa-top .gbl-pa-pill:not(.is-ai), .gbl-pa-top .gbl-pa-circ:first-of-type { display: none; }
  .gbl-pa-compact .gbl-pa-acct .gbl-pa-org, .gbl-pa-compact .gbl-pa-acct .gbl-pa-chev, .gbl-pa-acct > svg:first-child { display: none; }
  .gbl-pa-pill .gbl-pa-star { display: none; }
  .gbl-pa-compact .gbl-tx-row, .gbl-pa-compact .gbl-tx-row { grid-template-columns: minmax(0, 1fr) 128px 84px; gap: 8px; padding: 9px 12px; }
  .gbl-pa-compact .gbl-tx-row > :first-child, .gbl-tx-row > .gbl-tx-amt { display: none; }
  .gbl-tx-sub { display: block; font-size: 11.5px; color: var(--pa-mute); font-weight: 400; text-transform: none; }
  .gbl-tx-sub.is-in { color: var(--green); }
  .gbl-tx-ai { font-size: 11.5px; }
  .gbl-tx-skel { width: 90px; }
  .gbl-tx-act .gbl-dots { display: none; }
  .gbl-tx-act .gbl-pa-btn { padding: 0 8px; }
  .gbl-tx-tabs span:nth-child(n+3) { display: none; }
  .gbl-ai-banner { flex-wrap: wrap; }
  .gbl-ai-banner .gbl-pa-btn { margin-left: 30px; }
  .gbl-clock { top: 58px; }
  .gbl-toast { left: 12px; right: 12px; width: auto; bottom: 12px; }
  .gbl-dash-stats { grid-template-columns: 1fr 1fr; }
  .gbl-rq-grid { grid-template-columns: 1fr; }
  .gbl-rq-col.is-right { order: -1; }
  .gbl-rq-col .gbl-rq-hide { display: none; }
  .gbl-rq-board { display: none; }
  .gbl-ed-bar > :nth-child(n+6) { display: none; }
  .gbl-mo { grid-template-columns: 1fr; }
  .gbl-mo-rail { display: none; }
}

/* homepage stage holds the app replica */
.gbl-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Beaver Builder appends "(opens in new tab)" as .fl-new-tab-notice.sr-only to target="_blank" links; its only hiding rule
   lives in BB's per-page cache CSS, so while that cache rebuilds the label showed on /gable/. Pinned here (SEO S11, S10-19). */
.gbl .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.gbl-hpanel { width: 100%; }
.gbl-hpanel[hidden] { display: none; }
.gbl-demo-stage { padding: 36px; }
@media (max-width: 1200px) {
 .gbl-demo-stage { padding: 28px; }
}
@media (max-width: 992px) {
 .gbl-demo-stage { padding: 24px; }
}
@media (max-width: 768px) {
 .gbl-demo-stage { padding: 14px 10px; }
}

/* "Try asking" gallery uses the real drawer */
.gbl-dr-card { border-radius: 18px; box-shadow: var(--shadow-win); height: 600px; overflow: hidden; text-align: left; color: var(--pa-ink); font-size: 13.5px; line-height: 1.5; }
.gbl-dr-card .gbl-dr-thread { padding: 22px 22px 8px; }
.gbl-dr .gbl-rows li, .gbl-dr .gbl-timeline-mini li, .gbl-dr .gbl-progress { background: var(--pa-bg); }
.gbl-dr .gbl-table { border: 1px solid var(--pa-line); }
@media (max-width: 992px) {
 .gbl-dr-card { height: 580px; }
}
@media (max-width: 768px) {
 .gbl-dr-card { height: 560px; border-radius: 16px; }
 .gbl-dr-card .gbl-dr-thread { padding: 18px 14px 8px; }
}

/* expanded Gable modal content + real banner/reply styles on the page */
.gbl-mo-main .gbl-rules, .gbl-mo-main .gbl-skills, .gbl-mo-main .gbl-flow { padding: 14px; }
.gbl-mo-main .gbl-flow::before { left: 35px; }
.gbl-mo-head .gbl-b { padding: 6px 10px; font-size: 12px; }
.gbl-mo .gbl-skills { grid-template-columns: 1fr 1fr; }
.gbl-sugg-mini { padding: 0; }
.gbl-sugg-mini .gbl-sugg-box { font-size: 12.5px; }
.gbl-ed-send.is-go { background: var(--pa-blue); }
/* delegate steps: spinner, then check */
.gbl-js .is-playing .gbl-steps .gbl-step .gbl-check { background: transparent; box-shadow: inset 0 0 0 2px #e2e5f6; animation: gbl-chk-bg .3s calc(var(--d, 0) * .32s + .8s) forwards; }
.gbl-js .is-playing .gbl-steps .gbl-step .gbl-check::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--pa-ai); animation: gbl-spin .7s linear infinite, gbl-hide-now .01s calc(var(--d, 0) * .32s + .8s) forwards; }
.gbl-js .is-playing .gbl-steps .gbl-step .gbl-check::after { opacity: 0; animation: gbl-fade-in .25s calc(var(--d, 0) * .32s + .8s) forwards; }
@keyframes gbl-chk-bg { to { background: var(--green-50); box-shadow: none; } }
@keyframes gbl-hide-now { to { opacity: 0; } }
@keyframes gbl-fade-in { to { opacity: 1; } }
@media (max-width: 1200px) {
 .gbl-mo { grid-template-columns: 1fr; }
 .gbl-mo-rail { display: none; }
}
@media (max-width: 992px) {
 .gbl-mo { grid-template-columns: 168px minmax(0, 1fr); }
 .gbl-mo-rail { display: flex; }
}
@media (max-width: 768px) {
 .gbl-mo { grid-template-columns: 1fr; }
 .gbl-mo-rail { display: none; }
 .gbl-mo .gbl-skills { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .gbl-tx .gbl-pa-h .gbl-pa-btn { display: none; }
  .gbl-clock { left: auto; right: 12px; margin: 0; top: 62px; padding: 6px 10px 6px 8px; font-size: 11.5px; }
  .gbl-clock em { display: none; }
  .gbl-ai-banner > span:nth-child(2) { flex: 1 1 calc(100% - 40px); }
  .gbl-js [data-gbl-scene] .gbl-ai-banner.gbl-sx.is-on { max-height: 220px; }
  .gbl-ai-banner .gbl-pa-btn { margin-left: 30px; height: 30px; }
  .gbl-tx-hd > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gbl-toast { padding: 10px 12px; font-size: 11.5px; }
}
@media (max-width: 768px) {
  .gbl-pa-compact .gbl-tx-row { grid-template-columns: minmax(0, 1fr) 132px 30px; }
  .gbl-tx-act .gbl-pa-btn, .gbl-tx-act .gbl-b-done { font-size: 0; gap: 0; width: 30px; height: 30px; padding: 0; justify-content: center; }
  .gbl-tx-act .gbl-pa-btn svg, .gbl-tx-act .gbl-b-done svg { width: 15px; height: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .gbl-js .is-playing .gbl-steps .gbl-step .gbl-check { background: var(--green-50); box-shadow: none; }
  .gbl-js .is-playing .gbl-steps .gbl-step .gbl-check::before { display: none; }
  .gbl-js .is-playing .gbl-steps .gbl-step .gbl-check::after { opacity: 1; }
  .gbl-status, .gbl-status svg, .gbl-spin, .gbl-tx-skel { animation: none !important; }
  .gbl-status { color: var(--pa-mute); -webkit-background-clip: border-box; background: none; }
}

/* =========================================================================
   Four capabilities: answers, tasks, Autopilot, customization
   ========================================================================= */

/* homepage: four modes fit the same card */
.gbl-demo .gbl-modes { gap: 2px; }
.gbl-demo .gbl-mode { padding-top: 16px; padding-bottom: 18px; }
.gbl-demo-side { gap: 22px; }

/* ---------- shared bits in chat answers ---------- */
.gbl-skill-use { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--pa-ai-bg); border: 1px solid #dfe3fb; color: var(--pa-ai); font-size: 12px; font-weight: 600; }
.gbl-skill-use svg { width: 14px; height: 14px; }
.gbl-skill-use b { font-weight: 600; }
.gbl-fine { font-size: 12px; line-height: 1.5; color: var(--pa-mute); margin-top: 8px; }
.gbl-dr .gbl-table td, .gbl-dr .gbl-table th { padding: 6px 9px; }
.gbl-bench td:nth-child(2), .gbl-bench td:nth-child(3) { font-variant-numeric: tabular-nums; white-space: nowrap; }
.gbl-bench td:first-child { color: var(--pa-text); }
.gbl-je td:nth-child(3), .gbl-je td:nth-child(4), .gbl-je th:nth-child(3), .gbl-je th:nth-child(4) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gbl-je td:first-child { white-space: nowrap; color: var(--pa-text); }
.gbl-je tr.is-sub td:nth-child(2) { padding-left: 22px; }
.gbl-je tr.is-sub td { border-bottom-color: var(--pa-line); }
.gbl-rows-why li { grid-template-columns: 70px 1fr auto; align-items: baseline; }
.gbl-rows-why li span:first-child { font-weight: 600; color: var(--pa-ink); }

/* ---------- "Try asking": capability labels + autoplay progress ---------- */
.gbl .gbl-ask-chip { position: relative; overflow: hidden; }
.gbl-ask-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-top: 6px; }
.gbl-ask-body small { font-size: 14px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.gbl-ask-chip.is-active .gbl-ask-body small { color: var(--g); }
.gbl-ask-bar { position: absolute; left: 70px; right: 20px; bottom: 8px; height: 3px; border-radius: 3px; background: rgba(70, 69, 182, .1); opacity: 0; transition: opacity .3s; }
.gbl-ask-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--g); }
.gbl-ask-chip.is-timing .gbl-ask-bar { opacity: 1; }
.gbl-ask-chip.is-timing .gbl-ask-bar i { animation: gbl-progress var(--gbl-dur, 8s) linear forwards; }
.gbl-ask.is-paused .gbl-ask-bar i { animation-play-state: paused; }
@media (max-width: 992px) {
  .gbl .gbl-ask-chip { max-width: 300px; }
  .gbl-ask-ico { width: 32px; height: 32px; }
  .gbl-ask-body { padding-top: 4px; }
  .gbl-ask-bar { left: 62px; right: 16px; bottom: 6px; }
  .gbl-ask-body small { font-size: 12px; }
}

/* ---------- tasks: tab progress, steps, artifacts ---------- */
.gbl-tab-bar { position: absolute; left: 20px; right: 20px; bottom: 6px; height: 3px; border-radius: 3px; background: rgba(70, 69, 182, .1); opacity: 0; transition: opacity .3s; }
.gbl-tab-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--g); }
.gbl-job-tab.is-active .gbl-tab-bar { opacity: 1; }
.gbl-job-tab.is-active.is-timing .gbl-tab-bar i { animation: gbl-progress var(--gbl-dur, 8s) linear forwards; }
.gbl-jobs.is-paused .gbl-tab-bar i { animation-play-state: paused !important; }
.gbl-job { position: relative; }
.gbl-job-brief { gap: 20px; }
.gbl-job-ask { font-size: 21px; }
.gbl-attach { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -6px; }
.gbl-attach span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 8px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink); }
.gbl-attach svg { width: 16px; height: 16px; color: #d4452f; }
.gbl-jsteps { display: flex; flex-direction: column; gap: 12px; min-height: 196px; }
.gbl-jsteps li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.45; color: var(--body); }
.gbl-jsteps .gbl-spin, .gbl-jsteps .gbl-check { margin-top: 1px; width: 20px; height: 20px; }
.gbl-jsteps li:has(.gbl-plan-ok.is-on) .gbl-spin { display: none; }
.gbl-jsteps .gbl-plan-ok::after { left: 7px !important; top: 4px !important; width: 5px !important; height: 9px !important; }
.gbl-job-work { position: relative; min-height: 680px; }
.gbl-approve-row .gbl-b-done { padding: 8px 12px; border-radius: 10px; }
.gbl-approve-row .gbl-b-done svg { width: 14px; height: 14px; }
.gbl-job .gbl-b-primary { background: var(--pa-blue); }

/* bid comparison PDF */
.gbl-pdf { border-top: 4px solid #d4452f; }
.gbl-bids { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.gbl-bids th { text-align: left; font-size: 11.5px; font-weight: 600; color: var(--muted); padding: 0 8px 8px; border-bottom: 1px solid var(--line); }
.gbl-bids td { padding: 8px; border-bottom: 1px solid var(--line-2); font-variant-numeric: tabular-nums; }
.gbl-bids tr:last-child td { border-bottom: 0; }
.gbl-bids th:not(:first-child), .gbl-bids td:not(:first-child) { text-align: right; }
.gbl-bids td:first-child { font-weight: 600; }
.gbl-bids sup { color: var(--amber); font-weight: 600; }
.gbl-bid-best td { transition: background .5s; }
.gbl-bid-best.is-best td { background: var(--green-50); }
.gbl-bid-best.is-best td:first-child { border-radius: 8px 0 0 8px; }
.gbl-bid-best.is-best td:last-child { border-radius: 0 8px 8px 0; color: var(--green); }
.gbl-bids-note { font-size: 12px; color: var(--muted); margin: 8px 0 0; }
.gbl-rec { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--g-50); border: 1px solid var(--g-100); font-size: 13.5px; line-height: 1.55; color: var(--ink); }
.gbl-rec b { display: inline-flex; align-items: center; gap: 6px; color: var(--g); font-size: 14px; }
.gbl-rec svg { width: 16px; height: 16px; }

/* final notice letter */
.gbl-merge { display: inline-block; padding: 0 5px; border-radius: 5px; background: var(--g-50); color: var(--g); font-weight: 600; font-size: .95em; line-height: 1.5; }
.gbl-letter .gbl-cites { margin: 0 0 12px; }
.gbl-mailline { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--green-50); color: var(--ink); }
.gbl-mailline svg { width: 22px; height: 22px; color: var(--green); flex: none; }
.gbl-mailline strong { display: block; font-size: 14px; }
.gbl-mailline small { display: block; font-size: 12.5px; color: var(--body); }

/* 2027 budget */
.gbl-budget { padding-bottom: 16px; }
.gbl-budget-t td:last-child { width: 64px; }
.gbl-note-s { font-size: 11px; font-weight: 600; color: var(--muted); background: var(--bg); padding: 2px 6px; border-radius: 6px; }
.gbl-flag-n { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--amber-50); color: var(--amber); font-size: 11.5px; font-weight: 600; flex: none; }
.gbl-flag-list { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.gbl-flag-list li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 10px; background: #fffaf0; border: 1px solid #fbe7c2; font-size: 13px; line-height: 1.45; color: var(--ink); }
.gbl-dues { margin-top: 12px; font-size: 13.5px; color: var(--ink); }
.gbl-dues b { font-variant-numeric: tabular-nums; }

/* board deck */
.gbl-deck { display: flex; flex-direction: column; gap: 12px; }
.gbl-slide { aspect-ratio: 16 / 9; background: #fff; border-radius: 14px; box-shadow: var(--shadow-win); padding: 22px 24px 14px; display: flex; flex-direction: column; overflow: hidden; background-image: linear-gradient(135deg, rgba(70,69,182,.06), transparent 45%); }
.gbl-slide-h small { display: block; font-size: 11.5px; font-weight: 600; color: var(--g); letter-spacing: 0; }
.gbl-slide-h strong { display: block; font-size: 20px; line-height: 1.25; color: var(--ink); margin-top: 2px; }
.gbl-slide-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 10px; margin: 14px 0 10px; }
.gbl-slide-grid > span { display: flex; flex-direction: column; justify-content: center; padding: 10px 12px; border-radius: 10px; background: var(--bg); min-width: 0; }
.gbl-slide-grid b { font-size: 20px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.gbl-slide-grid b.is-up { color: var(--green); }
.gbl-slide-grid b.is-warn { color: var(--amber); }
.gbl-slide-grid strong { font-size: 13px; color: var(--ink); margin-top: 3px; }
.gbl-slide-grid small { font-size: 11.5px; line-height: 1.35; color: var(--muted); }
.gbl-slide-f { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); border-top: 1px solid var(--line-2); padding-top: 8px; }
.gbl-thumbs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; min-height: 64px; }
.gbl-thumbs > span { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 600; color: var(--body); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gbl-thumbs i { display: block; aspect-ratio: 16 / 9; border-radius: 6px; background: #fff; box-shadow: 0 1px 3px rgba(20,30,50,.12); position: relative; overflow: hidden; }
.gbl-thumbs .is-on-slide i { box-shadow: 0 0 0 2px var(--g); }
.gbl-thumbs i::before, .gbl-thumbs i::after { content: ""; position: absolute; }
.gbl-thumbs .t-title::before { left: 18%; right: 18%; top: 36%; height: 12%; border-radius: 2px; background: var(--g-200); }
.gbl-thumbs .t-title::after { left: 30%; right: 30%; top: 56%; height: 7%; border-radius: 2px; background: var(--line); }
.gbl-thumbs .t-bars::before { left: 14%; right: 14%; bottom: 16%; height: 52%; background: linear-gradient(90deg, var(--g-200) 0 14%, transparent 14% 22%, var(--g) 22% 36%, transparent 36% 50%, var(--g-200) 50% 64%, transparent 64% 72%, var(--g) 72% 86%, transparent 86%); -webkit-mask: linear-gradient(0deg, #000 60%, transparent 60%) 0 0/25% 100%; }
.gbl-thumbs .t-line::before { left: 12%; right: 12%; top: 30%; bottom: 20%; border-bottom: 2px solid var(--g-300); border-left: 2px solid var(--line); background: linear-gradient(160deg, transparent 48%, var(--g) 49% 53%, transparent 54%); }
.gbl-thumbs .t-list::before { left: 14%; right: 30%; top: 28%; height: 44%; background: repeating-linear-gradient(180deg, var(--line) 0 3px, transparent 3px 9px); }
.gbl-thumbs .t-grid::before { left: 12%; right: 12%; top: 22%; bottom: 18%; background: linear-gradient(90deg, var(--bg) 0 47%, transparent 47% 53%, var(--bg) 53%); -webkit-mask: linear-gradient(180deg, #000 0 45%, transparent 45% 55%, #000 55%); }

@media (max-width: 1100px) {
  .gbl-job-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 992px) {
  .gbl-jsteps { min-height: 0; }
  .gbl-job-work { min-height: 0; }
}
@media (max-width: 768px) {
  .gbl .gbl-job-tab strong { font-size: 16px; }
  .gbl-job-ico { width: 34px; height: 34px; border-radius: 10px; }
  .gbl-job-ico svg { width: 18px; height: 18px; }
  .gbl-tab-bar { left: 12px; right: 12px; bottom: 4px; }
  .gbl-job-ask { font-size: 17px; }
  .gbl-jsteps li { font-size: 15px; }
  .gbl-bids { font-size: 12.5px; }
  .gbl-bids td, .gbl-bids th { padding-left: 5px; padding-right: 5px; }
  .gbl-slide { padding: 14px 14px 10px; aspect-ratio: auto; }
  .gbl-slide-h strong { font-size: 16px; }
  .gbl-slide-grid b { font-size: 16px; }
  .gbl-thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gbl-approve-row .gbl-b-done { white-space: normal; }
}

/* ---------- Autopilot: one overnight digest card ----------
   The summary's numbers are the tabs ([data-gbl-tabs], no autoplay); only the open panel's demo moves, once. */
.gbl-ap { background: #fff; border: 1px solid var(--line); border-radius: 28px; overflow: hidden; box-shadow: 0 24px 60px -40px rgba(38, 37, 112, .45); }
.gbl-ap-head { display: flex; align-items: center; gap: 16px; padding: 24px 32px; background: linear-gradient(180deg, var(--pa-ai-bg), #fff); }
.gbl-brief-ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; flex: none; background: #fff; color: var(--pa-ai); border: 1px solid #dfe3fb; }
.gbl-brief-ico svg { width: 24px; height: 24px; }
.gbl-ap-title { flex: 1; min-width: 0; }
.gbl-ap-title strong { display: block; font-size: 18px; line-height: 1.4; color: var(--ink); }
.gbl-ap-title small { display: flex; align-items: center; gap: 6px; font-size: 15px; color: var(--muted); }
.gbl-ap-title small svg { width: 15px; height: 15px; flex: none; color: var(--g); }
.gbl-ap-due { flex: none; font-size: 14px; font-weight: 600; color: var(--g); background: var(--g-50); padding: 7px 12px; border-radius: 999px; white-space: nowrap; }
.gbl-ap-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 4px 32px 24px; }
.gbl .gbl-ap-tab { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px 20px; border-radius: 18px; border: 1px solid var(--line); background: var(--bg); color: var(--muted); text-align: left; font-size: 15px; line-height: 1.4; transition: background .2s, border-color .2s, box-shadow .2s; }
.gbl .gbl-ap-tab b { font-size: 32px; line-height: 1.1; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; transition: color .2s; }
.gbl .gbl-ap-tab:hover, .gbl .gbl-ap-tab:focus { border: 1px solid var(--g-200); outline: 0; }
.gbl .gbl-ap-tab:focus-visible { outline: 2px solid var(--g); outline-offset: 3px; }
.gbl .gbl-ap-tab.is-active { background: #fff; border: 1px solid var(--g); box-shadow: 0 0 0 3px rgba(70, 69, 182, .12); color: var(--body); }
.gbl .gbl-ap-tab.is-active b { color: var(--g); }
.gbl-ap-panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); border-top: 1px solid var(--line); }
.gbl-ap-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 40px 40px 44px 32px; }
.gbl-ap-copy .gbl-h3 { font-size: 24px; margin-top: 2px; text-wrap: balance; }
.gbl-ap-copy > p { font-size: 17px; line-height: 1.55; }
.gbl-ap-points { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; font-size: 16px; color: var(--ink); }
.gbl-ap-points li { display: flex; align-items: center; gap: 10px; }
.gbl-ap-points .gbl-check { width: 20px; height: 20px; }
/* request triage: the four overnight steps, each dot fills as the demo reaches it */
.gbl-ap-steps { display: flex; flex-direction: column; gap: 18px; margin-top: 6px; }
.gbl-ap-steps li { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; font-size: 15px; line-height: 1.5; color: var(--body); }
.gbl-ap-steps li:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 36px; bottom: -16px; width: 2px; border-radius: 2px; background: var(--line); }
.gbl-ap-steps strong { display: block; font-size: 17px; line-height: 1.4; color: var(--ink); margin: 4px 0 2px; }
.gbl-ap-n { position: relative; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 600; background: var(--g); color: #fff; transition: background .4s, color .4s, box-shadow .4s; }
.gbl-js .gbl-ap-steps li:not(.is-on) .gbl-ap-n { background: #fff; color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--line); }
.gbl-ap-time { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--g); background: var(--g-50); padding: 3px 9px; border-radius: 999px; }
.gbl-ap-time svg { width: 13px; height: 13px; }
.gbl-ap-time.is-day { color: #a1430b; background: var(--amber-50); }
.gbl-auto-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--g); background: var(--g-50); padding: 7px 12px; border-radius: 999px; white-space: nowrap; }
.gbl-auto-tag svg { width: 16px; height: 16px; }
/* the demo: an app window on the tint, flush with the card's right and bottom edges. It fills the panel (all three
   panels share the tallest one's height) and never grows, so nothing moves while it fills in. */
.gbl-auto-vis, .gbl-ap-vis { display: flex; align-items: flex-end; padding: 40px 40px 0; background: var(--g-100); color: var(--pa-ink); font-size: 13px; line-height: 1.45; text-align: left; }
.gbl-ap-vis { align-items: stretch; }
.gbl-ap-vis > .gbl-rqw, .gbl-ap-vis > .gbl-mtx, .gbl-ap-vis > .gbl-hchat { height: auto; min-height: 452px; }
.gbl-mclock { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 999px; background: var(--g-900); color: #fff; font-size: 11.5px; font-weight: 600; white-space: nowrap; transition: background .5s, color .5s; }
.gbl-mclock svg { width: 13px; height: 13px; }
.gbl-mclock.is-day { background: var(--amber-50); color: #a1430b; }
.gbl-rqw { width: 100%; background: #fff; border-radius: 16px 16px 0 0; box-shadow: var(--shadow-win); padding: 12px 0 0; display: flex; flex-direction: column; overflow: hidden; }
.gbl-rqw-body { display: flex; flex-direction: column; gap: 12px; padding: 14px; }
.gbl-rqw .gbl-mini-card { padding: 10px 12px; }
.gbl-rqw-ai { padding: 10px 12px 12px; border-radius: 12px; border: 1px solid #dfe3fb; background: var(--pa-ai-bg); }
.gbl-rqw-ai .gbl-sugg-l { margin-bottom: 6px; }
.gbl-rqw .gbl-checked li { font-size: 12.5px; color: var(--pa-ink); }
.gbl-rqw .gbl-approve-row { padding: 8px 8px 8px 12px; border: 1px solid var(--pa-line); box-shadow: none; }
.gbl-rqw .gbl-approve-row > span:first-child { font-size: 13px; }
.gbl-rqw .gbl-b { padding: 7px 12px; font-size: 12.5px; gap: 6px; }
.gbl-rqw .gbl-b svg { width: 13px; height: 13px; }

/* transactions + matched transfer */
.gbl-mtx { container-type: inline-size; width: 100%; background: #fff; border-radius: 16px 16px 0 0; box-shadow: var(--shadow-win); padding: 12px 0 0; }
.gbl-mtx-top { display: flex; align-items: center; justify-content: space-between; padding: 0 14px 10px; border-bottom: 1px solid var(--pa-line); }
.gbl-mtx-title { font-size: 13px; font-weight: 600; color: var(--pa-blue); }
.gbl-mtx-row { display: grid; grid-template-columns: minmax(0, 1fr) 84px 168px; gap: 10px; align-items: center; padding: 9px 14px; border-bottom: 1px dashed var(--pa-line); }
.gbl-mtx-row strong { display: block; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gbl-mtx-row small { display: block; font-size: 11px; color: var(--pa-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gbl-mtx-row > b { text-align: right; font-weight: 600; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.gbl-mtx-row > b.is-in { color: var(--green); }
.gbl-mtx-cat { display: flex; align-items: center; min-width: 0; font-size: 12px; }
.gbl-mtx-cat:has(.gbl-tx-ai.is-on) .gbl-tx-skel { display: none; }
.gbl-mtx-cat .gbl-tx-skel { width: 100px; }
.gbl-js [data-gbl-scene] .gbl-mtx-row:has(.gbl-tx-ai.is-on) { animation: gbl-rowflash 1.1s ease-out; }
.gbl-tx-ai.is-match svg { color: var(--green); }
.gbl-mtx-pair { position: relative; transition: background .5s; }
.gbl-mtx-pair::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: 14px; width: 4px; border: 2px solid var(--green); border-right: 0; border-radius: 6px 0 0 6px; opacity: 0; transition: opacity .4s; }
.gbl-mtx-pair.is-matched { background: rgba(15, 155, 118, .05); }
.gbl-mtx-pair.is-matched::before { opacity: 1; }
.gbl-mtx-pair.is-matched .gbl-mtx-cat .gbl-tx-ai { visibility: hidden; }
/* centred on the line between the two amounts without a transform: the scene engine's pop-in ([data-t].is-on)
   animates transform and would drop a translateY(-50%) (the badge sat 12px low) */
.gbl-mtx-badge { position: absolute; left: calc(100% - 182px); top: 0; bottom: 0; height: max-content; margin: auto 0; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; background: var(--green); color: #fff; font-size: 11.5px; font-weight: 600; box-shadow: 0 6px 16px -6px rgba(15,155,118,.6); }
.gbl-mtx-badge svg { width: 12px; height: 12px; }
.gbl-mtx-foot { display: flex; gap: 10px; margin: 12px 14px 14px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--pa-ai-line); background: var(--pa-ai-bg); font-size: 12px; color: var(--pa-text); }
.gbl-mtx-foot > svg { width: 16px; height: 16px; color: var(--pa-ai); flex: none; margin-top: 1px; }
.gbl-mtx-foot strong { display: block; font-size: 12.5px; color: var(--pa-ink); font-weight: 600; }

/* homeowner chat */
.gbl-hchat { width: 100%; height: 372px; background: #fff; border-radius: 16px 16px 0 0; box-shadow: var(--shadow-win); display: flex; flex-direction: column; overflow: hidden; }
.gbl-hchat-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--pa-line); }
.gbl-hchat-head .gbl-greet-ico { width: 34px; height: 34px; flex: none; }
.gbl-hchat-head .gbl-greet-ico svg { width: 17px; height: 17px; }
.gbl-hchat-head > span:nth-child(2) { flex: 1; min-width: 0; }
.gbl-hchat-head strong { display: block; font-size: 13.5px; }
.gbl-hchat-head small { display: block; font-size: 11.5px; color: var(--pa-mute); }
.gbl-hchat-thread { flex: 1; min-height: 0; overflow: hidden; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.gbl-hchat-thread > * { flex: none; }
.gbl-hmsg { align-self: flex-start; max-width: 88%; padding: 9px 12px; border-radius: 14px 14px 14px 4px; background: var(--pa-bg); font-size: 13px; line-height: 1.5; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.gbl-hmsg.is-owner { align-self: flex-end; background: var(--pa-blue); color: #fff; border-radius: 14px 14px 4px 14px; }
.gbl-hmsg .gbl-cite { border-color: #dfe3fb; color: var(--pa-ai); background: #fff; border-radius: 6px; font-size: 11.5px; }
.gbl-handoff { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; background: var(--amber-50); color: var(--amber); font-size: 11.5px; font-weight: 600; }
.gbl-handoff svg { width: 13px; height: 13px; }
.gbl-typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 11px 12px; border-radius: 14px 14px 14px 4px; background: var(--pa-bg); }
.gbl-typing i { width: 6px; height: 6px; border-radius: 50%; background: #aab2c0; animation: gbl-dot 1s infinite ease-in-out; }
.gbl-typing i:nth-child(2) { animation-delay: .15s; }
.gbl-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes gbl-dot { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-3px); opacity: 1; } }

@media (max-width: 1100px) {
  .gbl-ap-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .gbl-ap-vis { padding: 32px 24px 0; }
}
/* one column: the demo window goes right under the heading, so the steps it walks through follow it, not the other
   way round (copy before demo left the demo playing off screen) */
@media (max-width: 860px) {
  .gbl-ap-panel { display: flex; flex-direction: column; gap: 14px; padding: 32px 32px 36px; }
  .gbl-ap-copy { display: contents; }
  .gbl-ap-copy > * { order: 4; }
  .gbl-ap-copy > .gbl-auto-tag { order: 1; align-self: flex-start; }
  .gbl-ap-copy > .gbl-h3 { order: 2; }
  .gbl-ap-vis { order: 3; margin: 6px -32px 8px; padding: 28px 32px; }
  .gbl-ap-vis > .gbl-rqw, .gbl-ap-vis > .gbl-mtx, .gbl-ap-vis > .gbl-hchat { border-radius: 16px; }
}
/* Narrow ledger (phones): drop the amount column so names fit. */
@container (max-width: 440px) {
  .gbl-mtx-row { grid-template-columns: minmax(0, 1fr) 156px; }
  .gbl-mtx-row > b { display: none; }
  .gbl-mtx-cat .gbl-tx-skel { width: 80px; }
  .gbl-mtx-badge { left: calc(100% - 168px); }
}
@container (max-width: 340px) {
  .gbl-mtx-row { grid-template-columns: minmax(0, 1fr) 132px; }
  .gbl-mtx-badge { left: calc(100% - 144px); }
}
@media (max-width: 768px) {
  .gbl-ap { border-radius: 22px; }
  .gbl-ap-head { flex-wrap: wrap; gap: 12px; padding: 18px 16px 14px; }
  .gbl-ap-head .gbl-brief-ico { width: 40px; height: 40px; border-radius: 12px; }
  .gbl-ap-title strong { font-size: 17px; }
  .gbl-ap-title small { font-size: 14px; align-items: flex-start; }
  .gbl-ap-title small svg { margin-top: 3px; }
  .gbl-ap-due { display: none; }
  .gbl-ap-tabs { gap: 6px; padding: 0 12px 14px; }
  .gbl .gbl-ap-tab { padding: 10px 10px 12px; border-radius: 14px; font-size: 13px; line-height: 1.3; gap: 2px; }
  .gbl .gbl-ap-tab b { font-size: 24px; }
  .gbl-ap-more { display: none; }
  .gbl-ap-panel { padding: 24px 16px 28px; gap: 12px; }
  .gbl-ap-copy .gbl-h3 { font-size: 20px; }
  .gbl-ap-copy > p, .gbl-ap-points { font-size: 16px; }
  .gbl-ap-steps { gap: 14px; }
  .gbl-ap-steps strong { font-size: 16px; }
  .gbl-ap-vis { margin: 4px -16px 6px; padding: 16px 12px; }
  .gbl-ap-vis > .gbl-rqw { min-height: 540px; } /* the finished request at 320px */
  .gbl-ap-vis > .gbl-mtx { min-height: 440px; }
  .gbl-ap-vis > .gbl-hchat { height: 440px; min-height: 0; } /* the thread scrolls, like a chat */
  /* stacked, the shorter panels would carry ~350px of blank to match the request one; the tabs sit above the
     panel, so letting its height follow the tab only moves what's below */
  .gbl-ap .gbl-ap-panel { min-height: 0 !important; }
}
@media (max-width: 360px) {
  .gbl .gbl-ap-tab { padding: 10px 8px 12px; font-size: 12px; }
  .gbl .gbl-ap-tab b { font-size: 22px; }
}

/* ---------- homepage: final notice deliverable ---------- */
.gbl-mini-letter { margin: 12px 0; padding: 12px; border-radius: 12px; background: var(--bg); font-size: 12.5px; line-height: 1.55; color: var(--pa-text); }
.gbl-mini-letter .gbl-recips { padding-bottom: 8px; margin-bottom: 8px; }
.gbl-mini-letter .gbl-recips { gap: 4px; }
.gbl-mini-letter .gbl-recips span { font-size: 11px; padding: 3px 6px; }
.gbl-mini-letter b { display: block; color: var(--pa-ink); font-size: 12.5px; margin-bottom: 4px; }
.gbl-b svg { width: 14px; height: 14px; flex: none; }

/* ---------- homepage: customizing (expanded Gable) ---------- */
.gbl-mo-page { display: flex; padding-top: 2px; }
.gbl-mo-scene { flex: 1; min-height: 0; box-shadow: none; }
.gbl-mo-scene .gbl-mo-rail > span.is-on.is-was { background: none; font-weight: 400; box-shadow: none; }
.gbl-mo-scene .gbl-mo-rail > span.is-on.is-was svg { color: var(--pa-text); }
.gbl-mo-scene .gbl-mo-main { min-height: 0; overflow: hidden; }
.gbl-mo-scene .gbl-rules li { font-size: 13px; padding: 10px 12px; }
.gbl-rule-live { position: relative; background: var(--pa-ai-bg) !important; box-shadow: inset 0 0 0 1px #dfe3fb; }
.gbl-rule-txt { flex: 1; min-width: 0; margin: 0; }
.gbl-rule-saved { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--green); white-space: nowrap; }
.gbl-rule-saved svg { width: 12px; height: 12px; }
.gbl-wf { padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; }
.gbl-wf-ask { border: 1px solid var(--pa-line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 2px 10px -4px rgba(20, 30, 50, .12); }
.gbl-wf-ask p { font-size: 13px; line-height: 1.5; min-height: 39px; color: var(--pa-ink); }
.gbl-wf-ask .gbl-b { align-self: flex-end; padding: 7px 12px; font-size: 12px; }
.gbl-comp-txt.is-done::after { display: none; }
.gbl-mo-main .gbl-flow-sm { padding: 0; gap: 10px; }
.gbl-flow-sm::before { left: 22px; top: 24px; bottom: 24px; }
.gbl-flow-sm .gbl-flow-node { padding: 8px 12px 8px 8px; gap: 10px; }
.gbl-flow-sm .gbl-flow-ico { width: 30px; height: 30px; border-radius: 8px; }
.gbl-flow-sm .gbl-flow-ico svg { width: 16px; height: 16px; }
.gbl-flow-sm .gbl-flow-node small { font-size: 11px; }
.gbl-flow-sm .gbl-flow-node strong { font-size: 13px; font-weight: 600; line-height: 1.35; }
.gbl-wf-foot { display: flex; align-items: center; gap: 12px; padding-top: 2px; }
.gbl-wf-on { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 12.5px; color: var(--pa-ink); padding: 4px 6px 4px 4px; border-radius: 8px; }
.gbl-wf-foot small { font-size: 12px; color: var(--green); font-weight: 600; }
@media (max-width: 1200px) {
  .gbl-mo.gbl-mo-scene { grid-template-columns: 136px minmax(0, 1fr); }
  .gbl-mo-scene .gbl-mo-rail { display: flex; }
  .gbl-mo-scene .gbl-mo-rail .gbl-mo-search, .gbl-mo-scene .gbl-mo-rail small, .gbl-mo-scene .gbl-mo-rail .gbl-mo-old { display: none; }
}
@media (max-width: 992px) {
  .gbl-mo.gbl-mo-scene { grid-template-columns: 168px minmax(0, 1fr); }
  .gbl-mo-scene .gbl-mo-rail .gbl-mo-search, .gbl-mo-scene .gbl-mo-rail small, .gbl-mo-scene .gbl-mo-rail .gbl-mo-old { display: flex; }
  .gbl-mo-scene .gbl-mo-rail small { display: block; }
}
@media (max-width: 768px) {
  .gbl-mo.gbl-mo-scene { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .gbl-mo-scene .gbl-mo-rail { display: flex; flex-direction: row; gap: 4px; padding: 8px; border-right: 0; border-bottom: 1px solid var(--pa-line); }
  .gbl-mo-scene .gbl-mo-rail > span:not(.gbl-mo-key), .gbl-mo-scene .gbl-mo-rail small { display: none !important; }
  .gbl-mo-scene .gbl-mo-rail > span { flex: 1; justify-content: center; font-size: 12px; padding: 6px; }
  .gbl-mo-scene .gbl-rules { padding: 10px; }
  .gbl-mo-scene .gbl-rules li:nth-child(2) { display: none; }
  .gbl-wf { padding: 10px; gap: 10px; }
  .gbl-wf.is-built .gbl-wf-ask { display: none; }
  .gbl-flow-sm .gbl-flow-node strong { font-size: 12.5px; }
  .gbl-mo-main .gbl-flow-sm { gap: 6px; }
  .gbl-flow-sm .gbl-flow-node { padding: 6px 10px 6px 6px; }
  .gbl-flow-sm::before { left: 20px; }
  .gbl-wf-foot small { display: none; }
}

/* ---------- narrow phones: keep wide tables and button rows inside their cards ---------- */
@media (max-width: 768px) {
  .gbl-dr .gbl-actions { flex-wrap: wrap; }
  .gbl-job-brief, .gbl-job-work { min-width: 0; }
  .gbl-budget-t td:last-child { width: auto; }
  .gbl-budget-t th, .gbl-budget-t td { padding-left: 4px; padding-right: 4px; }
  .gbl-budget-t td:first-child { font-size: 12px; }
  .gbl-dr .gbl-je { font-size: 11.5px; }
  .gbl-dr .gbl-je th, .gbl-dr .gbl-je td { padding: 5px 5px; }
  .gbl-je td:first-child { white-space: normal; width: 64px; }
  .gbl-je tr.is-sub td:nth-child(2) { padding-left: 12px; }
}
@media (max-width: 768px) {
  .gbl-dr .gbl-rows-why li { grid-template-columns: 1fr auto; row-gap: 2px; }
  .gbl-dr .gbl-rows-why li span:nth-child(2) { display: block; grid-column: 1 / -1; grid-row: 2; font-size: 12.5px; line-height: 1.45; }
}

/* ---------- task panels: "working on it" card fills the right side while the steps run ---------- */
.gbl-wip { background: #fff; border: 1px solid var(--g-100); border-radius: 18px; padding: 22px; box-shadow: 0 18px 40px -24px rgba(38, 37, 112, .35); display: flex; flex-direction: column; gap: 16px; }
.gbl-wip-head { display: flex; align-items: center; gap: 12px; }
.gbl-wip-head > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.gbl-wip-head strong { font-size: 15px; font-weight: 600; color: var(--ink); }
.gbl-wip-head small { font-size: 13px; color: var(--muted); }
.gbl-wip-ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; color: #fff; background: linear-gradient(135deg, #6a6af0, var(--g)); }
.gbl-wip-ico svg { width: 20px; height: 20px; animation: gbl-wip-twinkle 1.6s ease-in-out infinite; }
.gbl-wip-dots { display: flex; gap: 4px; }
.gbl-wip-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--g-300); animation: gbl-wip-dot 1.2s ease-in-out infinite; }
.gbl-wip-dots i:nth-child(2) { animation-delay: .15s; }
.gbl-wip-dots i:nth-child(3) { animation-delay: .3s; }
.gbl-wip-bar { height: 4px; border-radius: 4px; background: var(--g-50); overflow: hidden; }
.gbl-wip-bar i { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, #6a6af0, var(--g)); transform-origin: left; animation: gbl-wip-fill var(--wip, 4s) cubic-bezier(.3, .1, .3, 1) forwards; }
.gbl-wip-doc { display: grid; gap: 10px; padding: 18px; border-radius: 14px; background: #fff; border: 1px solid var(--g-100); }
.gbl-wip-doc i { height: 10px; border-radius: 6px; background: linear-gradient(90deg, #e2e7f7 0%, #f3f5fd 50%, #e2e7f7 100%); background-size: 200% 100%; animation: gbl-shimmer 1.6s linear infinite; }
.gbl-wip-doc i:nth-child(1) { width: 45%; height: 14px; }
.gbl-wip-doc i:nth-child(2) { width: 92%; }
.gbl-wip-doc i:nth-child(3) { width: 84%; }
.gbl-wip-doc i:nth-child(4) { width: 88%; }
.gbl-wip-doc i:nth-child(5) { width: 70%; }
.gbl-wip-doc i:nth-child(6) { width: 38%; }
.gbl-wip.is-table .gbl-wip-doc i:not(:first-child), .gbl-wip.is-pdf .gbl-wip-doc i:not(:first-child) { width: 100%; height: 18px; border-radius: 5px; }
.gbl-wip.is-slides .gbl-wip-doc { grid-template-columns: 1fr 1fr; }
.gbl-wip.is-slides .gbl-wip-doc i:nth-child(1) { grid-column: 1 / -1; }
.gbl-wip.is-slides .gbl-wip-doc i:nth-child(n+2) { width: 100%; height: 44px; border-radius: 10px; }
.gbl-wip.is-slides .gbl-wip-doc i:nth-child(6) { display: none; }
.gbl-wip-src { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gbl-wip-src small { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-right: 2px; }
.gbl-wip-src span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--g-100); font-size: 12.5px; font-weight: 600; color: var(--ink); }
.gbl-wip-src svg { width: 14px; height: 14px; color: var(--g); }
@keyframes gbl-wip-fill { from { transform: scaleX(0); } to { transform: scaleX(.96); } }
@keyframes gbl-wip-dot { 0%, 80%, 100% { opacity: .35; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes gbl-wip-twinkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(.86) rotate(12deg); } }
@media (max-width: 768px) { .gbl-wip { padding: 16px; border-radius: 16px; } .gbl-wip-doc { padding: 14px; } }
@media (prefers-reduced-motion: reduce) { .gbl-wip * { animation: none !important; } }

/* ---------- final call to action (Gable page, and index2), in PayHOA's primary blue ---------- */
.gbl-final-sec { padding: 0 0 40px; }
.gbl-final { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-xl); padding: 88px 48px 0; text-align: center; color: #fff;
  background: linear-gradient(150deg, #1c3a94 0%, #2256d3 48%, #2a6be6 100%); display: flex; flex-direction: column; align-items: center; }
.gbl-final-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%); }
.gbl-final-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%); }
.gbl .gbl-final .gbl-h2 { color: #fff; max-width: 760px; }
.gbl-final > p { font-size: 20px; color: #fff; max-width: 620px; margin-top: 16px; }
.gbl-final-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }
.gbl .gbl-final .gbl-final-note { font-size: 14px; margin-top: 16px; color: #fff; }
.gbl a.gbl-btn-onblue, .gbl a.gbl-btn-onblue:visited { background: #fff; color: #2246ab; box-shadow: 0 10px 24px -10px rgba(16, 30, 90, .5); }
.gbl a.gbl-btn-onblue:hover { background: #eff7ff; color: #1b3785; transform: translateY(-1px); }
/* the refreshed footer houses (gable/cta-houses.svg), edge to edge along the bottom; they rise in once */
.gbl .gbl-final-houses { display: block; width: calc(100% + 96px); max-width: none; height: auto; margin: 48px -48px 0; }
.gbl-js .gbl-final-houses { opacity: 0; transform: translateY(24px); transition: opacity .9s .3s, transform 1.1s .3s var(--ease); }
.gbl-js .gbl-final.is-in .gbl-final-houses { opacity: 1; transform: none; }
/* on WordPress the site's own cyan band still renders below the page content; this card replaces it */
body:has(.gbl-final) .payhoa-footer-houses { display: none; }
@media (max-width: 768px) {
  .gbl-final-sec { padding-bottom: 24px; }
  .gbl-final { padding: 56px 20px 0; border-radius: 28px; }
  .gbl-final > p { font-size: 16px; }
  .gbl-final-cta { flex-direction: column; width: 100%; }
  .gbl-final-cta .gbl-btn { width: 100%; }
  .gbl .gbl-final-houses { width: calc(200% + 40px); margin: 32px 0 0; } /* flex-centred, so it crops evenly on both sides */
}
@media (prefers-reduced-motion: reduce) { .gbl-js .gbl-final-houses { opacity: 1; transform: none; transition: none; } }

/* =========================================================================
   Pause control (WCAG 2.2.2)
   The Gable section's demo draws its own button in gable.js; home2.js draws the same one for the homepage's other
   animations and home2.css, which loads after this file, adds that page's variants (.is-dark and the orbit's row).
   ========================================================================= */
.gbl .hx-pause { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px 0 10px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink); background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(28, 39, 55, .06); transition: border-color .2s, color .2s; }
.gbl .hx-pause:hover { border-color: var(--g-200); color: var(--g); background: #fff; }
.gbl .hx-pause:focus-visible { outline: 3px solid var(--g-300); outline-offset: 2px; }
.hx-pause svg { width: 16px; height: 16px; }
.hx-pause .hx-i-play { display: none; }
.hx-pause[aria-pressed="true"] .hx-i-play { display: block; }
.hx-pause[aria-pressed="true"] .hx-i-pause { display: none; }
.hx-pause-row { display: flex; justify-content: flex-end; margin-top: 12px; }
/* Without a button (reduced motion) the Gable section's own buttons keep a 40px gap below the demo. */
.gbl-home .gbl-demo + .gbl-home-cta { margin-top: 40px; }
@media (prefers-reduced-motion: reduce) { .hx-pause { display: none !important; } }