/* Front page layer. Loaded last by base_pivot.html through {% block page_assets %}
   and scoped to body.page-home with an hp- prefix, so none of the older public
   layers reach these elements. Every value derives from the :root tokens in
   styles.css. Light surfaces only: cream page, white cards, purple as accent. */

.page-home {
    --hp-fs-h1: clamp(2.125rem, 1.3rem + 2.6vw, 3.125rem);
    --hp-fs-h2: clamp(1.7rem, 1.2rem + 1.8vw, 2.5rem);
    --hp-fs-h3: clamp(1.15rem, 1.05rem + .45vw, 1.35rem);
    --hp-fs-lead: clamp(1.0625rem, 1rem + .35vw, 1.2rem);
    --hp-fs-body: 1.04rem;
    --hp-measure: 56ch;
    --hp-section: clamp(56px, 8vw, 104px);
    --hp-gap: clamp(28px, 4.5vw, 64px);
    --hp-card-pad: clamp(22px, 2.6vw, 32px);
    --hp-radius: 22px;
    --hp-radius-lg: 28px;
    --hp-surface: #fff;
    --hp-tint: var(--brand-grad-1);
    --hp-tint-2: var(--brand-grad-2);
    --hp-line: rgba(16, 16, 20, .09);
    --hp-text: #4b4a55;
    --hp-label: #6b6a75;
    --hp-shadow: 0 18px 50px rgba(16, 16, 20, .07);
    --hp-ease: cubic-bezier(.22, 1, .36, 1);
}

.page-home main { background: var(--paper); }
.page-home .swrl-chat-nudge { width: min(320px, calc(100vw - 36px)); }

/* Elements styles.css leaves to the browser. */
.page-home .hp-demo,
.page-home .hp-founder-photo { margin: 0; }
.page-home .hp-demo-steps,
.page-home .hp-step-fields,
.page-home .hp-how-list { margin: 0; padding: 0; list-style: none; }
.page-home .hp-step-fields dd { margin: 0; }

/* Type */
.page-home .hp-kicker {
    margin: 0 0 14px;
    color: var(--brand-ink);
    font: 800 .74rem/1.25 var(--font-display);
    letter-spacing: .12em;
    text-transform: uppercase;
}
.page-home .hp-h1 {
    max-width: none;
    margin: 0 0 20px;
    font-size: var(--hp-fs-h1);
    line-height: 1.04;
    letter-spacing: var(--track-display);
    text-wrap: balance;
}
.page-home .hp-h2 {
    max-width: 22ch;
    margin: 0 0 16px;
    font-size: var(--hp-fs-h2);
    line-height: 1.08;
    letter-spacing: var(--track-tight);
    text-wrap: balance;
}
.page-home .hp-h3 {
    margin: 0 0 8px;
    font-size: var(--hp-fs-h3);
    line-height: 1.22;
    letter-spacing: var(--track-h3);
}
.page-home .hp-lead {
    max-width: var(--hp-measure);
    margin: 0;
    color: var(--hp-text);
    font-size: var(--hp-fs-lead);
    line-height: 1.6;
}
.page-home .hp-text {
    max-width: var(--hp-measure);
    margin: 0;
    color: var(--hp-text);
    font-size: var(--hp-fs-body);
    line-height: 1.62;
}
.page-home .hp-text + .hp-text { margin-top: 12px; }
.page-home .hp-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--ink);
    font: 800 .95rem/1.3 var(--font-display);
    letter-spacing: -.005em;
}
.page-home .hp-link b {
    font-weight: 800;
    transition: transform .2s var(--hp-ease);
}
.page-home .hp-link:hover { color: var(--brand-ink); }
.page-home .hp-link:hover b { transform: translateX(3px); }
.page-home .hp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}
.page-home .hp-actions .button svg { width: 18px; height: 18px; }

/* Section rhythm: cream page, white bands, no full-bleed dark sections. */
.page-home .hp-section { padding: var(--hp-section) 0; }
.page-home .hp-section--white {
    background: var(--hp-surface);
    border-block: 1px solid var(--hp-line);
}
.page-home .hp-head { max-width: 720px; margin-bottom: clamp(28px, 4vw, 44px); }

