/* =========================================================================
   Solutions redesign proposals (solutions2.html, solutions-self2.html, solutions-pmc2.html).
   Loaded after gable.css + home2.css. Page wrapper: .gbl.gbl-home2.sol (PayHOA blue accent,
   home2 section rhythm). Product mocks reuse the app replica + scene engine; all data is fictional.
   ========================================================================= */

.sol .sx-hero .hx-hero-copy { padding-top: 64px; }
.sx-crumbs { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, .78); }
.gbl .sx-crumbs a { color: #fff; }
.gbl .sx-crumbs a:hover { color: #d6e4ff; }
.sx-crumbs svg { width: 14px; height: 14px; transform: rotate(-90deg); opacity: .7; }
.sol .hx-h1 { margin-top: 18px; }
.gbl .sol .sx-hero .hx-h1, .gbl.sol .sx-hero .hx-h1 { font-size: clamp(38px, 3.4vw, 50px); }
/* the scene sits inside the card instead of bleeding past its right edge like the homepage, so every button stays visible */
.sol .sx-hero .hx-hero-scene { width: 100%; }
.sol .sx-hero .hx-pa-hero { border-radius: 20px 20px 0 0; }

/* self-managed + management company heroes: the light feature-page hero (features2.css "hero"), so Solutions and
   Features pages open the same way; the hub keeps its blue card (.sh-hero) */
.sol .sx-hero .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); }
.sol .sx-hero .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%); }
.sol .sx-hero .hx-hero-glow::after { background-image: radial-gradient(rgba(34, 86, 211, .16) 1px, transparent 1px); }
.gbl .sol .sx-hero .hx-h1, .gbl.sol .sx-hero .hx-h1 { color: var(--ink); }
.sol .sx-hero .hx-h1 span { color: var(--pb-600); }
.sol .sx-hero .hx-hero-sub, .sol .sx-hero .hx-hero-note { color: var(--body); }
.sol .sx-hero .hx-hero-note svg { color: var(--pb-600); }
.gbl .sx-hero .hx-hero-note a { color: var(--pb-700); }
.gbl .sx-hero .hx-hero-note a:hover { color: var(--pb-900); }
.gbl a.gbl-btn-soft:hover .gbl-rot90 { transform: rotate(90deg) translateX(3px); }
.gbl .sx-hero .hx-pa-hero { box-shadow: 0 0 0 1px var(--pb-100), 0 40px 80px -30px rgba(24, 50, 140, .35); }
.gbl .sx-hero .hx-pause.is-dark, .gbl .sx-hero .hx-pause.is-dark:hover { color: var(--ink); background: #fff; border-color: var(--line); backdrop-filter: none; -webkit-backdrop-filter: none; }
.gbl .sx-hero .hx-pause.is-dark:hover { border-color: var(--pb-200); color: var(--pb-700); }
.sx-hero .sx-crumbs { display: block; margin-bottom: 0; color: var(--body); }
.sx-hero .sx-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.sx-hero .sx-crumbs li { display: inline-flex; align-items: center; }
.sx-hero .sx-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 .sx-hero .sx-crumbs a { display: inline-block; padding: 11px 0; margin: -11px 0; color: var(--pb-700); }
.gbl .sx-hero .sx-crumbs a:hover { color: var(--pb-900); }
@media (max-width: 1100px) {
  .sol .sx-hero .hx-hero-copy { padding-top: 56px; }
  .sx-hero .sx-crumbs ol { justify-content: center; }
}
@media (max-width: 768px) {
  .sol .sx-hero .hx-hero-copy { padding-top: 36px; }
  .sx-hero .sx-crumbs ol { font-size: 14px; }
  .gbl .sol .sx-hero .hx-h1, .gbl.sol .sx-hero .hx-h1 { font-size: 34px; }
}

/* hero scene: the board's monthly checklist */
.sx-todo { padding: 14px 16px 6px; }
.sx-todo-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sx-todo-h strong { font-size: 15px; }
.sx-todo-n { font-size: 12px; font-weight: 600; color: var(--pa-mute); }
.sx-todo-n b { color: var(--green); font-variant-numeric: tabular-nums; }
.sx-todo li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 2px; border-bottom: 1px dashed var(--pa-line); }
.sx-todo li:last-child { border-bottom: 0; }
.sx-todo li b { display: block; font-size: 13px; color: var(--pa-mute); transition: color .3s; }
.sx-todo li small { display: block; font-size: 11.5px; color: var(--pa-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-todo li.is-done b { color: var(--pa-ink); }
.sx-todo li > em { font-style: normal; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: #f0f2f5; color: var(--pa-mute); opacity: .4; transition: opacity .3s, background .3s, color .3s; }
.sx-todo li.is-done > em { opacity: 1; background: var(--pb-50); color: var(--pb-700); }
.sx-chk { width: 22px; height: 22px; border-radius: 50%; border: 1.5px dashed #c9cfd8; position: relative; transition: background .3s, border-color .3s; }
.sx-chk::after { content: ""; position: absolute; left: 7px; top: 3.5px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .35s var(--ease) .1s; }
.is-done > .sx-chk { background: var(--green); border: 1.5px solid var(--green); animation: sx-pop .5s var(--ease); }
.is-done > .sx-chk::after { transform: rotate(45deg) scale(1); }
@keyframes sx-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.15); } 100% { transform: none; } }
.sx-todo .sx-send { height: 28px; font-size: 12px; opacity: .45; transition: opacity .3s; }
.sx-todo li.is-done .sx-send { opacity: 1; }
.sx-toast { top: auto; bottom: 26px; }
.sx-float-gable { top: 150px; }

/* ---------- pains → outcomes: each card strikes its "before" and brings in the "after" ---------- */
.sol .sx-pains-sec { padding-bottom: 24px; }
.sx-pains { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sx-pain { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 26px 24px 28px; border-radius: 28px; background: #fff; border: 1px solid var(--line); overflow: hidden; transition: border-color .5s, box-shadow .5s; }
.sx-pain::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--pb-600), #8fb1f3); transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s var(--ease); }
.sx-pain-ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--bg); color: var(--muted); transition: background .5s, color .5s, box-shadow .5s; }
.sx-pain-ico svg { width: 24px; height: 24px; }
.sx-tag { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.sx-before { font-size: 17px; line-height: 1.45; color: var(--ink); }
.sx-before .sx-tag { color: #9a5b00; }
.sx-before s { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 58% / 0 1.5px no-repeat; transition: background-size .7s var(--ease), color .6s; }
.sx-after { font-size: 17px; line-height: 1.45; color: var(--ink); font-weight: 600; }
.sx-after .sx-tag { color: var(--pb-700); }
.gbl-js .sx-pain .sx-after { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease) .35s, transform .6s var(--ease) .35s; }
.sx-pain.is-fixed { border-color: var(--pb-200); box-shadow: 0 24px 48px -36px rgba(24, 50, 140, .45); }
.sx-pain.is-fixed::before { transform: none; }
.sx-pain.is-fixed .sx-pain-ico { background: var(--pb-600); color: #fff; box-shadow: 0 10px 22px -10px rgba(34, 86, 211, .6); }
.sx-pain.is-fixed .sx-before s { background-size: 100% 1.5px; color: var(--muted); }
.sx-pain.is-fixed .sx-after { opacity: 1; transform: none; }
@media (max-width: 1100px) { .sx-pains { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) {
  .sx-pains { grid-template-columns: 1fr; gap: 12px; }
  .sx-pain { padding: 20px 20px 22px; border-radius: 22px; flex-direction: row; flex-wrap: wrap; gap: 10px 14px; }
  .sx-pain-ico { width: 40px; height: 40px; }
  .sx-pain p { flex: 1 1 calc(100% - 54px); }
  .sx-pain .sx-after { margin-left: 54px; }
  .sx-before, .sx-after { font-size: 16px; }
}

.gbl a.sx-src { font-size: .7em; vertical-align: super; line-height: 0; color: var(--pb-700); font-weight: 600; padding: 0 2px; }
.sx-note { margin-top: 20px; text-align: center; font-size: 14px; color: var(--muted); }
.gbl .sx-note a { color: var(--pb-700); }

/* ---------- tour scenes (shared bits) ---------- */
.sol .sx-tour { padding-top: 80px; }
.sx-box { width: 16px; height: 16px; flex: none; border-radius: 4px; border: 1.5px solid #c3c9d3; background: #fff; position: relative; transition: background .2s, border-color .2s; }
.sx-box::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .2s; }
.sx-box.is-on, .is-sel > .sx-box { background: var(--pa-blue); border-color: var(--pa-blue); }
.sx-box.is-on::after, .is-sel > .sx-box::after { transform: rotate(45deg) scale(1); }
.sx-total b { font-size: 13px; font-weight: 600; color: #9a5b00; background: var(--amber-50); padding: 5px 11px; border-radius: 999px; font-variant-numeric: tabular-nums; }

/* 01 past due */
.sx-late { padding: 6px 14px; }
.sx-late-bar { display: flex; align-items: center; gap: 10px; padding: 8px 2px 10px; border-bottom: 1px solid var(--pa-line); font-size: 12.5px; font-weight: 600; color: var(--pa-text); }
.sx-remind { margin-left: auto; }
.sx-late-row { display: grid; grid-template-columns: 16px 30px minmax(0, 1fr) auto 40px; gap: 10px; align-items: center; padding: 10px 2px; border-bottom: 1px dashed var(--pa-line); border-radius: 8px; transition: background .4s, opacity .4s; }
.sx-late-row:last-child { border-bottom: 0; }
.sx-late-row.is-sel { background: #f7f9fe; }
.sx-late-amt { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--pa-ink); }
.sx-late-row.is-paid { animation: hx-flash 1.6s ease-out; }
.sx-late-row.is-paid .sx-late-amt { color: var(--green); background: var(--green-50); padding: 3px 9px; border-radius: 999px; font-size: 11.5px; }
.sx-late-row.is-paid .hx-pay-who small { text-decoration: line-through; }
.sx-sent { display: inline-flex; gap: 4px; color: var(--pa-blue); }
.sx-sent svg { width: 15px; height: 15px; }
.gbl-js [data-gbl-scene] .sx-sent:not(.is-on) { display: inline-flex !important; visibility: hidden; }
.sx-rule { margin-top: 10px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.sx-rule-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--pb-50); color: var(--pb-700); flex: none; }
.sx-rule-ico svg { width: 18px; height: 18px; }
.sx-rule > span:nth-child(2) { flex: 1; min-width: 0; }
.sx-rule strong { display: block; font-size: 13px; }
.sx-rule small { font-size: 11.5px; color: var(--pa-mute); }

/* 02 broadcast: one notice to every home, by email and then by text (real app: one channel per send) */
.sx-pa-bc svg:not([class]) { fill: currentColor; }
.sx-bc-sel { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: #eff7ff; color: var(--pb-600); font-style: normal; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sx-bc-sel svg { width: 13px; height: 13px; }
.sx-bc { padding: 14px 16px; }
.sx-bc-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.sx-bc-h strong { font-size: 13.5px; }
.sx-bc-as { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.sx-bc-as small { font-size: 12px; font-weight: 600; color: var(--pa-text); }
.sx-bc-as span { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border: 1px solid var(--pa-line); border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--pa-text); }
.sx-bc-as span.is-on { border-color: var(--pa-blue); background: #eff7ff; color: var(--pb-600); }
.sx-bc-as svg { width: 15px; height: 15px; }
.sx-bc-fld, .sx-bc-msg { margin: 0 0 10px; }
.sx-bc-fld small, .sx-bc-msg > small { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--pa-text); }
.sx-bc-fld > span { display: block; min-height: 32px; padding: 7px 10px; border: 1px solid #c9d0db; border-radius: 8px; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-bc-msg > p { min-height: 64px; margin: 0; padding: 8px 10px; border: 1px solid #c9d0db; border-radius: 8px; font-size: 12.5px; line-height: 1.5; }
.sx-bc-tok { display: inline-block; padding: 0 5px; border-radius: 4px; background: #e8eefb; color: var(--pb-600); font-weight: 600; font-size: 12px; }
.sx-bc-foot { display: flex; justify-content: flex-end; margin: 4px 0 0; }
.sx-bc-foot .gbl-pa-btn svg, .sx-bc-btns .gbl-pa-btn svg { width: 14px; height: 14px; }
.sx-bc-card { padding: 12px 14px; margin-top: 10px; }
.sx-bc-card .sx-bc-h { margin: 0; }
.sx-bc-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.sx-bc-tiles p { margin: 0; padding: 8px 10px; border: 1px solid var(--pa-line); border-radius: 8px; }
.sx-bc-tiles b { display: block; font-size: 15px; font-weight: 600; color: var(--pa-ink); font-variant-numeric: tabular-nums; }
.sx-bc-tiles small { font-size: 11px; color: var(--pa-mute); }
.sx-bc-k { margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--pa-text); }
.sx-bc-radios { display: flex; gap: 16px; margin: 0 0 8px; font-size: 12.5px; color: var(--pa-ink); }
.sx-bc-radios span { display: inline-flex; align-items: center; gap: 6px; }
.sx-bc-radios i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #c3c9d3; }
.sx-bc-radios .is-on i { border: 4px solid var(--pa-blue); }
.sx-bc-btns { display: flex; gap: 6px; }
.sx-bc-btns .gbl-pa-btn { height: 28px; padding: 0 10px; font-size: 11.5px; }
.sx-bc-prog { padding: 12px 14px; margin-bottom: 10px; border: 1px solid #c7dbf7; background: #f5f9ff; transition: background .4s, border-color .4s; }
.sx-bc-prog.is-done { border-color: #b7e0c8; background: #f2fbf5; }
.sx-bc-pt { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; }
.sx-bc-pt b { font-weight: 600; }
.sx-bc-pt small { margin-left: auto; font-size: 12px; color: var(--pa-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sx-bc-spin { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #c7dbf7; border-top-color: var(--pa-blue); animation: sx-bc-spin .8s linear infinite; }
@keyframes sx-bc-spin { to { transform: rotate(360deg); } }
.sx-bc-ok { display: none; flex: none; color: #047857; }
.sx-bc-ok svg { width: 16px; height: 16px; display: block; }
.sx-bc-bar { display: block; height: 6px; margin-top: 10px; border-radius: 3px; background: #dce6f5; overflow: hidden; }
.sx-bc-bar i { display: block; height: 100%; width: 7%; border-radius: 3px; background: var(--pa-blue); transition: width .45s var(--ease); }
.sx-bc-bar i.is-a { width: 32%; } .sx-bc-bar i.is-b { width: 67%; } .sx-bc-bar i.is-c { width: 91%; }
.sx-bc-hint { display: none; margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: var(--pa-text); }
.sx-bc-pbtn { display: none; gap: 8px; margin: 10px 0 0; }
.sx-bc-pbtn .gbl-pa-btn { height: 28px; font-size: 12px; }
.sx-bc-prog.is-done .sx-bc-spin, .sx-bc-prog.is-done .sx-bc-pt small, .sx-bc-prog.is-done .sx-bc-bar { display: none; }
.sx-bc-prog.is-done .sx-bc-ok { display: block; }
.sx-bc-prog.is-done .sx-bc-hint { display: block; }
.sx-bc-prog.is-done .sx-bc-pbtn { display: flex; }
.sx-bc-toast { position: absolute; z-index: 7; 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: 500; box-shadow: 0 16px 32px -12px rgba(15, 23, 42, .5); }
.sx-bc-toast svg { flex: none; width: 16px; height: 16px; color: #6ee7b7; }
.sx-bc-toast b { font-weight: 700; margin-right: 4px; }
.sx-gen { margin-top: 8px; justify-content: center; }

/* 03 approvals */
.sx-status { font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 999px; background: var(--amber-50); color: #9a5b00; transition: background .3s, color .3s; }
.sx-status.is-ok { background: var(--green-50); color: #0c7a5c; }
.sx-req { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 12px; }
.sx-req-main { padding: 16px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.sx-req-main strong { font-size: 14.5px; line-height: 1.35; }
.sx-req-main small { font-size: 12px; color: var(--pa-mute); }
.sx-req-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.sx-thumb { width: 64px; height: 52px; border-radius: 8px; background: linear-gradient(160deg, #334a78 0 38%, #8aa0c8 38% 42%, #1f3561 42% 100%); }
.sx-thumb.is-b { background: radial-gradient(circle at 70% 55%, #c9a85b 0 6%, transparent 7%), linear-gradient(180deg, #1f3561, #283f6e); }
.sx-file { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; background: #f4f6f9; font-size: 12px; color: var(--pa-text); align-self: center; }
.sx-file svg { width: 14px; height: 14px; color: #d64545; }
.sx-appr { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.sx-appr-h { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--pa-mute); }
.sx-appr-h strong { font-size: 13.5px; color: var(--pa-ink); }
.sx-appr-h b { color: var(--pa-ink); font-variant-numeric: tabular-nums; }
.sx-meter { display: block; height: 6px; border-radius: 6px; background: #e8edf3; overflow: hidden; margin: 6px 0 6px; }
.sx-meter i { display: block; height: 100%; width: 0; border-radius: 6px; background: var(--green); transition: width .7s var(--ease); }
.sx-meter i.w1 { width: 33.3%; } .sx-meter i.w2 { width: 66.6%; } .sx-meter i.w3 { width: 100%; }
.sx-appr-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px dashed var(--pa-line); }
.sx-appr-row b { display: block; font-size: 12.5px; }
.sx-appr-row small { display: block; font-size: 11.5px; color: var(--pa-mute); }
.sx-appr-row em { font-style: normal; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--amber-50); color: #9a5b00; transition: background .3s, color .3s; }
.sx-appr-row em.is-ok { background: var(--green-50); color: #0c7a5c; animation: sx-pop .5s var(--ease); }

/* 04 board handoff */
.sx-board { padding: 4px 14px; }
.sx-board-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px dashed var(--pa-line); transition: opacity .5s; }
.sx-board-row:last-child { border-bottom: 0; }
.sx-board-row b { display: block; font-size: 12.5px; }
.sx-board-row small { display: block; font-size: 11.5px; color: var(--pa-mute); }
.sx-board-row em { font-style: normal; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: #f0f2f5; color: var(--pa-text); }
.sx-board-row em.is-blue { background: var(--pb-50); color: var(--pb-700); }
.sx-board-row.is-out { opacity: .5; }
.sx-board-row.is-out b { text-decoration: line-through; }
.sx-board-row.is-new { background: #f7f9fe; border-radius: 8px; padding-left: 6px; padding-right: 6px; margin: 0 -6px; }
.sx-board .hx-typed::after { content: ""; display: inline-block; width: 1.5px; height: 12px; background: currentColor; margin-left: 1px; vertical-align: -1px; animation: gbl-caret 1s steps(1) infinite; }
.sx-perms { margin-top: 10px; padding: 12px 14px; }
.sx-perms-h, .sx-perm { display: grid; grid-template-columns: minmax(0, 1fr) 56px 56px; align-items: center; justify-items: center; }
.sx-perms-h { font-size: 11.5px; font-weight: 600; color: var(--pa-mute); padding-bottom: 6px; border-bottom: 1px solid var(--pa-line); }
.sx-perms-h strong { justify-self: start; font-size: 13px; color: var(--pa-ink); }
.sx-perm { padding: 7px 0; font-size: 12.5px; }
.sx-perm span { justify-self: start; }
.sx-perm .gbl-toggle { width: 30px; height: 18px; }
.sx-perm .gbl-toggle::after { width: 14px; height: 14px; }
.sx-perm .gbl-toggle.is-on::after { transform: translateX(12px); }
.gbl-js [data-gbl-scene] .sx-perm .gbl-toggle.gbl-sx:not(.is-on) { background: #d5d9e0; }
.gbl .sx-keep { left: 50%; right: auto; translate: -50% 0; bottom: 24px; width: max-content; max-width: calc(100% - 32px); z-index: 9; }
.gbl-js .gbl .sx-keep.is-on, .gbl-js .sx-keep.is-on { animation: gbl-pop .6s var(--ease) both; }

/* ---------- Gable for boards (indigo sub-brand inside the blue page) ---------- */
.sx-gable-sec { padding-top: 40px; }
.sx-gable { --g: #4645b6; --g-700: #34338f; --g-200: #c8cdf2; --g-50: #f1f4fc;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 0; border-radius: var(--r-xl); overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.sx-gable-copy { padding: 72px 56px 72px 64px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.gbl a.sx-gable-pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px; border-radius: 999px; background: var(--g-50); border: 1px solid #e0e4f7; color: #4645b6; font-size: 15px; font-weight: 600; line-height: 1.2; }
.sx-gable-pill .hx-hero-pill-new { background: #4645b6; color: #fff; }
.sx-gable .gbl-accent { color: #4645b6; }
.sx-gable .gbl-ticks li::after { border-color: #4645b6; }
.sx-gable .gbl-ticks li::before { box-shadow: inset 0 0 0 1px #c8cdf2; }
.gbl-home2 a.hx-more.sx-more-g { color: #4645b6; }
.gbl-home2 a.hx-more.sx-more-g:hover { color: #262570; }
.sx-gable-stage { position: relative; padding: 44px 48px 0; display: flex; align-items: flex-end;
  background: radial-gradient(60% 70% at 80% 10%, rgba(155, 156, 216, .45), transparent 70%), linear-gradient(160deg, #f1f4fc, #e4e7fb); }
.sx-gable-scene { width: 100%; }
.gbl .sx-dr { height: 520px; border-radius: 18px 18px 0 0; box-shadow: 0 30px 60px -24px rgba(38, 37, 112, .35); overflow: hidden; }
@media (max-width: 1100px) {
  .sx-gable { grid-template-columns: 1fr; }
  .sx-gable-copy { padding: 56px 40px 40px; }
  .sx-gable-stage { padding: 32px 32px 0; }
}
@media (max-width: 768px) {
  .sx-gable { border-radius: 28px; }
  .sx-gable-copy { padding: 36px 22px 28px; }
  .sx-gable-stage { padding: 20px 12px 0; }
  .gbl .sx-dr { height: 470px; }
}

/* ---------- leaving a management company ---------- */
.sx-leave { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; padding: 72px 64px; border-radius: var(--r-xl); background: linear-gradient(160deg, #fff 30%, var(--pb-50)); border: 1px solid var(--line); }
.sx-leave-copy { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.sx-leave-steps { counter-reset: s; display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.sx-leave-steps li { counter-increment: s; position: relative; padding-left: 48px; font-size: 17px; line-height: 1.5; }
.sx-leave-steps li::before { content: counter(s); position: absolute; left: 0; top: -2px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--pb-600); color: #fff; font-size: 15px; font-weight: 600; }
.sx-leave-steps b { color: var(--ink); }
.sx-leave-books { display: flex; gap: 12px; align-items: center; padding: 14px 18px; border-radius: 16px; background: #fff; border: 1px solid var(--line); font-size: 16px; }
.sx-leave-books svg { width: 24px; height: 24px; flex: none; color: var(--pb-700); }
.gbl .sx-leave-books a { color: var(--pb-700); font-weight: 600; }
.sx-leave-proof { display: flex; flex-direction: column; gap: 16px; }
.sx-leave-video { background: #fff; }
.gbl a.sx-leave-card { display: flex; flex-direction: column; gap: 6px; padding: 24px 28px; border-radius: 24px; background: var(--pb-800); color: #dce8ff; transition: transform .3s var(--ease), box-shadow .3s; }
.gbl a.sx-leave-card:hover { transform: translateY(-3px); box-shadow: 0 24px 40px -24px rgba(24, 50, 140, .7); color: #dce8ff; }
.sx-leave-card b { font-size: 30px; line-height: 1.2; color: #fff; }
.gbl-home2 .sx-leave-card .hx-more { color: #fff; margin-top: 6px; }
@media (max-width: 1100px) { .sx-leave { grid-template-columns: 1fr; padding: 56px 40px; gap: 36px; } }
@media (max-width: 768px) {
  .sx-leave { padding: 36px 20px 20px; border-radius: 28px; }
  .sx-leave-steps li { font-size: 16px; }
  .sx-leave-card b { font-size: 24px; }
}

/* ---------- stories: text cards next to the videos ---------- */
.gbl a.sx-story-link { display: flex; flex-direction: column; gap: 8px; padding: 28px 28px 26px; color: var(--body); transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.gbl a.sx-story-link:hover { transform: translateY(-3px); border-color: var(--pb-200); color: var(--body); }
.sx-story-k { font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--pb-700); }
.sx-story-link strong { font-size: 24px; color: var(--ink); line-height: 1.25; }
.sx-story-link > span:not(.sx-story-k) { font-size: 16.5px; }
.sx-story-link .hx-more { margin-top: auto; padding-top: 8px; }

/* ---------- story cards with a photo (V6, self + builders): same box as a video card next to them ---------- */
.gbl a.sx-story-link.has-img { padding: 16px 16px 24px; }
.gbl .sx-story-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 18px; margin-bottom: 6px; }
.sx-story-link.has-img > :not(.sx-story-img) { margin-left: 8px; margin-right: 8px; }

/* =========================================================================
   Management companies (solutions-pmc2.html)
   ========================================================================= */
.sp-portfolio { padding: 14px 16px 8px; }
.sp-portfolio-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.sp-portfolio-h strong { font-size: 15px; }
.sp-portfolio-h span { font-size: 12px; font-weight: 600; color: var(--pa-mute); }
.sp-row { display: grid; grid-template-columns: minmax(0, 1.4fr) 56px 80px minmax(0, 1.1fr); gap: 10px; align-items: center; padding: 9px 4px; border-bottom: 1px dashed var(--pa-line); font-size: 12.5px; border-radius: 8px; transition: background .3s; }
.sp-row:last-child { border-bottom: 0; }
.sp-row.is-head { font-size: 11.5px; font-weight: 600; color: var(--pa-mute); border-bottom: 1px solid var(--pa-line); }
.sp-row b { color: var(--pa-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-row .sp-num { font-variant-numeric: tabular-nums; color: var(--pa-text); }
.sp-row.is-hit { background: var(--pa-blue-50); }
.sp-pill { justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-style: normal; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--green-50); color: #0c7a5c; white-space: nowrap; }
.sp-pill.is-amber { background: var(--amber-50); color: #9a5b00; }
.sp-pill.is-blue { background: var(--pb-50); color: var(--pb-700); }
.sp-bar { display: block; height: 6px; border-radius: 6px; background: #e8edf3; overflow: hidden; }
.sp-bar i { display: block; height: 100%; border-radius: 6px; background: var(--green); width: var(--w); }
.gbl-js .is-playing .sp-bar i, .gbl-js [data-gbl-scene] .sp-bar i { animation: sp-grow 1s var(--ease) both; }
@keyframes sp-grow { from { width: 0; } }
.sp-hero-scene .hx-org-menu { top: 58px; right: 18px; width: 280px; }
.sp-hero-scene .hx-org { height: 34px; }
.sp-hero-scene .hx-org .gbl-pa-org { font-size: 13px; }
.sp-comm { display: none; }
.gbl-js [data-gbl-scene] .sp-comm.is-on { display: block; }

/* gable for managers: answers switch with the community */
.sp-ctx { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--pa-text); padding: 4px 10px; border-radius: 999px; background: #f4f6f9; margin-left: auto; margin-right: 12px; }
.sp-ctx svg { width: 13px; height: 13px; color: var(--pa-blue); }

/* onboarding strip for new communities */
.sp-add { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 56px; align-items: center; padding: 72px 64px; border-radius: var(--r-xl); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.sp-add-copy { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.sp-add-stage { position: relative; padding: 28px; border-radius: 28px; background: radial-gradient(70% 90% at 90% 0%, rgba(150, 185, 250, .42), transparent 70%), linear-gradient(160deg, #eff7ff, #dcebfd); }
.sp-onb { padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.sp-onb-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.sp-onb-h strong { font-size: 15px; }
.sp-onb-h span { font-size: 12px; font-weight: 600; color: var(--pa-mute); }
.sp-onb li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 2px; border-bottom: 1px dashed var(--pa-line); font-size: 13px; }
.sp-onb li:last-child { border-bottom: 0; }
.sp-onb li b { display: block; font-size: 13px; color: var(--pa-mute); transition: color .3s; }
.sp-onb li small { display: block; font-size: 11.5px; color: var(--pa-mute); }
.sp-onb li.is-done b { color: var(--pa-ink); }
.sp-onb li > em { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--pa-mute); font-variant-numeric: tabular-nums; }
.sp-onb li.is-done > em { color: #0c7a5c; }
@media (max-width: 1100px) { .sp-add { grid-template-columns: 1fr; padding: 56px 40px; gap: 36px; } }
@media (max-width: 768px) {
  .sp-add { padding: 36px 20px 20px; border-radius: 28px; }
  .sp-add-stage { padding: 14px; border-radius: 20px; }
  .sp-row { grid-template-columns: minmax(0, 1.4fr) 60px minmax(0, 1fr); }
  .sp-row > :nth-child(3) { display: none; }
}

/* =========================================================================
   Hub (solutions2.html)
   ========================================================================= */
.sh-hero { padding-bottom: 0; }
.sh-hero-card { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-xl); color: #fff; text-align: center;
  background: linear-gradient(150deg, #1c3a94 0%, #2256d3 48%, #2a6be6 100%); padding: 80px 56px 0; }
.sh-hero-card .hx-h1 { margin: 18px auto 0; max-width: 900px; font-size: clamp(40px, 4.2vw, 60px); }
.sh-hero-card .hx-hero-sub { margin: 22px auto 0; max-width: 760px; }
.sh-hero-card .sx-crumbs { justify-content: center; }

/* audience picker: two big radio-like tabs on the hero, the panel below them swaps */
.sh-pick { position: relative; margin: 44px auto 0; max-width: 1180px; }
.sh-pick-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 900px; margin: 0 auto; }
.gbl .sh-tab { position: relative; display: flex; align-items: center; gap: 16px; padding: 18px 22px; border-radius: 22px; text-align: left; color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); transition: background .25s, border-color .25s, color .25s, box-shadow .25s; }
.gbl .sh-tab:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.gbl .sh-tab.is-active { background: #fff; color: var(--ink); border-color: #fff; box-shadow: 0 18px 40px -18px rgba(10, 20, 70, .6); }
.sh-tab-ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; flex: none; background: rgba(255, 255, 255, .14); color: #fff; transition: background .25s, color .25s; }
.sh-tab.is-active .sh-tab-ico { background: var(--pb-600); color: #fff; }
.sh-tab-ico svg { width: 24px; height: 24px; }
.sh-tab-txt b { display: block; font-size: 19px; line-height: 1.3; }
.sh-tab-txt small { display: block; font-size: 15px; line-height: 1.4; opacity: .85; }
.sh-tab.is-active .sh-tab-txt small { color: var(--muted); opacity: 1; }
.sh-tab .hx-tab-bar { left: 22px; right: 22px; bottom: 8px; }
.sh-tab.is-active .hx-tab-bar { background: var(--pb-100); }
.sh-tab.is-active.is-timing .hx-tab-bar i { animation: gbl-progress var(--gbl-dur, 8s) linear forwards; }
.sh-pick.is-paused .hx-tab-bar i { animation-play-state: paused !important; }
.sh-panel { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 32px; align-items: end; margin-top: 40px; text-align: left; }
.sh-panel[hidden] { display: none; }
.sh-panel-copy { padding: 0 0 64px 24px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.sh-panel.is-active .sh-panel-copy > * { animation: gbl-pop .6s var(--ease) both; }
.sh-panel.is-active .sh-panel-copy > :nth-child(2) { animation-delay: .06s; }
.sh-panel.is-active .sh-panel-copy > :nth-child(3) { animation-delay: .12s; }
.sh-panel.is-active .sh-panel-copy > :nth-child(4) { animation-delay: .18s; }
.sh-panel-copy h2 { color: #fff; font-size: 32px; line-height: 1.2; }
.sh-panel-copy p { color: rgba(255, 255, 255, .9); font-size: 18px; }
.sh-panel-copy .hx-hero-note { margin-top: 0; flex-direction: column; gap: 8px; }
.sh-panel-copy .gbl-btn { margin-top: 6px; }
.sh-stage { position: relative; min-width: 0; }
.sh-stage .gbl-pa { height: 520px; border-radius: 20px 20px 0 0; box-shadow: 0 -2px 0 8px rgba(255, 255, 255, .12), 0 40px 80px -20px rgba(12, 24, 80, .6); }
.sh-stage .gbl-pa-side { width: 170px; }
.sh-home { margin: 20px auto 0; text-align: center; font-size: 16px; color: var(--muted); }
.gbl .sh-home a { color: var(--pb-700); font-weight: 600; }
.gbl .sh-home a:hover { color: var(--pb-900); }
.sh-hero-card > .hx-pause-row { position: absolute; top: 24px; right: 24px; margin: 0; z-index: 3; }
.sh-hero-card > .hx-pause-row .hx-pause { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .28); color: #fff; box-shadow: none; }
.sh-hero-card > .hx-pause-row .hx-pause:hover { background: rgba(255, 255, 255, .2); color: #fff; }
@media (max-width: 768px) { .sh-hero-card > .hx-pause-row { position: static; justify-content: center; margin: 14px 0 0; } }

/* compare table */
.sh-compare { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-card); overflow: hidden; }
.sh-compare table { width: 100%; border-collapse: collapse; font-size: 17px; }
.sh-compare th, .sh-compare td { padding: 18px 28px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-2); }
.sh-compare tr:last-child > * { border-bottom: 0; }
.sh-compare thead th { padding-top: 28px; padding-bottom: 22px; font-size: 20px; color: var(--ink); background: var(--bg); }
.sh-compare thead th small { display: block; font-size: 15px; font-weight: 400; color: var(--muted); margin-top: 2px; }
.sh-compare tbody th { width: 24%; font-size: 15px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.sh-compare td { color: var(--ink); }
.sh-compare td small { display: block; color: var(--muted); font-size: 15px; margin-top: 2px; }
.sh-compare .sh-same td { background: #f7faff; }
.sh-compare tfoot td { padding: 22px 28px 28px; border-top: 1px solid var(--line); }
.sh-compare .hx-more { font-size: 17px; }
.gbl-js .sh-compare tbody tr { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.gbl-js .sh-compare.is-in tbody tr { opacity: 1; transform: none; }
.gbl-js .sh-compare.is-in tbody tr:nth-child(2) { transition-delay: .06s; }
.gbl-js .sh-compare.is-in tbody tr:nth-child(3) { transition-delay: .12s; }
.gbl-js .sh-compare.is-in tbody tr:nth-child(4) { transition-delay: .18s; }
.gbl-js .sh-compare.is-in tbody tr:nth-child(5) { transition-delay: .24s; }
.gbl-js .sh-compare.is-in tbody tr:nth-child(6) { transition-delay: .3s; }
.gbl-js .sh-compare.is-in tbody tr:nth-child(7) { transition-delay: .36s; }

/* more ways we help */
.sh-more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sh-more-note { max-width: 760px; margin: 32px auto 0; text-align: center; font-size: 16px; line-height: 1.6; color: var(--body); }
.gbl .sh-more-note a { color: var(--pb-700); font-weight: 600; }
.gbl a.sh-card { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; padding: 32px 30px; border-radius: 28px; background: #fff; border: 1px solid var(--line); color: var(--body); transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.gbl a.sh-card:hover { transform: translateY(-4px); border-color: var(--pb-200); box-shadow: 0 30px 60px -36px rgba(24, 50, 140, .4); color: var(--body); }
.sh-card-ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--pb-50); color: var(--pb-700); }
.sh-card-ico svg { width: 24px; height: 24px; }
.sh-card.is-g .sh-card-ico { background: #f1f4fc; color: #4645b6; }
.sh-card strong { font-size: 22px; line-height: 1.3; color: var(--ink); }
.sh-card > span:not(.sh-card-ico) { font-size: 16.5px; }
.sh-card .hx-more { margin-top: auto; padding-top: 6px; }
.gbl-home2 .sh-card.is-g .hx-more { color: #4645b6; }

/* stories filter */
.sh-filter { display: inline-flex; padding: 4px; border-radius: 999px; background: #fff; border: 1px solid var(--line); margin: 0 auto 28px; }
.gbl .sh-filter button { padding: 9px 18px; border-radius: 999px; font-size: 15.5px; font-weight: 600; color: var(--muted); transition: background .2s, color .2s; }
.gbl .sh-filter button:hover { color: var(--ink); }
.gbl .sh-filter button[aria-pressed="true"] { background: var(--pb-600); color: #fff; }
.sh-filter-row { display: flex; justify-content: center; }
.sh-stories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sh-stories > [hidden] { display: none; }
.sh-stories .hx-story { animation: gbl-pop .5s var(--ease) both; }

@media (max-width: 1100px) {
  .sh-hero-card { padding: 64px 32px 0; }
  .sh-panel { grid-template-columns: 1fr; gap: 24px; }
  .sh-panel-copy { padding: 0 8px; align-items: center; text-align: center; }
  .sh-panel-copy .hx-hero-note { align-items: center; }
  .sh-stage .gbl-pa-side { display: none; }
  .sh-more { grid-template-columns: 1fr; }
  .sh-stories { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .sh-hero-card { padding: 44px 16px 0; border-radius: 28px; }
  .sh-hero-card .hx-h1 { font-size: 36px; }
  .sh-pick-tabs { grid-template-columns: 1fr; gap: 10px; }
  .gbl .sh-tab { padding: 14px 16px; border-radius: 18px; }
  .sh-tab-ico { width: 40px; height: 40px; }
  .sh-tab-txt b { font-size: 17px; }
  .sh-tab-txt small { font-size: 14px; }
  .sh-panel-copy h2 { font-size: 26px; }
  .sh-panel-copy p { font-size: 16px; }
  .sh-stage .gbl-pa { height: 430px; border-radius: 16px 16px 0 0; }
  .sh-compare { border-radius: 24px; overflow-x: auto; }
  .sh-compare table { font-size: 15px; min-width: 620px; }
  .sh-compare th, .sh-compare td { padding: 14px 16px; }
  .sh-compare thead th { font-size: 17px; }
  .sh-stories { grid-template-columns: 1fr; }
}

/* =========================================================================
   Phones: keep the scenes readable (secondary columns hide)
   ========================================================================= */
@media (max-width: 768px) {
  .sx-todo li > em, .sx-todo li small { display: none; }
  .sx-todo li { grid-template-columns: 22px minmax(0, 1fr) auto; }
  .sx-float-gable { display: none !important; }
  .sx-late-row { grid-template-columns: 16px minmax(0, 1fr) auto; }
  .sx-late-row .hx-av, .sx-late-row .sx-sent { display: none !important; }
  .sx-req { grid-template-columns: 1fr; }
  .sx-req-main { display: none; }
  .sx-bc-msg > p { min-height: 0; }
  .sx-bc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-bc-tiles small { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .gbl-js .sx-pain .sx-after, .gbl-js .sh-compare tbody tr { opacity: 1; transform: none; }
}

/* ---------- management-company page: remaining bits ---------- */
.gbl-pa-pill.sp-pmc { background: var(--pa-blue-50); color: var(--pa-blue); transition: background .3s, color .3s; }
.gbl-pa-pill.sp-pmc.is-off-pmc { background: #fff; color: var(--pa-ink); }
.sp-float-gable { top: 170px; }
.sp-row.is-closed { background: #f6fbf9; }
.sp-pill.is-amber.is-ok { background: var(--green-50); color: #0c7a5c; animation: sx-pop .5s var(--ease); }
.sx-total b.sp-close-n.is-done { background: var(--green-50); color: #0c7a5c; }
.sp-vendor { margin-top: 8px; }
.sh-stage .hx-hero-scene.sh-scene { width: 100%; }
.sh-stage .gbl-float { display: none !important; }
/* One login tab: the hero's switcher scene (@scene pmc-hero → .sh-scene) sized like the other tour frames */
.gbl .hx-panel-stage > .sh-scene .hx-pa-hero { height: 486px; border-radius: 16px 16px 0 0; box-shadow: 0 1px 2px rgba(28, 39, 55, .06), 0 30px 60px -24px rgba(24, 50, 140, .4); }
.hx-panel-stage > .sh-scene .gbl-float { display: none !important; }
/* featured story: Your HOA Community Management (portrait | story, quote, numbers) */
.sp-yhcm { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); border-radius: var(--r-xl); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-card); overflow: hidden; }
.sp-yhcm-photo { position: relative; display: flex; align-items: flex-end; justify-content: center; min-height: 100%; padding-top: 40px; background: radial-gradient(80% 70% at 50% 100%, rgba(150, 185, 250, .55), transparent 70%), linear-gradient(170deg, #eff7ff, #dcebfd); isolation: isolate; }
.sp-yhcm-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(42, 107, 230, .16) 1px, transparent 1px); background-size: 20px 20px; mask-image: linear-gradient(180deg, #000, transparent 75%); -webkit-mask-image: linear-gradient(180deg, #000, transparent 75%); }
.gbl .sp-yhcm-photo img { display: block; width: 118%; max-width: none; height: auto; margin: 0 -9%; }
.sp-yhcm-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 56px 56px 52px; }
/* the company's logo in place of the headshot (Dima 2026-10-15): on a white plate, since its gray-blue roof fades into the panel */
.sp-yhcm-photo.is-logo { align-items: center; padding: 40px; }
.sp-yhcm-logo { display: block; width: 100%; max-width: 380px; padding: 36px 40px; border-radius: 24px; background: #fff; box-shadow: var(--shadow-card); }
.gbl .sp-yhcm-photo.is-logo img { width: 100%; height: auto; max-height: none; margin: 0; }
.gbl .sp-yhcm-h { font-size: 32px; line-height: 1.25; font-weight: 600; color: var(--ink); margin: 0; }
.gbl .sp-yhcm-q { margin: 0; padding: 0 0 0 20px; border: 0; border-left: 3px solid var(--pb-200); font-size: 19px; line-height: 1.55; font-weight: 400; font-style: normal; color: var(--ink); quotes: none; }
.sp-yhcm-q::before, .sp-yhcm-q::after { content: none; }
.sp-yhcm .hx-who-line { margin: -6px 0 0 23px; padding: 0; }
.sp-yhcm-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; margin: 8px 0 4px; padding: 0; list-style: none; }
.sp-yhcm-nums li { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 16px 18px; border-radius: 18px; background: var(--bg); }
.sp-yhcm-nums b { font-size: 24px; line-height: 1.25; font-weight: 600; color: var(--pb-700); }
.sp-yhcm-nums span { font-size: 14.5px; line-height: 1.45; color: var(--body); }
@media (max-width: 1100px) {
  .sp-yhcm { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .sp-yhcm-copy { padding: 44px 40px 40px; }
  .sp-yhcm-nums { grid-template-columns: 1fr; }
  .sp-yhcm-nums li { flex-direction: row; align-items: baseline; gap: 12px; padding: 12px 16px; }
  .sp-yhcm-nums b { flex: none; min-width: 150px; font-size: 20px; }
  .sp-yhcm-photo { overflow: hidden; }
  .gbl .sp-yhcm-photo img { width: auto; height: 86%; max-height: 600px; margin: 0; }
  .sp-yhcm-photo.is-logo { padding: 32px 28px; }
  .sp-yhcm-logo { padding: 28px 26px; }
}
@media (max-width: 768px) {
  .sp-float-gable { display: none !important; }
  .sp-hero-scene .hx-org-menu { right: 8px; width: 240px; }
  .gbl .hx-panel-stage > .sh-scene .hx-pa-hero { height: 440px; }
  .sp-yhcm { grid-template-columns: 1fr; border-radius: 28px; }
  .sp-yhcm-photo { height: 280px; min-height: 0; padding-top: 24px; overflow: hidden; }
  .gbl .sp-yhcm-photo img { width: auto; height: 100%; margin: 0; }
  .sp-yhcm-photo.is-logo { height: auto; padding: 32px 20px; }
  .sp-yhcm-logo { max-width: 300px; padding: 24px 28px; }
  .sp-yhcm-copy { padding: 28px 20px 28px; gap: 16px; }
  .gbl .sp-yhcm-h { font-size: 24px; }
  .gbl .sp-yhcm-q { font-size: 17px; padding-left: 16px; }
  .sp-yhcm .hx-who-line { margin-left: 19px; }
  .sp-yhcm-nums li { flex-direction: column; gap: 2px; }
  .sp-yhcm-nums b { min-width: 0; }
}