/* GENERATED by tools/build-home-panels.py from pages-products.css, pages-kit.css, pages-dealbox.css, pages-analytics.css, pages-dex.css. Do not edit by hand. */
/* ---- pages-products.css ---- */
.hp .file-card {display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 14px; background: #fff; box-shadow: var(--sh-float); font-size: 13px; line-height: 1.25; white-space: nowrap; color: var(--navy);}
.hp .file-card b {font-weight: 500; display: block;}
.hp .file-card small {color: var(--muted); font-size: 11.5px;}
.hp .fc-ic {display: grid; place-items: center; width: 32px; height: 38px; border-radius: 6px; font-size: 9.5px; font-weight: 500; letter-spacing: .04em; color: #fff; background: #D14343; flex: none;}
.hp .fc-ic.xls {background: #1D8A4E;}
.hp .fc-ic.zip {background: #6B7280;}
.hp .fc-ic.img {background: #5C7ECC;}
.hp .fc-ic.csv {background: #3B5690;}
.hp .q-bubble {padding: 12px 16px; border-radius: 18px 18px 18px 4px; background: #fff; box-shadow: var(--sh-float); font-size: 14px; font-weight: 500; max-width: 200px;}
.hp .folder-card {display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; background: #fff; box-shadow: var(--sh-float); font-size: 12.5px; font-weight: 500;}
.hp .sticky-note {width: 170px; padding: 14px; background: #FFF6C9; box-shadow: var(--sh-float); font-size: 13px; line-height: 1.35; display: grid; gap: 4px; font-family: "Segoe Print", "Bradley Hand", var(--f-body);}
.hp .view-card {width: 200px; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: var(--sh-float); font-size: 13px; font-weight: 500;}
.hp .view-card img {width: 100%; height: 118px; object-fit: cover; object-position: 60% 30%;}
.hp .view-card span {display: flex; align-items: center; gap: 6px; padding: 10px 12px;}
.hp .void-card {width: 230px; padding: 16px; border-radius: 18px; background: #fff; box-shadow: var(--sh-float); font-size: 13px; display: grid; gap: 10px;}
.hp .void-card small {font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 500;}
.hp .void-card .vr {display: grid; grid-template-columns: 74px 1fr 18px; align-items: center; gap: 8px;}
.hp .void-card .vr i {height: 8px; border-radius: 4px; background: repeating-linear-gradient(90deg, #D9DCE2 0 8px, transparent 8px 12px);}
.hp .void-card .vr i.full {background: #6B7280;}
.hp .void-card .vr b {font-size: 16px; text-align: center; color: var(--muted);}
.hp .console {display: inline-flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 999px; background: #fff; box-shadow: var(--sh-float); font-size: 13px; white-space: nowrap;}
.hp .console .cs-l {color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500;}
.hp .console s {color: var(--faint); text-decoration-color: var(--red);}
.hp .console .cs-new {color: var(--live-text);}
.hp .console .cs-btn {padding: 7px 14px; border-radius: 999px; background: var(--navy); color: #fff; font-weight: 500; transition: transform .2s, background .2s;}
.hp .console .cs-btn.is-press {transform: scale(.92); background: var(--b1);}
.hp .updated {display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px 10px 10px; border-radius: 999px; background: #fff; box-shadow: var(--sh-float); font-size: 14px; white-space: nowrap;}
.hp .upd-ic {width: 26px; height: 26px; border-radius: 50%; background: var(--live); color: #fff; display: grid; place-items: center;}
.hp .upd-ic .ic {stroke-width: 2.5;}
.hp .newest-first {display: flex !important; flex-direction: column-reverse;}
.hp .stream {display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); color: #fff; font-size: 13px; font-weight: 500; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);}
.hp .st-dot {width: 8px; height: 8px; border-radius: 50%; background: var(--b3); box-shadow: 0 0 12px var(--b3);}
.hp .crm {display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: #fff; color: var(--navy); font-size: 13.5px; font-weight: 500; box-shadow: var(--sh-float);}
.hp .crm .ic {color: var(--live-text);}
.hp .spin {animation: spin 2.9s linear infinite;}
.hp .scr.gray {filter: grayscale(1);}
.hp .grayhead {background: #6E7B78 !important;}
.hp .av-g {width: 2.3em; height: 2.3em; border-radius: 50%; background: rgba(255,255,255,.3); display: grid; place-items: center; font-weight: 500; flex: none;}
.hp .msg.file {display: flex; align-items: center; gap: .6em; padding: .45em .6em;}
.hp .msg.file .fc-ic {width: 2.2em; height: 2.6em; font-size: .62em;}
.hp .msg.file b {display: block; font-size: .92em;}
.hp .msg.file small {display: block; color: #667085; font-size: .78em;}
.hp .msg.file .tm {align-self: flex-end;}
.hp .msg .who {display: block; color: #C2410C; font-size: .82em;}
.hp .msg.sys {align-self: center; display: inline-flex; align-items: center; gap: .4em; background: #FDE8E8; color: #9B1C1C; font-size: .8em; padding: .35em .8em;}
.hp .ticks.gray {color: #8A93A3 !important;}
.hp .scr-pdf {background: #4A4F55;}
.hp .kit {flex: 1; display: flex; flex-direction: column; gap: .6em; padding: .2em 1em 2em; background: #F7F9FD;}
.hp .kit-head {display: grid; grid-template-columns: 1fr auto; align-items: end;}
.hp .kit-head small {grid-column: 1; font-size: .7em; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 500;}
.hp .kit-head b {grid-column: 1; font-family: var(--f-head); font-weight: 500; font-size: 1.45em; letter-spacing: -.02em;}
.hp .kit-head .badge {grid-column: 2; grid-row: 1 / span 2; font-size: .72em; height: 2em;}
.hp .kit-hero {position: relative; height: 7.2em; border-radius: .9em; overflow: hidden;}
.hp .kit-hero img {width: 100%; height: 100%; object-fit: cover;}
.hp .kh-l {position: absolute; left: .6em; bottom: .6em; padding: .3em .7em; border-radius: 99px; background: rgba(255,255,255,.92); font-size: .74em; font-weight: 500;}
.hp .kit-tiles {display: grid; grid-template-columns: repeat(4, 1fr); gap: .35em;}
.hp .kit-tiles span {display: grid; justify-items: center; gap: .25em; padding: .5em .2em; border-radius: .7em; background: #fff; box-shadow: 0 0 0 1px var(--border); font-size: .68em; font-weight: 500;}
.hp .kit-tiles .ic {width: 1.7em; height: 1.7em; color: var(--b1);}
.hp .kit-row {display: flex; justify-content: space-between; align-items: center; padding: .6em .75em; border-radius: .8em; background: #fff; box-shadow: 0 0 0 1px var(--border); font-size: .9em; transition: box-shadow .3s, background .3s;}
.hp .kit-row b {font-weight: 500;}
.hp .kit-row small {display: block; color: var(--muted); font-size: .8em;}
.hp .kit-row .kp {text-align: end; display: grid; justify-items: end; gap: .15em;}
.hp .kit-row em {font-style: normal; font-size: .7em; font-weight: 500; padding: .15em .55em; border-radius: 99px;}
.hp .st.ok {background: var(--live-bg); color: var(--live-text);}
.hp .st.res {background: #FFF4DE; color: #8A5A00;}
.hp .st.upd {background: #FFF4DE; color: #8A5A00;}
.hp .kit-row.is-updated {box-shadow: 0 0 0 2px var(--amber); background: #FFFBEB;}
.hp .kit-share {margin-top: auto; display: flex; align-items: center; justify-content: center; gap: .4em; padding: .75em; border-radius: 99px; background: var(--navy); color: #fff; font-size: .85em; font-weight: 500;}
.hp .kit.mini {gap: .45em; padding: .2em .8em 1.4em;}
.hp .kit.mini .kit-hero {height: 5em;}
.hp .kit-owner {margin-top: auto; text-align: center; font-size: .72em; color: var(--muted);}
.hp .phone-mini .phone-screen {font-size: 5.2cqw;}
.hp .scr-dbx {background: #F7F9FD;}
.hp .dbx {position: relative; flex: 1; display: flex; flex-direction: column;}
.hp .dbx-hero {position: relative; height: 40%; color: #fff; overflow: hidden; flex: none;}
.hp .dbx-hero img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}
.hp .dbx-hero::after {content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,22,36,.45), rgba(16,22,36,.05) 40%, rgba(16,22,36,.65));}
.hp .dbx-hero-ui {position: relative; z-index: 2;}
.hp .dbx-brand {display: flex; justify-content: space-between; align-items: center; padding: .2em 1.1em; font-size: .72em;}
.hp .dbx-brand small {letter-spacing: .18em; font-weight: 500;}
.hp .dbx-by {padding: .3em .7em; border-radius: 99px; background: rgba(255,255,255,.2); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);}
.hp .dbx-hi {position: absolute; z-index: 2; left: .7em; bottom: .45em; font-family: var(--f-head); font-weight: 500; font-size: 2.3em; letter-spacing: -.03em;}
.hp .dbx-body {padding: .9em 1em; display: grid; gap: .6em; align-content: start;}
.hp .dbx-sec {display: flex; justify-content: space-between; align-items: baseline;}
.hp .dbx-sec b {font-weight: 500;}
.hp .dbx-sec small {color: var(--muted); font-size: .78em;}
.hp .dbx-card {border-radius: 1em; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--border), 0 8px 18px -12px rgba(16,22,36,.3);}
.hp .dbx-img {position: relative; height: 6.4em;}
.hp .dbx-img img {width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%;}
.hp .heart {position: absolute; right: .5em; top: .5em; width: 2.2em; height: 2.2em; border-radius: 50%; background: rgba(255,255,255,.95); display: grid; place-items: center; color: var(--navy); transition: transform .35s var(--ease-snap), color .2s;}
.hp .heart .ic {width: 1.2em; height: 1.2em;}
.hp .heart.is-on {color: #E0314B; transform: scale(1.18);}
.hp .heart.is-on .ic {fill: #E0314B;}
.hp .dbx-meta {display: flex; justify-content: space-between; align-items: center; padding: .6em .8em;}
.hp .dbx-meta small {display: block; color: var(--muted); font-size: .78em;}
.hp .dbx-meta .price {font-family: var(--f-head); font-weight: 500;}
.hp .dbx-offer {display: flex; align-items: center; justify-content: space-between; gap: .5em; padding: .75em .8em; border-radius: 1em; background: var(--navy); color: #fff; opacity: 0; transform: translateY(1em); transition: opacity .4s, transform .5s var(--ease-snap);}
.hp .dbx-offer small {display: block; font-size: .72em; color: var(--on-dark-2);}
.hp .dbx-offer b {display: block; font-family: var(--f-head); font-weight: 500; font-size: 1.2em;}
.hp .dbx-offer .badge {font-size: .66em; height: 1.9em; padding: 0 .6em; margin-top: .2em;}
.hp .dbx-btn {padding: .6em 1em; border-radius: 99px; background: #fff; color: var(--navy); font-weight: 500; font-size: .85em; transition: transform .2s;}
.hp .dbx-btn.is-press {transform: scale(.9);}
.hp .dbx-offer.is-on {opacity: 1; transform: none;}
.hp .dbx-reserved {position: absolute; left: .6em; right: .6em; bottom: 1.6em; z-index: 4; display: grid; justify-items: center; gap: .3em; padding: 1.2em 1em; border-radius: 1.2em; background: #fff; box-shadow: 0 -10px 40px -10px rgba(16,22,36,.45); text-align: center; transform: translateY(140%); transition: transform .6s var(--ease-snap);}
.hp .dbx-reserved .ok {width: 2.8em; height: 2.8em; border-radius: 50%; background: var(--live); color: #fff; display: grid; place-items: center;}
.hp .dbx-reserved .ok .ic {width: 1.5em; height: 1.5em; stroke-width: 2.4;}
.hp .dbx-reserved b {font-family: var(--f-head); font-weight: 500; font-size: 1.15em; letter-spacing: -.01em;}
.hp .dbx-reserved small {color: var(--muted); font-size: .8em;}
.hp .dbx-reserved.is-on {transform: none;}
.hp .scr-xls {background: #fff;}
.hp .xls-bar {display: flex; justify-content: space-between; align-items: center; padding: .4em 1em .6em; background: #1D6F42; color: #fff; font-size: .82em;}
.hp .xls-grid {display: grid; grid-template-columns: 1.3fr 1fr .8fr; font-size: .8em;}
.hp .xls-grid span {height: 2.1em; padding: 0 .5em; display: flex; align-items: center; border-right: 1px solid #E3E5E9; border-bottom: 1px solid #E3E5E9;}
.hp .xls-grid .h {background: #F1F2F4; font-weight: 500;}
.hp .xls-note {margin: 1em; padding: .7em; border-radius: .6em; background: #F1F2F4; color: var(--muted); font-size: .8em;}
.hp .dash {display: flex; flex-direction: column; gap: .9em; padding: 1.1em;}
.hp .dash-top {display: flex; align-items: center; gap: .9em; font-size: .95em;}
.hp .dash-brand {display: inline-flex; align-items: center; gap: .5em; font-weight: 500;}
.hp .dash-brand .ic {width: 1.3em; height: 1.3em;}
.hp .dash-proj {padding: .35em .8em; border-radius: 99px; background: #fff; box-shadow: 0 0 0 1px var(--border);}
.hp .dash-top .badge {font-size: .8em; height: 2em;}
.hp .dash-range {margin-inline-start: auto; color: var(--muted);}
.hp .dash-kpis {display: grid; grid-template-columns: repeat(4, 1fr); gap: .7em;}
.hp .dash-kpis div {padding: .8em .9em; border-radius: .9em; background: #fff; box-shadow: 0 0 0 1px var(--border);}
.hp .dash-kpis small {display: block; color: var(--muted); font-size: .82em;}
.hp .dash-kpis b {font-family: var(--f-head); font-weight: 500; font-size: 2.1em; letter-spacing: -.03em; line-height: 1.1;}
.hp .dash-grid {flex: 1; display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: auto auto; gap: .7em; min-height: 0;}
.hp .dash-card {padding: .8em .9em; border-radius: .9em; background: #fff; box-shadow: 0 0 0 1px var(--border); min-height: 0; overflow: hidden;}
.hp .dash-heat {grid-row: span 2;}
.hp .dc-h {display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .6em;}
.hp .dc-h b {font-weight: 500;}
.hp .dc-h small {color: var(--muted); font-size: .82em;}
.hp .heat {display: grid; grid-template-columns: 3.4em repeat(4, 1fr); gap: .3em; font-size: .82em;}
.hp .heat .hl {color: var(--muted); display: flex; align-items: center;}
.hp .heat .hc {text-align: center; color: var(--muted);}
.hp .heat i {height: 2.6em; border-radius: .4em; background: rgba(80,111,179, calc(.08 + var(--v) * .92)); transform-origin: center;}
.hp .rank {list-style: none; padding: 0; margin: 0; display: grid; gap: .3em; position: relative;}
.hp .rank li {display: grid; grid-template-columns: 1.4em 2em 1fr auto; align-items: center; gap: .5em; padding: .35em .4em; border-radius: .6em; transition: transform .6s var(--ease-snap), background .3s;}
.hp .rank li:first-child {background: var(--tint);}
.hp .rank .rk {color: var(--muted); font-size: .85em; text-align: center;}
.hp .rank .ra {width: 2em; height: 2em; border-radius: 50%; display: grid; place-items: center; background: var(--b1); color: #fff; font-size: .8em; font-weight: 500;}
.hp .rank li:nth-child(2) .ra {background: var(--b2);}
.hp .rank li:nth-child(3) .ra {background: var(--b3);}
.hp .rank li:nth-child(4) .ra {background: #8A93A3;}
.hp .rank .rn b {display: block; font-weight: 500; font-size: .95em; line-height: 1.15;}
.hp .rank .rn small {color: var(--muted); font-size: .78em;}
.hp .bars {display: grid; grid-template-columns: 3em 1fr 2.6em; align-items: center; gap: .45em .6em; font-size: .85em;}
.hp .bars span {color: var(--muted);}
.hp .bars i {height: .7em; border-radius: 99px; background: linear-gradient(90deg, var(--b1), var(--b3)); width: calc(var(--v) * 100%); transform-origin: left;}
.hp .bars b {font-weight: 500; text-align: end;}
.hp .hs-hud {position: absolute; z-index: 3; left: 22px; top: 20px; right: 22px; display: flex; justify-content: space-between; align-items: center; gap: 10px; color: #fff;}
.hp .hs-chip {display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 12px; border-radius: 999px; background: rgba(16,22,36,.28); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-weight: 500; font-size: 14px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);}
.hp .hs-tabs {display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); font-size: 13px;}
.hp .hs-tabs > * {padding: 6px 12px; border-radius: 999px; font-weight: 500;}
.hp .hs-tabs b {background: #fff; color: var(--navy);}
.hp .dexbub {display: flex; align-items: flex-start; gap: 10px; width: 280px; padding: 12px 14px; border-radius: 18px 18px 18px 6px; background: #fff; box-shadow: var(--sh-float); font-size: 14px; line-height: 1.35;}
.hp .dexbub b {display: block; font-size: 13px; color: var(--wa-head); font-weight: 500;}
.hp .pricepill {display: inline-flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 999px; background: #fff; box-shadow: var(--sh-float);}
.hp .project-card {color: #fff;}
.hp .project-card .pc-media {background: linear-gradient(180deg, #4C6CBB 0%, #6689DF 45%, #A9C0F1 62%); min-height: 420px;}
.hp .pc-hud {position: absolute; z-index: 2; left: 20px; right: 20px; top: 20px; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;}
.hp .pc-floor {display: grid; padding: 10px 14px; border-radius: 14px; background: #fff; color: var(--navy); box-shadow: var(--sh-float); font-size: 14px;}
.hp .pc-floor b {font-weight: 500;}
.hp .pc-floor small {color: var(--muted);}
.hp .pc-cursor {position: absolute; z-index: 3; left: 52%; top: 58%; color: #fff; filter: drop-shadow(0 4px 8px rgba(0,0,0,.35)); animation: hp-cursorMove 7.76s ease-in-out infinite;}
@keyframes hp-cursorMove { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(-40px, -30px); } 60% { transform: translate(30px, -10px); } }
.hp .project-card .pc-body {background: var(--navy);}
.hp .project-card .t-muted {color: var(--on-dark-2);}
.hp .project-card .btn {align-self: flex-start; margin-top: 8px;}
.hp .project-card:hover .btn {transform: translateY(-2px);}
.hp .hs-chip .ic, .hp .hs-tabs .ic {color: inherit;}
.hp .phone .phone-screen > img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}
.hp .pp-hero .ph-grid {grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);}
.hp .pp-hero h1 {max-width: 13ch;}
.hp .pp-eyebrow {display: inline-flex; align-items: center; gap: 10px;}
.hp .gl-mini {width: 30px; height: 30px; border-radius: 10px; background: var(--tint); color: var(--b1); display: inline-grid; place-items: center; flex: none;}
.hp .gl-mini svg {width: 18px; height: 18px;}
.hp .pp-hint {margin-top: 26px; display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 14px;}
.hp .pp-hint .ic {color: var(--b1);}
.hp .pp-sub-cta {margin-top: 18px;}
.hp .pp-tag {margin-bottom: 18px; display: flex; gap: 8px; flex-wrap: wrap;}
.hp .pp-lead {color: var(--muted); margin-top: 18px; max-width: 52ch;}
.hp .pp-guard {display: flex; gap: 12px; align-items: flex-start; margin-top: 22px; padding: 14px 16px; border-radius: 16px; background: var(--tint); font-weight: 500; max-width: 56ch;}
.hp .pp-guard .ic {flex: none; color: var(--b1); margin-top: 2px;}
.hp .pp-split {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 20px + 4vw, 96px); align-items: center;}
@media (max-width: 899px) {
.hp .pp-split {grid-template-columns: 1fr;}
}
.hp .pp-problem {background: linear-gradient(180deg, var(--before-bg) 0%, #F7F8F9 70%, #fff 100%); overflow: hidden;}
.hp .pp-problem-grid {display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 20px + 3vw, 72px); align-items: center;}
.hp .pp-problem h2 {margin-bottom: 30px; max-width: 13ch;}
.hp .pp-problem .t-lead {color: var(--before-text-2); margin: -10px 0 26px; max-width: 46ch;}
.hp .scatter {position: relative; min-height: 400px; filter: grayscale(1);}
.hp .scatter > * {position: absolute; left: var(--x); top: var(--y); rotate: var(--r, 0deg);}
.hp .flat-render {width: 250px; background: #fff; padding: 8px 8px 10px; border-radius: 14px; box-shadow: var(--sh-float);}
.hp .flat-render img {border-radius: 8px; height: 150px; width: 100%; object-fit: cover;}
.hp .flat-render small {display: block; margin-top: 7px; font-size: 12px; color: var(--muted); padding-inline: 4px;}
@media (max-width: 899px) {
.hp .pp-problem-grid {grid-template-columns: 1fr;}
.hp .scatter {min-height: 330px;}
}
@media (max-width: 599px) {
.hp .scatter {min-height: 300px;}
.hp .scatter .file-card {font-size: 12px;}
.hp .flat-render {width: 190px;}
.hp .flat-render img {height: 110px;}
}
.hp .parts {display: grid; gap: clamp(72px, 40px + 6vw, 150px);}
.hp .part {position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 16px + 3vw, 72px); align-items: center;  isolation: isolate; transition: background .5s;}
.hp .part.flip > .part-copy {order: 2;}
.hp .part-num {display: none;  position: absolute; z-index: -1; right: clamp(16px, 3vw, 40px); top: -.18em; font-family: var(--f-head); font-weight: 500; font-size: clamp(140px, 90px + 10vw, 260px); line-height: 1; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px rgba(80,111,179,.16); pointer-events: none; user-select: none;}
.hp .part.flip .part-num {right: auto; left: clamp(16px, 3vw, 40px);}
.hp .part[data-state="before"] .part-num {-webkit-text-stroke-color: rgba(59,66,80,.12);}
.hp .part-eyebrow {display: flex; align-items: center; gap: 12px; margin-bottom: 22px;}
.hp .part-eyebrow .eyebrow {margin: 0;}
.hp .part-copy .bw-toggle {margin-bottom: 26px;}
.hp .part-h {font-size: clamp(34px, 24px + 2.4vw, 60px); line-height: 1.02; letter-spacing: -.035em; margin-bottom: 22px;}
.hp .part-then {margin-top: 26px; padding-top: 22px; border-top: 1px dashed var(--border-2);}
.hp .part-then .then-l {display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--b1); font-weight: 500; margin-bottom: 10px;}
.hp .part-then h4 {font-size: clamp(26px, 20px + 1.2vw, 38px); line-height: 1.05; letter-spacing: -.03em; margin-bottom: 16px;}
.hp .part-body {margin-top: 20px; color: var(--muted); max-width: 48ch;}
.hp .part .media-panel {aspect-ratio: 16 / 12;}
.hp .part .media-panel[data-state="before"] {background: linear-gradient(160deg, #D9DCE2, #B9BEC7);}
.hp .part .media-panel [data-pm] {position: absolute; inset: 0; transition: opacity .35s var(--ease-out);}
.hp .part .media-panel[data-state="before"] [data-pm="with"], .hp .part .media-panel[data-state="with"] [data-pm="before"] {opacity: 0; visibility: hidden;}
.hp .part .media-panel [data-pm="before"] {filter: grayscale(1);}
.hp .pm-center {display: grid; place-items: center; padding: 24px;}
@media (max-width: 1023px) {
.hp .part, .hp .part.flip {grid-template-columns: 1fr;}
.hp .part.flip > .part-copy {order: 0;}
.hp .part .media-panel {aspect-ratio: 4 / 3.6;}
}
@media (max-width: 599px) {
.hp .part .media-panel {aspect-ratio: 4 / 4.6; border-radius: 22px;}
.hp .part-h {font-size: clamp(34px, 9.4vw, 44px);}
.hp .part .bw-toggle button {padding: 0 11px; font-size: 13.5px;}
}
.hp .feat {display: flex; flex-direction: column; min-height: 360px;}
.hp .feat .ft-ui {position: relative; flex: 1; min-height: 190px; display: grid; place-items: center; padding: 24px 24px 8px; overflow: hidden;}
.hp .feat .ft-copy {padding: 8px 26px 26px; display: grid; gap: 6px;}
.hp .feat h3 {font-size: clamp(21px, 19px + .5vw, 26px); letter-spacing: -.02em; line-height: 1.15;}
.hp .feat p {color: var(--muted);}
.hp .tile-field.feat p, .hp .tile-dark.feat p {color: rgba(255,255,255,.82);}
.hp .feat-ic {width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--tint); color: var(--b1); margin-bottom: 6px;}
.hp .tile-field .feat-ic, .hp .tile-dark .feat-ic {background: rgba(255,255,255,.14); color: #fff;}
.hp .who {display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--gutter);}
.hp .who-card {position: relative; display: grid; gap: 10px; align-content: start; padding: 28px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px var(--border); transition: box-shadow .3s, translate .45s var(--ease-snap);}
.hp .who-card:hover {translate: 0 -4px; box-shadow: 0 0 0 1px var(--b3), var(--sh-card);}
.hp .who-card b {font-family: var(--f-head); font-weight: 500; font-size: 26px; letter-spacing: -.02em; line-height: 1.1; margin-top: 8px;}
.hp .who-card p {color: var(--muted); font-size: var(--t-lead); line-height: 1.35;}
.hp .who-card .tlink {margin-top: 8px;}
.hp .who-ic {width: 52px; height: 52px; border-radius: 16px; background: var(--field); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 22px -12px rgba(80,111,179,.8);}
.hp .bg-mist .who-card {box-shadow: 0 0 0 1px var(--border), 0 1px 2px rgba(16,22,36,.04);}
.hp .pp-flow {padding-block: clamp(40px, 30px + 3vw, 80px);}
.hp .guard {position: relative; overflow: hidden; background: radial-gradient(70% 90% at 80% 0%, #1A2744 0%, var(--navy) 60%); color: #fff;}
.hp .guard::before {content: ""; position: absolute; inset: 0; background: url(../img/bg-grid.svg) center top / 1920px auto repeat-y; filter: invert(1); opacity: .05; pointer-events: none;}
.hp .guard .container {position: relative;}
.hp .guard-grid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: rgba(255,255,255,.1); border-radius: 28px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.1);}
.hp .guard-item {background: rgba(16,22,36,.92); padding: clamp(24px, 18px + 1.6vw, 44px); display: grid; gap: 10px; align-content: start;}
.hp .guard-item .gi {width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(239,68,88,.14); color: #FF8A98; box-shadow: inset 0 0 0 1px rgba(239,68,88,.35); margin-bottom: 8px;}
.hp .guard-item h3 {font-size: clamp(24px, 20px + 1vw, 34px); letter-spacing: -.025em; line-height: 1.1;}
.hp .guard-item p {color: var(--on-dark-2); font-size: var(--t-lead); line-height: 1.4; max-width: 40ch;}
.hp .guard-foot {margin-top: 28px; display: flex; align-items: center; gap: 12px; color: var(--on-dark-2); font-size: var(--t-lead);}
.hp .guard-foot .ic {color: var(--wa); flex: none;}
@media (max-width: 767px) {
.hp .guard-grid {grid-template-columns: 1fr;}
}
.hp .statement {text-align: center;}
.hp .statement h2 {font-size: var(--t-h1); line-height: 1; letter-spacing: -.04em; max-width: 18ch; margin: 0 auto 28px;}
.hp .statement .chips {justify-content: center;}
.hp .statement .t-lead {color: var(--muted); max-width: 56ch; margin: 22px auto 0;}
.hp .pp-steps .step-ui {margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px;}
.hp .pp-steps .step-ui .file-card {font-size: 12.5px; padding: 8px 12px 8px 8px;}
.hp .pp-steps .step-ui .fc-ic {width: 26px; height: 30px; font-size: 8.5px;}
.hp .approve {display: inline-flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; border-radius: 16px; background: #fff; box-shadow: var(--sh-float); font-size: 13px;}
.hp .approve b {display: block; font-weight: 500;}
.hp .approve small {color: var(--muted); font-size: 12px;}
.hp .ap-ic {width: 32px; height: 32px; border-radius: 10px; background: var(--field); color: #fff; display: grid; place-items: center;}
.hp .ap-btn {padding: 7px 14px; border-radius: 999px; background: var(--navy); color: #fff; font-weight: 500; font-size: 12.5px; transition: background .3s;}
.hp .steps li.is-done .ap-btn {background: var(--live-text);}
.hp .share-dots span {display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--border); font-size: 13px; font-weight: 500;}
.hp .share-dots .ic {color: var(--b1);}
.hp .js [data-steps] li .sn {transition: background .4s, color .4s, box-shadow .4s, transform .5s var(--ease-snap);}
.hp .js [data-steps] li.is-done .sn {transform: scale(1.06);}
.hp .page-hero .hubx {display: block; min-height: 600px; background: linear-gradient(180deg, #4A69B8 0%, #7596E4 58%, #C4D5F8 100%); color: #fff; touch-action: pan-y;}
.hp .hubx-canvas {position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer;}
.hp .hubx-rail {position: absolute; z-index: 5; right: 16px; top: 74px; bottom: 62px; width: 46px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0; border-radius: 23px; background: rgba(16,22,36,.26); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); font-size: 11px; font-weight: 500; cursor: ns-resize; user-select: none; touch-action: none;}
.hp .hr-stack {flex: 1; width: 22px; display: flex; flex-direction: column-reverse; gap: 2px;}
.hp .hr-stack i {flex: 1; min-height: 3px; border-radius: 2px; background: rgba(255,255,255,.34); transition: background .15s, transform .25s var(--ease-snap);}
.hp .hr-stack i.is-hover {background: rgba(255,255,255,.72);}
.hp .hr-stack i.is-on {background: #fff; transform: scaleX(1.55); box-shadow: 0 0 12px rgba(255,255,255,.9);}
.hp .hubx-floor {position: absolute; z-index: 5; right: 72px; top: var(--fy, 50%); translate: 0 -50%; display: grid; justify-items: end; padding: 6px 12px; border-radius: 12px; background: #fff; color: var(--navy); box-shadow: var(--sh-float); line-height: 1.05; transition: top .25s var(--ease-snap); pointer-events: none;}
.hp .hubx-floor small {font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 500;}
.hp .hubx-floor b {font-family: var(--f-head); font-size: 22px; font-weight: 500; letter-spacing: -.02em;}
.hp .hubx-floor::after {content: ""; position: absolute; right: -5px; top: 50%; width: 10px; height: 10px; background: #fff; transform: translateY(-50%) rotate(45deg); border-radius: 2px;}
.hp .hubx-units {position: absolute; z-index: 5; left: 18px; bottom: 18px; right: 170px; display: flex; flex-wrap: wrap; gap: 6px;}
.hp .hu {display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 13px 0 11px; border-radius: 999px; background: rgba(255,255,255,.94); color: var(--navy); font-size: 13.5px; font-weight: 500; box-shadow: 0 6px 16px -8px rgba(16,22,36,.5); transition: background .2s, color .2s, translate .3s var(--ease-snap);}
.hp .hu:hover {translate: 0 -2px;}
.hp .hu i {width: 8px; height: 8px; border-radius: 50%; background: var(--live);}
.hp .hu i.res {background: var(--amber);}
.hp .hu i.sold {background: #9AA3B5;}
.hp .hu[aria-pressed="true"] {background: var(--navy); color: #fff;}
.hp .hu.sold {color: var(--muted);}
.hp .hubx-card {position: absolute; z-index: 6; left: 18px; top: 18px; width: 280px; transition: opacity .3s, translate .5s var(--ease-snap);}
.hp .hubx-card.is-pop {animation: hp-cardPop .55s var(--ease-snap);}
@keyframes hp-cardPop { 0% { opacity: .2; transform: translateY(10px) scale(.94); } 100% { opacity: 1; transform: none; } }
@keyframes hp-viewPan { from { transform: translateX(-2.5%); } to { transform: translateX(2.5%); } }
.hp .hubx .sample {right: 76px;}
@media (max-width: 1023px) {
.hp .pp-hero .ph-grid {grid-template-columns: 1fr;}
.hp .page-hero .hubx {min-height: 560px;}
}
@media (max-width: 599px) {
.hp .page-hero .hubx {min-height: 540px;}
.hp .hubx .hs-tabs {display: none;}
.hp .hubx-rail {right: 10px; width: 40px; top: 66px; bottom: 60px;}
.hp .hubx-floor {right: 58px;}
.hp .hubx-card {left: 12px; top: 12px; width: 220px; padding: 12px 14px;}
.hp .hubx-card .floor-card-title {font-size: 23px;}
.hp .hubx-card .floor-card-plan {height: 84px;}
.hp .hubx-card .floor-card-gallery {display: none;}
.hp .hubx-units {left: 12px; bottom: 12px; right: 60px;}
.hp .hu {height: 36px; padding: 0 11px 0 9px; font-size: 13px;}
.hp .hubx .sample {right: auto; left: 12px; bottom: auto; top: 20px; display: none;}
}
.hp .ws {position: relative; background: #fff;}
.hp .ws-markers {position: absolute; inset: 0 0 60vh; display: grid; grid-template-rows: repeat(5, 1fr); pointer-events: none; visibility: hidden;}
.hp .ws-grid {display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px clamp(32px, 4vw, 72px); width: 100%; align-items: center;}
.hp .ws-head {grid-column: 1 / -1; display: flex; align-items: center; gap: 20px;}
.hp .ws-head .pp-tag {margin: 0;}
.hp .ws-progress {flex: 1; max-width: 320px; height: 3px; border-radius: 3px; background: var(--border); overflow: hidden;}
.hp .ws-progress i {display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--b3), var(--b1)); transform-origin: left; transform: scaleX(var(--p, .2)); transition: transform .5s var(--ease-snap);}
.hp .ws-words {list-style: none; padding: 0; display: grid; gap: 2px;}
.hp .ws-word h3 {display: flex; align-items: baseline; gap: 14px; font-size: clamp(44px, 22px + 3.6vw, 82px); line-height: 1.04; letter-spacing: -.045em; color: #CDD4E2; transition: color .3s, transform .55s var(--ease-snap); transform-origin: left center;}
.hp .ws-word .n {font-family: var(--f-body); font-size: 13px; letter-spacing: .08em; color: var(--faint); font-weight: 500; transition: color .3s;}
.hp .ws-word.is-on h3 {color: var(--ink); transform: translateX(6px);}
.hp .ws-word.is-on .n {color: var(--b1);}
.hp .ws-word p {color: var(--muted); font-size: var(--t-lead); line-height: 1.45; max-width: 44ch; margin: 6px 0 22px;}
.hp .ws-scenes {position: relative;}
.hp .ws-scene {position: relative; aspect-ratio: 16 / 12; border-radius: var(--r-tile); background: var(--field); box-shadow: var(--sh-soft); overflow: hidden; isolation: isolate;}
.hp .wsc {position: absolute; inset: 0;}
@media (min-width: 1024px) {
.hp .ws {height: 460vh;}
.hp .ws-sticky {position: sticky; top: 0; height: 100vh; display: flex; align-items: center; padding-top: var(--header-h);}
.hp .ws-word p {position: absolute; opacity: 0; pointer-events: none;}
.hp .ws-word {position: relative;}
.hp .ws-word.is-on p {position: relative; opacity: 1; animation: hp-wsIn .5s var(--ease-snap);}
.hp .ws-word p {margin-block: 0;}
.hp .ws-word.is-on p {margin: 6px 0 18px 42px;}
.hp .ws-scenes {aspect-ratio: 16 / 12.5; max-height: calc(100vh - var(--header-h) - 150px);}
.hp .ws-scene {position: absolute; inset: 0; opacity: 0; transform: scale(1.05); transition: opacity .45s var(--ease-out), transform .8s var(--ease-snap); aspect-ratio: auto;}
.hp .ws-scene {pointer-events: none;}
.hp .ws-scene.is-on {opacity: 1; transform: none; pointer-events: auto;}
}
@keyframes hp-wsIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 1023px) {
.hp .ws {padding-block: var(--section-y);}
.hp .ws-grid {grid-template-columns: 1fr;}
.hp .ws-words, .hp .ws-scenes {display: contents;}
.hp .ws-word {order: var(--o);}
.hp .ws-scene {order: calc(var(--o) + 1); margin-bottom: 40px; aspect-ratio: 4 / 3.3;}
.hp .ws-word h3 {color: var(--ink);}
.hp .ws-word .n {color: var(--b1);}
.hp .ws-progress {display: none;}
}
.hp .ws {padding-block: var(--section-y);}
.hp .ws-word h3 {color: var(--ink);}
.hp .ws-word:nth-child(1) {--o: 1;}
.hp .ws-word:nth-child(2) {--o: 3;}
.hp .ws-word:nth-child(3) {--o: 5;}
.hp .ws-word:nth-child(4) {--o: 7;}
.hp .ws-word:nth-child(5) {--o: 9;}
.hp .ws-scene:nth-child(1) {--o: 1;}
.hp .ws-scene:nth-child(2) {--o: 3;}
.hp .ws-scene:nth-child(3) {--o: 5;}
.hp .ws-scene:nth-child(4) {--o: 7;}
.hp .ws-scene:nth-child(5) {--o: 9;}
@media (max-width: 599px) {
.hp .ws-scene {aspect-ratio: 4 / 4.4;}
.hp .ws-word h3 {font-size: clamp(40px, 11vw, 50px);}
}
.hp .wsc-floor {background: linear-gradient(180deg, #4A69B8, #7596E4 55%, #C4D5F8);}
.hp .wsc-floor canvas {position: absolute; inset: 0; width: 100%; height: 100%;}
.hp .pin {position: absolute; left: var(--x); top: var(--y); display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 13px 0 9px; border-radius: 999px; background: rgba(255,255,255,.94); color: var(--navy); font-size: 13px; font-weight: 500; box-shadow: var(--sh-float);}
.hp .pin i {width: 16px; height: 16px; border-radius: 50%; background: var(--b1); box-shadow: 0 0 0 4px rgba(80,111,179,.2);}
.hp .wsc-tabs {position: absolute; left: 20px; top: 20px; color: #fff;}
.hp .wsc-unit {background: var(--mist); display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; gap: 18px; padding: 26px;}
.hp .plate {background: #fff; border-radius: 20px; padding: 16px; box-shadow: var(--sh-float);}
.hp .plate-h {display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 12px; color: var(--muted); flex-wrap: wrap;}
.hp .plate-h b {font-family: var(--f-head); font-size: 20px; color: var(--navy); font-weight: 500; letter-spacing: -.02em;}
.hp .plate-h span {display: inline-flex; align-items: center; gap: 6px;}
.hp .lg {width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-inline-start: 6px;}
.hp .lg.ok {background: #BFE7CD;}
.hp .lg.res {background: #FCE3B0;}
.hp .lg.sold {background: #DDE1E8;}
.hp .plate-svg {width: 100%; height: auto;}
.hp .plate-svg .pl-out {fill: #F7F9FD; stroke: #DFE5F0;}
.hp .plate-svg .pl-u {stroke: #fff; stroke-width: 2;}
.hp .plate-svg .pl-u.ok {fill: #D5F0DF;}
.hp .plate-svg .pl-u.res {fill: #FCE8BF;}
.hp .plate-svg .pl-u.sold {fill: #E3E6EC;}
.hp .plate-svg .pl-u.is-sel {fill: var(--b1); stroke: var(--b3); stroke-width: 3;}
.hp .plate-svg .pl-core {fill: #EEF2FB;}
.hp .plate-svg text {font-size: 13px; font-weight: 500; text-anchor: middle; fill: var(--navy); font-family: var(--f-body);}
.hp .plate-svg .is-sel + text {fill: #fff;}
.hp .wsc-card {width: auto;}
.hp .wsc-view .pan {position: absolute; inset: 0; overflow: hidden;}
.hp .wsc-view .pan img {position: absolute; top: 0; left: -6%; width: 112%; max-width: none; height: 100%; object-fit: cover; animation: hp-viewPan 16s ease-in-out infinite alternate;}
.hp .v-360 {position: absolute; left: 20px; bottom: 20px; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px; background: #fff; color: var(--navy); font-weight: 500; font-size: 13.5px; box-shadow: var(--sh-float);  cursor: pointer; transition: transform .25s var(--ease-snap), box-shadow .25s;}
.hp .v-360:hover {transform: translateY(-2px); box-shadow: var(--sh-float);}
.hp .v-360:focus-visible {outline: 3px solid var(--b3); outline-offset: 3px;}
@keyframes hp-needle { from { transform: rotate(-24deg); } to { transform: rotate(18deg); } }
.hp .wsc-detail {background: var(--mist); display: grid; grid-template-columns: 1fr 1.2fr; grid-auto-rows: auto; gap: 14px; padding: 26px; align-content: center;}
.hp .dt-card {background: #fff; border-radius: 20px; padding: 18px 20px; box-shadow: var(--sh-float); font-size: 15px;}
.hp .dt-card > b {display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--f-head); font-weight: 500; font-size: 18px; letter-spacing: -.01em; margin-bottom: 14px;}
.hp .dt-amen {grid-row: span 2;}
.hp .dt-amen ul {list-style: none; padding: 0; display: grid; gap: 10px;}
.hp .dt-amen li {display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 12px; background: var(--mist); font-weight: 500; font-size: 15px;}
.hp .dt-amen .ic {color: var(--b1);}
.hp .pay {display: flex; gap: 3px; height: 30px; border-radius: 8px; overflow: hidden;}
.hp .pay i {flex: var(--v); background: var(--b1); display: grid; place-items: center; color: #fff; font-style: normal; font-weight: 500; font-size: 12px;}
.hp .pay i:nth-child(2) {background: var(--b2);}
.hp .pay i:nth-child(3) {background: var(--b3);}
.hp .dt-plan small {display: block; margin-top: 10px; color: var(--muted); font-size: 13px;}
.hp .heart-mini {display: inline-flex; align-items: center; gap: 5px; color: #E0314B; font-family: var(--f-body, inherit); font-size: 13.5px;}
.hp .heart-mini .ic {fill: #E0314B;}
.hp .cmp {display: grid; grid-template-columns: .8fr 1fr 1fr; gap: 9px 12px; font-size: 15px;}
.hp .cmp > span:nth-child(-n+3) {font-weight: 500; color: var(--b1);}
.hp .cmp > span:nth-child(3n+1) {color: var(--muted);}
.hp .cmp b {font-weight: 500; font-family: var(--f-head);}
.hp .dt-doc {display: flex; align-items: center; gap: 14px; grid-column: 1 / -1; padding: 14px 16px;}
.hp .dt-doc .fc-ic {flex: none;}
.hp .dt-doc-dl {margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 13.5px; font-weight: 500;}
.hp .dt-doc b {display: block; font-weight: 500; font-size: 16px;}
.hp .dt-doc small {color: var(--muted); font-size: 13.5px;}
.hp .wsc-any {background: linear-gradient(180deg, #E4ECFC, #F5F7FB);}
.hp .any-screen {position: absolute; left: 12%; right: 12%; top: 9%;}
.hp .any-screen .any-in {position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; border: 7px solid #141A28; box-shadow: var(--sh-soft);}
.hp .any-in img {width: 100%; height: 100%; object-fit: cover;}
.hp .any-l {position: absolute; left: 10px; bottom: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.92); font-size: 11.5px; font-weight: 500;}
.hp .any-stand {display: block; width: 18%; height: 26px; margin: 0 auto; background: linear-gradient(#2A3142, #141A28); clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);}
.hp .any-laptop {position: absolute; left: 5%; width: 46%; bottom: 8%;}
.hp .any-laptop .any-in {position: relative; aspect-ratio: 16 / 10; border-radius: 10px 10px 0 0; overflow: hidden; border: 6px solid #1B2233; border-bottom-width: 10px; box-shadow: var(--sh-float);}
.hp .any-url {position: absolute; left: 8px; right: 8px; top: 8px; padding: 3px 8px; border-radius: 6px; background: rgba(255,255,255,.94); font-size: 10.5px; color: var(--muted);}
.hp .any-base {display: block; height: 10px; margin: 0 -8%; border-radius: 0 0 12px 12px; background: linear-gradient(#C9CFDA, #9EA6B4);}
.hp .any-phone {position: absolute; right: 9%; bottom: 6%;}
@media (max-width: 599px) {
.hp .wsc-unit {grid-template-columns: 1fr; padding: 16px; gap: 10px; align-content: center;}
.hp .wsc-unit .wsc-card {position: absolute; right: 12px; bottom: 12px; width: 180px; padding: 10px; font-size: 12px;}
.hp .wsc-unit .wsc-card .uc-plan {display: none;}
.hp .wsc-unit .plate {align-self: start;}
.hp .wsc-detail {grid-template-columns: 1fr; padding: 14px; gap: 8px;}
.hp .wsc-detail .dt-amen {grid-row: auto;}
.hp .dt-amen ul {grid-template-columns: 1fr 1fr; gap: 6px;}
.hp .dt-amen li {padding: 6px 8px; font-size: 12px;}
.hp .dt-doc {display: none;}
.hp .any-phone {--pw: 86px !important;}
.hp .pin {font-size: 12px; height: 30px;}
}
.hp .interest-vis {position: relative; display: grid; grid-template-columns: auto 56px minmax(0, 1fr); align-items: center; gap: 0; padding: clamp(24px, 3vw, 44px); border-radius: var(--r-tile); background: var(--field); box-shadow: var(--sh-soft); overflow: hidden; min-height: 460px;}
.hp .iv-phone .phone-screen {font-size: 5.4cqw; background: #0E1322;}
.hp .iv-hub {position: absolute; inset: 0;}
.hp .iv-hub img {width: 100%; height: 100%; object-fit: cover;}
.hp .iv-hub::after {content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,19,34,.35), rgba(14,19,34,0) 30%, rgba(14,19,34,0) 45%, rgba(14,19,34,.55));}
.hp .iv-sheet {position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: .75em; padding: .7em 1.1em 1.3em; border-radius: 1.5em 1.5em 0 0; background: #fff; box-shadow: 0 -10px 30px -12px rgba(0,0,0,.45);}
.hp .iv-grab {justify-self: center; width: 2.6em; height: .3em; border-radius: 99px; background: var(--border-2);}
.hp .iv-row {display: flex; align-items: center; justify-content: space-between; gap: .5em;}
.hp .iv-row b {font-family: var(--f-head); font-weight: 500; font-size: 1.45em; letter-spacing: -.025em; line-height: 1;}
.hp .iv-row .badge {font-size: .72em; height: auto; padding: .35em .7em;}
.hp .iv-facts {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4em;}
.hp .iv-facts span {display: grid; gap: .15em; padding: .55em .6em; border-radius: .8em; background: var(--mist); font-weight: 500; font-size: .86em; white-space: nowrap;}
.hp .iv-facts small {color: var(--muted); font-size: .8em; font-weight: 400;}
.hp .iv-btn {text-align: center; padding: .85em; border-radius: 99px; background: var(--navy); color: #fff; font-weight: 500; font-size: .92em; transition: transform .2s, background .3s;}
.hp .iv-btn.is-press {transform: scale(.94); background: var(--b1);}
.hp .iv-line {width: 100%; height: 40px; overflow: visible;}
.hp .iv-line path {stroke: rgba(255,255,255,.55); stroke-width: 2; stroke-dasharray: 4 6; fill: none;}
.hp .iv-line circle {fill: #fff; opacity: 0; filter: drop-shadow(0 0 6px #fff);}
.hp .iv-inbox {background: #fff; border-radius: 22px; padding: 14px; box-shadow: var(--sh-float); font-size: 13.5px; display: grid; gap: 4px;}
.hp .iv-head {display: flex; justify-content: space-between; align-items: center; padding: 4px 6px 10px;}
.hp .iv-head b {font-weight: 500;}
.hp .iv-item {display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; padding: 9px 8px; border-radius: 12px; line-height: 1.3;}
.hp .iv-item b {font-weight: 500; display: block;}
.hp .iv-item small {color: var(--muted); font-size: 12.5px;}
.hp .iv-item .fi {width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--tint); color: var(--b1);}
.hp .iv-item .ft {font-size: 12px; color: var(--faint);}
.hp .iv-item.is-new {background: linear-gradient(90deg, rgba(103,142,229,.14), rgba(103,142,229,0));}
.hp .js .iv-item.is-new {opacity: 0; transform: translateY(-8px); transition: opacity .4s, transform .5s var(--ease-snap);}
.hp .js .iv-item.is-new.is-on, .hp .reduced-motion .iv-item.is-new {opacity: 1; transform: none;}
@media (max-width: 767px) {
.hp .interest-vis {grid-template-columns: 1fr; justify-items: center; gap: 14px; min-height: 0; padding: 20px 16px 52px;}
.hp .iv-line {width: 40px; height: 60px; transform: rotate(90deg);}
.hp .iv-inbox {width: 100%;}
}
.hp .pp-live {min-height: 460px;}
@media (min-width: 1024px) {
.hp .ws-grid {grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);}
.hp .ws-words, .hp .ws-scenes {display: contents;}
.hp .ws-word {grid-column: 1;}
.hp .ws-scene {grid-column: 2; margin-bottom: 24px;}
.hp .ws-word:nth-child(1) {grid-row: 2;}
.hp .ws-scene:nth-child(1) {grid-row: 2;}
.hp .ws-word:nth-child(2) {grid-row: 3;}
.hp .ws-scene:nth-child(2) {grid-row: 3;}
.hp .ws-word:nth-child(3) {grid-row: 4;}
.hp .ws-scene:nth-child(3) {grid-row: 4;}
.hp .ws-word:nth-child(4) {grid-row: 5;}
.hp .ws-scene:nth-child(4) {grid-row: 5;}
.hp .ws-word:nth-child(5) {grid-row: 6;}
.hp .ws-scene:nth-child(5) {grid-row: 6;}
.hp .ws-progress {display: none;}
}
.hp .kit-doc {display: flex; align-items: center; gap: .6em; padding: .5em .7em; border-radius: .8em; background: #fff; box-shadow: 0 0 0 1px var(--border); font-size: .82em;}
.hp .kit-doc .fc-ic {width: 2em; height: 2.4em; font-size: .6em;}
.hp .kit-doc b {display: block; font-weight: 500;}
.hp .kit-doc small {color: var(--muted); font-size: .85em;}
.hp .chip-sample {margin-inline-start: 4px; padding: 2px 8px; border-radius: 999px; background: var(--tint); color: var(--muted); font-size: 11.5px; font-weight: 500;}
.hp .bento-note {margin-top: 18px; display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px;}
.hp .ra {width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--b1); color: #fff; font-size: 12.5px; font-weight: 500; flex: none;}
.hp .part .media-panel .sample {z-index: 6;}
.hp .part .media-panel [data-pm="with"] {color: var(--navy);}
.hp .sec-head {margin-bottom: clamp(36px, 24px + 2vw, 64px);}
.hp .sec-head-row .sec-head {margin-bottom: 0;}
.hp .tabs {display: grid; gap: clamp(28px, 20px + 2vw, 56px);}
.hp .tab-list {position: relative; justify-self: center; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 5px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--border-2), var(--sh-card); isolation: isolate; max-width: 100%;}
.hp .tab-list [role="tab"] {display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; font-weight: 500; font-size: 15px; color: var(--muted); white-space: nowrap; transition: color .3s;}
.hp .tab-list [role="tab"] .ic {width: 18px; height: 18px;}
.hp .tab-list [role="tab"][aria-selected="true"] {color: #fff;}
.hp .tab-thumb {position: absolute; z-index: -1; top: 5px; bottom: 5px; left: 0; width: var(--tw, 0); transform: translateX(var(--tx, 5px)); border-radius: 999px; background: var(--navy); transition: transform .45s var(--ease-snap), width .45s var(--ease-snap);}
.hp .no-js .tab-thumb {display: none;}
.hp .tab-panel[hidden] {display: none;}
.hp .tab-panel.is-enter {animation: hp-tabIn .45s var(--ease-snap);}
@keyframes hp-tabIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 699px) {
.hp .tab-list {justify-self: stretch; grid-auto-flow: row; grid-auto-rows: 1fr; border-radius: 24px;}
.hp .tab-thumb {left: 5px; right: 5px; top: 0; bottom: auto; width: auto; height: var(--th, 0); transform: translateY(var(--ty, 5px)); border-radius: 20px;}
}
.hp .part-cap {position: absolute; left: 50%; bottom: 16px; translate: -50% 0; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.92);}
@media (max-width: 1023px) and (min-width: 600px) {
.hp .part .media-panel .phone {--pw: 230px !important;}
}
@media (max-width: 599px) {
.hp .part .media-panel .phone {--pw: 196px !important;}
.hp .part .media-panel .part-cap {top: 12px; bottom: auto;}
}
.hp .hubx-card .floor-card-plan {height: 120px; position: relative;}
.hp .hubx-card .floor-card-plan img {position: absolute; inset: 0; object-fit: cover;}
.hp .floor-card-thumb svg {width: 80%; height: 80%; color: var(--b1);}
.hp .floor-card-thumb {display: grid; place-items: center;}
.hp .dt-plan .pay {height: 40px; border-radius: 10px;}
.hp .dt-plan .pay i {font-size: 14px;}
.hp .dt-plan .pay i span {font-size: 14px;}
/* ---- pages-kit.css ---- */
.hp .page-hero .ripple {display: grid; grid-template-columns: 250px minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 16px 22px; align-items: center; place-items: stretch; min-height: 560px; padding: 54px 26px 18px;}
.hp .rp-admin {position: relative; z-index: 3; align-self: center; display: grid; gap: 14px; padding: 18px; border-radius: 22px; background: #fff; color: var(--navy); box-shadow: var(--sh-panel);}
.hp .rp-ah {display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;}
.hp .rp-t small {display: block; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 500;}
.hp .rp-t b {font-family: var(--f-head); font-weight: 500; font-size: 18px; letter-spacing: -.02em;}
.hp .rp-you {padding: 3px 10px; border-radius: 99px; background: var(--tint); color: var(--b1); font-size: 12px; font-weight: 500;}
.hp .rp-rows {list-style: none; padding: 0; margin: 0; display: grid; gap: 4px;}
.hp .rp-rows li {display: grid; grid-template-columns: 40px 1fr auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 9px 10px; border-radius: 12px; font-size: 13px; transition: background .3s, box-shadow .3s;}
.hp .rp-u {grid-row: 1 / 3; font-family: var(--f-head); font-weight: 500; font-size: 15px;}
.hp .rp-b {grid-row: 1 / 3; color: var(--muted); font-size: 12px;}
.hp .rp-pp {grid-column: 3; grid-row: 1; display: inline-flex; align-items: baseline; gap: 6px; justify-self: end; white-space: nowrap; font-variant-numeric: tabular-nums;}
.hp .rp-pp b {font-weight: 500;}
.hp .rp-pp s {color: var(--faint); font-size: 11.5px; text-decoration-color: var(--red);}
.hp .rp-rst {grid-column: 3; grid-row: 2; justify-self: end; font-style: normal; font-size: 11px; font-weight: 500; padding: 1px 8px; border-radius: 99px;}
.hp .rp-rst.sold {background: #EEF0F3; color: var(--muted);}
.hp .rp-row {background: var(--mist);}
.hp .rp-row.is-edit {background: var(--tint); box-shadow: inset 0 0 0 1.5px var(--b3);}
.hp .rp-price.is-dirty {color: var(--b1);}
.hp .rp-pub {display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 14px; font-weight: 500; transition: transform .2s, box-shadow .3s;}
.hp .rp-pub.is-press {transform: scale(.96);}
.hp .rp-pub.is-dirty {box-shadow: 0 0 0 4px rgba(103,142,229,.35);}
.hp .rp-wall {position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 12px; align-self: center; justify-items: center;}
.hp .rp-ph {width: min(100%, 100px); container-type: inline-size;}
.hp .rp-ph .phone {aspect-ratio: 9 / 16.6;}
.hp .rp-ph .phone {--pw: 100cqw; width: 100%; box-shadow: 0 18px 30px -18px rgba(16,22,36,.7); transition: transform .5s var(--ease-snap);}
.hp .rp-ph .phone-screen {font-size: 9.6cqw;}
.hp .rp-scr {position: absolute; inset: 0; display: flex; flex-direction: column; gap: .35em; padding: 1.3em .7em .8em; background: #F7F9FD;}
.hp .rp-who {display: flex; align-items: center; gap: .35em; font-size: .7em; color: var(--muted); font-weight: 500;}
.hp .rp-who::before {content: attr(data-i); width: 1.9em; height: 1.9em; border-radius: 50%; display: grid; place-items: center; background: var(--b2); color: #fff; font-size: .9em;}
.hp .rp-img {position: relative; height: 30%; flex: none; border-radius: .6em; background: url(../img/aquora.jpg) 50% 40% / cover;}
.hp .rp-l {font-size: .72em; color: var(--muted); margin-top: .2em;}
.hp .rp-p {font-family: var(--f-head); font-weight: 500; font-size: 1.12em; letter-spacing: -.03em; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums;}
.hp .rp-st {align-self: flex-start; font-style: normal; font-size: .62em; font-weight: 500; padding: .2em .6em; border-radius: 99px;}
.hp .rp-st.sold {background: #EEF0F3; color: var(--muted);}
.hp .rp-list {display: grid; gap: .28em; margin-top: .25em; padding-top: .4em; border-top: 1px solid #E6EAF2;}
.hp .rp-list > span {display: flex; align-items: center; justify-content: space-between; gap: .4em; font-size: .56em; color: var(--muted);}
.hp .rp-list b {font-weight: 500;}
.hp .rp-list i {height: .5em; width: 45%; border-radius: 99px; background: #E3E8F2;}
.hp .rp-list > span:nth-child(2) i {width: 34%;}
.hp .rp-list > span:nth-child(3) i {width: 52%; background: #D9F4E3;}
.hp .rp-share {margin-top: auto; align-self: stretch; text-align: center; padding: .35em 0; border-radius: 99px; background: var(--navy); color: #fff; font-size: .6em; font-weight: 500;}
.hp .rp-upd {position: absolute; left: 50%; top: 33%; bottom: auto; translate: -50% 0; box-shadow: 0 4px 10px -4px rgba(138,90,0,.4); display: inline-flex; align-items: center; gap: .3em; padding: .3em .6em; border-radius: 99px; background: #FFF4DE; color: #8A5A00; font-size: .62em; font-weight: 500; white-space: nowrap; opacity: 0; transform: translateY(.6em); transition: opacity .25s, transform .35s var(--ease-snap);}
.hp .rp-upd i {width: .6em; height: .6em; border-radius: 50%; background: var(--amber);}
.hp .rp-ph.is-upd .phone {transform: translateY(-6px) scale(1.04); box-shadow: 0 0 0 3px var(--amber), 0 18px 30px -18px rgba(16,22,36,.7);}
.hp .rp-ph.is-upd .rp-upd {opacity: 1; transform: none;}
.hp .rp-ph.is-upd .rp-p {color: #8A5A00;}
.hp .rp-foot {grid-column: 1 / -1; display: flex; align-items: center; gap: 16px;}
.hp .rp-count {flex: none;}
.hp .rp-count b {font-variant-numeric: tabular-nums; display: inline-block; min-width: 3ch; text-align: end;}
.hp .rp-dots {flex: 1; height: 44px; min-width: 0;}
.hp .ripple .sample {top: 18px; bottom: auto; right: 18px;}
.hp .ripple .rp-ctrl {left: auto; right: 18px; bottom: 18px; display: none;}
.hp .js .ripple .rp-ctrl {display: flex;}
.hp .reduced-motion .ripple .rp-ctrl {display: none;}
.hp .ripple .rp-foot {padding-inline-end: 54px;}
@media (max-width: 1180px) and (min-width: 1024px) {
.hp .page-hero .ripple {grid-template-columns: 1fr; padding: 54px 20px 18px; min-height: 0;}
.hp .rp-wall {grid-template-columns: repeat(4, minmax(0, 1fr));}
.hp .rp-wall .rp-ph:nth-child(n+5) {display: none;}
}
@media (max-width: 599px) {
.hp .page-hero .ripple {grid-template-columns: 1fr; min-height: 0; padding: 60px 14px 16px; gap: 16px;}
.hp .rp-wall {grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 8px;}
.hp .rp-wall .rp-ph:nth-child(n+9) {display: none;}
.hp .rp-ph {width: 100%;}
.hp .rp-foot {flex-wrap: wrap; padding-inline-end: 50px;}
.hp .rp-dots {flex-basis: 100%; order: 2; height: 36px;}
.hp .ripple .sample {top: 16px; left: 14px; right: auto;}
}
.hp .kit-chaos {position: relative; min-height: 460px;}
.hp .kit-chaos > * {position: absolute;}
.hp .kc-phone {left: 6%; top: 0; --pw: 240px;}
.hp .kc-phone .phone-screen {filter: grayscale(1);}
.hp .kc-f1 {right: 4%; top: 6%; rotate: 5deg;}
.hp .kc-f2 {right: 0; top: 34%; rotate: -4deg;}
.hp .kc-stale {right: 3%; bottom: 6%; rotate: 3deg; width: 230px; display: grid; gap: 6px; padding: 14px; border-radius: 16px; background: #fff; box-shadow: var(--sh-float); font-size: 13px;}
.hp .kc-stale small {color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500;}
.hp .kc-stale span {display: flex; gap: 10px; align-items: center;}
.hp .kc-stale s {color: var(--muted); text-decoration-color: var(--red);}
.hp .kc-stale em {font-style: normal; font-size: 11px; padding: 2px 8px; border-radius: 99px; background: var(--red-bg); color: var(--red-text); font-weight: 500;}
@media (max-width: 899px) {
.hp .kit-chaos {min-height: 520px;}
}
@media (max-width: 599px) {
.hp .kit-chaos {min-height: 470px;}
.hp .kc-phone {--pw: 200px; left: 0;}
.hp .kc-f1 {top: 2%; right: 0;}
.hp .kc-f2 {top: 44%; right: -4px;}
.hp .kc-stale {width: 190px; bottom: 0; right: 0;}
}
.hp .mail-thread {width: min(92%, 420px); background: #fff; border-radius: 18px; padding: 14px; box-shadow: var(--sh-float); display: grid; gap: 6px; font-size: 13.5px;}
.hp .mt-row {display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; padding: 8px 6px; border-bottom: 1px solid var(--border);}
.hp .mt-row:first-child {grid-template-columns: 1fr auto;}
.hp .mt-row b {font-weight: 500;}
.hp .mt-row small {color: var(--faint); font-size: 12px;}
.hp .mt-row .av {width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #D9DCE2; font-size: 12px; font-weight: 500;}
.hp .mt-cal {display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-top: 6px; font-size: 11.5px; text-align: center;}
.hp .mt-cal span {padding: 8px 2px; border-radius: 8px; background: var(--mist); color: var(--muted);}
.hp .mt-cal .x {text-decoration: line-through; text-decoration-color: var(--red); color: var(--before-text); background: #E9EAEE;}
.hp .finder {width: min(92%, 440px); background: #fff; border-radius: 16px; overflow: hidden; box-shadow: var(--sh-float); font-size: 13.5px;}
.hp .fd-bar {display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #ECEDF0;}
.hp .fd-bar i {width: 10px; height: 10px; border-radius: 50%; background: #C9CCD3;}
.hp .fd-bar b {margin-inline-start: 10px; font-weight: 500;}
.hp .finder ul {list-style: none; padding: 6px;}
.hp .finder li {display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px;}
.hp .finder li:nth-child(odd) {background: #F6F6F7;}
.hp .finder .fc-ic {width: 24px; height: 28px; font-size: 7.5px;}
.hp .finder small {color: var(--faint); font-size: 12px;}
.hp .old-list {width: min(92%, 420px); background: #fff; border-radius: 16px; padding: 16px; box-shadow: var(--sh-float); font-size: 14px; display: grid; gap: 4px;}
.hp .ol-h {display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px;}
.hp .ol-h b {font-weight: 500;}
.hp .ol-h small {color: var(--muted); font-size: 12px;}
.hp .ol-row {display: grid; grid-template-columns: 60px 1fr 1fr 60px; align-items: center; padding: 8px; border-radius: 8px;}
.hp .ol-row:nth-child(even) {background: #F6F6F7;}
.hp .ol-row em {font-style: normal; font-size: 11.5px; font-weight: 500;}
.hp .ol-row.is-sold span:nth-child(3) {text-decoration: line-through; text-decoration-color: var(--red);}
.hp .ol-row.is-sold em {color: var(--red-text);}
.hp .ol-q {margin-top: 8px; padding: 10px 12px; border-radius: 12px 12px 12px 4px; background: #F1F2F4; font-size: 13.5px;}
.hp .onboard {width: min(92%, 420px); background: #fff; border-radius: 22px; padding: 16px; box-shadow: var(--sh-panel); display: grid; gap: 10px;}
.hp .ob-h {display: flex; align-items: center; gap: 10px;}
.hp .ob-h small {display: block; color: var(--muted); font-size: 12px;}
.hp .ob-h b {font-family: var(--f-head); font-weight: 500; font-size: 20px; letter-spacing: -.02em;}
.hp .ob-h .badge {margin-inline-start: auto;}
.hp .ob-list {list-style: none; padding: 0; display: grid; gap: 6px;}
.hp .ob-list li {position: relative; display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: center; padding: 10px; border-radius: 14px; background: var(--mist); overflow: hidden; font-size: 14px;}
.hp .ob-list b {display: block; font-weight: 500;}
.hp .ob-list small {color: var(--muted); font-size: 12.5px;}
.hp .ob-c {width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--live); color: #fff;}
.hp .ob-c .ic {stroke-width: 2.6;}
.hp .ob-list i {position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--b3), var(--b1)); transform-origin: left; transform: scaleX(var(--p));}
.hp .js .onboard.is-play .ob-list li {animation: hp-obIn .5s var(--ease-snap) both;}
.hp .js .onboard.is-play .ob-list li:nth-child(2) {animation-delay: .24s;}
.hp .js .onboard.is-play .ob-list li:nth-child(3) {animation-delay: .48s;}
.hp .js .onboard.is-play .ob-list li:nth-child(4) {animation-delay: .72s;}
.hp .js .onboard.is-play .ob-list i {animation: hp-obBar .7s var(--ease-out) both;}
.hp .js .onboard.is-play .ob-list li:nth-child(2) i {animation-delay: .24s;}
.hp .js .onboard.is-play .ob-list li:nth-child(3) i {animation-delay: .48s;}
.hp .js .onboard.is-play .ob-list li:nth-child(4) i {animation-delay: .72s;}
@keyframes hp-obIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes hp-obBar { from { transform: scaleX(0); } }
.hp .kit-lib {display: flex; gap: 22px; align-items: center; justify-content: center;}
.hp .kit-lib .phone {--pw: 250px;}
.hp .lib-side {display: grid; gap: 10px;}
.hp .lib-chip {display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; background: #fff; box-shadow: var(--sh-float); font-size: 14px; font-weight: 500; white-space: nowrap;}
.hp .lib-chip .ic {color: var(--b1);}
.hp .cur-scene {display: grid; gap: 16px; justify-items: center; width: min(94%, 460px);}
.hp .cur-fan {display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;}
.hp .cur-ic {display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); color: #fff; font-weight: 500; font-size: 14px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);}
.hp .cur-dex {width: 100%; border-radius: 18px;}
@media (max-width: 1023px) {
.hp .part .media-panel {min-height: 420px; aspect-ratio: auto;}
}
@media (max-width: 599px) {
.hp .kit-lib {gap: 10px;}
.hp .kit-lib .phone {--pw: 190px !important;}
.hp .lib-side {position: absolute; right: 10px; bottom: 50px; gap: 6px;}
.hp .lib-chip {height: 32px; font-size: 12px; padding: 0 10px;}
.hp .lib-side .lib-chip:nth-child(n+3) {display: none;}
.hp .console {font-size: 12px; padding-left: 12px;}
.hp .cur-scene {gap: 10px;}
.hp .mail-thread, .hp .finder, .hp .old-list {font-size: 12.5px;}
.hp .ol-row {grid-template-columns: 44px 1fr 1fr 40px;}
}
.hp .kit-bento .feat {min-height: 380px;}
.hp .kf-share {display: flex !important; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;}
.hp .ks-sheet {width: 250px; background: #fff; border-radius: 18px; padding: 10px; box-shadow: var(--sh-float); display: grid; gap: 10px; font-size: 13px;}
.hp .ks-unit {display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center;}
.hp .ks-unit img {width: 64px; height: 52px; border-radius: 10px; object-fit: cover;}
.hp .ks-unit b {display: block; font-weight: 500;}
.hp .ks-unit small {color: var(--muted); font-size: 12px;}
.hp .ks-to {display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 999px; background: var(--mist);}
.hp .ks-to span:first-child {color: var(--muted); font-size: 12px;}
.hp .ks-btn {margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--navy); color: #fff; font-weight: 500; font-size: 12.5px; transition: transform .2s, background .3s;}
.hp .ks-btn.is-press {transform: scale(.9); background: var(--b1);}
.hp .ks-arrow {width: 60px; color: var(--b1);}
.hp .ks-room {display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 18px; background: #fff; box-shadow: var(--sh-float); font-size: 13px; transition: transform .5s var(--ease-snap), opacity .4s;}
.hp .ks-room small {display: block; color: var(--muted); font-size: 11.5px;}
.hp .ks-room b {font-weight: 500; font-family: var(--f-head); font-size: 16px;}
.hp .js .kf-share:not(.is-done) .ks-room {opacity: .25; transform: scale(.92);}
.hp .kf-qr {display: flex !important; align-items: center; justify-content: center; gap: 14px;}
.hp .qr-card {display: grid; justify-items: center; gap: 8px; padding: 14px; border-radius: 18px; background: #fff; box-shadow: var(--sh-float); font-size: 12px; text-align: center; color: var(--muted);}
.hp .qr-card b {color: var(--navy); font-weight: 500;}
.hp .qr {width: 104px; height: 104px; color: var(--navy); shape-rendering: crispEdges;}
.hp .qr-q {display: grid; gap: 8px;}
.hp .qq {display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 8px; padding: 8px 8px 8px 10px; border-radius: 14px; background: #fff; box-shadow: var(--sh-float); font-size: 12.5px;}
.hp .qq b {display: block; font-weight: 500;}
.hp .qq small {color: var(--muted); font-size: 11.5px;}
.hp .qq-ok {box-sizing: border-box; width: 88px; flex: none; text-align: center; white-space: nowrap; padding: 6px 10px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 11.5px; font-weight: 500; transition: background .3s;}
.hp .qq.is-ok .qq-ok {background: var(--live-text);}
.hp .kf-credit {display: grid !important; gap: 18px; justify-items: center; align-content: center;}
.hp .chain {list-style: none; padding: 0; display: flex; align-items: center; gap: 0;}
.hp .chain li {display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 999px; background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); font-size: 13px; font-weight: 500;}
.hp .chain li {position: relative;}
.hp .chain li + li {margin-inline-start: 16px;}
.hp .chain li + li::before {content: ""; position: absolute; inset-inline-end: 100%; top: 50%; width: 16px; height: 2px; margin-top: -1px; background: rgba(255,255,255,.55);}
.hp .credit-tag {display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px; background: #fff; color: var(--navy); font-size: 14px; box-shadow: var(--sh-float);}
.hp .kf-dex {display: grid !important; place-items: center;}
.hp .ann {width: min(100%, 300px); display: grid; gap: 8px; padding: 12px; border-radius: 18px; background: var(--wa-bg);}
.hp .ann-msg {display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 4px 14px 14px 14px; background: #fff; font-size: 13.5px; line-height: 1.35; box-shadow: 0 1px 1px rgba(0,0,0,.08);}
.hp .ann-read {display: flex; gap: 12px; font-size: 12.5px; color: #1F2430; padding-inline: 4px;}
.hp .ann-read span {display: inline-flex; align-items: center; gap: 4px;}
.hp .ann-read .ic {color: #0B0F19;}
.hp .ann-read b {color: var(--navy); font-weight: 500; font-variant-numeric: tabular-nums;}
.hp .kf-phones {display: flex !important; align-items: flex-end; justify-content: center; gap: 14px;}
.hp .kf-phones .phone:nth-child(2) {translate: 0 -10px;}
.hp .kf-phones .phone {flex: 0 1 auto; min-width: 0; max-width: calc((100% - 28px) / 3);}
@media (max-width: 599px) {
.hp .kf-qr {flex-direction: column;}
.hp .chain li {padding: 0 9px; font-size: 12px;}
}
/* ---- pages-dealbox.css ---- */
.hp .phone-screen.scr-dbx, .hp .dbp-room-screen.scr-dbx {display: flex; flex-direction: column;}
.hp .page-hero .dbp {display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: center; place-items: center stretch; min-height: 620px; padding: 28px 24px 24px 28px;}
.hp .dbp-room-wrap {position: relative; display: grid; justify-items: center;}
.hp .dbp-room {width: 270px; container-type: inline-size; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: var(--sh-panel);}
.hp .dbp-url {display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--border); background: #F3F5F9; color: var(--muted); font-size: 11.5px;}
.hp .dbp-url .ic {width: 13px; height: 13px; color: var(--live-text);}
.hp .dbp-url-tag {margin-inline-start: auto; padding: 2px 8px; border-radius: 99px; background: var(--navy); color: #fff; font-size: 10.5px; font-weight: 500;}
.hp .dbp-room-screen {position: relative; display: flex; flex-direction: column; height: 430px; font-size: 4.8cqw; line-height: 1.35; color: var(--navy); overflow: hidden; transition: filter .4s;}
.hp .dbx-plan {position: absolute; left: .5em; bottom: .5em; width: 4.6em; padding: .3em; border-radius: .5em; background: rgba(255,255,255,.95); color: var(--navy); opacity: 0; transform: scale(.7); transform-origin: left bottom; transition: opacity .3s, transform .45s var(--ease-snap);}
.hp .dbx-plan svg {display: block; width: 100%; height: auto;}
.hp .dbx-plan.is-on {opacity: 1; transform: none;}
.hp .dbx-card {transition: box-shadow .4s, transform .5s var(--ease-snap);}
.hp .dbx-card.is-pick {box-shadow: 0 0 0 2px var(--b1), 0 10px 22px -12px rgba(80,111,179,.8); transform: translateY(-2px);}
.hp .dbx-card.is-view {box-shadow: 0 0 0 2px rgba(103,142,229,.55), 0 8px 18px -12px rgba(16,22,36,.3);}
.hp .dbp .tap {position: absolute; z-index: 20; width: 2.4em; height: 2.4em; border-radius: 50%; background: rgba(255,255,255,.55); box-shadow: 0 0 0 2px #fff, 0 4px 12px rgba(16,22,36,.3); transform: translate(-50%, -50%) scale(0); opacity: 0; pointer-events: none;}
.hp .dbp .tap.is-on {animation: hp-dbTap .8s var(--ease-out) forwards;}
@keyframes hp-dbTap { 0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; } 25% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; } }
.hp .dbp-side {display: grid; gap: 12px; align-content: center; min-width: 0; min-height: 470px;}
.hp .dbp-views {display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(16,22,36,.22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);}
.hp .dbp-views button {display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; border-radius: 999px; color: #fff; font-size: 13.5px; font-weight: 500; transition: background .3s, color .3s; white-space: nowrap;}
.hp .dbp-views button[aria-checked="true"] {background: #fff; color: var(--navy);}
.hp .dbp-feed {padding: 12px; font-size: 13.5px;}
.hp .dbp-feed .feed-head {font-size: 13.5px; padding: 2px 4px 10px;}
.hp .dbp-feed .feed-item {padding: 7px 6px; grid-template-columns: 30px 1fr auto;}
.hp .dbp-feed .feed-item .fi {width: 30px; height: 30px;}
.hp .dbp-feed .feed-item .fi svg {width: 16px; height: 16px;}
.hp .dbp-feed .feed-list {list-style: none; padding: 0; display: grid; gap: 2px;}
.hp .dbp-feed .feed-list.newest-first {justify-content: flex-end;}
.hp .dbp .v-d, .hp .dbp .fx .v-d {display: none;}
.hp .dbp[data-view="dev"] .v-b, .hp .dbp[data-view="dev"] .fx .v-b {display: none;}
.hp .dbp[data-view="dev"] .v-d {display: inline;}
.hp .dbp[data-view="dev"] .fx .v-d {display: block;}
.hp .dbp-feed .fx b, .hp .dbp-feed .fx small {transition: opacity .3s;}
.hp .dbp.is-swapping .dbp-feed .fx b, .hp .dbp.is-swapping .dbp-feed .fx small {opacity: 0;}
.hp .dbp-ctrl {display: flex; justify-content: space-between; align-items: center;}
.hp .dbp-ctrl .btn {background: rgba(255,255,255,.95);}
.hp .dbp[data-view="dev"] .dbp-room-wrap::after {content: "Buyer details stay with the broker"; position: absolute; left: 50%; top: 44%; translate: -50% 0; padding: 8px 14px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 12.5px; font-weight: 500; white-space: nowrap; box-shadow: var(--sh-float);}
.hp .dbp[data-view="dev"] .dbp-room-screen {filter: blur(6px) saturate(.6);}
@media (max-width: 1360px) and (min-width: 1024px) {
.hp .dbp-room {width: 236px;}
.hp .dbp-room-screen {height: 400px;}
.hp .dbp-side {min-height: 440px;}
.hp .dbp-feed .feed-item .ft {display: none;}
.hp .dbp-feed .feed-item {grid-template-columns: 30px 1fr;}
}
@media (max-width: 1180px) and (min-width: 1024px) {
.hp .page-hero .dbp {padding: 22px 18px; gap: 16px;}
}
@media (max-width: 1023px) {
.hp .page-hero .dbp {justify-content: center;}
}
@media (max-width: 699px) {
.hp .page-hero .dbp {grid-template-columns: 1fr; padding: 56px 14px 16px; gap: 18px; min-height: 0;}
.hp .dbp-room {width: min(300px, 100%); justify-self: center;}
.hp .dbp-feed {min-height: 0;}
}
.hp .fwd-chain {position: relative; min-height: 420px; filter: grayscale(1);}
.hp .fwd-chain > * {position: absolute;}
.hp .fwd {display: flex; align-items: center; gap: 10px; padding: 12px 16px 12px 12px; border-radius: 16px; background: #fff; box-shadow: var(--sh-float); font-size: 13.5px;}
.hp .fwd b {display: block; font-weight: 500;}
.hp .fwd small {color: var(--muted); font-size: 12px;}
.hp .fwd:first-child {left: 0; top: 4%;}
.hp .fwd.f2 {left: 22%; top: 30%; opacity: .8;}
.hp .fwd.f3 {left: 44%; top: 55%; opacity: .55;}
.hp .fwd-ar {width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #E9EAEE; font-size: 16px;}
.hp .fwd-t {color: var(--faint);}
.hp .fwd-q {right: 6%; top: 10%; font-family: var(--f-head); font-weight: 500; font-size: 160px; line-height: 1; color: #D9DCE2;}
.hp .fwd-last {left: 6%; bottom: 2%; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 999px; background: #fff; box-shadow: var(--sh-float); font-size: 13px;}
.hp .fwd-last .av-g {background: #C9CCD3; color: #fff; width: 34px; height: 34px; font-size: 13px;}
.hp .fwd-last b {display: block; font-weight: 500;}
.hp .fwd-last small {color: var(--muted);}
@media (max-width: 599px) {
.hp .fwd-chain {min-height: 340px;}
.hp .fwd.f2 {left: 8%;}
.hp .fwd.f3 {left: 16%; top: 58%;}
.hp .fwd-q {font-size: 110px; top: 26%;}
}
.hp .dbx-hero-sm {height: 30%;}
.hp .dbx-hero-sm .dbx-hi {font-size: 1.9em;}
.hp .dbx-grid {display: grid; grid-template-columns: 1fr 1fr; gap: .5em;}
.hp .dg {position: relative; display: grid; gap: .1em; padding: .4em; border-radius: .8em; background: #fff; box-shadow: 0 0 0 1px var(--border); font-size: .82em;}
.hp .dg img {width: 100%; height: 4.2em; border-radius: .5em; object-fit: cover;}
.hp .dg b {font-weight: 500; font-size: .95em;}
.hp .dg small {color: var(--muted); font-size: .8em;}
.hp .dg-plan svg {height: 4.2em; width: 100%; color: var(--b1); background: var(--tint); border-radius: .5em; padding: .4em;}
.hp .dg-vid .pl {position: absolute; left: 50%; top: 2.5em; width: 1.8em; height: 1.8em; margin-left: -.9em; margin-top: -.9em; border-radius: 50%; background: rgba(255,255,255,.95);}
.hp .dg-vid .pl::after {content: ""; position: absolute; left: .7em; top: .5em; border: .4em solid transparent; border-left: .6em solid var(--navy); border-right: 0;}
.hp .dg-pay .pay {height: 4.2em; border-radius: .5em;}
.hp .dbx-share {gap: 20px;}
.hp .url-pill {position: absolute; left: 50%; bottom: 22px; translate: -50% 0; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px 0 14px; border-radius: 999px; background: #fff; box-shadow: var(--sh-float); font-size: 13.5px; font-weight: 500; white-space: nowrap;}
.hp .url-pill .ic {color: var(--live-text);}
.hp .url-pill em {font-style: normal; font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--tint); color: var(--b1);}
.hp .seen-card {width: min(92%, 380px); display: grid; gap: 10px; padding: 18px; border-radius: 22px; background: var(--wa-bg); box-shadow: var(--sh-float); font-size: 14.5px;}
.hp .seen-card .msg {max-width: 92%;}
.hp .seen-l {justify-self: center; font-size: 12px; color: var(--muted); padding: 3px 10px; border-radius: 8px; background: rgba(255,255,255,.8);}
.hp .seen-gap {justify-self: center; display: grid; gap: 6px; padding: 6px 0;}
.hp .seen-gap i {width: 4px; height: 4px; border-radius: 50%; background: #B9BEC7;}
.hp .buyer-card {width: min(94%, 440px); background: #fff; border-radius: 24px; padding: 18px; box-shadow: var(--sh-panel); display: grid; gap: 14px; font-size: 14px;}
.hp .bc-h {display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center;}
.hp .bc-h .av {width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--field); color: #fff; font-weight: 500; font-size: 17px;}
.hp .bc-h b {display: block; font-family: var(--f-head); font-weight: 500; font-size: 20px; letter-spacing: -.02em;}
.hp .bc-h small {color: var(--muted); font-size: 12.5px;}
.hp .bc-hot {background: #FFE9E1; color: #B4380D; gap: 4px;}
.hp .bc-hot .ic {color: #E4572E;}
.hp .bc-stats {display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;}
.hp .bc-stats span {padding: 10px 12px; border-radius: 14px; background: var(--mist);}
.hp .bc-stats small, .hp .bc-sec > small {display: block; color: var(--muted); font-size: 12px;}
.hp .bc-sec > small {margin-bottom: 8px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; font-size: 11px;}
.hp .bc-stats b {font-family: var(--f-head); font-weight: 500; font-size: 24px; letter-spacing: -.02em;}
.hp .bc-bars {font-size: 13px;}
.hp .bc-tags {display: flex; flex-wrap: wrap; gap: 6px;}
.hp .bc-tags span {padding: 6px 12px; border-radius: 999px; background: var(--tint); color: var(--bdeep); font-size: 12.5px; font-weight: 500;}
.hp .apps {position: relative; width: min(92%, 420px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;}
.hp .app {display: grid; justify-items: center; gap: 6px; padding: 16px 6px 12px; border-radius: 20px; background: #fff; box-shadow: var(--sh-float); font-size: 12px; font-weight: 500; color: var(--before-text);}
.hp .login {position: absolute; left: 50%; top: 50%; translate: -50% -30%; width: 240px; display: grid; gap: 6px; padding: 18px; border-radius: 18px; background: #fff; box-shadow: var(--sh-panel); font-size: 13px;}
.hp .login b {font-weight: 500;}
.hp .login small {color: var(--muted);}
.hp .pw {margin-top: 6px; padding: 10px 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px #D6D9DF; letter-spacing: .2em;}
.hp .part .media-panel [data-pm="with"] .phone:has(.chat) {margin-bottom: 30px;}
.hp .pdf-offer {width: min(92%, 400px); display: grid; gap: 12px;}
.hp .po-doc {display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 18px; background: #fff; box-shadow: var(--sh-float); font-size: 14px;}
.hp .po-doc b {display: block; font-weight: 500;}
.hp .po-doc small {color: var(--muted);}
.hp .po-wait {display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 16px; background: #fff; box-shadow: var(--sh-float); font-size: 14px;}
.hp .po-wait b {margin-inline-start: auto; font-weight: 500; color: var(--red-text);}
.hp .pdf-offer .msg.sys {justify-self: start; font-size: 13px;}
.hp .convert {gap: 18px;}
.hp .valid {display: flex; align-items: center; gap: .4em; font-size: .8em; color: var(--muted); padding: 0 .3em;}
.hp .fee {display: flex; justify-content: space-between; padding: .7em .8em; border-radius: .8em; background: #fff; box-shadow: 0 0 0 1px var(--border); font-size: .85em;}
.hp .fee b {font-weight: 500;}
@media (max-width: 767px) {
.hp .convert {flex-direction: column; gap: 10px;}
.hp .offer-card {width: min(100%, 280px);}
.hp .apps {grid-template-columns: repeat(3, 1fr); gap: 8px;}
.hp .apps .app:nth-child(7) {display: none;}
}
@media (max-width: 599px) {
.hp .part .media-panel .phone {--pw: 200px !important;}
.hp .url-pill {font-size: 12px; bottom: 50px;}
.hp .buyer-card {padding: 14px; gap: 10px; font-size: 13px;}
.hp .bc-stats b {font-size: 20px;}
}
.hp .selfserve {overflow: hidden;}
.hp .ss-grid {display: grid; gap: 48px; justify-items: center;}
.hp .selfserve .statement h2 {max-width: 20ch;}
.hp .selfserve .chip {background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);}
.hp .selfserve .chip .ic {color: #fff;}
.hp .ss-trail {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0;}
.hp .ss-step {display: inline-flex; align-items: center; gap: 8px; height: 44px; color: #fff; font-weight: 500; font-size: 15px;}
.hp .ss-step .ic {color: #fff; opacity: .85;}
.hp .ss-step + .ss-step {margin-inline-start: 56px; position: relative;}
.hp .ss-step + .ss-step::before {content: ""; position: absolute; right: calc(100% + 12px); top: 50%; width: 32px; height: 2px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.9) 0 4px, transparent 4px 8px);}
.hp .ss-win .ic {color: var(--wa); opacity: 1;}
.hp .js .ss-trail .ss-step {opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .5s var(--ease-snap);}
.hp .js .ss-trail.is-in .ss-step {opacity: 1; transform: none;}
.hp .js .ss-trail.is-in .ss-step:nth-child(2) {transition-delay: .242s;}
.hp .js .ss-trail.is-in .ss-step:nth-child(3) {transition-delay: .484s;}
.hp .js .ss-trail.is-in .ss-step:nth-child(4) {transition-delay: .726s;}
.hp .reduced-motion .ss-trail .ss-step {opacity: 1; transform: none;}
@media (max-width: 899px) {
.hp .ss-trail {flex-direction: column; gap: 22px;}
.hp .ss-step + .ss-step {margin-inline-start: 0;}
.hp .ss-step + .ss-step::before {right: auto; left: 50%; top: -22px; width: 2px; height: 22px; background: repeating-linear-gradient(180deg, rgba(255,255,255,.9) 0 4px, transparent 4px 8px);}
}
.hp .dbp .dbx-brand small {white-space: nowrap;}
.hp .dbp .dbx-by {white-space: nowrap; font-size: .9em;}
.hp .reduced-motion .dbp-ctrl {display: none;}
.hp .shr {width: min(100%, 320px); display: grid; gap: 12px; padding: 16px; border-radius: 22px; background: #fff; color: var(--navy); box-shadow: var(--sh-panel); font-size: 13.5px; margin-bottom: 40px;}
.hp .shr-h {display: flex; align-items: center; gap: 10px;}
.hp .shr-h .ra {width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--b2); color: #fff; font-weight: 500;}
.hp .shr-h b {display: block; font-weight: 500; font-size: 15px;}
.hp .shr-h small {color: var(--muted); font-size: 12px;}
.hp .shr-list {list-style: none; padding: 0; margin: 0; display: grid; gap: 6px;}
.hp .shr-list li {display: grid; grid-template-columns: 44px 1fr 22px; align-items: center; gap: 10px; padding: 6px 8px 6px 6px; border-radius: 14px; background: var(--mist);}
.hp .shr-list b {display: block; font-weight: 500;}
.hp .shr-list small {color: var(--muted); font-size: 12px;}
.hp .shr-th {width: 44px; height: 36px; border-radius: 10px; background: center / cover var(--tint); display: grid; place-items: center;}
.hp .shr-plan {color: var(--b1);}
.hp .shr-plan svg {width: 72%;}
.hp .shr-vid {position: relative;}
.hp .shr-vid::after {content: ""; border: 6px solid transparent; border-left: 9px solid #fff; border-right: 0; margin-left: 3px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4));}
.hp .shr-pay {grid-auto-flow: column; gap: 2px; padding: 6px; align-items: end;}
.hp .shr-pay i {width: 6px; height: calc(var(--v) * 50px); border-radius: 2px; background: var(--b1);}
.hp .shr-ck {width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--border-2); color: #fff; transition: background .3s, box-shadow .3s;}
.hp .shr-ck .ic {width: 13px; height: 13px; stroke-width: 2.6; transform: scale(0); transition: transform .3s var(--ease-snap);}
.hp .shr-btn {display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border-radius: 999px; background: var(--navy); color: #fff; font-weight: 500;}
.hp .media-panel[data-state="with"] .shr-ck {animation: hp-shrTick .35s var(--ease-snap) forwards; animation-delay: calc(.5s + var(--i, 0) * .32s);}
.hp .media-panel[data-state="with"] .shr-btn {animation: hp-shrTap .5s var(--ease-snap) 2.1s both;}
@keyframes hp-shrTick { to { background: var(--b1); box-shadow: none; } }
.hp .media-panel[data-state="with"] .shr-list li .shr-ck .ic {transform: scale(1); transition-delay: calc(.55s + var(--i, 0) * .32s);}
@keyframes hp-shrTap { 0%, 100% { transform: none; } 40% { transform: scale(.94); background: var(--b1); } }
.hp .reduced-motion .media-panel .shr-ck {background: var(--b1); box-shadow: none; animation: none;}
.hp .reduced-motion .shr-ck .ic {transform: none;}
.hp .offer-card {width: 290px; display: grid; gap: 10px; padding: 14px; border-radius: 22px; background: #fff; color: var(--navy); box-shadow: var(--sh-panel); font-size: 13.5px;}
.hp .oc-top {display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center;}
.hp .oc-img {height: 52px; border-radius: 12px; background: center / cover var(--tint);}
.hp .oc-top small {display: block; color: var(--muted); font-size: 12px;}
.hp .oc-top b {display: block; font-family: var(--f-head); font-weight: 500; font-size: 19px; letter-spacing: -.02em; line-height: 1.15;}
.hp .oc-price {display: grid; justify-items: start; gap: 8px; padding: 12px 14px; border-radius: 16px; background: var(--navy); color: #fff;}
.hp .oc-price s {display: block; color: var(--on-dark-2); font-size: 12px;}
.hp .oc-price b {display: block; white-space: nowrap; font-family: var(--f-head); font-weight: 500; font-size: 26px; letter-spacing: -.02em; line-height: 1.1;}
.hp .oc-price .badge {font-size: 11.5px;}
.hp .oc-rows {display: grid; gap: 6px;}
.hp .oc-rows span {display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px;}
.hp .oc-rows span:last-child {justify-content: space-between; padding: 9px 12px; border-radius: 12px; background: var(--mist); color: var(--navy);}
.hp .oc-rows b {font-weight: 500;}
.hp .oc-btn {display: grid; place-items: center; height: 44px; border-radius: 999px; background: var(--navy); color: #fff; font-weight: 500;}
.hp .media-panel[data-state="with"] .oc-btn {animation: hp-shrTap .5s var(--ease-snap) 1.2s both;}
/* ---- pages-analytics.css ---- */
.hp .an-hero .ph-grid {grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr);}
@media (max-width: 1023px) {
.hp .an-hero .ph-grid {grid-template-columns: 1fr;}
}
.hp .page-hero .lda {display: block; min-height: 600px; padding: 26px 26px 60px; background: radial-gradient(80% 60% at 90% 0%, #7FA0EC, rgba(127,160,236,0) 60%), var(--field-deep);}
.hp .lda-app {position: relative; z-index: 2; background: #F7F9FD; border-radius: 22px; padding: 16px; box-shadow: var(--sh-panel); display: grid; gap: 12px; color: var(--navy); font-size: 13px;}
.hp .lda-top {display: flex; align-items: center; gap: 10px; flex-wrap: wrap;}
.hp .lda-brand {display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px;}
.hp .lda-proj {display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px 5px 12px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--border); font-weight: 500;}
.hp .lda-range {margin-inline-start: auto; color: var(--muted);}
.hp .lda-kpis {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;}
.hp .lda-kpis > div {position: relative; padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--border); overflow: hidden;}
.hp .lda-kpis small {display: block; color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.hp .lda-kpis b {display: inline-block; font-family: var(--f-head); font-weight: 500; font-size: 30px; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums;}
.hp .lda-kpis em {font-style: normal; margin-inline-start: 6px; font-size: 11.5px; font-weight: 500; color: var(--live-text);}
.hp .lda-kpis b.is-tick {animation: hp-kpiTick .6s var(--ease-snap); color: var(--b1);}
@keyframes hp-kpiTick { 0% { transform: translateY(6px); opacity: .3; } 100% { transform: none; opacity: 1; } }
.hp .lda-grid {display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: auto auto; gap: 8px;}
.hp .lda-card {padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--border); min-width: 0;}
.hp .lda-heat {grid-row: span 2;}
.hp .lda-card .dc-h {margin-bottom: 8px;}
.hp .lda-card .dc-h b {display: inline-flex; align-items: center;}
.hp .hgrid {display: grid; grid-template-columns: 50px repeat(4, minmax(0, 1fr)); gap: 4px;}
.hp .hgrid .hc {text-align: center; color: var(--muted); font-size: 11.5px; padding-bottom: 2px;}
.hp .hgrid .hl {color: var(--muted); font-size: 11.5px; display: flex; align-items: center;}
.hp .hcell {position: relative; height: 30px; border-radius: 7px; background: rgba(80,111,179, calc(.07 + var(--v) * .93)); transition: background .6s, transform .25s var(--ease-snap), box-shadow .25s; cursor: pointer;}
.hp .hcell:hover, .hp .hcell:focus-visible, .hp .hcell.is-sel {transform: scale(1.08); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--b3); z-index: 1;}
.hp .hcell.is-ping::after {content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px var(--b3); animation: hp-ping .9s var(--ease-out) forwards;}
@keyframes hp-ping { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.45); } }
.hp .hg-tip {margin-top: 10px; display: flex; justify-content: space-between; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--navy); color: #fff; font-size: 12.5px;}
.hp .hg-tip b {font-weight: 500;}
.hp .donut-wrap {position: relative; width: 108px; height: 108px; margin: 0 auto 8px;}
.hp .donut {width: 100%; height: 100%; transform: rotate(-90deg);}
.hp .donut circle {fill: none; stroke-width: 5.2;}
.hp .dn-bg {stroke: var(--tint);}
.hp .dn-seg {transition: stroke-dasharray .9s var(--ease-snap), stroke-dashoffset .9s var(--ease-snap), stroke-width .25s; cursor: pointer;}
.hp .dn-seg.is-on {stroke-width: 6.6;}
.hp .dn-c {position: absolute; inset: 0; display: grid; place-content: center; text-align: center;}
.hp .dn-c b {font-family: var(--f-head); font-weight: 500; font-size: 22px; letter-spacing: -.02em; line-height: 1;}
.hp .dn-c small {color: var(--muted); font-size: 11.5px;}
.hp .dn-legend {list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; font-size: 11.5px;}
.hp .dn-legend li {display: flex; align-items: center; gap: 6px; color: var(--muted);}
.hp .dn-legend li i {width: 8px; height: 8px; border-radius: 3px; flex: none;}
.hp .dn-legend li b {margin-inline-start: auto; color: var(--navy); font-weight: 500;}
.hp .lda-stream {list-style: none; padding: 0; display: grid; gap: 4px;}
.hp .lda-stream li {display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 8px; font-size: 12px; font-weight: 500; line-height: 1.25;}
.hp .lda-stream li:first-child {background: linear-gradient(90deg, rgba(103,142,229,.14), rgba(103,142,229,0));}
.hp .lda-stream .fi {width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--tint); color: var(--b1);}
.hp .lda-stream .fi .ic, .hp .lda-stream .fi svg {width: 13px; height: 13px;}
.hp .lda-stream li.is-new {animation: feedIn .45s var(--ease-snap) both;}
.hp .lda-crm {position: absolute; z-index: 3; left: 26px; bottom: 16px;}
.hp .lda .sample {right: 18px; bottom: 18px;}
@media (max-width: 1180px) and (min-width: 1024px) {
.hp .lda-kpis b {font-size: 24px;}
.hp .page-hero .lda {padding: 18px 18px 58px;}
}
@media (max-width: 599px) {
.hp .page-hero .lda {padding: 12px 12px 58px; min-height: 0;}
.hp .lda-app {padding: 12px; gap: 10px; border-radius: 18px;}
.hp .lda-range {display: none;}
.hp .lda-kpis {grid-template-columns: 1fr 1fr;}
.hp .lda-kpis b {font-size: 24px;}
.hp .lda-grid {grid-template-columns: 1fr;}
.hp .lda-heat {grid-row: auto;}
.hp .lda-aud {display: grid; grid-template-columns: auto 1fr; gap: 0 14px; align-items: center;}
.hp .lda-aud .dc-h {grid-column: 1 / -1;}
.hp .lda-aud .donut-wrap {width: 96px; height: 96px; margin: 0;}
.hp .dn-legend {grid-template-columns: 1fr;}
.hp .lda-crm {left: 12px; bottom: 14px;}
.hp .lda .sample {right: 12px; bottom: 16px;}
}
.hp .silos {position: relative; min-height: 440px; filter: grayscale(1);}
.hp .silos > .silo {position: absolute;}
.hp .silo {background: #fff; border-radius: 16px; box-shadow: var(--sh-float); overflow: hidden; font-size: 13px;}
.hp .silo.s1 {left: 0; top: 4%; width: 300px; rotate: -3deg;}
.hp .silo.still {position: relative; rotate: none; width: min(92%, 380px);}
.hp .silo .xls-bar {background: #5F6B66;}
.hp .silo .xls-grid span {height: 2.2em;}
.hp .silo.s2 {right: 2%; top: 14%; width: 230px; padding: 14px; display: grid; gap: 6px; rotate: 4deg;}
.hp .silo.s2 b {font-weight: 500;}
.hp .silo.s2 small {color: var(--muted);}
.hp .silo.s2 i {height: 8px; border-radius: 4px; background: repeating-linear-gradient(90deg, #D9DCE2 0 18px, transparent 18px 22px);}
.hp .silo.s3 {left: 22%; bottom: 2%; width: 260px; padding: 8px 8px 10px; rotate: 2deg;}
.hp .silo.s3 .shot img {width: 100%; height: 130px; object-fit: cover; border-radius: 10px;}
.hp .silo.s3 small {display: block; padding: 6px 4px 0; color: var(--muted); font-size: 11.5px;}
.hp .silo.s4 {right: 0; bottom: 18%; width: 190px; padding: 14px; background: #FFF6C9; border-radius: 4px; font-family: "Segoe Print", "Bradley Hand", var(--f-body); rotate: -4deg; font-size: 14px;}
@media (max-width: 599px) {
.hp .silos {min-height: 400px;}
.hp .silo.s1 {width: 250px;}
.hp .silo.s3 {left: 4%; width: 210px;}
.hp .silo.s3 .shot img {height: 100px;}
.hp .silo.s2 {top: 32%; width: 190px;}
.hp .silo.s4 {bottom: 34%; display: none;}
}
.hp .views-blind {display: grid; justify-items: center; gap: 6px; text-align: center; color: var(--before-text);}
.hp .views-blind b {font-family: var(--f-head); font-weight: 500; font-size: clamp(64px, 40px + 5vw, 120px); letter-spacing: -.05em; line-height: .9;}
.hp .views-blind small {font-size: 15px;}
.hp .vb-faces {display: flex; margin-top: 18px;}
.hp .vb-faces span {width: 52px; height: 52px; margin-inline-start: -10px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 3px #D9DCE2; font-family: var(--f-head); font-size: 22px; color: var(--faint);}
.hp .aud-card, .hp .mini-rank, .hp .unit-demand {width: min(94%, 500px); background: #fff; border-radius: 22px; padding: 16px; box-shadow: var(--sh-panel); display: grid; gap: 12px; font-size: 13px;}
.hp .ac-h {display: flex; justify-content: space-between; align-items: baseline; gap: 8px;}
.hp .ac-h b {font-weight: 500; font-size: 15px;}
.hp .ac-h small {color: var(--muted); font-size: 12px;}
.hp .ac-cols {display: grid; grid-template-columns: 1fr 1fr; gap: 10px;}
.hp .ac-cols > div {padding: 12px; border-radius: 14px; background: var(--mist); display: grid; gap: 6px; align-content: start;}
.hp .ac-cols small {color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500;}
.hp .ac-cols .bars {font-size: 12px;}
.hp .split {display: flex; height: 10px; border-radius: 99px; overflow: hidden; gap: 2px;}
.hp .split i {flex: var(--v); background: var(--b1);}
.hp .split i + i {background: var(--b3);}
.hp .sp-l {display: flex; justify-content: space-between; gap: 6px; font-size: 11.5px; color: var(--muted);}
.hp .cols5 {display: flex; align-items: flex-end; gap: 5px; height: 54px;}
.hp .cols5 i {flex: 1; height: calc(var(--v) * 100%); border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, var(--b3), var(--b1));}
.hp .camp {list-style: none; padding: 0; display: grid; gap: 5px; font-size: 12px;}
.hp .camp li {display: flex; justify-content: space-between;}
.hp .camp b {font-weight: 500;}
.hp .gut {position: relative; width: min(92%, 400px);}
.hp .old-sheet {display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: var(--sh-float); font-size: 14px;}
.hp .old-sheet b {grid-column: 1 / -1; padding: 12px 14px; background: #5F6B66; color: #fff; font-weight: 500;}
.hp .old-sheet span {padding: 12px 14px; border-bottom: 1px solid #E3E5E9;}
.hp .old-sheet span:nth-last-child(1) {color: var(--red-text);}
.hp .gut .sticky-note {position: absolute; right: -10px; bottom: -40px; rotate: -5deg;}
.hp .ud-grid {display: grid; grid-template-columns: 34px repeat(6, minmax(0, 1fr)); gap: 3px; font-size: 11px;}
.hp .ud-grid .ul {color: var(--muted); display: flex; align-items: center;}
.hp .ud-grid .uh {color: var(--muted); text-align: center;}
.hp .ud-grid i {height: 22px; border-radius: 5px; background: rgba(80,111,179, calc(.06 + var(--v) * .94));}
.hp .ud-grid i.hot {box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #E4572E;}
.hp .ud-foot {display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--muted);}
.hp .ud-foot i {display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; margin-inline-end: 4px;}
.hp .ud-foot i.lo {background: rgba(80,111,179,.1);}
.hp .ud-foot i.hi {background: var(--b1);}
.hp .ud-ramp {width: 60px; height: 8px; border-radius: 99px; background: linear-gradient(90deg, rgba(80,111,179,.1), var(--b1));}
.hp .ud-best {margin-inline-start: auto; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: #FFE9E1; color: #B4380D; font-weight: 500;}
.hp .mr {list-style: none; padding: 0; display: grid; gap: 6px;}
.hp .mr li {display: grid; grid-template-columns: 18px 32px 1fr auto; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: var(--mist);}
.hp .mr li:first-child {background: var(--tint); box-shadow: inset 0 0 0 1px rgba(80,111,179,.35);}
.hp .mr .rk {color: var(--muted); text-align: center;}
.hp .mr b {display: block; font-weight: 500; font-size: 14px;}
.hp .mr small {color: var(--muted); font-size: 12px;}
.hp .mr-n {font-family: var(--f-head); font-size: 24px !important; letter-spacing: -.02em;}
.hp .cal {width: min(92%, 360px); background: #fff; border-radius: 18px; padding: 16px; box-shadow: var(--sh-float);}
.hp .cal-h {display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px;}
.hp .cal-h b {font-weight: 500;}
.hp .cal-h small {color: var(--muted);}
.hp .cal-g {display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; font-size: 11px; text-align: center; color: var(--muted);}
.hp .cal-g i {height: 26px; border-radius: 6px; background: #F1F2F4; font-style: normal; display: grid; place-items: center;}
.hp .cal-g i.due {background: #E3E5E9; color: var(--before-text); box-shadow: inset 0 0 0 2px var(--red); font-weight: 500;}
.hp .cal-n {margin-top: 12px; font-size: 14px; color: var(--before-text);}
@media (max-width: 599px) {
.hp .ac-cols {grid-template-columns: 1fr 1fr; gap: 6px;}
.hp .ac-cols > div {padding: 8px;}
.hp .aud-card, .hp .mini-rank, .hp .unit-demand {padding: 12px; gap: 8px;}
.hp .ud-grid i {height: 18px;}
.hp .ud-best {margin-inline-start: 0;}
.hp .gut .sticky-note {bottom: -60px; right: 0;}
}
.hp .perf-grid {align-items: center;}
.hp .board {position: relative; background: #fff; border-radius: 28px; padding: 18px; box-shadow: var(--sh-panel); display: grid; gap: 8px;}
.hp .bd-h {display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 2px 4px 8px;}
.hp .bd-h > b {font-family: var(--f-head); font-weight: 500; font-size: 20px; letter-spacing: -.02em;}
.hp .bd-h .badge {margin-inline-start: auto;}
.hp .bd-seg {display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--mist); box-shadow: inset 0 0 0 1px var(--border);}
.hp .bd-seg button {min-height: 36px; padding: 0 14px; border-radius: 999px; font-size: 13.5px; font-weight: 500; color: var(--muted); transition: background .25s, color .25s;}
.hp .bd-seg button[aria-checked="true"] {background: var(--navy); color: #fff;}
.hp .bd-cols, .hp .bd-row {display: grid; grid-template-columns: 26px 40px minmax(0, 1fr) 90px 80px; align-items: center; gap: 10px;}
.hp .bd-cols {padding: 0 12px; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); font-weight: 500;}
.hp .bd-cols span:nth-child(n+4) {text-align: end;}
.hp .bd-list {list-style: none; padding: 0; display: grid; gap: 4px;}
.hp .bd-row {width: 100%; padding: 10px 12px; border-radius: 16px; text-align: start; transition: background .25s, box-shadow .25s;}
.hp .bd-row:hover {background: var(--mist);}
.hp .bd-row[aria-expanded="true"] {background: var(--tint); box-shadow: inset 0 0 0 1px rgba(80,111,179,.35);}
.hp .bd-rk {font-family: var(--f-head); font-weight: 500; font-size: 18px; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums;}
.hp .bd-list li:first-child .bd-rk {color: var(--b1);}
.hp .bd-av {width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 500;}
.hp .bd-nm b {display: block; font-weight: 500; font-size: 15px;}
.hp .bd-nm small {color: var(--muted); font-size: 12.5px;}
.hp .bd-n {text-align: end; font-family: var(--f-head); font-weight: 500; font-size: 20px; letter-spacing: -.02em; font-variant-numeric: tabular-nums;}
.hp .bd-bar {display: block; height: 4px; margin-top: 6px; border-radius: 99px; background: var(--tint); overflow: hidden;}
.hp .bd-bar i {display: block; height: 100%; width: calc(var(--v) * 100%); background: linear-gradient(90deg, var(--b3), var(--b1)); transition: width .8s var(--ease-snap);}
.hp .bd-mv {display: inline-block; margin-inline-start: 4px; font-size: 11px; font-weight: 500; color: var(--live-text); opacity: 0; transition: opacity .3s;}
.hp .bd-mv.is-on {opacity: 1;}
.hp .bd-pipe {overflow: hidden;}
.hp .bd-pipe:empty {display: none;}
.hp .pipe {margin: 4px 0 2px; padding: 14px; border-radius: 18px; background: var(--navy); color: #fff; display: grid; gap: 10px; animation: tabIn .45s var(--ease-snap);}
.hp .pipe-h {display: flex; justify-content: space-between; align-items: baseline; gap: 8px;}
.hp .pipe-h b {font-weight: 500;}
.hp .pipe-h small {color: var(--on-dark-2); font-size: 12.5px;}
.hp .pipe-f {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px;}
.hp .pipe-f span {display: grid; gap: 4px; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); font-size: 11.5px; color: var(--on-dark-2);}
.hp .pipe-f b {font-family: var(--f-head); font-weight: 500; font-size: 22px; color: #fff;}
.hp .pipe-f span:last-child {background: rgba(37,211,102,.14); box-shadow: inset 0 0 0 1px rgba(37,211,102,.35);}
.hp .pipe-note {font-size: 12.5px; color: var(--on-dark-2); display: flex; align-items: center; gap: 6px;}
.hp .bd-foot {display: flex; justify-content: space-between; align-items: center; padding: 6px 4px 0;}
@media (max-width: 599px) {
.hp .board {padding: 12px; border-radius: 22px;}
.hp .bd-cols, .hp .bd-row {grid-template-columns: 20px 34px minmax(0, 1fr) 54px 50px; gap: 8px;}
.hp .bd-row {padding: 8px;}
.hp .bd-av {width: 34px; height: 34px;}
.hp .bd-n {font-size: 17px;}
.hp .bd-cols {padding: 0 8px; font-size: 10px; letter-spacing: .04em;}
.hp .pipe-f {grid-template-columns: 1fr 1fr;}
}
.hp .privacy .t-lead {color: var(--on-dark-2); margin-top: 22px; max-width: 48ch;}
.hp .priv-vis {display: grid; gap: 14px;}
.hp .pv-row {display: grid; gap: 8px; padding: 16px; border-radius: 22px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);}
.hp .pv-row > small {font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--b3); font-weight: 500;}
.hp .pv-fact {display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 14px; background: #fff; color: var(--navy); font-weight: 500; font-size: 15px;}
.hp .pv-agg-b {display: flex; gap: 4px; height: 38px;}
.hp .pv-agg-b span:first-child {border-radius: 8px 0 0 8px;}
.hp .pv-agg-b span:last-child {border-radius: 0 8px 8px 0;}
.hp .pv-agg-b span {flex: var(--v); display: grid; place-items: center; border-radius: 0; background: var(--b1); font-size: 12px; font-weight: 500;}
.hp .pv-agg-b span:nth-child(2) {background: var(--b2);}
.hp .pv-agg-b span:nth-child(3) {background: var(--b3);}
.hp .pv-agg-b span:nth-child(4) {background: #3B5690;}
.hp .pv-contact {display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 14px; background: rgba(255,255,255,.06); color: var(--on-dark-2);}
.hp .pv-contact .av {width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.12); filter: blur(1.5px);}
.hp .pv-contact b {display: block; letter-spacing: .02em; opacity: .5; filter: blur(2.5px); font-weight: 500;}
.hp .pv-contact small {opacity: .6; filter: blur(2px);}
.hp .pv-contact .ic {color: var(--wa);}
.hp .conn-vis {position: relative; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto; align-items: center; gap: 18px 0; padding: 32px; border-radius: var(--r-tile); background: var(--mist); box-shadow: 0 0 0 1px var(--border); min-height: 280px;}
.hp .cn-node {display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 20px 0 16px; border-radius: 999px; background: #fff; box-shadow: var(--sh-float); font-weight: 500; white-space: nowrap;}
.hp .cn-crm .ic {color: var(--b1);}
.hp .cn-lines {width: 100%; height: 60px; overflow: visible;}
.hp .cn-lines path {fill: none; stroke: var(--b3); stroke-width: 2; stroke-dasharray: 6 8; animation: hp-cnDash 1.94s linear infinite; vector-effect: non-scaling-stroke;}
.hp .cn-lines path.rev {stroke: var(--b1); stroke-dasharray: 6 8; animation-direction: reverse; transform: translateY(8px);}
@keyframes hp-cnDash { to { stroke-dashoffset: -28; } }
.hp .reduced-motion .cn-lines path, .hp .motion-paused .cn-lines path {animation: none;}
@media (max-width: 599px) {
.hp .conn-vis {grid-template-columns: 1fr; justify-items: center; padding: 22px;}
.hp .cn-lines {width: 60px; height: 50px; transform: rotate(90deg);}
}
@media (max-width: 599px) {
.hp #q-who .media-panel {aspect-ratio: auto; min-height: 500px;}
.hp #q-who .aud-card {width: 100%; font-size: 12px;}
.hp #q-who .ac-cols {grid-template-columns: 1fr;}
.hp #q-who .ac-cols > div:nth-child(3) {display: none;}
.hp #q-who .media-panel .sample {top: 12px; bottom: auto;}
.hp #q-who .media-panel [data-pm="with"] {padding: 40px 12px 12px;}
}
/* ---- pages-dex.css ---- */
.hp .dex-guard-chip {margin-top: 22px; display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px 0 14px; border-radius: 999px; background: var(--navy); color: #fff; font-weight: 500; font-size: 15px; box-shadow: var(--sh-card);}
.hp .dex-guard-chip .ic {color: var(--wa);}
.hp .page-hero .dexh {display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; gap: 18px 24px; place-items: stretch; align-items: start; min-height: 640px; padding: 28px 34px 26px 30px; background: radial-gradient(90% 70% at 20% 10%, #7FA0EC 0%, rgba(127,160,236,0) 60%), var(--field);}
.hp .dexh-id {grid-column: 1; display: flex; align-items: center; gap: 26px; color: #fff;}
.hp .dexh-av {position: relative; display: grid; place-items: center;}
.hp .dexh-av .dex-av {--s: 92px;}
.hp .dexh-av .dex-av {box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), 0 20px 40px -16px rgba(16,22,36,.6);}
.hp .dexh-av .dex-av .on {box-shadow: 0 0 0 3px #5E81D0;}
.hp .dexh-av .ring {position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2px rgba(37,211,102,.7); animation: hp-dexRing 2.9s var(--ease-out) infinite; pointer-events: none;}
.hp .dexh-av .ring.r2 {animation-delay: 1.45s;}
@keyframes hp-dexRing { from { transform: scale(1); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
.hp .reduced-motion .dexh-av .ring, .hp .motion-paused .dexh-av .ring {animation: none; opacity: 0;}
.hp .dexh-name b {display: block; font-family: var(--f-head); font-weight: 500; font-size: 36px; letter-spacing: -.03em; line-height: 1;}
.hp .dexh-name small {white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 14px; color: rgba(255,255,255,.9);}
.hp .dexh-phone {grid-column: 2; grid-row: 1 / span 2; align-self: center; --pw: 290px;}
.hp .dexh-phone .phone-screen {font-size: 5.1cqw;}
.hp .dexh-intro {margin-bottom: .3em; flex: none; align-self: center; display: grid; justify-items: center; gap: .15em; width: 88%; padding: 1em .8em .9em; margin-top: .2em; border-radius: .9em; background: rgba(255,255,255,.86); box-shadow: 0 1px 1px rgba(0,0,0,.06); text-align: center;}
.hp .dexh-intro .dex-av {margin-bottom: .35em;}
.hp .dexh-intro b {font-weight: 500; font-size: .95em;}
.hp .dexh-intro small {color: var(--muted); font-size: .72em;}
.hp .dexh-note {display: inline-flex; align-items: flex-start; gap: .4em; margin-top: .5em; padding: .45em .7em; border-radius: .6em; background: #FFF6D6; color: #6B5A1E; font-size: .66em; line-height: 1.35; text-align: start;}
.hp .dexh-note .ic {width: 1.2em; height: 1.2em; flex: none; margin-top: .05em;}
.hp .dexh-cap {position: absolute; left: 80px; bottom: 30px; color: rgba(255,255,255,.88);}
.hp .dexh-ctrl {left: 30px; bottom: 22px;}
.hp .reduced-motion .dexh-ctrl {display: none;}
@media (max-width: 1180px) and (min-width: 1024px) {
.hp .page-hero .dexh {padding: 24px; gap: 14px;}
.hp .dexh-phone {--pw: 224px;}
.hp .dexh-av .dex-av {--s: 64px;}
.hp .dexh-name b {font-size: 28px;}
.hp .dexh-name small {font-size: 12.5px; white-space: normal;}
.hp .dexh-moments li {height: 38px; font-size: 14px; white-space: nowrap;}
}
@media (max-width: 699px) {
.hp .page-hero .dexh {grid-template-columns: 1fr; grid-template-rows: auto auto auto; min-height: 0; padding: 22px 16px 56px; justify-items: center;}
.hp .dexh-id {justify-self: start;}
.hp .dexh-av .dex-av {--s: 64px;}
.hp .dexh-name b {font-size: 28px;}
.hp .dexh-phone {grid-column: 1; grid-row: 2; --pw: 250px;}
.hp .dexh-cap {left: 64px; bottom: 22px;}
.hp .dexh-ctrl {left: 16px; bottom: 14px;}
}
.hp .notif-pile {position: relative; display: grid; gap: 10px; filter: grayscale(1); padding: 10px 0;}
.hp .nf {display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 12px 16px 12px 12px; border-radius: 18px; background: rgba(255,255,255,.9); box-shadow: var(--sh-float); font-size: 14px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);}
.hp .nf:nth-child(2) {margin-inline-start: 24px;}
.hp .nf:nth-child(3) {margin-inline-start: 8px;}
.hp .nf:nth-child(4) {margin-inline-start: 36px;}
.hp .nf:nth-child(5) {margin-inline-start: 14px; opacity: .7;}
.hp .nf b {display: block; font-weight: 500;}
.hp .nf small {color: var(--muted); font-size: 12.5px;}
.hp .nf em {font-style: normal; font-size: 12px; color: var(--faint);}
.hp .nf-ic {width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: #E3E5E9; color: var(--before-text);}
.hp .js .notif-pile.is-in .nf {animation: hp-nfIn .5s var(--ease-snap) both;}
.hp .js .notif-pile.is-in .nf:nth-child(2) {animation-delay: .12s;}
.hp .js .notif-pile.is-in .nf:nth-child(3) {animation-delay: .24s;}
.hp .js .notif-pile.is-in .nf:nth-child(4) {animation-delay: .36s;}
.hp .js .notif-pile.is-in .nf:nth-child(5) {animation-delay: .48s;}
@keyframes hp-nfIn { from { opacity: 0; transform: translateY(-16px) scale(.97); } }
@media (max-width: 599px) {
.hp .nf:nth-child(n) {margin-inline-start: 0;}
.hp .nf {font-size: 13px;}
}
.hp .jobs-tag {justify-content: center; margin: 0;}
.hp .job {display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 5vw, 96px); align-items: center; padding: clamp(28px, 20px + 2.4vw, 60px); border-radius: 36px; background: linear-gradient(160deg, var(--mist), #fff 70%); box-shadow: 0 0 0 1px var(--border), var(--sh-soft); overflow: hidden;}
.hp .job-h {font-size: clamp(32px, 22px + 2.4vw, 56px); line-height: 1.02; letter-spacing: -.035em; max-width: 14ch; margin-bottom: 30px;}
.hp .caps {list-style: none; padding: 0; display: grid; gap: 10px; margin-bottom: 30px; max-width: 480px;}
.hp .caps li {display: flex; align-items: center; gap: 14px; padding: 14px 18px 14px 14px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--border); font-weight: 500; font-size: 17px;}
.hp .caps .ic {width: 36px; height: 36px; padding: 8px; border-radius: 12px; background: var(--tint); color: var(--b1); flex: none;}
.hp .job {overflow: hidden; padding-bottom: 0 !important; align-items: stretch;}
.hp .job-copy {align-self: center; padding-bottom: clamp(28px, 20px + 2.4vw, 60px);}
.hp .job-vis {position: relative; align-self: stretch; width: 330px; min-height: 480px;}
.hp .job-vis .phone {position: absolute; left: 50%; top: 96px; translate: -50% 0;}
.hp .job-vis .phone {--pw: 290px;}
.hp .job-vis .phone-screen {font-size: 5.1cqw;}
.hp .tab-panel.is-enter .caps li {animation: hp-capIn .5s var(--ease-snap) both;}
.hp .tab-panel.is-enter .caps li:nth-child(2) {animation-delay: 60ms;}
.hp .tab-panel.is-enter .caps li:nth-child(3) {animation-delay: 120ms;}
.hp .tab-panel.is-enter .caps li:nth-child(4) {animation-delay: 180ms;}
@keyframes hp-capIn { from { opacity: 0; transform: translateX(-12px); } }
@media (max-width: 899px) {
.hp .job {grid-template-columns: 1fr;}
.hp .job-vis {width: 100%; min-height: 0; height: 440px;}
.hp .job-vis .phone {--pw: 270px; top: 28px;}
}
@media (max-width: 599px) {
.hp .job {border-radius: 28px; padding: 22px 16px;}
.hp .caps li {font-size: 15.5px; padding: 10px 12px 10px 10px;}
.hp .caps .ic {width: 32px; height: 32px; padding: 7px;}
}
.hp .never-head {display: flex !important; align-items: center; gap: 34px; max-width: none; padding-inline-start: 15px;}
.hp .never-head .sec-head {margin: 0;}
.hp .never-av {position: relative; flex: none; display: grid;}
.hp .never-av::after {content: ""; position: absolute; z-index: 0; inset: -15px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(239,68,88,.5);}
.hp .never-av .dex-av {position: relative; z-index: 1;}
.hp .guard .never-head h2 {font-size: var(--t-h1); line-height: 1; letter-spacing: -.04em;}
.hp .guard .never-head > div {display: grid; gap: 12px;}
@media (min-width: 1024px) {
.hp .dexh-name small {white-space: normal; align-items: flex-start; line-height: 1.35;}
.hp .dexh-name small .live-dot {margin-top: .45em; flex: none;}
}