/* Hero */
.page-home .hp-hero {
    position: relative;
    isolation: isolate;
    overflow: clip;
    background:
        radial-gradient(60rem 32rem at 88% -12%, rgba(135, 95, 170, .11), transparent 62%),
        radial-gradient(38rem 24rem at -4% 112%, rgba(40, 120, 216, .07), transparent 60%),
        var(--hp-surface);
    border-bottom: 1px solid var(--hp-line);
}
.page-home .hp-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    gap: var(--hp-gap);
    align-items: center;
    min-height: min(660px, calc(100svh - 66px));
    padding-block: clamp(44px, 7vw, 88px) clamp(40px, 6vw, 72px);
}
.page-home .hp-hero-copy { max-width: 620px; }

/* The product mockup: one call, answered, captured, booked, texted back. */
.page-home .hp-demo {
    position: relative;
    width: min(560px, 100%);
    justify-self: end;
    padding: 20px 24px 16px;
    background: var(--hp-surface);
    border: 1px solid var(--hp-line);
    border-radius: var(--hp-radius-lg);
    box-shadow: var(--hp-shadow);
}
.page-home .hp-demo-label {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--hp-line);
    color: var(--hp-label);
    font: 700 .7rem/1.2 var(--font-display);
    letter-spacing: .1em;
    text-transform: uppercase;
}
.page-home .hp-demo-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 3px var(--mint);
}
.page-home .hp-demo-steps { position: relative; }
.page-home .hp-demo-steps::before,
.page-home .hp-rail {
    position: absolute;
    top: 30px;
    bottom: 30px;
    left: 19px;
    width: 2px;
    border-radius: 2px;
    content: "";
}
.page-home .hp-demo-steps::before { background: var(--hp-line); }
.page-home .hp-rail { background: var(--brand); transform-origin: top; }
.page-home .hp-step {
    position: relative;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: start;
    padding: 11px 0;
}
.page-home .hp-step-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--hp-tint);
    color: var(--brand-ink);
    box-shadow: 0 0 0 4px var(--hp-surface);
}
.page-home .hp-step-icon svg { width: 18px; height: 18px; }
.page-home .hp-step-body { min-width: 0; padding-top: 3px; }
.page-home .hp-step-body small {
    display: block;
    margin-bottom: 3px;
    color: var(--hp-label);
    font: 700 .68rem/1.2 var(--font-display);
    letter-spacing: .09em;
    text-transform: uppercase;
}
.page-home .hp-step-body strong {
    display: block;
    font: 800 1.02rem/1.3 var(--font-display);
    letter-spacing: -.01em;
}
.page-home .hp-step-note {
    display: block;
    margin-top: 2px;
    color: var(--hp-text);
    font-size: .92rem;
    line-height: 1.45;
}
.page-home .hp-step-fields {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 8px;
    margin-top: 6px;
}
.page-home .hp-step-fields div {
    min-width: 0;
    padding: 8px 10px;
    background: var(--soft);
    border-radius: 10px;
}
.page-home .hp-step-fields dt {
    color: var(--hp-label);
    font: 700 .64rem/1.2 var(--font-display);
    letter-spacing: .08em;
    text-transform: uppercase;
}
.page-home .hp-step-fields dd {
    margin-top: 2px;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.page-home .hp-wave {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 40px;
    padding-right: 4px;
}
.page-home .hp-wave i {
    display: block;
    width: 3px;
    height: var(--h, 12px);
    border-radius: 2px;
    background: var(--brand);
    transform-origin: center;
}
.page-home .hp-step-badge {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin-top: 7px;
    border-radius: 50%;
    background: var(--mint);
    color: var(--green-ink);
}
.page-home .hp-step-badge svg { width: 14px; height: 14px; }
.page-home .hp-bubble {
    margin: 6px 0 0;
    padding: 10px 14px;
    background: var(--hp-tint-2);
    border-radius: 14px 14px 14px 4px;
    color: var(--ink-2);
    font-size: .92rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

/* The problem, in the owner's words, beside the phone that kept ringing. */
.page-home .hp-problem-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
    gap: var(--hp-gap);
    align-items: center;
}
.page-home .hp-problem .hp-h2 { max-width: 20ch; }
.page-home .hp-problem .hp-lead { max-width: 58ch; }
.page-home .hp-missed {
    width: min(360px, 100%);
    justify-self: end;
    padding: 16px 18px;
    background: var(--hp-surface);
    border: 1px solid var(--hp-line);
    border-radius: var(--hp-radius);
    box-shadow: var(--hp-shadow);
}
.page-home .hp-missed-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--hp-line);
    color: var(--hp-label);
    font: 700 .68rem/1.2 var(--font-display);
    letter-spacing: .09em;
    text-transform: uppercase;
}
.page-home .hp-missed-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--coral);
    box-shadow: 0 0 0 3px rgba(255, 107, 74, .18);
}
.page-home .hp-missed-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    color: var(--ink);
    font: 700 .95rem/1.2 var(--font-display);
}
.page-home .hp-missed-row + .hp-missed-row { border-top: 1px solid var(--hp-line); }
.page-home .hp-missed-row svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--coral-ink); }
.page-home .hp-missed-row em {
    margin-left: auto;
    color: var(--hp-label);
    font: 500 .8rem/1 var(--font-body);
    font-style: normal;
}
.page-home .hp-missed-row:nth-of-type(2) { opacity: .72; }
.page-home .hp-missed-row:nth-of-type(3) { opacity: .48; }
.page-home .hp-missed-foot {
    display: block;
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--hp-line);
    color: var(--ink-2);
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.4;
}

