/* ==========================================================================
   Rosidence — public site (marketing + estate pages).
   Builds on royal.css tokens. Dark, warm "royal" hero sections alternate
   with light canvas sections; motion respects prefers-reduced-motion.
   ========================================================================== */
.site { background: var(--rr-canvas); overflow-x: hidden; }
.site .wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 575.98px) { .site .wrap { padding: 0 16px; } }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rr-brand); }
.eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--rr-grad); border-radius: 2px; }
.dark-zone .eyebrow { color: var(--rr-brand-on-dark); }
.h-display { font-family: var(--rr-display); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; color: var(--rr-fg-1); }
.h-xl { font-size: clamp(40px, 6.4vw, 78px); }
.h-lg { font-size: clamp(32px, 4.2vw, 52px); }
.h-md { font-size: clamp(24px, 2.6vw, 34px); }
.lede { font-size: clamp(16px, 1.35vw, 19px); line-height: 1.6; color: var(--rr-fg-3); max-width: 640px; }
.grad-text { color: var(--rr-brand); }  /* kept name; solid brand, no gradient */
.section { padding: clamp(72px, 9vw, 128px) 0; position: relative; }
.section.tight { padding: clamp(48px, 6vw, 80px) 0; }

/* header */
.site-nav { position: fixed; inset: 0 0 auto 0; z-index: 1050; transition: background .25s, box-shadow .25s, border-color .25s; border-bottom: 1px solid transparent; }
.site-nav .bar { height: 72px; display: flex; align-items: center; gap: 28px; }
.site-nav .logo { display: flex; align-items: center; gap: 10px; color: #fff; font-family: var(--rr-display); font-weight: 800; font-size: 19px; letter-spacing: -.02em; }
.site-nav .logo img { width: 34px; height: 34px; }
.site-nav .links { display: flex; gap: 26px; margin-left: 12px; }
.site-nav .links a { color: rgba(255,255,255,.78); font-weight: 500; font-size: 14.5px; transition: color .15s; }
.site-nav .links a:hover { color: #fff; }
.site-nav .right { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.site-nav .btn-light { --bs-btn-bg: rgba(255,255,255,.08); --bs-btn-border-color: rgba(255,255,255,.18); --bs-btn-color: #fff; --bs-btn-hover-bg: rgba(255,255,255,.16); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: rgba(255,255,255,.3); box-shadow: none; }
.site-nav .rr-icon-btn { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #fff; }
.site-nav.scrolled { background: color-mix(in srgb, var(--rr-shell) 88%, transparent); backdrop-filter: blur(14px) saturate(1.4); border-color: rgba(255,255,255,.06); box-shadow: 0 8px 30px -12px rgba(0,0,0,.5); }
.site-nav.light-page:not(.scrolled) .logo, .site-nav.light-page:not(.scrolled) .links a { color: var(--rr-fg-1); }
.site-nav .burger { display: none; }
@media (max-width: 991.98px) {
  .site-nav .links { display: none; position: absolute; top: 72px; left: 12px; right: 12px; flex-direction: column; gap: 4px; padding: 12px; border-radius: 16px; background: var(--rr-shell); box-shadow: var(--rr-shadow-lg); }
  .site-nav.open .links { display: flex; }
  .site-nav .links a { padding: 10px 12px; color: #fff !important; }
  .site-nav .burger { display: inline-grid; }
  .site-nav .hide-sm { display: none !important; }
}

/* dark zones */
.dark-zone { background: var(--rr-shell); color: #C9D1E3; }
.dark-zone .h-display, .dark-zone h2, .dark-zone h3 { color: #fff; }
.dark-zone .lede { color: #D0D5DD; }
.grid-bg { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at 50% 30%, #000 10%, transparent 70%); }

/* hero */
.hero { padding: 150px 0 90px; position: relative; overflow: hidden; }
.hero .orb { display: none; }
@keyframes float { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(30px,-20px) scale(1.08); } }
.hero .badge-row { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #E4E7EC; font-size: 13.5px; margin-bottom: 24px; }
.hero .badge-row .new { background: var(--rr-grad); color: #fff; border-radius: 999px; padding: 3px 10px; font-weight: 700; font-size: 12px; }
.hero .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero .proof { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 40px; color: #D0D5DD; font-size: 14px; }
.hero .proof strong { color: #fff; font-family: var(--rr-display); font-size: 26px; display: block; letter-spacing: -.02em; }
.store-btn { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 12px; background: #000; color: #fff; border: 1px solid rgba(255,255,255,.18); transition: transform .15s; }
.store-btn:hover { color: #fff; transform: translateY(-2px); }
.store-btn i { font-size: 24px; }
.store-btn small { display: block; font-size: 10.5px; opacity: .75; line-height: 1; }
.store-btn span { font-weight: 700; font-size: 15px; line-height: 1.15; }

/* phone mock */
.phone { width: 290px; height: 590px; border-radius: 46px; padding: 12px; background: #16181D; box-shadow: 0 50px 100px -30px rgba(0,0,0,.7), inset 0 0 0 2px rgba(255,255,255,.08); position: relative; flex: none; }
.phone::before { content: ""; position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 92px; height: 26px; border-radius: 20px; background: #000; z-index: 3; }
.phone .screen { width: 100%; height: 100%; border-radius: 36px; overflow: hidden; background: #F7F7F8; position: relative; color: #101828; font-family: var(--rr-font); }
.phone.sm { width: 230px; height: 470px; border-radius: 38px; padding: 10px; }
.phone.sm .screen { border-radius: 30px; }
.app-top { background: var(--rr-brand); color: #fff; padding: 54px 18px 22px; position: relative; overflow: hidden; }
.app-top::after { content: none; }
.app-top .hi { font-size: 12.5px; opacity: .7; }
.app-top .nm { font-family: var(--rr-display); font-weight: 800; font-size: 20px; letter-spacing: -.02em; }
.app-chip { display: inline-flex; gap: 6px; align-items: center; background: rgba(255,255,255,.12); border-radius: 999px; padding: 4px 10px; font-size: 11.5px; margin-top: 10px; }
.app-card { background: #fff; border-radius: 18px; margin: -14px 14px 10px; padding: 14px; box-shadow: 0 10px 24px -12px rgba(16,24,40,.25); position: relative; z-index: 1; }
.app-card .lbl { font-size: 11px; color: #667085; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.app-card .amt { font-family: var(--rr-display); font-weight: 800; font-size: 26px; letter-spacing: -.03em; }
.app-btn { display: block; text-align: center; background: #EF5A28; color: #fff; border-radius: 12px; padding: 10px; font-weight: 700; font-size: 13.5px; margin-top: 10px; }
.app-row { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 14px; padding: 10px 12px; margin: 8px 14px; font-size: 12.5px; box-shadow: 0 1px 2px rgba(16,24,40,.06); }
.app-row .ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: #FFF3EE; color: #EF5A28; flex: none; }
.app-row .ic.g { background: #ECFDF3; color: #079455; } .app-row .ic.b { background: #EFF8FF; color: #1570EF; } .app-row .ic.r { background: #FEF3F2; color: #D92D20; }
.app-row b { display: block; font-size: 13px; color: #101828; }
.app-row span { color: #667085; }
.app-tabs { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; padding: 10px 10px 22px; background: #fff; border-top: 1px solid #E4E7EC; font-size: 10px; color: #98A2B3; }
.app-tabs div { display: flex; flex-direction: column; align-items: center; gap: 3px; } .app-tabs .on { color: #EF5A28; } .app-tabs i { font-size: 16px; }
.code-big { font-family: var(--rr-mono); font-size: 34px; font-weight: 700; letter-spacing: .18em; text-align: center; color: #101828; }
.float-card { position: absolute; background: rgba(255,255,255,.96); color: #101828; border-radius: 16px; padding: 12px 14px; box-shadow: 0 24px 48px -16px rgba(0,0,0,.45); display: flex; gap: 10px; align-items: center; font-size: 13px; animation: bob 6s ease-in-out infinite; z-index: 4; min-width: 220px; }
.float-card .ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.float-card b { display: block; font-size: 13.5px; }
.float-card span { color: #667085; font-size: 12px; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.hero-visual { position: relative; display: flex; justify-content: center; align-items: center; min-height: 600px; }
.hero-visual .phone.back { position: absolute; transform: rotate(8deg) translate(150px, 30px) scale(.86); opacity: .9; filter: saturate(.9); }
@media (max-width: 991.98px) { .hero-visual { min-height: 520px; margin-top: 40px; } .hero-visual .phone.back { display: none; } .float-card { display: none; } }

/* logos / trust strip */
.strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 36px; color: var(--rr-fg-3); font-weight: 600; font-size: 14px; }
.strip span { display: inline-flex; align-items: center; gap: 8px; }
.strip i { color: var(--rr-brand); }

/* scroll map story */
.story { position: relative; }
.story .stage { position: sticky; top: 0; height: 100vh; width: 100%; overflow: hidden; }
.story .stage .map { position: absolute; inset: 0; }
.story .stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--story-shade) 0%, transparent 46%), linear-gradient(0deg, var(--story-shade) 0%, transparent 18%); }
.story { --story-shade: rgba(10,10,10,.9); }
[data-mode="light"] .story { --story-shade: rgba(247,247,248,.94); }
.story .steps { position: relative; z-index: 2; margin-top: -100vh; pointer-events: none; }
.story .step { min-height: 100vh; display: flex; align-items: center; padding: 0 0 0 max(24px, calc((100vw - 1240px) / 2 + 24px)); }
.story .card-step { pointer-events: auto; max-width: 440px; width: 100%; background: color-mix(in srgb, var(--rr-surface) 86%, transparent); backdrop-filter: blur(16px) saturate(1.3); border: 1px solid var(--rr-border); border-radius: 24px; padding: 28px; box-shadow: var(--rr-shadow-lg); opacity: .35; transform: translateY(24px) scale(.98); transition: opacity .5s, transform .5s; }
.story .step.active .card-step { opacity: 1; transform: none; }
.story .card-step .num { font-family: var(--rr-mono); font-size: 12px; color: var(--rr-brand); font-weight: 700; }
.story .card-step h3 { font-family: var(--rr-display); font-weight: 800; font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.03em; margin: 8px 0 10px; color: var(--rr-fg-1); }
.story .card-step p { color: var(--rr-fg-3); margin-bottom: 16px; font-size: 15.5px; line-height: 1.6; }
.story .metric { display: flex; gap: 22px; }
.story .metric div { font-size: 12.5px; color: var(--rr-fg-3); }
.story .metric strong { display: block; font-family: var(--rr-display); font-size: 24px; color: var(--rr-fg-1); letter-spacing: -.02em; }
.story .mini { background: var(--rr-fill); border-radius: 16px; padding: 12px 14px; display: flex; gap: 12px; align-items: center; font-size: 13.5px; margin-top: 8px; }
.story .mini .ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none; background: var(--rr-brand-soft); color: var(--rr-brand); }
.story .mini b { color: var(--rr-fg-1); display: block; }
.story .progress-rail { position: absolute; right: 28px; top: 50%; transform: translateY(-50%); z-index: 3; display: flex; flex-direction: column; gap: 10px; }
.story .progress-rail span { width: 8px; height: 8px; border-radius: 50%; background: rgba(150,160,180,.45); transition: all .3s; }
.story .progress-rail span.on { background: var(--rr-brand); height: 26px; border-radius: 6px; }
.story .legend-chip { position: absolute; right: 28px; bottom: 28px; z-index: 3; background: color-mix(in srgb, var(--rr-surface) 88%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--rr-border); border-radius: 14px; padding: 10px 14px; font-size: 12.5px; display: flex; gap: 14px; color: var(--rr-fg-2); }
.story .legend-chip i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 6px; }
@media (max-width: 767.98px) {
  .story .step { padding: 0 16px; align-items: flex-end; padding-bottom: 12vh; }
  .story .stage::after { background: linear-gradient(0deg, var(--story-shade) 0%, transparent 55%); }
  .story .progress-rail, .story .legend-chip { display: none; }
}

/* feature grid */
.feature { padding: 26px; height: 100%; border-radius: 22px; background: var(--rr-surface); border: 1px solid var(--rr-border); transition: transform .25s, box-shadow .25s, border-color .25s; position: relative; overflow: hidden; }
.feature:hover { transform: translateY(-4px); box-shadow: var(--rr-shadow-lg); border-color: color-mix(in srgb, var(--rr-brand) 30%, var(--rr-border)); }
.feature .ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--rr-grad); color: #fff; font-size: 20px; margin-bottom: 18px; box-shadow: 0 10px 20px -10px rgba(239,90,40,.7); }
.feature h3 { font-size: 18px; margin-bottom: 8px; }
.feature p { color: var(--rr-fg-3); margin: 0; font-size: 14.5px; line-height: 1.6; }
.feature ul { list-style: none; padding: 0; margin: 12px 0 0; font-size: 13.5px; }
.feature ul li { padding: 3px 0; color: var(--rr-fg-2); } .feature ul li::before { content: "✓"; color: var(--rr-success); font-weight: 800; margin-right: 8px; }
.persona-tabs { display: inline-flex; gap: 6px; padding: 6px; border-radius: 16px; background: var(--rr-fill); flex-wrap: wrap; justify-content: center; }
.persona-tabs button { border: 0; background: transparent; padding: 9px 18px; border-radius: 11px; font-weight: 600; color: var(--rr-fg-3); font-size: 14.5px; }
.persona-tabs button.on { background: var(--rr-surface); color: var(--rr-fg-1); box-shadow: var(--rr-shadow); }
.persona { display: none; } .persona.on { display: block; animation: rr-in .4s ease; }

/* steps */
.howto { counter-reset: s; }
.howto .item { position: relative; padding-left: 64px; margin-bottom: 30px; }
.howto .item::before { counter-increment: s; content: counter(s); position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 14px; background: var(--rr-grad); color: #fff; display: grid; place-items: center; font-family: var(--rr-display); font-weight: 800; font-size: 18px; }
.howto .item h3 { font-size: 18px; margin-bottom: 4px; } .howto .item p { color: var(--rr-fg-3); margin: 0; }

/* money flow */
.flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 12px; }
.flow .node { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 20px; padding: 22px; text-align: center; color: #E4E7EC; }
.flow .node .ic { font-size: 26px; color: var(--rr-brand-on-dark); margin-bottom: 8px; }
.flow .node b { color: #fff; display: block; font-size: 16px; }
.flow .arrow { position: relative; width: 90px; height: 2px; background: rgba(255,138,92,.45); }
.flow .arrow::after { content: ""; position: absolute; right: -2px; top: -5px; border: 6px solid transparent; border-left-color: var(--rr-brand-on-dark); }
.flow .arrow .dot { position: absolute; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--rr-brand-on-dark); box-shadow: none; animation: travel 2.4s linear infinite; }
@keyframes travel { from { left: 0; } to { left: calc(100% - 10px); } }
@media (max-width: 991.98px) { .flow { grid-template-columns: 1fr; } .flow .arrow { width: 2px; height: 50px; margin: 0 auto; background: rgba(255,138,92,.45); } .flow .arrow::after { right: -5px; top: auto; bottom: -2px; border-left-color: transparent; border-top-color: var(--rr-brand-on-dark); } .flow .arrow .dot { left: -4px !important; animation: travel-y 2.4s linear infinite; } }
@keyframes travel-y { from { top: 0; } to { top: calc(100% - 10px); } }

/* dashboard mock */
.browser { border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 60px 120px -40px rgba(0,0,0,.7); background: #0A0A0A; }
.browser .chrome { display: flex; gap: 7px; padding: 12px 14px; background: #151D33; align-items: center; }
.browser .chrome i { width: 11px; height: 11px; border-radius: 50%; background: #F04438; display: inline-block; } .browser .chrome i:nth-child(2) { background: #FDB022; } .browser .chrome i:nth-child(3) { background: #12B76A; }
.browser .chrome .url { margin-left: 12px; flex: 1; background: rgba(255,255,255,.06); border-radius: 8px; padding: 4px 12px; font-size: 12px; color: #98A2B3; font-family: var(--rr-mono); }
.browser img { width: 100%; display: block; }

/* pricing */
.price-toggle { display: inline-flex; padding: 5px; border-radius: 14px; background: var(--rr-fill); gap: 4px; }
.price-toggle button { border: 0; background: transparent; padding: 8px 18px; border-radius: 10px; font-weight: 600; color: var(--rr-fg-3); }
.price-toggle button.on { background: var(--rr-surface); color: var(--rr-fg-1); box-shadow: var(--rr-shadow); }
.price-card { border-radius: 24px; padding: 30px; background: var(--rr-surface); border: 1px solid var(--rr-border); height: 100%; display: flex; flex-direction: column; position: relative; }
.price-card.hot { border: 2px solid var(--rr-brand); background: var(--rr-surface); box-shadow: 0 30px 60px -30px rgba(239,90,40,.45); }
.price-card .tag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--rr-grad); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 14px; border-radius: 999px; white-space: nowrap; }
.price-card .amount { font-family: var(--rr-display); font-weight: 800; font-size: 44px; letter-spacing: -.04em; color: var(--rr-fg-1); line-height: 1; }
.price-card .per { color: var(--rr-fg-3); font-weight: 600; font-size: 15px; }
.price-card ul { list-style: none; padding: 0; margin: 20px 0 26px; font-size: 14.5px; }
.price-card ul li { padding: 6px 0; display: flex; gap: 10px; } .price-card ul li i { color: var(--rr-success); margin-top: 4px; }

/* faq */
.faq details { border-bottom: 1px solid var(--rr-border); padding: 18px 0; }
.faq summary { cursor: pointer; font-weight: 700; color: var(--rr-fg-1); font-size: 16.5px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--rr-brand); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--rr-fg-3); margin: 10px 0 0; line-height: 1.65; }

/* cta band */
.cta-band { border-radius: 32px; padding: clamp(36px, 5vw, 64px); position: relative; overflow: hidden; }
.cta-band .orb { display: none; }

/* footer */
.site-foot { padding: 64px 0 36px; background: #0A0A0A; color: #98A2B3; font-size: 14px; }
.site-foot h4 { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 14px; }
.site-foot a { color: #98A2B3; display: block; padding: 4px 0; } .site-foot a:hover { color: #fff; }
.site-foot .bottom { border-top: 1px solid rgba(255,255,255,.08); margin-top: 40px; padding-top: 22px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13px; }

/* reveal animations */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .hero .orb, .float-card, .flow .arrow .dot { animation: none; } }

/* estate page */
.estate-hero { min-height: 78vh; display: flex; align-items: flex-end; padding: 140px 0 60px; position: relative; overflow: hidden; color: #fff; }
.estate-hero .bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.04); }
.estate-hero .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,.35) 0%, rgba(10,10,10,.55) 45%, rgba(10,10,10,.96) 100%); }
.estate-hero .wrap { position: relative; z-index: 2; width: 100%; }
.estate-hero .crest { width: 84px; height: 84px; border-radius: 22px; object-fit: cover; box-shadow: 0 20px 40px -12px rgba(0,0,0,.6); border: 3px solid rgba(255,255,255,.18); background: var(--rr-grad); display: grid; place-items: center; font-family: var(--rr-display); font-weight: 800; font-size: 30px; }
.estate-stat { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 18px; padding: 16px 20px; backdrop-filter: blur(10px); }
.estate-stat strong { display: block; font-family: var(--rr-display); font-size: 28px; color: #fff; letter-spacing: -.02em; }
.estate-stat span { font-size: 13px; color: #C9D1E3; }
.estate-map { height: 560px; border-radius: 28px; overflow: hidden; position: relative; border: 1px solid var(--rr-border); box-shadow: var(--rr-shadow-lg); }
.estate-map .map { position: absolute; inset: 0; }
.estate-map .overlay { position: absolute; left: 18px; top: 18px; z-index: 2; background: color-mix(in srgb, var(--rr-surface) 92%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--rr-border); border-radius: 16px; padding: 14px 16px; max-width: 280px; font-size: 13.5px; }
.estate-map .overlay .key { display: flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--rr-fg-2); }
.estate-map .overlay .key i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.street-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; background: var(--rr-surface); border: 1px solid var(--rr-border); font-size: 13.5px; font-weight: 600; color: var(--rr-fg-2); cursor: pointer; transition: all .15s; }
.street-chip:hover, .street-chip.on { border-color: var(--rr-brand); color: var(--rr-brand); background: var(--rr-brand-soft); }
.maplibregl-ctrl-attrib { font-size: 10px; }
.maplibregl-popup-content { border-radius: 12px; padding: 10px 14px; font-family: var(--rr-font); font-size: 13px; color: #101828; box-shadow: var(--rr-shadow-lg); }

/* inner pages */
.page-hero { padding: 140px 0 72px; position: relative; overflow: hidden; }
.page-hero .lede { margin-top: 18px; }
.matrix { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--rr-surface); border: 1px solid var(--rr-border); border-radius: 18px; overflow: hidden; }
.matrix th, .matrix td { padding: 14px 18px; border-bottom: 1px solid var(--rr-border); text-align: center; font-size: 14.5px; }
.matrix th:first-child, .matrix td:first-child { text-align: left; color: var(--rr-fg-1); font-weight: 500; }
.matrix thead th { background: var(--rr-surface-2, var(--rr-bg)); font-family: var(--rr-display); font-weight: 700; color: var(--rr-fg-1); }
.matrix tr:last-child td { border-bottom: 0; }
.matrix .yes { color: var(--rr-success); } .matrix .no { color: var(--rr-fg-4, #98A2B3); }
.dir-map { height: 520px; border-radius: 22px; overflow: hidden; border: 1px solid var(--rr-border); box-shadow: var(--rr-shadow-lg); background: #0E1528; position: sticky; top: 96px; }
.dir-item { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--rr-border); background: var(--rr-surface); transition: border-color .15s, transform .15s; color: inherit; }
.dir-item:hover { border-color: var(--rr-primary); transform: translateY(-2px); color: inherit; }
.dir-item .mono { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--rr-grad); color: #fff; font-weight: 800; font-family: var(--rr-display); flex: none; }
.prose { max-width: 760px; } .prose h2 { font-size: 22px; margin: 34px 0 10px; font-family: var(--rr-display); font-weight: 700; color: var(--rr-fg-1); } .prose p, .prose li { color: var(--rr-fg-2); line-height: 1.7; }
.check-list { list-style: none; padding: 0; } .check-list li { padding: 8px 0 8px 30px; position: relative; } .check-list li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; color: var(--rr-primary); }
.dark-zone .check-list li { color: #D0D5DD; }
@media (max-width: 575.98px) {
  .site .row.g-5 { --bs-gutter-x: 1.5rem; }
  .hero .proof { gap: 14px; flex-wrap: nowrap; }
  .hero .proof > div { flex: 1 1 0; min-width: 0; font-size: 12px; line-height: 1.35; }
  .hero .proof strong { font-size: 21px; }
}
body.site { overflow-x: clip; }
@media (max-width: 575.98px) { .duo-phones .phone.sm:first-child { display: none; } .duo-phones .phone.sm { transform: none !important; } }

/* estate landing */
.estate-hero .crest { color: #fff; background: var(--estate, #EF5A28); }
.estate-mono { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-weight: 800; background: var(--estate, #EF5A28); }
.estate-orb { display: none; }
.estate-ghost { --bs-btn-bg: rgba(255,255,255,.08); --bs-btn-color: #fff; --bs-btn-border-color: rgba(255,255,255,.22); --bs-btn-hover-bg: rgba(255,255,255,.16); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: rgba(255,255,255,.35); }
.member-card { border: 1px solid color-mix(in srgb, var(--rr-brand) 30%, var(--rr-border)); box-shadow: 0 30px 60px -30px rgba(239,90,40,.35); }
.date-chip { width: 46px; height: 50px; border-radius: 12px; background: var(--rr-brand-soft); color: var(--rr-brand); display: grid; place-items: center; align-content: center; font-size: 11px; text-transform: uppercase; font-weight: 700; flex: none; line-height: 1.1; }
.date-chip b { font-size: 18px; font-family: var(--rr-display); }
.gate-card { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--rr-border); background: var(--rr-surface); transition: border-color .15s, transform .15s; }
.gate-card:hover { border-color: var(--rr-brand); transform: translateY(-2px); }
.gate-card .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--rr-brand-soft); color: var(--rr-brand); flex: none; }
.gate-card b { display: block; color: var(--rr-fg-1); } .gate-card span { font-size: 12.5px; color: var(--rr-fg-3); }
.join-step { background: var(--rr-surface); border: 1px solid var(--rr-border); border-radius: 22px; padding: 28px; height: 100%; }
.join-step .n { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--rr-grad); color: #fff; font-weight: 800; font-family: var(--rr-display); margin-bottom: 16px; }
.join-step h3 { font-family: var(--rr-display); font-weight: 700; font-size: 19px; color: var(--rr-fg-1); }
.join-step p { color: var(--rr-fg-3); margin: 0; }
@media (max-width: 767.98px) { .estate-map { height: 440px; } .estate-map .overlay { display: none; } }
.estate-hero .hero-map { position: absolute; inset: 0; opacity: .9; }
.estate-hero .bg::after { z-index: 1; }
.estate-hero .bg::after { background: linear-gradient(90deg, rgba(10,10,10,.92) 0%, rgba(10,10,10,.55) 50%, rgba(10,10,10,.15) 100%), linear-gradient(180deg, transparent 55%, rgba(10,10,10,.96) 100%); }
.estate-hero .hero-map .maplibregl-control-container { position: relative; z-index: 2; }

/* solid brand band (closing calls to action) — same orange as buttons and the app splash */
.brand-zone { background: var(--rr-brand); color: #fff; }
.brand-zone .h-display, .brand-zone h2, .brand-zone h3 { color: #fff; }
.brand-zone .lede, .brand-zone p { color: rgba(255,255,255,.92); }
.brand-zone .eyebrow { color: #fff; } .brand-zone .eyebrow::before { background: #fff; }
.brand-zone .btn-royal:not(.rr-card *) { --bs-btn-bg: #fff; --bs-btn-border-color: #fff; --bs-btn-color: var(--rr-brand-press);
  --bs-btn-hover-bg: #FFF3EE; --bs-btn-hover-border-color: #FFF3EE; --bs-btn-hover-color: var(--rr-brand-press); }
.brand-zone .store-btn { background: #0A0A0A; border-color: #0A0A0A; color: #fff; }
.brand-zone .check-list li, .brand-zone .check-list li::before { color: #fff; }

/* hero: the quiet way in for residents, under the committee's call to action */
.hero .resident-link { margin: 14px 0 0; font-size: 14px; color: #A9B3C7; }
.hero .resident-link a { color: #fff; font-weight: 600; text-decoration: none; } .hero .resident-link a:hover { text-decoration: underline; }

/* before & after: each old headache paired with what replaces it */
.ba { display: grid; gap: 12px; max-width: 920px; margin: 0 auto; }
.ba-head, .ba-row { display: grid; grid-template-columns: 1fr 36px 1fr; align-items: center; gap: 12px; }
.ba-head span { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rr-fg-3); padding: 0 18px; }
.ba-row .was, .ba-row .now { padding: 16px 18px; border-radius: 16px; font-size: 15.5px; line-height: 1.45; height: 100%; display: flex; align-items: center; }
.ba-row .was { background: var(--rr-fill); color: var(--rr-fg-3); }
.ba-row .now { background: var(--rr-surface); border: 1px solid var(--rr-border); color: var(--rr-fg-1); font-weight: 600; box-shadow: var(--rr-shadow); }
.ba-row .to { text-align: center; color: var(--rr-primary); }
@media (max-width: 767.98px) {
  .ba-head { display: none; }
  .ba-row { grid-template-columns: 1fr; gap: 6px; }
  .ba-row .to { transform: rotate(90deg); line-height: 1; }
  .ba-row + .ba-row { margin-top: 10px; }
}

/* plan cards: the price per home, next to a service charge it looks small */
.price-card .per-home { font-size: 13px; color: var(--rr-success-text); font-weight: 600; margin-top: 2px; }

/* directory: share buttons in the empty state */
.btn-whatsapp { --bs-btn-bg: #25D366; --bs-btn-border-color: #25D366; --bs-btn-color: #fff; --bs-btn-hover-bg: #1EBE5A;
  --bs-btn-hover-border-color: #1EBE5A; --bs-btn-hover-color: #fff; }