/*
 * Public landing page (/ and /shop). Everything is scoped under .hx so the
 * older landing-* styles used by privacy, terms and checkout stay untouched.
 * Motion is CSS-only: scroll-driven reveals where supported, static otherwise.
 */

.hx {
    --hx-night: #040b1d;
    --hx-ink: #07122b;
    --hx-ink-2: #0c1d42;
    --hx-text: #0b1733;
    --hx-muted: #56637a;
    --hx-line: #e1e7f0;
    --hx-paper: #f5f7fb;
    --hx-blue: #2f6bff;
    --hx-blue-deep: #1747d6;
    --hx-cyan: #5ad7ff;
    --hx-mint: #34d9a0;
    --hx-amber: #ffb547;
    --hx-coral: #ff6b7a;
    --hx-violet: #8b7bff;
    --hx-on-dark: #eaf0ff;
    --hx-on-dark-muted: #a3b1cf;
    --hx-radius: 1.4rem;
    --hx-mono: ui-monospace, "Cascadia Mono", "SF Mono", "JetBrains Mono", Consolas, monospace;
    --hx-ease: cubic-bezier(.2, .8, .2, 1);

    overflow: clip;
    background: #fff;
    color: var(--hx-text);
    font-family: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Resets use :where() so they never outrank component classes. */
:where(.hx) *, :where(.hx) *::before, :where(.hx) *::after { box-sizing: border-box; }
:where(.hx) :where(h1, h2, h3, p, ul, ol, figure, blockquote) { margin: 0; }
:where(.hx) :where(ul, ol) { padding: 0; list-style: none; }
:where(.hx) img { display: block; max-width: 100%; height: auto; }
:where(.hx) a { color: inherit; text-decoration: none; }
:where(.hx) :where(button, input) { font: inherit; color: inherit; }
.hx section[id] { scroll-margin-top: 6.5rem; }
.hx .landing-icon { width: 1.25rem; height: 1.25rem; flex: none; }

.landing-layout .hx :is(a, button, input, summary):focus-visible {
    outline: 3px solid var(--hx-blue);
    outline-offset: 3px;
    border-radius: .5rem;
}

.landing-layout .hx :is(.hx-hero, .hx-manager, .hx-trust, .hx-finale, .hx-footer) :is(a, button, input, summary):focus-visible {
    outline-color: var(--hx-cyan);
}

.hx-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.hx-shell {
    width: min(100% - 2.5rem, 78rem);
    margin-inline: auto;
}

/* ---------- Type primitives ---------- */

.hx-kicker {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: var(--hx-blue-deep);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.hx-kicker::before {
    content: "";
    width: 1.5rem;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--hx-blue), var(--hx-cyan));
}

.hx-kicker-dark { color: var(--hx-cyan); }

.hx-kicker:has(.hx-pulse)::before { display: none; }

.hx-pulse {
    position: relative;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--hx-mint);
    box-shadow: 0 0 0 0 rgba(52, 217, 160, .6);
    animation: hx-pulse 2.4s ease-out infinite;
}