/* What we build: four cards, the phone line first and tinted. */
.page-home .hp-build-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.page-home .hp-build-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: var(--hp-card-pad);
    background: var(--hp-surface);
    border: 1px solid var(--hp-line);
    border-radius: var(--hp-radius);
}
.page-home .hp-build-card--phone {
    background: linear-gradient(160deg, var(--hp-tint), var(--hp-surface) 72%);
}
.page-home .hp-build-num {
    color: var(--brand-ink);
    font: 800 .78rem/1 var(--font-display);
    letter-spacing: .1em;
}
.page-home .hp-build-card .hp-h3 { margin: 6px 0 0; }
.page-home .hp-build-card .hp-text { max-width: none; }
.page-home .hp-build-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin-top: auto;
    padding-top: 10px;
}
.page-home .hp-build-note {
    max-width: 62ch;
    margin: clamp(28px, 4vw, 40px) 0 0;
    padding-left: 18px;
    border-left: 3px solid var(--brand);
    color: var(--ink-2);
    font-size: var(--hp-fs-lead);
    line-height: 1.55;
}

/* Card artifacts: one small, explanatory picture per system. The text inside
   repeats the card copy, so the block is decorative (aria-hidden). */
.page-home .hp-art {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    min-height: 132px;
    margin: 0 0 8px;
    padding: 16px;
    background: var(--soft);
    border-radius: 16px;
    overflow: hidden;
}
.page-home .hp-build-card--phone .hp-art { background: rgba(255, 255, 255, .74); }

.page-home .hp-art-wave {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 28px;
}
.page-home .hp-art-wave i {
    display: block;
    width: 3px;
    height: var(--h, 12px);
    border-radius: 2px;
    background: var(--brand);
    transform-origin: center;
}
.page-home .hp-art-line {
    display: inline-block;
    max-width: 86%;
    padding: 7px 11px;
    border-radius: 12px;
    color: var(--ink-2);
    font-size: .86rem;
    line-height: 1.35;
}
.page-home .hp-art-line--in {
    align-self: flex-start;
    background: var(--hp-surface);
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 0 rgba(16, 16, 20, .05);
}
.page-home .hp-art-line--out {
    align-self: flex-end;
    background: var(--hp-tint);
    border-bottom-right-radius: 4px;
}

.page-home .hp-art--flow { gap: 0; padding-block: 12px; }
.page-home .hp-flow-step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 0;
    color: var(--ink-2);
    font: 700 .84rem/1.25 var(--font-display);
}
.page-home .hp-flow-step b {
    position: relative;
    z-index: 1;
    display: block;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 0 4px var(--soft);
}
.page-home .hp-flow-step:not(:last-child)::after {
    position: absolute;
    top: 50%;
    left: 6px;
    width: 2px;
    height: 100%;
    background: var(--brand);
    opacity: .45;
    content: "";
}

