/* Property hub (/property): "Everything in Property" (index, Property Ecosystem group, tiles for the
   Website Builder, ProjectSG Suite App and CPC Intelligence Suite), the quick leads estimate and the
   Agent Packages in "Choose your path". Every class starts with phub (build.py PAGE_CSS); the file loads
   between base.css and top.css, so selectors that meet brand.css rules carry a second class.
   Motion: transform and opacity only, run under html.motion while the visual is on screen (.is-run, set by
   src/js/property-hub.js). Without motion every visual shows its finished still frame. Product mock-ups
   that stand for screenshots (search result, app screen, builder page) stay light in both themes. */

/* ---------- Index: the seven Property pages in menu order */
.phub-index { margin: 0 0 clamp(20px, 2.6vw, 32px); }
.phub-index ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.phub-index a { display: grid; gap: 10px; align-content: start; height: 100%; padding: 14px 14px 16px; border-radius: 14px; background: var(--panel); color: var(--ink); text-decoration: none; font: 600 14px/1.3 var(--font-body); letter-spacing: -0.01em; transition: box-shadow 0.2s, background 0.2s; }
.phub-index a b { display: inline-grid; place-items: center; justify-self: start; min-width: 30px; height: 30px; padding: 0 7px; border-radius: 9999px; background: var(--gold-grad); color: var(--gold-ink); font: 700 12px/1 var(--font-body); letter-spacing: 0.02em; }
.phub-index a:hover { box-shadow: inset 0 0 0 2px var(--gold-line); }
.phub-index a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
:root[data-theme="light"] .phub-index a { box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(60, 50, 20, 0.04); }
:root[data-theme="light"] .phub-index a:hover { box-shadow: 0 0 0 2px var(--gold-line); }
.phub-anchor { height: 0; }

/* ---------- Shared tile parts */
.phub-k { display: inline-flex; align-items: center; gap: 10px; font: 700 12px/1.25 var(--font-body); letter-spacing: 0.11em; text-transform: uppercase; color: var(--accent-text); }
.phub-k b { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 7px; border-radius: 9999px; background: var(--gold-grad); color: var(--gold-ink); font: 700 12px/1 var(--font-body); letter-spacing: 0.02em; }
.phub-k--sub::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--gold-grad); flex: none; }
.phub-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.phub-facts li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; font: 500 14.5px/1.5 var(--font-body); color: var(--ink-2); }
.phub-facts .psg-ic { width: 18px; height: 18px; margin-top: 2px; color: var(--trust); stroke-width: 2.2; }
.phub-meta { font: 500 13px/1.45 var(--font-body); color: var(--muted); }

.phub-tile { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: var(--radius-card); background: var(--panel); }
:root[data-theme="light"] .phub-tile { box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(60, 50, 20, 0.04); }
.phub-tile__body { flex: 1; display: flex; flex-direction: column; gap: 11px; padding: 20px 22px 24px; }
.phub-tile__h { font: 700 19px/1.3 var(--font-body); letter-spacing: -0.018em; color: var(--ink); }
.phub-tile__body > .more, .phub-tile__links { margin-top: auto; padding-top: 6px; }
.phub-tile__links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
/* Whole tile opens its page; the Download link sits above that layer. */
.phub-tile--link .phub-go::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius-card); }
.phub-tile--link .phub-dl { position: relative; z-index: 2; }
.phub-tile--link:hover { outline: 2px solid var(--gold-line); outline-offset: -2px; }
:root[data-theme="light"] .phub-tile--link:hover { box-shadow: 0 0 0 1px var(--line), 0 12px 32px rgba(140, 100, 30, 0.12); }
.phub-tile--link:has(.phub-go:focus-visible) { outline: 3px solid var(--ink); outline-offset: 2px; }
html.motion .phub-tile--link { transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s; }
html.motion .phub-tile--link:hover { transform: translateY(-3px); }

/* Visual stage on top of each tile. */
.phub-vis { position: relative; height: 230px; margin: 10px 10px 0; border-radius: 13px; overflow: hidden; isolation: isolate; background: radial-gradient(120% 120% at 100% 0%, rgba(212, 166, 72, 0.24), transparent 58%), var(--chip); }
.phub-vis__tag.psg-chip { position: absolute; top: 10px; right: 10px; z-index: 4; background: var(--panel); color: var(--ink-2); }