.hx h2 {
    font-size: clamp(2.1rem, 4.2vw, 3.5rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -.04em;
}

.hx h3 {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.015em;
}

.hx-gradient-text {
    background: linear-gradient(100deg, #86e6ff 0%, #6f9bff 40%, #34d9a0 80%, #86e6ff 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: hx-shimmer 9s ease-in-out infinite alternate;
}

.hx-gradient-text-light {
    background-image: linear-gradient(100deg, #1747d6 0%, #2f8bff 45%, #0fb383 85%, #1747d6 100%);
}

.hx-heading {
    display: grid;
    gap: 1rem;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.hx-heading > p:last-child,
.hx-heading-split > p {
    color: var(--hx-muted);
    font-size: 1.05rem;
    max-width: 38rem;
}

.hx-heading-split {
    grid-template-columns: 1.2fr 1fr;
    align-items: end;
    gap: 2rem 4rem;
}

.hx-heading-split > div { display: grid; gap: 1rem; }

.hx-heading-center {
    justify-items: center;
    text-align: center;
}

.hx-heading-center h1,
.hx-heading-center h2 { max-width: 20ch; }

.hx-heading a { color: var(--hx-blue-deep); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }

.hx-footnote {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin-top: 1.75rem;
    color: var(--hx-muted);
    font-size: .82rem;
}

.hx-footnote .landing-icon { width: 1rem; height: 1rem; margin-top: .15rem; color: var(--hx-blue); }

/* ---------- Buttons & links ---------- */

.hx-btn {
    display: inline-flex;
    min-height: 3rem;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0 1.35rem;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .2s var(--hx-ease), box-shadow .2s var(--hx-ease), background-color .2s ease, border-color .2s ease, color .2s ease;
}

.hx-btn:hover { transform: translateY(-2px); }
.hx-btn:active { transform: translateY(0); }
.hx-arrow { display: inline-block; transition: transform .2s var(--hx-ease); }
.hx-btn:hover .hx-arrow, .hx-link:hover .hx-arrow { transform: translateX(3px); }

.hx-btn-lg { min-height: 3.4rem; padding: 0 1.65rem; font-size: 1rem; }
.hx-btn-sm { min-height: 2.5rem; padding: 0 1.05rem; font-size: .88rem; }

.hx-btn-primary {
    background: linear-gradient(135deg, #4a86ff, var(--hx-blue-deep));
    color: #fff;
    box-shadow: 0 12px 30px -10px rgba(47, 107, 255, .75), inset 0 1px 0 rgba(255, 255, 255, .25);
}

.hx-btn-primary:hover { box-shadow: 0 18px 40px -10px rgba(47, 107, 255, .85), inset 0 1px 0 rgba(255, 255, 255, .3); }

.hx-btn-ink { background: var(--hx-text); color: #fff; }
.hx-btn-ink:hover { background: var(--hx-blue-deep); }

.hx-btn-glass {
    border-color: rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .07);
    color: #fff;
    backdrop-filter: blur(12px);
}

.hx-btn-glass:hover { border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .14); }

.hx-btn-outline { border-color: #cdd7e6; background: #fff; color: var(--hx-text); }
.hx-btn-outline:hover { border-color: var(--hx-blue); color: var(--hx-blue-deep); }

.hx-btn-light { background: #fff; color: var(--hx-text); box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .5); }

.hx-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--hx-blue-deep);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: .25em;
    transition: text-decoration-color .2s ease;
}

.hx-link:hover { text-decoration-color: currentColor; }
.hx-link-light { color: #fff; }

.hx-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
}

/* ---------- Header ---------- */

.hx-header {
    position: fixed;
    top: .9rem;
    left: 0;
    right: 0;
    z-index: 60;
    pointer-events: none;
}

.hx-nav {
    display: flex;
    width: min(100% - 1.5rem, 80rem);
    min-height: 4rem;
    align-items: center;
    gap: 1.5rem;
    margin-inline: auto;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, .86);
    padding: .5rem .6rem .5rem 1.1rem;
    box-shadow: 0 12px 40px -12px rgba(4, 11, 29, .35), 0 1px 0 rgba(255, 255, 255, .6) inset;
    backdrop-filter: blur(18px) saturate(1.4);
    pointer-events: auto;
}

.hx-brand { display: block; flex: none; width: 7.4rem; }
.hx-brand img { width: 100%; }

.hx-nav-links {
    display: flex;
    flex: 1;
    justify-content: center;
    gap: .25rem;
}

.hx-nav-links a {
    border-radius: 999px;
    padding: .5rem .85rem;
    color: #3b4863;
    font-size: .9rem;
    font-weight: 500;
    transition: background-color .2s ease, color .2s ease;
}

.hx-nav-links a:hover { background: #eef2fa; color: var(--hx-text); }

.hx-nav-actions { display: flex; align-items: center; gap: .9rem; }

.hx-nav-login {
    color: #3b4863;
    font-size: .9rem;
    font-weight: 600;
}

.hx-nav-login:hover { color: var(--hx-blue-deep); }

.hx-menu { display: none; position: relative; margin-left: auto; }

.hx-menu summary {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border-radius: .9rem;
    background: var(--hx-text);
    color: #fff;
    cursor: pointer;
    list-style: none;
}

.hx-menu summary::-webkit-details-marker { display: none; }

.hx-menu-panel {
    position: absolute;
    top: calc(100% + .75rem);
    right: 0;
    display: grid;
    width: min(20rem, calc(100vw - 2rem));
    gap: .15rem;
    border: 1px solid var(--hx-line);
    border-radius: 1.2rem;
    background: #fff;
    padding: .75rem;
    box-shadow: 0 30px 60px -20px rgba(4, 11, 29, .45);
}

.hx-menu-panel a:not(.hx-btn) {
    border-radius: .75rem;
    padding: .75rem .9rem;
    font-weight: 600;
}

.hx-menu-panel a:not(.hx-btn):hover { background: var(--hx-paper); }
.hx-menu-panel hr { width: 100%; margin: .4rem 0; border: 0; border-top: 1px solid var(--hx-line); }
.hx-menu-panel .hx-btn { margin-top: .4rem; }

/* ---------- Hero ---------- */

.hx-hero {
    position: relative;
    isolation: isolate;
    padding: clamp(8.5rem, 14vw, 11rem) 0 0;
    background:
        radial-gradient(60rem 36rem at 12% -10%, rgba(47, 107, 255, .35), transparent 60%),
        radial-gradient(50rem 30rem at 95% 20%, rgba(90, 215, 255, .16), transparent 60%),
        linear-gradient(180deg, var(--hx-night) 0%, #071433 60%, #0a1a3f 100%);
    color: var(--hx-on-dark);
}

.hx-hero-sky { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }

.hx-hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(148, 176, 255, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 176, 255, .07) 1px, transparent 1px);
    background-size: 4rem 4rem;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 20%, transparent 75%);
}

.hx-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .55;
    animation: hx-drift 18s ease-in-out infinite alternate;
}

.hx-orb-a { top: 30%; left: -10rem; width: 30rem; height: 30rem; background: #1d4fd8; }
.hx-orb-b { top: 55%; right: -8rem; width: 26rem; height: 26rem; background: #0e8fb8; animation-delay: -9s; }

.hx-dial {
    position: absolute;
    top: -9rem;
    right: -9rem;
    width: clamp(26rem, 44vw, 40rem);
    height: auto;
    opacity: .55;
    fill: none;
    stroke: rgba(148, 176, 255, .22);
    stroke-width: 1;
}

.hx-dial line { stroke-width: 1.5; }
.hx-dial line.major { stroke: rgba(148, 196, 255, .5); stroke-width: 2.5; }

.hx-dial-hand {
    transform-box: view-box;
    transform-origin: 200px 200px;
    animation: hx-tick 60s steps(60) infinite;
}

.hx-dial-hand line { stroke: rgba(90, 215, 255, .8); stroke-width: 2; }
.hx-dial-hand circle { fill: var(--hx-cyan); stroke: none; }

.hx-hero-top {
    display: grid;
    gap: 2.25rem;
}

.hx-hero-copy { display: grid; gap: 1.5rem; }

.hx-hero h1 {
    color: #fff;
    font-size: clamp(2.9rem, 6.6vw, 6.1rem);
    font-weight: 700;
    line-height: .98;
    letter-spacing: -.05em;
    animation: hx-enter .9s var(--hx-ease) both;
}

.hx-hero-aside {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: start;
    justify-items: start;
    gap: 1.1rem 4rem;
    animation: hx-enter .9s var(--hx-ease) .12s both;
}

.hx-hero-lede { grid-row: span 3; }

.hx-hero-lede { color: var(--hx-on-dark-muted); font-size: 1.12rem; line-height: 1.65; }

.hx-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.hx-trial-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid rgba(52, 217, 160, .35);
    border-radius: 999px;
    background: rgba(52, 217, 160, .08);
    padding: .45rem .9rem .45rem .7rem;
    color: #bff5e0;
    font-size: .85rem;
    font-weight: 600;
    transition: background-color .2s ease;
}

.hx-trial-chip:hover { background: rgba(52, 217, 160, .16); }
.hx-trial-chip .landing-icon { width: 1rem; height: 1rem; color: var(--hx-mint); }

.hx-hero-fine { color: #7f8db0; font-size: .78rem; line-height: 1.55; max-width: 34rem; }

/* Workday ribbon console */

.hx-console {
    position: relative;
    margin-top: clamp(3rem, 6vw, 4.5rem);
    overflow: hidden;
    border: 1px solid rgba(140, 170, 255, .2);
    border-radius: 1.6rem;
    background: linear-gradient(180deg, rgba(22, 38, 82, .82), rgba(9, 20, 48, .94));
    box-shadow:
        0 50px 120px -30px rgba(0, 0, 0, .75),
        0 0 0 1px rgba(255, 255, 255, .03) inset,
        0 1px 0 rgba(255, 255, 255, .1) inset;
    backdrop-filter: blur(20px);
    animation: hx-enter 1s var(--hx-ease) .25s both;
}

.hx-console::before {
    content: "";
    position: absolute;
    inset: -1px -1px auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(90, 215, 255, .8), transparent);
}

.hx-console-bar {
    display: flex;
    align-items: center;
    gap: .9rem;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    padding: .95rem 1.25rem;
    font-size: .88rem;
}

.hx-console-dots { display: flex; gap: .35rem; }
.hx-console-dots i { width: .6rem; height: .6rem; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.hx-console-bar strong { color: #fff; font-weight: 600; }
.hx-console-meta { color: var(--hx-on-dark-muted); }

.hx-console-tag {
    margin-left: auto;
    border: 1px solid rgba(255, 181, 71, .35);
    border-radius: 999px;
    padding: .2rem .65rem;
    color: #ffd49a;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.hx-ribbon {
    --person: 12.5rem;
    --worked: 10.5rem;
    --gap: 1.25rem;
    position: relative;
    padding: .5rem 0 .75rem;
}

.hx-ribbon-head,
.hx-ribbon-row {
    display: grid;
    grid-template-columns: var(--person) 1fr var(--worked);
    align-items: center;
    gap: var(--gap);
    padding: 0 1.25rem;
}

.hx-ribbon-head {
    padding-block: .6rem .5rem;
    color: #7486ad;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hx-ribbon-hours { position: relative; height: 1rem; }

.hx-ribbon-hours span {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-family: var(--hx-mono);
    font-size: .7rem;
    letter-spacing: 0;
    text-transform: none;
}

.hx-ribbon-hours span:first-child { transform: none; }

.hx-ribbon-row {
    border-top: 1px solid rgba(255, 255, 255, .055);
    padding-block: .7rem;
    transition: background-color .25s ease;
}

.hx-ribbon-row:hover { background: rgba(255, 255, 255, .03); }

.hx-person { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.hx-person > span:last-child { display: grid; min-width: 0; line-height: 1.2; }
.hx-person strong { overflow: hidden; color: #fff; font-size: .92rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.hx-person small { color: #7f8db0; font-size: .76rem; }

.hx-avatar {
    display: grid;
    width: 2.1rem;
    height: 2.1rem;
    flex: none;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, hsl(var(--hue) 85% 68%), hsl(calc(var(--hue) + 30) 70% 45%));
    color: #fff;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .02em;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .12);
}

.hx-avatar-lg { width: 3.2rem; height: 3.2rem; font-size: 1rem; }

.hx-track {
    position: relative;
    height: 1.7rem;
    border-radius: .55rem;
    background-color: rgba(255, 255, 255, .03);
    background-image: linear-gradient(90deg, rgba(255, 255, 255, .065) 1px, transparent 1px);
    background-size: calc(100% / 11) 100%;
    animation: hx-wipe 1.5s var(--hx-ease) both;
    animation-delay: calc(var(--row, 0) * 130ms + 550ms);
}

.hx-seg {
    position: absolute;
    top: .22rem;
    bottom: .22rem;
    border-radius: .35rem;
    transition: filter .2s ease, transform .2s ease;
}

.hx-ribbon-row:hover .hx-seg { filter: brightness(1.15); }

.hx-seg-focus { background: linear-gradient(90deg, #2f6bff, #4f8dff); box-shadow: 0 0 14px -2px rgba(47, 107, 255, .7); }
.hx-seg-work { background: rgba(127, 166, 255, .42); }
.hx-seg-meet { background: linear-gradient(90deg, #7b6bff, #9a8cff); }
.hx-seg-break { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 2px, transparent 2px 5px); }
.hx-seg-idle { background: repeating-linear-gradient(135deg, rgba(163, 177, 207, .5) 0 3px, rgba(163, 177, 207, .12) 3px 7px); }
.hx-seg-attention { background: linear-gradient(90deg, #ff5a6e, #ff8a8a); box-shadow: 0 0 14px -2px rgba(255, 107, 122, .65); }
.hx-seg-missing {
    background: repeating-linear-gradient(135deg, rgba(255, 181, 71, .85) 0 4px, rgba(255, 181, 71, .18) 4px 9px);
    box-shadow: inset 0 0 0 1px rgba(255, 181, 71, .9);
    animation: hx-blink 2.2s ease-in-out infinite;
}

.hx-worked { display: grid; justify-items: end; gap: .2rem; line-height: 1.2; }
.hx-worked strong { color: #fff; font-family: var(--hx-mono); font-size: .88rem; font-weight: 600; }

.hx-flag {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border-radius: 999px;
    padding: .15rem .55rem;
    font-size: .7rem;
    font-weight: 600;
    white-space: nowrap;
}

.hx-flag::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; }
.hx-flag-ok { background: rgba(52, 217, 160, .12); color: #6ff0c1; }
.hx-flag-idle { background: rgba(163, 177, 207, .14); color: #c3cde3; }
.hx-flag-missing { background: rgba(255, 181, 71, .14); color: #ffc670; }
.hx-flag-attention { background: rgba(255, 107, 122, .14); color: #ff9aa5; }

.hx-scan {
    position: absolute;
    top: 2.4rem;
    bottom: .75rem;
    left: calc(1.25rem + var(--person) + var(--gap));
    right: calc(1.25rem + var(--worked) + var(--gap));
    pointer-events: none;
}

.hx-scan::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(transparent, var(--hx-cyan) 20%, var(--hx-cyan) 80%, transparent);
    box-shadow: 0 0 18px 2px rgba(90, 215, 255, .55);
    opacity: 0;
    animation: hx-scan 9s ease-in-out 2.4s infinite;
}

.hx-console-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .9rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .07);
    background: rgba(4, 11, 29, .35);
    padding: .9rem 1.25rem;
}

.hx-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; color: var(--hx-on-dark-muted); font-size: .76rem; }
.hx-legend li { display: inline-flex; align-items: center; gap: .45rem; }
.hx-legend i { display: inline-block; width: 1rem; height: .55rem; border-radius: .2rem; box-shadow: none; animation: none; }

.hx-console-cta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border-radius: 999px;
    background: rgba(255, 181, 71, .12);
    padding: .4rem .85rem;
    color: #ffd49a;
    font-size: .8rem;
    font-weight: 600;
}

.hx-audience {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    padding: 2.25rem 0 2.75rem;
    color: #7f8db0;
    font-size: .85rem;
}

.hx-audience ul { display: flex; flex-wrap: wrap; gap: .6rem; }

.hx-audience li {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid rgba(148, 176, 255, .16);
    border-radius: 999px;
    padding: .5rem .95rem;
    color: #dbe4fb;
    font-weight: 600;
}

.hx-audience .landing-icon { width: 1rem; height: 1rem; color: var(--hx-cyan); }

/* ---------- Sections ---------- */

.hx-section { position: relative; padding: clamp(5rem, 9vw, 8rem) 0; }

/* Proof */

.hx-proof { background: #fff; }

.hx-proof-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    align-items: center;
    gap: clamp(2.5rem, 6vw, 5rem);
}

.hx-proof-copy { display: grid; gap: 1.2rem; }
.hx-proof-copy > p:not(.hx-kicker):not(.hx-proof-note) { color: var(--hx-muted); font-size: 1.04rem; }

.hx-moments { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; margin-top: .6rem; }

.hx-moments article {
    display: grid;
    align-content: start;
    gap: .75rem;
    border: 1px solid var(--hx-line);
    border-radius: 1.1rem;
    background: var(--hx-paper);
    padding: 1.1rem;
}

.hx-moments strong { display: block; margin-bottom: .25rem; font-size: .98rem; }
.hx-moments p { color: var(--hx-muted); font-size: .88rem; line-height: 1.55; }

.hx-moment-icon,
.hx-card-icon {
    display: grid;
    width: 2.6rem;
    height: 2.6rem;
    flex: none;
    place-items: center;
    border-radius: .85rem;
    background: linear-gradient(135deg, #e7efff, #d6e4ff);
    color: var(--hx-blue-deep);
}

.hx-proof-note {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: var(--hx-muted);
    font-size: .85rem;
}

.hx-proof-note .landing-icon { width: 1.05rem; height: 1.05rem; color: var(--hx-mint); }

.hx-shot { position: relative; perspective: 1800px; }

.hx-shot-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .8rem;
    font-size: .8rem;
    font-weight: 600;
}

.hx-shot-bar a { color: var(--hx-blue-deep); }
.hx-live { display: inline-flex; align-items: center; gap: .5rem; color: var(--hx-muted); letter-spacing: .06em; text-transform: uppercase; font-size: .72rem; }
.hx-live i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--hx-mint); animation: hx-pulse 2.4s ease-out infinite; }

.hx-shot-frame {
    overflow: hidden;
    border: 1px solid #d5deeb;
    border-radius: 1.25rem;
    background: #fff;
    padding: .45rem;
    box-shadow: 0 40px 80px -30px rgba(11, 23, 51, .35), 0 12px 24px -12px rgba(11, 23, 51, .12);
    transform: rotateY(-7deg) rotateX(3deg);
    transform-origin: 30% 50%;
    transition: transform .8s var(--hx-ease);
}

.hx-shot:hover .hx-shot-frame { transform: none; }
.hx-shot-frame img { border-radius: .9rem; }

.hx-shot figcaption { margin-top: 1rem; color: var(--hx-muted); font-size: .88rem; }
.hx-shot figcaption strong { color: var(--hx-text); }

.hx-shot-callout {
    position: absolute;
    left: -1.75rem;
    bottom: -1rem;
    display: flex;
    max-width: 19rem;
    gap: .75rem;
    border: 1px solid var(--hx-line);
    border-radius: 1rem;
    background: rgba(255, 255, 255, .95);
    padding: 1rem;
    color: var(--hx-muted);
    font-size: .84rem;
    line-height: 1.5;
    box-shadow: 0 24px 50px -20px rgba(11, 23, 51, .4);
    backdrop-filter: blur(10px);
}

.hx-shot-callout strong { color: var(--hx-text); }
.hx-shot-callout .landing-icon { color: var(--hx-mint); margin-top: .1rem; }

/* Features bento */

.hx-features {
    background:
        radial-gradient(40rem 20rem at 85% 0%, rgba(47, 107, 255, .07), transparent 70%),
        var(--hx-paper);
}

.hx-bento {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.1rem;
}

.hx-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    overflow: hidden;
    border: 1px solid var(--hx-line);
    border-radius: var(--hx-radius);
    background: #fff;
    padding: 1.75rem;
    transition: transform .35s var(--hx-ease), box-shadow .35s var(--hx-ease), border-color .35s ease;
}

.hx-card:hover {
    transform: translateY(-4px);
    border-color: #c7d6f5;
    box-shadow: 0 30px 60px -30px rgba(23, 71, 214, .35);
}

.hx-card-copy { display: grid; align-content: start; gap: .8rem; }
.hx-card-copy p { color: var(--hx-muted); font-size: .94rem; }

.hx-card-dark {
    border-color: transparent;
    background:
        radial-gradient(30rem 16rem at 100% 0%, rgba(47, 107, 255, .35), transparent 70%),
        linear-gradient(160deg, var(--hx-ink-2), var(--hx-ink));
    color: var(--hx-on-dark);
}

.hx-card-dark h3 { color: #fff; }
.hx-card-dark .hx-card-copy p { color: var(--hx-on-dark-muted); }
.hx-card-dark .hx-card-icon { background: rgba(90, 215, 255, .12); color: var(--hx-cyan); }
.hx-card-dark:hover { border-color: rgba(90, 215, 255, .3); }

.hx-card-blue {
    background:
        radial-gradient(28rem 18rem at 100% 100%, rgba(90, 215, 255, .18), transparent 70%),
        linear-gradient(135deg, #eef4ff, #f8fbff);
}

.hx-b-time { grid-column: span 7; display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.hx-b-activity { grid-column: span 5; }
.hx-b-evidence, .hx-b-dash, .hx-b-report { grid-column: span 4; }
.hx-b-agent { grid-column: span 12; display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 2.5rem; }

.hx-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; }

.hx-tags li {
    border: 1px solid var(--hx-line);
    border-radius: 999px;
    background: #fff;
    padding: .3rem .7rem;
    color: #3b4863;
    font-size: .76rem;
    font-weight: 600;
}

.hx-tags a { color: var(--hx-blue-deep); }
.hx-card-dark .hx-tags li { border-color: rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .05); color: #cfd9f2; }
.hx-card-copy .hx-tags { margin-top: .4rem; }

.hx-viz { position: relative; }

.hx-dot { display: inline-block; width: .55rem; height: .55rem; flex: none; border-radius: 50%; }
.hx-dot-focus { background: var(--hx-mint); box-shadow: 0 0 0 3px rgba(52, 217, 160, .18); }
.hx-dot-work { background: #7fa6ff; }
.hx-dot-meet { background: var(--hx-blue); box-shadow: 0 0 0 3px rgba(47, 107, 255, .18); }
.hx-dot-attention { background: var(--hx-coral); }
.hx-dot-missing { background: var(--hx-amber); box-shadow: 0 0 0 3px rgba(255, 181, 71, .2); }

.hx-viz-week {
    display: grid;
    gap: .45rem;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 1rem;
    background: rgba(4, 11, 29, .45);
    padding: 1rem;
    font-family: var(--hx-mono);
    font-size: .74rem;
}

.hx-viz-week div { display: grid; grid-template-columns: 2.3rem 2.8rem 1fr 3.6rem; align-items: center; gap: .6rem; color: var(--hx-on-dark-muted); }
.hx-viz-week b { color: #fff; font-weight: 600; }
.hx-viz-week div > span:last-child { text-align: right; }

.hx-viz-week i {
    display: block;
    width: var(--w);
    height: .45rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--hx-blue), var(--hx-cyan));
}

.hx-viz-week .is-missing { color: #ffc670; }
.hx-viz-week .is-missing i { background: repeating-linear-gradient(135deg, rgba(255, 181, 71, .9) 0 4px, rgba(255, 181, 71, .25) 4px 8px); }
.hx-viz-week .is-missing > span:last-child { font-family: "Space Grotesk", sans-serif; font-weight: 700; }

.hx-viz-mix { display: grid; gap: 1rem; }
.hx-mix-bar { display: flex; height: .8rem; gap: 3px; overflow: hidden; border-radius: 999px; }
.hx-mix-bar i { flex: 0 0 var(--w); border-radius: 2px; }
.hx-mix-bar i:nth-child(1) { background: linear-gradient(90deg, #22c490, var(--hx-mint)); }
.hx-mix-bar i:nth-child(2) { background: #a9c1ff; }
.hx-mix-bar i:nth-child(3) { flex: 1; background: var(--hx-coral); }
.hx-viz-mix ul { display: grid; gap: .45rem; }
.hx-viz-mix li { display: flex; align-items: center; gap: .6rem; border-radius: .7rem; background: var(--hx-paper); padding: .55rem .75rem; font-size: .86rem; font-weight: 600; }
.hx-viz-mix em { margin-left: auto; color: var(--hx-muted); font-size: .76rem; font-style: normal; font-weight: 500; }

.hx-viz-frames { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; }

.hx-viz-frames i {
    position: relative;
    display: grid;
    aspect-ratio: 16 / 10;
    place-items: center;
    overflow: hidden;
    border-radius: .55rem;
    background:
        linear-gradient(#fff 0 18%, transparent 18%),
        linear-gradient(90deg, #dfe8fb 0 28%, #f2f6fd 28%);
    box-shadow: inset 0 0 0 1px var(--hx-line);
}

.hx-viz-frames i:nth-child(2) { background: linear-gradient(#fff 0 18%, transparent 18%), linear-gradient(160deg, #e6fbf3, #d7e6ff); }
.hx-viz-frames i:nth-child(4) { background: linear-gradient(#fff 0 18%, transparent 18%), repeating-linear-gradient(#f2f6fd 0 8px, #e4ecfa 8px 10px); }
.hx-viz-frames i:nth-child(6) { background: linear-gradient(#fff 0 18%, transparent 18%), linear-gradient(135deg, #e7efff, #fde9ec); }

.hx-viz-frames .is-video { background: linear-gradient(135deg, var(--hx-ink-2), #183b86); box-shadow: none; }

.hx-viz-frames .is-video b {
    display: grid;
    width: 1.6rem;
    height: 1.6rem;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: var(--hx-blue-deep);
    font-size: .6rem;
    padding-left: 2px;
}

.hx-viz-widgets { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.hx-viz-widgets > div { border: 1px solid var(--hx-line); border-radius: .8rem; background: var(--hx-paper); padding: .7rem .8rem; }
.hx-w-kpi small { display: block; color: var(--hx-muted); font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.hx-w-kpi b { font-size: 1.45rem; letter-spacing: -.03em; }
.hx-w-kpi:nth-child(2) b { color: #d97706; }
.hx-w-chart { grid-column: span 2; height: 4.4rem; padding: .5rem !important; }
.hx-w-chart svg { width: 100%; height: 100%; overflow: visible; }
.hx-w-chart path { fill: none; stroke: var(--hx-blue); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.hx-w-chart path.fill { fill: rgba(47, 107, 255, .12); stroke: none; }

.hx-viz-report { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }

.hx-page {
    display: grid;
    width: 58%;
    gap: .4rem;
    border: 1px solid var(--hx-line);
    border-radius: .6rem;
    background: #fff;
    padding: .85rem;
    box-shadow: 0 16px 30px -18px rgba(11, 23, 51, .35);
    transform: rotate(-3deg);
    transition: transform .4s var(--hx-ease);
}

.hx-card:hover .hx-page { transform: rotate(0); }
.hx-line { display: block; height: .35rem; border-radius: 999px; background: #dfe6f2; }
.hx-line.w70 { width: 70%; background: #b8c9ef; }
.hx-line.w45 { width: 45%; }
.hx-bars { display: flex; height: 3.3rem; align-items: flex-end; gap: .3rem; margin-top: .35rem; }
.hx-bars i { flex: 1; height: var(--h); border-radius: .2rem .2rem 0 0; background: linear-gradient(180deg, #5b8fff, var(--hx-blue-deep)); }

.hx-schedule {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border-radius: 999px;
    background: #e8fbf3;
    padding: .35rem .7rem;
    color: #0b7a55;
    font-family: var(--hx-mono);
    font-size: .7rem;
    font-weight: 600;
    white-space: nowrap;
}

.hx-schedule .landing-icon { width: .9rem; height: .9rem; }

.hx-viz-health { display: grid; gap: .55rem; }

.hx-viz-health div {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: .75rem;
    border: 1px solid #d7e3fb;
    border-radius: .9rem;
    background: rgba(255, 255, 255, .8);
    padding: .8rem 1rem;
}

.hx-viz-health b { font-family: var(--hx-mono); font-size: .82rem; font-weight: 600; }
.hx-viz-health small { justify-self: end; color: var(--hx-muted); font-size: .8rem; }

/* Meet */

.hx-meet { background: linear-gradient(180deg, #fff 0%, #eef4ff 100%); }

.hx-meet-layout {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    align-items: center;
    gap: clamp(2.5rem, 6vw, 5rem);
}

.hx-meet-copy { display: grid; justify-items: start; gap: 1.3rem; }

.hx-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid #cfdcfb;
    border-radius: 999px;
    background: #fff;
    padding: .4rem .85rem .4rem .6rem;
    color: var(--hx-blue-deep);
    font-size: .82rem;
    font-weight: 700;
    box-shadow: 0 8px 20px -12px rgba(23, 71, 214, .5);
}

.hx-badge .landing-icon { width: 1.1rem; height: 1.1rem; }
.hx-meet-lede { color: var(--hx-muted); font-size: 1.08rem; }

.hx-included {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    border-radius: .9rem;
    background: #e3ecff;
    padding: .7rem 1rem;
    color: #22325a;
    font-size: .9rem;
}

.hx-included .landing-icon { color: var(--hx-blue-deep); }

.hx-meet-preview {
    overflow: hidden;
    border: 1px solid #d3def3;
    border-radius: 1.4rem;
    background: #fff;
    box-shadow: 0 50px 90px -40px rgba(23, 71, 214, .45);
}

.hx-meet-preview-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--hx-line);
    padding: .8rem 1.1rem;
    color: var(--hx-muted);
    font-size: .8rem;
}

.hx-meet-preview-bar span:first-child { display: inline-flex; align-items: center; gap: .45rem; color: var(--hx-text); font-weight: 700; }
.hx-meet-preview-bar .landing-icon { width: 1rem; height: 1rem; color: var(--hx-blue); }
.hx-meet-preview figcaption { border-top: 1px solid var(--hx-line); padding: .75rem 1.1rem; color: var(--hx-muted); font-size: .8rem; }

.hx-meet-caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: clamp(3rem, 5vw, 4rem); }

.hx-meet-caps article {
    display: flex;
    gap: 1rem;
    border: 1px solid #d9e3f5;
    border-radius: 1.2rem;
    background: rgba(255, 255, 255, .8);
    padding: 1.35rem;
}

.hx-meet-caps h3 { margin-bottom: .35rem; font-size: 1.02rem; }
.hx-meet-caps p { color: var(--hx-muted); font-size: .9rem; }

/* Domain Update Manager */

.hx-manager {
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(180deg, var(--hx-ink) 0%, var(--hx-night) 100%);
    color: var(--hx-on-dark);
}

.hx-manager-glow {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(40rem 26rem at 90% 0%, rgba(47, 107, 255, .3), transparent 65%),
        radial-gradient(34rem 22rem at 0% 70%, rgba(90, 215, 255, .12), transparent 65%);
}

.hx-manager-intro {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    align-items: start;
    gap: clamp(2.5rem, 6vw, 5rem);
}

.hx-manager-intro > div:first-child { display: grid; justify-items: start; gap: 1.3rem; }
.hx-manager h2 { color: #fff; }
.hx-manager-lede { color: var(--hx-on-dark-muted); font-size: 1.06rem; }

.hx-manager-plans { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; color: #7f8db0; font-size: .85rem; }
.hx-manager-plans strong { border: 1px solid rgba(90, 215, 255, .3); border-radius: 999px; background: rgba(90, 215, 255, .08); padding: .3rem .75rem; color: #bdeeff; font-size: .8rem; }

.hx-manager-benefits { display: grid; gap: .8rem; }

.hx-manager-benefits article {
    display: flex;
    gap: 1rem;
    border: 1px solid rgba(148, 176, 255, .14);
    border-radius: 1.1rem;
    background: rgba(255, 255, 255, .035);
    padding: 1.25rem;
    transition: border-color .3s ease, background-color .3s ease;
}

.hx-manager-benefits article:hover { border-color: rgba(90, 215, 255, .35); background: rgba(255, 255, 255, .06); }
.hx-manager-benefits h3 { margin-bottom: .3rem; color: #fff; font-size: 1.02rem; }
.hx-manager-benefits p { color: var(--hx-on-dark-muted); font-size: .9rem; }
.hx-manager .hx-card-icon, .hx-trust .hx-card-icon { background: rgba(90, 215, 255, .1); color: var(--hx-cyan); }

.hx-manager-showcase {
    margin-top: clamp(3rem, 6vw, 4.5rem);
    overflow: hidden;
    border: 1px solid rgba(148, 176, 255, .18);
    border-radius: 1.5rem;
    background: rgba(12, 29, 66, .6);
    box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .8);
}

.hx-manager-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1.2rem;
    color: #7f8db0;
    font-size: .8rem;
}

.hx-manager-bar div { display: inline-flex; align-items: center; gap: .5rem; color: #fff; font-weight: 600; }
.hx-manager-bar .landing-icon { width: 1rem; height: 1rem; color: var(--hx-cyan); }

.hx-manager-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .4rem;
    padding: 0 .6rem .6rem;
}

.hx-manager-tabs button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    border: 1px solid transparent;
    border-radius: .85rem;
    background: rgba(255, 255, 255, .04);
    padding: .8rem 1rem;
    color: var(--hx-on-dark-muted);
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.hx-manager-tabs button:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.hx-manager-tabs button.is-selected { border-color: rgba(90, 215, 255, .4); background: rgba(47, 107, 255, .22); color: #fff; }
.hx-manager-num { color: var(--hx-cyan); font-family: var(--hx-mono); font-size: .75rem; }

.hx-manager-screen { background: #0a1733; }
.hx-manager-screen > a { display: block; padding: 0 .6rem; }
.hx-manager-screen img { width: 100%; border-radius: .8rem .8rem 0 0; }

.hx-manager-screen figcaption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    border-top: 1px solid rgba(148, 176, 255, .12);
    padding: 1rem 1.25rem;
    font-size: .88rem;
}

.hx-manager-screen figcaption div { display: grid; gap: .1rem; }
.hx-manager-screen figcaption strong { color: #fff; }
.hx-manager-screen figcaption span { color: var(--hx-on-dark-muted); }
.hx-manager-screen figcaption > a { color: var(--hx-cyan); font-weight: 600; }

.hx-manager-reqs {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 1rem 3rem;
    margin-top: 1.5rem;
    color: #7f8db0;
    font-size: .85rem;
}

.hx-manager-reqs p:first-child { display: flex; gap: .6rem; }
.hx-manager-reqs strong { color: #dbe4fb; }
.hx-manager-reqs .landing-icon { width: 1.1rem; height: 1.1rem; color: var(--hx-cyan); }

/* How it works */

.hx-how { background: #fff; }

.hx-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}

.hx-steps::before {
    content: "";
    position: absolute;
    top: 1.75rem;
    left: 3.5rem;
    right: calc((100% - 5rem) / 3);
    height: 2px;
    background: linear-gradient(90deg, var(--hx-blue), var(--hx-cyan), var(--hx-mint));
    opacity: .35;
}

.hx-steps li { position: relative; display: grid; align-content: start; justify-items: start; gap: .7rem; }

.hx-step-node {
    display: grid;
    width: 3.5rem;
    height: 3.5rem;
    place-items: center;
    margin-bottom: .6rem;
    border-radius: 1.1rem;
    background: linear-gradient(135deg, #4a86ff, var(--hx-blue-deep));
    color: #fff;
    box-shadow: 0 0 0 8px #fff, 0 16px 30px -12px rgba(23, 71, 214, .7);
}

.hx-step-num { color: var(--hx-blue-deep); font-family: var(--hx-mono); font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.hx-steps h3 { font-size: 1.3rem; }
.hx-steps p { color: var(--hx-muted); }

/* Trust */

.hx-trust {
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(40rem 24rem at 0% 0%, rgba(47, 107, 255, .28), transparent 65%),
        linear-gradient(160deg, var(--hx-ink-2), var(--hx-night));
    color: var(--hx-on-dark);
}

.hx-trust::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(148, 176, 255, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 176, 255, .06) 1px, transparent 1px);
    background-size: 4rem 4rem;
    mask-image: radial-gradient(ellipse 60% 70% at 80% 50%, #000, transparent 75%);
}

.hx-trust-grid { display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: clamp(2.5rem, 6vw, 5rem); }
.hx-trust-copy { display: grid; justify-items: start; gap: 1.3rem; }
.hx-trust h2 { color: #fff; }
.hx-trust-copy > p { color: var(--hx-on-dark-muted); font-size: 1.04rem; }

.hx-transparent {
    margin-top: .8rem;
    border-left: 3px solid var(--hx-mint);
    border-radius: 0 .9rem .9rem 0;
    background: rgba(52, 217, 160, .07);
    padding: 1rem 1.2rem;
}

.hx-transparent strong { color: #bff5e0; }
.hx-transparent p { margin-top: .25rem; color: var(--hx-on-dark-muted); font-size: .9rem; }

.hx-principles { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.hx-principles article {
    display: grid;
    align-content: start;
    gap: .75rem;
    border: 1px solid rgba(148, 176, 255, .15);
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, .04);
    padding: 1.5rem;
    transition: transform .35s var(--hx-ease), border-color .35s ease;
}

.hx-principles article:hover { transform: translateY(-3px); border-color: rgba(90, 215, 255, .35); }
.hx-principles strong { color: #fff; font-size: 1.05rem; }
.hx-principles p { color: var(--hx-on-dark-muted); font-size: .9rem; }

/* Pricing */

.hx-pricing { background: var(--hx-paper); }
.hx-is-shop .hx-pricing { padding-top: clamp(8.5rem, 12vw, 10rem); }

.hx-pricing h1 {
    font-size: clamp(2.3rem, 5vw, 3.8rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -.045em;
}

.hx-pricing-controls {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.5rem 2.25rem;
    margin-bottom: 1.75rem;
    border: 1px solid var(--hx-line);
    border-radius: 1.4rem;
    background: #fff;
    padding: 1.15rem 1.5rem;
    box-shadow: 0 20px 50px -35px rgba(11, 23, 51, .4);
}

.hx-toggle { display: inline-flex; gap: .25rem; border-radius: 999px; background: var(--hx-paper); padding: .3rem; }

.hx-toggle-option {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    padding: .6rem 1.1rem;
    color: var(--hx-muted);
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.hx-toggle-option.active { background: var(--hx-text); color: #fff; box-shadow: 0 8px 18px -10px rgba(11, 23, 51, .8); }
.hx-toggle-option small { border-radius: 999px; background: var(--hx-mint); padding: .1rem .45rem; color: #053d2a; font-size: .68rem; font-weight: 700; }

.hx-seats { display: grid; gap: .55rem; }
.hx-seats-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .9rem; }

.hx-seats-input {
    width: 5.5rem;
    border: 1px solid #cdd7e6;
    border-radius: .7rem;
    background: var(--hx-paper);
    padding: .45rem .6rem;
    font-family: var(--hx-mono);
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
}

.hx-seats small { display: flex; justify-content: space-between; color: var(--hx-muted); font-family: var(--hx-mono); font-size: .72rem; }

.hx-range {
    width: 100%;
    height: .45rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--hx-blue) var(--fill, 0%), #dfe6f2 var(--fill, 0%));
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.hx-range::-webkit-slider-thumb {
    width: 1.4rem;
    height: 1.4rem;
    border: 4px solid var(--hx-blue);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 12px rgba(23, 71, 214, .4);
    -webkit-appearance: none;
    appearance: none;
}

.hx-range::-moz-range-thumb {
    width: 1rem;
    height: 1rem;
    border: 4px solid var(--hx-blue);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 12px rgba(23, 71, 214, .4);
}

.hx-fit { display: grid; justify-items: end; text-align: right; }
.hx-fit span { color: var(--hx-muted); font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.hx-fit strong { font-size: 1.1rem; }

.hx-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
    align-items: stretch;
    gap: 1.25rem;
}

.hx-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border: 1px solid var(--hx-line);
    border-radius: 1.6rem;
    background: #fff;
    padding: 2.4rem 1.75rem 1.75rem;
    transition: transform .35s var(--hx-ease), box-shadow .35s var(--hx-ease);
}

.hx-plan:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -35px rgba(11, 23, 51, .45); }

.hx-plan.recommended {
    border-color: transparent;
    background:
        radial-gradient(26rem 16rem at 100% 0%, rgba(47, 107, 255, .45), transparent 70%),
        linear-gradient(165deg, var(--hx-ink-2), var(--hx-ink));
    color: var(--hx-on-dark);
    box-shadow: 0 0 0 1px rgba(90, 215, 255, .35), 0 40px 80px -30px rgba(23, 71, 214, .7);
}

.hx-plan-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; min-height: 6.75rem; }
.hx-plan-top > div { display: grid; justify-items: start; gap: .35rem; }
.hx-plan-label { color: var(--hx-muted); font-size: .8rem; font-weight: 600; }
.hx-plan.recommended .hx-plan-label { padding-right: 5.5rem; }
.hx-plan h3 { font-size: 1.45rem; letter-spacing: -.03em; }
.hx-plan.recommended h3 { color: #fff; }
.hx-plan.recommended .hx-plan-label { color: var(--hx-on-dark-muted); }

.hx-plan-meet {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border-radius: 999px;
    background: #e3ecff;
    padding: .2rem .6rem;
    color: var(--hx-blue-deep);
    font-size: .74rem;
    font-weight: 700;
}

.hx-plan-meet .landing-icon { width: .95rem; height: .95rem; }
.hx-plan.recommended .hx-plan-meet { background: rgba(90, 215, 255, .14); color: #bdeeff; }

.hx-fit-badge {
    position: absolute;
    top: 1.1rem;
    right: 1.1rem;
    border-radius: 999px;
    background: var(--hx-mint);
    padding: .3rem .7rem;
    color: #053d2a;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.hx-price { display: flex; align-items: flex-end; gap: .6rem; }
.hx-price strong { font-size: clamp(2.5rem, 3.6vw, 3.2rem); font-weight: 700; line-height: 1; letter-spacing: -.05em; }
.hx-price span { padding-bottom: .3rem; color: var(--hx-muted); font-size: .8rem; line-height: 1.25; }
.hx-plan.recommended .hx-price span { color: var(--hx-on-dark-muted); }

.hx-estimate, .hx-plan-note { color: var(--hx-muted); font-size: .88rem; }
.hx-estimate b { color: var(--hx-text); font-weight: 700; }
.hx-estimate small { display: block; font-size: .8rem; }
.hx-plan.recommended :is(.hx-estimate, .hx-plan-note) { color: var(--hx-on-dark-muted); }
.hx-plan.recommended .hx-estimate b { color: #fff; }

.hx-plan-trial {
    border-radius: .9rem;
    background: rgba(52, 217, 160, .1);
    padding: .8rem .9rem;
    color: var(--hx-muted);
    font-size: .8rem;
    line-height: 1.5;
}

.hx-plan-trial strong { display: block; margin-bottom: .2rem; color: #07794f; font-size: .85rem; }
.hx-plan.recommended .hx-plan-trial { color: var(--hx-on-dark-muted); }
.hx-plan.recommended .hx-plan-trial strong { color: #7ff3c8; }

.hx-plan-features { display: grid; gap: .6rem; margin: .5rem 0 1.25rem; border-top: 1px solid var(--hx-line); padding-top: 1.25rem; }
.hx-plan.recommended .hx-plan-features { border-color: rgba(255, 255, 255, .1); }
.hx-plan-features li { display: flex; align-items: flex-start; gap: .6rem; font-size: .92rem; }
.hx-plan-features .landing-icon { width: 1.1rem; height: 1.1rem; margin-top: .15rem; color: var(--hx-blue); stroke-width: 2.4; }
.hx-plan.recommended .hx-plan-features .landing-icon { color: var(--hx-mint); }

.hx-plan-button { width: 100%; margin-top: auto; padding-block: .8rem; line-height: 1.25; text-align: center; white-space: normal; }

.hx-pricing-note { margin-top: 1.75rem; color: var(--hx-muted); font-size: .85rem; text-align: center; }
.hx-pricing-note strong { color: var(--hx-text); }

/* Story */

.hx-story { background: #fff; }

.hx-quote-card { display: grid; grid-template-columns: 1.35fr 1fr; gap: 1.25rem; }

.hx-quote {
    position: relative;
    display: grid;
    align-content: space-between;
    gap: 2.5rem;
    overflow: hidden;
    border-radius: 1.75rem;
    background:
        radial-gradient(30rem 20rem at 0% 0%, rgba(90, 215, 255, .25), transparent 70%),
        linear-gradient(150deg, #1747d6, #0c1d42 75%);
    padding: clamp(2rem, 4vw, 3.25rem);
    color: #fff;
}

.hx-quote-mark {
    position: absolute;
    top: -1.5rem;
    right: 1.5rem;
    color: rgba(255, 255, 255, .1);
    font-size: 14rem;
    font-weight: 700;
    line-height: 1;
}

.hx-quote blockquote {
    position: relative;
    font-size: clamp(1.35rem, 2.3vw, 1.95rem);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -.02em;
}

.hx-quote footer { display: flex; align-items: center; gap: .9rem; }
.hx-quote footer div { display: grid; line-height: 1.3; }
.hx-quote footer small { color: #b8c8f0; }

.hx-outcomes { display: grid; gap: .75rem; counter-reset: outcome; }

.hx-outcomes li {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1rem;
    border: 1px solid var(--hx-line);
    border-radius: 1.2rem;
    background: var(--hx-paper);
    padding: 1.35rem;
    counter-increment: outcome;
}

.hx-outcomes li::before {
    content: "0" counter(outcome);
    grid-row: span 2;
    color: var(--hx-blue);
    font-family: var(--hx-mono);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.8;
}

.hx-outcomes p { color: var(--hx-muted); font-size: .9rem; }

/* FAQ */

.hx-faq { border-top: 1px solid var(--hx-line); background: #fff; }
.hx-faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; align-items: start; gap: clamp(2.5rem, 6vw, 5rem); }
.hx-faq-intro { position: sticky; top: 7rem; display: grid; justify-items: start; gap: 1rem; }
.hx-faq-intro > p:not(.hx-kicker) { color: var(--hx-muted); }

.hx-faq-list details { border-bottom: 1px solid var(--hx-line); }
.hx-faq-list details:first-child { border-top: 1px solid var(--hx-line); }

.hx-faq-list summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.35rem 0;
    font-size: 1.06rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    transition: color .2s ease;
}

.hx-faq-list summary::-webkit-details-marker { display: none; }
.hx-faq-list summary:hover { color: var(--hx-blue-deep); }

.hx-faq-icon {
    position: relative;
    width: 2rem;
    height: 2rem;
    flex: none;
    border: 1px solid var(--hx-line);
    border-radius: 50%;
    transition: background-color .25s ease, border-color .25s ease, transform .35s var(--hx-ease);
}

.hx-faq-icon::before,
.hx-faq-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: .7rem;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transform: translate(-50%, -50%);
}

.hx-faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .35s var(--hx-ease); }
.hx-faq-list details[open] .hx-faq-icon { border-color: var(--hx-blue); background: var(--hx-blue); color: #fff; }
.hx-faq-list details[open] .hx-faq-icon::after { transform: translate(-50%, -50%) rotate(0); }
.hx-faq-list details p { max-width: 42rem; padding: 0 3rem 1.5rem 0; color: var(--hx-muted); }

/* Finale: trial + final CTA */

.hx-finale {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(5rem, 9vw, 8rem) 0 clamp(4rem, 7vw, 6rem);
    background: linear-gradient(180deg, #0a1a3f 0%, var(--hx-night) 100%);
    color: var(--hx-on-dark);
}

.hx-finale-glow {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(46rem 30rem at 15% 0%, rgba(47, 107, 255, .4), transparent 65%),
        radial-gradient(40rem 26rem at 100% 45%, rgba(52, 217, 160, .12), transparent 65%);
}

.hx-trial-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(2.5rem, 6vw, 5rem); }
.hx-trial-copy { display: grid; align-content: start; justify-items: start; gap: 1.25rem; }
.hx-finale h2 { color: #fff; }
.hx-trial-copy > p { color: var(--hx-on-dark-muted); font-size: 1.04rem; }
.hx-trial-duration strong { color: #fff; }

.hx-trial-steps { display: grid; gap: .8rem; }

.hx-trial-steps li {
    display: flex;
    gap: 1.1rem;
    border: 1px solid rgba(148, 176, 255, .15);
    border-radius: 1.2rem;
    background: rgba(255, 255, 255, .045);
    padding: 1.35rem;
    backdrop-filter: blur(8px);
}

.hx-trial-steps li > span {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
    place-items: center;
    border-radius: .8rem;
    background: rgba(90, 215, 255, .12);
    color: var(--hx-cyan);
    font-family: var(--hx-mono);
    font-size: .8rem;
    font-weight: 600;
}

.hx-trial-steps h3 { margin-bottom: .3rem; color: #fff; }
.hx-trial-steps p { color: var(--hx-on-dark-muted); font-size: .9rem; }

.hx-final {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    align-items: end;
    gap: 2rem 4rem;
    margin-top: clamp(4rem, 8vw, 6.5rem);
    border-top: 1px solid rgba(148, 176, 255, .15);
    padding-top: clamp(3rem, 6vw, 4.5rem);
}

.hx-final > div:first-child { display: grid; justify-items: start; gap: 1.2rem; }
.hx-final h2 { font-size: clamp(2.3rem, 5vw, 4.2rem); }
.hx-final > div:last-child { display: grid; gap: 1.5rem; }
.hx-final > div:last-child > p { color: var(--hx-on-dark-muted); font-size: 1.05rem; }

/* Footer */

.hx-footer { background: var(--hx-night); color: #7f8db0; padding: 4rem 0 2rem; font-size: .9rem; }

.hx-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, minmax(0, .8fr)) 1.3fr;
    gap: 2.5rem;
}

.hx-footer-grid > div { display: grid; align-content: start; gap: .7rem; }
.hx-footer-grid strong { color: #fff; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; }
.hx-footer-grid a { color: #a3b1cf; transition: color .2s ease; }
.hx-footer-grid a:hover { color: #fff; }

.hx-footer-logo { display: block; width: 9rem; border-radius: .8rem; background: #fff; padding: .45rem .7rem; }

.hx-footer-note {
    border: 1px solid rgba(148, 176, 255, .14);
    border-radius: 1rem;
    padding: 1.1rem;
}

.hx-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 3rem;
    border-top: 1px solid rgba(148, 176, 255, .1);
    padding-top: 1.5rem;
    font-size: .82rem;
}

.hx-motto { color: #5d6b8c; letter-spacing: .08em; }

/* ---------- Motion ---------- */

@keyframes hx-enter { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes hx-wipe { from { clip-path: inset(0 100% 0 0 round .55rem); } to { clip-path: inset(0 0 0 0 round .55rem); } }
@keyframes hx-scan { 0% { left: 0; opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes hx-blink { 50% { opacity: .55; } }
@keyframes hx-tick { to { transform: rotate(360deg); } }
@keyframes hx-drift { to { transform: translate(4rem, -2rem) scale(1.1); } }
@keyframes hx-shimmer { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes hx-pulse { 0% { box-shadow: 0 0 0 0 rgba(52, 217, 160, .55); } 70%, 100% { box-shadow: 0 0 0 .6rem rgba(52, 217, 160, 0); } }
@keyframes hx-rise { from { opacity: 0; transform: translateY(2rem); } to { opacity: 1; transform: none; } }
@keyframes hx-flatten { from { transform: rotateY(-12deg) rotateX(6deg) scale(.96); } to { transform: rotateY(0) rotateX(0) scale(1); } }

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .hx-reveal {
            animation: hx-rise linear both;
            animation-timeline: view();
            animation-range: entry 5% entry 55%;
        }

        .hx-shot-frame {
            animation: hx-flatten linear both;
            animation-timeline: view();
            animation-range: entry 10% cover 45%;
        }

        .hx-shot:hover .hx-shot-frame { transform: none; }
    }
}

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

    .hx-shot-frame { transform: none; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
    .hx-nav-links { display: none; }
    .hx-hero-aside { grid-template-columns: 1fr; max-width: 42rem; gap: 1.4rem; }
    .hx-hero-lede { grid-row: auto; }
    .hx-proof-grid { grid-template-columns: 1fr; }
    .hx-shot { max-width: 52rem; }
    .hx-shot-callout { position: static; max-width: none; margin-top: 1rem; box-shadow: none; }
    .hx-nav-actions { margin-left: auto; }
    .hx-ribbon { --person: 10.5rem; --worked: 8.8rem; --gap: 1rem; }
    .hx-b-time, .hx-b-activity { grid-column: span 12; }
    .hx-b-evidence, .hx-b-dash, .hx-b-report { grid-column: span 6; }
    .hx-b-report { grid-column: span 12; }
    .hx-footer-grid { grid-template-columns: 1fr 1fr 1fr; }
    .hx-footer-brand, .hx-footer-note { grid-column: span 3; }
}

@media (max-width: 900px) {
    .hx-hero-top,
    .hx-heading-split,
    .hx-proof-grid,
    .hx-meet-layout,
    .hx-manager-intro,
    .hx-trust-grid,
    .hx-quote-card,
    .hx-faq-grid,
    .hx-trial-grid,
    .hx-final,
    .hx-manager-reqs { grid-template-columns: 1fr; }

    .hx-shot-callout { position: static; max-width: none; margin-top: 1rem; box-shadow: none; }
    .hx-meet-caps { grid-template-columns: 1fr; }
    .hx-steps { grid-template-columns: 1fr; gap: 2rem; }
    .hx-steps::before { top: 1.75rem; bottom: 1.75rem; left: 1.75rem; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--hx-blue), var(--hx-cyan), var(--hx-mint)); }
    .hx-steps li { grid-template-columns: 3.5rem 1fr; column-gap: 1.25rem; }
    .hx-steps li > :not(.hx-step-node) { grid-column: 2; }
    .hx-step-node { grid-row: span 3; margin-bottom: 0; }
    .hx-pricing-controls { grid-template-columns: 1fr; }
    .hx-fit { justify-items: start; text-align: left; }
    .hx-faq-intro { position: static; }
    .hx-b-agent { grid-template-columns: 1fr; gap: 1.5rem; }
}

@media (max-width: 720px) {
    .hx-shell { width: min(100% - 2rem, 78rem); }
    .hx-nav-actions { display: none; }
    .hx-menu { display: block; }
    .hx-brand { width: 6.4rem; }

    .hx-console-meta { display: none; }
    .hx-ribbon-head { grid-template-columns: 1fr; }
    .hx-ribbon-head > span { display: none; }
    .hx-ribbon-hours span:first-child { display: none; }

    .hx-ribbon-row {
        grid-template-columns: 1fr auto;
        row-gap: .6rem;
    }

    .hx-ribbon-row .hx-track { grid-column: 1 / -1; grid-row: 2; }
    .hx-worked { grid-auto-flow: column; align-items: center; gap: .5rem; }
    .hx-scan { display: none; }
    .hx-legend { gap: .4rem .9rem; }

    .hx-b-time { grid-template-columns: 1fr; }
    .hx-b-evidence, .hx-b-dash { grid-column: span 12; }
    .hx-moments, .hx-principles { grid-template-columns: 1fr; }
    .hx-manager-tabs { grid-template-columns: 1fr; }
    .hx-faq-list details p { padding-right: 0; }
    .hx-footer-grid { grid-template-columns: 1fr 1fr; }
    .hx-footer-brand, .hx-footer-note { grid-column: span 2; }
    .hx-hero-actions .hx-btn { flex: 1 1 auto; }
}

@media (max-width: 460px) {
    .hx-worked strong { display: none; }
    .hx-viz-week div { grid-template-columns: 2.1rem 2.6rem 1fr 3.3rem; gap: .4rem; }
    .hx-viz-health div { grid-template-columns: auto 1fr; }
    .hx-viz-health small { grid-column: 2; justify-self: start; }
}