.page-home .hp-art--hub { gap: 0; }
.page-home .hp-hub-chips {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}
.page-home .hp-hub-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 6px;
    background: var(--hp-surface);
    border-radius: 10px;
    color: var(--ink-2);
    font: 700 .72rem/1 var(--font-display);
    white-space: nowrap;
}
.page-home .hp-hub-chip svg { width: 13px; height: 13px; color: var(--brand-ink); }
.page-home .hp-hub-join {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    height: 18px;
}
.page-home .hp-hub-join i {
    display: block;
    width: 2px;
    height: 100%;
    margin: 0 auto;
    background: var(--brand);
    opacity: .55;
    transform-origin: top;
}
.page-home .hp-hub-core {
    display: block;
    padding: 10px;
    border-radius: 10px;
    background: var(--hp-tint);
    color: var(--brand-ink);
    font: 800 .76rem/1.2 var(--font-display);
    letter-spacing: .02em;
    text-align: center;
}

.page-home .hp-art--site {
    gap: 0;
    padding: 0;
    background: var(--hp-surface);
    border: 1px solid var(--hp-line);
}
.page-home .hp-site-bar {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 9px 12px;
    background: var(--soft);
    border-bottom: 1px solid var(--hp-line);
}
.page-home .hp-site-bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(16, 16, 20, .14); }
.page-home .hp-site-bar em { flex: 1; height: 8px; margin-left: 6px; border-radius: 4px; background: rgba(16, 16, 20, .07); }
.page-home .hp-site-body {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 14px;
}
.page-home .hp-site-copy { display: grid; flex: 1; gap: 7px; }
.page-home .hp-site-copy b {
    display: block;
    height: 9px;
    border-radius: 5px;
    background: rgba(16, 16, 20, .13);
    transform-origin: left;
}
.page-home .hp-site-copy b:nth-child(1) { width: 78%; height: 12px; background: rgba(16, 16, 20, .32); }
.page-home .hp-site-copy b:nth-child(2) { width: 92%; }
.page-home .hp-site-copy b:nth-child(3) { width: 60%; }
.page-home .hp-site-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    font: 800 .74rem/1 var(--font-display);
    white-space: nowrap;
}
.page-home .hp-site-cta svg { width: 12px; height: 12px; }

/* How it works with Swrl. */
.page-home .hp-how {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
    gap: var(--hp-gap);
    align-items: start;
}
.page-home .hp-how-list {
    counter-reset: hp-how;
    display: grid;
    gap: 20px;
    margin-top: 10px;
}
.page-home .hp-how-list li {
    counter-increment: hp-how;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
}
.page-home .hp-how-list li::before {
    padding-top: 5px;
    color: var(--brand-ink);
    font: 800 .78rem/1 var(--font-display);
    letter-spacing: .1em;
    content: counter(hp-how, decimal-leading-zero);
}
.page-home .hp-how-list strong {
    display: block;
    margin-bottom: 4px;
    font: 800 1.08rem/1.3 var(--font-display);
    letter-spacing: -.01em;
}
.page-home .hp-how-list p {
    max-width: 48ch;
    margin: 0;
    color: var(--hp-text);
    line-height: 1.55;
}
.page-home .hp-how-aside {
    padding: var(--hp-card-pad);
    background: var(--hp-tint);
    border-radius: var(--hp-radius);
}
.page-home .hp-how-aside .hp-h3 { margin-top: 4px; }
.page-home .hp-how-aside .button { margin-top: 18px; }

/* Hear it yourself: the demo line, only rendered when a number is configured. */
.page-home .hp-call { text-align: center; }
.page-home .hp-call-card {
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(36px, 5vw, 56px) var(--hp-card-pad);
    background: linear-gradient(180deg, var(--hp-tint), var(--hp-surface));
    border: 1px solid var(--hp-line);
    border-radius: var(--hp-radius-lg);
}
.page-home .hp-call-wave {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 36px;
    margin: 0 auto 16px;
}
.page-home .hp-call-wave i {
    display: block;
    width: 4px;
    height: var(--h, 12px);
    border-radius: 2px;
    background: var(--brand);
    transform-origin: center;
}
.page-home .hp-call-card .hp-h2,
.page-home .hp-call-card .hp-text { margin-inline: auto; }
.page-home .hp-call-card .hp-actions { justify-content: center; }
.page-home .hp-call-card .muted {
    margin: 16px 0 0;
    color: var(--hp-label);
    font-size: .9rem;
}

