/* =========================================================================
   Features redesign: one page per feature (features2-<slug>.html). Loaded after gable.css + home2.css.
   Page wrapper: .gbl.gbl-home2.ft. Structure comes from tools/features2.mjs; every class here is ft- prefixed.
   Colors: the PayHOA primary scale only (decision 2); Gable indigo only inside .ft-gable. Mocks copy the real app UI.
   ========================================================================= */

.ft { --ft-head: 80px; --ft-sub: 57px; }
/* mock text on white passes AA here (the shared tokens are 3.8:1 muted and 3.5:1 green at 11–12px) */
.ft .gbl-pa, .ft .ft-vis, .ft .ft-hero-scene { --pa-mute: #636d7e; }
.ft .gbl-pa .hx-amt:not(.ft-neg), .ft .ft-vis .hx-amt:not(.ft-neg) { color: #0b7a5c; }
.ft [id] { scroll-margin-top: calc(var(--ft-head) + var(--ft-sub) + 16px); }
.ft .ft-ico { width: 20px; height: 20px; fill: currentColor; flex: none; }

/* ---------- sticky sub-nav: sibling features in the category (replaces the old tab bar) ---------- */
.ft-subnav { position: sticky; top: var(--ft-head); z-index: 60; background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--line); backdrop-filter: saturate(1.4) blur(8px); -webkit-backdrop-filter: saturate(1.4) blur(8px); }
.ft-subnav-in { max-width: 1545px; margin: 0 auto; padding: 0 60px; display: flex; align-items: center; gap: 20px; min-height: 56px; }
.gbl a.ft-subnav-cat { display: inline-flex; align-items: center; gap: 8px; flex: none; font-size: 15px; font-weight: 600; color: var(--ink); padding-right: 20px; border-right: 1px solid var(--line); min-height: 44px; }
.ft-subnav-cat .ft-ico { width: 20px; height: 20px; color: var(--pb-700); }
.gbl a.ft-subnav-cat:hover { color: var(--pb-700); }
.ft-subnav-list { display: flex; gap: 0; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
/* room inside the scroll box for the focus ring and the current-page underline (overflow-x clips both axes) */
.ft-subnav-list { padding-top: 6px; padding-bottom: 6px; margin-top: -6px; margin-bottom: -6px; }
.ft-subnav-list.is-scroll { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); padding-right: 24px; }
.ft-subnav-list.is-scroll.is-left { -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 32px), transparent); }
.ft-subnav-list::-webkit-scrollbar { display: none; }
.ft-subnav-list li { flex: none; }
.gbl a.ft-subnav-link { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 11px; border-radius: 10px; font-size: 15px; font-weight: 600; color: var(--muted); white-space: nowrap; transition: color .2s, background .2s; }
.gbl a.ft-subnav-link:hover { color: var(--ink); background: #f3f6fb; }
.gbl a.ft-subnav-link.is-current { color: var(--pb-700); }
.ft-subnav-link.is-current::after { content: ""; position: absolute; left: var(--ft-lpad, 11px); right: var(--ft-lpad, 11px); bottom: -6px; height: 3px; border-radius: 3px 3px 0 0; background: var(--pb-600); }
.ft-new { display: inline-block; padding: 3px 7px; border-radius: 999px; background: var(--pb-50); border: 1px solid var(--pb-100); color: var(--pb-700); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; line-height: 1.1; }

/* ---------- hero (home2 hero card, light feature variant) ----------
   Dima, 2026-09-26: the brand-blue card stays for the homepage, solutions and the footer CTA. On feature pages the
   hero is light, so the product replica carries the color and the footer CTA is the page's one blue block. */
.ft .hx-hero-card { color: var(--ink); background: linear-gradient(160deg, #f5f9ff 0%, var(--pb-50) 45%, var(--pb-100) 100%); box-shadow: inset 0 0 0 1px var(--pb-100); }
.ft .hx-hero-glow { background: radial-gradient(42% 60% at 82% 8%, rgba(42, 107, 230, .16), transparent 70%), radial-gradient(40% 50% at 0% 100%, rgba(255, 255, 255, .9), transparent 70%); }
.ft .hx-hero-glow::after { background-image: radial-gradient(rgba(34, 86, 211, .16) 1px, transparent 1px); }
.gbl .ft-hero .hx-h1, .gbl.ft .ft-hero .hx-h1 { color: var(--ink); }
.ft-hero .hx-h1 span { color: var(--pb-600); }
.ft-hero .hx-hero-sub, .ft-hero .hx-hero-note { color: var(--body); }
.ft-hero .hx-hero-note svg { color: var(--pb-600); }
.gbl .ft-hero .hx-hero-note a { color: var(--pb-700); }
.gbl .ft-hero .hx-hero-note a:hover { color: var(--pb-900); }
.gbl a.gbl-btn-soft:hover .gbl-rot90 { transform: rotate(90deg) translateX(3px); }
/* the app frame needs an edge on the light card; the pause button uses its light (default) look */
.gbl .ft-hero .hx-pa-hero { box-shadow: 0 0 0 1px var(--pb-100), 0 40px 80px -30px rgba(24, 50, 140, .35); }
.gbl .ft-hero .hx-pause.is-dark, .gbl .ft-hero .hx-pause.is-dark:hover { color: var(--ink); background: #fff; border-color: var(--line); backdrop-filter: none; -webkit-backdrop-filter: none; }
.gbl .ft-hero .hx-pause.is-dark:hover { border-color: var(--pb-200); color: var(--pb-700); }
.ft-hero .hx-hero-copy { padding-top: 64px; }
.ft-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-size: 15px; font-weight: 600; color: var(--body); }
.ft-crumbs li { display: inline-flex; align-items: center; }
.ft-crumbs li + li::before { content: ""; width: 14px; height: 14px; margin: 0 6px; background: currentColor; opacity: .7;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M184.49,136.49l-80,80a12,12,0,0,1-17-17L159,128,87.51,56.49a12,12,0,1,1,17-17l80,80A12,12,0,0,1,184.49,136.49Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M184.49,136.49l-80,80a12,12,0,0,1-17-17L159,128,87.51,56.49a12,12,0,1,1,17-17l80,80A12,12,0,0,1,184.49,136.49Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.gbl .ft-crumbs a { display: inline-block; padding: 11px 0; margin: -11px 0; color: var(--pb-700); }
.gbl .ft-crumbs a:hover { color: var(--pb-900); }
/* the New chip sits on its own line above the H1 (Earl 2026-10-19; it rode the H1's last line from 10-14). Crumb → chip
   → H1 keeps the 18px crumb → H1 rhythm of the other heroes: 16px above the chip, 12px below it */
.gbl .ft-hero .ft-hero-new { margin: 16px 0 0; line-height: 1; }
.gbl .ft-hero .ft-hero-new + .hx-h1 { margin-top: 12px; }
.gbl .ft-hero .ft-hero-new .ft-new { padding: 5px 9px; border: 0; background: var(--pb-600); color: #fff; font-size: 13px; line-height: 1; letter-spacing: .04em; white-space: nowrap; }
.ft .hx-h1 { margin-top: 18px; }
.gbl .ft .ft-hero .hx-h1, .gbl.ft .ft-hero .hx-h1 { font-size: clamp(38px, 3.4vw, 50px); }
.ft-hero .hx-hero-scene { width: 100%; }
.ft-hero .hx-pa-hero { border-radius: 20px 20px 0 0; }

/* ---------- footnote markers (compliance §2.2: real links, tied to the claim) ---------- */
.ft-fn { font-size: .62em; line-height: 0; vertical-align: super; margin-left: 1px; font-weight: 600; white-space: nowrap; }
/* footnote refs: an invisible hit area of about 24 × 24 px round the digit (SEO S11, P-13) */
.ft-fn a { position: relative; }
.ft-fn a::before { content: ""; position: absolute; inset: -6px -8px; }
.gbl .ft-fn a { color: var(--pb-700); padding: 0 1px; border-radius: 3px; }
.gbl .ft-fn a:hover { color: var(--pb-900); background: var(--pb-50); }

/* ---------- what's included (2×2) ---------- */
.ft .ft-inc-sec { padding-bottom: 40px; }
.ft-inc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 1120px; margin: 0 auto; }
.ft-inc li { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto 1fr; align-content: start; column-gap: 20px; row-gap: 6px; padding: 28px 30px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); }
.ft-inc-ico { grid-row: span 2; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--pb-50); color: var(--pb-700); }
.ft-inc-ico .ft-ico { width: 28px; height: 28px; }
.ft-inc h3 { font-size: 20px; line-height: 1.35; padding-top: 2px; }
.ft-inc p { font-size: 17px; line-height: 1.55; color: var(--body); }
.gbl-js .ft-inc.gbl-reveal-kids li { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--k, 0) * 80ms); }
.gbl-js .ft-inc.gbl-reveal-kids.is-in li { opacity: 1; transform: none; }

/* ---------- detail rows: text + visual, alternating ---------- */
.ft .ft-row { padding: 56px 0; }
.ft-row-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 72px; align-items: center; max-width: 1280px; }
.ft-row.is-flip .ft-row-copy { order: 2; }
.ft-row-copy { display: flex; flex-direction: column; gap: 18px; max-width: 540px; }
.ft-row.is-flip .ft-row-copy { justify-self: end; }
.ft-row-copy p { font-size: 18px; line-height: 1.6; color: var(--body); }
.ft-vis { position: relative; min-width: 0; border-radius: var(--r-xl); padding: 48px 44px; display: flex; align-items: center; justify-content: center; min-height: 420px;
  background: radial-gradient(60% 70% at 85% 0%, rgba(188, 212, 250, .55), transparent 70%), linear-gradient(160deg, var(--pb-50), #e6eefc); }
/* R27 (Dima, 2026-09-26): flipped rows get a white panel with a hairline and a faint dot grid, so the detail rows
   alternate pale blue / white instead of six identical blue panels */
.ft-row.is-flip .ft-vis { background: radial-gradient(rgba(34, 86, 211, .09) 1px, transparent 1.2px) 0 0 / 18px 18px, #fff; box-shadow: inset 0 0 0 1px var(--line); }
.ft-vis-img { margin: 0; padding: 32px; }
.ft-vis-img img { width: auto; max-width: 100%; max-height: 520px; height: auto; }

/* ---------- template capabilities from Earl's 10-16 review (F-B; the content lanes use them, tools/features2.mjs) ---------- */
/* included with 6 cards: 3 × 2 on desktop, 2 columns on tablets (icon above the title), 1 column on phones (as with 4) */
@media (min-width: 1101px) { .ft-inc.is-n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1200px; } }
@media (min-width: 769px) and (max-width: 1100px) { .ft-inc.is-n6 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; } }
@media (min-width: 769px) {
  .ft-inc.is-n6 li { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; padding: 28px 28px 30px; }
  .ft-inc.is-n6 .ft-inc-ico { grid-row: auto; margin-bottom: 10px; }
}
/* details group: one soft band (inset like the hero card) with its own H2 and an optional logo; its rows sit on it */
.ft-group { --ft-band-in: 40px; width: calc(100% - 2 * var(--ft-band-in)); max-width: 1440px; margin: 32px auto; padding: 56px 0 16px; border-radius: var(--r-xl); background: linear-gradient(180deg, #f5f8fe 0%, var(--pb-50) 100%); box-shadow: inset 0 0 0 1px var(--pb-100); }
.ft-group-band { max-width: 1280px; }
.ft-group-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-bottom: 24px; border-bottom: 1px solid var(--pb-100); }
.ft-group-h { margin: 0; font-size: 26px; line-height: 1.3; font-weight: 600; color: var(--ink); }
.ft-group-logo { display: block; width: auto; max-width: 220px; height: 40px; object-fit: contain; }
.ft .ft-group .ft-row { padding: 48px 0; }
.ft-group .ft-row:not(.is-flip) .ft-vis { background: #fff; box-shadow: inset 0 0 0 1px var(--pb-100); }
/* visual {icon}: a text-led row's picture is one icon on a white tile */
.ft-vis-icon-tile { width: 168px; height: 168px; border-radius: 44px; display: grid; place-items: center; background: #fff; color: var(--pb-700); box-shadow: 0 0 0 1px var(--pb-100), 0 34px 64px -36px rgba(24, 50, 140, .5); }
.ft-vis-icon-tile .ft-ico { width: 76px; height: 76px; }
.ft-row.is-flip .ft-vis-icon-tile, .ft-group .ft-vis-icon-tile { background: var(--pb-50); }
@media (max-width: 768px) {
  .ft-group { --ft-band-in: 12px; margin: 20px auto; padding: 36px 0 4px; border-radius: 28px; }
  .ft-group-h { font-size: 22px; }
  .ft-group-logo { height: 32px; }
  .ft .ft-group .ft-row { padding: 32px 0; }
  .ft-vis-icon-tile { width: 120px; height: 120px; border-radius: 32px; }
  .ft-vis-icon-tile .ft-ico { width: 56px; height: 56px; }
}

/* == lane C-FIN == (Earl's 10-16 review: Financial pages only — selectors prefixed or [data-ft="<slug>"]-scoped, never a shared class) */
/* Bank Integrations: the check mock sits inside the Western Alliance Bank band, 24 px narrower on phones, where the payee
   wrapped and clipped; there "Pay to the order of" takes its own line above the payee and the amount */
@media (max-width: 480px) {
  [data-ft="bank-integrations"] .ft-group .ft-chk-pay { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
  [data-ft="bank-integrations"] .ft-group .ft-chk-pay small { grid-column: 1 / -1; }
  [data-ft="bank-integrations"] .ft-group .ft-chk-pay b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* Bank Integrations: the kit "Link offline payments" dialog (SD-11005, ui 10-14) in scene bank-linkpay — detail hero,
   alert, one selectable table with a Selected chip, hint, "{n} selected · $X" footer */
[data-ft="bank-integrations"] .ft-lp2-hero { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; background: #f7f9fc; font-size: 12.5px; }
[data-ft="bank-integrations"] .ft-lp2-hero b { display: block; font-weight: 600; } [data-ft="bank-integrations"] .ft-lp2-hero small { display: block; font-size: 11px; color: var(--pa-mute); }
[data-ft="bank-integrations"] .ft-lp2-hero .ft-lp2-amt { font-size: 16px; font-variant-numeric: tabular-nums; }
[data-ft="bank-integrations"] .ft-lp2-alert { display: flex; gap: 8px; align-items: flex-start; }
[data-ft="bank-integrations"] .ft-lp2-ico { display: grid; flex: none; margin-top: 1px; } [data-ft="bank-integrations"] .ft-lp2-ico .ft-ico { grid-area: 1 / 1; width: 16px; height: 16px; color: #1565c0; transition: opacity .3s; }
[data-ft="bank-integrations"] .ft-lp2-ico .ft-ico:last-child { opacity: 0; color: #12805c; }
[data-ft="bank-integrations"] .ft-lp2-alert.is-ok .ft-lp2-ico .ft-ico:first-child { opacity: 0; } [data-ft="bank-integrations"] .ft-lp2-alert.is-ok .ft-lp2-ico .ft-ico:last-child { opacity: 1; }
[data-ft="bank-integrations"] .ft-lp2-tbl { border: 1px solid var(--pa-line); border-radius: 10px; padding: 8px 12px 2px; }
[data-ft="bank-integrations"] .ft-lp2-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 11.5px; }
[data-ft="bank-integrations"] .ft-lp2-search { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex: 1; max-width: 230px; padding: 5px 9px; border: 1px solid var(--pa-line); border-radius: 8px; color: var(--pa-mute); white-space: nowrap; overflow: hidden; }
[data-ft="bank-integrations"] .ft-lp2-search .ft-ico { flex: none; width: 13px; height: 13px; }
[data-ft="bank-integrations"] .ft-lp2-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border: 1px solid var(--pa-line); border-radius: 999px; font-weight: 600; color: var(--pa-text); }
[data-ft="bank-integrations"] .ft-lp2-chip .ft-ico { width: 13px; height: 13px; } [data-ft="bank-integrations"] .ft-lp2-chip i { font-style: normal; min-width: 16px; padding: 0 4px; border-radius: 999px; background: #eef2f8; text-align: center; font-variant-numeric: tabular-nums; }
[data-ft="bank-integrations"] .ft-lp2-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) 84px minmax(0, .8fr) 68px; gap: 8px; align-items: center; margin: 0; padding: 7px 0; border-top: 1px solid var(--pa-line); font-size: 12px; }
[data-ft="bank-integrations"] .ft-lp2-row > span:last-child { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
[data-ft="bank-integrations"] .ft-lp2-row.is-head { border-top: 0; padding-top: 2px; font-size: 11px; font-weight: 600; color: var(--pa-mute); }
[data-ft="bank-integrations"] .ft-lp2-row.is-head > span:last-child { font-weight: 600; }
[data-ft="bank-integrations"] .ft-lp2-row b { display: block; font-weight: 600; } [data-ft="bank-integrations"] .ft-lp2-row small { display: block; font-size: 11px; color: var(--pa-mute); }
[data-ft="bank-integrations"] .ft-lp2-row .ft-hide-sm { color: var(--pa-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-ft="bank-integrations"] .ft-lp2-search em { min-width: 0; font-style: normal; overflow: hidden; text-overflow: ellipsis; }
/* the cursor art's tip sits ~10 px right of its anchor: widen the header checkbox's hit box to the left so the press lands on the box */
[data-ft="bank-integrations"] .ft-lp2-row .ft-boxhit { padding-left: 20px; margin-left: -20px; }
[data-ft="bank-integrations"] .ft-lp2-hint { margin: 8px 0 0; font-size: 11px; color: var(--pa-mute); }
@media (max-width: 560px) { [data-ft="bank-integrations"] .ft-lp2-row { grid-template-columns: 22px minmax(0, 1fr) 76px 64px; } }
/* Payables & Vendors: the kit payables Inbox in replica payables-inbox — list rows (subject, sender • time, Attachments,
   green "1 payable" badge, archive) and the selected email's pane with "Create payable from attachment" */
[data-ft="payables-vendors"] .ft-apin2-row { display: grid; grid-template-columns: minmax(0, 1fr) 16px; gap: 10px; align-items: start; margin: 0 -8px; padding: 9px 8px; border-bottom: 1px solid var(--pa-line); border-radius: 8px; font-size: 12.5px; }
[data-ft="payables-vendors"] .ft-apin2-row.is-sel { background: #eff7ff; border-bottom-color: transparent; }
[data-ft="payables-vendors"] .ft-apin2-row b { display: block; font-weight: 600; } [data-ft="payables-vendors"] .ft-apin2-row small { display: block; font-size: 11px; color: var(--pa-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-ft="payables-vendors"] .ft-apin2-row > .ft-ico { width: 16px; height: 16px; color: var(--pa-mute); }
[data-ft="payables-vendors"] .ft-apin2-att { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; font-size: 11.5px; font-weight: 600; } [data-ft="payables-vendors"] .ft-apin2-att .ft-ico { width: 12px; height: 12px; }
[data-ft="payables-vendors"] .ft-apin2-att em { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: #e7f6ee; color: #0f5b3a; font-style: normal; font-size: 11px; font-weight: 600; }
[data-ft="payables-vendors"] .ft-apin2-pane { display: grid; justify-items: start; gap: 2px; margin-top: 12px; padding: 12px; border: 1px solid var(--pa-line); border-radius: 10px; font-size: 12.5px; }
[data-ft="payables-vendors"] .ft-apin2-pane b { font-weight: 600; } [data-ft="payables-vendors"] .ft-apin2-pane small { font-size: 11px; color: var(--pa-mute); }
[data-ft="payables-vendors"] .ft-apin2-pane .gbl-pa-btn { margin-top: 8px; } [data-ft="payables-vendors"] .ft-apin2-pane .gbl-pa-btn i { font-style: normal; } [data-ft="payables-vendors"] .ft-apin2-pane .gbl-pa-btn .ft-ico { width: 14px; height: 14px; }
/* Budgets & Reports: Budget Overview after the 10-12 kit conversion (scene budgets-overview) — variance as a light status
   badge with a dot; category rows = name, "actual of budgeted" meta line, progress bar (no dot) */
[data-ft="budgets-reports"] .ft-bo-cards b.ft-bo2-var { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: 999px; background: #e7f6ee; color: #0f5b3a; font-size: 10.5px; }
[data-ft="budgets-reports"] .ft-bo-cards b.ft-bo2-var::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #12805c; }
[data-ft="budgets-reports"] .ft-bo2-list { margin: 0; padding: 0; list-style: none; }
[data-ft="budgets-reports"] .ft-bo2-list li { display: grid; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--pa-line); font-size: 12.5px; }
[data-ft="budgets-reports"] .ft-bo2-list li:last-child { border-bottom: 0; }
[data-ft="budgets-reports"] .ft-bo2-list b { font-weight: 600; color: var(--pa-ink); } [data-ft="budgets-reports"] .ft-bo2-list small { font-size: 11.5px; color: var(--pa-mute); font-variant-numeric: tabular-nums; }
[data-ft="budgets-reports"] .ft-bo2-list .ft-bar { margin-top: 5px; }
/* Budgets & Reports: the create-draft dialog's second stage keeps only the chosen method card (scene budgets-draft), and
   the draft page's "Export as PDF" is a split button */
[data-ft="budgets-reports"] .ft-bd-ways { grid-template-columns: minmax(0, 1fr); }
[data-ft="budgets-reports"] .ft-bd-split { display: inline-flex; margin: 0 -4px 0 4px; padding-left: 6px; border-left: 1px solid var(--pa-line); font-style: normal; }
/* == /lane C-FIN == */

/* ---------- app replica pieces (v2-layout/stripe-treasury, accounts-payable); fictional data ---------- */
.ft-vis .gbl-pa-card, .ft-hero-scene .gbl-pa-card { color: var(--pa-ink); font-size: 13px; line-height: 1.45; text-align: left; }
.ft-card { width: 100%; max-width: 460px; padding: 18px 20px; box-shadow: 0 1px 2px rgba(28, 39, 55, .05), 0 24px 48px -24px rgba(24, 50, 140, .35); }
.ft-card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ft-card-h strong { font-size: 15px; font-weight: 600; }
.ft-link { font-size: 12.5px; font-weight: 600; color: var(--pa-blue); }
.ft-org { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--pa-text); }
.ft-org .ft-ico { width: 16px; height: 16px; }
.ft-org .ft-ico:last-child { width: 12px; height: 12px; }
.ft-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: #f5f5f5; color: #424242; }
.ft-chip.is-ok { background: #e8f5e9; color: #2e7d32; }
.ft-chip.is-ok.is-info, .ft-chip.is-info { background: #e3f2fd; color: #1565c0; }

/* balance card (dashboard) */
.ft-bal { padding: 16px 18px 6px; }
.ft-bal-head { display: flex; flex-direction: column; gap: 4px; padding: 2px 0 14px; border-bottom: 1px solid var(--pa-line); margin-bottom: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='120' fill='none' stroke='%23eef1f6' stroke-width='1.5'%3E%3Cpath d='M180 120C220 60 300 20 400 10M220 120C260 70 330 40 400 34M260 120c30-34 80-56 140-60'/%3E%3C/svg%3E") right top / 400px 120px no-repeat; }
.ft-bal-head.is-compact { padding-bottom: 12px; }
.ft-bal-t { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--pa-ink); }
.ft-stripe-badge { width: 88px; height: 20px; }
.ft-stripe-badge.is-lg { width: 132px; height: 30px; }
.ft-bal-amt { font-size: 30px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--pa-ink); display: inline-block; transform-origin: left center; }
.ft-bal-amt.hx-bump { animation: hx-bump .6s var(--ease); }
.ft-bal-pend { font-size: 12.5px; font-weight: 600; color: var(--pb-600); }
.ft-act-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.ft-act-h strong { font-size: 14px; }
.ft-rows .hx-av .ft-ico { width: 16px; height: 16px; }
.ft .hx-pay-who small { overflow: hidden; text-overflow: ellipsis; }
.ft .hx-amt.ft-neg { color: var(--pa-ink); }
.ft-hero-scene .ft-rows { max-height: 360px; overflow: hidden; }
.ft-hero-scene .gbl-pa-btn .ft-ico, .ft-card .gbl-pa-btn .ft-ico { width: 15px; height: 15px; }

/* dialogs: Move money list → Transfer money stepper → Review details → Transfer initiated */
.ft-scrim { position: absolute; inset: 0; z-index: 6; background: rgba(14, 18, 27, .32); }
/* centered with margins, not transform: the engine's gbl-pop entrance animates transform */
.ft-dlg { position: absolute; z-index: 7; left: 0; right: 0; top: 84px; margin: 0 auto; width: min(380px, calc(100% - 32px)); background: #fff; border-radius: 16px; box-shadow: 0 30px 60px -20px rgba(14, 18, 27, .45); padding: 18px 20px; }
.ft-dlg-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ft-dlg-h strong { font-size: 16px; font-weight: 600; }
.ft-dlg-h > .ft-ico { width: 16px; height: 16px; color: var(--pa-mute); }
.ft-mm li { display: grid; grid-template-columns: 36px minmax(0, 1fr) 16px; gap: 12px; align-items: center; padding: 10px 8px; border-radius: 10px; }
.ft-mm li + li { border-top: 1px solid var(--pa-line); }
.ft-mm li > .ft-ico:first-child { width: 36px; height: 36px; padding: 9px; border-radius: 50%; background: var(--pb-50); color: var(--pa-blue); }
.ft-mm li > .ft-ico:last-child { width: 14px; height: 14px; color: var(--pa-mute); }
.ft-mm b { display: block; font-size: 13.5px; }
.ft-mm small { display: block; font-size: 12px; color: var(--pa-mute); }
.ft-mm li.is-pressed { background: #f3f6fb; }
.ft-steps { display: inline-flex; gap: 4px; }
.ft-steps i { width: 26px; height: 4px; border-radius: 2px; background: #e3e7ee; }
.ft-steps i.is-on { background: var(--pa-blue); }
.ft-fld { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.ft-fld small { font-size: 12px; font-weight: 600; color: var(--pa-text); }
.ft-fld > span { display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 38px; padding: 0 12px; border: 1px solid #c9d0db; border-radius: 8px; font-size: 13px; color: var(--pa-ink); background: #fff; }
.ft-fld > span .ft-ico { width: 14px; height: 14px; color: var(--pa-mute); }
.ft-fld.is-focus > span { border-color: var(--pa-blue); box-shadow: 0 0 0 3px rgba(42, 107, 230, .15); justify-content: flex-start; }
.ft-fld em { font-style: normal; color: var(--pa-mute); }
.ft-fld i { font-style: normal; font-variant-numeric: tabular-nums; }
.ft-fld.is-sm { margin: 0 0 12px; }
.ft-fld-help { margin: -4px 0 12px; font-size: 12px; color: var(--pa-mute); }
.ft-dlg-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.ft-rev { display: flex; flex-direction: column; margin: 0 0 14px; border: 1px solid var(--pa-line); border-radius: 10px; }
.ft-rev div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; font-size: 13px; }
.ft-rev div + div { border-top: 1px solid var(--pa-line); }
.ft-rev dt { color: var(--pa-mute); }
.ft-rev dd { margin: 0; font-weight: 600; }
.ft-dlg-done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 14px 0 8px; }
.ft-done-ico .ft-ico { width: 44px; height: 44px; color: #0d9472; }
.ft-dlg-done strong { font-size: 16px; }
.ft-dlg-done small { font-size: 12.5px; color: var(--pa-text); }

/* floating cards over the hero scene */
.ft-hero-scene .gbl-float { z-index: 9; }
.ft-float-limit { left: 96px; top: 318px; max-width: 250px; align-items: flex-start; }
.ft-float-limit .gbl-float-ico { background: var(--pb-50); color: var(--pb-700); }
.ft-float-limit .gbl-float-ico .ft-ico { width: 18px; height: 18px; }
.ft-meter { display: block; height: 6px; margin-top: 8px; border-radius: 3px; background: #e6eaf1; overflow: hidden; }
.ft-meter i { display: block; height: 100%; width: 43%; border-radius: 3px; background: #0d9472; transform-origin: left; }
.gbl-js [data-gbl-scene] .ft-float-limit.is-on .ft-meter i { animation: ft-meter 1s var(--ease) .25s both; }
@keyframes ft-meter { from { transform: scaleX(0); } to { transform: none; } }

/* spend card: card visual (shared/card-visual) + details */
.ft-cards { position: relative; width: 100%; max-width: 480px; }
.ft-cardvis { position: relative; z-index: 2; width: 300px; aspect-ratio: 1.62; margin: 0 0 -54px 24px; padding: 16px 18px; border-radius: 12px; color: #fff; display: flex; flex-direction: column; justify-content: space-between; font-size: 13px;
  background: linear-gradient(135deg, #1b2340 0%, #0f1a35 60%, #0a1228 100%); box-shadow: 0 24px 40px -18px rgba(10, 18, 40, .6); transition: filter .4s, opacity .4s; }
.ft-cardvis small { display: block; font-size: 11px; color: rgba(255, 255, 255, .55); }
.ft-cardvis-top, .ft-cardvis-bot { display: flex; justify-content: space-between; align-items: flex-start; }
.ft-visa { display: inline-block; width: 44px; height: 14px; margin-right: 6px; vertical-align: -1px; }
.ft-cardvis-top > span:last-child { text-align: right; }
.ft-cardvis-num { font-size: 15px; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.ft-cardvis-frozen { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; background: rgba(14, 26, 53, .82); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); font-size: 15px; font-weight: 600; opacity: 0; transition: opacity .4s; }
.ft-cardvis-frozen .ft-ico { width: 20px; height: 20px; }
.ft-cardvis.is-frozen { filter: grayscale(.4); }
.ft-cardvis.is-frozen .ft-cardvis-frozen { opacity: 1; }
.ft-limits { padding-top: 72px; }
.ft-limit-row { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--pa-text); }
.ft-limit-row b { color: var(--pa-ink); font-variant-numeric: tabular-nums; }
.ft-limit small { display: block; margin-top: 4px; font-size: 11.5px; color: var(--pa-mute); }
.ft-meter.is-lg { height: 8px; }
.ft-limits .ft-meter i { width: 17%; background: var(--pa-blue); transition: width .8s var(--ease); }
.ft-limits .ft-meter i.is-more { width: 43%; }
.ft-cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 10px; }
.ft-cats small { flex-basis: 100%; font-size: 12px; font-weight: 600; color: var(--pa-text); }
.ft-cats span { padding: 3px 9px; border-radius: 999px; background: #f0f3f8; font-size: 11.5px; font-weight: 600; color: var(--pa-text); }
.ft-tx { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; margin-bottom: 10px; border-radius: 10px; background: #f7f9fc; }
.ft-tx > .ft-ico { width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: #e8e6ff; color: #4a44b8; }
.ft-tx b { display: block; font-size: 12.5px; }
.ft-tx small { display: block; font-size: 11.5px; color: var(--pa-mute); }
.ft-tx em { font-style: normal; font-weight: 600; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ft-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ft-tiles span { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border: 1px solid var(--pa-line); border-radius: 10px; font-size: 11.5px; font-weight: 600; color: var(--pa-text); }
.ft-tiles em { font-style: normal; }
.ft-tiles .ft-ico { width: 18px; height: 18px; color: var(--pa-blue); }
.ft-confirm { position: absolute; z-index: 5; left: 0; right: 0; top: 46%; margin: 0 auto; width: min(300px, calc(100% - 32px)); padding: 18px 20px 16px; border-radius: 14px; background: #fff; color: var(--pa-ink); font-size: 13px; text-align: left; box-shadow: 0 0 0 1px rgba(28, 39, 55, .06), 0 30px 60px -18px rgba(14, 18, 27, .5); }
.ft-confirm strong { display: block; font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.ft-confirm p { margin: 0 0 14px; color: var(--pa-text); }

/* Send Payment for Invoice (legacy payables dialog) */
.ft-pay-sum { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; margin-bottom: 14px; border-radius: 10px; background: #f7f9fc; }
.ft-pay-sum b { display: block; font-size: 13px; }
.ft-pay-sum small { display: block; font-size: 11.5px; color: var(--pa-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-pay-sum .hx-av .ft-ico { width: 16px; height: 16px; }
.ft-lbl { margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--pa-text); }
.ft-radios { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.ft-radios li { display: flex; align-items: center; gap: 9px; padding: 6px 6px; border-radius: 8px; font-size: 13px; }
.ft-radios i { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 1.5px solid #9aa4b4; position: relative; transition: border-color .2s; }
.ft-radios i::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--pa-blue); transform: scale(0); transition: transform .2s var(--ease); }
.ft-radios li.is-on i { border-color: var(--pa-blue); }
.ft-radios li.is-on i::after { transform: none; }
.ft-radios li.is-on { font-weight: 600; }
/* full-width row: the global press scale would pull it ~10px in from the left, so only the dot presses */
.ft-radios li.is-pressed { transform: none; filter: none; background: #f3f6fb; }
.ft-radios li.is-pressed i { transform: scale(.85); transition: transform .12s, border-color .2s; }
.ft-alert { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: #e3f2fd; color: #0d3c78; font-size: 12px; line-height: 1.45; }
.ft-alert .ft-ico { width: 16px; height: 16px; margin-top: 1px; color: #1565c0; }

/* Built on Stripe: review step */
.ft-xfer-t { display: block; font-size: 16px; font-weight: 600; margin: 0 0 12px; }
.ft-auth { margin: 0 0 12px; font-size: 12px; line-height: 1.5; color: var(--pa-text); }
.gbl-js .ft-stripe .ft-stripe-badge { opacity: 0; transform: translateY(4px); transition: opacity .6s var(--ease) .2s, transform .6s var(--ease) .2s; }
.gbl-js .ft-vis-replica.is-in .ft-stripe .ft-stripe-badge { opacity: 1; transform: none; }

/* Transfer money (static) */
.ft-xfer-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.ft-xfer-top > .ft-ico { width: 16px; height: 16px; color: var(--pa-mute); }
.ft-xfer-swap { display: flex; justify-content: center; margin: -4px 0 6px; }
.ft-xfer-swap .ft-ico { width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: var(--pb-50); color: var(--pa-blue); }
.gbl-js .ft-xfer .ft-fill { clip-path: inset(0 100% 0 0); transition: clip-path .9s steps(8) .35s; }
.gbl-js .ft-vis-replica.is-in .ft-xfer .ft-fill { clip-path: inset(0 0 0 0); }

/* Recent activity (static): rows land */
.gbl-js .ft-land li { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--k, 0) * 110ms + .15s); }
.gbl-js .ft-vis-replica.is-in .ft-land li { opacity: 1; transform: none; }

/* How money moves (static diagram) */
.ft-flow { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 460px; }
.ft-flow-node { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 14px 16px; min-width: 150px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.ft-flow-node > .ft-ico { width: 26px; height: 26px; color: var(--pb-700); margin-bottom: 4px; }
.ft-flow-node b { font-size: 15px; color: var(--ink); }
.ft-flow-node small { font-size: 13px; color: var(--muted); }
.ft-flow-node.is-main { background: var(--pb-600); border-color: var(--pb-600); min-width: 220px; padding: 18px 20px; }
.ft-flow-node.is-main > .ft-ico, .ft-flow-node.is-main b { color: #fff; }
.ft-flow-node.is-main small { color: #dce8ff; }
.ft-flow-link { position: relative; height: 56px; display: grid; place-items: center; }
.ft-flow-link i, .ft-flow-fork i { position: absolute; background: var(--pb-200); transform-origin: top; }
.ft-flow-link i { left: 50%; top: 0; width: 2px; height: 100%; margin-left: -1px; }
.ft-flow-link .ft-ico { position: relative; width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: #fff; color: var(--pb-700); border: 1px solid var(--pb-100); }
.ft-flow-fork { position: relative; width: 70%; height: 36px; }
.ft-flow-fork i { left: 0; right: 0; top: 50%; height: 2px; transform-origin: center; }
.ft-flow-fork::before { content: ""; position: absolute; left: 50%; top: 0; width: 2px; height: 50%; margin-left: -1px; background: var(--pb-200); }
.ft-flow-outs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; position: relative; }
.ft-flow-outs .ft-flow-node { min-width: 0; padding: 12px 8px; }
.ft-flow-outs .ft-flow-node b { font-size: 14px; }
.gbl-js .ft-flow-link i, .gbl-js .ft-flow-fork i { transform: scaleY(0); transition: transform .6s var(--ease) .2s; }
.gbl-js .ft-flow-fork i { transform: scaleX(0); transition-delay: .6s; }
.gbl-js .ft-vis-replica.is-in .ft-flow-link i { transform: none; }
.gbl-js .ft-vis-replica.is-in .ft-flow-fork i { transform: none; }

/* ---------- Amenity Scheduling mocks (v2-layout/amenity-scheduling, homeowner-* views); fictional data ----------
   App colors that fail AA at mock sizes are darkened: status green #059669 → #047857, amber #D97706 → #b45309. */
.ft .gbl-pa-nav .ft-ico { width: 17px; height: 17px; color: #5b6576; }
.ft .gbl-pa-nav.is-on .ft-ico { color: var(--pa-blue); }
/* Review 2: the active nav label (13.5px) was 4.47:1 in pa-blue on the sidebar gray; pb-600 is AA */
.ft .gbl-pa-nav.is-on { color: var(--pb-600); }
.ft-chip.is-warn { background: #fffbeb; color: #b45309; }
.ft .gbl-pa-btn.is-red { background: #e11d48; border-color: #e11d48; color: #fff; }
.ft-am-h { display: flex; align-items: center; gap: 10px; margin: 6px 0 8px; }
.ft-am-h strong { font-size: 20px; font-weight: 600; color: var(--pa-ink); }
.ft-am-rules { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.ft-am-rules span { padding: 3px 9px; border-radius: 999px; background: #fff; border: 1px solid var(--pa-line); font-size: 11.5px; font-weight: 600; color: var(--pa-text); }
.ft-am-res { padding: 12px 14px 14px; }
.ft-am-tabs { display: flex; gap: 18px; margin-bottom: 12px; border-bottom: 1px solid var(--pa-line); overflow: hidden; }
.ft-am-tabs span { padding-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--pa-mute); white-space: nowrap; }
.ft-am-tabs span.is-on { color: var(--pa-blue); box-shadow: inset 0 -2px 0 var(--pa-blue); }
.ft-am-tabs em { display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 5px; border-radius: 999px; background: #e11d48; color: #fff; font-size: 11px; font-style: normal; text-align: center; }
.ft-am-tabs em:empty { display: none; }
.ft-am-tabs.is-sm { gap: 14px; }
.ft-am-tabs.is-sm span { font-size: 12.5px; }
.ft-am-grid { display: grid; grid-template-columns: 184px minmax(0, 1fr); gap: 16px; align-items: start; }
.ft-cal-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ft-cal-h b { font-size: 13px; }
.ft-cal-h .ft-ico { width: 13px; height: 13px; color: var(--pa-mute); }
.ft-cal-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; }
.ft-cal-days i { font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--pa-mute); padding-bottom: 4px; }
.ft-cal-days span { display: grid; place-items: center; height: 26px; border-radius: 50%; font-size: 12px; color: var(--pa-ink); transition: background .2s, color .2s; }
.ft-cal-days .is-past { color: #b3bac6; }
.ft-cal-days .is-today { color: var(--pa-blue); font-weight: 700; }
.ft-cal-days span.is-sel, .ft-am-slots span.is-sel, .ft-am-spaces span.is-sel { background: #2c3e50; color: #fff; }
.ft-am-date { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--pa-ink); }
/* the two labels were h4 / h5 (SEO S11, O-10): plain text now, with those headings' theme line-heights */
.ft-am-period .ft-am-h, .ft-am-spaces .ft-am-h { margin: 0 0 6px; font-size: 11.5px; font-weight: 600; color: var(--pa-text); }
.ft-am-period .ft-am-h { line-height: 1.333; text-wrap: balance; }
.ft-am-spaces .ft-am-h { line-height: 1.4; }
@media (max-width: 992px) { .ft-am-period .ft-am-h { line-height: 1.4; } .ft-am-spaces .ft-am-h { line-height: 1.556; } }
.ft-am-slots, .ft-am-spaces > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 5px; }
.ft-am-slots span, .ft-am-spaces span { display: grid; place-items: center; height: 28px; border-radius: 6px; background: #f5f5f5; font-size: 11.5px; font-weight: 600; color: var(--pa-ink); white-space: nowrap; transition: background .2s, color .2s; }
.ft-am-slots .is-booked, .ft-am-spaces .is-na { color: #9aa3b0; background: #fafafa; text-decoration: line-through; }
.ft-am-times { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 10px 0; font-size: 12px; color: var(--pa-text); }
.ft-am-times b { color: var(--pa-ink); }
.ft-am-cont { width: 100%; justify-content: center; height: 34px; margin-top: 10px; }
.ft-am-hold { padding: 4px 10px; border-radius: 999px; background: #fffbeb; color: #b45309; font-size: 12px; font-weight: 600; white-space: nowrap; }
.ft-am-hold b { display: inline-block; min-width: 2.7em; font-variant-numeric: tabular-nums; }
.ft-am-co { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.ft-am-card { padding: 14px 16px; }
.ft-am-ct { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--pa-ink); }
.ft-am-terms { margin: 0 0 10px; padding: 10px 12px; border-radius: 8px; background: #f7f9fc; font-size: 12px; line-height: 1.5; color: var(--pa-text); }
/* the box sits on the first line when the label wraps (Dima, Review 2) */
.ft-am-check { display: flex; align-items: flex-start; gap: 8px; padding: 4px 2px; border-radius: 6px; font-size: 12px; line-height: 18px; font-weight: 600; color: var(--pa-ink); }
.ft-am-check i { width: 16px; height: 16px; flex: none; margin-top: 1px; display: grid; place-items: center; border: 1.5px solid #9aa4b4; border-radius: 4px; transition: background .2s, border-color .2s; }
.ft-am-check i .ft-ico { width: 11px; height: 11px; color: #fff; opacity: 0; }
.ft-am-check.is-on i { background: var(--pa-blue); border-color: var(--pa-blue); }
.ft-am-check.is-on i .ft-ico { opacity: 1; }
.ft-am-sum li { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 12.5px; color: var(--pa-ink); }
.ft-am-sum li .ft-ico { width: 15px; height: 15px; color: var(--pa-mute); }
.ft-am-sum.is-center li { justify-content: center; }
.ft-am-tot { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--pa-line); }
.ft-am-tot div { display: flex; justify-content: space-between; padding: 2px 0; font-size: 12.5px; }
.ft-am-tot dt { color: var(--pa-text); }
.ft-am-tot dd { margin: 0; }
.ft-am-tot div:last-child { font-weight: 600; }
.ft-am-done .ft-am-card { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 360px; margin: 28px auto 0; padding: 24px 18px; text-align: center; }
.ft-am-done strong { font-size: 16px; font-weight: 600; }
.ft-am-done small { font-size: 12.5px; color: var(--pa-text); }
.ft-am-acts { display: flex; gap: 8px; margin-top: 6px; }
.ft-float-am { left: -28px; top: 392px; max-width: 320px; }
.ft-float-am .gbl-float-ico { background: var(--pb-50); color: var(--pb-700); }
.ft-float-am .gbl-float-ico .ft-ico { width: 18px; height: 18px; }

/* approvals (booking-list-item on the Pending Approvals tab) */
.ft-am-appr { position: relative; min-height: 300px; }
.ft-am-day { margin: 2px 0 8px; font-size: 12px; font-weight: 600; color: var(--pa-text); }
.ft-am-bk { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; align-items: center; padding: 12px; border: 1px solid var(--pa-line); border-radius: 12px; }
.ft-am-bk-t { display: flex; align-items: center; gap: 10px; }
.ft-am-bk-t > .ft-ico { width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: var(--pb-50); color: var(--pa-blue); }
.ft-am-bk b { display: block; font-size: 13px; font-weight: 600; }
.ft-am-bk small { display: block; font-size: 11.5px; color: var(--pa-mute); }
.ft-am-bk-p { text-align: right; }
.ft-am-bk small.is-warn { color: #b45309; font-weight: 600; }
.ft-am-space { justify-self: end; padding: 3px 8px; border-radius: 6px; background: #eef2f8; font-size: 11.5px; font-weight: 600; color: var(--pa-text); }
.ft-am-bk-a { grid-column: 1 / -1; display: flex; gap: 8px; padding-top: 10px; border-top: 1px solid var(--pa-line); }
.ft-am-empty { padding: 24px 0 16px; text-align: center; }
.ft-am-empty b { display: block; font-size: 13.5px; }
.ft-am-empty small { display: block; font-size: 12px; color: var(--pa-mute); }
.ft-am-sent { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--pb-50); }
.ft-am-sent > .ft-ico { width: 18px; height: 18px; color: var(--pa-blue); }
.ft-am-sent b { display: block; font-size: 12.5px; }
.ft-am-sent small { display: block; font-size: 11.5px; color: var(--pa-text); }
.ft-toast { position: absolute; z-index: 4; left: 0; right: 0; bottom: 16px; width: max-content; max-width: calc(100% - 32px); margin: 0 auto; display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; background: #1f2733; color: #fff; font-size: 12.5px; font-weight: 600; box-shadow: 0 16px 32px -14px rgba(14, 18, 27, .6); }
.ft-toast .ft-ico { width: 16px; height: 16px; color: #6ee7b7; }

/* cancellation → fee invoice on the unit */
.ft-am-cx { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 460px; }
.ft-am-cx .ft-card { max-width: none; }
/* homeowner-cancel-form: grey highlight_off icon, title, one plain paragraph (Review 2) */
.ft-am-cxi .ft-ico { width: 24px; height: 24px; margin-bottom: 6px; color: #6b7280; }
.ft-am-cxp { margin: 0 0 12px; font-size: 12.5px; line-height: 1.5; color: var(--pa-text); }
.ft-am-new { border-radius: 8px; background: var(--pb-50); box-shadow: 0 0 0 4px var(--pb-50); }

/* create: details form with the editor's AI buttons */
.ft-rte { border: 1px solid #c9d0db; border-radius: 8px; background: #fff; }
.ft-rte-bar { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px solid var(--pa-line); font-size: 11.5px; font-weight: 600; color: var(--pa-text); }
.ft-rte-bar > span { display: inline-flex; align-items: center; gap: 3px; }
.ft-rte-bar .ft-ico { width: 11px; height: 11px; }
.ft-rte-ai { padding: 2px 7px; border-radius: 6px; background: var(--pa-ai-bg); color: var(--pa-ai); }
.ft-rte-ai .ft-ico { width: 13px; height: 13px; }
.ft-rte-b { font-weight: 800; }
.ft-rte-i { font-style: italic; font-family: Georgia, serif; }
.ft-rte p { margin: 0; padding: 8px 10px; font-size: 12.5px; line-height: 1.5; color: var(--pa-ink); }
.ft-rte p + p { padding-top: 0; }
/* image upload stub (amenity-create): "Drag & Drop image here or upload file" + recommended size */
.ft-am-img { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px dashed #c9d0db; border-radius: 10px; }
.ft-am-img > .ft-ico { width: 30px; height: 30px; padding: 5px; border-radius: 8px; background: var(--pb-50); color: var(--pa-blue); }
.ft-am-img b { display: block; font-size: 12.5px; font-weight: 600; }
.ft-am-img b .ft-link { font-size: inherit; }
.ft-am-img small { display: block; font-size: 11.5px; font-weight: 400; color: var(--pa-mute); }
.ft-radios.is-row { flex-direction: row; flex-wrap: wrap; gap: 4px 14px; }
.gbl-js .ft-am-form .ft-fill { clip-path: inset(0 0 100% 0); transition: clip-path 1.4s steps(4) .4s; }
.gbl-js .ft-vis-replica.is-in .ft-am-form .ft-fill { clip-path: inset(0); }

/* grouped amenity detail: rules + space tiles */
.ft-am-rulelist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; margin: 0 0 4px; }
.ft-am-rulelist div { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--pa-line); font-size: 12px; }
.ft-am-rulelist dt { color: var(--pa-text); }
.ft-am-rulelist dd { margin: 0; font-weight: 600; text-align: right; }
.ft-am-sp-h { margin: 14px 0 10px; }
.ft-am-sp-h strong, .ft-am-sp-h small { display: block; }
.ft-am-sp-h small { font-size: 11.5px; color: var(--pa-mute); }
.ft-am-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ft-am-tiles li { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid var(--pa-line); border-radius: 10px; }
.ft-am-tiles b { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.ft-am-tiles b i { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--pb-50); color: var(--pb-600); font-size: 11px; font-style: normal; }
.ft-am-tiles span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; }
.ft-am-tiles span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ft-am-tiles .is-ok { color: #047857; }
.ft-am-tiles .is-use { color: #b45309; }
.ft-am-tiles small { font-size: 11px; color: var(--pa-mute); }

/* share booking page by email */
.ft-am-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ft-tok { padding: 0 3px; border-radius: 4px; background: var(--pb-50); color: var(--pb-700); font-weight: 600; }
.ft-am-sched li.is-later i { border-color: var(--pa-blue); }
.ft-am-sched li.is-later i::after { transform: none; }
.ft-am-sched li.is-later { font-weight: 600; }
.gbl-js .ft-vis-replica:not(.is-in) .ft-am-sched li.is-first i { border-color: var(--pa-blue); }
.gbl-js .ft-vis-replica:not(.is-in) .ft-am-sched li.is-first i::after { transform: none; }
.gbl-js .ft-vis-replica:not(.is-in) .ft-am-sched li.is-later { font-weight: 400; }
.gbl-js .ft-vis-replica:not(.is-in) .ft-am-sched li.is-later i { border-color: #9aa4b4; }
.gbl-js .ft-vis-replica:not(.is-in) .ft-am-sched li.is-later i::after { transform: scale(0); }
.gbl-js .ft-am-sched li i, .gbl-js .ft-am-sched li i::after { transition-delay: .7s; }
.gbl-js .ft-am-when { transition: opacity .4s var(--ease) .9s; }
.gbl-js .ft-vis-replica:not(.is-in) .ft-am-when { opacity: .35; }

/* dashboard: stat tiles + table */
.ft-am-dash { max-width: 540px; }
.ft-am-hbtns { display: flex; gap: 6px; }
.ft-am-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.ft-am-stats div { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; padding: 10px; border: 1px solid var(--pa-line); border-radius: 10px; }
.ft-am-stats small { font-size: 11px; font-weight: 600; line-height: 1.3; color: var(--pa-text); }
.ft-am-stats b { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ft-am-tbl > div { display: grid; grid-template-columns: 1.35fr .9fr 1.3fr .9fr .6fr; gap: 8px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--pa-line); font-size: 12px; color: var(--pa-text); }
.ft-am-tbl > div:last-child { border-bottom: 0; }
.ft-am-tbl > div > span:first-child { font-weight: 600; color: var(--pa-ink); }
.ft-am-tbl > .is-h { font-size: 11px; font-weight: 600; color: var(--pa-mute); }
.ft-am-tbl > .is-h > span:first-child { color: var(--pa-mute); }
.ft-am-bell { display: inline-flex; align-items: center; gap: 2px; }
.ft-am-bell .ft-ico { width: 15px; height: 15px; color: var(--pa-mute); }
.ft-am-bell em { min-width: 16px; padding: 0 4px; border-radius: 999px; background: #e11d48; color: #fff; font-size: 10px; font-weight: 600; font-style: normal; text-align: center; }

/* ---------- Financial pages (Session 3): shared mock pieces; fictional data ---------- */
/* generic tab row (same look as the amenity tabs) */
.ft-tabs { display: flex; gap: 16px; margin-bottom: 10px; border-bottom: 1px solid var(--pa-line); overflow: hidden; }
.ft-tabs span { padding-bottom: 8px; font-size: 12.5px; font-weight: 600; color: var(--pa-mute); white-space: nowrap; }
.ft-tabs span.is-on { color: var(--pb-600); box-shadow: inset 0 -2px 0 var(--pa-blue); }
.ft-btns { display: inline-flex; gap: 8px; }
em.ft-chip { font-style: normal; }
.ft-chip.is-bad { background: #fdecea; color: #b42318; }
.ft-chip.is-warn { background: #fff4e5; color: #9a4b00; }
.ft-ribbon { display: block; margin-top: 3px; font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--pb-600); }
.ft-stepper { display: flex; gap: 6px; margin: 0 0 12px; counter-reset: st; flex-wrap: wrap; }
.ft-stepper li { counter-increment: st; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--pa-mute); white-space: nowrap; }
.ft-stepper li::before { content: counter(st); width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: #eef1f6; color: var(--pa-text); font-size: 10.5px; }
.ft-stepper li.is-on { color: var(--pb-600); }
.ft-stepper li.is-on::before { background: var(--pa-blue); color: #fff; }
.ft-stepper li + li::after { content: none; }
.ft-checks { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.ft-checks li { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.ft-checks i { width: 16px; height: 16px; flex: none; border-radius: 4px; border: 1.5px solid #9aa4b4; position: relative; }
.ft-checks li.is-on i { background: var(--pa-blue); border-color: var(--pa-blue); }
.ft-checks li.is-on i::after { content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* Invoicing hero: Collection Progress + the invoice list, and the Create New Invoice(s) card */
.ft-inv-prog { padding: 14px 16px 12px; margin-bottom: 10px; }
.ft-inv-prog .ft-card-h { margin-bottom: 10px; }
.ft-inv-prog .ft-card-h strong { font-size: 14px; }
.ft-inv-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.ft-inv-figs small { display: block; font-size: 11px; font-weight: 600; color: var(--pa-mute); }
.ft-inv-figs b { font-size: 17px; font-weight: 600; color: var(--pa-ink); font-variant-numeric: tabular-nums; }
.ft-inv-figs span:first-child b { color: #0b7a5c; }
.ft-inv-prog .hx-meter i { transition: width .7s var(--ease); }
.ft-inv-prog .hx-meter i.ft-w1 { width: 1%; } .ft-inv-prog .hx-meter i.ft-w2 { width: 1.6%; } .ft-inv-prog .hx-meter i.ft-w3 { width: 2.3%; } .ft-inv-prog .hx-meter i.ft-w4 { width: 13.3%; }
.ft-inv-banner { margin-bottom: 10px; padding: 10px 14px; }
.ft-inv-list { padding: 12px 16px 4px; }
.ft-inv-rows { max-height: 234px; overflow: hidden; }
.ft-inv-row { display: grid; grid-template-columns: 76px minmax(0, 1.35fr) minmax(0, .75fr) 66px; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--pa-line); font-size: 12.5px; }
.ft-inv-row:last-child { border-bottom: 0; }
.ft-inv-row.is-head { padding: 0 0 6px; font-size: 11px; font-weight: 600; color: var(--pa-mute); }
.ft-inv-row > span:last-child { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ft-inv-row b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-inv-row small { display: block; font-size: 11.5px; color: var(--pa-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-inv-row .ft-chip { height: 20px; font-size: 11px; transition: background .3s, color .3s; }
.ft-inv-row.is-old { opacity: .72; }
.ft-inv-row.is-roll small .ft-link { font-size: inherit; font-style: normal; }
.ft-inv-acts { display: flex; gap: 12px; margin-top: 2px; font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--pb-600); }
.ft-chip.is-info.is-ok { background: #e8f5e9; color: #2e7d32; }
.ft-inv-row:has(.is-bad) .ft-inv-fee { color: #b42318; font-weight: 600; }
.ft-inv-new { width: min(430px, calc(100% - 32px)); top: 70px; }
.ft-inv-sec { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--pa-line); }
.ft-inv-sec > small, .ft-fee-charge small { font-size: 12px; font-weight: 600; color: var(--pa-text); }
.ft-inv-sec.is-col { flex-direction: column; align-items: stretch; gap: 6px; }
.ft-inv-sec .gbl-pa-btn .ft-ico { width: 15px; height: 15px; }
.ft-inv-charge { display: grid; grid-template-columns: minmax(0, 1.5fr) 1fr .8fr .8fr; gap: 8px; font-size: 12.5px; padding: 6px 8px; border-radius: 6px; background: #f7f9fc; }
.ft-inv-charge.is-head { background: none; padding: 0 8px; font-size: 11px; font-weight: 600; color: var(--pa-mute); }
.ft-inv-charge span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-inv-new .hx-form-opt { padding: 10px 0 2px; border-top: 1px solid var(--pa-line); width: 100%; }
.ft-inv-foot { align-items: center; margin-top: 10px; }
.ft-inv-total { margin-right: auto; font-size: 12.5px; color: var(--pa-text); }
.ft-inv-total b { color: var(--pa-ink); }

/* late fee + early discount (charge form) */
.ft-fee-charge { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 10px; padding-bottom: 12px; margin-bottom: 10px; border-bottom: 1px solid var(--pa-line); }
.ft-fee-charge b { display: block; font-size: 13px; font-weight: 600; }
.ft-fee-opt { margin-bottom: 8px; }
.ft-fee-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; padding: 10px 12px 0; margin-bottom: 10px; border-radius: 10px; background: #f3f7fe; }
.ft-fee-panel.is-late .ft-radios { grid-column: 1 / -1; margin-bottom: 6px; }
.ft-fee-panel .ft-fld > span { height: 34px; }
.ft-fee-add { margin-bottom: 10px; }
/* scene: the panels grow open (max-heights just over their 77px / 182px content) and the Add Late Fee button folds away,
   so the card's height eases instead of snapping twice */
.gbl-js [data-gbl-scene] .ft-fee-panel.gbl-sx { max-height: 0; padding-top: 0; margin-bottom: 0; opacity: 0; overflow: hidden; transform: translateY(-4px);
  transition: max-height .6s var(--ease), padding-top .6s var(--ease), margin-bottom .6s var(--ease), opacity .35s .2s, transform .45s var(--ease) .15s; }
.gbl-js [data-gbl-scene] .ft-fee-panel.gbl-sx.is-on { max-height: 96px; padding-top: 10px; margin-bottom: 10px; opacity: 1; transform: none; }
.gbl-js [data-gbl-scene] .ft-fee-panel.is-late.gbl-sx.is-on { max-height: 200px; }
.gbl-js [data-gbl-scene] .ft-fee-add.gbl-fold { transition: margin-bottom .5s var(--ease); }
.gbl-js [data-gbl-scene] .ft-fee-add.gbl-fold.is-off { margin-bottom: 0; }

/* mail invoices */
.ft-mail-k { margin: 4px 0 6px; font-size: 12px; font-weight: 600; color: var(--pa-text); }
.ft-ship { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.ft-ship-opt { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; padding: 10px 12px; border: 1px solid var(--pa-line); border-radius: 10px; transition: border-color .3s, box-shadow .3s; }
.ft-ship-opt i { grid-row: span 2; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #9aa4b4; position: relative; }
.ft-ship-opt i::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--pa-blue); transform: scale(0); transition: transform .25s var(--ease) .5s; }
.ft-ship-opt b { font-size: 13px; }
.ft-ship-opt small { grid-column: 2; font-size: 11.5px; color: var(--pa-mute); }
.ft-ship-opt em { grid-row: 1 / span 2; grid-column: 3; font-style: normal; font-weight: 600; font-size: 13px; }
.ft-ship-opt.is-pick { border-color: var(--pa-blue); box-shadow: 0 0 0 3px rgba(42, 107, 230, .12); }
.ft-ship-opt.is-pick i { border-color: var(--pa-blue); }
.ft-ship-opt.is-pick i::after { transform: none; }
.gbl-js .ft-vis-replica:not(.is-in) .ft-ship-opt.is-pick { border-color: var(--pa-line); box-shadow: none; }
.gbl-js .ft-vis-replica:not(.is-in) .ft-ship-opt.is-pick i { border-color: #9aa4b4; }
.gbl-js .ft-vis-replica:not(.is-in) .ft-ship-opt.is-pick i::after { transform: scale(0); }
.ft-vis-replica .ft-ship-opt.is-pick { transition-delay: .5s; }

/* homeowner checkout (Make a Payment) */
.ft-pay-row { display: grid; grid-template-columns: 22px minmax(0, 1.4fr) .7fr .8fr; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--pa-line); font-size: 12.5px; }
.ft-pay-row.is-head { padding: 0 0 6px; font-size: 11px; font-weight: 600; color: var(--pa-mute); }
.ft-pay-row > span:last-child { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ft-pay-row b { display: block; font-weight: 600; } .ft-pay-row small { display: block; font-size: 11.5px; color: var(--pa-mute); }
.ft-pay-row .ft-checks { margin: 0; } .ft-pay-row .ft-checks i { display: block; background: var(--pa-blue); border-color: var(--pa-blue); }
.ft-pay-row .ft-checks i::after { content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ft-pay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 12px 0 10px; }
.ft-pay-info .ft-fld > span i { font-style: normal; }
.ft-pay-info .ft-fld > span.is-pressed { border-color: var(--pa-blue); }
.ft-pay-out p:not(.ft-mail-k) { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 4px; font-size: 12px; color: var(--pa-text); }
.ft-pay-out b { color: var(--pa-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ft-pay-tot { padding-top: 4px; border-top: 1px solid var(--pa-line); font-weight: 600; }
.ft-pay-btn { width: 100%; justify-content: center; height: 36px; }
.ft-pay-done { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px; background: #ecf8f3; }
.ft-pay-done + .ft-pay-done { margin-top: 8px; }
/* the receipts take the checkout's place: both layers share one grid cell, so the card keeps its height */
.ft-pay-end { display: grid; } .ft-pay-end > * { grid-area: 1 / 1; min-width: 0; }
.ft-pay-rcpts { align-self: start; padding-top: 12px; }
.gbl-js [data-gbl-scene]:has(.ft-pay-rcpts.is-on) .gbl-cur { opacity: 0; } /* the button it clicked is gone */
.gbl-js [data-gbl-scene] .ft-pay-form.gbl-sx { transition: opacity .3s, transform .4s var(--ease), visibility 0s; }
.gbl-js [data-gbl-scene] .ft-pay-form.gbl-sx.is-off { opacity: 0; transform: translateY(-6px); visibility: hidden; transition: opacity .3s, transform .4s var(--ease), visibility 0s .4s; }
.gbl-js [data-gbl-scene] .ft-pay-rcpts.gbl-sx:not(.is-on) { visibility: hidden; }
.gbl-js [data-gbl-scene] .ft-pay-out b, .gbl-js [data-gbl-scene] .ft-pay-fee span { transition: color .3s; }
/* unchecked box for the scene (checked once the engine adds .is-on) */
.ft-pay-row .ft-checks i.ft-un { transition: background .15s, border-color .15s; }
.ft-pay-row .ft-checks i.ft-un:not(.is-on) { background: #fff; border-color: #9aa4b4; } .ft-pay-row .ft-checks i.ft-un:not(.is-on)::after { opacity: 0; }
.ft-pay-done .ft-ico { width: 20px; height: 20px; color: #0d9472; }
.ft-pay-done b { display: block; font-size: 13px; } .ft-pay-done small { display: block; font-size: 12px; color: var(--pa-text); }

/* autopay settings + the admin Autopay ribbon */
.ft-stack { width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: 14px; }
.ft-stack .ft-card { max-width: none; }
.ft-auto-row { display: grid; grid-template-columns: 96px minmax(0, .85fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: 12px; align-items: start; padding: 10px 0 4px; font-size: 12.5px; }
.ft-auto-row.is-head { padding: 0 0 6px; border-bottom: 1px solid var(--pa-line); font-size: 11px; font-weight: 600; color: var(--pa-mute); }
.ft-auto-row.is-head > span:first-child { white-space: nowrap; } .ft-auto-row.is-head i { font-style: normal; white-space: nowrap; }
.ft-auto-row > span:first-child { padding-top: 1px; }
.ft-auto-row small { display: block; margin-top: 2px; font-size: 11px; line-height: 1.4; color: var(--pa-mute); }
.ft-auto-row .ft-link { display: block; font-style: normal; font-size: 11.5px; }
.ft-auto-next { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--pb-50); font-size: 12px; color: var(--pa-text); }
.ft-auto-next b { font-weight: 600; color: var(--pa-ink); font-variant-numeric: tabular-nums; }
.ft-auto-next .ft-ico { width: 15px; height: 15px; flex: none; color: var(--pa-blue); }
.ft-flip { display: block; background: var(--pa-blue); }
.ft-flip::after { transform: translateX(14px); }
.ft-auto-admin { padding: 12px 20px 6px; }
.ft-auto-inv .ft-ribbon { display: inline-flex; align-items: center; gap: 3px; }
.ft-auto-inv .ft-ribbon .ft-ico { width: 11px; height: 11px; }
/* reveal: switch on (.5s) → countdown fades in (1s) → the invoice row picks up its Autopay tag (1.5s). Space is kept,
   so nothing below shifts. */
.gbl-js .ft-vis-replica .ft-flip { transition: background .3s .5s; } .gbl-js .ft-vis-replica .ft-flip::after { transition: transform .35s var(--ease) .5s; }
.gbl-js .ft-vis-replica:not(.is-in) .ft-flip { background: #d5d9e0; }
.gbl-js .ft-vis-replica:not(.is-in) .ft-flip::after { transform: none; }
.gbl-js .ft-vis-replica .ft-auto-next { transition: opacity .45s ease 1s, transform .5s var(--ease) 1s; }
.gbl-js .ft-vis-replica:not(.is-in) .ft-auto-next { opacity: 0; transform: translateY(-4px); }
.gbl-js .ft-vis-replica .ft-auto-inv .ft-ribbon { transition: opacity .35s ease 1.5s, transform .45s var(--ease) 1.5s; }
.gbl-js .ft-vis-replica:not(.is-in) .ft-auto-inv .ft-ribbon { opacity: 0; transform: translateY(-3px); }
.gbl-js .ft-vis-replica.is-in .ft-auto-inv { animation: hx-flash-b 1.4s ease-out 1.5s; }

/* Accounting: Transactions page (account cards, For review table), rules, reconciliation, journal entry, CoA, 1099s */
.gbl-js .ft-land > div { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--k, 0) * 110ms + .15s); }
.gbl-js .ft-vis-replica.is-in .ft-land > div { opacity: 1; transform: none; }
.ft-box { display: inline-block; width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid #9aa4b4; position: relative; transition: background .2s, border-color .2s; }
.ft-box.is-on { background: var(--pa-blue); border-color: var(--pa-blue); }
/* the cursor aims just past a target's top-left quarter, so a tiny target gets a hit box shifted up-left to land the tip inside it */
.ft-boxhit { display: inline-flex; padding: 8px 0 0 8px; margin: -8px 0 0 -8px; }
.ft-box.is-on::after { content: ""; position: absolute; left: 3.5px; top: .5px; width: 4.5px; height: 8.5px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ft-acct-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.ft-acct { padding: 12px 14px; }
.ft-acct-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ft-acct-h b { display: block; font-size: 13px; } .ft-acct-h small { display: block; font-size: 11px; color: var(--pa-mute); }
.ft-acct-ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--pb-50); color: var(--pa-blue); flex: none; }
.ft-acct-ico .ft-ico { width: 16px; height: 16px; }
.ft-acct-n { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--pa-blue); color: #fff; font-size: 11px; font-weight: 600; font-style: normal; display: grid; place-items: center; }
.ft-acct-n:empty { display: none; }
.ft-acct-bal { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 8px; border-top: 1px solid var(--pa-line); }
.ft-acct-bal small { display: block; font-size: 11px; font-weight: 600; color: var(--pa-mute); }
.ft-acct-bal b { font-size: 14px; font-variant-numeric: tabular-nums; display: inline-block; transform-origin: left center; }
.ft-acct-bal b.hx-bump { animation: hx-bump .6s var(--ease); color: #0b7a5c; }
.ft-txl { position: relative; padding: 12px 16px 6px; }
.ft-tx-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ft-tx-top .ft-tabs { flex: 1; min-width: 0; }
.ft-tx-act { height: 28px; font-size: 12px; } .ft-tx-act i { font-style: normal; }
.ft-tx-menu { position: absolute; z-index: 3; right: 16px; top: 44px; display: flex; flex-direction: column; min-width: 170px; padding: 6px; background: #fff; border-radius: 10px; box-shadow: 0 12px 32px -8px rgba(14, 18, 27, .3), 0 0 0 1px var(--pa-line); }
.ft-tx-menu span { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px; font-size: 12.5px; font-weight: 600; }
.ft-tx-menu span.is-pressed, .ft-tx-menu span:first-child { background: #f3f6fb; }
.ft-tx-menu .ft-ico { width: 15px; height: 15px; color: var(--pa-text); }
.ft-tx-menu span.is-dim { color: #9aa3b0; } .ft-tx-menu span.is-dim .ft-ico { color: #9aa3b0; }
/* a primary button that stays disabled until a step completes (data-add "is-ready") */
.ft-card .gbl-pa-btn.is-off-look:not(.is-ready) { background: #e3e8f0; border-color: #e3e8f0; color: #56606f; } /* disabled look, text still AA (5.1:1): axe checks mock text */
.ft-tx-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) 84px minmax(0, 1.15fr) 16px; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--pa-line); font-size: 12.5px; }
.ft-tx-rows .ft-tx-row:last-child { border-bottom: 0; }
.ft-tx-row.is-head { padding: 2px 0 6px; font-size: 11px; font-weight: 600; color: var(--pa-mute); }
.ft-tx-row > span:nth-child(3) { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ft-tx-row .is-in { color: #0b7a5c; }
.ft-tx-row b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.ft-tx-row small { display: block; font-size: 11px; color: var(--pa-mute); }
.ft-cat { display: flex; min-width: 0; }
.ft-cat i { font-style: normal; color: var(--pa-mute); padding: 3px 0; }
.ft-cat em { font-style: normal; display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 3px 8px; border-radius: 6px; background: var(--pb-50); color: var(--pb-700); font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-cat em.is-ai { background: #f1effd; color: #4b3cc4; }
.ft-cat em .ft-ico { width: 13px; height: 13px; flex: none; }
/* span only: the Add Rule card (div.ft-rule) must stay block, or its form shrink-wraps and widens as text types */
span.ft-rule { display: flex; color: var(--pa-mute); } span.ft-rule .ft-ico { width: 14px; height: 14px; }
.gbl-js [data-gbl-scene] .ft-tx-rows .ft-tx-row:has(em.is-on) { animation: hx-flash-b 1.1s ease-out; }
.ft-tx-empty { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 22px 0; font-size: 13px; color: var(--pa-text); }
.ft-tx-empty .ft-ico { width: 18px; height: 18px; color: #0d9472; }
/* rules */
.ft-rule-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ft-rule-2 .ft-fld > span i { font-style: normal; }
.ft-rule-when { margin: 0 0 6px; font-size: 12.5px; color: var(--pa-text); }
.ft-rule-cond { display: grid; grid-template-columns: .9fr .8fr 1.2fr; gap: 8px; margin-bottom: 10px; }
.ft-rule-cond span { display: flex; align-items: center; height: 34px; padding: 0 10px; border: 1px solid #c9d0db; border-radius: 8px; font-size: 12.5px; }
.ft-rule-cond span.is-val { border-color: var(--pa-blue); box-shadow: 0 0 0 3px rgba(42, 107, 230, .15); }
/* focus moves field to field: rule name → condition value → off (the engine only adds classes, so .is-blur drops it) */
.gbl-js [data-gbl-scene] .ft-rule-cond span.is-val:not(:has(i.is-on)) { border-color: #c9d0db; box-shadow: none; }
.ft-rule-form .is-blur.is-blur > span, .ft-rule-cond span.is-val.is-blur { border-color: #c9d0db; box-shadow: none; }
.ft-rule-cond i { font-style: normal; }
.ft-rule-row { display: grid; grid-template-columns: 1.2fr .8fr 1.3fr 1fr; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--pa-line); font-size: 12.5px; }
.ft-rule-row:last-child { border-bottom: 0; }
.ft-rule-row.is-head { padding: 0 0 6px; font-size: 11px; font-weight: 600; color: var(--pa-mute); }
.ft-rule-row b { font-weight: 600; }
.ft-rule-row.is-new { animation: hx-flash-b 1.4s ease-out; }
/* reconciliation */
.ft-rec .ft-card-h { align-items: flex-start; }
.ft-rec-sub { display: block; font-size: 12px; color: var(--pa-mute); margin-top: 2px; }
.ft-rec-bal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px 12px; margin-bottom: 10px; border-radius: 10px; background: #f7f9fc; }
.ft-rec-bal small { display: block; font-size: 11px; font-weight: 600; color: var(--pa-mute); }
.ft-rec-bal b { font-size: 14px; font-variant-numeric: tabular-nums; }
/* the shared amber/green (home2) are ~3:1 at this size; AA versions here */
.ft .ft-rec-bal .hx-diff { color: #9a4b00 !important; } .ft .ft-rec-bal .hx-diff.is-zero { color: #0b7a5c !important; }
.ft-rec-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) 76px 54px 64px; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--pa-line); font-size: 12.5px; }
.ft-rec-row.is-head { padding: 0 0 6px; font-size: 11px; font-weight: 600; color: var(--pa-mute); }
.ft-rec-row > span:nth-child(3) { text-align: right; font-variant-numeric: tabular-nums; }
.ft-rec-row > span:last-child { justify-self: center; }
.ft-rec-row > span:nth-child(2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-rec-ok { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: #ecf8f3; }
.ft-rec-ok .ft-ico { width: 20px; height: 20px; color: #0d9472; }
.ft-rec-ok b { display: block; font-size: 13px; } .ft-rec-ok small { display: block; font-size: 12px; color: var(--pa-text); }
/* journal entry */
.ft-je-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 4px 0 10px; }
.ft-je-line { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; margin-bottom: 6px; border: 1px solid #c9d0db; border-radius: 8px; font-size: 12.5px; }
.ft-je-line b { font-variant-numeric: tabular-nums; }
.ft-je-ok { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; padding: 8px 12px; border-radius: 8px; background: #ecf8f3; color: #0b6b50; font-size: 12.5px; font-weight: 600; transition: background .4s .4s, color .4s .4s; }
.ft-je-ok .ft-ico { width: 16px; height: 16px; }
.gbl-js .ft-vis-replica:not(.is-in) .ft-je-ok { background: #fff4e5; color: #9a4b00; }
/* chart of accounts */
.ft-coa-list li { padding: 8px 4px; border-bottom: 1px solid var(--pa-line); font-size: 13px; }
.ft-coa-list li:last-child { border-bottom: 0; }
.ft-coa-list li b { font-weight: 600; }
.ft-coa-list li.is-kid { padding-left: 24px; color: var(--pa-text); position: relative; }
.ft-coa-list li.is-kid::before { content: ""; position: absolute; left: 10px; top: 8px; width: 8px; height: 9px; border: solid #c9d0db; border-width: 0 0 1.5px 1.5px; border-radius: 0 0 0 3px; }
/* 1099s */
.ft-f1099-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
.ft-f1099-stats span { padding: 8px 4px; border-radius: 8px; background: #f7f9fc; text-align: center; }
.ft-f1099-stats b { display: block; font-size: 16px; } .ft-f1099-stats small { display: block; font-size: 10.5px; color: var(--pa-mute); line-height: 1.25; overflow-wrap: normal; word-break: keep-all; }
.ft-f1099-fee { margin: 0 0 10px; font-size: 12px; color: var(--pa-text); }
.ft-f1099-row { grid-template-columns: 1.6fr 1fr 1fr; }
.ft-st { font-style: normal; font-weight: 600; font-size: 12px; } .ft-st.is-ok { color: #2e7d32; } .ft-st.is-info { color: #1565c0; }
.ft-rl { grid-template-columns: 1.3fr 1.3fr 1fr 76px; } .ft-rl small { display: block; font-size: 11px; color: var(--pa-mute); }
.ft-rule-auto { margin: 2px 0 8px; }
.ft-mail-tg li { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13px; justify-content: flex-start; } .ft-mail-tg .gbl-toggle { flex: none; }
.ft-mail-tg li > span { flex: 1; min-width: 0; } .ft-mail-tg b { display: block; font-weight: 600; font-size: 13px; } .ft-mail-tg small { display: block; font-size: 11.5px; color: var(--pa-mute); } .ft-mail-tg em { font-style: normal; font-weight: 600; }
/* shipping options: the picked one is a tinted row; -10px sides keep the radios on the toggles' left edge */
.ft-mail-ship { gap: 4px; margin: 0 -10px 10px; }
.ft-mail-ship li { padding: 8px 10px; border: 1px solid transparent; border-radius: 10px; font-weight: 400; transition: background .3s, border-color .3s; }
.ft-mail-ship li b { font-weight: 400; }
.ft-mail-ship li.is-on { background: #f3f7fe; border-color: var(--pb-100); } .ft-mail-ship li.is-on b { font-weight: 600; }
.ft-mail .ft-radios.is-row { gap: 4px 20px; } .ft-mail .ft-radios.is-row li { padding-left: 0; padding-right: 0; }
/* stepper as in mat-stepper with labels under the dots, so four steps fit one row */
.ft-mail .ft-stepper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 2px 0 14px; }
.ft-mail .ft-stepper li { position: relative; flex-direction: column; gap: 5px; padding: 0 4px; text-align: center; white-space: normal; font-size: 11px; line-height: 1.25; }
.ft-mail .ft-stepper li::before { position: relative; z-index: 1; width: 20px; height: 20px; font-size: 11px; }
.ft-mail .ft-stepper li:not(:last-child)::after { content: ""; position: absolute; top: 10px; left: calc(50% + 16px); right: calc(-50% + 16px); height: 1px; background: #dfe3ea; }
/* reveal: "Exclude units with $0 or credit balance" switches on (.5s), then shipping moves from Standard (the default)
   to First class (1.1s) */
.gbl-js .ft-vis-replica .ft-mail-ship i { transition: border-color .2s 1.1s; } .gbl-js .ft-vis-replica .ft-mail-ship i::after { transition: transform .25s var(--ease) 1.1s; }
.gbl-js .ft-vis-replica .ft-mail-ship li { transition: background .35s 1.05s, border-color .35s 1.05s; } .gbl-js .ft-vis-replica .ft-mail-ship b { transition: font-weight 0s 1.1s; }
.gbl-js .ft-vis-replica:not(.is-in) .ft-rad-to { background: transparent; border-color: transparent; } .gbl-js .ft-vis-replica:not(.is-in) .ft-rad-to b { font-weight: 400; }
.gbl-js .ft-vis-replica:not(.is-in) .ft-rad-to i { border-color: #9aa4b4; } .gbl-js .ft-vis-replica:not(.is-in) .ft-rad-to i::after { transform: scale(0); }
.gbl-js .ft-vis-replica:not(.is-in) .ft-rad-from { background: #f3f7fe; border-color: var(--pb-100); } .gbl-js .ft-vis-replica:not(.is-in) .ft-rad-from b { font-weight: 600; }
.gbl-js .ft-vis-replica:not(.is-in) .ft-rad-from i { border-color: var(--pa-blue); } .gbl-js .ft-vis-replica:not(.is-in) .ft-rad-from i::after { transform: none; }
.ft-rp-list li small { flex-basis: 100%; }

/* Budgets & Reports: report packets (hero), budget overview, draft budget, report list, budget vs actual */
.ft-pk { padding: 14px 16px 8px; }
.ft-pk .ft-card-h { align-items: flex-start; }
.ft-pk-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin-bottom: 12px; }
.ft-pk-list li { display: flex; align-items: center; gap: 6px; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-pk-list .ft-ico { width: 14px; height: 14px; color: var(--pa-blue); }
.ft-pk-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, .9fr) 48px; }
.ft-pk-row > span:nth-child(4) { justify-self: end; }
.ft-pk-runs { position: relative; }
.ft-pk-menu { top: 76px; right: 0; min-width: 180px; }
.ft-pk-row .ft-chip { transition: background .3s, color .3s; }
.ft-pk-sel { display: flex; justify-content: space-between; margin: 0 0 10px; font-size: 12.5px; color: var(--pa-text); }
.ft-pk-sum { margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; background: #f3f7fe; font-size: 12.5px; font-weight: 600; color: var(--pb-700); }
.ft-pk-att { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; padding: 8px 10px; border: 1px dashed #c9d0db; border-radius: 8px; font-size: 12.5px; }
.ft-pk-att .ft-ico { width: 18px; height: 18px; color: #d93a3a; } .ft-pk-att small { color: var(--pa-mute); }
.ft-float-cover { right: -18px; top: 150px; padding: 10px; }
.ft-cover { display: flex; flex-direction: column; gap: 3px; width: 168px; padding: 16px 14px; border: 1px solid var(--pa-line); border-radius: 6px; background: #fff; font-size: 11px; line-height: 1.35; }
.ft-cover b { font-size: 13px; } .ft-cover small { color: var(--pa-text); margin-bottom: 8px; } .ft-cover em { font-style: normal; font-weight: 600; } .ft-cover i { font-style: normal; color: var(--pa-text); }
.ft-bo-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.ft-bo-cards > span { padding: 10px 12px; border-radius: 10px; background: #f7f9fc; }
.ft-bo-cards small { display: block; margin-bottom: 4px; font-size: 11.5px; font-weight: 600; color: var(--pa-ink); }
.ft-bo-cards i { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding: 3px 0; font-style: normal; font-size: 11px; border-top: 1px dashed #dde2ea; }
.ft-bo-cards i:nth-of-type(1) { border-top: 0; } .ft-bo-cards i:nth-of-type(3) { border-top-style: solid; }
.ft-bo-cards em { font-style: normal; color: var(--pa-text); }
.ft-bo-cards b { font-size: 11.5px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; } .ft-bo-cards b.is-good { color: #0b7a5c; }
/* category rows: name + "actual / budgeted" on one line, the bar under them (budget-category-list) */
.ft-bo-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--pa-line); font-size: 12.5px; }
.ft-bo-list li:last-child { border-bottom: 0; }
.ft-bo-list li > span { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ft-bo-list li > b { white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--pa-ink); } .ft-bo-list li > b em { font-style: normal; font-weight: 400; color: var(--pa-mute); }
.ft-bo-list li > .ft-bar { grid-column: 1 / -1; }
.ft-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #0288d1; } .ft-dot.is-bad { background: #d92d20; }
.ft-bar { display: block; height: 6px; border-radius: 3px; background: #e8edf3; overflow: hidden; }
.ft-bar s { display: block; height: 100%; width: 0; border-radius: 3px; background: #16a37c; transition: width .9s var(--ease); }
.ft-bar.is-over s { background: #d92d20; }
.ft-bar s.ft-w81 { width: 81%; } .ft-bar s.ft-w100 { width: 100%; } .ft-bar s.ft-w74 { width: 74%; } .ft-bar s.ft-w92 { width: 92%; }
.ft-bd-ways { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.ft-bd-ways span { display: flex; flex-direction: column; gap: 3px; padding: 10px; border: 1px solid var(--pa-line); border-radius: 10px; font-size: 12.5px; }
.ft-bd-ways span.is-pick { border-color: var(--pa-blue); box-shadow: 0 0 0 3px rgba(42, 107, 230, .12); }
.ft-bd-ways .ft-ico { width: 18px; height: 18px; color: var(--pa-blue); } .ft-bd-ways small { font-size: 11px; color: var(--pa-mute); line-height: 1.35; }
.ft-bd-form .ft-fld > span i { font-style: normal; }
.ft-bd-pick.is-alt li:first-child i { border-color: #9aa4b4; } .ft-bd-pick.is-alt li:first-child i::after { transform: scale(0); } .ft-bd-pick.is-alt li:first-child { font-weight: 400; }
.ft-bd-pick li:first-child i { border-color: var(--pa-blue); } .ft-bd-pick li:first-child i::after { transform: none; } .ft-bd-pick li:first-child { font-weight: 600; }
.ft-bd-pick.is-alt li:nth-child(2) i { border-color: var(--pa-blue); } .ft-bd-pick.is-alt li:nth-child(2) i::after { transform: none; } .ft-bd-pick.is-alt li:nth-child(2) { font-weight: 600; }
.ft-bd-title { display: flex; align-items: center; gap: 8px; } .ft-bd-title .ft-chip { height: 22px; font-size: 11.5px; }
.ft-bd-acts { justify-content: flex-start; flex-wrap: wrap; margin: -2px 0 12px; }
.ft-rp-search { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; margin: 0 0 8px; border: 1px solid #c9d0db; border-radius: 8px; font-size: 12.5px; color: var(--pa-mute); }
.ft-rp-search .ft-ico { width: 15px; height: 15px; }
.ft-rp-fav { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.ft-rp-fav span { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; background: #f3f6fb; font-size: 12px; font-weight: 600; }
.ft-rp-fav .ft-ico { width: 13px; height: 13px; color: #d99a06; }
.ft-rp-fav.is-dates span.is-on { background: var(--pb-50); color: var(--pb-700); box-shadow: inset 0 0 0 1px var(--pb-100); }
.ft-rp-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 10px; padding: 10px 12px; margin-bottom: 6px; border: 1px solid var(--pa-line); border-radius: 10px; font-size: 13px; }
.ft-rp-list li b { font-weight: 600; } .ft-rp-list li small { font-size: 11.5px; color: var(--pa-mute); }
.ft-rp-list li.is-custom small { flex-basis: 100%; order: 3; }
.ft-bva-row { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--pa-line); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ft-bva-row > span:nth-child(n+2) { text-align: right; }
.ft-bva-row.is-head { font-size: 11px; font-weight: 600; color: var(--pa-mute); padding-top: 0; }
.ft-bva-row.is-grp { font-weight: 600; border-bottom: 0; padding-bottom: 2px; }
.ft-bva-row.is-tot { font-weight: 600; background: #f7f9fc; }
.ft-bva .ft-card-h { flex-wrap: wrap; }

/* Bank Integrations: connect card, match proposals, Link offline payments, Update Bank Account, statements + check, transfer */
.ft-acct-cards:has(.ft-acct:nth-child(3)) { grid-template-columns: 1fr 1fr; }
.ft-acct-connect { display: flex; align-items: center; justify-content: center; gap: 10px; border: 1.5px dashed #c9d0db; box-shadow: none; font-size: 13px; }
.ft-acct-connect.is-pressed { border-color: var(--pa-blue); background: #f3f7fe; }
.ft-match { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--pb-200, #bcd4fa); background: #fff; color: var(--pb-700); font-size: 11px; font-weight: 600; }
.ft-match .ft-ico { width: 12px; height: 12px; }
.ft-match.is-pressed { background: var(--pb-50); }
.ft-matched { height: 18px !important; margin-top: 3px; font-size: 10.5px !important; }
/* Link offline payments (the lockbox block's replacement, Review 3): row + menu, the dialog, the linked payments */
.ft-lp { position: relative; min-height: 400px; }
.ft-lp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 28px; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--pa-line); font-size: 12.5px; }
.ft-lp-row b { display: block; font-weight: 600; } .ft-lp-row small { display: block; font-size: 11px; color: var(--pa-mute); }
.ft-lp-row > .is-in { font-weight: 600; font-variant-numeric: tabular-nums; color: #0b7a5c; }
.ft-dots { display: grid; font-style: normal; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--pa-blue-50); color: var(--pa-blue); }
.ft-dots .ft-ico { width: 16px; height: 16px; } .ft-dots.is-pressed { background: #dbe6fb; }
.ft-lp-menu { top: 124px; right: 20px; min-width: 160px; }
.ft-lp-menu span:first-child { background: none; } .ft-lp-menu span.is-pressed { background: #f3f6fb; }
.ft-lp-dlg .ft-dlg-h .ft-ico { width: 16px; height: 16px; color: var(--pa-mute); }
.ft-lp-dep { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 10px; font-size: 12.5px; } .ft-lp-dep span { color: var(--pa-text); }
.ft-lp-banner { margin: 0 0 12px; padding: 9px 12px; border-radius: 8px; background: #e3f2fd; color: #0d3c78; font-size: 12px; line-height: 1.45; transition: background .3s, color .3s; }
.ft-lp-banner.is-ok { background: #e7f6ee; color: #0f5b3a; }
.ft-lp-panel { border: 1px solid var(--pa-line); border-radius: 10px; padding: 10px 12px 4px; }
.ft-lp-ph { display: flex; justify-content: space-between; align-items: center; margin: 0 0 6px; font-size: 12.5px; }
.ft-lp-cols { display: grid; grid-template-columns: 20px 92px minmax(0, 1fr); gap: 8px; margin: 0; padding: 0 0 4px; font-size: 11px; font-weight: 600; color: var(--pa-mute); }
.ft-lp-cols span:first-child { grid-column: 2; }
.ft-lp-pay { display: grid; grid-template-columns: 20px 92px minmax(0, 1fr); gap: 8px; align-items: center; padding: 7px 0; border-top: 1px solid var(--pa-line); font-size: 12px; }
.ft-lp-pay b { display: block; font-weight: 600; font-variant-numeric: tabular-nums; } .ft-lp-pay small { display: block; font-size: 11px; color: var(--pa-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-lp-pay i { display: grid; } .ft-lp-pay i .ft-ico { grid-area: 1 / 1; width: 18px; height: 18px; color: var(--pa-blue); }
.ft-lp-pay i .ft-ico:last-child { color: #b42318; opacity: 0; } .ft-lp-pay.is-sel i .ft-ico:first-child { opacity: 0; } .ft-lp-pay.is-sel i .ft-ico:last-child { opacity: 1; }
.ft-lp-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.ft-lp-count { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; font-size: 12px; color: var(--pa-text); } .ft-lp-count i { font-style: normal; } .ft-lp-count .ft-ico { width: 16px; height: 16px; }

.ft-lp-row.is-open { border-bottom: 0; }
.ft-lp-kids { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: #f7f9fc; font-size: 12px; }
.ft-lp-kids p { display: flex; justify-content: space-between; gap: 10px; margin: 0; padding: 5px 0; } .ft-lp-kids b { font-weight: 600; font-variant-numeric: tabular-nums; }
.ft-lp-kids .ft-lp-cap { padding-top: 0; font-size: 11px; font-weight: 600; color: var(--pa-mute); }
.ft-lp .ft-toast { bottom: 18px; }
/* Western Alliance Bank: the Update Bank Account form with the daily-feed toggle */
.ft-wab .ft-card-h .ft-ico { width: 16px; height: 16px; color: var(--pa-mute); }
.ft-wab-opt { display: flex; align-items: center; gap: 10px; margin: 2px 0 12px; font-size: 13px; }
.ft-wab-opt .gbl-toggle { flex: none; }
.ft-wab .ft-fld > span .ft-ico { width: 16px; height: 16px; color: var(--pa-mute); }
.ft-stmt-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--pa-line); font-size: 13px; }
.ft-stmt-list li:last-child { border-bottom: 0; }
.ft-stmt-list li > .ft-ico { width: 18px; height: 18px; color: #d93a3a; }
.ft-stmt-list .ft-link { display: inline-flex; align-items: center; gap: 4px; } .ft-stmt-list .ft-link .ft-ico { width: 14px; height: 14px; }
.ft-chk-img { display: grid; gap: 8px; padding: 14px 16px; border-radius: 6px; background: repeating-linear-gradient(135deg, #f4f7fb 0 8px, #eef3f9 8px 16px); border: 1px solid #dbe3ee; font-size: 11.5px; color: #3b4658; }
.ft-chk-top { display: flex; justify-content: space-between; } .ft-chk-top i { font-style: normal; font-variant-numeric: tabular-nums; }
.ft-chk-pay { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.ft-chk-pay small { font-size: 10px; } .ft-chk-pay b { border-bottom: 1px solid #9aa4b4; font-family: "Segoe Script", "Bradley Hand", cursive; font-weight: 400; font-size: 13px; }
.ft-chk-pay em { font-style: normal; padding: 2px 6px; border: 1px solid #9aa4b4; border-radius: 3px; font-weight: 600; }
.ft-chk-line { height: 1px; background: #9aa4b4; margin-top: 6px; }
.ft-chk-memo small { font-size: 10px; margin-right: 6px; }
.ft-xfr .ft-tx-row { grid-template-columns: 0 minmax(0, 1fr) 84px minmax(0, 1.4fr); }
.ft-xfr-note { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 8px 12px; border-radius: 8px; background: #f3f7fe; font-size: 12.5px; color: var(--pb-700); font-weight: 600; }
.ft-xfr-note .ft-ico { width: 16px; height: 16px; } .ft-xfr-note span { font-weight: 400; color: var(--pa-ink); } .ft-xfr-note b { font-weight: 600; margin-right: 4px; }

/* Payables & Vendors: widgets, inbox rows, Create Payable, approval rules, Track Mail, payment methods, vendor detail */
.ft-ap-widgets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.ft-ap-widgets span { padding: 10px 12px; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(20, 30, 50, .06); }
.ft-ap-widgets b { display: block; font-size: 18px; font-variant-numeric: tabular-nums; } .ft-ap-widgets small { display: block; font-size: 11px; font-weight: 600; color: var(--pa-mute); line-height: 1.3; }
.ft-ap-list { padding: 12px 16px 6px; }
.ft-ap-mail { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--pa-line); font-size: 12.5px; }
.ft-ap-mail:last-child { border-bottom: 0; }
.ft-ap-mail b { display: block; font-weight: 600; } .ft-ap-mail small { display: block; font-size: 11.5px; color: var(--pa-mute); }
.ft-ap-mail .gbl-pa-btn i { font-style: normal; } .ft-ap-mail .gbl-pa-btn .ft-ico { width: 14px; height: 14px; }
.ft-ap-mail > .ft-acct-ico { align-self: start; }
/* Inbox card is ~460px wide: button beside the text squeezes it into three wrapped lines, so it drops under the text. */
.ft-apin { container-type: inline-size; }
@container (max-width: 560px) {
  .ft-ap-mail { grid-template-columns: 30px minmax(0, 1fr); row-gap: 8px; }
  .ft-ap-mail .gbl-pa-btn { grid-column: 2; justify-self: start; max-width: 100%; white-space: normal; height: auto; min-height: 32px; }
}
/* the hero's inbox list too, once it is phone-narrow (Review 4: at 390 the button left the sender text a 0px column) */
.ft-ap-list { container-type: inline-size; }
@container (max-width: 420px) {
  .ft-ap-list .ft-ap-mail { grid-template-columns: 30px minmax(0, 1fr); row-gap: 8px; }
  .ft-ap-list .ft-ap-mail .gbl-pa-btn { grid-column: 2; justify-self: start; max-width: 100%; white-space: normal; }
}
.ft-ap-row { grid-template-columns: minmax(0, 1fr) 70px auto auto; }
.ft-tabs span.ft-ap-tab.is-on { color: var(--pa-mute); box-shadow: none; }
.ft-ap-row > span:nth-child(2) { font-weight: 600; font-variant-numeric: tabular-nums; }
.ft-ap-row .ft-chip { height: 20px; font-size: 10.5px; transition: background .3s, color .3s; white-space: nowrap; }
.ft-ap-row b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.ft-ap-dlg { width: min(460px, calc(100% - 32px)); top: 60px; }
.ft-ap-grid { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; }
.ft-ap-file { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px; border: 1px dashed #c9d0db; border-radius: 10px; background: #fafbfd; text-align: center; font-size: 11.5px; }
.ft-ap-file .ft-ico { width: 30px; height: 30px; color: #d93a3a; }
.ft-spin { position: absolute; inset: 0; border-radius: 10px; background: rgba(255, 255, 255, .7); }
.ft-spin::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 3px solid var(--pb-100); border-top-color: var(--pa-blue); animation: ft-spin .8s linear infinite; }
@keyframes ft-spin { to { rotate: 360deg; } }
.ft-ap-note { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 8px; padding: 8px 10px; border-radius: 8px; background: #f3f7fe; font-size: 12px; color: var(--pb-700); }
.ft-ap-note .ft-ico { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.ft-ap-s2 .ft-fld > span { font-size: 12px; }
.ft-float-mail { right: -18px; top: 372px; max-width: 250px; }
.ft-float-mail .gbl-float-ico { background: var(--pb-50); color: var(--pb-700); } .ft-float-mail .gbl-float-ico .ft-ico { width: 18px; height: 18px; }
.ft-apr-row { display: grid; grid-template-columns: 1.2fr 1fr 52px; gap: 10px; align-items: center; padding: 6px 0; font-size: 12.5px; }
.ft-apr-row.is-head { font-size: 11px; font-weight: 600; color: var(--pa-mute); border-bottom: 1px solid var(--pa-line); padding-bottom: 6px; margin-bottom: 4px; }
.ft-apr-row > span:last-child { justify-self: center; } .ft-apr-row > span:last-child .ft-ico { width: 14px; height: 14px; color: var(--pa-mute); }
.ft-apr-in { display: flex; align-items: center; height: 34px; padding: 0 10px; border: 1px solid #c9d0db; border-radius: 8px; font-variant-numeric: tabular-nums; }
.ft-apr-in.is-focus { border-color: var(--pa-blue); box-shadow: 0 0 0 3px rgba(42, 107, 230, .15); } .ft-apr-in i { font-style: normal; }
.ft-apr-foot { justify-content: space-between; margin-top: 12px; }
.ft-trk-no { display: flex; flex-direction: column; margin: 0 0 12px; padding: 8px 10px; border-radius: 8px; background: #f7f9fc; }
.ft-trk-no small { font-size: 10.5px; font-weight: 600; color: var(--pa-mute); letter-spacing: .03em; } .ft-trk-no b { font-size: 13px; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.ft-trk-steps li { position: relative; display: flex; gap: 12px; padding: 0 0 12px; font-size: 12.5px; }
.ft-trk-steps li:last-child { padding-bottom: 0; }
.ft-trk-steps li::before { content: ""; position: absolute; left: 6px; top: 16px; bottom: 0; width: 2px; background: #e3e7ee; }
.ft-trk-steps li:last-child::before { content: none; }
.ft-trk-steps i { position: relative; z-index: 1; flex: none; width: 14px; height: 14px; margin-top: 2px; border-radius: 50%; border: 2px solid #c9d0db; background: #fff; transition: background .3s, border-color .3s; }
.ft-trk-steps li.is-on i { border-color: #0d9472; background: #0d9472; }
.ft-trk-steps li.is-on::before { background: #9fd9c6; }
.ft-trk-steps b { display: block; font-weight: 600; color: var(--pa-mute); transition: color .3s; } .ft-trk-steps li.is-on b { color: var(--pa-ink); }
.ft-trk-steps small { font-size: 11px; color: var(--pa-mute); }
.ft-apin-addr { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 4px; font-size: 12.5px; }
.ft-apin-addr small { font-weight: 600; color: var(--pa-text); font-size: 12px; } .ft-apin-addr b { color: var(--pb-700); word-break: break-all; } .ft-apin-addr .ft-ico { width: 14px; height: 14px; color: var(--pa-mute); }
.ft-apin-tip { margin: 0 0 8px; font-size: 11.5px; color: var(--pa-mute); }
.ft-apm-opts { grid-template-columns: 1fr; }
.ft-apm-opts .ft-ship-opt small { grid-column: 2 / -1; line-height: 1.4; }
.ft-apm-opts .ft-ship-opt i { align-self: start; margin-top: 1px; }
.ft-vd > .ft-link { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 10px; } .ft-vd > .ft-link .ft-ico { width: 13px; height: 13px; }
.ft-vd-h { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-bottom: 12px; }
.ft-vd-h b { display: block; font-size: 14px; } .ft-vd-h small { display: block; font-size: 11.5px; color: var(--pa-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-vd-docs > div { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--pa-line); font-size: 12.5px; }
.ft-vd-docs .ft-ico { width: 18px; height: 18px; color: #d93a3a; } .ft-vd-docs b { display: block; font-weight: 600; } .ft-vd-docs small { font-size: 11px; color: var(--pa-mute); }

/* ---------- Gable band (indigo is allowed here only) ---------- */
.ft .ft-gable-sec { padding: 64px 0; }
.ft-gable { --g: #4645b6; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; padding: 64px; border-radius: var(--r-xl); color: #e6e8ff;
  background: radial-gradient(50% 70% at 90% 0%, rgba(155, 156, 216, .35), transparent 70%), linear-gradient(150deg, #262570 0%, #34338f 55%, #4645b6 100%); }
.ft-gable-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.gbl a.ft-gable-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); color: #fff; font-size: 15px; font-weight: 600; }
.gbl a.ft-gable-pill:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.gbl a.ft-gable-pill { position: relative; }
.gbl a.ft-gable-pill::after { content: ""; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }
.ft-gable .gbl-h2 { color: #fff; }
.ft-gable .gbl-lead { color: #dfe2ff; }
.gbl-home2 a.hx-more.ft-gable-more { color: #fff; padding: 10px 0; margin: -10px 0; }
.gbl-home2 a.hx-more.ft-gable-more:hover { color: #dfe2ff; }
.ft-gable { --focus: #c8cdf2; }
.ft-asks { display: flex; flex-direction: column; gap: 12px; }
.ft-asks li { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px 22px; border-radius: 18px; background: #fff; color: var(--ink); box-shadow: 0 18px 40px -24px rgba(10, 10, 60, .6); }
.ft-asks p { font-size: 17px; line-height: 1.5; color: var(--ink); }
.ft-bucket { padding: 3px 10px; border-radius: 999px; background: #f1f4fc; color: #34338f; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }

/* ---------- works with (related features) ---------- */
.ft .ft-rel-sec { padding: 64px 0 40px; }
.ft-rel-sec .gbl-sec-head { margin-bottom: 32px; }
.ft-rels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1120px; margin: 0 auto; }
.gbl a.ft-rel { display: grid; grid-template-columns: 48px minmax(0, 1fr) 20px; gap: 16px; align-items: center; height: 100%; padding: 22px 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--body); transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.gbl a.ft-rel:hover { transform: translateY(-3px); border-color: var(--pb-200); box-shadow: 0 24px 48px -30px rgba(24, 50, 140, .4); color: var(--body); }
.ft-rel-ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--pb-50); color: var(--pb-700); }
.ft-rel-ico .ft-ico { width: 24px; height: 24px; }
.ft-rel-txt b { display: block; font-size: 18px; color: var(--ink); }
.ft-rel-txt small { display: block; font-size: 15px; line-height: 1.45; color: var(--muted); }
.ft-rel-arr.ft-ico { width: 18px; height: 18px; color: var(--pb-700); transition: transform .2s var(--ease); }
.gbl a.ft-rel:hover .ft-rel-arr { transform: translateX(3px); }

/* pause control: 44px tap target on these pages (home2.js adds the button) */
.gbl .ft .hx-pause, .gbl.ft .hx-pause { height: 44px; padding: 0 16px 0 12px; }

/* == lane C-COM == (Earl's 10-16 review: Communications + Platform pages only — prefixed or [data-ft="<slug>"]-scoped) */
/* == /lane C-COM == */

/* ---------- FAQ ---------- */
.ft .ft-faq-sec { padding-top: 64px; padding-bottom: 40px; }
.ft .gbl-faq-a { visibility: hidden; transition: grid-template-rows .35s var(--ease), margin-top .35s var(--ease), visibility 0s linear .35s; }
.ft .gbl-faq-item.is-open .gbl-faq-a { visibility: visible; transition-delay: 0s; }

/* ---------- disclosures (compliance §2.2: labelled, visible, ≥14px, AA, after the FAQ) ---------- */
.ft-disc-sec { padding: 24px 0 48px; }
.ft-disc { padding: 32px 40px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); }
.gbl .ft-disc-h { font-size: 18px; line-height: 1.4; margin-bottom: 14px; }
.ft-disc-list { display: flex; flex-direction: column; gap: 12px; }
.ft-disc-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; font-size: 15px; line-height: 1.6; color: #4d5a6e; }
.ft-disc-list li:target { background: var(--pb-50); border-radius: 8px; box-shadow: 0 0 0 6px var(--pb-50); }
.ft-disc-n { font-weight: 600; color: var(--ink); }
/* the one underlined link inside .gbl (Dima, 2026-09-26): Stripe must read as a link here */
.gbl .ft-disc a, .fl-post-content .gbl .ft-disc a:not([class*="button"]) { color: var(--pb-700); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.gbl .ft-disc a.ft-disc-back, .fl-post-content .gbl .ft-disc a.ft-disc-back { text-decoration: none; padding: 0 4px; }

/* ---------- responsive (BB breakpoints: 1200 / 992 / 768) ---------- */
/* ≤1400: 14px links so the 7-item categories fit down to 1280 */
@media (max-width: 1400px) {
  .ft-subnav { --ft-lpad: 9px; }
  .gbl a.ft-subnav-link { font-size: 14px; padding: 0 9px; }
}
@media (max-width: 1280px) {
  .ft-float-limit, .ft-float-am { left: 12px; }
}
/* R23 (Dima, 2026-09-26): from 1101 to 1366 the category label gives its width to the list, so 7-item categories
   fit without scrolling (the breadcrumb still names the category). Below 1100 the list scrolls and the label returns */
@media (min-width: 1101px) and (max-width: 1366px) {
  .gbl a.ft-subnav-cat { display: none; }
}
@media (max-width: 1200px) {
  .ft { --ft-head: 64px; }
  .ft-subnav-in { padding: 0 32px; }
}
@media (max-width: 1100px) {
  .ft-pk-menu { top: auto; bottom: 44px; } /* shorter frames: the run menu opens upward so "Email packet" stays in view */
  .ft-hero .hx-hero-copy { padding-top: 56px; }
  .ft-crumbs ol { justify-content: center; }
  .ft-row-grid { grid-template-columns: 1fr; gap: 36px; }
  .ft-row.is-flip .ft-row-copy { order: 0; justify-self: start; }
  .ft-row-copy { max-width: 720px; }
  .ft-gable { grid-template-columns: 1fr; gap: 32px; padding: 48px 40px; }
  .ft-rels { grid-template-columns: 1fr; max-width: 640px; }
}
@media (max-width: 992px) {
  .ft-inc { grid-template-columns: 1fr; max-width: 640px; }
}
@media (max-width: 768px) {
  .ft { --ft-sub: 53px; }
  .ft-subnav-in { padding: 0 0 0 20px; gap: 12px; min-height: 52px; }
  .gbl a.ft-subnav-cat { padding-right: 12px; font-size: 14px; }
  .gbl a.ft-subnav-cat .ft-ico { display: none; }
  .ft-subnav { --ft-lpad: 10px; }
  .gbl a.ft-subnav-link { font-size: 14px; padding: 0 10px; }
  .ft-hero .hx-hero-copy { padding-top: 36px; }
  .ft-crumbs ol { font-size: 14px; }
  .gbl .ft .ft-hero .hx-h1, .gbl.ft .ft-hero .hx-h1 { font-size: 34px; }
  .ft-inc li { grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding: 20px 18px; }
  .ft-inc-ico { width: 44px; height: 44px; border-radius: 12px; }
  .ft-inc-ico .ft-ico { width: 22px; height: 22px; }
  .ft-inc h3 { font-size: 18px; }
  .ft-inc p { font-size: 16px; }
  .ft .ft-row { padding: 36px 0; }
  .ft-row-copy p { font-size: 17px; }
  .ft-vis { padding: 28px 14px; min-height: 0; border-radius: 28px; }
  .ft-card { padding: 16px 14px; }
  .ft-cardvis { width: 100%; max-width: 280px; margin: 0 auto 12px; }
  .ft-limits { padding-top: 16px; }
  .ft-flow-outs .ft-flow-node small { display: none; }
  .ft-flow-outs .ft-flow-node b { font-size: 13px; }
  .ft-dlg { top: 64px; padding: 16px; }
  /* no .gbl-float rules here: gable.css hides every float at ≤768 */
  .ft-hero-scene .ft-bal-amt { font-size: 24px; }
  .ft-gable { padding: 36px 22px; border-radius: 28px; }
  .ft-asks li { padding: 16px 18px; }
  .ft-asks p { font-size: 16px; }
  .ft-disc { padding: 24px 20px; }
  /* amenity mocks on phones */
  .ft-am-h strong { font-size: 17px; }
  .ft-am-hero .ft-am-rules, .ft-am-hero .ft-cal-days .is-wk2, .ft-am-hero .ft-cal-days .is-wk3 { display: none; }
  .ft-am-grid, .ft-am-co { grid-template-columns: 1fr; gap: 12px; }
  .ft-am-hero .ft-am-terms { display: none; }
  .ft-am-hero .ft-am-card { padding: 12px 14px; }
  .ft-am-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft-am-tbl > div { grid-template-columns: 1.4fr 1.3fr .6fr; }
  .ft-am-tbl > div > span:nth-child(2), .ft-am-tbl > div > span:nth-child(4) { display: none; }
  .ft-am-rulelist { grid-template-columns: 1fr; }
}
/* Review 2: at the narrowest widths the approvals tabs fade out at the edge (mat-tabs paginate there), and the
   dashboard's Filters button goes icon-only (the app hides its text too), so neither pushes past its card */
@media (max-width: 420px) {
  .ft-am-tabs.is-sm { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .ft-am-hbtns .gbl-pa-btn:not(.is-blue) { font-size: 0; gap: 0; }
  .ft-bo .ft-card-h { flex-wrap: wrap; row-gap: 6px; } .ft-bo .ft-card-h > * { white-space: nowrap; }
}
@media (max-width: 360px) {
  .ft-bo-list li { grid-template-columns: 1fr; gap: 3px; } .ft-bo-list li > b { padding-left: 16px; } .ft-bo-list li > .ft-bar { margin-top: 3px; }
}
/* Session 3 mocks on phones: the secondary header button and the Unit column give way; figures stay on one line */
@media (max-width: 560px) {
  .ft-bo .ft-bo-cards { grid-template-columns: 1fr; gap: 6px; }
  .ft .ft-hide-sm { display: none; }
  .ft-inv-prog .ft-card-h { flex-wrap: wrap; }
  .ft-inv-figs b { font-size: 14px; white-space: nowrap; }
  .ft-inv-figs { gap: 6px; }
  .ft-inv-row { grid-template-columns: 70px minmax(0, 1fr) 62px; }
  .ft-inv-row > span:nth-child(3) { display: none; }
  .ft-inv-charge { grid-template-columns: minmax(0, 1.4fr) 1fr .8fr; }
  .ft-inv-charge > span:nth-child(3) { display: none; }
  .ft-auto-row { grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr); } .ft-auto-row.is-head > span:first-child { white-space: normal; }
  .ft-auto-row > span:nth-child(2) { display: none; }
  .ft-pay-grid { grid-template-columns: 1fr; gap: 6px; }
  .ft-ship { grid-template-columns: 1fr; }
  .ft-fee-charge { grid-template-columns: 1.4fr 1fr; } .ft-fee-charge > span:nth-child(3) { display: none; }
  .ft-acct-cards { grid-template-columns: 1fr; }
  .ft-tx-row { grid-template-columns: 16px minmax(0, 1fr) 78px; gap: 4px 8px; }
  .ft-tx-row > .ft-cat { grid-column: 2 / -1; }
  .ft-tx-row > .ft-rule, .ft-tx-row.is-head > span:nth-child(4) { display: none; }
  .ft-rl { grid-template-columns: 1.2fr 1fr 60px; } .ft-rl > span:nth-child(2) { display: none; }
  .ft-rule-row { grid-template-columns: 1.1fr 1.2fr 1fr; } .ft-rule-row > span:nth-child(2) { display: none; }
  .ft-f1099-row { grid-template-columns: 1.4fr 1fr 1fr; }
  .ft-f1099-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ft-rec-row { grid-template-columns: minmax(0, 1fr) 70px 58px; } .ft-rec-row > span:nth-child(1), .ft-rec-row > span:nth-child(4) { display: none; }
  .ft-rule-2, .ft-je-cols { grid-template-columns: 1fr; gap: 0; }
  .ft-rec-bal b { font-size: 12.5px; }
  .ft-pk-list { grid-template-columns: 1fr; }
  .ft-pk-row { grid-template-columns: minmax(0, 1fr) auto 40px; } .ft-pk-row > span:nth-child(2) { display: none; }
  .ft-bd-ways { grid-template-columns: 1fr 1fr; }
  .ft-bva-row { grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr)); } .ft-bva-row > span:nth-child(2) { display: none; }
  .ft-acct-cards:has(.ft-acct:nth-child(3)) { grid-template-columns: 1fr; }
  .ft-acct-cards .ft-acct:first-child:has(~ .ft-acct.is-on) { display: none; }
  .ft-ap-widgets { gap: 6px; } .ft-ap-widgets b { font-size: 15px; }
  .ft-ap-row { grid-template-columns: minmax(0, 1fr) auto auto; } .ft-ap-row > span:nth-child(2) { display: none; }
  .ft-apr-foot { flex-wrap: wrap; gap: 8px; }
  .ft-ap-grid { grid-template-columns: 1fr; } .ft-ap-file { flex-direction: row; padding: 8px; }
  .ft-ap-file .ft-ico { width: 20px; height: 20px; }
  .ft-ap-dlg { top: 8px; padding: 14px 16px; }
  .ft-ap-dlg .ft-stepper { margin-bottom: 8px; }
  .ft-ap-s1 .ft-rule-2 label:nth-child(n+3), .ft-ap-s2 .ft-radios li:nth-child(2), .ft-ap-s2 .ft-ap-note { display: none; }
  .ft-ap-dlg .ft-fld { margin-bottom: 6px; } .ft-ap-dlg .ft-fld > span { height: 34px; }
  .ft-ap-dlg .gbl-pa-btn { white-space: normal; height: auto; min-height: 32px; padding-top: 6px; padding-bottom: 6px; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .ft *, .ft *::before, .ft *::after { transition: none !important; }
}

/* ---------- Bookkeeping Services mocks (ui v2-layout/bookkeeping, core Bookkeeping emails); fictional data ---------- */
/* the board's Bookkeeping page: Your Bookkeeper, Bank statements, Financial & Tax documents */
.ft-bk-page .gbl-pa-h { margin-bottom: 10px; }
.ft-bk-card { padding: 12px 16px; margin-bottom: 10px; }
.ft-bk-t { margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--pa-line); font-size: 14px; font-weight: 600; color: var(--pa-ink); }
.ft-bk-keeper { display: flex; align-items: center; gap: 12px; }
.ft-bk-av { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--pb-100); color: var(--pb-800); font-size: 13px; font-weight: 600; }
.ft-bk-av.is-sm { width: 28px; height: 28px; font-size: 11px; }
.ft-bk-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; margin-right: auto; }
.ft-bk-who b { font-size: 13.5px; font-weight: 600; }
.ft-bk-line { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; color: var(--pa-text); }
.ft-bk-line .ft-ico { width: 13px; height: 13px; color: var(--pa-mute); }
.ft-bk-line i { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-bk-line.is-link i { color: var(--pb-600); }
.ft-bk-call { border-color: transparent; box-shadow: none; color: var(--pa-text); }
.ft-bk-call .ft-ico { width: 15px; height: 15px; }
.ft-bk-banner { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 4px; padding: 8px 10px; border: 1px solid var(--pa-blue); border-radius: 8px; font-size: 12px; line-height: 1.4; }
.ft-bk-banner .ft-ico { width: 14px; height: 14px; margin-top: 2px; color: var(--pa-blue); }
.ft-bk-banner b { display: block; font-weight: 600; }
.ft-bk-banner small { display: block; font-size: 12px; color: var(--pa-text); }
.ft-bk-row { display: grid; grid-template-columns: minmax(0, 1.25fr) 78px minmax(0, 1.25fr) 84px; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--pa-line); font-size: 12.5px; }
.ft-bk-row:last-child { border-bottom: 0; padding-bottom: 2px; }
.ft-bk-row.is-head { padding: 6px 0; font-size: 11px; font-weight: 600; color: var(--pa-mute); }
.ft-bk-acct { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ft-bk-acct > i, .ft-bk-file > i, .ft-bk-ufile > i, .ft-bk-circ { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #eceef2; }
.ft-bk-acct > i .ft-ico, .ft-bk-file > i .ft-ico, .ft-bk-ufile > i .ft-ico { width: 14px; height: 14px; color: var(--pa-text); }
.ft-bk-acct b { display: block; font-weight: 600; }
.ft-bk-acct small { display: block; font-size: 11px; color: var(--pa-mute); }
em.ft-bk-type { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; background: #fff2d3; color: #9a4b00; font-size: 11px; font-style: normal; font-weight: 600; }
em.ft-bk-type.is-auto { background: #d3f8e7; color: #0a725a; }
.ft-bk-upd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.ft-bk-upd .ft-chip { height: 20px; padding: 0 7px; font-size: 11px; }
.ft-bk-warn .ft-ico, .ft-bk-due .ft-ico { width: 14px; height: 14px; color: #c45a00; }
.ft-bk-warn { display: inline-flex; }
.ft-bk-up { height: 28px; padding: 0 10px; font-size: 12px; }
.ft-hero-scene .ft-bk-up .ft-ico { width: 14px; height: 14px; }
.ft-bk-none { color: var(--pa-mute); }
.ft-bk-manage { display: flex; align-items: center; gap: 6px; margin: 4px -16px -12px; padding: 10px 16px; border-top: 1px solid var(--pa-line); font-size: 12.5px; font-weight: 600; color: var(--pb-600); }
.ft-bk-manage .ft-ico { width: 13px; height: 13px; }
.ft-bk-docs .ft-tabs { margin-bottom: 8px; }
.ft-bk-files { display: flex; flex-direction: column; gap: 8px; }
.ft-bk-file { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 10px; border: 1px solid #d9dee6; border-radius: 8px; }
.ft-bk-fn { min-width: 0; }
.ft-bk-fn b { display: block; font-size: 12.5px; font-weight: 600; color: var(--pb-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-bk-fn small { display: block; font-size: 11.5px; color: var(--pa-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-bk-fact { display: flex; align-items: center; gap: 12px; }
em.ft-bk-new { padding: 2px 8px; border-radius: 999px; background: #ffe4ea; color: #be1238; font-size: 11px; font-style: normal; font-weight: 600; }
.ft-bk-dl { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; }
.ft-bk-dl .ft-ico { width: 15px; height: 15px; color: var(--pa-text); }

/* Upload bank statement dialog */
.ft-bk-dlg { top: 36px; width: min(420px, calc(100% - 24px)); padding: 16px 18px; }
.ft-bk-dlg .ft-dlg-h { align-items: flex-start; margin-bottom: 10px; }
.ft-bk-dlg .ft-dlg-h strong { display: block; }
.ft-bk-sub { display: block; font-size: 12.5px; color: var(--pa-text); }
.ft-bk-step { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; }
.ft-bk-step b { font-weight: 600; }
.ft-bk-step i { font-style: normal; }
.ft-bk-step.is-2 { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--pa-line); }
.ft-bk-n { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #eef1f6; color: var(--pa-text); font-size: 11px; font-weight: 600; }
.ft-bk-year { display: inline-flex; align-items: center; gap: 4px; height: 28px; margin-left: auto; padding: 0 8px; border: 1px solid #c9d0db; border-radius: 8px; font-size: 12px; }
.ft-bk-year .ft-ico { width: 12px; height: 12px; color: var(--pa-mute); }
.ft-bk-due { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 7px 10px; border: 1px solid #e58a1f; border-radius: 8px; font-size: 12px; }
.ft-bk-due b { font-weight: 600; }
.ft-bk-months { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ft-bk-months > span { position: relative; display: flex; flex-direction: column; padding: 6px 9px; border: 1px solid var(--pa-line); border-radius: 10px; background: #fff; font-size: 11px; color: var(--pa-mute); transition: border-color .25s, background .25s; }
.ft-bk-months b { font-size: 12px; font-weight: 600; color: var(--pa-ink); }
.ft-bk-months .ft-ico { display: none; position: absolute; right: 7px; top: 7px; width: 13px; height: 13px; }
.ft-bk-months .is-over { border-color: #f2b36b; background: #fff7ec; }
.ft-bk-months .is-over svg:nth-of-type(1) { display: block; color: #c45a00; }
.ft-bk-months .is-up { border-color: #9fd9c1; background: #effaf5; }
.ft-bk-months .is-up svg:nth-of-type(1) { display: none; }
.ft-bk-months .is-up svg:nth-of-type(2) { display: block; color: #0d9472; }
.ft-bk-months .is-sel { border-color: var(--pa-blue); background: var(--pb-50); }
.ft-bk-months .is-sel b, .ft-bk-months .is-sel small { color: var(--pb-600); }
.ft-bk-drop { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1.5px dashed #b8c1cf; border-radius: 10px; font-size: 12px; }
.ft-bk-drop .ft-ico { width: 26px; height: 26px; color: var(--pa-blue); }
.ft-bk-drop b { display: block; font-weight: 500; }
.ft-bk-drop em { font-style: normal; font-weight: 600; color: var(--pb-600); }
.ft-bk-drop small { display: block; color: var(--pa-mute); }
/* the app's processing overlay covers the dialog while the file uploads */
.ft-bk-busy { position: absolute; inset: 58px 0 60px; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 16px; background: rgba(255, 255, 255, .86); font-size: 13px; font-weight: 600; color: var(--pa-ink); }
.ft-bk-busy i { width: 16px; height: 16px; border: 2px solid var(--pb-100); border-top-color: var(--pa-blue); border-radius: 50%; animation: gbl-spin .8s linear infinite; }
.ft-bk-ups > small { display: block; margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--pa-text); }
.ft-bk-ufile { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 6px 10px; border: 1px solid #d9dee6; border-radius: 8px; font-size: 12px; }
.ft-bk-ufile b { font-weight: 600; color: var(--pb-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-bk-ufile > .ft-ico { width: 15px; height: 15px; color: var(--pa-text); }
.ft-bk-foot { justify-content: space-between; margin-top: 12px; }
.ft-bk-cancel, .ft-bk-back { border-color: #eef1f6; background: #eef1f6; box-shadow: none; }
/* the app's growler sits above everything, the dialog included */
.ft-bk-dlg ~ .ft-toast { z-index: 8; }

/* the report-ready email (desktop float) */
.ft-float-bkmail { left: -26px; bottom: 44px; padding: 0; overflow: hidden; }
.ft-bkmail { display: flex; flex-direction: column; gap: 2px; width: 236px; padding: 0 16px 14px; font-size: 12px; }
.ft-bkmail em { margin: 0 -16px 10px; padding: 10px 16px; background: #22c55e; color: #fff; font-size: 13px; font-style: normal; font-weight: 600; }
.ft-bkmail b { font-size: 13px; font-weight: 600; }
.ft-bkmail small { color: var(--pa-text); }
.ft-bkmail i { align-self: flex-start; margin-top: 8px; padding: 6px 12px; border-radius: 8px; background: var(--pa-blue); color: #fff; font-style: normal; font-weight: 600; }

/* enrollment wizard steps (Accounting Setup, Service Preferences) */
.ft-bk-wiz { width: 100%; max-width: 440px; }
.ft-bk-wiz .ft-card { max-width: none; }
/* the page header's stepper-progress: a line filled to the current step, a dot on it, every label */
.ft-bk-prog { position: relative; margin: 0 0 14px; }
.ft-bk-prog > i { position: absolute; left: 10%; right: 10%; top: 3px; height: 2px; overflow: hidden; background: #dfe3ea; }
.ft-bk-prog > i b { display: block; width: var(--fill, 0%); height: 100%; background: var(--pa-blue); }
.ft-bk-prog ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ft-bk-prog li { display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 11.5px; color: var(--pa-mute); white-space: nowrap; }
.ft-bk-prog li::before { content: ""; position: relative; z-index: 1; width: 8px; height: 8px; border-radius: 50%; }
.ft-bk-prog li.is-on { color: var(--pa-ink); font-weight: 600; }
.ft-bk-prog li.is-on::before { background: var(--pa-blue); }
.ft-bk-q { margin: 10px 0 4px; padding-top: 10px; border-top: 1px solid var(--pa-line); font-size: 12.5px; font-weight: 600; color: var(--pa-ink); }
.ft-card-h + .ft-bk-q { padding-top: 0; border-top: 0; }
.ft-bk-radios { margin-bottom: 2px; }
.ft-bk-radios li { padding: 4px 4px; font-size: 12.5px; }
.ft-radios li.is-on.ft-bk-was { font-weight: 400; }
.ft-radios li.is-on.ft-bk-was i { border-color: #9aa4b4; }
.ft-radios li.is-on.ft-bk-was i::after { transform: scale(0); }
.ft-bk-fy { margin: 6px 0 2px; }
.ft-bk-fy em.is-val { color: var(--pa-ink); }
.ft-bk-hint { margin: -6px 0 4px; }
.ft-bk-wfoot { display: flex; justify-content: space-between; margin-top: 12px; }
/* Service Preferences micro-state: the quarterly option flips on as the card reveals */
.ft-bk-flip li.ft-bk-on { font-weight: 600; }
.ft-bk-flip li.ft-bk-on i { border-color: var(--pa-blue); }
.ft-bk-flip li.ft-bk-on i::after { transform: none; }
.gbl-js .ft-vis-replica .ft-bk-flip i, .gbl-js .ft-vis-replica .ft-bk-flip i::after { transition-delay: .6s; }
.gbl-js .ft-vis-replica:not(.is-in) .ft-bk-flip li.ft-bk-on { font-weight: 400; }
.gbl-js .ft-vis-replica:not(.is-in) .ft-bk-flip li.ft-bk-on i { border-color: #9aa4b4; }
.gbl-js .ft-vis-replica:not(.is-in) .ft-bk-flip li.ft-bk-on i::after { transform: scale(0); }
.gbl-js .ft-vis-replica:not(.is-in) .ft-bk-flip li.ft-bk-off { font-weight: 600; }
.gbl-js .ft-vis-replica:not(.is-in) .ft-bk-flip li.ft-bk-off i { border-color: var(--pa-blue); }
.gbl-js .ft-vis-replica:not(.is-in) .ft-bk-flip li.ft-bk-off i::after { transform: none; }

/* bookkeeper assigned: "You're all set!" and the pending panel fold shut while the assigned details grow in, then a compact
   email lands in the space they freed; the stack reserves the peak mid-swap height (383px measured at 1440 and 390), so the section never grows */
.ft-bk-kstack { min-height: 384px; }
.ft-bk-set { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-left: 4px solid #0d9472; }
.ft-bk-set > .ft-ico { width: 18px; height: 18px; margin-top: 1px; color: #0d9472; }
.ft-bk-set b { display: block; font-size: 13.5px; font-weight: 600; }
.ft-bk-set small { display: block; font-size: 12px; color: var(--pa-text); }
.ft-bk-pend { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 6px 4px; text-align: center; }
.ft-bk-circ { width: 44px; height: 44px; }
.ft-bk-circ .ft-ico { width: 18px; height: 18px; color: var(--pa-text); }
.ft-bk-pend b { font-size: 13.5px; font-weight: 600; }
.ft-bk-pend small { font-size: 12px; line-height: 1.45; color: var(--pa-text); }
.ft-bk-pend em { padding: 3px 10px; border-radius: 999px; background: rgba(34, 86, 211, .12); color: var(--pb-600); font-size: 11.5px; font-style: normal; font-weight: 600; }
.ft-bk-kcard .ft-bk-call { color: var(--pb-600); } .ft-bk-kcard .ft-bk-call .ft-ico { color: var(--pb-600); }
.gbl-js [data-gbl-scene] .ft-bk-kstack .gbl-fold.gbl-fold.is-off.is-off { animation: ft-bk-fold .55s var(--ease) forwards; overflow: hidden; }
.gbl-js [data-gbl-scene] .ft-bk-kstack .ft-bk-set.gbl-fold.gbl-fold.is-off.is-off { animation-name: ft-bk-fold-set; }
@keyframes ft-bk-fold { from { max-height: 220px; opacity: 1; } 40% { opacity: 0; } to { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; } }
/* the stack's 14px gap goes with it */
@keyframes ft-bk-fold-set { from { max-height: 90px; opacity: 1; } 40% { opacity: 0; } to { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; margin-bottom: -14px; border-width: 0; box-shadow: none; } }
.gbl-js [data-gbl-scene] .ft-bk-keeper.gbl-sx { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .55s var(--ease), opacity .35s ease .2s; }
.gbl-js [data-gbl-scene] .ft-bk-keeper.gbl-sx.is-on { max-height: 90px; opacity: 1; }
/* the email: an inbox row, the blue header, its first paragraph and button */
.ft-bk-mail { padding: 0 16px 14px; overflow: hidden; font-size: 12px; line-height: 1.45; }
.ft-bk-mail p { margin: 0 0 10px; color: var(--pa-text); }
.ft-bk-mailbar { display: flex; align-items: center; gap: 8px; margin: 0 -16px !important; padding: 9px 16px; }
.ft-bk-mailbar > span:nth-child(2) { flex: 1; min-width: 0; }
.ft-bk-mailbar b { display: block; font-size: 12px; font-weight: 600; color: var(--pa-ink); line-height: 1.2; }
.ft-bk-mailbar small { display: block; font-size: 11px; color: var(--pa-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-bk-mailbar i { font-style: normal; font-size: 11px; color: var(--pa-mute); }
.ft-bk-mailfrom { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--pa-blue); color: #fff; font-size: 12px; font-weight: 700; }
.ft-bk-mailh { margin: 0 -16px 10px !important; padding: 10px 16px; background: #3369e7; color: #fff !important; font-size: 13.5px; font-weight: 600; }
.ft-bk-mailbtn { height: 30px; }
.gbl-js [data-gbl-scene] .ft-bk-mail.is-on { animation: ft-bk-land .6s var(--ease) both; }
@keyframes ft-bk-land { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* statement reminder email */
.ft-bk-rem { max-width: 420px; padding: 0 20px 18px; overflow: hidden; font-size: 12.5px; }
.ft-bk-remh { margin: 0 -20px 14px; padding: 12px 20px; background: #ffb800; color: #1b1e23; font-size: 15px; font-weight: 600; }
.ft-bk-remb { display: flex; flex-direction: column; gap: 12px; }
.ft-bk-remb p { margin: 0 0 4px; color: var(--pa-text); }
.ft-bk-act { padding: 10px 12px; border-left: 4px solid #ffb800; border-radius: 4px; background: #fff3cd; }
.ft-bk-act b { display: block; color: #856404; font-weight: 600; }
.ft-bk-act small { display: block; font-size: 12px; color: #856404; }
.ft-bk-per { padding: 12px; border-radius: 8px; background: #e8f0fe; text-align: center; }
.ft-bk-per small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--pa-text); }
.ft-bk-per b { font-size: 28px; font-weight: 600; line-height: 1.25; color: #3369e7; }
.ft-bk-rembtn { height: 36px; padding: 0 16px; }
.ft-bk-help { padding: 12px; border-radius: 8px; background: #f6f7f9; }
.ft-bk-help > b { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.ft-bk-help > small { display: block; margin-bottom: 8px; font-size: 12px; color: var(--pa-text); }
.ft-bk-mini { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: #e8f0fe; }
.ft-bk-mini b { display: block; font-size: 12.5px; font-weight: 600; }
.ft-bk-mini i { display: block; font-size: 12px; font-style: normal; color: var(--pb-600); }

/* ---------- price calculator (a real form, not a mock) ---------- */
.ft-calc-sec .gbl-sec-head { margin-bottom: 32px; }
.ft-calc { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); max-width: 1040px; margin: 0 auto; overflow: hidden; border: 1px solid var(--pb-100); border-radius: 24px; background: #fff; box-shadow: 0 1px 2px rgba(28, 39, 55, .04), 0 30px 60px -36px rgba(24, 50, 140, .3); text-align: left; }
.ft-calc-form { display: flex; flex-direction: column; gap: 26px; padding: 36px 40px 38px; }
.ft-calc-f { min-width: 0; margin: 0; padding: 0; border: 0; }
.ft-calc-l { display: block; margin: 0 0 8px; padding: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.ft-calc-h { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: var(--body); }
/* number fields: digits only (features2.js), a unit suffix inside the box */
.ft-calc-box { position: relative; max-width: 240px; }
.gbl .ft-calc-in { display: block; width: 100%; height: 48px; padding: 0 14px; border: 1px solid #b9c2cf; border-radius: 10px; background: #fff; font: inherit; font-size: 16px; color: var(--ink); font-variant-numeric: tabular-nums; transition: border-color .15s, box-shadow .15s; }
.gbl .ft-calc-box .ft-calc-in { padding-right: 76px; }
.gbl .ft-calc-in::placeholder { color: #6b7688; }
.gbl .ft-calc-in:hover { border-color: #8e99aa; }
.gbl .ft-calc-in:focus { outline: none; background: #fff; border-color: var(--pb-600); box-shadow: 0 0 0 3px rgba(34, 86, 211, .2); }
.ft-calc-suf { position: absolute; top: 0; right: 14px; display: flex; align-items: center; height: 48px; font-size: 15px; color: var(--body); pointer-events: none; }
/* the unit scale: every base-price step, the visitor's marked */
.ft-calc-tiers { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin-top: 8px; }
.ft-calc-tiers li { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 4px 8px; border-radius: 8px; background: #f2f4f8; color: var(--body); font-variant-numeric: tabular-nums; transition: background .2s, color .2s; }
.ft-calc-tiers b { font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap; transition: color .2s; }
.ft-calc-tiers span { font-size: 13px; }
.ft-calc-tiers li.is-on { background: var(--pb-600); color: #fff; }
.ft-calc-tiers li.is-on b { color: #fff; }
.ft-calc-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px 24px; }
.ft-calc-pair .ft-calc-box { max-width: none; }
.ft-calc-step { display: flex; gap: 6px; }
.gbl .ft-calc-step .ft-calc-in { width: 64px; padding: 0 6px; text-align: center; }
.gbl .ft-calc-step button { flex: none; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid #b9c2cf; border-radius: 10px; background: #fff; color: var(--pb-600); cursor: pointer; transition: background .15s, border-color .15s; }
.gbl .ft-calc-step button:hover:not(:disabled) { border-color: var(--pb-600); background: var(--pb-50); }
.gbl .ft-calc-step button:disabled { color: #9aa3b0; cursor: default; }
.ft-calc-step .ft-ico { width: 18px; height: 18px; }
/* accounting basis: a segmented control of two real radios (same look as the homepage price calculator) */
.ft-calc-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: #eef2f7; }
.ft-calc-seg label { position: relative; display: block; margin: 0; cursor: pointer; }
.ft-calc-seg input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.ft-calc-seg span { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 2px 8px; min-height: 48px; padding: 12px 10px; border-radius: 10px; text-align: center; transition: background .2s, box-shadow .2s; }
.ft-calc-seg b { font-size: 15px; font-weight: 600; color: var(--body); }
.ft-calc-seg small { font-size: 13px; color: var(--body); }
.ft-calc-seg label:hover b { color: var(--ink); }
.ft-calc-seg input:checked + span { background: #fff; box-shadow: 0 1px 3px rgba(20, 30, 50, .12); }
.ft-calc-seg input:checked + span b { color: var(--ink); }
.ft-calc-seg input:checked + span small { color: var(--pb-600); font-weight: 600; }
.ft-calc-seg input:focus-visible + span { box-shadow: 0 0 0 3px var(--focus, #2256d3); }
/* the estimate */
.ft-calc-out { display: flex; flex-direction: column; padding: 36px 40px 38px; border-left: 1px solid var(--pb-100); background: var(--pb-50); }
.ft-calc-k { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--pb-600); }
.ft-calc-empty, .ft-calc-priced, .ft-calc-quote { display: none; }
.ft-calc-out[data-state="empty"] .ft-calc-empty, .ft-calc-out[data-state="priced"] .ft-calc-priced, .ft-calc-out[data-state="quote"] .ft-calc-quote { display: flex; flex-direction: column; }
.ft-calc-total { display: flex; align-items: baseline; gap: 6px; margin: 0 0 18px; }
.ft-calc-total b { display: inline-block; font-size: 52px; font-weight: 600; line-height: 1.1; letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums; transform-origin: left center; }
.ft-calc-total b.is-bump { animation: hx-tick .35s var(--ease); }
.ft-calc-total span, .ft-calc-total small { font-size: 16px; color: var(--body); }
.ft-calc-base { margin: 0 0 14px; }
.ft-calc-base li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--pb-100); font-size: 14.5px; color: var(--ink); }
.ft-calc-base b { font-weight: 600; color: var(--body); }
.ft-calc-base li:first-child b { color: var(--ink); }
.ft-calc-hint { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 14px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--pb-100); font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.ft-calc-rows { margin: 0 0 22px; }
.ft-calc-rows > div { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 9px 0; border-top: 1px solid var(--pb-100); font-size: 14.5px; }
.gbl .ft-calc-rows > div[hidden] { display: none; }
.ft-calc-rows dt { color: var(--ink); }
.ft-calc-rows dt small { display: block; font-size: 13px; color: var(--body); }
.ft-calc-rows dd { margin: 0; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ft-calc-rows .is-total { border-top: 1.5px solid #b9cdf2; }
.ft-calc-rows .is-total dt { font-weight: 600; }
.ft-calc-cta { align-self: stretch; justify-content: center; }
.ft-calc-sub { margin: 10px 0 0; font-size: 13.5px; color: var(--body); text-align: center; }
.ft-calc-quote { gap: 10px; }
.ft-calc-qt { margin: 0; font-size: 30px; font-weight: 600; line-height: 1.2; color: var(--ink); }
.ft-calc-quote p:not(.ft-calc-qt) { margin: 0 0 10px; font-size: 15px; line-height: 1.55; color: var(--body); }
.ft-calc-fine { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--pb-100); font-size: 13px; line-height: 1.5; color: var(--body); }
/* included with every plan: one strip under both columns */
.ft-calc-inc { grid-column: 1 / -1; padding: 22px 40px 26px; border-top: 1px solid var(--pb-100); }
.ft-calc-inc > p { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--ink); }
.ft-calc-inc ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 20px; }
.ft-calc-inc li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.4; color: var(--body); }
.ft-calc-inc .ft-ico { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--pb-600); }
@media (max-width: 992px) {
  .ft-calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ft-calc-form, .ft-calc-out { padding: 28px; }
  .ft-calc-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ft-calc-inc { padding: 20px 28px 24px; }
  .ft-calc-inc ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .ft-calc { grid-template-columns: minmax(0, 1fr); border-radius: 20px; }
  .ft-calc-form, .ft-calc-out { padding: 24px 18px; }
  .ft-calc-out { border-left: 0; border-top: 1px solid var(--pb-100); }
  .ft-calc-tiers { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ft-calc-total b { font-size: 44px; }
  .ft-calc-inc { padding: 18px 18px 22px; }
}
@media (max-width: 560px) {
  .ft-calc-pair { grid-template-columns: minmax(0, 1fr); }
  .ft-calc-box { max-width: none; }
  .ft-calc-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ft-calc-inc ul { gap: 8px 12px; }
}
@media (max-width: 560px) {
  /* the app's mobile statements layout: account + type on one line, last update + Upload under it */
  .ft-bk-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .ft-bk-row.is-head { display: none; }
  .ft-bk-row > :nth-child(3) { grid-column: 1; }
  .ft-bk-row > :nth-child(4) { grid-column: 2; justify-self: end; }
  .ft-bk-call { display: none; }
  .ft-bk-banner small { display: none; }
  /* the dialog shows the four latest months, two per row, so it fits the phone frame */
  .ft-bk-dlg { top: 8px; padding: 14px 14px 12px; }
  .ft-bk-months { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .ft-bk-months > span:nth-child(n+5) { display: none; }
  .ft-bk-months > span { flex-direction: row; align-items: baseline; gap: 5px; padding: 6px 26px 6px 9px; }
  .ft-bk-due { padding: 6px 9px; }
  .ft-bk-step.is-2 { margin-top: 8px; padding-top: 8px; }
  .ft-bk-drop { padding: 9px 12px; }
  .ft-bk-drop .ft-ico { width: 22px; height: 22px; }
  .ft-bk-foot { margin-top: 10px; }
  .ft-bk-dlg ~ .ft-toast { top: 10px; bottom: auto; }
  .ft-bk-inc { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Management pages (Session 4): shared mock pieces; fictional data ---------- */
/* Violations: New Violation editor, the list with custom-status chips, Change violation status, fine, USPS mail, settings,
   the homeowner's view, the dashboard (ui v2-layout/violations) */
.ft-vi-st { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 6px; font-style: normal; font-size: 11.5px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; transition: background .3s, color .3s; }
/* the app draws a custom status in its own color on a 25% tint (models/entities/violation-status.ts); these colors keep AA */
.ft-vi-st.is-cw { color: #92400e; background: #e4cfc3; border-color: #efe3db; }
.ft-vi-st.is-nv { color: #991b1b; background: #e5c6c6; border-color: #f0dddd; }
.ft-vi-st.is-fn { color: #5b21b6; background: #d6c7ed; border-color: #e7def5; }
.ft-vi-st.is-bh { color: #1e40af; background: #c7d0eb; border-color: #dde3f4; }
.ft-vi-hero .gbl-pa-page { padding-bottom: 60px; }
.ft-vi-card { position: relative; padding: 12px 14px; margin-bottom: 10px; }
.ft-vi-card .ft-card-h { margin-bottom: 8px; }
.ft-vi-card .ft-card-h strong { font-size: 14px; }
.ft-vi-card .ft-fld.is-sm { margin-bottom: 8px; }
.ft-vi-card > .ft-fld.is-sm:last-child { margin-bottom: 0; }
.ft-vi-units { justify-content: flex-start !important; }
.ft-vi-unit { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: 6px; background: var(--pb-50); color: var(--pb-700); font-style: normal; font-size: 12px; font-weight: 600; }
.ft-vi-unit .ft-ico { width: 12px; height: 12px; }
.ft-vi-lbl { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.ft-vi-lbl small, .ft-vi-k { font-size: 12px; font-weight: 600; color: var(--pa-text); }
.ft-vi-k { display: block; margin: 0 0 4px; }
.ft-vi-load { display: inline-flex; align-items: center; gap: 3px; } .ft-vi-load .ft-ico { width: 11px; height: 11px; }
.ft-vi-in { display: flex; align-items: center; height: 36px; padding: 0 12px; margin-bottom: 8px; border: 1px solid #c9d0db; border-radius: 8px; font-size: 13px; color: var(--pa-mute); }
.ft-vi-in.is-set { color: var(--pa-ink); font-weight: 600; }
.ft-vi-menu { top: 58px; left: 14px; right: auto; min-width: 230px; }
.ft-vi-menu span:first-child { background: none; } .ft-vi-menu span.is-pressed { background: #f3f6fb; }
.ft-vi-msg { position: relative; height: 58px; padding: 7px 12px; margin-bottom: 8px; border: 1px solid #c9d0db; border-radius: 8px; font-size: 12px; line-height: 1.45; overflow: hidden; }
.ft-vi-ph { color: var(--pa-mute); }
.ft-vi-note { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ft-vi-note .gbl-toggle { flex: none; }
.ft-vi-note > span { display: flex; flex-direction: column; min-width: 0; }
.ft-vi-note b { font-size: 12.5px; font-weight: 600; }
.ft-vi-note small { font-size: 11.5px; color: var(--pa-text); }
.ft-vi-drop { position: relative; display: flex; align-items: center; justify-content: center; height: 44px; margin-bottom: 10px; border: 1.5px dashed #b9c3d3; border-radius: 8px; font-size: 12px; color: var(--pa-text); }
.ft-vi-drop > span { display: inline-flex; align-items: center; gap: 6px; }
.ft-vi-drop b { color: var(--pa-blue); font-weight: 600; }
.ft-vi-drop .ft-ico { width: 16px; height: 16px; color: var(--pa-mute); }
.ft-vi-file { position: absolute; inset: 6px 8px; justify-content: flex-start; padding: 0 8px; border-radius: 6px; background: #f3f6fb; }
.ft-vi-file b { color: var(--pa-ink); } .ft-vi-file small { margin-left: auto; color: var(--pa-mute); font-size: 11.5px; }
.ft-vi-file .ft-ico { color: var(--pb-600); }
.ft-vi-foot { display: flex; justify-content: flex-end; gap: 8px; }
.ft-vi-tbl { padding: 12px 14px; }
.ft-vi-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 92px; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--pa-line); font-size: 12.5px; }
.ft-vi-row:last-child { border-bottom: 0; }
.ft-vi-row.is-head { padding: 4px 0 8px; font-size: 11.5px; font-weight: 600; color: var(--pa-mute); }
.ft-vi-row > span { min-width: 0; }
.ft-vi-row b, .ft-vi-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-vi-row b { font-weight: 600; } .ft-vi-row small { color: var(--pa-mute); font-size: 11.5px; }
.gbl-js [data-gbl-scene] .ft-vi-row.is-flash { animation: hx-flash-b 1.4s ease-out; }
.ft-vi-dlg { width: min(360px, calc(100% - 32px)); top: 70px; }
.ft-vi-cur { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.ft-vi-cur small { font-size: 12px; font-weight: 600; color: var(--pa-text); }
/* fine (detail page Actions → Create fine) */
.ft-vi-fine { position: relative; min-height: 398px; }
.ft-vi-info { display: grid; gap: 6px; margin: 0; font-size: 12.5px; }
.ft-vi-info div { display: grid; grid-template-columns: 118px 1fr; align-items: center; }
.ft-vi-info dt { color: var(--pa-text); } .ft-vi-info dd { margin: 0; font-weight: 600; }
.ft-vi-amenu { top: 52px; right: 20px; min-width: 160px; }
.ft-vi-amenu span:first-child { background: none; } .ft-vi-amenu span.is-pressed { background: #f3f6fb; }
.ft-vi-fdlg { position: absolute; inset: 0; z-index: 2; padding: 18px 20px; border-radius: inherit; background: #fff; }
.ft-vi-fine .ft-toast b { margin-right: 4px; }
/* mail (Mail Violation via USPS) */
.ft-vi-mail .ft-radios { margin-bottom: 8px; }
.ft-vi-mail .ft-radios li > span, .ft-vt-to li > span { display: flex; flex-direction: column; }
.ft-vi-mail .ft-radios li b, .ft-vt-to li b { font-weight: 600; } .ft-vi-mail .ft-radios li small, .ft-vt-to li small { font-size: 11.5px; color: var(--pa-text); font-weight: 400; }
.ft-vi-mail .ft-radios li.is-un { font-weight: 400; } .ft-vi-mail .ft-radios li.is-un i { border-color: #9aa4b4; } .ft-vi-mail .ft-radios li.is-un i::after { transform: scale(0); }
/* tracking is disabled until first class is picked */
.ft-vi-trk li:not(.is-on) { opacity: .55; transition: opacity .3s; } .ft-vi-trk.is-ready li { opacity: 1; }
.ft-vi-mail { position: relative; min-height: 386px; }
/* templates + preview */
.ft-vi-tlist li, .ft-vi-slist li { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--pa-line); font-size: 13px; }
.ft-vi-tlist li b { font-weight: 600; }
.ft-vi-tlist li > span, .ft-vi-slist li > span { display: inline-flex; gap: 10px; margin-left: auto; color: var(--pa-mute); }
.ft-vi-tlist .ft-ico, .ft-vi-slist .ft-ico { width: 15px; height: 15px; }
.ft-vi-prev { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: #f6f8fb; font-size: 12.5px; }
.ft-vi-prev p { margin: 4px 0; } .ft-vi-prev .ft-vi-k { margin-bottom: 6px; }
.ft-vi-lh { color: var(--pa-text); font-size: 11.5px; }
.ft-vi-by { font-weight: 600; }
.ft-vi-hint { margin: -4px 0 6px; font-size: 12px; color: var(--pa-text); }
.ft-vi-slist li { padding: 8px 2px; } .ft-vi-slist li > .ft-ico:first-child { color: var(--pa-mute); }
.gbl-js .ft-vis-replica .ft-vi-land, .gbl-js .ft-vis-replica .ft-vi-prev { transition: opacity .5s ease .5s, transform .5s var(--ease) .5s; }
.gbl-js .ft-vis-replica:not(.is-in) .ft-vi-land, .gbl-js .ft-vis-replica:not(.is-in) .ft-vi-prev { opacity: 0; transform: translateY(8px); }
/* the homeowner's view */
.ft-vi-own .ft-vi-info { margin-bottom: 12px; }
.ft-vi-ch { display: flex; align-items: baseline; gap: 6px; margin: 0 0 6px; font-size: 13px; }
.ft-vi-ch small { font-size: 11.5px; color: var(--pa-text); }
.ft-vi-cm { margin-bottom: 10px; }
.ft-vi-msgc { max-width: 86%; margin-bottom: 6px; padding: 8px 11px; border-radius: 10px; background: #f3f6fb; font-size: 12.5px; }
.ft-vi-msgc.is-own { margin-left: auto; background: var(--pb-50); }
.ft-vi-msgc b { font-weight: 600; } .ft-vi-msgc small { margin-left: 6px; color: var(--pa-mute); font-size: 11px; }
.ft-vi-msgc p { margin: 2px 0 0; }
.ft-vi-att { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 10px; border: 1px solid var(--pa-line); border-radius: 8px; font-size: 12.5px; }
.ft-vi-att .ft-ico { width: 16px; height: 16px; color: var(--pb-600); }
/* the dashboard */
.ft-vi-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.ft-vi-kpis span { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--pa-line); border-radius: 10px; }
.ft-vi-kpis b { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ft-vi-kpis small { font-size: 11.5px; color: var(--pa-text); line-height: 1.3; }
.ft-vi-donut { display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: center; }
.ft-vi-donut svg { width: 110px; height: 110px; transform: rotate(-90deg); }
.ft-vi-leg li { display: grid; grid-template-columns: 10px 1fr auto 26px; gap: 8px; align-items: center; padding: 4px 0; font-size: 12.5px; }
.ft-vi-leg i { width: 8px; height: 8px; border-radius: 50%; }
.ft-vi-leg span { color: var(--pa-text); } .ft-vi-leg b { text-align: right; font-weight: 600; }
@media (max-width: 560px) {
  .ft-vi-row { grid-template-columns: minmax(0, 1fr) auto 64px; }
  .ft-vi-donut { grid-template-columns: 84px 1fr; gap: 10px; } .ft-vi-donut svg { width: 84px; height: 84px; }
  .ft-vi-kpis b { font-size: 17px; }
  .ft-vi-menu { min-width: 0; right: 14px; }
}
/* Request Forms: Request details (the Gable page's .gbl-rq-* pieces, one column), approvals, the inbox, the form editor,
   comments + internal notes, vendor assignment, the homeowner's Submit a Request (ui v2-layout/requests, v2-layout/forms) */
.ft-rq-hero .gbl-pa-page { padding-bottom: 70px; }
.ft-rq-hero .gbl-rq-title { font-size: 17px; margin: 2px 0 10px; gap: 10px; }
.ft-rq-hero .gbl-pa-card { margin-bottom: 10px; }
.ft-rq-sum { position: relative; }
.ft-rq-hero .gbl-rq-headrow { padding: 10px 14px; }
.ft-rq-hero .gbl-rq-status { padding: 9px 14px; }
.ft-rq-hero .gbl-rq-ico .ft-ico, .ft-rq-ven .gbl-rq-ico .ft-ico { width: 19px; height: 19px; }
.ft-rq-hero .gbl-rq-status { position: relative; }
.ft-rq-menu { top: 40px; left: 64px; right: auto; min-width: 170px; }
.ft-rq-menu span:first-child { background: none; } .ft-rq-menu span.is-pressed { background: #f3f6fb; }
/* Manage request's Status select: it sits at the frame's foot, so its menu opens upward, over the field's label */
.ft-rq-mstat { position: relative; } .ft-rq-mstat .ft-rq-menu { top: auto; bottom: calc(100% - 18px); left: 0; right: auto; }
.ft-rq-ai { gap: 7px; padding: 12px 14px; }
.ft-rq-skel { display: flex; flex-direction: column; gap: 6px; } .ft-rq-skel i { height: 9px; border-radius: 5px; background: linear-gradient(90deg, #eceef3, #f6f7fa, #eceef3); background-size: 200% 100%; animation: ft-skel 1.2s linear infinite; } .ft-rq-skel i:nth-child(2) { width: 86%; } .ft-rq-skel i:nth-child(3) { width: 60%; }
@keyframes ft-skel { to { background-position: -200% 0; } }
.ft-rq-ok { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; font-weight: 600; color: #047857; }
.ft-rq-ok .ft-ico { width: 15px; height: 15px; }
/* mock text stays AA (axe checks it): the app's status pill blue (#2a6be6 on its tint, 4.25:1) and green button (#0f9b76
   under white, 3.5:1) are darkened */
.ft .gbl-rq-badge { color: var(--pb-600); } .ft .gbl-pa-btn.is-green { background: #047857; border-color: #047857; }
.ft-rq-say { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--pa-ink); } .ft-rq-ai li { padding-left: 0; } .ft-rq-ai li::before { display: none; }
.ft-rq-board { padding: 12px 14px; }
.ft-rq-bh { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ft-rq-bh span { display: flex; flex-direction: column; } .ft-rq-bh strong { font-size: 14px; font-weight: 600; } .ft-rq-bh small { font-size: 12px; color: var(--pa-text); }
.ft-rq-bh > b { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ft-rq-bar { display: block; height: 6px; margin: 8px 0 6px; border-radius: 3px; background: #e6eaf1; overflow: hidden; }
.ft-rq-bar i { display: block; height: 100%; width: 33.3%; border-radius: 3px; background: var(--pa-blue); transition: width .6s var(--ease); }
.ft-rq-bar i.is-2 { width: 66.6%; } .ft-rq-bar i.is-3 { width: 100%; background: #0d9472; }
.ft-rq-apv li { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--pa-line); font-size: 12.5px; }
.ft-rq-apv li > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.ft-rq-apv b { font-weight: 600; } .ft-rq-apv small { font-size: 11.5px; color: var(--pa-text); }
.ft-rq-av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--pb-50); color: var(--pb-700); font-size: 10.5px; font-weight: 600; }
.ft-rq-dec { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; }
.ft-rq-dec small { font-size: 12px; font-weight: 600; color: var(--pa-text); }
.ft-rq-manage { padding: 12px 14px; }
.ft-rq-mh { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
/* the green button at its own width (not stretched to the Actions button), wide enough for "Mark Completed" so the swap to
   "Re-open" doesn't move the Actions button */
.ft-rq-mfoot { display: flex; gap: 8px; } .ft-rq-done { flex: none; min-width: 136px; justify-content: center; } .ft-rq-done i { font-style: normal; }
.ft-float-rq { right: 18px; bottom: 26px; max-width: 290px; }
.ft-float-rq .gbl-float-ico { background: var(--pb-50); color: var(--pb-700); } .ft-float-rq .gbl-float-ico .ft-ico { width: 18px; height: 18px; }
/* homeowner: Submit a Request */
.ft-rq-sub { position: relative; min-height: 360px; padding-bottom: 58px; }
.ft-rq-fn { display: flex; flex-direction: column; margin: -4px 0 12px; } .ft-rq-fn b { font-size: 13.5px; font-weight: 600; } .ft-rq-fn small { font-size: 12px; color: var(--pa-text); }
.ft-rq-sub .ft-fld.is-blur > span { border-color: #c9d0db; box-shadow: none; }
.ft-fld.ft-rq-ta > span { white-space: normal; height: 64px !important; align-items: flex-start !important; padding-top: 8px !important; line-height: 1.45; font-size: 12.5px !important; }
.ft-rq-file { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 12px; }
.ft-rq-file small { width: 100%; font-size: 12px; font-weight: 600; color: var(--pa-text); }
.ft-rq-file .ft-link { display: inline-flex; align-items: center; gap: 4px; } .ft-rq-file .ft-ico { width: 15px; height: 15px; }
.ft-rq-fl { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; } .ft-rq-fl .ft-ico { color: #b42318; }
.ft-rq-sub .ft-toast b, .ft-vi-fine .ft-toast b { margin-right: 4px; }
/* inbox */
.ft-rq-inb { min-height: 330px; }
.ft-rq-fp { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 999px; background: #f3f6fb; font-size: 12px; font-weight: 600; }
.ft-rq-fp .ft-ico { width: 14px; height: 14px; } .ft-rq-fp .ft-ico:last-child { width: 11px; height: 11px; }
.ft-tabs span.is-on.is-un { color: var(--pa-mute); box-shadow: none; }
.ft-rq-r { display: grid; grid-template-columns: minmax(0, 1fr) auto 56px; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--pa-line); font-size: 12.5px; max-height: 60px; overflow: hidden; transition: max-height .4s var(--ease), padding .4s var(--ease), opacity .3s, border-color .3s; }
.ft-rq-r.is-head { padding: 2px 0 6px; font-size: 11.5px; font-weight: 600; color: var(--pa-mute); }
.ft-rq-r.is-gone { max-height: 0; padding: 0; opacity: 0; border-color: transparent; }
.ft-rq-r > span { min-width: 0; } .ft-rq-r b, .ft-rq-r small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-rq-r b { font-weight: 600; } .ft-rq-r small { font-size: 11.5px; color: var(--pa-mute); }
.ft-rq-r small em { font-style: normal; padding: 0 6px; border-radius: 999px; background: var(--pb-50); color: var(--pb-700); font-weight: 600; }
.ft-rq-r small em.is-red { background: #fdecea; color: #b42318; }
.ft-rq-inb .ft-rq-r { max-height: 80px; } .ft-rq-inb .ft-rq-r.is-gone { max-height: 0; } .ft-rq-inb .ft-rq-r small em { display: flex; align-items: center; gap: 4px; width: fit-content; margin-top: 3px; } .ft-rq-inb .ft-rq-r small em .ft-ico { width: 12px; height: 12px; flex: none; }
/* the org's own statuses: text in the color on a 10% tint (app-status-chip); AA-darkened */
.ft-rq-st { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-style: normal; font-size: 11.5px; font-weight: 600; white-space: nowrap; background: #f5f5f5; color: #424242; }
.ft-rq-st.is-rev { background: #eaf0fc; color: #1d4ed8; } .ft-rq-st.is-done { background: #e7f4f0; color: #0a725a; } .ft-rq-st.is-info { background: #fbefe6; color: #9a4b00; }
/* form editor */
.ft-tabs.is-inline { margin: 0; border: 0; gap: 12px; }
.ft-rq-qs { margin-bottom: 12px; border: 1px solid var(--pa-line); border-radius: 10px; }
.ft-rq-qs li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--pa-line); }
.ft-rq-qs li:last-child { border-bottom: 0; }
.ft-rq-qs li.is-open { padding-left: 24px; background: #f8fafc; }
.ft-rq-qs li > span { display: flex; flex-direction: column; min-width: 0; }
.ft-rq-qs small { font-size: 11px; font-weight: 600; color: var(--pa-mute); } .ft-rq-qs b { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-rq-req { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-style: normal; font-size: 11.5px; color: var(--pa-text); white-space: nowrap; }
.ft-rq-req i { width: 14px; height: 14px; border-radius: 3px; border: 1.5px solid #9aa4b4; position: relative; }
.ft-rq-req.is-on i, .ft-vis-replica.is-in .ft-rq-tick i { background: var(--pa-blue); border-color: var(--pa-blue); }
.ft-rq-req.is-on i::after, .ft-vis-replica.is-in .ft-rq-tick i::after { content: ""; position: absolute; left: 3px; top: 0; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ft-rq-tick i { transition: background .3s .6s, border-color .3s .6s; }
.gbl:not(.gbl-js) .ft-rq-tick i { background: var(--pa-blue); border-color: var(--pa-blue); }
/* approvals */
.ft-rq-t { margin-bottom: 12px; font-size: 12.5px; }
.ft-rq-t p { display: grid; grid-template-columns: 1fr 70px; gap: 10px; align-items: center; margin: 0; padding: 8px 0; border-bottom: 1px solid var(--pa-line); }
.ft-rq-t p.is-head { padding-top: 0; font-size: 11.5px; font-weight: 600; color: var(--pa-mute); }
.ft-rq-t p span:last-child { text-align: right; } .ft-rq-t b, .ft-rq-t small { display: block; } .ft-rq-t b { font-weight: 600; } .ft-rq-t small { color: var(--pa-mute); font-size: 11.5px; }
.ft-rq-notify li > span { display: flex; flex-direction: column; } .ft-rq-notify li small { font-size: 11.5px; color: var(--pa-text); font-weight: 400; }
.ft-rq-notify li b { font-weight: 600; }
.ft-rq-pick i { border-color: var(--pa-blue); } .ft-rq-pick i::after { transform: none; }
.gbl-js .ft-rq-pick i::after { transition: transform .3s var(--ease) .6s; }
.gbl-js .ft-vis-replica:not(.is-in) .ft-rq-pick i { border-color: #9aa4b4; } .gbl-js .ft-vis-replica:not(.is-in) .ft-rq-pick i::after { transform: scale(0); }
.ft-rq-was i::after { transform: scale(0); }
/* comments + internal notes */
.ft-rq-comp { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 12px; padding: 10px 12px; border: 1px solid #c9d0db; border-radius: 10px; font-size: 12.5px; color: var(--pa-mute); }
.ft-rq-cf { display: flex; align-items: center; gap: 8px; color: var(--pa-text); font-size: 12px; } .ft-rq-cf b { margin-left: auto; }
.ft-rq-notes { padding: 10px 12px; border-radius: 10px; background: #fbf8ef; }
.ft-rq-note { margin: 0 0 6px; font-size: 12.5px; } .ft-rq-note b { font-weight: 600; margin-right: 4px; }
/* vendor */
.ft-rq-ven .gbl-rq-headrow { padding: 0 0 12px; margin-bottom: 12px; }
.ft-rq-ven .ft-fld i { font-style: normal; }
.ft-rq-vc { display: flex; flex-direction: column; margin: -2px 0 12px; padding: 9px 12px; border-radius: 10px; background: #f3f6fb; font-size: 12.5px; }
.ft-rq-vc b { font-weight: 600; } .ft-rq-vc small { color: var(--pa-text); font-size: 11.5px; }
.ft-rq-act small { font-size: 12px; font-weight: 600; color: var(--pa-text); }
.ft-rq-act p { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 0; font-size: 12.5px; } .ft-rq-act b { font-weight: 600; } .ft-rq-act span { width: 100%; font-size: 11.5px; color: var(--pa-mute); }
@media (max-width: 560px) {
  .ft-rq-r { grid-template-columns: minmax(0, 1fr) auto; } .ft-rq-r > span:nth-child(3) { display: none; }
}
/* Alignment (Dima, 2026-09-27: "align the radio buttons, checkboxes, icons, and text properly"): a small control or icon next
   to a label that runs to two lines (title + helper, or wrapped text) sits on the FIRST line, not between the lines.
   Single-line rows look the same as before. Avatars and 28px+ icon tiles stay centered on their block. */
.ft-radios li { align-items: flex-start; line-height: 18px; }
.ft-radios li > i { margin-top: 1px; }
.ft-checks li { align-items: flex-start; line-height: 18px; } .ft-checks li > i { margin-top: 1px; }
.ft-am-sum li { align-items: flex-start; line-height: 18px; } .ft-am-sum li .ft-ico { margin-top: 1.5px; flex: none; }
.ft-am-sent { align-items: flex-start; } .ft-am-sent > .ft-ico { flex: none; margin-top: 0; }
.ft-xfr-note { align-items: flex-start; line-height: 18px; } .ft-xfr-note .ft-ico { flex: none; margin-top: 1px; }
.ft-vi-note { align-items: flex-start; } .ft-vi-note .gbl-toggle { margin-top: -1px; }
.ft .gbl-faq-q { align-items: flex-start; } .ft .gbl-faq-q i { margin-top: -1.5px; }
@media (max-width: 768px) { .ft .gbl-faq-q i { margin-top: -3px; } }
.ft-toast { align-items: flex-start; line-height: 18px; } .ft-toast .ft-ico { flex: none; margin-top: 1px; }
.ft-wab-opt { align-items: flex-start; line-height: 20px; }
/* a select's value stays on one line (at phone widths it wrapped under its caret) */
.ft-fld > span { white-space: nowrap; overflow: hidden; }
.ft-fld > span .ft-ico { flex: none; }
/* Document Storage: the Documents card (tree + drawer), Upload Documents, move, Save to Documents, share to units, the
   homeowner's tab, Ask Gable (ui app-layout/communications/documents) */
.ft-dc-hero .gbl-pa-page { position: relative; }
.ft-dc-card { padding: 14px 16px; }
.ft-dc-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ft-dc-h strong { font-size: 18px; font-weight: 600; }
.ft-dc-search { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; margin-bottom: 8px; border: 1px solid #c9d0db; border-radius: 8px; font-size: 12.5px; color: var(--pa-mute); }
.ft-dc-search .ft-ico, .ft-dc-filt .ft-ico { width: 14px; height: 14px; flex: none; }
.ft-dc-tree li { display: flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 8px; border-radius: 6px; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .25s; }
.ft-dc-tree li > .ft-ico { width: 16px; height: 16px; flex: none; color: #8a94a6; }
.ft-dc-tree li > .ft-ico + * { min-width: 0; }
.ft-dc-tree li .ft-ico[class] { color: #8a94a6; }
.ft-dc-tree li > svg:not(.ft-dc-x) { flex: none; }
.ft-dc-x { display: inline-grid; place-items: center; width: 14px; height: 14px; flex: none; font-style: normal; transition: transform .25s; }
.ft-dc-x .ft-ico { width: 11px; height: 11px; color: var(--pa-mute); } .ft-dc-x.is-open { transform: rotate(90deg); }
.ft-dc-kid { padding-left: 29px !important; } .ft-dc-kid2 { padding-left: 50px !important; }
.ft-dc-tree li.is-sel { background: var(--pb-50); color: var(--pb-700); font-weight: 600; }
.ft-dc-tree li.is-sel.is-was { background: none; color: inherit; font-weight: 400; }
.ft-dc-tree .ft-ico[viewBox] { flex: none; }
.gbl-js [data-gbl-scene] .ft-dc-new.is-on:not(.is-sel) { animation: hx-flash-b 1.4s ease-out; }
.ft-dc-drawer { position: absolute; z-index: 5; top: 58px; right: 0; bottom: 0; width: min(250px, 78%); padding: 16px; background: #fff; border-left: 1px solid var(--pa-line); box-shadow: -18px 0 36px -20px rgba(14, 18, 27, .35); font-size: 12.5px; }
.ft-dc-dn { display: block; font-size: 14px; font-weight: 600; word-break: break-word; }
.ft-dc-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 12px; color: var(--pa-text); font-size: 12px; }
.ft-dc-dl div { display: grid; grid-template-columns: 86px 1fr; align-items: center; min-height: 30px; border-bottom: 1px solid var(--pa-line); }
.ft-dc-dl dt { color: var(--pa-text); font-size: 12px; } .ft-dc-dl dd { margin: 0; font-weight: 600; font-size: 12.5px; }
.ft-dc-df { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.ft-dc-chk { display: inline-flex; } .ft-dc-chk i { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid #9aa4b4; position: relative; transition: background .2s, border-color .2s; }
.ft-dc-chk.is-on i { background: var(--pa-blue); border-color: var(--pa-blue); }
.ft-dc-chk.is-on i::after { content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ft-dc-dlg { top: 64px; width: min(390px, calc(100% - 32px)); }
.ft-dc-to { margin: -4px 0 10px; font-size: 12.5px; color: var(--pa-text); } .ft-dc-to b { color: var(--pa-ink); }
.ft-dc-zone { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px; margin-bottom: 10px; border: 1.5px dashed #b9c3d3; border-radius: 10px; font-size: 12.5px; color: var(--pa-text); transition: border-color .2s, background .2s; }
.ft-dc-zone > .ft-ico { width: 26px; height: 26px; color: var(--pa-mute); }
.ft-dc-zone.is-drop { border-color: var(--pa-blue); background: var(--pb-50); } .ft-dc-zone.is-done { border-color: #b9c3d3; background: none; }
.ft-dc-q { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; padding: 7px 10px; border-radius: 8px; background: #f6f8fb; font-size: 12.5px; }
.ft-dc-q .ft-ico { width: 15px; height: 15px; flex: none; } .ft-dc-q .ft-ico:first-child { color: #b42318; } .ft-dc-q .ft-ico:last-child { margin-left: 8px; color: #b42318; }
.ft-dc-q b { font-weight: 600; } .ft-dc-q small { margin-left: auto; color: var(--pa-mute); font-size: 11.5px; }
.ft-dc-cnt { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 8px; font-size: 12px; font-weight: 600; } .ft-dc-cnt small { font-weight: 400; color: var(--pa-text); }
.ft-dc-prog { display: block; height: 5px; margin-bottom: 8px; border-radius: 3px; background: #e6eaf1; overflow: hidden; }
.ft-dc-prog i { display: block; height: 100%; width: 0; background: var(--pa-blue); }
.gbl-js [data-gbl-scene] .ft-dc-prog.is-on i { animation: ft-meter-w .9s var(--ease) both; } .ft-dc-prog.is-on i { width: 100%; }
@keyframes ft-meter-w { from { width: 0; } to { width: 100%; } }
.ft-dc-bt { font-style: normal; }
/* move mini */
.ft-dc-mv { min-height: 300px; }
.ft-dc-tree li.is-grab { background: #fff; box-shadow: 0 8px 20px -8px rgba(14, 18, 27, .35), 0 0 0 1px var(--pa-line); transform: translate(10px, 18px); transition: transform .9s var(--ease), box-shadow .2s; }
.ft-dc-tree li.is-target { background: var(--pb-50); box-shadow: inset 0 0 0 1.5px var(--pa-blue); }
.ft-dc-tree li.is-target.is-was { background: none; box-shadow: none; }
.ft-dc-strip { margin-top: 8px; padding: 4px 10px; border-radius: 8px; background: #f6f8fb; }
.ft-dc-strip div:last-child { border-bottom: 0; }
/* save to documents */
.ft-dc-sv { position: relative; min-height: 340px; }
.ft-dc-run { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border: 1px solid var(--pa-line); border-radius: 10px; }
.ft-dc-run > span:first-child { display: flex; align-items: center; gap: 8px; font-size: 12.5px; } .ft-dc-run b { font-weight: 600; } .ft-dc-run small { color: var(--pa-mute); }
.ft-dc-run .ft-ico { width: 16px; height: 16px; color: #b42318; }
.ft-dc-smenu { top: 92px; right: 20px; min-width: 180px; } .ft-dc-smenu span:first-child { background: none; } .ft-dc-smenu span.is-pressed { background: #f3f6fb; }
.ft-dc-sdlg { position: absolute; inset: 0; z-index: 2; padding: 18px 20px; border-radius: inherit; background: #fff; }
/* share to units */
.ft-dc-filt { display: flex; gap: 8px; margin-bottom: 8px; font-size: 12px; }
.ft-dc-filt > span { display: flex; align-items: center; gap: 6px; flex: 1; height: 32px; padding: 0 10px; border: 1px solid #c9d0db; border-radius: 8px; color: var(--pa-mute); }
.ft-dc-filt em { display: inline-flex; align-items: center; gap: 5px; padding: 0 10px; border-radius: 8px; background: var(--pb-50); color: var(--pb-700); font-style: normal; font-weight: 600; white-space: nowrap; }
.ft-dc-units p { display: grid; grid-template-columns: 22px 60px 1fr 96px; gap: 8px; align-items: center; margin: 0; padding: 7px 0; border-bottom: 1px solid var(--pa-line); font-size: 12.5px; }
.ft-dc-units p.is-head { padding-top: 0; font-size: 11.5px; font-weight: 600; color: var(--pa-mute); }
.ft-dc-units i { width: 15px; height: 15px; border-radius: 3px; border: 1.5px solid #9aa4b4; position: relative; }
.ft-dc-units p.is-head i { display: none; }
.ft-dc-pick i { transition: background .25s .5s, border-color .25s .5s; }
.ft-vis-replica.is-in .ft-dc-pick i, .gbl:not(.gbl-js) .ft-dc-pick i { background: var(--pa-blue); border-color: var(--pa-blue); }
.ft-vis-replica.is-in .ft-dc-pick i::after, .gbl:not(.gbl-js) .ft-dc-pick i::after { content: ""; position: absolute; left: 4px; top: 0; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* homeowner tab */
.ft-dc-owng { display: grid; grid-template-columns: 1fr 190px; gap: 12px; align-items: start; }
.ft-dc-mini { padding: 12px; border: 1px solid var(--pa-line); border-radius: 10px; font-size: 12.5px; }
.ft-dc-mini > b { display: block; font-weight: 600; } .ft-dc-mini > small { display: block; margin-bottom: 6px; color: var(--pa-text); font-size: 11.5px; }
.ft-dc-mini .ft-dc-dl div { grid-template-columns: 70px 1fr; } .ft-dc-mini .ft-btns { margin-top: 10px; flex-wrap: wrap; }
/* ask gable */
.ft-dc-band { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.ft-dc-spark { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: #f1effd; color: #4b3cc4; } .ft-dc-spark .ft-ico { width: 16px; height: 16px; }
.ft-dc-band > span:last-child { display: flex; flex-direction: column; } .ft-dc-band b { font-size: 14px; font-weight: 600; } .ft-dc-band small { font-size: 12px; color: var(--pa-text); }
.ft-dc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ft-dc-chips span { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--pa-line); font-size: 12px; font-weight: 600; color: var(--pa-ink); }
.ft-dc-chips span.is-on { border-color: #c9c2f5; background: #f5f3ff; color: #4b3cc4; }
.ft-dc-ans { padding: 12px 14px; border-radius: 10px; background: #f6f8fb; font-size: 12.5px; line-height: 1.5; } .ft-dc-ans p { margin: 0 0 8px; }
.ft-dc-src { display: flex; align-items: center; gap: 6px; margin: 0 !important; font-weight: 600; color: var(--pa-blue); } .ft-dc-src .ft-ico { width: 15px; height: 15px; }
@media (max-width: 560px) {
  .ft-dc-owng { grid-template-columns: 1fr; }
  .ft-dc-units p { grid-template-columns: 22px 64px 1fr; }
  .ft-dc-h strong { font-size: 16px; }
}
.ft-dc-hero .ft-toast { z-index: 8; }
/* Voting & Surveys: Review ballot → Vote details, voting settings, the homeowner's ballot, question builder, weighted
   categories, paper mail, survey results (ui v2-layout/voting, app-layout/communications/survey*) */
.ft-vt-hero .gbl-pa-page { padding-bottom: 60px; }
.ft-vt-steps { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: -6px 0 12px; counter-reset: vs; }
.ft-vt-steps li { counter-increment: vs; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--pa-mute); }
.ft-vt-steps li::before { content: counter(vs); width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: #eef1f6; color: var(--pa-text); font-size: 10.5px; }
.ft-vt-steps li.is-done::before { content: "✓"; background: var(--pb-50); color: var(--pb-700); }
.ft-vt-steps li.is-on { color: var(--pb-600); } .ft-vt-steps li.is-on::before { background: var(--pa-blue); color: #fff; }
.ft-vt-rc { padding: 10px 14px; margin-bottom: 8px; }
.ft-vt-rh { display: flex; justify-content: space-between; margin: 0 0 4px; font-size: 13px; } .ft-vt-rh b { font-weight: 600; }
.ft-vt-rc dl { margin: 0; } .ft-vt-rc dl div { display: grid; grid-template-columns: 120px 1fr; gap: 8px; padding: 3px 0; font-size: 12.5px; }
.ft-vt-rc dt { color: var(--pa-text); } .ft-vt-rc dd { margin: 0; font-weight: 600; }
.ft-vt-send { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.ft-vt-info { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; margin-bottom: 10px; font-size: 12.5px; }
.ft-vt-info b { font-size: 14px; font-weight: 600; } .ft-vt-info small { color: var(--pa-text); font-size: 12px; }
.ft-vt-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.ft-vt-kpis span { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; border-radius: 10px; background: #fff; border: 1px solid var(--pa-line); }
.ft-vt-kpis small { font-size: 11px; color: var(--pa-text); line-height: 1.3; }
.ft-vt-kpis b { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ft-vt-q.is-met b { color: #047857; }
.ft-vt-qc { padding: 12px 14px; }
.ft-vt-qh { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.ft-vt-qh em { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--pb-50); color: var(--pb-700); font-style: normal; font-size: 11.5px; font-weight: 600; }
.ft-vt-qh > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; flex: 1; } .ft-vt-qh b { font-size: 13px; font-weight: 600; } .ft-vt-qh small { font-size: 11.5px; color: var(--pa-text); }
.ft-vt-top { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; font-size: 12.5px; } .ft-vt-top small { color: var(--pa-text); } .ft-vt-top b { font-weight: 600; } .ft-vt-top span { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--pa-text); }
.ft-vt-bar { display: block; height: 7px; border-radius: 4px; background: #e6eaf1; overflow: hidden; }
.ft-vt-bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--pa-blue); transition: width .7s var(--ease); }
.ft-vt-bar i.is-1 { width: 75%; } .ft-vt-bar i.is-2 { width: 70%; } .ft-vt-bar i.is-3 { width: 71%; }
/* settings mini */
.ft-vt-set { position: relative; }
.ft-vt-sub { margin: -8px 0 12px; font-size: 12px; color: var(--pa-text); }
.ft-vt-thr { position: relative; margin: -2px 0 8px 44px; }
.ft-vt-thr .ft-fld i { font-style: normal; }
.ft-vt-menu { top: 62px; left: 0; right: auto; min-width: 220px; } .ft-vt-menu span:first-child { background: none; } .ft-vt-menu span.is-pressed { background: #f3f6fb; }
/* casting page */
.ft-vt-cast { position: relative; min-height: 360px; }
.ft-vt-ch { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .ft-vt-ch .gbl-pa-logo { width: 72px; height: auto; } .ft-vt-ch .ft-ico { width: 16px; height: 16px; color: var(--pa-mute); }
.ft-vt-qq { padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--pa-line); border-radius: 10px; }
.ft-vt-qq > small { display: block; font-size: 11.5px; font-weight: 600; color: var(--pa-mute); } .ft-vt-qq > b { display: block; margin: 2px 0 6px; font-size: 13px; font-weight: 600; }
.ft-vt-qq > em { display: block; margin: -4px 0 6px; font-style: normal; font-size: 11.5px; color: var(--pa-text); }
.ft-vt-qq .ft-radios, .ft-vt-qq .ft-checks { margin: 0; }
.ft-vt-sb { width: 100%; justify-content: center; } .ft-vt-sb i { font-style: normal; }
.ft-vt-done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 40px 10px 10px; }
.ft-vt-done b { font-size: 16px; font-weight: 600; } .ft-vt-done small { font-size: 12.5px; color: var(--pa-text); max-width: 280px; }
/* builder */
.ft-vt-req { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--pa-text); }
.ft-vt-choices li { display: flex; align-items: center; height: 34px; padding: 0 12px; margin-bottom: 6px; border: 1px solid #c9d0db; border-radius: 8px; font-size: 12.5px; }
.ft-vt-add { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 12px; } .ft-vt-add .ft-ico { width: 13px; height: 13px; }
.ft-vt-types { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; border-top: 1px solid var(--pa-line); }
.ft-vt-types small { width: 100%; font-size: 11.5px; font-weight: 600; color: var(--pa-mute); }
.ft-vt-types span { padding: 4px 9px; border-radius: 999px; background: #f3f6fb; font-size: 11.5px; font-weight: 600; color: var(--pa-text); }
.ft-vt-types span.is-on { background: var(--pb-50); color: var(--pb-700); box-shadow: inset 0 0 0 1px var(--pb-100); }
/* weighted + survey result bars */
.ft-vt-wtt p { grid-template-columns: 1fr 86px 50px; } .ft-vt-wtt p span:nth-child(2) { text-align: right; }
.ft-vt-res li, .ft-vt-sres li { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 6px 0; font-size: 12.5px; }
.ft-vt-res b { font-weight: 600; font-variant-numeric: tabular-nums; } .ft-vt-sres small { color: var(--pa-text); font-size: 12px; }
.ft-vt-res i, .ft-vt-sres i { grid-column: 1 / -1; display: block; height: 6px; border-radius: 3px; background: #e6eaf1; overflow: hidden; }
.ft-vt-res em, .ft-vt-sres em { display: block; height: 100%; width: var(--w); border-radius: 3px; background: var(--pa-blue); transition: width .8s var(--ease) .4s; }
.ft-vt-sres em { background: #0d9472; }
.gbl-js .ft-vis-replica:not(.is-in) .ft-vt-res em, .gbl-js .ft-vis-replica:not(.is-in) .ft-vt-sres em { width: 0; }
/* paper */
.ft-vt-to li { margin-bottom: 6px; padding: 8px 10px; border: 1px solid var(--pa-line); } .ft-vt-to li.is-on { border-color: var(--pa-blue); background: var(--pb-50); }
.ft-vt-letter { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 12px; padding: 12px; border: 1px solid var(--pa-line); border-radius: 10px; background: #fcfcfd; font-size: 12px; line-height: 1.45; color: var(--pa-text); }
.ft-vt-letter p { margin: 0; } .ft-vt-letter b { display: block; margin-bottom: 2px; font-size: 12.5px; color: var(--pa-ink); font-weight: 600; }
.ft-vt-qr { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 8px; background: #fff; border: 1px solid var(--pa-line); } .ft-vt-qr .ft-ico { width: 40px; height: 40px; color: var(--pa-ink); }
/* survey */
.ft-vt-sq { margin: 0 0 4px; font-size: 13px; font-weight: 600; }
.ft-vt-sres { margin-bottom: 12px; }
.ft-vt-ess { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .ft-vt-ess p { margin: 0; padding: 8px 10px; border-radius: 8px; background: #f6f8fb; font-size: 12px; } .ft-vt-ess b { display: block; font-size: 11px; color: var(--pa-mute); font-weight: 600; }
@media (max-width: 560px) {
  .ft-vt-kpis { grid-template-columns: repeat(2, 1fr); } .ft-vt-kpis span:nth-child(3) { display: none; }
  .ft-vt-rc dl div { grid-template-columns: 104px 1fr; }
  .ft-vt-ess { grid-template-columns: 1fr; }
  .ft-vt-thr { margin-left: 0; }
}
/* Owner Portals: the phone (frame look from the homepage switching step's .hx-phone), autopay, account history, multi-unit
   checkout, the homeowner nav, change of ownership, permissions (ui app-layout/units, payments, shared/autopay) */
.ft-op-hero { display: flex; justify-content: center; align-items: flex-start; height: 596px; overflow: hidden; }
.ft-op-phone { position: relative; display: flex; flex-direction: column; width: 320px; height: calc(100% + 8px); flex: none; padding: 30px 0 0; border-radius: 40px 40px 0 0; background: #fff; border: 8px solid #1f2733; border-bottom: 0; box-shadow: 0 40px 80px -30px rgba(24, 50, 140, .45); overflow: hidden; color: var(--pa-ink); font-size: 12.5px; text-align: left; }
.ft-op-notch { position: absolute; top: 8px; left: 50%; width: 86px; height: 18px; margin-left: -43px; border-radius: 10px; background: #1f2733; }
.ft-op-top { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--pa-line); }
.ft-op-top .gbl-pa-logo { width: 64px; height: auto; margin-right: auto; }
.ft-op-pay .ft-ico { width: 15px; height: 15px; }
.ft-op-burger { display: flex; flex-direction: column; gap: 3px; } .ft-op-burger i { width: 16px; height: 2px; border-radius: 1px; background: var(--pa-ink); }
.ft-op-org { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; background: #f6f8fb; font-size: 12px; font-weight: 600; } .ft-op-org .ft-ico { width: 11px; height: 11px; }
.ft-op-scr { position: relative; flex: 1; min-height: 0; overflow: hidden; padding: 12px 14px; }
.ft-op-v { position: absolute; inset: 12px 14px auto; }
.ft-op-h { display: block; margin: 0 0 6px; font-size: 18px; font-weight: 600; }
.ft-op-addr { display: flex; align-items: flex-start; gap: 5px; margin-bottom: 12px; color: var(--pa-text); font-size: 12px; line-height: 16px; } .ft-op-addr .ft-ico { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.ft-op-bal { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 12px; background: var(--pb-50); }
.ft-op-bal > small { font-size: 12px; color: var(--pa-text); } .ft-op-bal > b { margin-top: -6px; font-size: 26px; font-weight: 600; }
.ft-op-big { justify-content: center; height: 42px; font-size: 13.5px; }
.ft-op-bal .gbl-pa-btn .ft-ico { width: 14px; height: 14px; } .ft-op-bal .gbl-pa-btn:not(.ft-op-big) { justify-content: center; }
.ft-op-inv { margin-top: 12px; } .ft-op-inv > small { font-size: 12px; font-weight: 600; color: var(--pa-text); }
.ft-op-inv p { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 0; padding: 10px 12px; border: 1px solid var(--pa-line); border-radius: 10px; }
.ft-op-inv p span { display: flex; flex-direction: column; } .ft-op-inv small { font-size: 11.5px; color: var(--pa-mute); } .ft-op-inv b { font-weight: 600; }
.ft-op-ch { display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: flex-start; padding: 12px; margin-bottom: 10px; border: 1px solid var(--pa-line); border-radius: 12px; }
.ft-op-ch > span { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; } .ft-op-ch b { font-weight: 600; } .ft-op-ch small { font-size: 11.5px; color: var(--pa-text); }
.ft-op-ch > b { display: flex; flex-direction: column; align-items: flex-end; } .ft-op-ch > b small { font-weight: 400; }
.ft-op-cb { width: 16px; height: 16px; margin-top: 2px; border-radius: 4px; background: var(--pa-blue); position: relative; font-style: normal; }
.ft-op-cb::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ft-op-card { padding: 12px; margin-bottom: 10px; border: 1px solid var(--pa-line); border-radius: 12px; }
.ft-op-card > small { display: block; margin-bottom: 8px; font-size: 12.5px; font-weight: 600; }
.ft-op-card .ft-fld { margin-bottom: 0; }
.ft-op-tot { display: flex; justify-content: space-between; margin: 0 0 10px; font-size: 13px; } .ft-op-tot b { font-size: 16px; font-weight: 600; }
.ft-op-card .ft-op-big { width: 100%; }
.ft-op-rc { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ft-op-rc .ft-op-h { align-self: flex-start; } .ft-op-rc > p { margin: 8px 0 12px; color: var(--pa-text); } .ft-op-rc > p b { display: block; margin-bottom: 4px; color: var(--pa-ink); font-size: 14px; font-weight: 600; }
.ft-op-dl { width: 100%; text-align: left; } .ft-op-dl div { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--pa-line); } .ft-op-dl dt { color: var(--pa-text); } .ft-op-dl dd { margin: 0; font-weight: 600; }
.ft-op-drw { margin-top: 10px; padding: 12px; border: 1px solid var(--pa-line); border-radius: 12px; box-shadow: 0 16px 32px -20px rgba(14, 18, 27, .4); }
.ft-op-drw > b { display: block; font-weight: 600; } .ft-op-drw > small { display: block; margin-bottom: 6px; color: var(--pa-text); font-size: 11.5px; } .ft-op-drw .ft-btns { margin-top: 10px; }
/* autopay mini */
.ft-op-ap { position: relative; min-height: 330px; }
.ft-op-terms { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: #f6f8fb; font-size: 12.5px; line-height: 1.5; }
.ft-op-ap .ft-fld i { font-style: normal; }
/* account history + multi-unit rows */
.ft-op-rows p { display: grid; grid-template-columns: minmax(0, 1fr) 64px 64px 64px; gap: 8px; align-items: center; margin: 0; padding: 8px 0; border-bottom: 1px solid var(--pa-line); font-size: 12px; }
.ft-op-rows p.is-head { padding-top: 0; font-size: 11px; font-weight: 600; color: var(--pa-mute); }
.ft-op-rows p > span:nth-child(n+2) { text-align: right; font-variant-numeric: tabular-nums; }
.ft-op-rows b { display: block; font-weight: 600; } .ft-op-rows small { display: block; font-size: 11px; color: var(--pa-mute); }
.ft-op-mrows p { grid-template-columns: 18px minmax(0, 1fr) 56px 90px; }
.ft-op-mrows p > span:nth-child(2), .ft-op-mrows p > span:nth-child(3) { text-align: left; }
.ft-op-mu .ft-op-tot { margin-top: 10px; } .ft-op-mu .ft-op-big { width: 100%; }
.ft-op-tick { transition: background .25s .5s; }
.gbl-js .ft-vis-replica:not(.is-in) .ft-op-cb.ft-op-tick { background: #fff; box-shadow: inset 0 0 0 1.5px #9aa4b4; } .gbl-js .ft-vis-replica:not(.is-in) .ft-op-cb.ft-op-tick::after { opacity: 0; }
/* homeowner nav */
.ft-op-navg { display: grid; grid-template-columns: 150px 1fr; gap: 14px; }
.ft-op-side li { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; font-size: 12px; color: var(--pa-text); } .ft-op-side .ft-ico { width: 15px; height: 15px; flex: none; }
.ft-op-side li.is-on { background: var(--pb-50); color: var(--pb-600); font-weight: 600; }
.ft-op-mh { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; } .ft-op-mh b { font-size: 15px; font-weight: 600; } .ft-op-mh .ft-ico { width: 14px; height: 14px; }
.ft-op-vr { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 4px 0 10px; font-size: 12.5px; } .ft-op-vr b { font-weight: 600; }
/* change of ownership */
.ft-op-trp { margin: 0 0 12px; font-size: 12.5px; line-height: 1.5; color: var(--pa-text); } .ft-op-trp b { color: var(--pa-ink); font-weight: 600; }
.ft-op-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.ft-op-opt { display: flex; align-items: center; gap: 8px; padding: 12px; border: 1px solid var(--pa-line); border-radius: 10px; font-size: 12.5px; }
.ft-op-opt b { font-weight: 600; } .ft-op-opt i { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 1.5px solid #9aa4b4; position: relative; }
.ft-op-pick { border-color: var(--pa-blue); box-shadow: 0 0 0 3px rgba(42, 107, 230, .12); transition: border-color .3s .5s, box-shadow .3s .5s; }
.ft-op-pick i { border-color: var(--pa-blue); } .ft-op-pick i::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--pa-blue); }
.gbl-js .ft-vis-replica:not(.is-in) .ft-op-pick { border-color: var(--pa-line); box-shadow: none; } .gbl-js .ft-vis-replica:not(.is-in) .ft-op-pick i::after { transform: scale(0); }
/* permissions */
.ft-op-pt p { display: grid; grid-template-columns: 1fr 56px 56px; align-items: center; margin: 0; padding: 7px 0; border-bottom: 1px solid var(--pa-line); font-size: 12.5px; }
.ft-op-pt p.is-head { padding-top: 0; font-size: 11.5px; font-weight: 600; color: var(--pa-mute); } .ft-op-pt p.is-head span + span { text-align: center; }
.ft-op-pt i { justify-self: center; width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid #9aa4b4; position: relative; }
.ft-op-pt i.is-on, .ft-vis-replica.is-in .ft-op-pt i.ft-op-tick, .gbl:not(.gbl-js) .ft-op-pt i.ft-op-tick { background: var(--pa-blue); border-color: var(--pa-blue); }
.ft-op-pt i.is-on::after, .ft-vis-replica.is-in .ft-op-pt i.ft-op-tick::after, .gbl:not(.gbl-js) .ft-op-pt i.ft-op-tick::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ft-op-pm .ft-fld-help { margin: 10px 0 0; }
@media (max-width: 1200px) { .ft-op-hero { height: 540px; } }
@media (max-width: 768px) { .ft-op-hero { height: 430px; } .ft-op-phone { width: 300px; } .ft-op-scr::after { content: ""; display: block; height: 300px; } /* room so the last view can scroll to its target */ }
@media (max-width: 560px) {
  .ft-op-rows p { grid-template-columns: minmax(0, 1fr) 56px 56px 60px; }
  .ft-op-mrows p { grid-template-columns: 18px minmax(0, 1fr) 50px 70px; } .ft-op-mrows p > span:nth-child(3) { display: block; }
  .ft-op-navg { grid-template-columns: 1fr; } .ft-op-side { display: none; }
  .ft-op-opts { grid-template-columns: 1fr; }
}
/* Resale Documents: the board's order card, Confirm outstanding balance, the documents checklist, order details, the Fees
   step, the homeowner page (ui v2-layout/resale-docs) */
.ft-rs-hero .gbl-pa-page { padding-bottom: 60px; }
.ft-rs-hero .gbl-pa-nav .ft-ico { width: 16px; height: 16px; flex: none; }
.ft-rs-filter { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; margin-bottom: 10px; border: 1px solid #c9d0db; border-radius: 8px; font-size: 12.5px; } .ft-rs-filter .ft-ico { width: 11px; height: 11px; }
.ft-rs-card { padding: 12px 14px; }
.ft-rs-cardh { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ft-rs-cardh > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; flex: 1; } .ft-rs-cardh b { font-size: 13.5px; font-weight: 600; color: var(--pa-blue); } .ft-rs-cardh small { font-size: 11.5px; color: var(--pa-text); }
.ft-rs-ico { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: #eceef2; } .ft-rs-ico .ft-ico { width: 16px; height: 16px; color: var(--pa-text); }
/* chips: the app's colors, In progress darkened from #CC5602 for AA */
.ft-rs-st { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-style: normal; font-size: 11.5px; font-weight: 600; white-space: nowrap; color: #9a3f00; background: #fff2d3; transition: background .3s, color .3s; }
.ft-rs-st.is-rev { color: #6d28d9; background: #ede9fe; } .ft-rs-st.is-done { color: #0a725a; background: #d3f8e7; }
.ft-rs-rows li, .ft-rs-docs li { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--pa-line); line-height: 18px; }
.ft-rs-rows li:last-child, .ft-rs-docs li:last-child { border-bottom: 0; }
.ft-rs-rows li > i, .ft-rs-docs li > i { width: 16px; height: 16px; flex: none; margin-top: 1px; border-radius: 50%; border: 1.5px solid #b9c3d3; position: relative; transition: background .3s, border-color .3s; }
.ft-rs-rows li.is-ok > i, .ft-rs-docs li.is-ok > i { background: #0d9472; border-color: #0d9472; }
.ft-rs-rows li.is-ok > i::after, .ft-rs-docs li.is-ok > i::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ft-rs-rows li > span, .ft-rs-docs li > span { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ft-rs-rows b, .ft-rs-docs b { font-size: 12.5px; font-weight: 600; } .ft-rs-rows small, .ft-rs-docs small { font-size: 11.5px; color: var(--pa-text); }
.ft-rs-rows li > em, .ft-rs-docs li > em { flex: none; font-style: normal; font-size: 12px; font-weight: 600; color: var(--pa-blue); }
.ft-rs-rows li.is-ok > em { color: var(--pa-mute); }
.ft-rs-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; }
.ft-rs-foot .ft-link { white-space: nowrap; }
.ft-rs-dlg { width: min(360px, calc(100% - 32px)); top: 120px; }
.ft-rs-dp { margin: 0 0 12px; font-size: 12.5px; line-height: 1.5; color: var(--pa-text); }
.ft-float-rs { right: 18px; bottom: 30px; max-width: 280px; }
.ft-rs-hero .gbl-pa-btn.is-off-look:not(.is-ready) { background: #e3e8f0; border-color: #e3e8f0; color: #56606f; } .ft-rs-hero .ft-rs-foot .gbl-pa-btn.is-sent, .ft-rs-rows.is-sub li > em { display: none; } .ft-float-rs .gbl-float-ico { background: var(--pb-50); color: var(--pb-700); } .ft-float-rs .gbl-float-ico .ft-ico { width: 18px; height: 18px; }
/* verify mini */
.ft-rs-vf { position: relative; min-height: 410px; }
.ft-rs-vdlg { position: absolute; inset: 0; z-index: 2; padding: 18px 20px; border-radius: inherit; background: #fff; }
.ft-rs-cb { display: flex; align-items: flex-end; justify-content: space-between; margin: -2px 0 12px; padding: 10px 12px; border-radius: 10px; background: #f6f8fb; }
.ft-rs-cb > span:first-child { display: flex; flex-direction: column; } .ft-rs-cb small { font-size: 11.5px; color: var(--pa-text); } .ft-rs-cb b { font-size: 18px; font-weight: 600; }
.ft-rs-rad li > span { display: flex; flex-direction: column; } .ft-rs-rad li b { font-weight: 600; } .ft-rs-rad li small { font-size: 11.5px; color: var(--pa-text); font-weight: 400; }
/* checklist */
.ft-rs-cnt { font-size: 12px; font-weight: 600; color: var(--pa-text); } .ft-rs-cnt i { font-style: normal; }
.ft-rs-c2 { display: none; } .ft-vis-replica.is-in .ft-rs-c1, .gbl:not(.gbl-js) .ft-rs-c1 { display: none; } .ft-vis-replica.is-in .ft-rs-c2, .gbl:not(.gbl-js) .ft-rs-c2 { display: inline; }
.ft-rs-docs li.is-na > i { border-style: dashed; } .ft-rs-docs li.is-na small { color: var(--pa-mute); }
.ft-rs-up > i { transition: background .3s .6s, border-color .3s .6s; }
.ft-rs-up .ft-rs-done { display: none; }
.ft-vis-replica.is-in .ft-rs-up > i, .gbl:not(.gbl-js) .ft-rs-up > i { background: #0d9472; border-color: #0d9472; }
.ft-vis-replica.is-in .ft-rs-up > i::after, .gbl:not(.gbl-js) .ft-rs-up > i::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ft-vis-replica.is-in .ft-rs-up > em, .gbl:not(.gbl-js) .ft-rs-up > em { display: none; }
.ft-vis-replica.is-in .ft-rs-up .ft-rs-done, .gbl:not(.gbl-js) .ft-rs-up .ft-rs-done { display: block; }
/* order details */
.ft-rs-u { display: flex; flex-direction: column; margin: -4px 0 10px; } .ft-rs-u b { font-weight: 600; } .ft-rs-u small { font-size: 12px; color: var(--pa-text); }
.ft-rs-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin: 0 0 12px; }
.ft-rs-dl div { display: flex; flex-direction: column; padding: 6px 0; border-bottom: 1px solid var(--pa-line); } .ft-rs-dl dt { font-size: 11.5px; color: var(--pa-text); } .ft-rs-dl dd { margin: 0; font-size: 12.5px; font-weight: 600; }
/* fees */
.ft-rs-fee { display: grid; grid-template-columns: auto .9fr 1.3fr; gap: 8px; align-items: center; margin-bottom: 8px; }
.ft-rs-ty { display: inline-flex; padding: 2px; border-radius: 8px; background: #eef1f6; } .ft-rs-ty b { padding: 5px 9px; border-radius: 6px; font-size: 11.5px; font-weight: 600; color: var(--pa-text); } .ft-rs-ty b.is-on { background: #fff; color: var(--pa-ink); box-shadow: 0 1px 2px rgba(20, 30, 50, .12); }
.ft-rs-in { display: flex; align-items: center; height: 34px; padding: 0 10px; border: 1px solid #c9d0db; border-radius: 8px; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-rs-addr { margin: 0; padding: 9px 12px; border: 1px solid var(--pa-line); border-radius: 8px; font-size: 12.5px; }
/* homeowner */
.ft-rs-hh { margin: -4px 0 12px; padding: 12px 14px; border-radius: 10px; background: var(--pb-50); font-size: 12.5px; line-height: 1.5; color: var(--pa-text); } .ft-rs-hh b { display: block; margin-bottom: 2px; font-size: 14px; font-weight: 600; color: var(--pa-ink); }
.ft-rs-steps li { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; line-height: 18px; }
.ft-rs-steps em { display: grid; place-items: center; width: 22px; height: 22px; flex: none; margin-top: -2px; border-radius: 50%; background: var(--pa-blue); color: #fff; font-style: normal; font-size: 11.5px; font-weight: 600; }
.ft-rs-steps span { display: flex; flex-direction: column; } .ft-rs-steps b { font-size: 12.5px; font-weight: 600; } .ft-rs-steps small { font-size: 12px; color: var(--pa-text); }
@media (max-width: 560px) {
  .ft-rs-foot { flex-wrap: wrap; } .ft-rs-dl { grid-template-columns: 1fr; }
  .ft-rs-fee { grid-template-columns: 1fr 1fr; } .ft-rs-ty { grid-column: 1 / -1; justify-self: start; }
}
.ft-dc-filt > span, .ft-dc-filt em { white-space: nowrap; overflow: hidden; }
.ft-dc-run > span:first-child, .ft-dc-src { align-items: flex-start; line-height: 18px; } .ft-dc-run .ft-ico, .ft-dc-src .ft-ico { flex: none; margin-top: 1px; }
/* sweep fixes (Session 4) */
.ft-rq-remind { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 12px; font-weight: 600; color: var(--pa-blue); } .ft-rq-remind .ft-ico { width: 14px; height: 14px; }
.ft-rq-r > span:nth-child(3) b, .ft-rq-r > span:nth-child(3) small { font-weight: 400; }
.ft-rq-r > span:nth-child(3) b { color: var(--pa-blue); }
.ft-rq-r { grid-template-columns: minmax(0, 1fr) auto 90px; }
.ft-rq-vc { flex-direction: row; align-items: center; gap: 10px; }
.ft-dc-pickr { margin-bottom: 12px; padding: 4px; border: 1px solid #c9d0db; border-radius: 8px; }
.ft-dc-run > span:first-child em { margin-left: 8px; }
.ft-dc-sdlg .gbl-pa-btn i { font-style: normal; }
.ft-vt-sq small { display: block; font-size: 11.5px; font-weight: 400; color: var(--pa-text); }
.ft-op-pt p.is-kid span { padding-left: 16px; color: var(--pa-text); }
.ft-op-pnote { margin: -4px 0 10px !important; }
.ft-rs-docs li > em.is-na { color: var(--pa-text); }
/* shared/cards/comments-card: each comment is the message, then "{author} • MM/DD/YYYY h:mm a" (newest first) */
.ft-cmt { padding: 8px 0; border-top: 1px solid var(--pa-line); font-size: 12.5px; } .ft-cmt p { margin: 0; } .ft-cmt small { display: block; margin-top: 2px; color: var(--pa-text); font-size: 11.5px; }
.ft-vi-ch .ft-link { margin-left: auto; font-size: 12px; }
.ft-auto-next, .ft-je-ok, .ft-mail-tg li { align-items: flex-start; line-height: 18px; }
.ft-auto-next .ft-ico, .ft-je-ok .ft-ico { flex: none; margin-top: 1px; } .ft-mail-tg li .gbl-toggle { margin-top: -1px; }
.ft-ap-mail .gbl-pa-btn { align-items: flex-start; height: auto; min-height: 32px; padding-top: 7px; padding-bottom: 7px; line-height: 18px; } .ft-ap-mail .gbl-pa-btn .ft-ico { flex: none; margin-top: 1.5px; }

/* =========================================================================
   Session 5: Communications + Platform pages (ft-mb- message boards, ft-mc- broadcast, ft-ml- mail room,
   ft-wb- website builder, ft-in- integrations, ft-sc- security, ft-so- support); fictional data
   ========================================================================= */
/* Message Boards (legacy app-layout/message-board): board cards, thread cards, the thread editor, comments */
.ft-mb-pay { margin-left: auto; height: 30px; }
.ft-mb-pay + .gbl-pa-acct { margin-left: 0; }
.ft-mb-k { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--pa-text); }
.ft-mb-boards { display: grid; gap: 10px; margin-bottom: 14px; }
.ft-mb-boards.is-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ft-mb-board { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; }
.ft-mb-board > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.ft-mb-board b { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.ft-mb-board b .ft-ico { width: 13px; height: 13px; color: var(--pa-mute); }
.ft-mb-board small { font-size: 11.5px; color: var(--pa-text); line-height: 1.4; }
.ft-mb-bico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: #e3f2fd; color: #1565c0; }
.ft-mb-bico .ft-ico { width: 20px; height: 20px; }
.ft-mb-bico.is-b { background: #ede7f6; color: #5e35b1; } .ft-mb-bico.is-c { background: #e0f2f1; color: #00695c; } .ft-mb-bico.is-d { background: #fff3e0; color: #b45309; }
.ft-mb-boards:not(.is-grid) .ft-mb-board { flex-direction: row; align-items: center; max-width: 320px; }
.ft-mb-back { display: flex; align-items: center; gap: 4px; margin: 4px 0 8px; font-size: 12px; font-weight: 600; color: var(--pb-600); }
.ft-mb-back .ft-ico { width: 12px; height: 12px; }
.ft-mb-th { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ft-mb-th strong { font-size: 18px; font-weight: 600; }
.ft-mb-acts { display: flex; gap: 8px; }
.ft-mb-tcard, .ft-mb-post, .ft-mb-cmts { padding: 12px 14px; margin-bottom: 10px; }
.ft-mb-by { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 12px; }
.ft-mb-by > .ft-ico { width: 18px; height: 18px; color: var(--pa-mute); }
.ft-mb-by b { font-weight: 600; }
.ft-mb-by small { margin-left: auto; font-size: 11px; color: var(--pa-text); white-space: nowrap; }
.ft-mb-by em { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--pa-blue); }
.ft-mb-post .ft-mb-by > .ft-ico + b ~ .ft-ico { width: 13px; height: 13px; color: var(--pa-mute); }
.ft-mb-tt { display: block; margin-bottom: 4px; font-size: 13.5px; font-weight: 600; }
.ft-mb-sn { margin: 0 0 6px; font-size: 12px; color: var(--pa-text); }
.ft-mb-post .ft-mb-sn { color: var(--pa-ink); margin: 0; }
.ft-mb-cc { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--pa-text); }
.ft-mb-cc .ft-ico { width: 13px; height: 13px; }
.ft-mb-ed { padding: 14px 16px; }
.ft-mb-edh { display: flex; align-items: baseline; gap: 8px; margin: 0 0 12px; }
.ft-mb-edh strong { font-size: 15px; font-weight: 600; }
.ft-mb-edh small { font-size: 12px; color: var(--pa-text); }
.ft-fld > .ft-mb-in { justify-content: flex-start; }
.ft-mb-ph { font-style: normal; color: var(--pa-mute); }
.ft-mb-rt { margin-bottom: 12px; border: 1px solid #c9d0db; border-radius: 8px; }
.ft-mb-tb { display: flex; align-items: center; gap: 12px; padding: 6px 10px; border-bottom: 1px solid var(--pa-line); font-size: 12px; color: var(--pa-text); }
.ft-mb-tb .ft-ico { width: 14px; height: 14px; }
.ft-mb-rt p { min-height: 56px; margin: 0; padding: 8px 10px; font-size: 12.5px; }
.ft-mb-sub { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; font-size: 12.5px; line-height: 18px; }
.ft-mb-sub > span:last-child { display: flex; flex-direction: column; gap: 4px; }
.ft-mb-sub b { font-weight: 600; }
.ft-mb-cb { flex: none; display: grid; place-items: center; width: 16px; height: 16px; margin-top: 1px; border: 1.5px solid #9aa4b5; border-radius: 4px; }
.ft-mb-cb.is-on { background: var(--pa-blue); border-color: var(--pa-blue); color: #fff; }
.ft-mb-cb .ft-ico { width: 11px; height: 11px; }
.ft-mb-rad { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; color: var(--pa-text); }
.ft-mb-rad i { flex: none; width: 14px; height: 14px; margin-top: 2px; border-radius: 50%; border: 4px solid var(--pa-blue); background: #fff; }
.ft-mb-ch { margin: 0 0 4px; font-size: 13px; } .ft-mb-ch b { font-weight: 600; }
.ft-mb-cmt { padding: 8px 0; border-top: 1px solid var(--pa-line); }
.ft-mb-cmt > p:last-child { margin: 0; font-size: 12.5px; }
.ft-mb-cmt .ft-mb-by { margin-bottom: 3px; }
.ft-mb-cmt.is-reply { margin-left: 26px; padding-left: 10px; border-left: 2px solid var(--pa-line); border-top: 0; }
.ft-mb-hero .ft-toast b { margin-right: 4px; }
@media (max-width: 1100px) { .ft-mb-boards.is-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ft-mb-boards.is-grid > :nth-child(3) { display: none; } }
@media (max-width: 560px) {
  .ft-mb-pay { display: none; }
  .ft-mb-acts > :first-child { display: none; }
  .ft-mb-by small { display: none; }
  .ft-mb-cmt.is-reply { margin-left: 14px; }
}
.ft-mb-tg { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 13px; font-weight: 600; }
.ft-mb-tg .gbl-toggle { flex: none; }
.ft-mb-new .ft-radios li.is-un, .ft-mb-new .ft-radios li.is-on.is-un { font-weight: 400; } .ft-mb-new .ft-radios li.is-un i { border-color: #9aa4b4; } .ft-mb-new .ft-radios li.is-un i::after { transform: scale(0); }
.ft-radios .ft-link { font-size: inherit; }
.ft-mb-pin .ft-mb-th { margin-bottom: 10px; } .ft-mb-pin .ft-mb-th strong { font-size: 15px; }
.ft-mb-drop { margin-bottom: 10px; padding: 10px; border: 1.5px dashed #b8c2d3; border-radius: 10px; transition: background .25s, border-color .25s; }
.ft-mb-drop.is-hot { background: var(--pa-blue-50, #eff7ff); border-color: var(--pa-blue); }
.ft-mb-drop.is-full { border-style: solid; border-color: var(--pa-line); background: #fff; }
.ft-mb-dk { margin: 0; text-align: center; font-size: 12px; color: var(--pa-text); }
.ft-mb-drop.is-full .ft-mb-dk { margin-bottom: 8px; text-align: left; font-weight: 600; color: var(--pa-ink); }
.ft-mb-tcard.is-mini { padding: 9px 12px; margin-bottom: 8px; border: 1px solid var(--pa-line); border-radius: 10px; background: #fff; transition: opacity .25s, box-shadow .25s; }
.ft-mb-tcard.is-mini .ft-mb-by { margin-bottom: 3px; font-size: 12.5px; }
.ft-mb-tcard.is-mini .ft-mb-by > .ft-ico { width: 16px; height: 16px; }
.ft-mb-drop .ft-mb-tcard.is-mini { margin-bottom: 0; }
.ft-mb-drop .ft-mb-tcard .ft-mb-by > .ft-ico { color: var(--pa-blue); }
.ft-mb-tcard.is-drag { opacity: .5; box-shadow: 0 12px 24px -12px rgba(24, 50, 140, .45); }
.ft-mb-mem { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--pa-line); }
.ft-mb-mem p { display: flex; justify-content: space-between; gap: 10px; margin: 0; padding: 5px 0; font-size: 12.5px; }
.ft-mb-mem p em { font-style: normal; color: var(--pa-text); }
.ft-mb-mem p.ft-mb-memh { font-weight: 600; padding-top: 0; }
.ft-mb-files .ft-mb-img { display: grid; place-items: center; width: 120px; height: 90px; margin: 4px 0 8px; border-radius: 8px; background: linear-gradient(135deg, #dcebfd, #eff7ff); color: #6b86b8; }
.ft-mb-files .ft-mb-img .ft-ico { width: 28px; height: 28px; }
.ft-mb-sn.is-body { color: var(--pa-ink); }
.ft-mb-att { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size: 12.5px; color: var(--pa-blue); font-weight: 600; }
.ft-mb-att .ft-ico { width: 15px; height: 15px; flex: none; } .ft-mb-att .ft-ico:last-child { width: 12px; height: 12px; }
.ft-mb-att.is-sm { margin-top: 4px; font-size: 12px; color: var(--pa-ink); font-weight: 400; }
.ft-mb-cmts.is-flat { margin: 10px 0 0; padding: 0; }
.ft-mb-mailw { display: grid; gap: 14px; width: 100%; max-width: 460px; }
.ft-mb-subd .ft-radios li b { font-weight: 600; }
.ft-mb-mail p { margin: 0 0 6px; font-size: 12.5px; }
.ft-mb-subj { padding-bottom: 8px; border-bottom: 1px solid var(--pa-line); }
.ft-mb-q { padding: 6px 10px; border-radius: 6px; background: #f5f7fa; }
.ft-mb-mail .gbl-pa-btn { margin: 4px 0 8px; }
.ft-mb-unsub { display: block; font-size: 11px; color: var(--pa-text); }
.ft-radios em.ft-link { font-style: normal; }
.ft-mb-pin { margin-bottom: 26px; }
/* Mass Communication (legacy app-layout/broadcast + communications/*-sender, communication-logs-v2) */
.ft-mc-card { padding: 12px 14px; margin-bottom: 10px; }
.ft-mc-card .ft-card-h { margin-bottom: 10px; }
.ft-mc-card .ft-card-h strong { font-size: 14px; }
.ft-mc-card > .ft-card-h:only-child { margin-bottom: 0; }
.ft-mc-btns { display: flex; gap: 6px; }
.ft-mc-btns .gbl-pa-btn { height: 28px; padding: 0 10px; font-size: 12px; }
.ft-mc-range { margin: 0; } .ft-mc-range > span { height: 32px; font-size: 12px; gap: 10px; }
.ft-mc-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ft-mc-tiles p { margin: 0; padding: 8px 10px; border: 1px solid var(--pa-line); border-radius: 8px; }
.ft-mc-tiles small { display: block; font-size: 11px; color: var(--pa-text); }
.ft-mc-tiles b { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ft-mc-selh, .ft-mc-urow { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid var(--pa-line); font-size: 12.5px; }
.ft-mc-selh { font-size: 12px; } .ft-mc-selh b { font-weight: 600; color: var(--pa-text); }
.ft-mc-selh .ft-chip { margin-left: auto; }
.ft-mc-urow:last-child { border-bottom: 0; }
.ft-mc-urow > span:nth-child(2) { display: flex; flex-direction: column; }
.ft-mc-urow b { font-weight: 600; } .ft-mc-urow small { font-size: 11.5px; color: var(--pa-text); }
.ft-mc-cb { flex: none; display: grid; place-items: center; width: 16px; height: 16px; border: 1.5px solid #9aa4b5; border-radius: 4px; color: transparent; transition: background .2s, border-color .2s; }
.ft-mc-cb .ft-ico { width: 11px; height: 11px; }
.ft-mc-cb.is-on, .ft-mc-urow.is-on .ft-mc-cb, .ft-mc-selh.is-on .ft-mc-cb { background: var(--pa-blue); border-color: var(--pa-blue); color: #fff; }
.ft-mc-as { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.ft-mc-as small { font-size: 12px; font-weight: 600; color: var(--pa-text); }
.ft-mc-as span { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--pa-line); border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--pa-text); }
.ft-mc-as span .ft-ico { width: 15px; height: 15px; }
.ft-mc-as span.is-on { border-color: var(--pa-blue); background: #eff7ff; color: var(--pb-600); }
.ft-mc-msg { margin-bottom: 10px; }
.ft-mc-msg > small { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--pa-text); }
.ft-mc-msg > p { min-height: 64px; margin: 0; padding: 8px 10px; border: 1px solid #c9d0db; border-radius: 8px; font-size: 12.5px; }
.ft-mc-tok { display: inline-block; padding: 0 5px; border-radius: 4px; background: #e8eefb; color: var(--pb-600); font-weight: 600; font-size: 12px; }
.ft-mc-k { margin: 0 0 4px; font-size: 12px; font-weight: 600; color: var(--pa-text); }
.ft-mc-prog { padding: 12px 14px; margin-bottom: 10px; border: 1px solid #c7dbf7; background: #f5f9ff; }
.ft-mc-prog.is-done { border-color: #b7e0c8; background: #f2fbf5; }
.ft-mc-pt { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; }
.ft-mc-pt b { font-weight: 600; }
.ft-mc-pt small { margin-left: auto; font-size: 12px; color: var(--pa-text); font-variant-numeric: tabular-nums; }
.ft-mc-spin { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #c7dbf7; border-top-color: var(--pa-blue); animation: ft-mc-spin .8s linear infinite; }
@keyframes ft-mc-spin { to { transform: rotate(360deg); } }
.ft-mc-ok .ft-ico { width: 16px; height: 16px; color: #047857; display: block; }
.ft-mc-bar { display: block; height: 6px; margin-top: 10px; border-radius: 3px; background: #dce6f5; overflow: hidden; }
.ft-mc-bar i { display: block; height: 100%; width: 9%; border-radius: 3px; background: var(--pa-blue); transition: width .6s var(--ease); }
.ft-mc-bar i.is-a { width: 45%; } .ft-mc-bar i.is-b { width: 80%; }
.ft-mc-hint { margin: 8px 0; font-size: 12px; color: var(--pa-text); }
.ft-mc-pbtn { display: flex; gap: 8px; margin: 0; } .ft-mc-pbtn .gbl-pa-btn { height: 28px; font-size: 12px; }
.ft-mc-hero .ft-toast b, .ft-mc-txt .ft-toast b { margin-right: 4px; }
/* the cursor leaves once Send Now is pressed: left where it was, the pages that slid under it put it on New Text Message
   and New Phone Call, as if about to click them */
.ft-mc-hero .gbl-cur.is-on.is-rest { opacity: 0; }
.ft-mc-stop { margin: -4px 0 10px; font-size: 11.5px; color: var(--pa-text); }
.ft-mc-txt .ft-card-h, .ft-mc-call .ft-card-h { flex-wrap: wrap; }
.ft-mc-when { margin-top: 2px; }
.ft-mc-filt { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 6px; }
.ft-mc-filt > .ft-fld { flex: 1; margin: 0; } .ft-mc-filt > .ft-fld > span { justify-content: flex-start; color: var(--pa-mute); height: 34px; }
.ft-mc-filt .ft-ico { width: 14px; height: 14px; }
.ft-mc-tagf { display: flex; flex-direction: column; gap: 4px; } .ft-mc-tagf small { font-size: 11.5px; font-weight: 600; color: var(--pa-text); }
.ft-mc-tag { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; background: #e8eefb; color: var(--pb-600); font-style: normal; font-size: 12px; font-weight: 600; white-space: nowrap; }
.ft-mc-tag .ft-ico { width: 11px; height: 11px; }
.ft-mc-em { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-mc-selh .ft-mc-em { margin-left: auto; } .ft-mc-selh .ft-mc-em + .ft-chip { margin-left: 0; }
.ft-mc-fields { position: relative; }
.ft-mc-msg { position: relative; }
.ft-mc-rt { margin-bottom: 0; } .ft-mc-rt p { min-height: 78px; }
.ft-mc-ins { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; color: var(--pa-ink); }
.ft-mc-ins .ft-ico { width: 11px; height: 11px; }
.ft-mc-menu { left: 0; right: auto; top: 58px; }
.ft-mc-menu span { font-weight: 400; padding: 6px 10px; }
.ft-mc-foot { flex-wrap: wrap; margin-top: 12px; }
.ft-mc-log { max-width: 520px; padding: 14px 16px; }
.ft-mc-log .ft-card-h { flex-wrap: wrap; }
.ft-mc-lt { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--pa-text); }
.ft-mc-lr { display: grid; grid-template-columns: 1.1fr .9fr 1.4fr .5fr .9fr; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--pa-line); font-size: 12px; }
.ft-mc-lr.is-h { font-weight: 600; color: var(--pa-text); font-size: 11.5px; }
.ft-mc-lr > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-mc-b { display: inline-block; padding: 2px 8px; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 600; }
.ft-mc-b.is-del { background: #e0f2fe; color: #075985; } .ft-mc-b.is-open { background: #dcfce7; color: #166534; }
@media (max-width: 1100px) { .ft-mc-hero .ft-mc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .ft-mc-card .ft-mc-btns > :first-child { display: none; }
  .ft-mc-hero .ft-mc-tiles p:nth-child(n+3) { display: none; }
  .ft-mc-range { display: none; }
  .ft-mc-lr { grid-template-columns: 1.2fr .9fr .9fr; } .ft-mc-lr > span:nth-child(3), .ft-mc-lr > span:nth-child(4) { display: none; }
  .ft-mc-em { display: none; }
}
.ft-radios li.is-on.is-un { font-weight: 400; } .ft-radios li.is-on.is-un i { border-color: #9aa4b4; } .ft-radios li.is-on.is-un i::after { transform: scale(0); }
@media (max-width: 560px) { .ft-mc-as { gap: 6px; } .ft-mc-as span { padding: 0 8px; gap: 4px; } .ft-mc-as small { width: 100%; } }
/* Mailroom (legacy app-layout/mail: Mail Room, Send Paper Mail, mail-sender, Delivery Details) */
.ft-ml-card { padding: 12px 14px; margin-bottom: 10px; }
.ft-ml-card .ft-card-h strong { font-size: 15px; }
.ft-ml-big { margin: 0 0 8px; font-size: 12.5px; color: var(--pa-text); } .ft-ml-big b { font-size: 22px; font-weight: 600; color: var(--pa-ink); margin-right: 4px; }
.ft-ml-chart { display: flex; align-items: flex-end; gap: 10px; height: 70px; padding-top: 4px; border-bottom: 1px solid var(--pa-line); }
.ft-ml-chart i { flex: 1; height: var(--h); border-radius: 4px 4px 0 0; background: linear-gradient(#5b8def, #2a6be6); opacity: .85; }
.ft-ml-view { position: relative; }
.ft-ml-pick { top: 40px; }
.ft-ml-opt { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; padding: 10px 12px; border: 1px solid var(--pa-line); border-radius: 10px; }
.ft-ml-opt > span:first-child { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: #eff7ff; color: var(--pb-600); flex: none; }
.ft-ml-opt > span:first-child .ft-ico { width: 18px; height: 18px; }
.ft-ml-opt > span:last-child { display: flex; flex-direction: column; } .ft-ml-opt b { font-size: 13px; font-weight: 600; } .ft-ml-opt small { font-size: 11.5px; color: var(--pa-text); }
.ft-ml-hero .gbl-pa-h { margin-bottom: 10px; } .ft-ml-hero .gbl-pa-h strong { font-size: 17px; }
.ft-ml-file { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 8px 10px; border: 1px dashed #b8c2d3; border-radius: 8px; font-size: 12.5px; }
.ft-ml-file > .ft-ico { width: 20px; height: 20px; color: #b42318; flex: none; } .ft-ml-file > .ft-ico:last-child { margin-left: auto; width: 16px; height: 16px; color: #047857; }
.ft-ml-file > span { display: flex; flex-direction: column; } .ft-ml-file b { font-weight: 600; } .ft-ml-file small { font-size: 11px; color: var(--pa-text); }
.ft-ml-opts .ft-radios li { align-items: flex-start; } .ft-ml-opts .ft-radios i { margin-top: 1px; }
:is(.ft-ml-hero, .ft-ml-optc, .ft-ml-inv, .ft-sc-exp) .ft-radios li > span { display: flex; flex-direction: column; } :is(.ft-ml-hero, .ft-ml-optc, .ft-ml-inv, .ft-sc-exp) .ft-radios li > span small { font-size: 11.5px; font-weight: 400; color: var(--pa-text); }
:is(.ft-ml-hero, .ft-ml-optc, .ft-ml-inv, .ft-sc-exp) .ft-radios li > span b { font-weight: 600; }
.ft-ml-inv .ft-radios li.is-dis { opacity: .55; }
.ft-ml-est { margin: 0 0 10px; display: flex; flex-direction: column; gap: 3px; } .ft-ml-est b { font-size: 13px; font-weight: 600; } .ft-ml-est small { font-size: 11.5px; color: var(--pa-text); }
.ft-ml-sel { display: flex; justify-content: space-between; margin: 0; padding: 8px 0; border-top: 1px solid var(--pa-line); font-size: 12.5px; } .ft-ml-sel b { font-weight: 600; }
.ft-ml-proc { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 12px; font-size: 12.5px; }
.ft-ml-pst > span { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--pa-text); } .ft-ml-pst .is-ok { color: #15803d; } .ft-ml-pst .ft-ico { width: 14px; height: 14px; }
.ft-ml-proc .ft-mc-bar { margin: 0; } .ft-mc-bar i.is-c { width: 100%; background: #047857; }
.ft-ml-rows { padding: 4px 14px; }
.ft-ml-r { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; margin: 0; padding: 8px 0; border-bottom: 1px solid var(--pa-line); font-size: 12.5px; }
.ft-ml-r:last-child { border-bottom: 0; }
.ft-ml-r.is-h { font-size: 11.5px; font-weight: 600; color: var(--pa-text); }
.ft-ml-r > span:first-child { display: flex; flex-direction: column; } .ft-ml-r b { font-weight: 600; } .ft-ml-r small { font-size: 11.5px; color: var(--pa-text); }
.ft-ml-pill { font-style: normal; padding: 2px 10px; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: 11.5px; font-weight: 600; }
.ft-mb-tg small { display: block; font-size: 11.5px; font-weight: 400; color: var(--pa-text); }
.ft-ml-optc .ft-radios li, .ft-ml-inv .ft-radios li { align-items: flex-start; } .ft-ml-optc .ft-radios i, .ft-ml-inv .ft-radios i { margin-top: 1px; }
.ft-ml-optc .ft-radios.is-row li { align-items: center; } .ft-ml-optc .ft-radios.is-row i { margin-top: 0; }
.ft-ml-optc .ft-mb-tg, .ft-ml-inv .ft-mb-tg { align-items: flex-start; } .ft-ml-optc .ft-mb-tg .gbl-toggle, .ft-ml-inv .ft-mb-tg .gbl-toggle { margin-top: -1px; }
.ft-ml-inv .ft-mb-tg { margin-bottom: 8px; }
.ft-ml-stub { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 0; padding: 10px 12px; border-radius: 8px; background: #f5f7fa; font-size: 12.5px; line-height: 18px; }
.ft-ml-stub .ft-ico { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--pb-600); }
.ft-ml-stub > span { display: flex; flex-direction: column; } .ft-ml-stub b { font-weight: 600; } .ft-ml-stub small { font-size: 11.5px; color: var(--pa-text); }
.ft-ml-recip { max-width: 520px; }
.ft-ml-meta { display: flex; gap: 6px; margin: -4px 0 8px; } .ft-ml-meta em { font-style: normal; }
.ft-ml-rr { display: grid; grid-template-columns: 1fr 1.3fr .8fr 1.1fr; gap: 8px; margin: 0; padding: 8px 0; border-top: 1px solid var(--pa-line); font-size: 12px; align-items: center; }
.ft-ml-rr.is-h { font-size: 11.5px; font-weight: 600; color: var(--pa-text); }
.ft-ml-rr > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-ml-rr .ft-link { font-size: 12px; }
.ft-ml-rr.is-off2 > span:not(.ft-link) { color: var(--pa-mute); text-decoration: line-through; }
.ft-ml-tg { display: grid; gap: 6px; margin-bottom: 10px; }
.ft-ml-tg p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0; font-size: 12.5px; }
.ft-ml-tg small { font-size: 11.5px; font-weight: 600; color: var(--pa-text); } .ft-ml-tg b { font-weight: 600; }
.ft-ml-tg .ft-link { font-variant-numeric: tabular-nums; }
.ft-ml-tl { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.ft-ml-tl li { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; position: relative; }
.ft-ml-tl li .ft-ico { flex: none; width: 18px; height: 18px; color: #047857; background: #fff; position: relative; z-index: 1; }
.ft-ml-tl li:not(:last-child)::before { content: ""; position: absolute; left: 8.5px; top: 22px; bottom: -8px; width: 1px; background: #b7e0c8; }
.ft-ml-tl li > span { display: flex; flex-direction: column; line-height: 18px; } .ft-ml-tl b { font-size: 12.5px; font-weight: 600; } .ft-ml-tl small { font-size: 11.5px; color: var(--pa-text); line-height: 1.4; }
.ft-ml-cx { position: relative; min-height: 300px; }
.ft-ml-cx .ft-ml-r { grid-template-columns: 1fr auto 60px; }
.ft-ml-cxl { font-size: 12px; font-weight: 600; color: #b42318; text-align: right; }
.ft-ml-cdlg { top: 70px; }
.ft-ml-who { margin: 0 0 12px; display: flex; flex-direction: column; font-size: 12.5px; } .ft-ml-who b { font-weight: 600; } .ft-ml-who small { color: var(--pa-text); }
.ft-ml-cx .ft-toast b, .ft-ml-hero .ft-toast b { margin-right: 4px; }
@media (max-width: 560px) {
  .ft-ml-rr { grid-template-columns: 1fr 1.2fr 1fr; } .ft-ml-rr > span:nth-child(3) { display: none; }
  .ft-ml-hero .ft-stepper li:not(.is-on) { display: none; }
  .ft-ml-hero .ft-tabs span:nth-child(3) { display: none; }
}
/* Website Builder (app-layout/website-builder, the default site template, the Penny widget, AI Chatbot page, Inbox) */
.ft-wb-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 10px; }
.ft-wb-hd strong { display: inline-flex; align-items: center; gap: 6px; font-size: 17px; font-weight: 600; }
.ft-wb-hd strong .ft-ico { width: 14px; height: 14px; color: var(--pa-text); }
.ft-wb-hd .gbl-pa-btn .ft-ico { width: 13px; height: 13px; }
.ft-wb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ft-wb-col { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ft-wb-sw { width: 28px; height: 28px; border-radius: 7px; background: #0062df; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); transition: background .35s; }
.ft-wb-sw.is-green { background: #2e7d5b; }
.ft-wb-url { display: flex; align-items: center; margin: 0; font-size: 12.5px; }
.ft-wb-url span { padding: 7px 10px; border: 1px solid #c9d0db; border-radius: 8px 0 0 8px; background: #fff; }
.ft-wb-url em { font-style: normal; padding: 7px 10px; border: 1px solid #c9d0db; border-left: 0; border-radius: 0 8px 8px 0; background: #f5f7fa; color: var(--pa-text); }
.ft-wb-sec { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 4px 12px; padding: 10px 14px; margin-bottom: 8px; }
.ft-wb-sec > span { display: flex; flex-direction: column; } .ft-wb-sec b { font-size: 13px; font-weight: 600; } .ft-wb-sec small { font-size: 11.5px; color: var(--pa-text); }
.ft-wb-sec > .gbl-toggle { margin-top: 1px; }
.ft-wb-sec > p, .ft-wb-sec > ul { grid-column: 1 / -1; }
.ft-wb-am { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.ft-wb-am em { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: #eef1f6; font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--pa-ink); }
.ft-wb-am em .ft-ico { width: 13px; height: 13px; color: #2e7d5b; }
.ft-wb-pub { top: 96px; }
.ft-wb-fact { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 8px; font-size: 12.5px; } .ft-wb-fact small { font-weight: 600; color: var(--pa-text); font-size: 12px; }
.ft-wb-hint { margin: 0 0 10px; font-size: 11.5px; color: var(--pa-text); }
.ft-wb-hero .ft-toast { max-width: calc(100% - 24px); }
.ft-wb-bar { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; padding: 6px 10px; border-radius: 999px; background: #eef1f6; font-size: 11.5px; color: var(--pa-text); }
.ft-wb-bar .ft-ico { width: 12px; height: 12px; }
.ft-wb-web { position: relative; border: 1px solid var(--pa-line); border-radius: 12px; background: #fff; overflow: hidden; }
.ft-wb-nav { display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--pa-line); font-size: 11.5px; color: var(--pa-text); }
.ft-wb-nav b { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; font-size: 12.5px; font-weight: 600; color: var(--pa-ink); }
.ft-wb-nav em { font-style: normal; padding: 5px 10px; border-radius: 6px; background: #2e7d5b; color: #fff; font-weight: 600; white-space: nowrap; }
.ft-wb-logo { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: #2e7d5b; color: #fff; font-size: 10px; font-weight: 700; }
.ft-wb-hero2 { display: flex; flex-direction: column; gap: 4px; padding: 26px 16px; background: linear-gradient(135deg, #e7f3ec, #f5faf7); text-align: center; }
.ft-wb-hero2 b { font-size: 17px; font-weight: 600; } .ft-wb-hero2 small { font-size: 12px; color: var(--pa-text); }
.ft-wb-am.is-site { padding: 10px 14px 12px; margin: 0; }
.ft-wb-chat { position: absolute; right: 10px; bottom: 10px; width: min(270px, calc(100% - 20px)); padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: 0 18px 40px -14px rgba(14, 18, 27, .45), 0 0 0 1px var(--pa-line); }
.ft-wb-ch { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 12.5px; }
.ft-wb-ch .ft-ico { width: 15px; height: 15px; color: #2e7d5b; } .ft-wb-ch b { font-weight: 600; } .ft-wb-ch small { margin-left: auto; font-size: 11px; color: var(--pa-text); }
.ft-wb-q { margin: 0 0 6px auto; width: fit-content; max-width: 85%; padding: 6px 10px; border-radius: 12px 12px 2px 12px; background: #2e7d5b; color: #fff; font-size: 12px; }
.ft-wb-a { margin: 0; padding: 7px 10px; border-radius: 12px 12px 12px 2px; background: #f1f4f8; font-size: 12px; }
.ft-wb-a em { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 2px 8px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--pa-line); font-style: normal; font-size: 11px; font-weight: 600; color: var(--pa-text); }
.ft-wb-a em .ft-ico { width: 12px; height: 12px; }
.ft-wb-web.is-card { width: 100%; max-width: 480px; box-shadow: 0 24px 48px -24px rgba(24, 50, 140, .35); }
.ft-wb-web.is-card .ft-wb-bar { margin: 8px 10px 0; }
.ft-wb-k { margin: 10px 14px 0; font-size: 12px; font-weight: 600; }
.ft-wb-portal { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 14px 12px; }
.ft-wb-portal p { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 10px; border: 1px solid var(--pa-line); border-radius: 10px; font-size: 12px; }
.ft-wb-portal .ft-ico { width: 18px; height: 18px; color: #2e7d5b; } .ft-wb-portal b { font-weight: 600; }
.ft-wb-portal em { font-style: normal; align-self: flex-start; padding: 3px 9px; border-radius: 6px; background: #2e7d5b; color: #fff; font-size: 11px; font-weight: 600; }
.ft-wb-foot { margin: 0; padding: 8px 14px; border-top: 1px solid var(--pa-line); font-size: 11px; color: var(--pa-text); text-align: center; }
.ft-wb-secc .ft-wb-sec { padding: 10px 0; margin: 0; border-bottom: 1px solid var(--pa-line); }
.ft-wb-secc .ft-wb-sec:last-child { border-bottom: 0; }
.ft-wb-sw4 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 0; padding: 0; list-style: none; }
.ft-wb-sw4 li { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.ft-wb-sw4 .gbl-toggle { flex: none; transform: scale(.85); transform-origin: left center; }
.ft-wb-tb { padding: 10px; border-radius: 12px; background: #fafbfc; box-shadow: inset 0 0 0 1px var(--pa-line); min-height: 170px; }
.ft-wb-think { margin: 0; font-size: 12px; color: var(--pa-text); font-style: italic; }
.ft-wb-in { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 38px; margin: 10px 0 0; padding: 0 12px; border: 1px solid #c9d0db; border-radius: 999px; font-size: 12.5px; }
.ft-wb-in > .ft-ico { width: 16px; height: 16px; color: var(--pa-blue); }
.ft-wb-kbh { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 10px; border-radius: 10px; background: #f5f7fa; font-size: 12.5px; }
.ft-wb-kbh > .ft-ico { width: 20px; height: 20px; color: var(--pb-600); flex: none; }
.ft-wb-kbh > span { display: flex; flex-direction: column; } .ft-wb-kbh b { font-weight: 600; } .ft-wb-kbh small { font-size: 11.5px; color: var(--pa-text); }
.ft-wb-kbh .ft-chip { margin-left: auto; font-style: normal; }
.ft-wb-dr { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 8px 0; border-top: 1px solid var(--pa-line); font-size: 12.5px; }
.ft-wb-dr.is-h { font-size: 11.5px; font-weight: 600; color: var(--pa-text); }
.ft-wb-dr > span:first-child { display: flex; align-items: center; gap: 8px; } .ft-wb-dr .ft-ico { width: 16px; height: 16px; color: #b42318; }
.ft-wb-dr .ft-mc-cb .ft-ico { color: #fff; width: 11px; height: 11px; }
.ft-wb-kb .ft-dlg-foot { flex-wrap: wrap; margin-top: 10px; }
.ft-wb-ib { display: grid; grid-template-columns: .9fr 1.1fr; gap: 12px; max-width: 520px; }
.ft-wb-ir { display: flex; flex-direction: column; margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; font-size: 12px; }
.ft-wb-ir.is-on { background: #eff7ff; } .ft-wb-ir b { font-weight: 600; } .ft-wb-ir small { color: var(--pa-text); font-size: 11.5px; }
.ft-wb-ibd { padding-left: 12px; border-left: 1px solid var(--pa-line); }
.ft-wb-ibd .ft-wb-q { background: var(--pa-blue); }
.ft-mc-b.is-warn { background: #ffedd5; color: #9a3412; }
.ft-dlg-foot.is-left { justify-content: flex-start; margin: 4px 0 12px; }
.ft-wb-base { padding-top: 10px; border-top: 1px solid var(--pa-line); }
@media (max-width: 560px) {
  .ft-wb-nav > span { display: none; }
  .ft-wb-row { grid-template-columns: 1fr; gap: 0; }
  .ft-wb-hd { gap: 6px; } .ft-wb-hd strong { font-size: 14px; } .ft-wb-hd .ft-mc-btns { gap: 6px; } .ft-wb-hd .gbl-pa-btn { padding: 0 9px; }
  .ft-wb-ib { grid-template-columns: 1fr; } .ft-wb-ibd { padding-left: 0; border-left: 0; }
  .ft-wb-hero .ft-wb-hero2 { padding: 16px 12px; }
}
/* phones: the builder fits the frame without scrolling (the header's Publish and the tabs stay in view) */
@media (max-width: 560px) {
  .ft-wb-hero .ft-wb-dom, .ft-wb-hero .ft-wb-lg, .ft-wb-hero .ft-wb-secs > :nth-child(n+3), .ft-wb-hero .ft-wb-sec small { display: none; }
  .ft-wb-hero .ft-wb-site .ft-wb-portal { display: none; }
}
.ft-wb-fact span { min-width: 0; overflow-wrap: anywhere; text-align: right; }
@media (max-width: 560px) { .ft-wb-hero .ft-wb-site .ft-wb-k { display: none; } }
/* Integrations: the homepage orbit as the hero scene (the scene root is the .hx-orbit, see integrations-hero.html) */
.ft-hero .hx-hero-stage:has(.ft-in-hero) { align-self: center; padding: 20px 0 64px; }
.ft-hero .hx-hero-scene.ft-in-hero { width: 100%; max-width: 470px; margin: 0 auto; }
.ft-in-hero .hx-flow-chip .ft-ico { width: 17px; height: 17px; }
.gbl .hx-orbit-spin > span > .ft-in-word { position: absolute; left: 0; top: 0; width: 112px; height: 54px; margin: -27px 0 0 -56px; display: grid; place-items: center; background: #fff; border-radius: 16px; box-shadow: 0 1px 2px rgba(28, 39, 55, .06), 0 14px 30px -14px rgba(24, 50, 140, .35); font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: #1a82e2; }
.gbl-js .hx-orbit .hx-orbit-spin.is-2 .ft-in-word { rotate: -60deg; transition: rotate 2.2s cubic-bezier(.2, .8, .2, 1) .15s; }
.gbl-js .hx-orbit.is-live .hx-orbit-spin .ft-in-word { rotate: 0deg; }
.hx-orbit-spin > span.is-hot .ft-in-word { animation: hx-logo-hot 1.4s ease-out both; }
.hx-orbit.is-held .hx-orbit-spin > span .ft-in-word { animation: none !important; }
@media (max-width: 768px) { .gbl .hx-orbit-spin > span > .ft-in-word { width: 84px; height: 42px; margin: -21px 0 0 -42px; border-radius: 12px; font-size: 13px; } }
.ft-in-fl { margin: 0 0 6px; font-size: 12.5px; color: var(--pa-text); }
.ft-in-fees .ft-radios { margin-bottom: 12px; }
.ft-in-bankw, .ft-in-dataw { display: grid; gap: 12px; width: 100%; max-width: 460px; }
.ft-in-acct { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 12.5px; }
.ft-in-acct > .ft-ico { flex: none; width: 20px; height: 20px; color: var(--pb-600); }
.ft-in-acct > span { display: flex; flex-direction: column; min-width: 0; } .ft-in-acct b { font-weight: 600; } .ft-in-acct small { font-size: 11.5px; color: var(--pa-text); }
.ft-in-acct .ft-chip { margin-left: auto; font-style: normal; }
.ft-in-dots { margin-left: auto; align-self: center; color: var(--pa-mute); } .ft-in-dots .ft-ico { width: 18px; height: 18px; }
.ft-in-fr.ft-in-st { justify-content: flex-start; gap: 6px; } .ft-in-st .ft-ico { flex: none; width: 16px; height: 16px; color: #047857; }
.ft-in-mn { display: grid; justify-items: start; gap: 2px; width: max-content; margin: 10px 0 0 auto; padding: 6px 0; border-radius: 6px; background: #fff; box-shadow: 0 2px 10px rgba(28, 39, 55, .14); font-size: 12px; } .ft-in-mn span { padding: 4px 14px; }
.ft-in-fr { display: flex; align-items: center; justify-content: space-between; margin: 0; padding-top: 10px; border-top: 1px solid var(--pa-line); font-size: 12.5px; } .ft-in-fr em { font-style: normal; }
.ft-in-rh { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 0; font-size: 13px; } .ft-in-rh b { font-weight: 600; }
.ft-in-rh .gbl-pa-btn { height: 28px; font-size: 12px; } .ft-in-rh .gbl-pa-btn .ft-ico { width: 13px; height: 13px; }
.ft-in-ev { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; font-size: 12.5px; }
.ft-in-ev em { font-style: normal; padding: 6px 8px; border-radius: 8px; background: #eff7ff; color: var(--pb-600); font-weight: 600; font-size: 12px; }
.ft-in-ev > span { display: flex; flex-direction: column; } .ft-in-ev b { font-weight: 600; } .ft-in-ev small { font-size: 11.5px; color: var(--pa-text); }
.ft-in-imp .ft-ml-file > .ft-ico { color: var(--pb-600); } .ft-in-imp .ft-ml-file { margin: 0; }
/* Security (2FA prompt + settings, member permissions, entity history, idle warning, export dialog) */
.ft-sc-top .gbl-pa-acct { margin-left: auto; }
.ft-sc-view { display: flex; flex-direction: column; align-items: center; }
.ft-sc-auth { width: 100%; max-width: 400px; margin-top: 18px; padding: 18px 20px; }
.ft-sc-ah { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 15px; } .ft-sc-ah b { font-weight: 600; }
.ft-sc-ah > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #eff7ff; color: var(--pb-600); } .ft-sc-ah .ft-ico { width: 20px; height: 20px; }
.ft-sc-ah > .ft-sc-at { display: flex; flex-direction: column; gap: 2px; width: auto; height: auto; min-width: 0; border-radius: 0; background: none; color: inherit; place-items: normal; } .ft-sc-at small { font-size: 12px; font-weight: 400; color: var(--pa-text); }
.ft-sc-m { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; padding: 10px 12px; border: 1px solid var(--pa-line); border-radius: 10px; }
.ft-sc-m > span:first-child { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: #f5f7fa; color: var(--pa-text); flex: none; } .ft-sc-m .ft-ico { width: 17px; height: 17px; }
.ft-sc-m > span:last-child { display: flex; flex-direction: column; } .ft-sc-m b { font-size: 13px; font-weight: 600; } .ft-sc-m small { font-size: 11.5px; color: var(--pa-text); }
.ft-sc-code { display: flex; align-items: center; height: 44px; margin: 0 0 12px; padding: 0 14px; border: 1.5px solid var(--pa-blue); border-radius: 8px; font-size: 20px; font-weight: 600; letter-spacing: .35em; font-variant-numeric: tabular-nums; }
.ft-sc-sm { display: block; font-size: 11.5px; font-weight: 400; color: var(--pa-text); }
.ft-sc-perm, .ft-sc-hist { width: 100%; max-width: 480px; padding: 16px 18px; }
.ft-sc-help { margin: -4px 0 10px; font-size: 11.5px; color: var(--pa-text); text-align: center; }
.ft-sc-pt p { display: grid; grid-template-columns: 1fr 56px 56px; align-items: center; margin: 0; padding: 7px 0; border-top: 1px solid var(--pa-line); font-size: 12.5px; }
.ft-sc-pt p.is-h { font-size: 11.5px; font-weight: 600; color: var(--pa-text); }
.ft-sc-pt p > :nth-child(n+2) { justify-self: center; }
.ft-sc-pt .ft-mc-cb .ft-ico { width: 11px; height: 11px; }
.ft-sc-hr { display: grid; grid-template-columns: 1fr 1fr .7fr 1.9fr; gap: 8px; margin: 0; padding: 8px 0; border-top: 1px solid var(--pa-line); font-size: 12px; }
.ft-sc-hr.is-h { font-size: 11.5px; font-weight: 600; color: var(--pa-text); }
.ft-sc-hist .ft-card-h .ft-ico { width: 16px; height: 16px; color: var(--pa-mute); }
.ft-sc-2fa, .ft-sc-pl, .ft-sc-flow, .ft-sc-exp { max-width: 480px; }
.ft-sc-c { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 0; border-top: 1px solid var(--pa-line); }
.ft-sc-c > small { font-size: 12px; color: var(--pa-text); }
.ft-sc-ct { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; font-size: 13px; } .ft-sc-ct b { font-weight: 600; } .ft-sc-ct .ft-ico { width: 18px; height: 18px; color: var(--pb-600); } .ft-sc-ct em { font-style: normal; }
.ft-sc-leg { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 8px; font-size: 11.5px; color: var(--pa-text); }
.ft-sc-leg span { display: inline-flex; align-items: center; gap: 6px; } .ft-sc-leg i { width: 10px; height: 10px; border-radius: 3px; background: #eef1f6; } .ft-sc-leg i.is-w { background: #dcfce7; }
.ft-sc-pr { display: grid; grid-template-columns: 1fr 52px 1.6fr; align-items: center; gap: 8px; margin: 0; padding: 8px 0; border-top: 1px solid var(--pa-line); font-size: 12.5px; }
.ft-sc-pr.is-h { font-size: 11.5px; font-weight: 600; color: var(--pa-text); }
.ft-sc-pr > span:last-child { display: flex; flex-wrap: wrap; gap: 4px; }
.ft-sc-pr em { font-style: normal; padding: 2px 8px; border-radius: 999px; background: #eef1f6; color: #374151; font-size: 11px; font-weight: 600; } .ft-sc-pr em.is-w { background: #dcfce7; color: #166534; }
.ft-sc-pr .gbl-toggle { display: block; transform: scale(.85); transform-origin: left center; }
.ft-sc-fr { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--pa-line); font-size: 12.5px; } .ft-sc-fr:first-child { border-top: 0; padding-top: 0; }
.ft-sc-fi { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #eff7ff; color: var(--pb-600); flex: none; } .ft-sc-fi .ft-ico { width: 18px; height: 18px; }
.ft-sc-fr > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; } .ft-sc-fr b { font-weight: 600; } .ft-sc-fr small { font-size: 11.5px; color: var(--pa-text); }
.ft-sc-fr .ft-chip { margin-left: auto; font-style: normal; white-space: nowrap; }
.ft-sc-sw { display: grid; gap: 14px; width: 100%; max-width: 440px; }
.ft-sc-left { margin: 0 0 10px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ft-sc-rules { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ft-sc-rules li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; } .ft-sc-rules .ft-ico { width: 16px; height: 16px; color: #047857; flex: none; }
.ft-sc-exp .ft-radios li { align-items: flex-start; } .ft-sc-exp .ft-radios i { margin-top: 1px; }
@media (max-width: 560px) {
  .ft-sc-hr { grid-template-columns: 1fr 1.5fr; } .ft-sc-hr > span:nth-child(2), .ft-sc-hr > span:nth-child(3) { display: none; }
  .ft-sc-fr { flex-wrap: wrap; } .ft-sc-fr .ft-chip { margin-left: 46px; }
  .ft-sc-help { display: none; }
}
/* Support & Onboarding (v2-layout/launchpad, the unit importer, the meeting dialog, the header menu) */
.ft-so-view.is-away:not(.is-back) { display: none; }
.ft-so-sub { margin: -8px 0 12px; font-size: 12.5px; color: var(--pa-text); }
.ft-so-grid { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 12px; align-items: start; }
.ft-so-cards { display: grid; gap: 8px; }
.ft-so-c { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 12px; border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(20, 30, 50, .06), 0 0 0 1px var(--pa-line); transition: opacity .3s; }
.ft-so-c > .ft-ico { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--pb-600); }
.ft-so-c > span { display: flex; flex-direction: column; min-width: 0; flex: 1; } .ft-so-c b { font-size: 12.5px; font-weight: 600; } .ft-so-c small { font-size: 11.5px; color: var(--pa-text); }
.ft-so-c > em { flex: none; font-style: normal; }
.ft-so-c.is-done { opacity: .62; } .ft-so-c.is-done > .ft-ico { color: #047857; }
.ft-so-rep { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 12px; }
.ft-so-rep .ft-mc-k { margin: 0; }
.ft-so-who { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; }
.ft-so-av { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #dcebfd; color: var(--pb-600); font-size: 12px; font-weight: 700; flex: none; }
.ft-so-who > span:last-child { display: flex; flex-direction: column; min-width: 0; } .ft-so-who b { font-size: 12.5px; font-weight: 600; } .ft-so-who small { font-size: 11px; color: var(--pa-text); }
.ft-so-rep .gbl-pa-btn { justify-content: center; height: 30px; font-size: 12px; } .ft-so-rep .gbl-pa-btn .ft-ico { width: 14px; height: 14px; }
.ft-so-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.ft-so-col { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; }
.ft-so-col small { font-size: 11.5px; color: var(--pa-text); line-height: 1.6; } .ft-so-cut { min-width: 0; } .ft-so-cut span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-so-tg { display: inline-flex; align-self: flex-start; margin: 0; padding: 2px; border-radius: 8px; background: #eef1f6; font-size: 11px; font-weight: 600; }
.ft-so-tg span { padding: 3px 8px; border-radius: 6px; color: var(--pa-text); } .ft-so-tg span.is-on { background: #fff; color: var(--pb-600); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.ft-so-map { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 0; padding: 7px 9px; border: 1px solid #c9d0db; border-radius: 8px; font-size: 12px; font-weight: 600; }
.ft-so-map .ft-ico { width: 11px; height: 11px; flex: none; }
.ft-so-hero .ft-toast b { margin-right: 4px; }
@media (max-width: 1100px) { .ft-so-grid { grid-template-columns: 1fr; } .ft-so-rep { display: none; } }
@media (max-width: 560px) {
  .ft-so-c small { display: none; }
  .ft-so-cols { grid-template-columns: 1fr 1fr; } .ft-so-cols > :nth-child(3) { display: none; }
  .ft-so-hero .ft-so-cards > :nth-child(2) { display: none; }
}
.ft-so-meet .ft-so-who { margin-bottom: 10px; } .ft-so-meet .ft-so-who b { font-size: 15px; } .ft-so-meet .ft-so-who small { font-size: 12px; }
.ft-so-meet .ft-mb-sn { color: var(--pa-ink); }
.ft-so-cols.is-2 { grid-template-columns: 1fr 1fr; }
.ft-so-foot { margin: 0 0 8px; font-size: 12px; color: var(--pa-text); } .ft-so-foot b { color: var(--pa-ink); font-weight: 600; }
.ft-so-hch { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 15px; } .ft-so-hch b { font-weight: 600; } .ft-so-hch .ft-ico { width: 20px; height: 20px; color: var(--pb-600); }
.ft-so-hcs span { display: flex; align-items: center; gap: 8px; height: 38px; margin-bottom: 12px; padding: 0 12px; border: 1px solid #c9d0db; border-radius: 999px; font-size: 12.5px; color: var(--pa-mute); } .ft-so-hcs { margin: 0; } .ft-so-hcs .ft-ico { width: 14px; height: 14px; }
.ft-so-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ft-so-tiles p { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 10px 12px; border: 1px solid var(--pa-line); border-radius: 10px; font-size: 12.5px; }
.ft-so-tiles .ft-ico { width: 18px; height: 18px; color: var(--pb-600); } .ft-so-tiles b { font-weight: 600; } .ft-so-tiles small { font-size: 11.5px; color: var(--pa-text); }
.ft-so-chatw { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 12px; align-items: start; width: 100%; max-width: 480px; }
.ft-so-menu { padding: 6px; } .ft-so-menu hr { margin: 4px 0; border: 0; border-top: 1px solid var(--pa-line); } .ft-so-menu p.is-dis { color: var(--pa-text); }
.ft-so-menu p { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 10px; border-radius: 6px; font-size: 12.5px; } .ft-so-menu p.is-on { background: #f3f6fb; font-weight: 600; } .ft-so-menu .ft-ico { width: 15px; height: 15px; color: var(--pa-text); }
.ft-so-msg { padding: 12px 14px; }
.ft-so-mh { display: flex; flex-direction: column; margin: 0 0 10px; } .ft-so-mh b { font-size: 13px; font-weight: 600; } .ft-so-mh small { font-size: 11.5px; color: var(--pa-text); }
.ft-so-msg .ft-wb-q { background: var(--pa-blue); }
.ft-so-mi { display: flex; align-items: center; justify-content: space-between; margin: 10px 0 0; padding: 8px 12px; border: 1px solid #c9d0db; border-radius: 999px; font-size: 12px; color: var(--pa-mute); } .ft-so-mi .ft-ico { width: 15px; height: 15px; color: var(--pa-blue); }
.ft-so-st { max-width: 420px; }
.ft-so-sth { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; background: #ecfdf5; color: #065f46; font-size: 13.5px; } .ft-so-sth b { font-weight: 600; } .ft-so-sth .ft-ico { width: 18px; height: 18px; }
.ft-so-sr { display: flex; justify-content: space-between; margin: 0; padding: 9px 2px; border-top: 1px solid var(--pa-line); font-size: 12.5px; } .ft-so-sr em { font-style: normal; font-weight: 600; color: #047857; }
.ft-so-su { margin: 6px 0 0; font-size: 11.5px; color: var(--pa-text); }
@media (max-width: 560px) { .ft-so-chatw { grid-template-columns: 1fr; } .ft-so-tiles { grid-template-columns: 1fr; } }
.ft-so-hero .ft-so-c small { display: none; }
.ft-so-hero .ft-so-c { align-items: center; } .ft-so-hero .ft-so-c > .ft-ico { margin-top: 0; }
.ft-so-hero .ft-so-grid { grid-template-columns: minmax(0, 1fr) 180px; }
.ft-so-c > i { flex: none; display: flex; font-style: normal; } .ft-so-c > i .ft-ico { width: 18px; height: 18px; color: var(--pb-600); }
.ft-so-c .ft-so-i2, .ft-so-c.is-done .ft-so-i1 { display: none; } .ft-so-c.is-done .ft-so-i2 { display: flex; } .ft-so-c.is-done .ft-so-i2 .ft-ico { color: #047857; }
.ft-ml-opts2 { margin: 2px 0 0; font-size: 12px; color: var(--pa-text); }
.ft-ml-sel.is-opt { border-top: 0; padding: 3px 0; color: var(--pa-text); } .ft-ml-sel.is-opt + .ft-ml-sel:not(.is-opt) { margin-top: 6px; }
.ft-in-fl b { color: var(--pa-ink); font-weight: 600; }
.ft-chip.is-warn { background: #fef3c7; color: #92400e; }
.ft-in-acct.is-add { margin: 0; padding-top: 10px; border-top: 1px solid var(--pa-line); color: var(--pa-blue); } .ft-in-acct.is-add b { font-weight: 600; }
.ft-in-g { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--pa-line); color: #4285f4; font-size: 11px; font-weight: 700; }
/* alignment rule (Session 4): small icons beside two-line text sit on the first line */
.ft-in-acct, .ft-ml-file, .ft-so-c, .ft-so-hero .ft-so-c, .ft-so-map, .ft-sc-ct { align-items: flex-start; }
.ft-in-acct > .ft-ico, .ft-ml-file > .ft-ico:first-child { margin-top: 0; }
.ft-in-acct > .ft-ico { margin-top: -1px; } .ft-ml-file > .ft-ico:first-child { margin-top: -2px; }
.ft-so-c > i { margin-top: 0; } .ft-so-hero .ft-so-c > .ft-ico { margin-top: 0; }
.ft-so-map .ft-ico { margin-top: 3px; } .ft-sc-ct .ft-ico { margin-top: -1px; }
.ft-sc-leg span { align-items: flex-start; } .ft-sc-leg i { margin-top: 3px; flex: none; }
.ft-so-c > .ft-chip, .ft-in-acct > .ft-chip { align-self: center; }
.ft-mb-sub > .gbl-toggle { flex: none; margin-top: -1px; }
.ft-mb-rad.is-off2 i { border-width: 1.5px; border-color: #9aa4b5; }
.ft-mb-mn { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--pa-text); font-weight: 600; } .ft-mb-mn .ft-ico { width: 13px; height: 13px; }
.ft-mb-back { justify-content: flex-start; }
.ft-mb-by small .ft-ico { width: 11px; height: 11px; vertical-align: -1px; margin-left: 2px; }
.ft-mb-files .ft-mb-by > .ft-ico + b ~ .ft-ico { width: 13px; height: 13px; color: var(--pa-mute); }
.ft-mb-tg .ft-ico { flex: none; width: 14px; height: 14px; color: var(--pa-mute); }
.ft-mb-unpin { margin-left: 10px; font-style: normal; font-weight: 600; color: var(--pa-blue); }
@media (max-width: 560px) { .ft-mb-mn { display: none; } }
.ft-mb-tg.is-dis { opacity: .5; }
.ft-ml-b { display: grid; grid-template-columns: 1.2fr .6fr .6fr 1.1fr .9fr; gap: 8px; align-items: center; margin: 0; padding: 8px 0; border-bottom: 1px solid var(--pa-line); font-size: 12px; }
.ft-ml-b:last-child { border-bottom: 0; } .ft-ml-b.is-h { font-size: 11px; font-weight: 600; color: var(--pa-text); } .ft-ml-b b { font-weight: 600; }
.ft-ml-b > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-ml-cxl.is-done { color: var(--pa-text); font-weight: 400; font-size: 11px; }
.ft-ml-cx .ft-ml-r { grid-template-columns: 1fr auto 110px; }
@media (max-width: 1100px) { .ft-ml-hero .ft-tabs span:nth-child(4) { display: none; } }
@media (max-width: 560px) { .ft-ml-b { grid-template-columns: 1.3fr .6fr .9fr; } .ft-ml-b > span:nth-child(3), .ft-ml-b > span:nth-child(4) { display: none; } }
.ft-sc-hr { grid-template-columns: .9fr .9fr .6fr .6fr 1.8fr; }
.ft-sc-hr small { display: block; font-size: 11px; color: var(--pa-text); }
.ft-sc-pr { grid-template-columns: 1fr 52px 1.6fr 36px; }
.ft-sc-intro { margin: 0 0 8px; font-size: 11.5px; color: var(--pa-text); }
.ft-sc-c > small b { color: var(--pa-ink); font-weight: 600; }
@media (max-width: 560px) { .ft-sc-hr > span:nth-child(4) { display: none; } .ft-sc-pr { grid-template-columns: 1fr 44px 1.4fr; } .ft-sc-pr > span:nth-child(4) { display: none; } }
.ft-wb-logo.is-img { width: 30px; height: 30px; border-radius: 8px; font-size: 11px; }
.ft-wb-d { margin: 4px 14px 0; font-size: 11.5px; color: var(--pa-text); }
.ft-wb-mng { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 0; }
.ft-wb-mng .gbl-pa-btn { height: 28px; font-size: 12px; } .ft-wb-mng .gbl-pa-btn .ft-ico { width: 13px; height: 13px; }
.ft-wb-empty { margin: 6px 0 0; font-size: 11.5px; color: var(--pa-text); }
.ft-wb-acc { display: grid; gap: 4px; margin: 6px 0 0; padding: 0; list-style: none; }
.ft-wb-acc li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--pa-line); border-radius: 8px; font-size: 12px; font-weight: 600; }
.ft-wb-acc .ft-ico { width: 14px; height: 14px; color: #2e7d5b; } .ft-wb-acc .ft-ico:last-child { margin-left: auto; width: 11px; height: 11px; color: var(--pa-text); }
.ft-wb-dim { position: absolute; inset: 0; z-index: 2; background: rgba(15, 23, 42, .35); backdrop-filter: blur(2px); }
.ft-wb-chat.is-panel { left: 0; right: 0; bottom: auto; top: 50%; margin: -95px auto 0; width: min(360px, calc(100% - 24px)); z-index: 3; }
.ft-wb-chat.is-panel .ft-wb-ch { justify-content: space-between; } .ft-wb-chat.is-panel .ft-wb-ch .ft-ico { width: 14px; height: 14px; color: var(--pa-text); }
.ft-wb-bdh { display: flex; flex-direction: column; margin: 0 0 8px; } .ft-wb-bdh b { font-size: 13px; font-weight: 600; } .ft-wb-bdh small { font-size: 11.5px; color: var(--pa-text); }
.ft-wb-base.is-top { padding: 0 0 10px; margin-bottom: 12px; border-top: 0; border-bottom: 1px solid var(--pa-line); }
.ft-wb-dr > .ft-ico { width: 16px; height: 16px; color: var(--pa-text); }
.ft-wb-dr { display: grid; grid-template-columns: 1fr 60px 20px; } .ft-wb-dr > :nth-child(2) { justify-self: center; }
.ft-wb-ir b { display: flex; justify-content: space-between; } .ft-wb-ir b em { font-style: normal; font-weight: 400; font-size: 11px; color: var(--pa-text); }
.ft-wb-who { display: flex; flex-direction: column; margin: 0 0 8px; } .ft-wb-who b { font-weight: 600; font-size: 13px; } .ft-wb-who small { font-size: 11.5px; color: var(--pa-text); }
.ft-wb-au { margin: 6px 0 3px; font-size: 11px; font-weight: 600; color: var(--pa-text); } .ft-wb-au + .ft-wb-q { margin-top: 0; }
.ft-wb-stc { margin: 10px 0; padding: 8px 10px; border: 1px solid #fed7aa; border-radius: 8px; background: #fff7ed; font-size: 12px; }
.ft-wb-stc b { display: block; margin-bottom: 4px; color: #9a3412; font-weight: 600; } .ft-wb-stc p { display: flex; gap: 8px; margin: 0; } .ft-wb-stc small { width: 52px; color: var(--pa-text); }
.ft-mc-tiles p b { display: block; } .ft-mc-tiles p em { display: block; font-style: normal; font-size: 11px; font-weight: 600; color: var(--pa-blue); }
.ft-mc-sel { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 2px 8px; border-radius: 999px; background: #eff7ff; color: var(--pb-600); font-style: normal; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ft-mc-sel .ft-ico { width: 13px; height: 13px; } .ft-mc-sel > span { display: inline-flex; align-items: center; gap: 4px; }
.ft-mc-wait:not(.is-ok) { opacity: .5; }
.ft-mc-prog .ft-mc-hint { margin: 8px 0 0; }
.ft-mc-lt .gbl-pa-btn { height: 28px; font-size: 12px; }
.ft-mc-tagin { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 6px; border: 1px solid #c9d0db; border-radius: 8px; font-size: 12px; color: var(--pa-mute); white-space: nowrap; }
.ft-mc-filt { align-items: center; } .ft-mc-filt > .ft-mc-sel { margin-left: 0; }
.ft-mb-tb > .ft-ico:first-child { width: 13px; height: 13px; }
@media (max-width: 560px) { .ft-mc-tagin { display: none; } }
.ft-so-col > .ft-chip { align-self: flex-start; font-style: normal; } .ft-so-meet .ft-so-who b { line-height: 1.35; }
.ft-sc-pr { grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1.6fr) 36px; } .ft-sc-pr > span { min-width: 0; }
.ft-sc-hr { grid-template-columns: minmax(0, .9fr) minmax(0, .9fr) minmax(0, .6fr) minmax(0, .6fr) minmax(0, 1.8fr); } .ft-sc-hr > span { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .ft-sc-pr { grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1.4fr); } .ft-sc-hr { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); } }
.ft-mb-by, .ft-wb-kbh, .ft-wb-sw4 li { align-items: flex-start; }
.ft-mb-by > .ft-ico { margin-top: -1px; } .ft-wb-kbh > .ft-ico { margin-top: 1px; } .ft-wb-sw4 .gbl-toggle { margin-top: -1px; }
.ft-mb-by small .ft-ico { vertical-align: -2px; }
.ft-wb-kbh .ft-chip { align-self: center; }
/* Communications animation polish: one-line Mail Room stepper, card-level scrims, pin drag travels, board header + post meta stay on one line, Penny send arrow pinned right */
.ft-ml-hero .ft-stepper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 2px 0 12px; }
.ft-ml-hero .ft-stepper li { position: relative; flex-direction: column; gap: 5px; padding: 0 4px; text-align: center; white-space: normal; font-size: 11px; line-height: 1.25; }
.ft-ml-hero .ft-stepper li::before { position: relative; z-index: 1; width: 20px; height: 20px; font-size: 11px; }
.ft-ml-hero .ft-stepper li:not(:last-child)::after { content: ""; position: absolute; top: 10px; left: calc(50% + 16px); right: calc(-50% + 16px); height: 1px; background: #dfe3ea; }
@media (max-width: 560px) { .ft-ml-hero .ft-stepper li:not(.is-on) { display: flex; } }
.ft-ml-cx .ft-scrim { border-radius: inherit; }
.ft-mb-pin .ft-mb-tcard.is-drag { position: relative; z-index: 3; transition: opacity .25s, box-shadow .25s, transform .8s cubic-bezier(.4, 0, .2, 1); }
.ft-mb-pin .ft-mb-tcard.is-lift { opacity: 1; border-color: var(--pa-blue); background: #f5f9ff; transform: translateY(-61px); }
@media (max-width: 340px) { .ft-mb-pin .ft-mb-tcard.is-lift { transform: translateY(-70px); } }
@media (min-width: 561px) { .ft-mb-by small { display: inline-flex; align-items: center; gap: 3px; } }
.ft-wb-in > .ft-ico { margin-left: auto; flex: none; }
.ft-mb-hero .ft-mb-th { flex-wrap: wrap; row-gap: 8px; } .ft-mb-hero .ft-mb-th strong { font-size: 17px; }
.ft-mb-hero .ft-mb-th .ft-mb-acts { gap: 6px; } .ft-mb-hero .ft-mb-th .gbl-pa-btn { padding: 0 9px; font-size: 12px; }
@media (max-width: 340px) { .ft-mc-card .ft-card-h { gap: 6px; } .ft-mc-card .ft-mc-btns .gbl-pa-btn { padding: 0 8px; font-size: 11.5px; } }
.ft-ml-hero .gbl-pa-page { container-type: inline-size; }
@container (max-width: 400px) { .ft-ml-hero .ft-tabs span:nth-child(4) { display: none; } }
@media (max-width: 340px) { .ft-wb-hero .ft-tabs span:nth-child(3) { display: none; } }
@media (max-width: 380px) { .ft-ml-cdlg .ft-dlg-foot { flex-direction: column-reverse; align-items: stretch; gap: 6px; } .ft-ml-cdlg .ft-dlg-foot .gbl-pa-btn { justify-content: center; margin: 0; } }
@media (max-width: 380px) { .ft-ml-cx .ft-ml-r { grid-template-columns: minmax(0, 1fr) auto 84px; gap: 8px; } .ft-ml-cx .ft-ml-cxl { font-size: 11px; line-height: 1.35; } }
/* `.gbl .gbl-pa label { margin: 0 }` (gable.css) beats every .ft-fld margin inside hero mocks; restore the intended ones */
.gbl .ft-hero-scene .gbl-pa label.ft-fld { margin-bottom: 10px; }
.gbl .ft-hero-scene .gbl-pa label.ft-fld.is-sm { margin-bottom: 12px; }
.gbl .ft-hero-scene .gbl-pa .ft-vi-card label.ft-fld.is-sm { margin-bottom: 8px; }
.gbl .ft-hero-scene .gbl-pa .ft-vi-card > label.ft-fld.is-sm:last-child, .gbl .ft-hero-scene .gbl-pa .ft-op-card label.ft-fld { margin-bottom: 0; }
@media (max-width: 560px) { .gbl .ft-hero-scene .gbl-pa .ft-dlg label.ft-fld.is-sm { margin-bottom: 8px; } .gbl .ft-hero-scene .gbl-pa .ft-ap-dlg label.ft-fld { margin-bottom: 6px; } }
.ft-mc-prog .ft-mc-pbtn { margin-top: 12px; }
/* Integrations animation polish: in the two-column hero the stage ends at the card's clipped right edge, so inset the
   orbit (outer-ring tiles overhang its box); on phones the event chip has no room between the Lob/Twilio row and the
   Calendar tile, so it drops below the ring (home2.css does the same for the homepage orbit at <=374) */
@media (min-width: 1101px) { .ft-hero .hx-hero-stage:has(.ft-in-hero) { padding-right: 48px; } }
@media (max-width: 560px) { .ft-in-hero .hx-flow-chip { top: calc(100% + 24px); } .ft-hero .hx-hero-stage:has(.ft-in-hero) { padding-bottom: 88px; } }
/* 1101-1240: the inset orbit is ~380-470px wide, too small for full-size tiles (crowded core, the WAB tile met the hero
   copy); use the phone tile sizes from home2.css's <=768 block */
@media (min-width: 1101px) and (max-width: 1240px) {
  .gbl .ft-in-hero .hx-orbit-spin img { width: 84px; height: 42px; margin: -21px 0 0 -42px; padding: 9px 11px; border-radius: 12px; }
  .gbl .ft-in-hero .hx-orbit-spin img.is-wide { width: 112px; margin-left: -56px; padding: 11px 12px; }
  .gbl .ft-in-hero .hx-orbit-spin img.is-lob { padding: 11px 18px; }
  .gbl .ft-in-hero .hx-orbit-spin > span > .ft-in-word { width: 84px; height: 42px; margin: -21px 0 0 -42px; border-radius: 12px; font-size: 13px; }
  .ft-in-hero .hx-orbit-core { width: 100px; height: 100px; margin: -50px 0 0 -50px; }
  .ft-in-hero .hx-orbit-core svg { width: 70px; height: 26px; }
  .ft-in-hero .hx-flow-chip { top: 76.5%; padding: 6px 11px 6px 6px; gap: 8px; } .ft-in-hero .hx-flow-chip > i { width: 26px; height: 26px; }
}
/* Integrations bank card: the row menu opens from the ⋯ (pressed; it sits on the status line, like the table row's
   status + menu cells) into the card's bottom padding, right-aligned under it, after the card lands */
.ft-in-wab { padding-bottom: 72px; }
.ft-in-wab .ft-in-st .ft-in-dots { margin: -4px 0 -4px auto; }
.ft-in-wab .ft-in-dots { position: relative; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #eef1f6; color: var(--pa-ink); }
.ft-in-wab .ft-in-mn { position: absolute; z-index: 2; top: calc(100% + 4px); right: 0; margin: 0; color: var(--pa-ink); white-space: nowrap; transform-origin: top right; }
.gbl-js .ft-vis-replica .ft-in-wab .ft-in-mn { transition: opacity .25s ease 1.3s, transform .3s var(--ease) 1.3s; }
.gbl-js .ft-vis-replica .ft-in-wab .ft-in-dots { transition: background-color .2s ease 1.1s, color .2s ease 1.1s; }
.gbl-js .ft-vis-replica:not(.is-in) .ft-in-wab .ft-in-mn { opacity: 0; transform: translateY(-4px) scale(.96); }
.gbl-js .ft-vis-replica:not(.is-in) .ft-in-wab .ft-in-dots { background: transparent; color: var(--pa-mute); }
.ft-in-bank .ft-in-acct .ft-chip { white-space: nowrap; }
/* Security: violation history dialog, readable audit rows (avatar, action chip, before → after) */
.ft-sc-hist { max-width: 520px; }
.ft-sc-hist .ft-card-h { align-items: flex-start; }
.ft-sc-hist .ft-card-h > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ft-sc-hist .ft-card-h small { font-size: 12px; color: var(--pa-text); }
.ft-sc-hr { grid-template-columns: 84px 116px 64px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 0; }
.ft-sc-hr > span { overflow-wrap: normal; }
.ft-sc-hr:not(.is-h) > span:first-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ft-sc-hr > span:nth-child(2) { display: flex; align-items: center; gap: 7px; }
.ft-sc-hr > span:nth-child(2) i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #eff7ff; color: var(--pb-600); font-style: normal; font-size: 9.5px; font-weight: 700; flex: none; }
.ft-sc-hr .ft-chip { height: 20px; padding: 0 8px; font-size: 11px; font-style: normal; }
.ft-sc-hr:not(.is-h) > span:last-child { display: flex; flex-wrap: wrap; align-items: center; column-gap: 5px; row-gap: 1px; }
.ft-sc-hr > span:last-child small { flex-basis: 100%; font-size: 11px; color: var(--pa-mute); }
.ft-sc-hr > span:last-child small ~ small { margin-top: 4px; }
.ft-sc-hr > span:last-child s { color: var(--pa-mute); text-decoration: none; }
.ft-sc-hr > span:last-child b { font-weight: 600; }
.ft-sc-hr > span:last-child .ft-ico { width: 12px; height: 12px; color: var(--pa-mute); flex: none; }
.ft-sc-hr > span:last-child .ft-link { flex-basis: 100%; margin-top: 4px; font-size: 12px; }
@media (max-width: 560px) {
  .ft-sc-hr { grid-template-columns: 84px minmax(0, 1fr); }
  .ft-sc-hr > span:nth-child(2), .ft-sc-hr > span:nth-child(3) { display: none; }
  .ft-sc-hr > span:nth-child(4) { display: flex; }
}

/* Hero layout overflows (2026-09-27): six hero/scene mocks stuck out of their cards at 1366 or 320. All scoped to the page prefixes. */
/* Payables: at 1366/1101 the two-column hero leaves the Create Payable dialog ~308px inside, so the file tile beside the fields
   pushed Invoice Amount / Expense category 34px out. Narrow dialog = file tile on top (the ≤560 layout), fields keep two columns. */
.ft-ap-dlg { container-type: inline-size; }
@container (max-width: 380px) {
  .ft-ap-dlg .ft-ap-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ft-ap-dlg .ft-ap-file { flex-direction: row; padding: 8px; }
  .ft-ap-dlg .ft-ap-file .ft-ico { width: 20px; height: 20px; }
  .ft-ap-dlg .ft-rule-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* Unpaid table on phones: the two chips need ~234px, which left the vendor a 0px column (and pushed "Mailed Check Scheduled"
   36px out at 320; ellipsised to ~70px up to 460). Vendor on its own line, chips below (wrapping), labels other than Vendor hidden. */
@container (max-width: 340px) {
  .ft-ap-list .ft-ap-row { display: flex; flex-wrap: wrap; gap: 6px; }
  .ft-ap-list .ft-ap-row > span:first-child { flex-basis: 100%; }
  .ft-ap-list .ft-ap-row.is-head > span:not(:first-child) { display: none; }
}
/* widgets on phones: "Unscheduled" (78-89px) never fits a third of the row and was split mid-word up to ~450px; one widget per row, count beside its label */
@media (max-width: 450px) {
  .ft-ap-widgets { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .ft-ap-widgets span { display: flex; align-items: baseline; gap: 8px; padding: 7px 12px; }
  .ft-ap-widgets b { flex: none; min-width: 14px; }
}
/* Payable Approvers mini: Add New Approval Rule + Cancel + Save Approval Rules need ~390px; at 1101 the card leaves ~300 and
   Save ran 81px out. Narrow card = Cancel/Save wrap to their own right-aligned row (the ≤560 rule, by card width). */
.ft-apr { container-type: inline-size; }
@container (max-width: 370px) {
  .ft-apr .ft-apr-foot { flex-wrap: wrap; gap: 8px; }
  .ft-apr .ft-apr-foot > .ft-btns { margin-left: auto; }
}
/* Violations list: the tabs clip mid-word ("Final No…" at 1366, "Complet…" at 1101, "Notice of Vi…" at 320). Tabs that don't
   fit are dropped whole (widths from the probe: 3 tabs 266px, 4 tabs 348px, 5 tabs 426px). */
.ft-vi-hero .ft-vi-tbl { container-type: inline-size; }
@container (max-width: 425px) { .ft-vi-hero .ft-vi-tbl .ft-tabs span:nth-child(5) { display: none; } }
@container (max-width: 347px) { .ft-vi-hero .ft-vi-tbl .ft-tabs span:nth-child(4) { display: none; } }
@container (max-width: 265px) { .ft-vi-hero .ft-vi-tbl .ft-tabs span:nth-child(3) { display: none; } }
/* phone rows: status chip + unit left the violation title a 4px column; title on its own line, chip + unit below */
@container (max-width: 330px) {
  .ft-vi-hero .ft-vi-row { grid-template-columns: auto minmax(0, 1fr); row-gap: 6px; }
  .ft-vi-hero .ft-vi-row > span:first-child { grid-column: 1 / -1; }
  .ft-vi-hero .ft-vi-row.is-head > span:not(:first-child) { display: none; }
}
/* editor footer: Preview / Cancel / Issue violation need 258px; at 320 (200px) Preview was pushed off the card's left edge.
   Preview gives way (wrapping the row made the card taller, so the smooth scroll to Details was still moving when the
   cursor glided to the Send notifications toggle and the press missed). */
.ft-vi-hero .ft-vi-det { container-type: inline-size; }
@container (max-width: 257px) { .ft-vi-hero .ft-vi-foot .gbl-pa-btn:first-child { display: none; } }
.ft-vi-hero .ft-vi-file b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-vi-hero .ft-vi-file small { flex: none; white-space: nowrap; }
/* Request Forms at 320: Approve/Reject, Mark Completed/Actions and the status menu overran the cards */
@media (max-width: 380px) {
  .ft-rq-hero .ft-rq-dec { flex-direction: column; align-items: stretch; gap: 6px; }
  .ft-rq-hero .ft-rq-dec .ft-btns { display: flex; gap: 8px; }
  .ft-rq-hero .ft-rq-dec .gbl-pa-btn { flex: 1 1 0; justify-content: center; }
  .ft-rq-hero .ft-rq-mfoot { flex-direction: column; gap: 6px; }
  .ft-rq-hero .ft-rq-mfoot .gbl-pa-btn { flex: none; justify-content: center; }
  .ft-rq-hero .ft-rq-menu { left: auto; right: 14px; }
  .ft-rq-hero .ft-rq-mstat .ft-rq-menu { left: 0; right: auto; }
}
/* Treasury: the balance box stretched the card's width, so the bump's scale(1.25) swung the empty box past the card (the digits
   never left it). Shrink-wrap the number; no visual change. */
.ft-bal-head > .ft-bal-amt { align-self: flex-start; }
/* Treasury "Send Payment for Invoice" at 320: Cancel + Confirm & schedule payment (260px) in 224px, Cancel off the left edge */
@media (max-width: 380px) {
  .ft-pay > .ft-dlg-foot { flex-direction: column-reverse; align-items: stretch; gap: 6px; }
  .ft-pay > .ft-dlg-foot .gbl-pa-btn { justify-content: center; margin: 0; }
}
/* Bank Integrations (CEO notes 2026-09-30): the Alliance Banking lockbox card (bank-lockbox.html) */
.ft-lbx-lead { margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--pa-ink); }
.ft-lbx-how { margin: 0 0 4px; font-size: 12.5px; color: var(--pa-text); }
.ft-lbx-steps { margin: 0 0 10px; padding-left: 20px; font-size: 12px; line-height: 1.45; color: var(--pa-text); }
.ft-lbx-steps li { margin: 0 0 3px; list-style: decimal; }
.ft-lbx-sw { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0; padding: 8px 0; border-top: 1px solid var(--pa-line); font-size: 13px; font-weight: 600; line-height: 20px; }
.ft-lbx-sw:last-of-type { margin-bottom: 8px; }
.ft-lbx-sw .gbl-toggle { flex: none; }
.ft-lbx .ft-fld > span .ft-ico { width: 16px; height: 16px; color: var(--pa-mute); }
.ft-lbx-addr { margin: 0 0 8px; font-size: 13px; }
.ft-lbx-addr small { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--pa-text); }
.ft-lbx-addr address { font-style: normal; line-height: 1.45; color: var(--pa-ink); }
/* Payables (CEO notes 2026-09-30): Create Payable › Additional Details, "Mail a check" picked on reveal (payables-methods.html) */
.ft-apm-step { margin: -4px 0 10px; font-size: 13px; font-weight: 600; color: var(--pa-ink); }
.ft-apm .ft-radios { gap: 0; margin-bottom: 8px; }
.ft-apm .ft-radios li { padding: 4px 6px; font-size: 12.5px; }
.ft-apm .ft-mail-k { margin-top: 2px; }
.ft-apm-pick i { transition: border-color .2s .5s; } .ft-apm-pick i::after { transition: transform .25s var(--ease) .5s; }
.ft-apm-pick { font-weight: 600; } .ft-apm-pick i { border-color: var(--pa-blue); } .ft-apm-pick i::after { transform: none; }
.gbl-js .ft-vis-replica:not(.is-in) .ft-apm-pick { font-weight: 400; }
.gbl-js .ft-vis-replica:not(.is-in) .ft-apm-pick i { border-color: #9aa4b4; }
.gbl-js .ft-vis-replica:not(.is-in) .ft-apm-pick i::after { transform: scale(0); }
.ft-apm .ft-land > div { transition-delay: .9s; }

/* == lane C-MGT == (Earl's 10-16 review: Management pages only — prefixed or [data-ft="<slug>"]-scoped, never a shared class) */
/* == /lane C-MGT == */

/* ---------- Calendar mocks (ui calendar v2, SD-11302: calendar-page, shared/event-calendar, event dialog,
   reminder / repeat / scope / subscribe dialogs); fictional data. Chip colours = the kit's light-theme families
   (calendar-colors.ts: tint fill, 1px ring, dark ink; dots solid). Prefix ft-cc- (ft-cal- is Amenity's). ---------- */
.ft-cc-hero, .ft-cc-lay, .ft-cc-book, .ft-cc-stack, .ft-cc-dcard { --cc-blue-bg: #eff7ff; --cc-blue-ring: #c1ddfc; --cc-blue-ink: #192852; --cc-blue: #4089f1;
  --cc-purple-bg: #f0f4fd; --cc-purple-ring: #ccd8f9; --cc-purple-ink: #1f1f47; --cc-purple: #707be4;
  --cc-teal-bg: #e4fbf8; --cc-teal-ring: #a5ebe1; --cc-teal-ink: #0b463e; --cc-teal: #14b8a3;
  --cc-green-bg: #edfcf6; --cc-green-ring: #abefd4; --cc-green-ink: #042a23; --cc-green: #19b087;
  --cc-pink-bg: #fdf2f9; --cc-pink-ring: #fbcfec; --cc-pink-ink: #50072a; --cc-pink: #ec48a7; --cc-orange: #ff8f0a; }
.ft-cc-sw { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--cc-blue); }
.ft-cc-sw.is-purple { background: var(--cc-purple); } .ft-cc-sw.is-teal { background: var(--cc-teal); } .ft-cc-sw.is-green { background: var(--cc-green); }
.ft-cc-sw.is-pink { background: var(--cc-pink); } .ft-cc-sw.is-orange { background: var(--cc-orange); }

/* month grid + chips (hero, layers, bookings) */
.ft-cc-dow, .ft-cc-wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ft-cc-dow i { font-style: normal; font-size: 10.5px; color: var(--pa-mute); text-align: center; padding: 5px 0; border-bottom: 1px solid var(--pa-line); }
.ft-cc-wk > span { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 4px 3px 5px; border-right: 1px solid var(--pa-line); border-bottom: 1px solid var(--pa-line); }
.ft-cc-wk > span:last-child { border-right: 0; }
.ft-cc-wk > span > b { align-self: flex-start; min-width: 18px; height: 18px; line-height: 18px; border-radius: 50%; text-align: center; font-size: 10.5px; font-weight: 600; color: var(--pa-ink); }
.ft-cc-wk > span.is-out { background: #f8f9fb; } .ft-cc-wk > span.is-out > b { opacity: .5; }
.ft-cc-wk > span.is-today > b { background: var(--pa-blue); color: #fff; }
.ft-cc-wk > span.is-closed { background: repeating-linear-gradient(135deg, #f1f3f6 0 4px, #fff 4px 8px); }
.ft-cc-wk > span.is-closed small { margin-top: auto; font-size: 9.5px; line-height: 1.2; color: var(--pa-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-cc-ev { display: block; min-width: 0; padding: 2px 5px; border-radius: 4px; font-style: normal; font-size: 10px; font-weight: 600; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--cc-blue-bg); box-shadow: inset 0 0 0 1px var(--cc-blue-ring); color: var(--cc-blue-ink); transition: opacity .35s, transform .35s var(--ease); }
.ft-cc-ev.is-purple { background: var(--cc-purple-bg); box-shadow: inset 0 0 0 1px var(--cc-purple-ring); color: var(--cc-purple-ink); }
.ft-cc-ev.is-teal { background: var(--cc-teal-bg); box-shadow: inset 0 0 0 1px var(--cc-teal-ring); color: var(--cc-teal-ink); }
.ft-cc-ev.is-green { background: var(--cc-green-bg); box-shadow: inset 0 0 0 1px var(--cc-green-ring); color: var(--cc-green-ink); }
.ft-cc-ev.is-pink { background: var(--cc-pink-bg); box-shadow: inset 0 0 0 1px var(--cc-pink-ring); color: var(--cc-pink-ink); }
/* pending booking (is-tentative): striped; is-ok drops the stripes once approved */
.ft-cc-ev.is-tent { background: repeating-linear-gradient(135deg, var(--cc-teal-bg) 0 4px, #fff 4px 8px); }
.ft-cc-ev.is-tent.is-ok { background: var(--cc-teal-bg); transition: background .4s; }
.ft-cc-ev.is-span2 { width: calc(200% + 7px); position: relative; z-index: 1; }
.ft-cc-ev.is-hid { opacity: 0; transform: scale(.92); }

/* hero: page header, card head, grid */
.ft-cc-hero .ft-cc-page { display: flex; flex-direction: column; }
.ft-cc-hero .ft-toast { z-index: 8; }
.ft-cc-scope { container: ftcc / inline-size; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ft-cc-hero .ft-cc-card { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ft-cc-hero .ft-cc-month { flex: 1; min-height: 0; display: grid; grid-template-rows: auto repeat(5, minmax(0, 1fr)); }
.ft-cc-ph { margin: 4px 0 10px; }
.ft-cc-ph strong { font-size: 18px; }
.ft-cc-hbtns { display: flex; gap: 6px; }
.ft-cc-hbtns .gbl-pa-btn { height: 30px; padding: 0 10px; font-size: 12px; }
.ft-cc-print i { display: inline-flex; padding-left: 8px; margin-left: 2px; border-left: 1px solid var(--pa-line); font-style: normal; }
.ft-cc-print i .ft-ico { width: 12px; height: 12px; }
.ft-cc-card { overflow: hidden; }
.ft-cc-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 10px; padding: 10px 12px; border-bottom: 1px solid var(--pa-line); }
.ft-cc-head > strong { font-size: 15px; font-weight: 600; color: var(--pa-ink); }
.ft-cc-tile { grid-row: span 2; width: 44px; border: 1px solid var(--pa-line); border-radius: 7px; overflow: hidden; text-align: center; }
.ft-cc-tile small { display: block; font-size: 9px; font-weight: 600; color: var(--pa-mute); background: #f6f7f9; padding: 2px 0 1px; }
.ft-cc-tile b { display: block; font-size: 15px; font-weight: 600; color: var(--pa-blue); padding: 0 0 2px; }
.ft-cc-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ft-cc-railbtn { height: 26px; padding: 0 8px; font-size: 11px; }
.ft-cc-railbtn .ft-ico { width: 13px; height: 13px; }
.ft-cc-seg, .ft-cc-nav { display: inline-flex; border-radius: 8px; font-size: 11px; font-weight: 600; color: var(--pa-text); }
.ft-cc-seg { background: #f2f4f7; padding: 2px; }
.ft-cc-seg i, .ft-cc-nav i { font-style: normal; display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 6px; }
.ft-cc-seg i.is-on { background: #fff; color: var(--pa-ink); box-shadow: 0 1px 2px rgba(20, 30, 50, .12); }
.ft-cc-nav { border: 1px solid var(--pa-line); }
.ft-cc-nav i + i { border-left: 1px solid var(--pa-line); border-radius: 0; }
.ft-cc-nav .ft-ico { width: 11px; height: 11px; }
.ft-cc-hero .ft-cc-wk > span { overflow: visible; }
.ft-cc-hero .ft-cc-wk > span:not(.is-closed) { overflow: hidden; }
.ft-cc-hero .ft-cc-wk > span:has(.is-span2) { overflow: visible; z-index: 1; }
.ft-cc-new { box-shadow: inset 0 0 0 1px var(--cc-blue-ring), 0 0 0 2px rgba(64, 137, 241, .25); }
@container ftcc (max-width: 520px) {
  .ft-cc-print, .ft-cc-seg i:nth-child(n+3) { display: none; }
}
@container ftcc (max-width: 400px) {
  .ft-cc-seg, .ft-cc-railbtn, .ft-cc-x { display: none; }
  .ft-cc-hero .ft-cc-wk > span { padding: 3px 2px; }
  .ft-cc-ev { font-size: 9px; padding: 1px 3px; }
}

/* hero: event dialog (edit mode) */
.ft-cc-dlg { width: min(400px, calc(100% - 24px)); top: 44px; padding: 14px 16px 12px; }
.ft-cc-dlg .ft-fld > span { height: 34px; font-size: 12.5px; }
.ft-cc-dlg .ft-fld small em { color: #d02533; font-style: normal; }
.ft-cc-title > span { font-size: 15px !important; font-weight: 600; }
.ft-cc-row { border-top: 1px solid var(--pa-line); }
.ft-cc-rh { display: flex; align-items: center; gap: 10px; padding: 8px 2px; font-size: 12.5px; }
.ft-cc-rh > .ft-ico { width: 18px; height: 18px; color: var(--pa-mute); }
.ft-cc-rh > span { display: flex; flex-direction: column; min-width: 0; }
.ft-cc-rh b { font-weight: 600; color: var(--pa-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-cc-rh small { font-size: 11px; color: var(--pa-mute); }
.ft-cc-opt b { font-weight: 400; color: var(--pa-mute); }
.ft-cc-rh .ft-cc-sw { width: 14px; height: 14px; margin: 0 2px; }
.ft-cc-rd { padding: 0 2px 8px 30px; }
.ft-cc-r1:not(.is-open) .ft-cc-rd, .ft-cc-r1.is-shut .ft-cc-rd, .ft-cc-r2:not(.is-open) .ft-cc-rd { display: none; }
.ft-cc-adl { display: inline-flex; align-items: center; gap: 7px; padding: 2px 4px 2px 0; border-radius: 6px; }
.ft-cc-pick.is-sel:not(.is-done) { background: rgba(42, 107, 230, .1); box-shadow: inset 0 0 0 1.5px rgba(42, 107, 230, .45); }
.ft-cc-pick.is-pressed { transform: none; filter: none; }
.ft-cc-rhint { margin: 4px 0 0; font-size: 10px; }
.ft-cc-sub-btn + .ft-cc-rhint + .ft-cc-sub-btn { margin-top: 10px; }
.ft-cc-cols { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 8px; }
.ft-cc-cols.is-2 { grid-template-columns: 1fr 1fr; }
.ft-cc-cols .ft-fld { margin-bottom: 6px; }
.ft-cc-cols .ft-fld > span { padding: 0 9px; }
.ft-cc-allday { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; font-size: 12px; color: var(--pa-ink); }
.ft-cc-allday em { margin-left: auto; font-style: normal; font-weight: 600; color: var(--pa-blue); }
.ft-cc-cb, .ft-cc-box { display: inline-block; flex: none; width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid #9aa4b4; background: #fff; position: relative; transition: background .2s, border-color .2s; }
.ft-cc-box.is-on { background: var(--pa-blue); border-color: var(--pa-blue); }
.ft-cc-box.is-on::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ft-cc-box.is-on.is-off2 { background: #fff; border-color: #9aa4b4; }
.ft-cc-box.is-on.is-off2::after { display: none; }
.ft-cc-sel { position: relative; }
.ft-cc-sel .ft-fld { margin-bottom: 0; }
.ft-cc-menu { position: absolute; z-index: 3; left: 0; right: 0; top: calc(100% + 4px); padding: 4px; background: #fff; border-radius: 10px; box-shadow: 0 0 0 1px var(--pa-line), 0 16px 32px -12px rgba(14, 18, 27, .35); font-size: 12px; }
.ft-cc-menu li { padding: 5px 9px; border-radius: 6px; color: var(--pa-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-cc-menu li.is-cur { background: #f3f6fb; font-weight: 600; }
.ft-cc-menu li.is-pressed { background: var(--cc-blue-bg); transform: none; }
.ft-cc-hint { margin: 0 0 6px; font-size: 11px; line-height: 1.35; color: var(--pa-mute); }
.ft-cc-k { margin: 2px 0 4px; font-size: 12px; font-weight: 600; color: var(--pa-text); }
.ft-cc-rem { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 18px; align-items: center; gap: 6px; margin-bottom: 5px; }
.ft-cc-rem > i { display: flex; justify-content: center; } .ft-cc-rem > i .ft-ico { width: 13px; height: 13px; color: var(--pa-mute); }
.ft-cc-in { display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 30px; padding: 0 9px; border: 1px solid #c9d0db; border-radius: 8px; font-size: 12px; color: var(--pa-ink); background: #fff; min-width: 0; white-space: nowrap; }
.ft-cc-in i { font-style: normal; }
.ft-cc-in .ft-ico { width: 12px; height: 12px; color: var(--pa-mute); flex: none; }
.ft-cc-link { display: inline-block; margin: 0 0 4px; font-size: 12px; font-weight: 600; color: var(--pa-blue); }
.ft-cc-dlg .ft-dlg-foot { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--pa-line); }
.ft-float-cc { left: 36px; bottom: 34px; max-width: 290px; }
.ft-float-cc .gbl-float-ico { background: var(--pb-50); color: var(--pb-700); }
@media (max-width: 1280px) and (min-width: 1101px) { .ft-float-cc { left: 16px; } }
@container ftcc (max-width: 460px) { .ft-cc-opt { display: none; } }

/* detail visuals: dialog cards (repeat, remind, subscribe), layers, bookings */
.ft-cc-dcard { padding: 16px 18px; font-size: 12.5px; }
.ft-cc-dt { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--pa-ink); }
.ft-cc-dh { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; }
.ft-cc-dh b { display: block; font-size: 15px; color: var(--pa-ink); }
.ft-cc-dh small { display: block; font-size: 12px; color: var(--pa-mute); line-height: 1.4; }
.ft-cc-dico { flex: none; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--pb-50); color: var(--pb-700); }
.ft-cc-dico .ft-ico { width: 17px; height: 17px; }
.ft-cc-fl { margin: 0 0 10px; }
.ft-cc-fl > small { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--pa-text); }
.ft-cc-fl > small em { font-style: normal; font-weight: 400; color: var(--pa-mute); }
.ft-cc-pair { display: flex; gap: 8px; }
.ft-cc-pair .ft-cc-in { flex: 1; } .ft-cc-pair .ft-cc-in.is-num { flex: 0 0 52px; }
.ft-cc-pair.is-link .gbl-pa-btn { height: 30px; font-size: 12px; }
.ft-cc-in.is-suf { width: 120px; } .ft-cc-in.is-suf em { font-style: normal; color: var(--pa-mute); }
.ft-cc-in.is-ro { background: #f8f9fb; color: var(--pa-text); overflow: hidden; text-overflow: ellipsis; display: block; line-height: 28px; }
.ft-cc-radios { margin-bottom: 0; }
.ft-cc-radios li { padding: 4px 6px; font-size: 12.5px; }
.ft-cc-stack { position: relative; width: 100%; max-width: 480px; }
.ft-cc-stack > .ft-cc-dcard { max-width: 300px; }
/* the second dialog opens over the first one's lower-right corner, clear of its labels */
.ft-cc-stack > .ft-cc-dcard + .ft-cc-dcard { position: relative; z-index: 1; max-width: 270px; margin: -84px 0 0 auto; }
.ft-cc-stack.is-remind > .ft-cc-view { max-width: 290px; }
.ft-cc-stack.is-remind > .ft-cc-rdlg { max-width: 320px; margin-top: -26px; }
.ft-cc-vtools { display: flex; justify-content: flex-end; gap: 2px; margin: -6px -8px 4px 0; }
.ft-cc-vtools i { width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: var(--pa-text); }
.ft-cc-vtools i .ft-ico { width: 16px; height: 16px; }
.ft-cc-vtools i.is-hot { background: var(--pb-50); color: var(--pb-700); }
.ft-cc-vt { display: flex; align-items: center; gap: 9px; margin: 0 0 8px; font-size: 16px; font-weight: 600; color: var(--pa-ink); }
.ft-cc-vt .ft-cc-sw { width: 13px; height: 13px; border-radius: 4px; }
.ft-cc-vr { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 12.5px; color: var(--pa-ink); }
.ft-cc-vr > .ft-ico { width: 17px; height: 17px; color: var(--pa-mute); }
.ft-cc-checks { display: flex; gap: 18px; margin: 0; font-size: 12.5px; }
.ft-cc-checks span { display: inline-flex; align-items: center; gap: 7px; }
.ft-cc-ta { margin: 0 0 6px; padding: 8px 10px; min-height: 52px; border: 1px solid #c9d0db; border-radius: 8px; font-size: 12px; line-height: 1.45; color: var(--pa-ink); }
.ft-cc-subdlg { max-width: 430px; }
.ft-cc-facts { margin: 0 0 10px; border: 1px solid var(--pa-line); border-radius: 10px; }
.ft-cc-facts div { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 8px; padding: 8px 10px; }
.ft-cc-facts div + div { border-top: 1px solid var(--pa-line); }
.ft-cc-facts dt { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12px; color: var(--pa-ink); }
.ft-cc-facts dt .ft-ico { width: 14px; height: 14px; color: var(--pa-text); }
.ft-cc-facts dd { margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--pa-text); }
.ft-cc-bfoot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.ft-cc-bbtns { display: flex; gap: 6px; }
.ft-cc-bfoot .gbl-pa-btn { height: 30px; font-size: 12px; }
.gbl-pa-btn.is-err { background: #fdecec; border-color: #fbd0d0; color: #b42318; }
.ft-cc-open { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--pa-blue); }
.ft-cc-open .ft-ico { width: 13px; height: 13px; }

.ft-cc-lay { max-width: 560px; padding: 0; display: grid; grid-template-columns: 178px minmax(0, 1fr); overflow: hidden; }
.ft-cc-rail { padding: 14px 12px; border-right: 1px solid var(--pa-line); display: flex; flex-direction: column; gap: 1px; }
.ft-cc-rk { display: flex; align-items: center; justify-content: space-between; margin: 8px 0 3px; font-size: 10.5px; font-weight: 600; color: var(--pa-mute); }
.ft-cc-rk:first-child { margin-top: 0; }
.ft-cc-rk .ft-ico { width: 12px; height: 12px; }
.ft-cc-ly { display: flex; align-items: center; gap: 7px; padding: 3px 0; font-size: 11.5px; color: var(--pa-ink); white-space: nowrap; }
.ft-cc-ly em { margin-left: auto; display: flex; color: var(--pa-mute); } .ft-cc-ly em .ft-ico { width: 13px; height: 13px; }
.ft-cc-sub { padding-left: 14px; transition: opacity .3s; }
.ft-cc-sub.is-dis { opacity: .45; }
.ft-cc-sub-btn { margin-top: 10px; justify-content: center; height: 28px; font-size: 11.5px; }
.ft-cc-mini { padding: 12px 10px 10px; min-width: 0; }
.ft-cc-mh { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 6px; font-size: 13px; color: var(--pa-ink); }
.ft-cc-mh > span { display: flex; gap: 4px; color: var(--pa-mute); } .ft-cc-mh .ft-ico { width: 12px; height: 12px; }
.ft-cc-mini .ft-cc-wk > span, .ft-cc-book .ft-cc-wk > span { height: 72px; overflow: hidden; }
.ft-cc-mini .ft-cc-wk > span:last-child, .ft-cc-book .ft-cc-wk > span:last-child { border-right: 0; }
.ft-cc-seg.is-sm i { padding: 2px 6px; font-size: 10px; }
.ft-cc-book { position: relative; max-width: 520px; padding: 14px 12px 12px; overflow: hidden; }
.ft-cc-book .ft-cc-wk > span { height: 92px; }
.ft-cc-bdlg { width: min(330px, calc(100% - 28px)); top: 26px; padding: 14px 16px; }
.ft-cc-badge { margin: 6px 0 0; }
.ft-cc-badge span { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: #fff4e5; color: #9a4b00; transition: background .3s, color .3s; }
.ft-cc-badge.is-ok span { background: #e8f5e9; color: #2e7d32; }
@media (max-width: 560px) {
  .ft-cc-lay { grid-template-columns: 1fr; }
  .ft-cc-rail { border-right: 0; border-bottom: 1px solid var(--pa-line); display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
  .ft-cc-rail .ft-cc-rk, .ft-cc-sub-btn, .ft-cc-sub { grid-column: 1 / -1; }
  .ft-cc-sub { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
  .ft-cc-stack { display: flex; flex-direction: column; gap: 12px; }
  .ft-cc-stack > .ft-cc-dcard + .ft-cc-dcard, .ft-cc-stack.is-remind > .ft-cc-rdlg { max-width: none; margin: 0; }
  .ft-cc-stack > .ft-cc-dcard { max-width: none; }
  .ft-cc-book .ft-cc-wk > span, .ft-cc-mini .ft-cc-wk > span { height: 66px; }
  .ft-cc-ev { font-size: 9px; padding: 1px 3px; }
  .ft-cc-facts div { grid-template-columns: 1fr; gap: 2px; }
}
/* the event dialog sits beside the page (not in the ftcc container): the shorter frames (≤1100: 540 / 430 px) get a shorter one */
@media (max-width: 1100px) {
  .ft-cc-dlg { top: 8px; padding: 10px 12px 10px; }
  .ft-cc-dlg .ft-cc-opt, .ft-cc-dlg .ft-cc-hint, .ft-cc-dlg .ft-cc-allday em { display: none; }
  .ft-cc-dlg .ft-cc-allday { margin-bottom: 4px; }
  .ft-cc-dlg .ft-cc-rh { padding: 6px 2px; }
  .ft-cc-dlg .ft-fld.is-sm { margin-bottom: 6px; }
  .ft-cc-dlg .ft-dlg-foot { margin-top: 4px; padding-top: 8px; }
}
@media (max-width: 480px) {
  .ft-cc-dlg .ft-cc-rd { padding-left: 0; }
  .ft-cc-dlg .ft-cc-cols { grid-template-columns: 1fr 1fr; }
  .ft-cc-dlg .ft-cc-cols .ft-fld:first-child { display: none; }
  .ft-cc-dlg .ft-cc-cols.is-2 .ft-fld:first-child { display: flex; }
  .ft-cc-dlg .ft-fld > span { height: 30px; }
  .ft-cc-dlg .ft-cc-in { height: 28px; }
  .ft-cc-dlg .ft-cc-rh b { font-size: 12px; }
}
/* layers card: the grid fills the rail's height */
.ft-cc-mini { display: flex; flex-direction: column; }
.ft-cc-mini .ft-cc-wk { flex: 1; }
.gbl .ft-cc-mini .ft-cc-wk > span { height: auto; min-height: 66px; }

/* calendar motion (review 2026-10-18): selects open a capped, scrollable list like ph-select, so a menu never leaves
   the hero card at 768/390; the event dialog scales in (no see-through cross-fade over the grid); the saved chip pops;
   an approved booking pulses once as it loses its stripes */
.ft-cc-menu { max-height: 138px; overflow-y: auto; scrollbar-width: none; }
.ft-cc-menu::-webkit-scrollbar { display: none; }
.ft-cc-menu.is-time { max-height: 132px; }
.ft-cc-rem .ft-cc-sel { min-width: 0; }
.gbl-js [data-gbl-scene] .ft-cc-dlg[data-t]:not(.gbl-sx).is-on { animation: ft-cc-dlg-in .32s var(--ease) both; transform-origin: 50% 30%; }
.gbl-js .ft-cc-hero .ft-scrim[data-t]:not(.gbl-sx).is-on { animation: ft-cc-fade .2s linear both; }
.gbl-js [data-gbl-scene] .ft-cc-new[data-t]:not(.gbl-sx).is-on { animation: ft-cc-chip-in .7s var(--ease) both; }
.ft-cc-ev.is-tent.is-ok { animation: ft-cc-ok 1s var(--ease) both; }
@keyframes ft-cc-dlg-in { 0% { opacity: 0; transform: translateY(10px) scale(.96); } 45% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes ft-cc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ft-cc-chip-in { 0% { opacity: 0; transform: scale(.6); } 55% { opacity: 1; transform: scale(1.12); box-shadow: inset 0 0 0 1px var(--cc-blue-ring), 0 0 0 6px rgba(64, 137, 241, .3); } 100% { transform: none; } }
@keyframes ft-cc-ok { 0% { box-shadow: 0 0 0 0 rgba(20, 184, 163, .5); } 60% { box-shadow: 0 0 0 6px rgba(20, 184, 163, 0); } 100% { box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .ft-cc-ev.is-tent.is-ok { animation: none; } }
.ft-cc-cols .ft-cc-sel .ft-fld { margin-bottom: 6px; }
.ft-cc-cols .ft-cc-sel { z-index: 3; } /* its pop-in transform makes a stacking context; lift it so the open time list paints over Repeat */

/* ---------- Website Builder v3 (website builder v3, ui 1e4c7253 / core c98316b2, 2026-10-17): page editor hero, Look and
   feel mini, published site, Add a page, Version history. Prefix ft-ws- (ft-wb- is the Session 5 builder, still used by
   website-penny / website-inbox / support-chat). The site replica copies the default template (core website-templates/default:
   light hero, serif title, white content cards, pill buttons in the primary color) and sizes everything in em off the
   preview's own width, so it scales with the stage. ---------- */
.ft-ws-hero, .ft-ws-pair, .ft-ws-look { --ws-p: #2e7d5b; --ws-p-bg: #e7f2ed; --ws-serif: Georgia, "Times New Roman", serif; }

/* hero: editor frame */
.ft-ws-hero .gbl-pa-top { padding: 10px 14px 8px; }
.ft-ws-hero .gbl-pa-top .gbl-pa-logo { width: 78px; height: 30px; margin-right: 4px; }
.ft-ws-hero .gbl-pa-page { display: flex; flex-direction: column; padding: 2px 12px 12px; }
.ft-ws-ed { container: ftws / inline-size; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.ft-ws-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 42px; padding: 6px 8px; border: 1px solid var(--pa-line); border-radius: 12px; background: #fff; }
.ft-ws-bl, .ft-ws-br { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.ft-ws-back { display: inline-flex; align-items: center; gap: 5px; padding: 0 6px; height: 28px; border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--pa-ink); white-space: nowrap; }
.ft-ws-back .ft-ico { width: 13px; height: 13px; }
.ft-ws-sel { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; height: 28px; padding: 0 8px 0 10px; border: 1px solid #c9d0db; border-radius: 8px; font-size: 12px; color: var(--pa-ink); white-space: nowrap; }
.ft-ws-sel .ft-ico { width: 12px; height: 12px; color: var(--pa-mute); }
.ft-ws-dev { display: inline-flex; padding: 2px; border-radius: 8px; background: #f2f4f7; font-size: 11.5px; font-weight: 600; color: var(--pa-text); }
.ft-ws-dev i { font-style: normal; display: inline-flex; align-items: center; justify-content: center; padding: 4px 9px; border-radius: 6px; white-space: nowrap; transition: background .25s, color .25s, box-shadow .25s; }
.ft-ws-dev i.is-on, .ft-ws-ed.is-dev .ft-ws-dp { background: #fff; color: var(--pa-ink); box-shadow: 0 1px 2px rgba(20, 30, 50, .12); }
.ft-ws-ed.is-dev .ft-ws-dev i.is-on { background: none; color: var(--pa-text); box-shadow: none; }
.ft-ws-dev .ft-ws-de, .ft-ws-dev .ft-ws-n, .ft-ws-st .ft-ws-n { display: none; }
.ft-ws-st { font-size: 11.5px; color: var(--pa-mute); white-space: nowrap; }
.ft-ws-more { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; color: var(--pa-ink); }
.ft-ws-more .ft-ico { width: 16px; height: 16px; }
.ft-ws-pub { display: inline-flex; align-items: stretch; height: 28px; margin-left: 2px; border-radius: 8px; background: var(--pa-blue); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; }
.ft-ws-pub b { display: inline-flex; align-items: center; gap: 5px; padding: 0 9px; font-weight: 600; }
.ft-ws-pub i { display: inline-flex; align-items: center; padding: 0 6px; border-left: 1px solid rgba(255, 255, 255, .35); }
.ft-ws-pub .ft-ico { width: 13px; height: 13px; }
.ft-ws-body { flex: 1; min-height: 0; display: flex; gap: 8px; }
.ft-ws-panel { flex: none; width: clamp(196px, 40%, 248px); display: flex; flex-direction: column; gap: 8px; padding: 9px; border: 1px solid var(--pa-line); border-radius: 12px; background: #fff; overflow: hidden; }
.ft-ws-pseg { display: flex; padding: 2px; border-radius: 8px; background: #f2f4f7; font-size: 11.5px; font-weight: 600; color: var(--pa-text); margin: 0; }
.ft-ws-pseg i { font-style: normal; flex: 1; text-align: center; padding: 4px 6px; border-radius: 6px; white-space: nowrap; }
.ft-ws-pseg i.is-on { background: #fff; color: var(--pa-ink); box-shadow: 0 1px 2px rgba(20, 30, 50, .12); }
.ft-ws-all, .ft-ws-one { display: flex; flex-direction: column; gap: 7px; min-height: 0; }
.ft-ws-sh { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; margin: 0; padding: 6px 9px; border-radius: 9px; background: #f6f7f9; font-size: 11.5px; }
.ft-ws-sh b { font-weight: 600; color: var(--pa-ink); }
.ft-ws-sh small { grid-row: 2; font-size: 10.5px; color: var(--pa-mute); }
.ft-ws-sh em { grid-row: 1 / 3; grid-column: 2; font-style: normal; font-weight: 600; color: var(--pa-blue); }
.ft-ws-blocks, .ft-ws-ppl { display: flex; flex-direction: column; gap: 5px; }
.ft-ws-blocks li { display: grid; grid-template-columns: 14px minmax(0, 1fr) 16px; align-items: center; gap: 6px; padding: 6px 7px; border: 1px solid var(--pa-line); border-radius: 9px; background: #fff; }
.ft-ws-blocks li > .ft-ico { width: 14px; height: 14px; color: #8a93a3; }
.ft-ws-blocks li > span { display: flex; flex-direction: column; min-width: 0; }
.ft-ws-blocks b { font-size: 11.5px; font-weight: 600; color: var(--pa-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-ws-blocks small { font-size: 10.5px; color: var(--pa-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-ws-add { display: flex; align-items: center; justify-content: center; gap: 5px; height: 28px; border-radius: 8px; background: #f2f4f7; font-size: 11.5px; font-weight: 600; color: var(--pa-ink); }
.ft-ws-add .ft-ico { width: 13px; height: 13px; }
.ft-ws-ab { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-size: 11.5px; font-weight: 600; color: var(--pa-blue); }
.ft-ws-ab .ft-ico { width: 12px; height: 12px; }
.ft-ws-crumb { display: flex; align-items: center; gap: 5px; margin: 0; font-size: 12px; color: var(--pa-mute); }
.ft-ws-crumb b { font-weight: 600; color: var(--pa-ink); }
.ft-ws-crumb i { font-style: normal; color: #b3bac6; }
.ft-ws-crumb .ft-ico { width: 15px; height: 15px; margin-left: auto; color: var(--pa-ink); }
.ft-ws-about { margin: -3px 0 0; font-size: 10.5px; color: var(--pa-mute); }
.ft-ws-one .ft-fld { margin: 0; }
.ft-ws-one .ft-fld small { font-size: 11px; }
.ft-ws-one .ft-fld > span { height: 30px; padding: 0 9px; font-size: 12px; }
.ft-ws-tg { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; font-size: 11.5px; color: var(--pa-ink); }
.ft-ws-tg > span { display: inline-flex; align-items: center; gap: 6px; }
.ft-ws-tg .gbl-toggle { width: 26px; height: 15px; flex: none; }
.ft-ws-tg .gbl-toggle::after { width: 11px; height: 11px; top: 2px; left: 2px; }
.ft-ws-tg .gbl-toggle.is-on::after { transform: translateX(11px); }
.ft-ws-hint { display: flex; gap: 5px; margin: 0; padding-top: 7px; border-top: 1px solid var(--pa-line); font-size: 10.5px; line-height: 1.35; color: var(--pa-mute); }
.ft-ws-hint .ft-ico { width: 12px; height: 12px; margin-top: 1px; }
.ft-ws-ppl li { display: grid; grid-template-columns: 12px 18px minmax(0, 1fr) 14px; align-items: center; gap: 5px; padding: 5px 7px; border: 1px solid var(--pa-line); border-radius: 8px; font-size: 11px; }
.ft-ws-ppl li > .ft-ico { width: 12px; height: 12px; color: #8a93a3; }
.ft-ws-ppl li > .ft-ico:nth-child(2) { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: #eef1f5; color: var(--pa-text); }
.ft-ws-ppl b { font-weight: 600; color: var(--pa-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-ws-addp { align-self: flex-start; height: 26px; padding: 0 9px; font-size: 11px; background: #f2f4f7; border-color: #f2f4f7; }
.ft-ws-addp .ft-ico { width: 12px; height: 12px; }
.ft-ws-stage { container: ftwss / inline-size; flex: 1; min-width: 0; display: flex; justify-content: center; padding: 10px; border-radius: 12px; background: #e9ecf1; }
.ft-ws-frame { width: 100%; height: 100%; overflow: hidden; border-radius: 8px; background: #f8f9fa; box-shadow: 0 1px 2px rgba(20, 30, 50, .08), 0 10px 24px -14px rgba(20, 30, 50, .3); transition: width .6s var(--ease); }
.ft-ws-ed.is-dev .ft-ws-frame { width: min(52%, 190px); }

/* the site replica (hero preview, ft-site row) */
.ft-ws-site { font-size: clamp(6.5px, 2.35cqi, 11px); line-height: 1.45; color: #212529; background: #f8f9fa; font-family: "DM Sans", -apple-system, "Segoe UI", Arial, sans-serif; text-align: left; }
.ft-ws-nav { display: flex; align-items: center; gap: 1.2em; padding: 1.1em 1.4em; }
.ft-ws-nav > b { flex: none; font-family: var(--ws-serif); font-size: 1.35em; font-weight: 600; color: #333; white-space: nowrap; }
.ft-ws-links { display: flex; gap: .3em; margin: 0 auto; font-size: .95em; font-weight: 500; color: #333; white-space: nowrap; }
.ft-ws-links i { font-style: normal; display: inline-flex; align-items: center; gap: .2em; padding: .35em .7em; border-radius: 99em; }
.ft-ws-links i.is-on { color: var(--ws-p); font-weight: 600; }
.ft-ws-links .ft-ico { width: 1em; height: 1em; }
.ft-ws-nav > em, .ft-ws-hbtn { flex: none; font-style: normal; padding: .5em 1.15em; border-radius: 99em; background: var(--ws-p); color: #fff; font-weight: 600; font-size: .9em; white-space: nowrap; }
.ft-ws-hbtn { background: transparent; color: var(--ws-p); box-shadow: inset 0 0 0 1.5px var(--ws-p); }
.ft-ws-burger { display: none; margin-left: auto; width: 2em; height: 2em; border-radius: .4em; box-shadow: inset 0 0 0 1px #d0d5dc; position: relative; }
.ft-ws-burger i, .ft-ws-burger::before, .ft-ws-burger::after { content: ""; position: absolute; left: .5em; right: .5em; height: 2px; border-radius: 2px; background: #555; top: calc(50% - 1px); }
.ft-ws-burger::before { top: calc(50% - .4em); } .ft-ws-burger::after { top: calc(50% + .3em); }
.ft-ws-sh1 { padding: 2.6em 1.4em 2.4em; text-align: center; }
.ft-ws-sh1 h4 { margin: 0; font-family: var(--ws-serif); font-size: 3.4em; font-weight: 400; line-height: 1.02; letter-spacing: -.04em; color: #171717; }
.ft-ws-sh1 p { margin: .8em 0 0; font-size: 1.1em; color: #5c636b; }
.ft-ws-sec { padding: 0 1.4em 1.1em; }
.ft-ws-cc { padding: 1.5em; border-radius: 1.2em; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); transition: box-shadow .35s; }
.ft-ws-cc > p { margin: 0; }
.ft-ws-cc h5 { margin: 0 0 .7em; font-family: var(--ws-serif); font-size: 1.7em; font-weight: 600; line-height: 1.15; color: #171717; }
.ft-ws-hl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9em; }
.ft-ws-hl > p { display: flex; flex-direction: column; gap: .3em; padding: 1em; border-radius: .9em; box-shadow: inset 0 0 0 1px #e9ecef; }
.ft-ws-hl .ft-ico { width: 1.9em; height: 1.9em; color: var(--ws-p); }
.ft-ws-hl b { font-size: 1.1em; font-weight: 600; color: #171717; }
.ft-ws-hl small { font-size: .9em; color: #5c636b; }
.ft-ws-rp > p { display: inline-grid; grid-template-columns: auto auto; align-items: center; gap: .3em .8em; width: calc(50% - .5em); padding: .9em; border-radius: .9em; box-shadow: inset 0 0 0 1px #e9ecef; vertical-align: top; }
.ft-ws-rp > p + p { margin-left: .8em; }
.ft-ws-rp .ft-ico { grid-row: span 2; width: 2.4em; height: 2.4em; padding: .5em; border-radius: 50%; background: var(--ws-p-bg); color: var(--ws-p); }
.ft-ws-rp b { font-size: 1em; font-weight: 600; }
.ft-ws-rp em, .ft-ws-docs em { justify-self: start; font-style: normal; font-size: .85em; font-weight: 600; padding: .3em .9em; border-radius: 99em; background: var(--ws-p); color: #fff; white-space: nowrap; }
.ft-ws-bds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9em; }
.ft-ws-bds > p { display: flex; flex-direction: column; align-items: center; gap: .15em; margin: 0; padding: 1em .6em; border-radius: .9em; box-shadow: inset 0 0 0 1px #e9ecef; text-align: center; min-width: 0; }
.ft-ws-bds i { font-style: normal; display: grid; place-items: center; width: 3em; height: 3em; margin-bottom: .35em; border-radius: 50%; background: var(--ws-p-bg); color: var(--ws-p); font-weight: 700; font-size: 1.05em; }
.ft-ws-bds b { font-size: 1.05em; font-weight: 600; color: #171717; }
.ft-ws-bds small { font-size: .9em; color: #5c636b; }
.ft-ws-bds em { max-width: 100%; font-style: normal; font-size: .8em; color: var(--ws-p); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-ws-foot { display: flex; justify-content: space-between; gap: 1em; padding: 1.2em 1.4em 1.6em; font-size: .85em; color: #6c757d; }
.ft-ws-docs > p { display: grid; grid-template-columns: 2em minmax(0, 1fr) auto; align-items: center; gap: .8em; padding: .7em 0; }
.ft-ws-docs > p + p { border-top: 1px solid #eef0f2; }
.ft-ws-docs .ft-ico { width: 2em; height: 2em; color: var(--ws-p); }
.ft-ws-docs span { display: flex; flex-direction: column; min-width: 0; }
.ft-ws-docs b { font-size: 1em; font-weight: 600; color: #171717; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-ws-docs small { font-size: .85em; color: #6c757d; }
/* phone layout: the hero's Phone preview and the ft-site phone */
.ft-ws-ed.is-dev .ft-ws-site, .ft-ws-site.is-phone { font-size: 9px; }
.ft-ws-ed.is-dev .ft-ws-links, .ft-ws-ed.is-dev .ft-ws-nav > em, .ft-ws-site.is-phone .ft-ws-links, .ft-ws-site.is-phone .ft-ws-nav > em { display: none; }
.ft-ws-ed.is-dev .ft-ws-burger, .ft-ws-site.is-phone .ft-ws-burger { display: block; }
.ft-ws-ed.is-dev .ft-ws-sh1 h4, .ft-ws-site.is-phone .ft-ws-sh1 h4 { font-size: 2.4em; letter-spacing: -.03em; }
.ft-ws-ed.is-dev .ft-ws-hl, .ft-ws-ed.is-dev .ft-ws-bds, .ft-ws-site.is-phone .ft-ws-hl { grid-template-columns: 1fr; }
.ft-ws-ed.is-dev .ft-ws-rp > p { display: grid; width: auto; margin: 0 0 .6em; }
.ft-ws-ed.is-dev .ft-ws-sec, .ft-ws-site.is-phone .ft-ws-sec { padding: 0 1em 1em; }
.ft-ws-ed.is-dev .ft-ws-cc, .ft-ws-site.is-phone .ft-ws-cc { padding: 1.2em; }

/* hero: Add a block */
.ft-ws-pick { top: 44px; width: min(440px, calc(100% - 24px)); padding: 14px 16px 16px; }
.ft-ws-pick .ft-dlg-h { margin-bottom: 10px; }
.ft-ws-q { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; height: 32px; padding: 0 10px; border: 1px solid #c9d0db; border-radius: 8px; font-size: 12.5px; color: var(--pa-ink); }
.ft-ws-q .ft-ico { width: 14px; height: 14px; color: var(--pa-mute); }
.ft-ws-q.is-pressed { transform: none; filter: none; border-color: var(--pa-blue); box-shadow: 0 0 0 3px rgba(42, 107, 230, .15); }
.ft-ws-qph { color: var(--pa-mute); }
.ft-ws-grp + .ft-ws-grp { margin-top: 9px; }
.ft-ws-grp h6 { margin: 0 0 5px; font-size: 11.5px; font-weight: 600; color: var(--pa-text); }
.ft-ws-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ft-ws-tiles li { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--pa-line); border-radius: 10px; background: #fff; transition: box-shadow .2s, border-color .2s; }
.ft-ws-tiles li > .ft-ico { width: 26px; height: 26px; padding: 5px; border-radius: 7px; background: var(--pa-blue-50); color: var(--pa-blue); }
.ft-ws-tiles li > span { display: flex; flex-direction: column; min-width: 0; }
.ft-ws-tiles b { font-size: 12px; font-weight: 600; color: var(--pa-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-ws-tiles small { font-size: 10.5px; color: var(--pa-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-ws-tiles li.is-dis > .ft-ico { background: #f1f3f6; color: #6b7482; }
.ft-ws-tiles li.is-dis b { color: #5b6473; }
.ft-ws-pickme.is-pressed { transform: none; filter: none; border-color: var(--pa-blue); box-shadow: 0 0 0 3px rgba(42, 107, 230, .15); }

/* hero: Publish your site? */
.ft-ws-pubd { top: 64px; width: min(370px, calc(100% - 24px)); padding: 16px 18px 14px; }
.ft-ws-pubd .ft-dlg-h { margin-bottom: 4px; }
.ft-ws-desc { margin: 0 0 10px; font-size: 12px; color: var(--pa-mute); }
.ft-ws-fact { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 6px 0; font-size: 12px; border-bottom: 1px solid var(--pa-line); }
.ft-ws-fact small { font-size: 12px; color: var(--pa-mute); }
.ft-ws-fact span { display: inline-flex; align-items: center; gap: 5px; color: var(--pa-ink); font-weight: 600; min-width: 0; white-space: nowrap; }
.ft-ws-fact .is-link { color: var(--pa-blue); overflow: hidden; }
.ft-ws-fact .ft-ico { width: 12px; height: 12px; }
.ft-ws-ok { padding: 1px 8px; border-radius: 99px; background: #e8f5ee; color: #17663f !important; font-size: 11.5px; }
.ft-ws-ok i { width: 6px; height: 6px; border-radius: 50%; background: #1fa463; }
.ft-ws-sum { margin: 10px 0 4px; font-size: 12.5px; color: var(--pa-ink); }
.ft-ws-hint2 { margin: 0; font-size: 11px; line-height: 1.4; color: var(--pa-mute); }
.ft-ws-busy { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 8px 22px; text-align: center; }
.ft-ws-busy p { margin: 0; font-size: 11.5px; color: var(--pa-mute); }
.ft-ws-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #dfe5ef; border-top-color: var(--pa-blue); animation: ft-ws-spin .8s linear infinite; }
@keyframes ft-ws-spin { to { transform: rotate(360deg); } }
.ft-ws-pubd .ft-dlg-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.ft-ws-pubd .gbl-pa-btn { height: 30px; font-size: 12px; }
.ft-ws-go > span { display: inline-flex; align-items: center; gap: 5px; }
.ft-ws-hero .ft-toast { z-index: 8; }

/* hero: narrow editor (the app's < 900 px "Edit | Preview" switch), and short heroes */
@container ftws (max-width: 600px) { .ft-ws-more { display: none; } }
@container ftws (max-width: 520px) {
  .ft-ws-bar { flex-wrap: wrap; row-gap: 6px; }
  .ft-ws-dev { order: 3; flex: 1 0 100%; }
  .ft-ws-dev i { flex: 1; }
  .ft-ws-dev .ft-ws-dk, .ft-ws-dev .ft-ws-w, .ft-ws-st .ft-ws-w { display: none; }
  .ft-ws-dev .ft-ws-de, .ft-ws-dev .ft-ws-n, .ft-ws-st .ft-ws-n { display: inline-flex; }
  .ft-ws-ed.is-dev .ft-ws-de.is-on { background: none; color: var(--pa-text); box-shadow: none; }
  .ft-ws-panel { width: 100%; }
  .ft-ws-stage { display: none; }
  .ft-ws-ed.is-dev .ft-ws-panel { display: none; }
  .ft-ws-ed.is-dev .ft-ws-stage { display: flex; }
  .ft-ws-ed.is-dev .ft-ws-frame { width: min(100%, 240px); }
}
@container ftws (max-width: 340px) {
  .ft-ws-sel { gap: 8px; }
  .ft-ws-st { display: none; }
}
@media (max-width: 768px) {
  .ft-ws-sh, .ft-ws-hint, .ft-ws-addp, .ft-ws-about { display: none; }
  .ft-ws-pick .ft-ws-grp:last-child, .ft-ws-pick .ft-ws-grp:first-of-type .ft-ws-tiles li:nth-child(n+3) { display: none; }
  .ft-ws-pubd { top: 30px; }
  .ft-ws-hint2 { display: none; }
}
@media (max-width: 420px) {
  .ft-ws-tiles { grid-template-columns: 1fr; }
  .ft-ws-pick .ft-ws-grp:first-of-type { display: none; }
  .ft-ws-ppl li:nth-child(3) { display: none; }
  .ft-ws-hero .gbl-pa-top .gbl-pa-pill { display: none; }
}

/* mini: Look and feel */
.ft-ws-look { max-width: 480px; }
.ft-ws-lh { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.ft-ws-lh strong { font-size: 15px; font-weight: 600; }
.ft-ws-lh small { font-size: 12px; color: var(--pa-mute); }
.ft-ws-lrow { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-bottom: 6px; }
.ft-ws-pc { position: relative; }
.ft-ws-col { display: flex; align-items: center; gap: 8px; margin: 2px 0 8px; }
.ft-ws-col small { font-size: 12px; color: var(--pa-mute); font-variant-numeric: tabular-nums; }
.ft-ws-swb { display: inline-flex; width: 32px; height: 32px; padding: 4px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--pa-line); }
.ft-ws-sw { display: block; width: 100%; height: 100%; border-radius: 5px; background: var(--ws-p); transition: background .6s; }
.ft-ws-sw.is-new { background: #1f5fad; }
.ft-ws-pop { position: absolute; z-index: 3; left: 0; top: calc(100% - 2px); width: 196px; padding: 10px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--pa-line), 0 18px 36px -14px rgba(14, 18, 27, .4); }
.ft-ws-area { display: block; position: relative; height: 92px; border-radius: 8px; background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(155 100% 45%)); transition: background .6s; }
.ft-ws-area i { position: absolute; left: 62%; top: 36%; width: 12px; height: 12px; margin: -6px; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(0, 0, 0, .4); }
.ft-ws-pop:has(.ft-ws-thumb.is-new) .ft-ws-area { background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(213 100% 45%)); }
.ft-ws-hue { display: block; position: relative; height: 12px; margin-top: 10px; border-radius: 99px; background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.ft-ws-thumb, .ft-ws-to { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; }
.ft-ws-thumb { left: 43%; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15), 0 1px 3px rgba(0, 0, 0, .35); transition: left .8s cubic-bezier(.45, 0, .2, 1); }
.ft-ws-thumb.is-new { left: 59%; }
.ft-ws-thumb.is-pressed { transform: scale(1.15); filter: none; }
.ft-ws-to { left: 59%; }
.ft-ws-fonts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.ft-ws-fp { display: flex; flex-direction: column; gap: 6px; }
.ft-ws-fp li { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border: 1px solid var(--pa-line); border-radius: 10px; transition: border-color .2s, box-shadow .2s; }
.ft-ws-fp li > i { flex: none; width: 15px; height: 15px; margin-top: 1px; border-radius: 50%; border: 1.5px solid #9aa4b4; position: relative; }
.ft-ws-fp li > i::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--pa-blue); transform: scale(0); transition: transform .2s var(--ease); }
.ft-ws-fp li.is-on:not(.is-un) { border-color: var(--pa-blue); box-shadow: 0 0 0 1px var(--pa-blue); }
.ft-ws-fp li.is-on:not(.is-un) > i { border-color: var(--pa-blue); }
.ft-ws-fp li.is-on:not(.is-un) > i::after { transform: none; }
.ft-ws-fp li.is-pressed { transform: none; filter: none; background: #f3f6fb; }
.ft-ws-fp span { display: flex; flex-direction: column; min-width: 0; }
.ft-ws-fp b { font-size: 12.5px; font-weight: 600; }
.ft-ws-fp small { font-size: 10.5px; line-height: 1.35; color: var(--pa-mute); }
.ft-ws-prev { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 26px 14px 16px; border-radius: 12px; background: #f8f9fa; text-align: center; position: relative; }
.ft-ws-prev > small { position: absolute; left: 10px; top: 8px; font-size: 11px; font-weight: 600; color: var(--pa-text); }
.ft-ws-prev b { font-family: var(--ws-serif); font-size: 21px; font-weight: 600; line-height: 1.15; color: #1f2329; transition: opacity .25s; }
.ft-ws-prev p { margin: 0; font-size: 11.5px; line-height: 1.45; color: #4b5260; font-family: "DM Sans", -apple-system, "Segoe UI", Arial, sans-serif; }
.ft-ws-prev em { font-style: normal; font-size: 11.5px; font-weight: 600; padding: 7px 16px; border-radius: 99px; background: var(--ws-p); color: #fff; transition: background .6s; }
.ft-ws-prev.is-modern b { font-family: "Avenir Next", "Helvetica Neue", -apple-system, "Segoe UI", Arial, sans-serif; letter-spacing: -.01em; }
.ft-ws-prev.is-modern p { font-family: -apple-system, "Segoe UI", Inter, Arial, sans-serif; }
.ft-ws-prev.is-new em { background: #1f5fad; }
@media (max-width: 520px) { .ft-ws-fonts { grid-template-columns: 1fr; } }

/* replica: the published site (browser + phone) */
.ft-ws-pair { position: relative; width: 100%; max-width: 520px; padding: 0 0 26px; }
.ft-ws-win { container: ftwss / inline-size; width: 88%; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(28, 39, 55, .06), 0 24px 48px -24px rgba(24, 50, 140, .35); }
.ft-ws-url { display: flex; align-items: center; gap: 5px; margin: 0; padding: 8px 10px; background: #eef1f5; }
.ft-ws-url > i { width: 8px; height: 8px; border-radius: 50%; background: #cfd5de; }
.ft-ws-url span { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; flex: 1; max-width: 240px; padding: 3px 10px; border-radius: 6px; background: #fff; font-size: 11.5px; color: var(--pa-ink); }
.ft-ws-url .ft-ico { width: 11px; height: 11px; color: var(--pa-mute); }
.ft-ws-site.is-static { font-size: clamp(6.5px, 2.15cqi, 10.5px); }
.ft-ws-phone { container: ftwsp / inline-size; position: absolute; right: 0; bottom: 0; width: 34%; max-width: 170px; aspect-ratio: 9 / 17; overflow: hidden; border-radius: 22px; border: 5px solid #1f2733; background: #f8f9fa; box-shadow: 0 24px 40px -18px rgba(14, 18, 27, .5); }
.ft-ws-phone .ft-ws-site.is-phone { font-size: clamp(5.5px, 5.3cqi, 9px); }
@media (max-width: 520px) { .ft-ws-win { width: 92%; } .ft-ws-phone { width: 38%; } }

/* replica: Add a page */
.ft-ws-addpg { max-width: 480px; padding: 16px 18px 14px; }
.ft-ws-addpg .ft-dlg-h { margin-bottom: 4px; }
.ft-ws-addpg .ft-dlg-h > .ft-ico, .ft-ws-hh > .ft-ico { width: 16px; height: 16px; color: var(--pa-mute); }
.ft-ws-hint3 { margin: 0 0 10px; font-size: 12px; color: var(--pa-mute); }
.ft-ws-tpl { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 0 12px; }
.ft-ws-tiles.is-tpl { grid-template-columns: 1fr; gap: 5px; }
.ft-ws-tiles.is-tpl li { padding: 5px 8px; }
.ft-ws-tiles.is-tpl li > .ft-ico { width: 24px; height: 24px; padding: 4px; }
.ft-ws-fresh { padding-left: 12px; border-left: 1px solid var(--pa-line); }
.ft-ws-fresh > p { margin: 0 0 6px; font-size: 11.5px; color: var(--pa-mute); }
.ft-ws-hov { border-color: var(--pa-blue) !important; box-shadow: 0 0 0 1px var(--pa-blue); }
.gbl-js .ft-vis-replica .ft-ws-hov { transition: border-color .4s .6s, box-shadow .4s .6s; }
.gbl-js .ft-vis-replica:not(.is-in) .ft-ws-hov { border-color: var(--pa-line) !important; box-shadow: none; }
.ft-ws-addpg .ft-dlg-foot { display: flex; justify-content: flex-end; margin-top: 12px; }
@media (max-width: 520px) { .ft-ws-tpl { grid-template-columns: 1fr; } .ft-ws-fresh { padding: 10px 0 0; margin-top: 10px; border-left: 0; border-top: 1px solid var(--pa-line); } }

/* replica: Version history */
.ft-ws-hist { max-width: 460px; padding: 16px 18px; }
.ft-ws-hh { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.ft-ws-hh strong { font-size: 15px; font-weight: 600; }
.ft-ws-hist .ft-fld > span { height: 34px; justify-content: flex-start; gap: 8px; font-size: 12.5px; }
.ft-ws-hist .ft-fld > span > .ft-ico:last-child { margin-left: auto; }
.ft-ws-sv { font-style: normal; }
.ft-ws-vers { display: flex; flex-direction: column; gap: 6px; }
.ft-ws-vers li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--pa-line); border-radius: 10px; }
.ft-ws-vers li > span { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: center; min-width: 0; flex: 1; }
.ft-ws-vers b { font-size: 12.5px; font-weight: 600; color: var(--pa-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-ws-vers small { grid-row: 2; font-size: 11px; color: var(--pa-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-ws-vers li > .ft-ico { width: 14px; height: 14px; color: var(--pa-mute); }
.ft-ws-vers .gbl-pa-btn { height: 26px; padding: 0 9px; font-size: 11px; font-style: normal; background: #f2f4f7; border-color: #f2f4f7; }
.ft-ws-bdg { grid-row: 1 / 3; grid-column: 2; font-style: normal; font-size: 10.5px; font-weight: 600; padding: 1px 7px; border-radius: 99px; background: #eef0f3; color: #4a5361; }
.ft-ws-bdg.is-orange { background: #fff1e5; color: #9a4b00; } .ft-ws-bdg.is-green { background: #e8f5ee; color: #17663f; }
@media (max-width: 420px) { .ft-ws-vers li.is-draft { flex-wrap: wrap; } .ft-ws-vers li.is-draft > span { flex-basis: 100%; } }
@container ftwss (max-width: 470px) { .ft-ws-hero .ft-ws-links i:nth-child(n+4) { display: none; } .ft-ws-nav { gap: .8em; } }
@container ftwss (max-width: 300px) { .ft-ws-hero .ft-ws-links { display: none; } .ft-ws-hero .ft-ws-nav > em { margin-left: auto; } }
@container ftws (max-width: 300px) { .ft-ws-pub i { display: none; } .ft-ws-sel { gap: 6px; padding: 0 6px; } .ft-ws-back { padding: 0 2px; } .ft-ws-bl { gap: 3px; } }
@container ftwss (max-width: 470px) { .ft-ws-site.is-static .ft-ws-links i:nth-child(n+4) { display: none; } }
@container ftwss (max-width: 330px) { .ft-ws-site.is-static .ft-ws-hbtn { display: none; } }
.ft-ws-tiles.is-tpl b, .ft-ws-tiles.is-tpl small { white-space: normal; }
/* audit fixes: picker list scrolls like the app's dialog body, Cancel footer, spinner label, Current mark */
.ft-ws-groups { max-height: 352px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent); mask-image: linear-gradient(to bottom, #000 86%, transparent); }
.ft-ws-pickf { display: flex; justify-content: flex-end; margin-top: 10px; }
.ft-ws-pickf .gbl-pa-btn { height: 30px; font-size: 12px; }
.ft-ws-busy b { font-size: 12.5px; font-weight: 600; color: var(--pa-ink); margin-top: -2px; }
.ft-ws-crumb i .ft-ico { width: 11px; height: 11px; margin: 0; color: #9aa3b1; }
.ft-ws-fp b em { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; font-style: normal; font-size: 10.5px; font-weight: 600; color: #17663f; vertical-align: 1px; }
.ft-ws-fp b em .ft-ico { width: 12px; height: 12px; color: #1fa463; }
@media (max-width: 1100px) { .ft-ws-groups { max-height: 300px; } }
@media (max-width: 768px) { .ft-ws-groups { max-height: 230px; } .ft-ws-pickf { display: none; } .ft-ws-add.is-top { display: none; } }
.ft-ws-rp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8em; }
.ft-ws-rp > h5 { grid-column: 1 / -1; margin-bottom: 0; }
.ft-ws-rp > p, .ft-ws-rp > p + p { display: grid; width: auto; margin: 0; }
.ft-ws-ed.is-dev .ft-ws-rp { grid-template-columns: 1fr; }
.ft-ws-ed.is-dev .ft-ws-rp > p { margin: 0; }
/* review 2026-10-18 (motion). Dialogs scale in opaque (gbl-pop's .45s fade showed the editor through the picker) and
   leave the way they came (gable.css hides .is-off in one frame); the search fades the other tiles, then Basics and Media
   fold away; the Phone / Preview press dips the preview out while the width settles and brings it back already on the
   board (the reflow through in-between widths and the stale scroll were on show); the loop seam fades the page out over
   the last 450ms of the rest (features2.js .ft-seam, the feature-hero seam at the end of this file), where the end state
   cut back to the first frame with the preview tweening back to desktop. Paused (.is-held, features2.js) and reduced motion: no width tween, so the end state's
   scroll lands on the board. */
.gbl-js [data-gbl-scene].ft-ws-hero .ft-dlg[data-t]:not(.gbl-sx).is-on { animation: ft-ws-dlg-in .32s var(--ease) both; transform-origin: 50% 30%; }
.gbl-js [data-gbl-scene].ft-ws-hero .ft-scrim[data-t]:not(.gbl-sx).is-on { animation: ft-ws-fade .2s linear both; }
.ft-ws-pick .ft-ws-tiles li.is-out { opacity: 0; transition: opacity .15s; }
.gbl-js [data-gbl-scene].ft-ws-hero .ft-ws-grp.gbl-fold.gbl-fold.is-off.is-off { animation: ft-ws-fold .3s var(--ease) forwards; }
.ft-ws-hero.is-held .ft-ws-frame, .ft-ws-hero.is-held .ft-ws-dev i { transition: none; }
@media (prefers-reduced-motion: reduce) { .ft-ws-frame, .ft-ws-dev i { transition: none; } }
@media (prefers-reduced-motion: no-preference) {
  .gbl-js [data-gbl-scene].ft-ws-hero:not(.is-held) .ft-scrim[data-t].is-on.is-off { display: block !important; animation: ft-ws-out .3s ease forwards; }
  .gbl-js [data-gbl-scene].ft-ws-hero:not(.is-held) .ft-dlg[data-t].is-on.is-off { display: block !important; animation: ft-ws-dlg-out .22s ease forwards; }
  .gbl-js [data-gbl-scene].ft-ws-hero:not(.is-held) .ft-toast[data-t].is-on.is-off { display: flex !important; animation: ft-ws-out .3s ease forwards; }
  .ft-ws-hero:not(.is-held) .ft-ws-ed.is-dev .ft-ws-site { animation: ft-ws-dip .9s linear both; }
}
/* below 520px the press swaps the panel for the preview: no width to settle, so it fades in right after the 6390 scroll
   (the box was display:none at 4750, so that scroll never happened); the 6860 one finds it already there */
@media (prefers-reduced-motion: no-preference) {
  @container ftws (max-width: 520px) { .ft-ws-hero:not(.is-held) .ft-ws-ed.is-dev .ft-ws-site { animation: ft-ws-dip-in .5s linear both; } }
}
@keyframes ft-ws-dlg-in { 0% { opacity: 0; transform: translateY(10px) scale(.96); } 45% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes ft-ws-dlg-out { to { opacity: 0; transform: scale(.98); } }
@keyframes ft-ws-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ft-ws-out { to { opacity: 0; } }
@keyframes ft-ws-fold { from { max-height: 260px; opacity: 1; } 50% { opacity: 0; } to { max-height: 0; opacity: 0; margin-top: 0; } }
@keyframes ft-ws-dip { 0% { opacity: 1; } 15%, 70% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ft-ws-dip-in { 0%, 32% { opacity: 0; } 100% { opacity: 1; } }
/* Version history at phone width: long version titles wrap instead of ending in "replaced on …" */
@media (max-width: 420px) { .ft-ws-vers b { white-space: normal; } }
/* Publish: the spinner takes the body's place without the dialog shrinking (it collapsed under the cursor's Update press,
   so the button jumped up away from it) */
.gbl-js [data-gbl-scene].ft-ws-hero .ft-ws-pbody[data-off].is-off { display: block !important; visibility: hidden; }
.ft-ws-pubd .ft-ws-busy { position: absolute; left: 18px; right: 18px; top: 44px; bottom: 56px; justify-content: center; padding: 0 8px; }

/* ---------- feature heroes: the loop seam (2026-10-18; the Website Builder hero's, made general) ----------
   gable.js resets a loop's scene in one frame, so every hero's end state cut straight to its first frame. features2.js
   arms each looping .ft-hero scene (.ft-seamed, never in the markup, so landing2-scenes.css copies none of this) and puts
   .ft-seam on for the last 450ms of the 1.8s rest: the page (the phone's screen on Owner Portals) and the floats fade out,
   the next run resets underneath and fades in. While the seam is on nothing inside tweens, so the reset snaps (a width,
   a fold, a scroll-linked offset that had a transition went back through its in-between values as the page came back).
   Paused (.is-held) and reduced motion: no seam. */
@media (prefers-reduced-motion: no-preference) {
  .ft-seamed .gbl-pa-page, .ft-seamed .ft-op-scr { transition: opacity .45s ease; }
  .ft-seamed.ft-seam:not(.is-held) .gbl-pa-page, .ft-seamed.ft-seam:not(.is-held) .ft-op-scr { opacity: 0; }
  /* a float's own pop animation holds its opacity, so it fades through filter */
  .ft-seamed .gbl-float { transition: filter .45s ease; }
  .ft-seamed.ft-seam:not(.is-held) .gbl-float { filter: opacity(0); }
  .ft-seamed.ft-seam .gbl-pa-page *, .ft-seamed.ft-seam .ft-op-scr *, .ft-seamed.ft-seam .gbl-float * { transition: none !important; }
}