/* ---------- 01 Property Ecosystem: one group panel for the directory, Search Ads, lead management and the 360° system */
.phub-eco { padding: clamp(10px, 1.4vw, 16px); border-radius: 26px; background: linear-gradient(180deg, var(--gold-soft), rgba(0, 0, 0, 0) 78%); box-shadow: inset 0 0 0 1px rgba(212, 166, 72, 0.32); }
.phub-eco__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(16px, 2.4vw, 32px); align-items: center; }
.phub-eco__intro { display: grid; gap: 16px; align-content: center; padding: clamp(16px, 2.6vw, 36px) clamp(8px, 1.6vw, 20px); }
.phub-eco__h { font: 700 clamp(24px, 2.5vw, 34px)/1.14 var(--font-body); letter-spacing: -0.028em; color: var(--ink); }
.phub-eco__intro .body-2 { margin: 0; font-size: 16px; }
.phub-eco__go.psg-btn { justify-self: start; margin-top: 4px; }
.phub-eco__go .psg-ic { font-size: 18px; }
.phub-eco__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 16px); margin-top: clamp(10px, 1.4vw, 16px); }

/* Directory: the real directory home page pans inside a browser, a phone shows the same site. */
.phub-dir { position: relative; margin: 0; padding: clamp(16px, 2.4vw, 30px) 25% clamp(16px, 2.4vw, 30px) clamp(16px, 2.4vw, 30px); border-radius: 20px; overflow: hidden; isolation: isolate; background: radial-gradient(110% 120% at 100% 0%, rgba(212, 166, 72, 0.3), transparent 58%), var(--chip); }
.phub-dir__win { border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28); }
.phub-dir__bar { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; background: #eef0f3; }
.phub-dir__bar i { width: 8px; height: 8px; border-radius: 50%; background: #d5d8de; }
.phub-dir__bar span { margin: 0 auto; transform: translateX(-14px); padding: 4px 12px; border-radius: 9999px; background: #fff; font: 600 11px/1 var(--font-body); color: #5d636e; }
.phub-dir__view { aspect-ratio: 16 / 10; overflow: hidden; }
.phub-dir__img { width: 100%; height: auto; }
.phub-dir__phone { position: absolute; z-index: 2; top: 16%; right: clamp(12px, 2.4vw, 30px); width: 27%; padding: 5px; border-radius: 24px; background: #0e0f12; box-shadow: 0 22px 48px rgba(0, 0, 0, 0.4); }
.phub-dir__phone img { width: 100%; height: auto; border-radius: 19px; }
.phub-dir__count { position: absolute; z-index: 3; left: clamp(8px, 1.4vw, 16px); bottom: clamp(8px, 1.4vw, 16px); display: grid; gap: 2px; padding: 12px 16px; border-radius: 14px; background: rgba(14, 15, 18, 0.9); color: #fff; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3); }
.phub-dir__count b { font: 700 32px/1 var(--font-body); letter-spacing: -0.03em; color: #e9cf8a; font-variant-numeric: tabular-nums; }
.phub-dir__count span { font: 600 12.5px/1.2 var(--font-body); color: rgba(255, 255, 255, 0.86); }
.phub-dir__live { position: absolute; z-index: 3; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 9999px; background: rgba(14, 15, 18, 0.9); color: #fff; font: 600 12px/1 var(--font-body); }
.phub-dir__live i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #45c972; }
.phub-dir__live i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; box-shadow: 0 0 0 2px #45c972; opacity: 0; }
html.motion .phub-dir.is-run .phub-dir__img { animation: phub-pan 18s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; }
html.motion .phub-dir.is-run .phub-dir__phone { animation: phub-float 6s ease-in-out infinite alternate; }
html.motion .phub-dir.is-run .phub-dir__live i::after { animation: phub-ping 2s ease-out infinite; }
@keyframes phub-pan { 0%, 10% { transform: translateY(0); } 90%, 100% { transform: translateY(-60%); } }
@keyframes phub-float { from { transform: translateY(0); } to { transform: translateY(-10px); } }
@keyframes phub-ping { 0% { opacity: 0.9; transform: scale(0.6); } 100% { opacity: 0; transform: scale(1.6); } }

/* Search Ads: a light results look-alike, the ad shows, the cursor taps it, an enquiry arrives. */
.phub-ad { position: absolute; left: 14px; right: 14px; top: 36px; padding: 10px 12px 2px; border-radius: 12px; background: #fff; color: #1f1f1f; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22); font: 400 12px/1.45 Arial, "Helvetica Neue", Helvetica, sans-serif; }
.phub-ad__q { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 9999px; box-shadow: 0 1px 4px rgba(32, 33, 36, 0.28); font-size: 12.5px; white-space: nowrap; overflow: hidden; }
.phub-ad__q svg { width: 15px; height: 15px; fill: #70757a; flex: none; }
.phub-ad__res { position: relative; display: grid; gap: 3px; padding: 10px 4px 8px; }
.phub-ad__res::before { content: ""; position: absolute; inset: 5px -7px 2px; border-radius: 10px; box-shadow: inset 0 0 0 2px #d4a648; pointer-events: none; }
.phub-ad__spons { font: 700 11px/1 Arial, sans-serif; }
.phub-ad__site { display: flex; align-items: center; gap: 8px; min-width: 0; }
.phub-ad__site i { display: grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 50%; background: #16181d; color: #e9cf8a; font: 700 10px/1 Arial, sans-serif; font-style: normal; }
.phub-ad__site > span { display: grid; min-width: 0; }
.phub-ad__site b { font-weight: 400; font-size: 12px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phub-ad__site cite { font-style: normal; font-size: 11px; line-height: 1.25; color: #4d5156; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phub-ad__t { font: 400 15px/1.3 Arial, sans-serif; color: #1a0dab; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phub-ad__links { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 11.5px; color: #1a0dab; }
.phub-ad__skel { display: grid; gap: 6px; padding: 9px 4px 12px; border-top: 1px solid #f1f3f4; }
.phub-ad__skel i { height: 8px; border-radius: 4px; background: #eef0f3; }
.phub-ad__skel i:first-child { width: 40%; }
.phub-ad__skel i:last-child { width: 76%; }
.phub-ad__cursor { position: absolute; z-index: 3; left: 48%; top: 128px; width: 22px; height: 22px; fill: #16181d; stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3)); opacity: 0; pointer-events: none; }
.phub-toast { position: absolute; z-index: 3; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 24px); padding: 9px 13px 9px 9px; border-radius: 13px; background: #16181d; color: #fff; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32); font: 500 12px/1.3 var(--font-body); }
.phub-toast > i { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: #1f7a3d; }
.phub-toast > i .psg-ic { width: 15px; height: 15px; stroke-width: 2.6; }
.phub-toast b { display: block; color: #e9cf8a; font-weight: 700; }
html.motion .phub-vis--ads.is-run .phub-ad__res { animation: phub-ad-res 8s ease infinite; }
html.motion .phub-vis--ads.is-run .phub-ad__res::before { animation: phub-ad-ring 8s ease infinite; }
html.motion .phub-vis--ads.is-run .phub-ad__cursor { animation: phub-ad-cursor 8s cubic-bezier(0.3, 0.7, 0.2, 1) infinite; }
html.motion .phub-vis--ads.is-run .phub-toast { animation: phub-ad-toast 8s cubic-bezier(0.3, 0.7, 0.2, 1.2) infinite; }
@keyframes phub-ad-res { 0%, 8% { opacity: 0; transform: translateY(8px); } 18%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes phub-ad-ring { 0%, 22% { opacity: 0; } 30%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes phub-ad-cursor { 0%, 26% { opacity: 0; transform: translate(70px, 60px); } 32% { opacity: 1; } 44% { opacity: 1; transform: none; } 48% { transform: scale(0.82); } 52%, 82% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: none; } }
@keyframes phub-ad-toast { 0%, 50% { opacity: 0; transform: translateY(14px) scale(0.96); } 58%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(6px); } }

/* Lead management: rows arrive, agents and spam are flagged, a returning lead is marked. */
.phub-leads { position: absolute; inset: 12px 12px 48px; display: grid; gap: 6px; align-content: start; }
.phub-lrow { position: relative; isolation: isolate; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 5px 10px 5px 5px; border-radius: 11px; background: var(--panel); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }
.phub-lrow::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--peach); opacity: 0; }
.phub-lrow.is-flag::before { opacity: 1; }
.phub-lrow.is-hot { box-shadow: inset 0 0 0 1.5px var(--teal), 0 1px 2px rgba(0, 0, 0, 0.12); }
.phub-av { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--gold-grad); color: var(--gold-ink); font: 700 10.5px/1 var(--font-body); }
.phub-lrow.is-flag .phub-av { background: var(--chip); color: var(--ink-2); }
.phub-lrow__t { min-width: 0; }
.phub-lrow__t b { display: block; font: 700 12.5px/1.2 var(--font-body); color: var(--ink); }
.phub-lrow__t span { display: block; font: 500 11.5px/1.25 var(--font-body); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phub-lrow .psg-status { font-size: 10.5px; padding: 4px 6px; }
.phub-leads__fd { position: absolute; z-index: 3; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 9999px; background: #16181d; color: #fff; font: 600 11.5px/1 var(--font-body); }
.phub-leads__fd .psg-ic { width: 14px; height: 14px; color: #e9cf8a; }
.phub-vis--leads .phub-vis__tag.psg-chip { top: auto; right: auto; left: 12px; bottom: 14px; }
html.motion .phub-vis--leads.is-run .phub-lrow { animation: phub-row 8s cubic-bezier(0.2, 0.7, 0.2, 1) infinite; animation-delay: calc(var(--i, 0) * 0.22s); }
html.motion .phub-vis--leads.is-run .phub-lrow.is-flag::before { animation: phub-flag 8s ease infinite; animation-delay: calc(var(--i, 0) * 0.22s); }
html.motion .phub-vis--leads.is-run .phub-leads__fd { animation: phub-pop 8s cubic-bezier(0.3, 0.7, 0.2, 1.2) infinite; }
@keyframes phub-row { 0% { opacity: 0; transform: translateY(10px); } 8%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes phub-flag { 0%, 32% { opacity: 0; } 42%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes phub-pop { 0%, 44% { opacity: 0; transform: translateY(8px) scale(0.94); } 52%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }

/* 360° New Launch Marketing System: a gold trademark seal; its ring of text turns slowly. */
.phub-vis--seal { display: grid; place-items: center; align-content: center; gap: 14px; }
.phub-seal__halo { position: absolute; left: 50%; top: 50%; width: 220px; height: 220px; margin: -122px 0 0 -110px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(212, 166, 72, 0.4), 0 0 0 26px rgba(212, 166, 72, 0.07); pointer-events: none; }
.phub-seal { position: relative; width: 132px; height: 132px; border-radius: 50%; background: linear-gradient(135deg, #f7e1a6, #d4a648); box-shadow: 0 14px 34px rgba(181, 138, 53, 0.34), inset 0 0 0 1px rgba(255, 255, 255, 0.45); }
.phub-seal__o { fill: none; stroke: rgba(74, 45, 6, 0.5); stroke-width: 1.2; }
.phub-seal__i { fill: rgba(255, 255, 255, 0.22); stroke: rgba(74, 45, 6, 0.5); stroke-width: 1.2; }
.phub-seal__t { fill: #4a2d06; font: 700 8.6px var(--font-body); letter-spacing: 0.1em; }
.phub-seal__c { fill: #4a2d06; font: 700 21px var(--font-body); letter-spacing: -0.02em; }
.phub-seal__spin { transform-box: view-box; transform-origin: 60px 60px; }
.phub-seal__no { position: relative; font: 600 11.5px/1.3 var(--font-body); letter-spacing: 0.04em; color: var(--ink-2); text-align: center; padding: 0 12px; }
html.motion .phub-vis--seal.is-run .phub-seal__spin { animation: phub-spin 26s linear infinite; }
html.motion .phub-vis--seal.is-run .phub-seal__halo { animation: phub-breathe 5s ease-in-out infinite alternate; }
@keyframes phub-spin { to { transform: rotate(360deg); } }
@keyframes phub-breathe { from { transform: scale(0.94); opacity: 0.7; } to { transform: scale(1.04); opacity: 1; } }
.phub-tools { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.phub-tools li { padding: 8px 11px; border-radius: 9999px; background: var(--gold-soft); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(212, 166, 72, 0.5); font: 600 13px/1 var(--font-body); }

/* ---------- 02 to 04: Website Builder, ProjectSG Suite App, CPC Intelligence Suite */
.phub-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); margin-top: clamp(16px, 2vw, 24px); }

/* Builder: three steps light up, the template fills with the real site, Live. */
.phub-vis--build { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; padding: 14px 16px 0; }
.phub-build__steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.phub-build__steps li { position: relative; isolation: isolate; flex: 1; display: flex; align-items: center; gap: 7px; padding: 5px 9px 5px 5px; border-radius: 9999px; background: var(--panel); color: var(--ink); font: 600 12px/1 var(--font-body); }
.phub-build__steps li::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--gold-soft); box-shadow: inset 0 0 0 1.5px var(--gold-line); }
.phub-build__steps b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--gold-grad); color: var(--gold-ink); font: 700 10.5px/1 var(--font-body); }
.phub-build__win { display: flex; flex-direction: column; border-radius: 10px 10px 0 0; overflow: hidden; background: #fff; box-shadow: 0 14px 32px rgba(0, 0, 0, 0.26); }
.phub-build__bar { display: flex; align-items: center; gap: 5px; height: 24px; flex: none; padding: 0 8px; background: #eef0f3; }
.phub-build__bar > i { width: 7px; height: 7px; border-radius: 50%; background: #d5d8de; }
.phub-live { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 9999px; background: #e6f6ea; color: #0d7f37; font: 700 10.5px/1 var(--font-body); }
.phub-live i { width: 6px; height: 6px; border-radius: 50%; background: #0d7f37; }
.phub-build__page { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.phub-build__page img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.phub-build__skel { position: absolute; inset: 0; z-index: 1; display: grid; gap: 8px; align-content: start; justify-items: center; padding: 12px; background: #fff; opacity: 0; }
.phub-build__skel i { display: block; width: 100%; height: 10px; border-radius: 5px; background: #eef0f3; }
.phub-build__skel i:nth-child(1) { width: 42%; height: 12px; }
.phub-build__skel i:nth-child(2) { height: 78px; border-radius: 8px; background: #e6e9ee; }
.phub-build__skel i:nth-child(3) { width: 64%; }
.phub-build__skel i:nth-child(4) { width: 48%; }
html.motion .phub-vis--build.is-run .phub-build__steps li::before { animation: phub-lit 8s ease infinite; }
html.motion .phub-vis--build.is-run .phub-build__steps li:nth-child(2)::before { animation-delay: 0.7s; }
html.motion .phub-vis--build.is-run .phub-build__steps li:nth-child(3)::before { animation-delay: 1.4s; }
html.motion .phub-vis--build.is-run .phub-build__skel { animation: phub-skel 8s ease infinite; }
html.motion .phub-vis--build.is-run .phub-build__page img { animation: phub-site 8s cubic-bezier(0.2, 0.7, 0.2, 1) infinite; }
html.motion .phub-vis--build.is-run .phub-live { animation: phub-pop 8s cubic-bezier(0.3, 0.7, 0.2, 1.4) infinite; animation-delay: 0.4s; }
@keyframes phub-lit { 0%, 6% { opacity: 0; } 12%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes phub-skel { 0%, 40% { opacity: 1; } 48%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes phub-site { 0%, 40% { opacity: 0; transform: scale(1.06) translateY(8px); } 52%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }

/* Suite: a phone with the lead list; the new lead alert drops in, a message is ready, Success. */
.phub-phone { position: absolute; z-index: 1; left: 50%; top: 18px; width: 164px; height: 300px; margin-left: -156px; padding: 6px; border-radius: 28px; background: #0e0f12; box-shadow: 0 20px 44px rgba(0, 0, 0, 0.36); }
.phub-phone__isl { position: absolute; z-index: 3; top: 12px; left: 50%; width: 44px; height: 13px; margin-left: -22px; border-radius: 9999px; background: #0e0f12; }
.phub-phone__scr { height: 100%; display: grid; gap: 6px; align-content: start; padding: 10px 9px; border-radius: 22px; background: #f3f4f6; color: #16181d; }
.phub-phone__sb { display: flex; justify-content: space-between; align-items: center; padding: 0 8px 4px; font: 700 9px/1 var(--font-body); }
.phub-phone__sb i { width: 15px; height: 7px; border-radius: 2px; box-shadow: inset 0 0 0 1.2px #16181d; }
.phub-phone__h { margin-top: 64px; padding: 2px 3px 2px; font: 700 16px/1 var(--font-body); letter-spacing: -0.02em; }
.phub-prow { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 7px; align-items: center; padding: 6px; border-radius: 10px; background: #fff; }
.phub-prow .phub-av { width: 22px; height: 22px; font-size: 8.5px; background: linear-gradient(135deg, #f7e1a6, #d4a648); color: #4a2d06; }
.phub-prow > span:last-child { min-width: 0; }
.phub-prow b { display: block; font: 700 10.5px/1.2 var(--font-body); }
.phub-prow span span { display: block; font: 500 9.5px/1.3 var(--font-body); color: #5d636e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phub-note { position: absolute; z-index: 3; left: 9px; right: 9px; top: 30px; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 7px; align-items: center; padding: 8px; border-radius: 13px; background: rgba(255, 255, 255, 0.97); color: #16181d; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24); font: 500 9.5px/1.3 var(--font-body); }
.phub-note__ic { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: #16181d; color: #e9cf8a; }
.phub-note__ic .psg-ic { width: 13px; height: 13px; }
.phub-note > span { min-width: 0; }
.phub-note__app { display: block; margin-bottom: 2px; font: 600 8.5px/1 var(--font-body); letter-spacing: 0.03em; text-transform: uppercase; color: #5d636e; }
.phub-note b { display: block; font: 700 10.5px/1.25 var(--font-body); }
.phub-bubble { position: absolute; z-index: 3; left: calc(50% - 4px); right: 12px; top: 62px; max-width: 210px; display: grid; gap: 7px; padding: 11px 12px; border-radius: 14px 14px 14px 4px; background: var(--panel); color: var(--ink); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24); }
.phub-bubble__h { display: inline-flex; align-items: center; gap: 6px; font: 700 10.5px/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); }
.phub-bubble__h i { width: 7px; height: 7px; border-radius: 50%; background: var(--trust); }
.phub-bubble p { margin: 0; font: 500 12px/1.42 var(--font-body); color: var(--ink); }
.phub-ok { position: absolute; z-index: 3; left: calc(50% - 4px); bottom: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 9999px; background: var(--trust-wash); color: var(--trust); box-shadow: inset 0 0 0 1px var(--trust); font: 700 11.5px/1 var(--font-body); }
.phub-ok .psg-ic { width: 14px; height: 14px; stroke-width: 2.6; }
html.motion .phub-vis--suite.is-run .phub-note { animation: phub-note 8s cubic-bezier(0.3, 0.7, 0.2, 1.15) infinite; }
html.motion .phub-vis--suite.is-run .phub-bubble { animation: phub-bubble 8s cubic-bezier(0.3, 0.7, 0.2, 1.15) infinite; }
html.motion .phub-vis--suite.is-run .phub-ok { animation: phub-ok 8s cubic-bezier(0.3, 0.7, 0.2, 1.4) infinite; }
@keyframes phub-note { 0%, 6% { opacity: 0; transform: translateY(-26px) scale(0.96); } 14%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes phub-bubble { 0%, 26% { opacity: 0; transform: translateY(12px) scale(0.94); } 34%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes phub-ok { 0%, 50% { opacity: 0; transform: scale(0.8); } 56%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }

/* CPC: the Lentor Gardens line (selected points, cents hidden) rises in; the latest point pulses. */
.phub-vis--cpc { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 6px; padding: 14px 16px 12px; }
.phub-cpc__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.phub-cpc__head > span { display: grid; gap: 3px; }
.phub-cpc__head > span b { font: 700 13.5px/1.2 var(--font-body); color: var(--ink); }
.phub-cpc__head > span span { font: 500 12px/1.2 var(--font-body); color: var(--ink-2); }
.phub-cpc__now { font: 700 28px/1 var(--font-body); letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.phub-cpc__plot { position: relative; min-height: 0; margin: 4px 2px 0; }
.phub-cpc__plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.phub-cpc__grid line { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.phub-cpc__area { fill: rgba(212, 166, 72, 0.22); }
.phub-cpc__line { fill: none; stroke: var(--accent-text); stroke-width: 2.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.phub-cpc__dot { position: absolute; z-index: 1; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--panel); box-shadow: inset 0 0 0 2.6px var(--accent-text); }
.phub-cpc__dot--lo { left: 1.43%; top: 77.57%; }
.phub-cpc__dot--hi { left: 98.57%; top: 23.54%; }
.phub-cpc__dot--hi::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; box-shadow: 0 0 0 2px var(--accent-text); opacity: 0; }
.phub-cpc__ann { position: absolute; z-index: 2; padding: 4px 8px; border-radius: 7px; background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); font: 600 11.5px/1.2 var(--font-body); white-space: nowrap; }
.phub-cpc__ann--lo { left: 2%; top: 40%; }
.phub-cpc__ann--hi { right: 7%; top: 4%; }
.phub-cpc__wipe { display: none; }
html.motion .phub-vis--cpc.is-run .phub-cpc__area { animation: phub-fade 1.4s ease both; }
html.motion .phub-vis--cpc.is-run .phub-cpc__line { animation: phub-rise 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
html.motion .phub-vis--cpc.is-run .phub-cpc__dot--lo, html.motion .phub-vis--cpc.is-run .phub-cpc__ann--lo { animation: phub-in 0.6s 0.5s cubic-bezier(0.3, 0.7, 0.2, 1.3) both; }
html.motion .phub-vis--cpc.is-run .phub-cpc__dot--hi, html.motion .phub-vis--cpc.is-run .phub-cpc__ann--hi { animation: phub-in 0.6s 1s cubic-bezier(0.3, 0.7, 0.2, 1.3) both; }
html.motion .phub-vis--cpc.is-run .phub-cpc__dot--hi::after { animation: phub-ping 2.2s 1.6s ease-out infinite; }
@keyframes phub-fade { from { opacity: 0; } }
@keyframes phub-rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes phub-in { from { opacity: 0; transform: translateY(6px) scale(0.8); } }

/* ---------- 05 Free Leads Projection: quick estimate */
.phub-est { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(24px, 3.6vw, 48px); padding: clamp(22px, 4vw, 56px); border-radius: var(--radius-card); background: var(--panel); }
:root[data-theme="light"] .phub-est { box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(60, 50, 20, 0.04); }
.phub-est__copy { display: grid; gap: 24px; align-content: start; }
.phub-est .phub-est__head { margin: 0; max-width: 560px; }
.phub-est__head .body-2 { margin: 0; font-size: 16.5px; }
.phub-est__in { display: grid; gap: 12px; padding: clamp(16px, 2vw, 22px); border-radius: 16px; background: var(--bg); }
.phub-est__label { font: 700 12px/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.phub-est__budget { display: grid; grid-template-columns: 172px minmax(0, 1fr); gap: 18px; align-items: center; }
.phub-est__budget .psg-fw { background: var(--panel); }
.phub-est__budget .psg-fw input { padding: 11px 12px; font: 700 20px/1 var(--font-body); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.phub-est__budget input[type="range"] { width: 100%; height: 28px; margin: 0; accent-color: var(--sun-deep); cursor: pointer; }
.phub-est__hint { margin: 0; color: var(--ink-2); }
.phub-est__hint b { color: var(--ink); }
.phub-est__proof { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; margin: 0; padding-top: 20px; border-top: 1px solid var(--line); font: 600 15.5px/1.5 var(--font-body); color: var(--ink); }
.phub-est__proof .psg-ic { width: 22px; height: 22px; margin-top: 1px; color: var(--accent-text); }
.phub-est__out { display: grid; gap: 22px; align-content: start; padding: clamp(20px, 2.8vw, 34px); border-radius: 18px; background: var(--gold-soft); box-shadow: inset 0 0 0 1.5px var(--gold-line); }
.phub-est__k { font: 700 12px/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); }
.phub-est__big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 10px 0 18px; }
.phub-est__big b { font: 700 clamp(54px, 6vw, 80px)/0.92 var(--font-body); letter-spacing: -0.045em; color: var(--ink); font-variant-numeric: tabular-nums; }
.phub-est__big span { font: 600 17px/1.2 var(--font-body); color: var(--ink-2); }
.phub-est__bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.phub-est__bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 12px; align-items: baseline; }
.phub-est__bars span { font: 700 14.5px/1.2 var(--font-body); color: var(--ink); }
.phub-est__bars i { margin-left: 4px; font-style: normal; font-weight: 500; color: var(--ink-2); }
.phub-est__bars b { font: 700 22px/1 var(--font-body); letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.phub-est__bars s { grid-column: 1 / -1; display: block; height: 9px; border-radius: 9px; overflow: hidden; background: var(--panel); text-decoration: none; }
.phub-est__bars u { display: block; height: 100%; border-radius: 9px; background: var(--gold-grad); transform-origin: left center; transform: scaleX(var(--v, 1)); }
.phub-est__bars li[data-scen="typical"] u { background: linear-gradient(90deg, var(--sun-deep), var(--flame-1)); }
html.motion .phub-est__bars u { transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.phub-est__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.phub-est__note { margin: 0; font: 500 13px/1.55 var(--font-body); color: var(--ink-2); }

/* ---------- 06 Choose your path: the two Agent Packages, Property Ecosystem and a free start */
.phub-plans { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(16px, 2vw, 24px); align-items: start; }
.phub-plan { position: relative; display: grid; gap: 16px; align-content: start; padding: clamp(20px, 2.4vw, 28px); border-radius: var(--radius-card); background: var(--panel); }
:root[data-theme="light"] .phub-plan { box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(60, 50, 20, 0.04); }
.phub-plan.phub-plan--pick { box-shadow: inset 0 0 0 2px var(--gold-line), 0 18px 44px rgba(181, 138, 53, 0.18); }
:root[data-theme="light"] .phub-plan.phub-plan--pick { box-shadow: 0 0 0 2px var(--gold-line), 0 18px 44px rgba(181, 138, 53, 0.18); }
.phub-plan__flag.psg-tag { position: absolute; z-index: 1; top: -11px; right: 16px; padding: 6px 10px; font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; }
.phub-plan__price { display: grid; gap: 8px; }
.phub-plan__per { font: 500 14.5px/1.4 var(--font-body); color: var(--ink-2); }
.phub-plan__per b { color: var(--ink); }
.phub-plan__credit { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--bg); font: 500 14px/1.45 var(--font-body); color: var(--ink-2); }
.phub-plan__credit b { color: var(--ink); }
.phub-plan__inv { font-size: 13.5px; }
.phub-plan__inv [data-inv-cap] { display: none; }
.phub-plan__inv.is-over [data-inv-ok] { display: none; }
.phub-plan__inv.is-over [data-inv-cap] { display: inline; font-weight: 600; color: var(--price-text); }
.phub-plan .checks { gap: 8px; font-size: 15px; }
.phub-plan__save.psg-save { flex-wrap: wrap; }
.phub-plan__cta.psg-btn { margin-top: 4px; white-space: normal; text-align: center; }
.phub-side { display: grid; gap: clamp(16px, 2vw, 24px); }
.phub-path { display: grid; gap: 10px; align-content: start; padding: clamp(20px, 2.4vw, 26px); border-radius: var(--radius-card); background: var(--panel); color: inherit; text-decoration: none; transition: box-shadow 0.2s; }
.phub-path:hover { box-shadow: inset 0 0 0 2px var(--gold-line); }
.phub-path:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
:root[data-theme="light"] .phub-path { box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(60, 50, 20, 0.04); }
:root[data-theme="light"] .phub-path:hover { box-shadow: 0 0 0 2px var(--gold-line), 0 10px 30px rgba(140, 100, 30, 0.1); }
.phub-path > .psg-tag, .phub-path > .psg-chip { justify-self: start; }
.phub-path__h { font: 700 20px/1.25 var(--font-body); letter-spacing: -0.018em; color: var(--ink); }
.phub-path__p { font: 500 14.5px/1.5 var(--font-body); color: var(--ink-2); }
.phub-path__price { font: 700 15px/1.3 var(--font-body); color: var(--ink); }
.phub-path .more { margin-top: 4px; }
.phub-terms { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; margin-top: clamp(16px, 2vw, 24px); padding: 16px 20px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line-2); font: 500 14px/1.5 var(--font-body); color: var(--ink-2); }
.phub-terms p { margin: 0; flex: 1 1 280px; }
.phub-terms b { color: var(--ink); }

/* ---------- Tablet: the Ecosystem intro stacks over the directory; tiles go two across, the odd one wide. */
@media (max-width: 1080px) {
  .phub-index ol { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter) var(--gutter-r); scrollbar-width: none; margin: 0 calc(-1 * var(--gutter-r)) 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter-r) 4px var(--gutter); }
  .phub-index ol::-webkit-scrollbar { display: none; }
  .phub-index li { flex: 0 0 156px; scroll-snap-align: start; }
  .phub-eco__top { grid-template-columns: minmax(0, 1fr); }
  .phub-eco__intro { padding: clamp(14px, 3vw, 28px) clamp(8px, 2vw, 20px) 4px; }
  .phub-eco__row, .phub-trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phub-eco__row > :last-child, .phub-trio > :last-child { grid-column: 1 / -1; flex-direction: row; }
  .phub-eco__row > :last-child .phub-vis, .phub-trio > :last-child .phub-vis { flex: 0 0 48%; height: auto; min-height: 240px; margin: 10px 0 10px 10px; }
  .phub-est { grid-template-columns: minmax(0, 1fr); }
  .phub-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phub-side { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Phone */
@media (max-width: 680px) {
  .phub-index li { flex-basis: 140px; }
  .phub-eco { border-radius: 22px; }
  .phub-dir { padding: 14px 30% 14px 14px; }
  .phub-dir__phone { width: 33%; top: 12%; right: 12px; border-radius: 18px; padding: 4px; }
  .phub-dir__phone img { border-radius: 14px; }
  .phub-dir__count { padding: 9px 12px; }
  .phub-dir__count b { font-size: 24px; }
  .phub-dir__count span { font-size: 11.5px; }
  .phub-dir__live { top: 8px; right: 8px; padding: 5px 9px; font-size: 11px; }
  .phub-eco__row, .phub-trio { grid-template-columns: minmax(0, 1fr); }
  .phub-eco__row > :last-child, .phub-trio > :last-child { grid-column: auto; flex-direction: column; }
  .phub-eco__row > :last-child .phub-vis, .phub-trio > :last-child .phub-vis { flex: none; height: 230px; min-height: 0; margin: 10px 10px 0; }
  .phub-tile__body { padding: 18px 18px 22px; }
  .phub-est__budget { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .phub-est__acts .psg-btn { width: 100%; white-space: normal; text-align: center; }
  .phub-plans, .phub-side { grid-template-columns: minmax(0, 1fr); }
  .phub-side { grid-column: auto; }
  .phub-terms { padding: 14px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .phub-all *, .phub-all *::before, .phub-all *::after, .phub-est * { animation: none !important; transition: none !important; }
}