/* Optical material for the public landing. Content and controls stay native DOM. */
/* Pointer coordinates affect only the rim, not every descendant's style. */
@property --liquid-x { syntax: '<length-percentage>'; inherits: false; initial-value: 25%; }
@property --liquid-y { syntax: '<length-percentage>'; inherits: false; initial-value: 0%; }
.page-home { --chd-muted: rgba(247, 247, 244, .80); }
.page-home .section-eyebrow { color: var(--chd-muted); }
.site-ambience__fluid { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; }
.site-ambience__fluid[data-ready] { opacity: 1; }
.page-home .site-ambience:has(.site-ambience__fluid[data-ready]) { mix-blend-mode: normal; mask-image: none; }
.site-ambience__fluid[data-ready] ~ .site-ambience__glow { display: none; }
@media (max-width: 1080px) {
    @view-transition { navigation: none; }
}
@media (forced-colors: active), (prefers-contrast: more), (prefers-reduced-transparency: reduce) {
    .site-ambience__fluid[data-ready] { display: none; }
}
.page-home .site-header { position: sticky; top: 20px; animation: none; }
.page-home :is(#services, #premium) { scroll-margin-top: 110px; }
.page-home .main-content > *, .page-home .sidebar__card { animation: none; }
.page-home .stats-card__copy { min-width: 0; }
.page-home .stats-card__copy span { white-space: normal; }
.page-home .stats-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 205px), 1fr)); }

/* A dedicated backing plane avoids refracting text or clipping popovers. */
.page-home .liquid-surface,
.page-profile .bottom-nav-mobile__inner.liquid-surface {
    position: relative;
    isolation: isolate;
    background: transparent;
    border: 1px solid #ffffff26;
    box-shadow: 0 14px 34px #00000035, 0 2px 5px #00000024;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.page-home .liquid-surface::before,
.page-profile .bottom-nav-mobile__inner.liquid-surface::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(125deg, #ffffff13, #ffffff03 42%, #ffffff0a), #11111166;
    backdrop-filter: blur(12px) saturate(115%);
    -webkit-backdrop-filter: blur(12px) saturate(115%);
    box-shadow: inset 0 1px 1px #ffffff4d, inset 1px 0 #ffffff12, inset 0 -1px 1px #ffffff2b;
}
.page-home .liquid-surface[data-liquid-optics]::before,
.page-profile .bottom-nav-mobile__inner.liquid-surface[data-liquid-optics]::before {
    backdrop-filter: var(--liquid-filter);
    -webkit-backdrop-filter: var(--liquid-filter);
    background-image: var(--liquid-rim), linear-gradient(125deg, #ffffff0d, #ffffff02 42%, #ffffff08);
    background-size: 100% 100%;
    background-color: #11111159;
}
.liquid-profiler { position: fixed; left: 8px; bottom: 8px; z-index: 10000; max-width: calc(100vw - 16px); margin: 0; padding: 10px; background: #111; color: #eee; font: 11px/1.5 monospace; white-space: pre-wrap; pointer-events: none; }
.page-home .liquid-surface::after,
.page-profile .bottom-nav-mobile__inner.liquid-surface::after {
    --liquid-x: inherit;
    --liquid-y: inherit;
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    pointer-events: none;
    padding: 1.5px;
    background: radial-gradient(ellipse 240px 180px at var(--liquid-x, 25%) var(--liquid-y, 0%), #ffffffcc, #ffffff33 38%, transparent 72%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
}
.page-home .site-header__inner.liquid-surface { border-radius: 26px; }
.page-home .sidebar__card.liquid-surface { border-radius: 32px; }
.page-home .bottom-nav-mobile__inner.liquid-surface,
.page-profile .bottom-nav-mobile__inner.liquid-surface { border-radius: 32px; }
.page-home .site-header__inner.liquid-surface::before,
.page-home .bottom-nav-mobile__inner.liquid-surface::before,
.page-profile .bottom-nav-mobile__inner.liquid-surface::before { background-color: #171717cf; }
.page-home .notification-popover.liquid-surface::before,
.page-home .sidebar--mobile .liquid-surface::before { background-color: #111111de; }
.page-home .notification-popover { color: var(--chd-ink); }
.page-home .notification-popover.liquid-surface { position: absolute; }
.page-home .bottom-nav-mobile__item,
.page-profile .bottom-nav-mobile__item { color: var(--chd-muted); border-radius: 24px; }
.page-home .bottom-nav-mobile__item.is-active,
.page-profile .bottom-nav-mobile__item.is-active { color: #fff; background: #ffffff20; }
.page-home .bottom-nav-mobile__inner.has-liquid-indicator .bottom-nav-mobile__item,
.page-profile .bottom-nav-mobile__inner.has-liquid-indicator .bottom-nav-mobile__item { background: transparent; z-index: 1; }
.liquid-nav-indicator {
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 24px;
    background: linear-gradient(135deg, #ffffff2e, #ffffff12);
    border: 1px solid #ffffff47;
    box-shadow: inset 0 1px 1px #ffffff66, inset 0 -1px #ffffff26, 0 3px 10px #00000026;
    pointer-events: none;
    transform-origin: center;
    will-change: transform;
}
.page-home :is(button, a):focus-visible { outline: 2px solid var(--chd-ink); outline-offset: 4px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .page-home :is(.icon-button, .service-card__button, .sidebar-service-card) { transition: background .2s, box-shadow .2s, transform .2s; }
    .page-home :is(.icon-button, .service-card__button):active { transform: scale(.96); }
    .page-home .sidebar-service-card:hover { background: #ffffff0c; }
}
@media (max-width: 900px) {
    .page-home .site-header { top: max(10px, env(safe-area-inset-top)); }
    .page-home .liquid-surface { box-shadow: 0 8px 24px #00000035; }
    .page-home .liquid-surface::before { background-color: #11111180; }
    .page-home .bottom-nav-mobile__inner,
    .page-profile .bottom-nav-mobile__inner { padding-bottom: 10px; }
    .page-profile .bottom-nav-mobile__inner.liquid-surface { box-shadow: 0 8px 24px #00000035; }
    .page-profile .bottom-nav-mobile__inner.liquid-surface::before { background-color: #11111180; }
    .page-home .bottom-nav-mobile,
    .page-profile .bottom-nav-mobile { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
}
@media (max-width: 680px) {
    .page-home .notification-popover.liquid-surface { position: fixed; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    .page-home .liquid-surface::before,
    .page-home .liquid-surface[data-liquid-optics]::before,
    .page-profile .bottom-nav-mobile__inner.liquid-surface::before,
    .page-profile .bottom-nav-mobile__inner.liquid-surface[data-liquid-optics]::before { background: #151515; backdrop-filter: none; -webkit-backdrop-filter: none; }
    .page-home .liquid-surface::after,
    .page-profile .bottom-nav-mobile__inner.liquid-surface::after { display: none; }
}
@media (forced-colors: active) {
    .page-home .liquid-surface,
    .page-profile .bottom-nav-mobile__inner.liquid-surface { border: 1px solid CanvasText; }
    .page-home .liquid-surface::before,
    .page-profile .bottom-nav-mobile__inner.liquid-surface::before { background: Canvas; backdrop-filter: none; }
    .page-home .liquid-surface::after,
    .page-profile .bottom-nav-mobile__inner.liquid-surface::after,
    .liquid-nav-indicator { display: none; }
}