/* Who builds it. */
.page-home .hp-founder {
    display: grid;
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
    gap: var(--hp-gap);
    align-items: center;
}
.page-home .hp-founder-photo img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center 18%;
    border-radius: var(--hp-radius);
}
.page-home .hp-founder-copy .hp-link { margin-top: 18px; }

/* Closing call to action. */
.page-home .hp-close { text-align: center; }
.page-home .hp-close .hp-h2,
.page-home .hp-close .hp-text { margin-inline: auto; }
.page-home .hp-close .hp-actions { justify-content: center; }
.page-home .hp-close-mail {
    display: inline-block;
    margin-top: 18px;
    color: var(--hp-text);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(16, 16, 20, .3);
    text-underline-offset: 3px;
}
.page-home .hp-close-mail:hover { color: var(--ink); text-decoration-color: currentColor; }

/* Breakpoints */
@media (max-width: 960px) {
    .page-home .hp-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }
    .page-home .hp-hero-copy { max-width: 640px; }
    .page-home .hp-demo { justify-self: start; }
    .page-home .hp-problem-grid { grid-template-columns: minmax(0, 1fr); }
    .page-home .hp-missed { justify-self: start; }
    .page-home .hp-how { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
    .page-home .hp-build-grid { grid-template-columns: minmax(0, 1fr); }
    .page-home .hp-founder { grid-template-columns: minmax(0, 1fr); }
    .page-home .hp-founder-photo { max-width: 220px; }
    .page-home .hp-step-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .page-home .hp-step-fields div:last-child { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
    .page-home .hp-actions .button { width: 100%; }
    .page-home .hp-demo { padding: 16px 16px 12px; }
    .page-home .hp-step {
        grid-template-columns: 34px minmax(0, 1fr) auto;
        gap: 10px;
    }
    .page-home .hp-step-icon { width: 34px; height: 34px; }
    .page-home .hp-demo-steps::before,
    .page-home .hp-rail { top: 26px; bottom: 26px; left: 16px; }
    .page-home .hp-wave { height: 34px; }
}

/* Motion: the mockup plays its sequence once, when studio-redesign.js marks
   [data-motion] with .is-inview. Without JavaScript the finished state is the
   default. If the observer never fires, a late fallback still reveals it. */
.js .page-home .hp-demo:not(.is-inview) .hp-step {
    opacity: 0;
    animation: hp-step-fallback .6s var(--hp-ease) both;
    animation-delay: calc(2.4s + var(--i) * .3s);
}
.js .page-home .hp-demo:not(.is-inview) .hp-rail {
    transform: scaleY(0);
    animation: hp-rail-fallback .8s linear both;
    animation-delay: 2.6s;
}
.js .page-home .hp-demo.is-inview .hp-step {
    animation: hp-step-in .6s var(--hp-ease) both;
    animation-delay: calc(.1s + var(--i) * .8s);
}
.js .page-home .hp-demo.is-inview .hp-rail {
    animation: hp-rail-in 2.6s linear both;
    animation-delay: .35s;
}
.js .page-home .hp-demo.is-inview .hp-wave i {
    animation: hp-wave .5s ease-in-out 6 alternate;
    animation-delay: calc(.5s + var(--w) * .08s);
}
/* Card artifacts and the problem card play once when they enter the viewport. */
.js .page-home .hp-art:not(.is-inview) .hp-art-line,
.js .page-home .hp-art:not(.is-inview) .hp-flow-step,
.js .page-home .hp-art:not(.is-inview) .hp-hub-chip,
.js .page-home .hp-art:not(.is-inview) .hp-hub-core,
.js .page-home .hp-art:not(.is-inview) .hp-site-cta,
.js .page-home .hp-missed:not(.is-inview) .hp-missed-row,
.js .page-home .hp-missed:not(.is-inview) .hp-missed-foot {
    opacity: 0;
    animation: hp-step-fallback .5s var(--hp-ease) both;
    animation-delay: 2.4s;
}
.js .page-home .hp-art:not(.is-inview) .hp-site-copy b {
    transform: scaleX(0);
    animation: hp-grow .5s var(--hp-ease) both;
    animation-delay: 2.4s;
}
.js .page-home .hp-art:not(.is-inview) .hp-hub-join i {
    transform: scaleY(0);
    animation: hp-grow-y .5s var(--hp-ease) both;
    animation-delay: 2.4s;
}
.js .page-home .hp-art.is-inview .hp-art-line,
.js .page-home .hp-art.is-inview .hp-flow-step,
.js .page-home .hp-art.is-inview .hp-hub-chip,
.js .page-home .hp-missed.is-inview .hp-missed-row {
    animation: hp-step-in .5s var(--hp-ease) both;
    animation-delay: calc(.1s + var(--i, 0) * .24s);
}
.js .page-home .hp-art.is-inview .hp-hub-join i {
    animation: hp-grow-y .45s var(--hp-ease) both;
    animation-delay: .75s;
}
.js .page-home .hp-art.is-inview .hp-hub-core {
    animation: hp-step-in .5s var(--hp-ease) both;
    animation-delay: 1s;
}
.js .page-home .hp-art.is-inview .hp-site-copy b {
    animation: hp-grow .55s var(--hp-ease) both;
    animation-delay: calc(.1s + var(--i, 0) * .16s);
}
.js .page-home .hp-art.is-inview .hp-site-cta {
    animation: hp-pop .5s var(--hp-ease) both;
    animation-delay: .7s;
}
.js .page-home .hp-missed.is-inview .hp-missed-foot {
    animation: hp-step-fallback .5s ease both;
    animation-delay: 1s;
}
.js .page-home .hp-art.is-inview .hp-art-wave i,
.js .page-home .hp-call-card.is-inview .hp-call-wave i {
    animation: hp-wave .5s ease-in-out 6 alternate;
    animation-delay: calc(.2s + var(--w) * .07s);
}
@keyframes hp-pop {
    from { opacity: 0; transform: scale(.82); }
    to { opacity: 1; transform: none; }
}
@keyframes hp-grow {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}
@keyframes hp-grow-y {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}
@keyframes hp-step-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}
@keyframes hp-step-fallback {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes hp-rail-in {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}
@keyframes hp-rail-fallback {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}
@keyframes hp-wave {
    from { transform: scaleY(.35); }
    to { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
    .js .page-home .hp-demo .hp-step,
    .js .page-home .hp-demo:not(.is-inview) .hp-step {
        opacity: 1;
        transform: none;
        animation: none !important;
    }
    .js .page-home .hp-demo .hp-rail,
    .js .page-home .hp-demo:not(.is-inview) .hp-rail {
        transform: scaleY(1);
        animation: none !important;
    }
    .js .page-home .hp-demo .hp-wave i { animation: none !important; }
    .js .page-home .hp-art .hp-art-line,
    .js .page-home .hp-art:not(.is-inview) .hp-art-line,
    .js .page-home .hp-art .hp-flow-step,
    .js .page-home .hp-art:not(.is-inview) .hp-flow-step,
    .js .page-home .hp-art .hp-hub-chip,
    .js .page-home .hp-art:not(.is-inview) .hp-hub-chip,
    .js .page-home .hp-art .hp-hub-core,
    .js .page-home .hp-art:not(.is-inview) .hp-hub-core,
    .js .page-home .hp-art .hp-site-cta,
    .js .page-home .hp-art:not(.is-inview) .hp-site-cta,
    .js .page-home .hp-missed .hp-missed-row,
    .js .page-home .hp-missed:not(.is-inview) .hp-missed-row,
    .js .page-home .hp-missed .hp-missed-foot,
    .js .page-home .hp-missed:not(.is-inview) .hp-missed-foot {
        opacity: 1;
        transform: none;
        animation: none !important;
    }
    .js .page-home .hp-art .hp-site-copy b,
    .js .page-home .hp-art:not(.is-inview) .hp-site-copy b,
    .js .page-home .hp-art .hp-hub-join i,
    .js .page-home .hp-art:not(.is-inview) .hp-hub-join i {
        transform: none;
        animation: none !important;
    }
    .js .page-home .hp-art .hp-art-wave i,
    .js .page-home .hp-call-card .hp-call-wave i { animation: none !important; }
    .page-home .hp-link b { transition: none; }
}